.no-close .ui-dialog-titlebar-close {
    display: none;
}

/* Differentiate against environments */
body.development,
body.development #access .current-menu-item a,
body.development #access .current-menu-ancestor a,
body.development #access .current_page_item a,
body.development #access .current_page_ancestor a,
body.development #site-navigation .current-menu-item a,
body.development #site-navigation .current-menu-ancestor a,
body.development #site-navigation .current_page_item a,
body.development #site-navigation .current_page_ancestor a {
    background-color: #baedba !important;
}

body.development nav.sidenav li.current-menu-item a {
    background-color: #baedba !important;
    border-right-color: #baedba !important;
}

/* And on our development environment *only*, highlight images that don't have an alt tag */
body.development img:not([alt]) {
    filter: invert(100%);
    box-shadow: 0 0 20px #FF0000;
    animation: highlight-missing-alts normal 2s infinite ease-in-out;
}

@keyframes highlight-missing-alts {
    0% {
        opacity: 1;
        filter: invert(0%);
    }

    50% {
        opacity: 0.5;
        filter: invert(100%);
    }

    100% {
        opacity: 1;
        filter: invert(0%);
    }
}

body.staging {
    background-color: #bacfed !important;
}

body.staging #access .current-menu-item a,
body.staging #access .current-menu-ancestor a,
body.staging #access .current_page_item a,
body.staging #access .current_page_ancestor a,
body.staging #site-navigation .current-menu-item a,
body.staging #site-navigation .current-menu-ancestor a,
body.staging #site-navigation .current_page_item a,
body.staging #site-navigation .current_page_ancestor a {
    background-color: #bacfed !important;
}

body.staging nav.sidenav li.current-menu-item a {
    background-color: #bacfed !important;
    border-right-color: #bacfed !important;
}

body.training {
    background-color: rgb(243, 197, 240) !important;
}

body.training #access .current-menu-item a,
body.training #access .current-menu-ancestor a,
body.training #access .current_page_item a,
body.training #access .current_page_ancestor a,
body.training #site-navigation .current-menu-item a,
body.training #site-navigation .current-menu-ancestor a,
body.training #site-navigation .current_page_item a,
body.training #site-navigation .current_page_ancestor a {
    background-color: rgb(243, 197, 240) !important;
}

body.training nav.sidenav li.current-menu-item a {
    background-color: rgb(243, 197, 240) !important;
    border-right-color: rgb(235, 158, 230) !important;
}


.tablesorter-icon {
    float: left;
}

/* Provide a GUI feedback to show users where to hover for search boxes */
.tablesorter-filter-row.tablesorter-ignoreRow.hideme {
    background-color: #CCC !important;
    height: 0.5rem;
}

div.loader {
    width: 95%;
    height: 90%;
    z-index: 10000;
    background: rgba(255, 255, 255, 0.8) url('../img/throbber/128.gif') no-repeat center;
    position: absolute;
    display: none;
}

table.sortable thead tr .header,
table.tablesorter thead tr .header {
    background-image: url('../img/bg.gif');
    background-repeat: no-repeat;
    background-position: center left;
    padding-left: 20px;
    cursor: pointer;
}

table.sortable thead tr .headerSortUp,
table.tablesorter thead tr .headerSortUp {
    background-image: url('../img/asc.gif');
}

table.sortable thead tr .headerSortDown,
table.tablesorter thead tr .headerSortDown {
    background-image: url('../img/desc.gif');
}

tr.hover {
    background-color: rgba(0, 0, 66, 0.5) !important;
    cursor: pointer;
}

thead>tr>th {
    text-align: left;
}

#authorisedcourse label {
    width: auto;
}


.wpnzcfcn-masquerade,
.wpnzcfcn-login,
.wpnzcfcn-logout {
    display: none;
}

/* Date picker appear over tooltips */
.ui-datepicker {
    z-index: 500 !important;
}



/* CadetNet Profile menu */
nav.sidenav {
    border: 1px solid black;
    width: 160px;
    float: left;
    margin-right: 2em;
    margin-bottom: 1em;
    margin-top: 2em;
}

nav.sidenav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

nav.sidenav figure {
    margin: 0;
}

nav.sidenav figure img {
    width: 200px;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.5);
}

nav.sidenav figure img.profile[src*="consent=0"] {
    border: 10px solid red;
    border-style: dashed;
}

nav.sidenav figure figcaption {
    font-size: 75%;
    color: Silver;
    font-family: sans-serif;
    padding: 0 0.5ex;
    cursor: pointer;
}

nav.sidenav .ui-icon {
    float: right;
}

