﻿.game .chosen-choices, .game-dialog .chosen-choices {
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
}

    .game .chosen-choices input, .game-dialog .chosen-choices input {
        width: 200px !important;
    }

.game .chosen-container .chosen-results, .game-dialog .chosen-container .chosen-results {
    max-height: 150px;
}

.game .chosen-container-single .chosen-single, .game-dialog .chosen-container-single .chosen-single {
    height: 34px !important;
    line-height: 29px !important;
}

    .game .chosen-container-single .chosen-single div b, .game-dialog .chosen-container-single .chosen-single div b {
        background-position-y: 6px !important;
    }

.game .search-wrap input, .game .search-wrap select {
    width: 100%;
}

.game .search-wrap button {
    width: 115px;
}

    .game .search-wrap button:first-child {
        margin-bottom: 10px;
    }

.game .paging-wrap, .game-dialog .paging-wrap {
    display: table;
    width: 100%;
    margin: 5px 0 5px 0;
}

    .game .paging-wrap .paging, .game-dialog .paging-wrap .paging {
        display: table-cell;
        width: 80%;
    }

    .game .paging-wrap .total-items, .game-dialog .paging-wrap .total-items {
        display: table-cell;
        text-align: right;
    }

.game .list.ui-widget-header, .game-dialog .list.ui-widget-header {
    padding: 3px;
    margin-bottom: 5px;
    display: block;
    line-height: 24px;
    height: 30px;
}

    .game .list.ui-widget-header > div, .game-dialog .list.ui-widget-header > div {
        float: left;
        margin-left: 0px;
    }


.game tr.odd, .game-dialog tr.odd {
    background-color: whitesmoke;
}

.game table tr.data:hover, .game-dialog table tr.data:hover {
    background-color: #eee;
}

.game div.help-wrap > div.highlight {
    background-color: whitesmoke;
}

/***********************/
.game .game-content div.image-box {
    width: 150px;
    height: 150px;
    min-width: 150px;
    min-height: 150px;
    border: 1px solid lightgray;
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;
}

    .game .game-content div.image-box img {
        width: 148px;
        height: 148px;
        min-width: 148px;
        min-height: 148px;
    }

.game-dialog div.image-box {
    width: 185px;
    height: 190px;
    min-width: 185px;
    min-height: 190px;
    border: 1px solid lightgray;
    cursor: pointer;
}

    .game-dialog div.image-box img {
        width: 183px;
        height: 188px;
        min-width: 183px;
        min-height: 188px;
    }

.game .game-content .game-map-tag {
    position: absolute !important;
    overflow: hidden;
    min-height: 22px;
    min-width: 22px;
}

    .game .game-content .game-map-tag.editing {
        background-color: rgba(255, 0, 0, 0.5);
        border: 1px solid rgba(255, 0, 0, 1);
        cursor: move;
    }

    .game .game-content .game-map-tag .name {
        color: white;
        font-weight: bold;
    }

    .game .game-content .game-map-tag .ui-rotatable-handle {
        height: 16px;
        width: 16px;
        cursor: pointer;
        background-image: url('Icons/Gamefication/rotate.png');
        background-size: 100%;
        position: absolute;
        top: 4px;
        left: 2px;
        bottom: 2px;
    }

.game-dialog .inconsistent-rules {
    background-color: yellow;
    font-weight: bold;
    font-size: 11pt;
}

.game div.help i, .game-dialog div.help i {
    color: blue;
    font-size: 1.4em;
}

.Web-Lms-Gamefication-Manager .ui-selectmenu-menu .ui-menu .ui-menu-item .ui-icon {
    height: 24px;
    width: 24px;
    top: 0.1em;
}

.Web-Lms-Gamefication-Manager option.avatar {
    background-repeat: no-repeat !important;
    padding-left: 20px;
}

.Web-Lms-Gamefication-Manager .avatar .ui-icon {
    background-position: left top;
}

.Web-Lms-Gamefication-Manager .ui-selectmenu-button span.ui-selectmenu-text {
    line-height: 2em !important;
}

.Web-Lms-Gamefication-Manager .ui-menu-icons .ui-menu-item {
    min-height: 32px !important;
    padding-left: 3.5em !important;
}

.Web-Lms-Gamefication-Manager .ui-icon.avatar {
    width: 32px;
    height: 32px;
}

.game-dialog span.ui-selectmenu-text {
    line-height: 2em;
}

.game-dialog .ui-selectmenu-button {
    height: 32px;
    background: #eee url(images/ui-bg_gloss-wave_90_eeeeee_500x100.png) 50% 50% repeat-x;
    border-radius: 2px;
    display: inline-block;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    cursor: pointer;
}

