@charset "UTF-8";

/* FONT AWESOME */

@font-face {
    font-family: 'FontAwesome';
    src:
        url('../fonts/fontawesome/light/fa-light-300.woff') format('woff'),
        url('../fonts/fontawesome/light/fa-light-300.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'FontAwesome Brands';
    src:
        url('../fonts/fontawesome/brands/fa-brands-400.woff') format('woff'),
        url('../fonts/fontawesome/brands/fa-brands-400.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
}

/* BREADCRUMB TAKEOVER */

::-moz-selection {
    color: #fff;
    background-color: #CC0000
}

::selection {
    color: #fff;
    background-color: #CC0000
}

.dark-mode ::-moz-selection {
    color: #fff;
    background-color: #660000
}

.dark-mode ::selection {
    color: #fff;
    background-color: #660000
}

.id-breadcrumb {
    background-color: #CC0000 !important
}

.dark-mode .id-breadcrumb a:active,
.dark-mode .id-breadcrumb a:focus,
.dark-mode .id-breadcrumb a:hover,
.id-breadcrumb a:active,
.id-breadcrumb a:focus,
.id-breadcrumb a:hover {
    color: #CC0000
}

.dark-mode .highlight:not(.information):not(.success):not(.failure):not(.minor),
.highlight:not(.information):not(.success):not(.failure):not(.minor) {
    background-color: #CC0000
}

.highlight:not(.information):not(.success):not(.failure):not(.minor) * {
    color: #FFF
}

.dark-mode .highlight:not(.information):not(.success):not(.failure):not(.minor) a span,
.highlight:not(.information):not(.success):not(.failure):not(.minor) a,
.highlight:not(.information):not(.success):not(.failure):not(.minor) a span {
    color: #FFF
}

.highlight:not(.information):not(.success):not(.failure):not(.minor) *::-moz-selection,
.highlight:not(.information):not(.success):not(.failure):not(.minor) *::selection,
.highlight:not(.information):not(.success):not(.failure):not(.minor) a:focus,
.highlight:not(.information):not(.success):not(.failure):not(.minor) a:hover {
    background-color: #FFF;
    color: #CC0000
}

.dark-mode .highlight:not(.information):not(.success):not(.failure):not(.minor) a:focus span,
.dark-mode .highlight:not(.information):not(.success):not(.failure):not(.minor) a:hover span,
.highlight:not(.information):not(.success):not(.failure):not(.minor) a:focus span,
.highlight:not(.information):not(.success):not(.failure):not(.minor) a:hover span {
    color: #CC0000
}

.dark-mode .highlight:not(.information):not(.success):not(.failure):not(.minor) a.doc::before,
.dark-mode .highlight:not(.information):not(.success):not(.failure):not(.minor) a.external::before,
.dark-mode .highlight:not(.information):not(.success):not(.failure):not(.minor) a::before,
.highlight:not(.information):not(.success):not(.failure):not(.minor) a.doc::before,
.highlight:not(.information):not(.success):not(.failure):not(.minor) a.external::before,
.highlight:not(.information):not(.success):not(.failure):not(.minor) a::before {
    color: #CC0000;
    background-color: #FFF
}

.dark-mode .highlight:not(.information):not(.success):not(.failure):not(.minor) h2 em,
.dark-mode .highlight:not(.information):not(.success):not(.failure):not(.minor) h3 em,
.dark-mode .highlight:not(.information):not(.success):not(.failure):not(.minor) h4 em,
.dark-mode .highlight:not(.information):not(.success):not(.failure):not(.minor) h5 em,
.dark-mode .highlight:not(.information):not(.success):not(.failure):not(.minor) h6 em,
.highlight:not(.information):not(.success):not(.failure):not(.minor) h2 em,
.highlight:not(.information):not(.success):not(.failure):not(.minor) h3 em,
.highlight:not(.information):not(.success):not(.failure):not(.minor) h4 em,
.highlight:not(.information):not(.success):not(.failure):not(.minor) h5 em,
.highlight:not(.information):not(.success):not(.failure):not(.minor) h6 em {
    color: #CC0000;
    background-color: #FFF
}

.highlight:not(.information):not(.success):not(.failure):not(.minor) .btn {
    border-color: #FFF;
    color: #FFF;
    background-color: #CC0000
}

.dark-mode .highlight:not(.information):not(.success):not(.failure):not(.minor) .btn::after,
.dark-mode .highlight:not(.information):not(.success):not(.failure):not(.minor) .btn::before,
.highlight:not(.information):not(.success):not(.failure):not(.minor) .btn::after,
.highlight:not(.information):not(.success):not(.failure):not(.minor) .btn::before {
    color: #FFF
}

.dark-mode .highlight:not(.information):not(.success):not(.failure):not(.minor) .btn:focus,
.dark-mode .highlight:not(.information):not(.success):not(.failure):not(.minor) .btn:hover,
.highlight:not(.information):not(.success):not(.failure):not(.minor) .btn:focus,
.highlight:not(.information):not(.success):not(.failure):not(.minor) .btn:hover {
    color: #CC0000;
    background-color: #FFF;
    border-color: #FFF
}

.dark-mode .highlight:not(.information):not(.success):not(.failure):not(.minor) .btn.doc::before,
.dark-mode .highlight:not(.information):not(.success):not(.failure):not(.minor) .btn.external::before,
.dark-mode .highlight:not(.information):not(.success):not(.failure):not(.minor) .btn::before,
.highlight:not(.information):not(.success):not(.failure):not(.minor) .btn.doc::before,
.highlight:not(.information):not(.success):not(.failure):not(.minor) .btn.external::before,
.highlight:not(.information):not(.success):not(.failure):not(.minor) .btn::before {
    color: #FFF
}

.dark-mode .highlight:not(.information):not(.success):not(.failure):not(.minor) .btn:focus.doc::before,
.dark-mode .highlight:not(.information):not(.success):not(.failure):not(.minor) .btn:focus.external::before,
.dark-mode .highlight:not(.information):not(.success):not(.failure):not(.minor) .btn:focus::before,
.dark-mode .highlight:not(.information):not(.success):not(.failure):not(.minor) .btn:hover.doc::before,
.dark-mode .highlight:not(.information):not(.success):not(.failure):not(.minor) .btn:hover.external::before,
.dark-mode .highlight:not(.information):not(.success):not(.failure):not(.minor) .btn:hover::before,
.highlight:not(.information):not(.success):not(.failure):not(.minor) .btn.external:focus::before,
.highlight:not(.information):not(.success):not(.failure):not(.minor) .btn.external:hover::before,
.highlight:not(.information):not(.success):not(.failure):not(.minor) .btn:focus.doc::before,
.highlight:not(.information):not(.success):not(.failure):not(.minor) .btn:focus::after,
.highlight:not(.information):not(.success):not(.failure):not(.minor) .btn:focus::before,
.highlight:not(.information):not(.success):not(.failure):not(.minor) .btn:hover.doc::before,
.highlight:not(.information):not(.success):not(.failure):not(.minor) .btn:hover::after,
.highlight:not(.information):not(.success):not(.failure):not(.minor) .btn:hover::before {
    color: #CC0000
}

.has-brand-colour .highlight.id-howtoapply a {
    background-color: transparent;
    border-color: #FFF
}

.has-brand-colour .highlight.id-howtoapply:not(.information):not(.success):not(.failure):not(.minor) a::before {
    color: #FFF;
    background: 0
}

.has-brand-colour .highlight.id-howtoapply:not(.information):not(.success):not(.failure):not(.minor) a:hover,
.has-brand-colour .highlight.id-howtoapply:not(.information):not(.success):not(.failure):not(.minor) a:focus {
    background-color: #FFF;
    border-color: #FFF
}

.has-brand-colour .highlight.id-howtoapply:not(.information):not(.success):not(.failure):not(.minor) a:hover *,
.has-brand-colour .highlight.id-howtoapply:not(.information):not(.success):not(.failure):not(.minor) a:focus *,
.has-brand-colour .highlight.id-howtoapply:not(.information):not(.success):not(.failure):not(.minor) a:hover::before,
.has-brand-colour .highlight.id-howtoapply:not(.information):not(.success):not(.failure):not(.minor) a:focus::before {
    color: #CC0000
}

/* EXTRAS */

ul.pagination span {
    text-align: center;
}

.results tbody td:first-child {
    width: 1%;
    white-space: nowrap;
}

td.image {
    margin: 0;
    display: table-cell;
    padding: 0.625em;
}

td.image::before {
    display: inline-block;
    font-family: 'FontAwesome';
    font-weight: 400;
    content: '\f03e';
}

.table td .btn {
    font-size: 0.8em;
}



/* SOLDIER STYLES */

.id-soldier {
    margin: 4em 0;
    background-color: #2c2d2d;
    border-radius: 2em;
}

.id-soldier .buttons {
    margin-bottom: 0;
    display: flex;
    justify-content: center;
}

.id-soldier .buttons>.btn,
.dark-mode .id-soldier .buttons>.btn {
    float: none;
    background-color: #2c2d2d;
    border-color: #FFF;
    color: #FFF;
    margin-top: 0;
}

.id-soldier .buttons>.btn:hover,
.dark-mode .id-soldier .buttons>.btn:hover,
.id-soldier .buttons>.btn:focus,
.dark-mode .id-soldier .buttons>.btn:focus {
    color: #2c2d2d;
    background-color: #FFF;
}

.id-soldier .buttons>.btn:not(:first-child) {
    margin-left: 0.625em;
}

.id-soldier header {
    position: relative;
}

.id-soldier header {
    padding: 4em 2em;
}

.id-soldier .information {
    padding: 2em;
}

.id-soldier .information {
    background-color: #FFF;
}

.id-soldier figure {
    display: block;
    overflow: hidden;
    list-style: none;
    margin: 0 auto;
    position: relative;
    top: 2em;
    cursor: pointer;
    cursor: hand;
}

.id-soldier.hasphoto figure {
    display: block;
}

.id-soldier figure img {
    display: block;
    overflow: hidden;
    max-height: 30em;
    width: auto;
    border: 5px solid #FFF;
    margin: 0 auto;
}

.id-soldier figure::after {
    box-shadow: inset 10px 10px 5px 0 rgba(0, 0, 0, 0.2);
}

.id-soldier table td {
    background-color: #FFF;
}

.id-soldier header h2,
.id-soldier header p {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    color: #FFF;
    text-align: center;
}

.id-soldier header h2 {
    font-size: 2em;
    line-height: 1em;
    padding: 0;
    margin-left: 3em;
    margin-right: 3em;
    overflow: visible;
    display: flex;
    flex-direction: row;
    justify-content: center;
    text-transform: uppercase;
}

.id-soldier .highlight h2 {
    text-transform: none;
}

.id-soldier .highlight {
    max-width: 600px;
    margin: 4em auto 0;
}

.id-soldier header h2>span {
    display: block;
    background-color: #FFF;
    color: #2c2d2d;
    padding: 0.5em;
}

.id-soldier header h2 span span {
    display: inline;
}

.id-soldier .lifespan {
    color: #FFF;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-weight: 700;
    white-space: nowrap;
    margin: 0;
    font-size: 1.6em;
}

.id-soldier .aka {
    font-family: 'Work Sans', sans-serif;
    font-weight: 400;
    font-style: italic;
    color: #FFF;
    margin: 0 0 1.25em 0;
    font-size: 1.6em;
}

.id-soldier .aka span {
    color: #FFF;
    opacity: 0.5;
}

.id-soldier .description {
    color: #FFF;
    font-size: 1.4em;
    max-width: 600px;
    margin: 1.429em auto 0;
    line-height: 1.429em;
}

.id-soldier .btn {
    white-space: nowrap;
}

.btn.back::before,
.btn.edit::before,
.btn.delete::before,
.btn.edit-image::before {
    content: '\f053';
    display: inline-block;
    font-family: 'FontAwesome';
    font-weight: 300;
    margin-right: 0.5em;
}

.btn.edit::before {
    content: '\f0ad';
}

.btn.delete::before {
    content: '\f503';
}

.btn.edit-image::before {
    content: '\f03e';
}

.footnote .btn.delete {
    float: right;
}

.id-soldier .highlight.hidden {
    display: none;
}


@media all and (min-width:640px) {

    .id-soldier header h2 {
        font-size: 3em;
    }

}

/* VIEW STYLES */

.double>*:first-child {
    margin-top: 0;
}

.double>*:last-child {
    margin-bottom: 0;
}

.id-view .double {
    display: block;
}

.double .table {
    width: 100;
}

@media all and (min-width: 720px) {

    .id-view .double {
        display: flex;
    }

    .id-view .double .table {
        width: calc((100% - 2em) / 2);
        margin: 0;
    }

    .id-view .table tbody th:first-child {
        width: 200px;
    }
}

/* FORM STYLES */

.icmform.has-tabs>div>fieldset>ol {
    border-bottom: .5em solid #eee;
}

/* OPTS */
.opts,
.opts li {
    display: block;
    overflow: hidden;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 1em;
}

.opts {
    padding: 1em 0 0 1em;
    background-color: #EEEEEE;
}

.opts li {
    float: left;
    margin: 0 1em 1em 0;
}

.opts .btn {
    font-size: 1.2em;
}

.opts .btn.minor.selected {
    background-color: #333;
    border-color: #333;
    color: #EEE;
}

.errorblock::before {
    line-height: 1em;
    height: 1em;
}

.ui-datepicker-header > a::before {
    display: block;
}


/* SOLDIER OVERLAY */
    
.id-soldieroverlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background-color: rgba(0,0,0,0.8);
    padding: 2em;
    cursor: pointer;
    cursor: hand;
}

.id-soldieroverlay.hidden {
    display: none;
}

.id-soldieroverlay .image {
    position: fixed;
    display: block;
    top: 2em;
    left: 2em;
    bottom: 2em;
    right: 2em;
    padding: 0;
    margin: 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    pointer-events: none;
}


/* ADMIN SCREENS */

.id-myaccount ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.id-myaccount ul li:not(:first-child){
    margin-left: 1em;
}

.id-myaccount .btn.users::before,
.id-myaccount .btn.soldiers::before {
    content: '\f46d';
    display: inline-block;
    margin-right: 0.313em;
    font-family: 'FontAwesome';
    font-weight: 300;
}

.id-myaccount .btn.users::before {
    content: '\f0c0';
}

td .btn.minor.edit {
    white-space: nowrap;
}

/* PAGINATION */

nav.pagination {
    background-color: #EEE;
    border: 0.1em solid #CCC;
    margin: 4em 0;
    padding: 0;
    position: relative;
}
.dark-mode nav.pagination {
    background-color: #111;
}
.resultssummary + nav.pagination {
    margin-top: 0;
    border-top: none;
}

ul.pagination,
ul.pagination li {
    border: none;
    display: block;
    overflow: hidden;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 1em;
}

@media all and ( max-width: 480px ){
    ul.pagination li.PagedList-skipToNext,
    ul.pagination li.PagedList-skipToPrevious {
        display: none;
    }
}

ul.pagination {
    margin: 0 auto;
    display: flex;
    justify-content: center;
    position: relative;
    padding: 1em;
}

ul.pagination li span,
ul.pagination li a {
    font-size: 1.6em;
    text-decoration: none;
}

ul.pagination span,
ul.pagination a {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    display: block;
    overflow: hidden;
    line-height: 2.375em;
    height: 2.375em;
    width: 2.375em;
    border: 0.063em solid #287cb3;
    color: #FFF;
    background-color: #287cb3;
    border-radius: 0.313em;
    box-shadow: 0.125em 0.125em 0 rgba(0,0,0,0.1);
    margin: 0 0.125em 0.125em 0;
    text-align: center;
    transition: border-color 0.25s ease-out, color 0.25s ease-out, background-color 0.25s ease-out;
}

ul.pagination a[href]:hover,
ul.pagination a[href]:focus {
    border: 0.063em solid #143e59;
    color: #FFF;
    background-color: #143e59;
}

ul.pagination a[href]:active {
    box-shadow: none;
    transform: translate(0.125em, 0.125em);
}

ul.pagination .active span,
ul.pagination .active a {
    background-color: #FFF;
    color: #287cb3;
}

ul.pagination span,
ul.pagination a:not([href]) {
    text-decoration: none;
    pointer-events: none;
    user-select: none;
}

.dark-mode ul.pagination span,
.dark-mode ul.pagination a {
    border-color: #143e59;
    background-color: #FFF;
    color: #143e59;
}

.PagedList-skipToPrevious,
.PagedList-skipToNext {
    position: absolute;
}

.PagedList-skipToNext {
    right: 1em;
    top: 1em;
}

.PagedList-skipToPrevious {
    left: 1em;
    top: 1em;
}

ul.pagination .PagedList-skipToPrevious a[rel],
ul.pagination .PagedList-skipToNext a[rel] {
    position: relative;
    text-indent: 100%;
    white-space: nowrap;
}

.PagedList-skipToPrevious a::before,
.PagedList-skipToNext a::before {
    position: absolute;
    top: 0;
    left: 0;
    text-indent: 0;
    display: block;
    overflow: hidden;
    font-size: 1em;
    font-family: 'FontAwesome';
    font-weight: 300;
    text-align: center;
    line-height: 2.375em;
    height: 2.375em;
    width: 2.375em;
    color: #FFF !important;
}

.PagedList-skipToNext a::before {
    content: '\f054';
    font-family: 'FontAwesome';
    font-weight: 300;
}
.PagedList-skipToPrevious a::before {
    content: '\f053';
    font-family: 'FontAwesome';
    font-weight: 300;
}

li .errorblock {
    margin: 2em 0;
}