nav.sidenav a {
    display: block;
    text-align: right;
    font-family: sans-serif;
    padding: 0.5ex 1em;
    text-decoration: none;
    border-top: 1px solid #999;
    margin-right: -1px;
    color: #999;
}

nav.sidenav li.current-menu-item a {
    border-right: 1px solid white;
    color: black;
    font-weight: bold;
}

html {
    box-sizing: border-box;
}

#messages {
    table-layout: fixed;
}

#messages tr.unread {
    font-weight: bold;
}

#messages tbody .ui-icon {
    float: left;
}

#messages thead tr th:first-child,
#messages thead tr th:nth-child(2),
#messages tbody tr td:last-child {
    width: 1.75em;
}

#messages thead tr th:nth-child(3),
#messages tbody tr td:nth-child(3) {
    width: 7em;
    word-wrap: none;
}

#messages thead tr th:nth-child(4),
#messages tbody tr td:nth-child(4) {
    width: 100%;
}

#messages tr td:first-child,
#messages tr td:nth-child(2) {
    text-align: center;
}

#messages tbody tr:hover {
    background-color: rgba(32, 32, 128, 0.2) !important;
}

#wpnzcfcn_notification-counter {
    background-color: red;
    font-size: x-small;
    border-radius: 50%;
    color: white;
    position: absolute;
    top: -0ex;
    right: -0ex;
    width: 1.5em;
    height: 1.5em;
    display: block;
    text-align: center;
}



*,
*:before,
*:after {
    /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
    box-sizing: inherit;
}

.ui-widget-content,
.ui-widget-content:before,
.ui-widget-content:after {
    box-sizing: unset;
}

body {
    background: #fff;
    /* Fallback for when there is no custom background color defined. */
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: "";
}

blockquote,
q {
    quotes: "" "";
}

hr {
    background-color: #ccc;
    border: 0;
    height: 1px;
    margin-bottom: 1.5em;
}

ul,
ol {
    margin: 0 0 1.5em 3em;
}

ul {
    list-style: disc;
}

ol {
    list-style: decimal;
}

li>ul,
li>ol {
    margin-bottom: 0;
    margin-left: 1.5em;
}

dt {
    font-weight: bold;
}

dd {
    margin: 0 1.5em 1.5em;
}

img {
    height: auto;
    /* Make sure images are scaled correctly. */
    max-width: 100%;
    /* Adhere to container width. */
}

figure {
    margin: 1em 0;
    /* Extra wide images within figure tags don't overflow the content area. */
}

table {
    margin: 0 0 1.5em;
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
}

table thead {
    border-radius: 10em;
}

table tbody tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.05);
}

form table tfoot tr {
    background-color: rgba(66, 66, 224, 0.1);
}

form table tfoot tr:first-child {
    border-top: 1px solid Navy;
}

table.tablesorter thead tr .header {
    background-image: url('./img/bg.gif');
    background-repeat: no-repeat;
    background-position: center left;
    cursor: pointer;
}

table.tablesorter thead tr .headerSortUp {
    background-image: url('./img/asc.gif');
}

table.tablesorter thead tr .headerSortDown {
    background-image: url('./img/desc.gif');
}

td {
    padding: 0 0.66ex !important;
}

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    border: 1px solid;
    border-color: #ccc #ccc #bbb;
    border-radius: 3px;
    background: #e6e6e6;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 15px 17px rgba(255, 255, 255, 0.5), inset 0 -5px 12px rgba(0, 0, 0, 0.05);
    color: rgba(0, 0, 0, .8);
    font-size: 12px;
    font-size: 0.75rem;
    line-height: 1;
    padding: .6em 1em .4em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
    border-color: #ccc #bbb #aaa;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 15px 17px rgba(255, 255, 255, 0.8), inset 0 -5px 12px rgba(0, 0, 0, 0.02);
}

button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
    border-color: #aaa #bbb #bbb;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.5), inset 0 2px 5px rgba(0, 0, 0, 0.15);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
    color: #666;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 3px;
}

select {
    border: 1px solid #ccc;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
    color: #111;
}

textarea {
    width: 100%;
}




fieldset {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 1ex;
    padding: 1em;
    margin-top: 2em;
    margin-bottom: 1em;
    position: relative;
}

legend {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 2em;
    padding: 0.5ex 1em 0.3ex 1em;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.02);
    color: #666;
    font-family: sans-serif;
}

input,
select {
    height: 2em;
    margin-bottom: 2px;
    /*padding: 1em !important;*/
}

input,
select,
textarea {
    border: 1px solid #ddd;
    background-color: #f9f9f9;
    padding: 0.5ex 1ex;
}