.game-dialog .ui-icon-triangle-1-s {
    right: 0.5em;
    left: auto;
    margin-top: -8px;
    position: absolute;
    top: 50%;
    display: block;
    vertical-align: unset;
}

.game-dialog .ui-selectmenu-text {
    text-align: left;
    padding-left: 0.5rem;
    display: block;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-menu-item {
    position: relative;
    margin: 0;
    padding: 3px 1em 3px .4em;
    cursor: pointer;
}

.ui-menu-item > div {
        display: flex;
        align-items: center;
    }

.game-dialog .list .ui-widget-header {
    padding: 3px;
    margin-bottom: 5px;
    display: block;
    line-height: 24px;
    height: 32px;
}

    .game-dialog .list .ui-widget-header > div {
        float: left;
        margin-left: 0px;
    }

.game-dialog table.list {
    width: 100%;
    max-height: 200px;
    overflow: auto;
}

    .game-dialog table.list tr {
        border-bottom: 1px solid lightgray;
    }

        .game-dialog table.list tr:hover {
            background-color: #eee;
        }

.game #animated-maps .avatar-wrapper,
.game-student-view .avatar-wrapper {
    position: absolute;
    background-color: transparent;
}

    .game #animated-maps .avatar-wrapper .avatar-background,
    .game-student-view .avatar-wrapper .avatar-background {
        position: absolute;
        border: 2px solid #ccc;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: wheat;
        opacity: 1;
        left: 0;
        z-index: 1;
    }

        .game #animated-maps .avatar-wrapper .avatar-background::after,
        .game-student-view .avatar-wrapper .avatar-background::after {
            content: '';
            position: relative;
            display: block;
            width: 50%;
            height: 50%;
            background-color: wheat;
            transform: rotate(46.3deg);
            z-index: -1;
            border-bottom: 2px solid #ccc;
            border-right: 2px solid #ccc;
            top: 75.8%;
            left: 25%;
            opacity: 1;
        }

    .avatar-background {
        display: none !important;
    }

    .game #animated-maps .avatar-wrapper .avatar-image-wrapper,
    .game-student-view .avatar-wrapper .avatar-image-wrapper {
        width: 100%;
        height: 100%;
        text-align: center;
        display: table;
    }

        .game #animated-maps .avatar-wrapper .avatar-image-wrapper .avatar-image-box,
        .game-student-view .avatar-wrapper .avatar-image-wrapper .avatar-image-box {
            display: table-cell;
            vertical-align: middle;
        }

            .game #animated-maps .avatar-wrapper .avatar-image-wrapper .avatar-image-box img,
            .game-student-view .avatar-wrapper .avatar-image-wrapper .avatar-image-box img {
                position: relative;
                z-index: 1;
                width: 100%;
                height: 100%;
            }

.game #animated-maps .legend {
    margin-bottom: 10px;
}

    .game #animated-maps .legend img.default-marker {
        width: 16px;
        height: 16px;
    }

    .game #animated-maps .legend div.addition-tag {
        height: 16px;
        width: 16px;
        display: inline-block;
        border-radius: 8px;
        background-color: #99F;
        opacity: 0.5;
        border: 2px solid #00F;
    }

.game #animated-maps .useful-area {
    margin-bottom: 10px;
}

    .game #animated-maps .useful-area span {
        cursor: pointer;
    }

        .game #animated-maps .useful-area span:hover {
            text-decoration: underline;
        }

.game #animated-maps .boundary {
    background-color: red;
    opacity: 0.3;
    z-index: 1;
}

    .game #animated-maps .boundary.bottom {
        top: 0;
        height: 70px;
        position: absolute;
        border-bottom: 5px dashed white;
    }

    .game #animated-maps .boundary.left,
    .game #animated-maps .boundary.right {
        position: relative;
        top: 0;
        width: 70px;
    }

    .game #animated-maps .boundary.left {
        float: left;
        border-right: 5px dashed white;
    }

    .game #animated-maps .boundary.right {
        float: left;
        border-left: 5px dashed white;
    }

.game #animated-maps .anim-control {
    margin-bottom: 10px;
}

/*STUDENT VIEW*/
.game-student-view a:link, .game-student-view a:hover, .game-student-view a:visited {
    text-decoration: none;
}

.game-student-view select {
    background-color: rgba(77,77,77, 1);
    color: white;
    font-size: 12pt !important;
    border-radius: 0;
}

    .game-student-view select option {
        font-size: 12pt;
    }

.game-student-view .linked {
    cursor: pointer;
}

.game-student-view hr {
    margin-top: 2px;
    margin-bottom: 20px;
    border: 0;
    border-top: 5px solid rgba(38, 149, 249,1);
}

.game-student-view .section {
    margin-bottom: 50px;
}

    .game-student-view .section.general {
        color: rgba(38, 149, 249,1);
        margin-bottom: 0;  
    }

    .game-student-view .section.rule {
        margin-bottom: 3px;
        color: rgba(38, 149, 249,1);
    }

    .game-student-view .section.points-rankings .game-info {
        color: rgba(77, 77,77, 1);
    }

.game-student-view .font.uppercase {
    text-transform: uppercase;
}

.game-student-view .pnl {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background-color: transparent;
}

.game-student-view .header {
    width: 100%;
    height: 37px;
    padding-top: 0.7em;
    background-color: rgba(38, 149, 249,1);
    color: white;
}

.game-student-view .font.sz8 {
    font-size: 8pt;
}

.game-student-view .font.sz11 {
    font-size: 11pt;
}

.game-student-view .font.sz14 {
    font-size: 14pt;
}

.game-student-view .font.sz15 {
    font-size: 15pt;
}

.game-student-view .font.sz20 {
    font-size: 20pt;
}

.game-student-view .font.bold {
    font-weight: bold;
}

.game-student-view .thumb.out {
    margin: 5px 0 5px 0;
    border: 0;
    height: 110px;
    width: 110px;
    display: table;
    border-radius: 55px;
    margin-left: auto;
    margin-right: auto;
}