input[type=date],
label[type=date],
input[type=text].date {
    width: 8em;
}

input[type=datetime-local],
input.datetime {
    width: 9.5em;
}

input[type=time],
input.time {
    width: 5em;
}

input[type=text].rank,
label.rank,
select.rank {
    width: 13em;
}

input[type=number] {
    width: 5em;
    text-align: right;
}

input[required],
select[required],
textarea[required] {
    background-image: radial-gradient(#F00 15%, transparent 18%), radial-gradient(#F00 15%, transparent 18%);
    background-size: 2em 2em;
    background-position: -1ex 0;
    background-repeat: no-repeat;
    border: 1px solid #999 !important;
    padding-left: 1em !important;
}

input#extension {
    width: 4em;
}

input#service_number {
    width: 8em;
}

input.title {
    width: 12.45em;
}

/*form#profile { display:none; }*/
form#profile input,
form#profile label,
form#profile select {
    width: 31%;
    display: inline-block;
    text-align: left;
}

form label {
    display: inline-block;
    text-align: right;
    width: 9em;
}

input.address,
input[type="email"] {
    width: 25em;
}

input[type="tel"] {
    width: 10em;
}

input[type="date"] {
    width: 10em;
}

input.ui-autocomplete-input {
    padding-left: 25px !important;
    background-image: url('../img/autocomplete.png');
    background-position: left;
    background-repeat: no-repeat;
}

input.ui-autocomplete-loading,
select.ui-autocomplete-loading,
td.ui-autocomplete-loading {
    background: rgba(255, 255, 255, 0) url('../img/autocomplete_throbber/128.gif') no-repeat left;
}

/*--------------------------------------------------------------
# Tooltips
--------------------------------------------------------------*/
/* Based on https://codepen.io/cbracco/pen/qzukg */

/* Add this attribute to the element that needs a tooltip */
[data-tooltip] {
    position: relative;
    z-index: 2;
    cursor: pointer;
    border-bottom: 1px dotted #000;
}

/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
    visibility: hidden;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    pointer-events: none;
}

/* Position tooltip above the element */
[data-tooltip]:before {
    position: absolute;
    bottom: 150%;
    left: 50%;
    margin-bottom: 5px;
    margin-left: -80px;
    padding: 7px;
    width: 160px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    background-color: #000;
    box-shadow: 0 0 7px black;
    border: 1px solid white;
    color: #fff;
    content: attr(data-tooltip);
    text-align: center;
    font-size: 14px;
    line-height: 1.2;
}

/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
    position: absolute;
    bottom: 150%;
    left: 50%;
    margin-left: -5px;
    width: 0;
    border-top: 5px solid #000;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    border-bottom: 0;
    content: " ";
    font-size: 0;
    line-height: 0;
    z-index: 1;
}

/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
    visibility: visible;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
}

span.important,
span.okay {
    text-transform: uppercase;
    color: Red;
    font-weight: bold;
}

span.okay {
    color: Lime;
}

body.page-template-page_cadetnet .user-notice {
    background: #fff;
    border: 1px solid #c3c4c7;
    border-left-width: 4px;
    box-shadow: 0 1px 1px rgb(0 0 0 / 4%);
    margin: 5px 0 15px;
    padding: 1px 12px;
    outline: 0;
    margin-right: 2em;
    padding: 0em 1em;
    margin-bottom: 1ex;
}

body.page-template-page_cadetnet .user-notice.notice-success {
    border-left-color: #00a32a;
}

body.page-template-page_cadetnet .user-notice.notice-warning {
    border-left-color: #dba617;
}

body.page-template-page_cadetnet .user-notice.notice-error {
    border-left-color: #d63638;
}

body.page-template-page_cadetnet .user-notice p {
    margin-bottom: inherit;
}

#atpattendees tr.application.non_cadet_rank.needed_for_promotion {
    background-color: rgba(196, 128, 65, 0.66);
}

div.cadetnet-content details {
    border: 1px solid #333;
    border-left-width: thick;
    background-color: rgba(255, 255, 255, 0.2);
    padding-left: 0.5ex;
    padding-right: 1ex;
}

div.cadetnet-content details.error {
    border-color: #d63638;
}

div.cadetnet-content summary {
    font-weight: bold;
    background-color: rgba(255, 255, 255, 0.2);
}

.readonly-display-date {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 3px 1em;
    display: inline-block;
    color: #aaa;
    font-style: italic;
    min-height: 2em;
    min-width: 8em;
    font-size: 90%;
    text-align: center;
}