.game-student-view .thumb.inner {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.game-student-view .thumb img {
    width: 90px;
    height: 90px;
    margin: auto;
}

.game-student-view .points-rankings td.points {
    height: 120px;
    width: 27%;
    background-color: rgba(38, 149, 249,1);
    border-radius: 0; 
}

    .game-student-view .points-rankings td.points span {
        color: white;
    }

.game-student-view .points-rankings td.separator {
    width: 35px;
    background-color: rgba(38, 149, 249,1);
    border-radius: 0; 
}

    .game-student-view .points-rankings td.separator > div {
        height: 100%;
        width: 100%;
        position: relative;
        border-bottom: none;
        display: inline-block;
    }

        .game-student-view .points-rankings td.separator > div:before, .game-student-view .points-rankings td.separator > div:after {
            content: '';
            display: block;
            height: 20px;
            width: 100%;
            transform: skewX(48deg);
            position: absolute;
            top: -54.5px;
            left: 70%;
            right: 0; 
            background-color: #ededed;
        }

        .game-student-view .points-rankings td.separator > div:after {
            transform: skewX(-48deg);
            top: 55.5px;
        }


.game-student-view .points-rankings td.rankings {
    height: 70%;
}

.game-student-view .points-rankings div.rankings {
    height: 90px;
    background-color: rgba(38, 149, 249,1);
}

    .game-student-view .points-rankings div.rankings table {
        height: 100%;
    }

    .game-student-view .points-rankings div.rankings span.rnk.label {
        color: white;
    }

    .game-student-view .points-rankings div.rankings table td.ranking > div {
        cursor: pointer;
    }

    .game-student-view .points-rankings div.rankings table td.ranking .position.box {
        line-height: 30px;
        width: 115px;
        margin-left: auto;
        margin-right: auto;
        background-color: white;
        color: rgba(77,77,77, 1);
    }

    .game-student-view .points-rankings div.rankings table td.ranking .position.inner {
        line-height: 30px;
        width: 115px;
        margin-left: auto;
        margin-right: auto;
    }

    .game-student-view .points-rankings div.rankings table td.ranking .region {
        color: white;
        overflow: hidden;
        height: 40px;
    }

        .game-student-view .points-rankings div.rankings table td.ranking .region span {
            line-height: 40px;
        }

.game-student-view .points-rankings table td,
.game-student-view .game-objects-view table td {
    padding: 0;
}

.game-student-view .objects .item {
    margin-top: 10px;
    padding: 0;
}

    .game-student-view .objects .item table, .game-student-view .objects.overview table {
        width: 100%;
    }

.game-student-view .game-objects-view .section.objects {
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}

.game-student-view .section.objects .item > table td:first-child, .game-student-view .section.objects .item > table td:last-child {
    width: 0;
    vertical-align: middle;
}

.game-student-view .section.objects .item > table td.access {
    background-color: rgba(38, 149, 249,1);
}

    .game-student-view .section.objects .item > table td.access div.box {
        width: 90px;
    }

    .game-student-view .section.objects .item > table td.access span {
        color: white;
    }

    .game-student-view .section.objects .item > table td.access div.not-done, .game-student-view .section.objects .item > table td.access div.canceled {
        cursor: not-allowed;
    }

.game-student-view .objects .item .overview {
    padding-top: 10px;
    padding-bottom: 10px;
    width: 100%;
}

    .game-student-view .objects .item .overview table tr {
        height: 50px;
        background-color: rgba(211, 211, 211, 1);
    }

        .game-student-view .objects .item .overview table tr div.inner-box {
            line-height: 25px;
        }

        .game-student-view .objects .item .overview table tr td.name {
            padding-left: 10px;
            padding-right: 10px;
            width: 47%;
        }

            .game-student-view .objects .item .overview table tr td.name span {
                font-size: 11pt;
            }

        .game-student-view .objects .item .overview table tr td.points {
            width: 15%;
        }

            .game-student-view .objects .item .overview table tr td.points > div {
                border-top-left-radius: 15px;
                border-bottom-left-radius: 15px;
                border-top-right-radius: 15px;
                border-bottom-right-radius: 15px;
                text-align: center;
                background-color: rgba(77,77,77, 1);
                color: white;
            }

                .game-student-view .objects .item .overview table tr td.points > div.canceled {
                    text-decoration: line-through;
                }

                .game-student-view .objects .item .overview table tr td.points > div span:last-child {
                    font-weight: bold;
                    font-size: 11pt;
                }

        .game-student-view .objects .item .overview table tr td.type {
            width: 15%;
            text-align: center;
        }

            .game-student-view .objects .item .overview table tr td.type img {
                height: 25px;
                width: 25px;
            }

        .game-student-view .objects .item .overview table tr td.status {
            width: 22%;
        }

            .game-student-view .objects .item .overview table tr td.status > div {
                padding-left: 15px;
                border-top-left-radius: 15px;
                border-bottom-left-radius: 15px;
                background-color: white;
                color: rgba(77,77,77, 1);
            }

.game-student-view .objects .item div.box {
    height: 64px;
    width: auto;
    line-height: 70px;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
}

    .game-student-view .objects .item div.box img {
        height: 64px;
        width: auto;
    }

.game-student-view .objects .item div.overview > div {
    line-height: 50px;
}

.game-student-view .awards .flag {
    height: 200px;
    width: 140px;
    margin: 20px 5px;
    position: relative;
    overflow: hidden;
    border: solid 3px #000;
    border-bottom: none;
    text-align: center;
    display: inline-block;
    cursor: pointer;
}

    .game-student-view .awards .flag:before, .game-student-view .awards .flag:after {
        content: '';
        display: block;
        height: 100%;
        width: 200%;
        transform: rotate(22deg);
        box-shadow: 58px 0 0 3px #000;
        position: absolute;
        top: 6px;
        right: -132%;
        background-color: transparent;
    }

    .game-student-view .awards .flag:after {
        transform: rotate(-22deg);
        left: -132%;
        box-shadow: -58px 0 0 3px #000;
    }

.game-student-view .awards div.image {
    height: 110px;
}

    .game-student-view .awards div.image img {
        height: 100%;
        width: 100%;
    }

.game-student-view .panel-carousel {
    position: relative;
    background-color: rgba(211, 211, 211, 1);
}

    .game-student-view .panel-carousel .item {
        display: inline-block;
        margin-bottom: 5px;
    }

        .game-student-view .panel-carousel .item .lbl {
            color: rgba(77,77,77, 1);
        }

    .game-student-view .panel-carousel .button {
        background-position: center center;
        background-repeat: no-repeat;
        cursor: pointer;
        position: absolute;
        width: 30px;
        height: 76px;
        top: calc(50% - 20px);
        z-index: 10;
    }

    .game-student-view .panel-carousel .button-next {
        text-align: right;
        right: 0px;
    }

.incomplete {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    filter: grayscale(100%);
}

.game-student-view .modal-header {
    background-color: rgba(38, 149, 249,1);
}

    .game-student-view .modal-header .modal-title {
        color: white;
    }

.game-student-view .modal .game-highlight {
    background-color: rgba(38, 149, 249,1);
}

    .game-student-view .modal .game-highlight:hover {
        background-color: rgba(38, 149, 249,1);
    }

    .game-student-view .modal .game-highlight td, .game-student-view .modal .game-highlight th {
        color: white;
    }

.game-student-view .image-box .tag {
    position: absolute;
    cursor: pointer;
}

    .game-student-view .image-box .tag:after {
        content: '';
        display: block;
        height: 100%;
        width: 100%;
    }

    .game-student-view .image-box .tag.not-started:after {
        background: transparent url('Icons/Gamefication/NOT_STARTED.png') no-repeat center center;
        background-size: contain;
        cursor: not-allowed;
    }

    .game-student-view .image-box .tag.in-progress:after {
        background: transparent url('Icons/Gamefication/IN_PROGRESS.png') no-repeat center center;
        background-size: contain;
    }

    .game-student-view .image-box .tag.completed:after {
        background: transparent url('Icons/Gamefication/COMPLETED.png') no-repeat center center;
        background-size: contain;
    }

    .game-student-view .image-box .tag.blocked:after {
        background: transparent url('Icons/Gamefication/BLOCKED.png') no-repeat center center;
        background-size: contain;
        cursor: not-allowed;
    }

.game-student-view .modal-body {
}

.game-student-view .modal-award div.winners {
    margin-bottom: 20px;
}

.game-student-view .modal-award div.winners-wrap {
    max-height: 100px;
    overflow-y: auto;
    text-align: justify;
    text-transform: capitalize;
    font-weight: normal;
}

.game-student-view .level-tooltip {
    position: absolute;
    border: 1px solid gray;
    background-color: white;
    border-radius: 2px;
    overflow: auto;
    padding: 10px;
    max-height: 300px;
    max-width: 600px;
    z-index: 1;
}

.game-student-view .arrow {
    width: 0;
    border-style: solid;
}

.game-student-view .box.out.group {
    position: absolute;
    top: 0;
    left: 75%;
    vertical-align: top;
    width: auto;
}

.game-student-view .box.in.group {
    line-height: 25px;
    height: 25px;
    width: 25px;
    border-radius: 4px;
    background-color: #8702FF;
}

    .game-student-view .box.in.group span {
        color: white;
    }

.game-student-view .group.arrow.bottom {
    margin-left: 10px;
    border-color: #8702FF transparent transparent #8702FF;
    border-width: 8px 7px 1px 2px;
}

.game-student-view .modal .modal-header .button {
    color: #000;
    float: right;
    font-size: 20px;
    line-height: 1;
    opacity: .2;
    margin-top: 0;
    width: 20px;
    text-shadow: 0 1px 0 #fff;
    cursor: pointer;
}

    .game-student-view .modal .modal-header .button:hover {
        opacity: .5;
    }

.game-student-view .help-tooltip {
    position: absolute;
    border: 1px solid gray;
    background-color: white;
    border-radius: 2px;
    overflow: auto;
    padding: 10px;
    max-height: 300px;
    max-width: 600px;
    z-index: 9999;
}

.game-student-view .modal .modal-body table tr.canceled {
    text-decoration: line-through;
}

.game-student-view .section.objects .map .animated-image-wrapper {
    position: relative;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
}

    .game-student-view .section.objects .map .animated-image-wrapper #animated-image-box {
        position: relative;
    }

/**************/
/*STUDENT VIEW - LOADABLE MODULE*/

.lm-game-student-view {
    font-family: Verdana;
}

    .lm-game-student-view table {
        border-collapse: collapse;
    }

    .lm-game-student-view th, .lm-game-student-view td {
        padding: 0;
    }

    .lm-game-student-view .border {
        border-style: solid;
    }

    .lm-game-student-view .font.sz10 {
        font-size: 10pt;
    }

    .lm-game-student-view .font.sz11 {
        font-size: 11pt;
    }

    .lm-game-student-view .font.sz13 {
        font-size: 13pt;
    }

    .lm-game-student-view .font.sz14 {
        font-size: 14pt;
    }

    .lm-game-student-view .font.bold {
        font-weight: bold;
    }

    .lm-game-student-view .box.smaller {
        height: 90px;
        border-color: peachpuff;
        background-color: floralwhite;
        border-width: 1px 0 1px 1px;
    }

    .lm-game-student-view .box.larger {
        height: 125px;
        border-color: peachpuff;
        background-color: floralwhite;
        border-width: 1px 1px 1px 0;
    }

    .lm-game-student-view .box.smaller.separator {
        background-color: peachpuff;
    }

    .lm-game-student-view .corner {
        border-style: solid;
    }

        .lm-game-student-view .corner.top {
            border-color: transparent peachpuff peachpuff transparent;
        }

            .lm-game-student-view .corner.top.left {
                border-width: 18px 25px 0px 0px;
            }

        .lm-game-student-view .corner.bottom {
            border-color: peachpuff peachpuff transparent transparent;
        }

            .lm-game-student-view .corner.bottom.left {
                border-width: 19px 0px 0px 25px;
            }

    .lm-game-student-view .game {
        padding: 10px 30px 5px 30px;
        height: 40px;
        overflow: hidden;
    }

        .lm-game-student-view .game span {
            color: rgba(77, 77, 77, 1);
            cursor: pointer;
        }

    .lm-game-student-view .points {
        border-radius: 15px;
        line-height: 25px;
        margin-left: 30px;
        margin-right: 30px;
        width: auto;
        text-align: center;
        background-color: rgba(77, 77, 77, 1);
    }

        .lm-game-student-view .points span {
            color: white;
        }

    .lm-game-student-view .rankings span.label {
        color: rgba(77, 77, 77, 1);
    }

    .lm-game-student-view .overview {
        height: 100%;
    }

    .lm-game-student-view .news {
        padding: 10px 10px 0 10px;
    }

    .lm-game-student-view .objects {
        display: inline-block;
        padding-left: 5px;
        overflow: hidden;
        white-space: nowrap;
        background-color: lightgreen;
        height: 24px;
        width: calc(100% - 20px);
    }

        .lm-game-student-view .objects span.new {
            color: rgba(77, 77, 77, 1);
        }

    .lm-game-student-view .flag {
        display: inline-block;
        margin-left: -10px;
        border-style: solid;
        border-color: lightgreen transparent lightgreen lightgreen;
        border-width: 12px 10px 12px 9px;
    }

    .lm-game-student-view .rankings {
        display: table;
        width: 100%;
        height: 89px;
        text-align: center;
        padding-top: 5px;
    }

        .lm-game-student-view .rankings .wrapper {
            display: table-cell;
            vertical-align: middle;
        }

    .lm-game-student-view .box.inline {
        display: inline-block;
        margin-right: 10px;
    }

    .lm-game-student-view .box.out {
        display: table-cell;
        height: 55px;
        width: 55px;
        text-align: center;
        vertical-align: bottom;
    }

    .lm-game-student-view .arrow {
        width: 0;
        border-style: solid;
    }

    .lm-game-student-view .rnk.arrow.left {
        margin-right: auto;
        border-color: transparent lightgreen lightgreen transparent;
        border-width: 12px 12px 0px 12px;
    }

    .lm-game-student-view .rnk.arrow.center {
        margin-left: auto;
        margin-right: auto;
        border-color: transparent transparent lightgreen transparent;
        border-width: 0px 12px 12px 12px;
    }

    .lm-game-student-view .rnk.arrow.right {
        margin-left: auto;
        margin-right: 0;
        border-color: transparent transparent lightgreen lightgreen;
        border-width: 12px 12px 0px 12px;
    }

    .lm-game-student-view .box.in.rnk {
        display: inline-block;
        line-height: 35px;
        width: 100%;
        border-radius: 4px;
        background-color: lightgreen;
    }

        .lm-game-student-view .box.in.rnk span {
            color: rgba(77, 77, 77, 1);
        }

    .lm-game-student-view .awards {
        position: relative;
        overflow: hidden;
    }

    .lm-game-student-view .circle {
        display: table;
        height: 80px;
        width: 80px;
        border-radius: 40px;
        margin: 0 auto 0 auto;
        line-height: 140px;
        background-color: lightgreen;
    }

        .lm-game-student-view .circle > div {
            display: table-cell;
            vertical-align: middle;
        }

        .lm-game-student-view .circle img {
            height: 65px;
            width: 65px;
        }

    .lm-game-student-view .box.out.award {
        position: absolute;
        top: 0;
        left: 127px;
        vertical-align: top;
        width: auto;
    }

    .lm-game-student-view .box.in.award {
        line-height: 35px;
        height: 35px;
        width: 35px;
        border-radius: 4px;
        background-color: rgba(77, 77, 77, 1);
    }

        .lm-game-student-view .box.in.award span {
            color: white;
        }

    .lm-game-student-view .award.arrow.bottom {
        margin-left: 10px;
        border-color: rgba(77, 77, 77, 1) transparent transparent rgba(77, 77, 77, 1);
        border-width: 8px 7px 1px 2px;
    }

    .lm-game-student-view .register {
        cursor: pointer;
        width: 30%;
        margin-left: auto;
        height: 45px;
        border: 1px solid lightgray;
        margin-right: auto;
        margin-top: 40px;
        line-height: 40px;
        text-align: center;
        font-size: 10pt;
        background-color: lightgreen;
    }

        .lm-game-student-view .register:hover {
            transition: background .2s ease-in-out;
            background-color: palegreen;
        }

        .lm-game-student-view .register span {
            color: rgba(77, 77, 77, 1);
            font-weight: bold;
        }
/**************/
/*STUDENT VIEW - LOADABLE MODULE IN GRID*/

.lm-game-student-view-in-grid .game-container {
    margin: 0;
    padding: 0;
    text-align: center;
}

    .lm-game-student-view-in-grid .game-container .game-item {
        display: inline-flex;
        list-style-type: none;
    }

.lm-game-student-view-in-grid .game-wrapper {
    position: relative;
    display: inline-block;
    width: 230px;
    height: 165px;
    margin: 10px;
    border-radius: 20px 20px 0 0;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

    .lm-game-student-view-in-grid .game-wrapper::after {
        content: '';
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        border-radius: 11px 11px 0 0;
        box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    }

    .lm-game-student-view-in-grid .game-wrapper:hover {
        transform: scale(1.02, 1.02);
    }

        .lm-game-student-view-in-grid .game-wrapper:hover::after {
            opacity: 1;
        }

    .lm-game-student-view-in-grid .game-wrapper .game-header {
        height: 45px;
        background-color: #01914a;
        padding: 5px;
        border-radius: 11px 11px 0 0;
        text-align: center;
    }

        .lm-game-student-view-in-grid .game-wrapper .game-header .game-link {
            text-decoration: none;
            font-weight: bold;
        }

            .lm-game-student-view-in-grid .game-wrapper .game-header .game-link .game-name {
                color: white;
                font-size: 10pt;
            }

    .lm-game-student-view-in-grid .game-wrapper .game-overview {
        height: 120px;
        border: 1px solid #eee;
    }

        .lm-game-student-view-in-grid .game-wrapper .game-overview .points-wrapper {
            text-align: center;
            line-height: 40px;
        }

            .lm-game-student-view-in-grid .game-wrapper .game-overview .points-wrapper .points-label {
                color: #333;
                font-size: 10pt;
            }

            .lm-game-student-view-in-grid .game-wrapper .game-overview .points-wrapper .points-value {
                color: #333;
                font-weight: bold;
                font-size: 11pt;
            }

        .lm-game-student-view-in-grid .game-wrapper .game-overview .ranking-wrapper {
            display: table;
            height: 76px;
            width: 100%;
        }

            .lm-game-student-view-in-grid .game-wrapper .game-overview .ranking-wrapper .position-wrapper,
            .lm-game-student-view-in-grid .game-wrapper .game-overview .ranking-wrapper .conquests-wrapper {
                width: 50%;
                display: table-cell;
                vertical-align: middle;
            }

                .lm-game-student-view-in-grid .game-wrapper .game-overview .ranking-wrapper .position-wrapper .ranking-content,
                .lm-game-student-view-in-grid .game-wrapper .game-overview .ranking-wrapper .conquests-wrapper .conquest-content,
                .lm-game-student-view-in-grid .game-wrapper .game-overview .subscribe-wrapper {
                    display: table;
                    height: 100%;
                    width: 100%;
                }

                    .lm-game-student-view-in-grid .game-wrapper .game-overview .ranking-wrapper .position-wrapper .ranking-content .ranking-box,
                    .lm-game-student-view-in-grid .game-wrapper .game-overview .ranking-wrapper .position-wrapper .ranking-content .position-box,
                    .lm-game-student-view-in-grid .game-wrapper .game-overview .ranking-wrapper .conquests-wrapper .conquest-content .conquest-box {
                        display: table-cell;
                        width: 50%;
                        vertical-align: middle;
                    }

                        .lm-game-student-view-in-grid .game-wrapper .game-overview .ranking-wrapper .position-wrapper .ranking-content .ranking-box .ranking-circle,
                        .lm-game-student-view-in-grid .game-wrapper .game-overview .ranking-wrapper .conquests-wrapper .conquest-content .conquest-box .conquest-circle {
                            height: 56px;
                            width: 56px;
                            border: 2px solid #01fe80;
                            border-radius: 56px;
                            margin-left: 5px;
                            z-index: 2;
                            background-color: white;
                            position: relative;
                        }

                            .lm-game-student-view-in-grid .game-wrapper .game-overview .ranking-wrapper .position-wrapper .ranking-content .ranking-box .ranking-circle .ranking-info,
                            .lm-game-student-view-in-grid .game-wrapper .game-overview .ranking-wrapper .conquests-wrapper .conquest-content .conquest-box .conquest-circle .conquest-img-box {
                                top: 12px;
                                position: relative;
                                text-align: center;
                            }

                                .lm-game-student-view-in-grid .game-wrapper .game-overview .ranking-wrapper .position-wrapper .ranking-content .ranking-box .ranking-circle .ranking-info .users-img,
                                .lm-game-student-view-in-grid .game-wrapper .game-overview .ranking-wrapper .conquests-wrapper .conquest-content .conquest-box .conquest-circle .conquest-img-box .trophy-img {
                                    font-size: 24pt;
                                    color: #333;
                                }

                        .lm-game-student-view-in-grid .game-wrapper .game-overview .ranking-wrapper .position-wrapper .ranking-content .position-box .position-info,
                        .lm-game-student-view-in-grid .game-wrapper .game-overview .ranking-wrapper .conquests-wrapper .conquest-content .conquest-box .conquest-info {
                            line-height: 25px;
                            background-color: #ccc;
                            border-radius: 0 5px 5px 0;
                            margin-right: 5px;
                            text-align: center;
                            position: relative;
                            left: -3px;
                        }

                            .lm-game-student-view-in-grid .game-wrapper .game-overview .ranking-wrapper .position-wrapper .ranking-content .position-box .position-info .position-value,
                            .lm-game-student-view-in-grid .game-wrapper .game-overview .ranking-wrapper .conquests-wrapper .conquest-content .conquest-box .conquest-info .conquests-value {
                                color: #333;
                                font-weight: bold;
                                font-size: 10pt;
                            }

                    .lm-game-student-view-in-grid .game-wrapper .game-overview .subscribe-wrapper .subscribe-content {
                        width: 100%;
                        display: table-cell;
                        vertical-align: middle;
                    }

                        .lm-game-student-view-in-grid .game-wrapper .game-overview .subscribe-wrapper .subscribe-content .subscribe-info {
                            height: 40px;
                            width: 75%;
                            border: 1px solid #01914a;
                            line-height: 40px;
                            margin-left: auto;
                            margin-right: auto;
                            background-color: #01914a;
                            text-align: center;
                        }

                            .lm-game-student-view-in-grid .game-wrapper .game-overview .subscribe-wrapper .subscribe-content .subscribe-info:hover {
                                background-color: #1eb96d;
                                transition: background-color 0.5s linear;
                            }

                            .lm-game-student-view-in-grid .game-wrapper .game-overview .subscribe-wrapper .subscribe-content .subscribe-info .subscribe-link {
                                text-decoration: none;
                            }

                                .lm-game-student-view-in-grid .game-wrapper .game-overview .subscribe-wrapper .subscribe-content .subscribe-info .subscribe-link .sign-up {
                                    color: white;
                                    font-weight: bold;
                                    font-size: 10pt;
                                    text-transform: uppercase;
                                }

/********************************/
/* REPORT */
.game.report table.filters {
    width: 100%;
}

.game.report table {
    border-collapse: collapse;
}

    .game.report table.report tr.data:not(:first-child) {
        border-top: 1px solid lightgray;
    }

    .game.report table.report tr.data.disqualified, .game.report table.report tr.data.canceled {
        text-decoration: line-through;
    }

    .game.report table th {
        line-height: 20px;
    }

        .game.report table th.rnk:not(:last-child) {
            padding-right: 5px;
        }

    .game.report table tr, .game.report .stmt-headers th {
        line-height: 30px;
    }

.game.report .not-found {
    font-size: 11pt;
    text-align: center;
}

.game.report .ui-accordion-content {
    overflow: visible !important;
}

.game.report .search-wrap {
    margin-bottom: 15px;
}

/**********/
/* MANUAL BADGES */

.game-manual-badges table {
    width: 100%;
    border-collapse: collapse;
}

    .game-manual-badges table tr {
        line-height: 30px;
    }

        .game-manual-badges table tr:hover {
            background-color: #eee;
        }

        .game-manual-badges table tr td {
            border-bottom: 1px solid lightgray;
        }

            .game-manual-badges table tr td:first-child {
                padding-left: 10px;
            }

            .game-manual-badges table tr td:last-child {
                padding-right: 10px;
            }

            .game-manual-badges table tr td.status {
                font-size: 12pt;
            }

                .game-manual-badges table tr td.status.ok {
                    color: green;
                }

                .game-manual-badges table tr td.status.nok {
                    color: red;
                }

                .game-manual-badges table tr td.status.warning {
                    color: darkorange;
                }
/*****************/
/* USERS SELECTOR */
.game-user-selector .margin-top {
    margin-top: 15px;
}

.game-user-selector .file-mode {
    display: table;
}

    .game-user-selector .file-mode > div {
        display: table-cell;
    }

        .game-user-selector .file-mode > div:last-child {
            position: relative;
            left: 40px;
        }

        .game-user-selector .file-mode > div fieldset {
            height: 90px;
            line-height: 20px;
            border: 1px solid #ddd;
            padding: 0 1.4em 1.4em 1.4em;
            margin: 0 0 1.5em 0;
        }

            .game-user-selector .file-mode > div fieldset legend {
                text-align: left;
                width: auto;
                border-bottom: none;
                margin-bottom: 0;
            }

/*****************/
/* USER MANAGEMENT */

.user-management .ui-accordion-content {
    overflow: visible !important;
}

.user-management .search-wrap {
    margin-bottom: 15px;
}

    .user-management .search-wrap li.search-field input {
        height: 30px !important;
    }

    .user-management .search-wrap .search-actions {
        display: table;
        height: 130px;
    }

        .user-management .search-wrap .search-actions > div {
            display: table-cell;
            vertical-align: middle;
        }

.user-management table tr.data, .game-dialog.users-dialog table tr.data, .game-dialog.reason-dialog table tr.data {
    line-height: 30px;
}

    .user-management table tr.data:not(:first-child) {
        border-top: 1px solid lightgray;
    }

.user-management table tbody.users > tr.data {
    cursor: pointer;
}

.Web-Lms-Gamefication-Manager .users-dialog ul li {
    display: inline-block;
    list-style-type: none;
    position: relative;
}

/*****************/
