/* ----------------------------------------------------------------
    Copyright (c) Demosphere International Inc.
    No permission is granted for any purpose without prior
    written consent from Demosphere International Inc.
-------------------------------------------------------------------*/

/* tablets [portrait + landscape] */
@media only screen and (min-device-width: 481px) and (max-device-width: 960px) {
  div#design-banner,
  div#design-header,
  div#design-nav,
  div#dii-reg-footer { display:none; height: 0; }
}

/* phones [portrait + landscape] */
@media only screen and (max-device-width: 480px) {
  div#design-banner,
  div#design-header,
  div#design-nav,
  div#dii-reg-footer { display: none; height: 0; }
}

/* hide the userbar when attempting to print the current page 7029 */
@media print { #dii-navbar-load { display: none; } }

/* push design down - make room for admin nav bar
----------------------------------*/
div#dii-navbar-spacer { height: 71px; }

/* TOP ROW - User Information and Tabs
-----------------------------------------------*/
div#dii-navbar { position: fixed; z-index: 998; top: 0; width: 100%; border-width: 0 0 1px; height: 70px; }
div#navbar-top-row { position: relative; margin: 5px auto 0; width: 990px; height: 31px; }
div#navbar-top-row a:hover { text-decoration: none; }

div#navbar-user { float: left; width: 140px; }
div#navbar-user-name { overflow: hidden; margin: 2px 0 0 6px; width: 134px; height: 16px; font-size: 12px; font-weight: bold; white-space: nowrap; }
div#navbar-user-email { overflow: hidden; padding-left: 4px; font-size: 10px; font-weight: normal; white-space: nowrap; cursor: default; }

div#navbar-top-row a.navbar-tab { position: relative; float: left; margin: 2px 2px 0 0; border-bottom: 0px; padding: 0 2px; text-decoration: none; white-space: nowrap; cursor: pointer; }
div#navbar-top-row a.navbar-tab.ui-state-hover { top: 1px; }
div#navbar-top-row a.navbar-tab.navbar-tab-selected { top: 1px; cursor: auto; }
div#navbar-top-row a.navbar-tab span { display: block; }
div#navbar-top-row a.navbar-tab-static { margin-top: 4px; cursor: default; }
div#navbar-top-row a.navbar-tab-one-line span { padding-top: 9px; height: 19px; }
div#navbar-top-row a.navbar-tab-icon { background: no-repeat 0 2px; width: 24px; height: 28px; }
a.navbar-tab span.dii-lib-icon { background-repeat: no-repeat; background-position: 0 2px; padding: 4px 2px 0 28px; height: 24px; font-family: arial; font-size: 10px; font-weight: normal; line-height: 10px; }

/* General Tabs
----------------------------------*/

a#navbar-tab-public-view span { background-position: 0 -1px; }
a#navbar-tab-report-builder span { background-position: 0 1px; }

/* RosterPro Tabs
----------------------------------*/
a#navbar-tab-household span { background-position: 0 1px; }
a#navbar-tab-registration-settings span { background-position: 0 2px; padding-left: 23px; }

/* GameOn Tabs
----------------------------------*/
a#navbar-tab-scorekeeping span { padding-left: 24px; }

/* WebWriter Tabs
----------------------------------*/
a#navbar-tab-elements span { background-position: 0 -1px; }


/* MIDDLE ROW
----------------------------------*/
div#navbar-middle { margin: 0 auto; border-top: 0; border-bottom: 0; width: 978px; height: 3px; }


/* BOTTOM ROW: NAVBAR "TRAY"
----------------------------------*/
div#navbar-product { position: relative; margin: 0 auto; border-top: 0; padding: 2px 4px 8px; width: 962px; height: 15px; }
div#navbar-product-name { position: absolute; padding: 4px; width: 142px; text-align: center; font-size: 10px; font-weight: bold; }
div#navbar-product-content { margin: 4px 0 0 170px; }
div#navbar-drawers { background-image: url('../images/dii-drawer-bg.png'); background-position: center bottom; background-repeat: repeat-x; }


/* -------------------------- APPLICATION-SPECIFIC TRAY/DRAWER FUNCTIONALITY
--------------------------------------------------------------------------------------------------------*/

/* Form Builder Functionality
----------------------------------*/
div#dii-navbar a.navbar-formbuilder-tab { z-index: 1; border: 1px solid #999; border-bottom: 0; -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; background-color: #fff; background-image: none; padding: 2px 4px 5px 18px; color: #666; }

div#navbar-product-content div.dii-action-function-navbar { margin-right: 12px; }
div#navbar-product-content a { z-index: 1; top: -4px; margin-right: 4px; }

a#navbar-formbuilder-templates-btn.navbar-formbuilder-tab div,
a#navbar-formbuilder-item-inspector-btn.navbar-formbuilder-tab div,
a#navbar-formbuilder-items-btn.navbar-formbuilder-tab div { background-image: url('../jquery/images/ui-icons_6da8d5_256x240.png'); background-position: -48px -80px; /*-64px -16px*/ }
a#navbar-formbuilder-templates-btn.navbar-formbuilder-tab span,
a#navbar-formbuilder-item-inspector-btn.navbar-formbuilder-tab span,
a#navbar-formbuilder-items-btn.navbar-formbuilder-tab span { color: #2e6e9e; }

div#navbar-formbuilder-drawers { margin: 0 auto; width: 960px; }
div#navbar-formbuilder-drawers div.navbar-formbuilder-drawer { display: none; clear: both; position: relative; top: -5px; border-top: 0; background-image: none; padding: 0 4px 5px; }
div#navbar-formbuilder-drawers div.navbar-formbuilder-inner { border: 1px solid #999; background-color: #fff; position: relative; overflow: auto; }
div#navbar-formbuilder-drawers div span.dii-function-text { position: relative; display:inline ;line-height: 28px; margin:0 4px 0 4px; padding: 2px 8px; font-weight: normal; cursor: move; }
div.dii-dialog div span.dii-function-text { cursor: move; display: block; line-height: 20px; margin: 2px; padding-left: 6px; position: relative; }


div.prop-element-prop-item fieldset { border: 1px solid #dcdcdc; width: 100%; }
div.prop-element-prop-item legend { padding: 0 0 6px 8px; font-size: 13px; font-weight: bold; color: #cc7100; }
#navbar-formbuilder-item-inspector-dlg >*{padding: 6px 2px;}
#navbar-formbuilder-templates-dlg fieldset{width: 92%; margin: 4px 0; padding: 0 6px;}

div#navbar-formbuilder-templates > div.navbar-formbuilder-inner > div { float: left; }
div#navbar-formbuilder-templates td { padding: 4px 8px; }
div#navbar-formbuilder-templates-system { border: 1px solid #dcdcdc; background-color: #f9f9f9; padding: 2px; }
div#navbar-formbuilder-templates-system span { clear: left; }
td#navbar-formbuilder-templates-edit-group-l { padding: 8px 4px; }
td#navbar-formbuilder-templates-edit-group-l div.dii-action-nav-bar { margin: 0; padding: 0 2px; }
td#navbar-formbuilder-templates-edit-group-l div.dii-function-text { cursor: pointer; margin-top: 4px; padding: 6px; }
td#navbar-formbuilder-templates-edit-group-l div.selected { position: absolute; width: 214px; border-color: #d0d0d0; border-right: 0 none; background-color: #eee; background-image: none; font-weight: bold; color: #da912f; }
td#navbar-formbuilder-templates-edit-group-l div.selected-next { margin-top: 39px; }
td#navbar-formbuilder-templates-edit-group-r { background-image: none; padding: 8px 12px; }
td#navbar-formbuilder-templates-edit-group-r div.dii-action-nav-bar { height: auto; }
td#navbar-formbuilder-templates-edit-group-r table.dii-table-grid { margin-top: 8px; }

.dii-formbuilder-drag-helper { min-width: 70px; max-width: 250px; max-height: 18px; padding: 5px; z-index: 9999; font-weight: bold; list-style-type: none;}
.dii-formbuilder-place-holder { height: 19px; display: block; }

ul.dii-formbuilder-templates-group-list { margin: 0; padding: 0; width: 100%; }
ul.dii-formbuilder-templates-group-list li.dii-formbuilder-template-lib-row { list-style-type: none; margin: 0; padding: 0; }
ul.dii-formbuilder-templates-group-list li.dii-formbuilder-template-lib-row:hover { background-color: #dcdcdc; }

div#navbar-formbuilder-item-inspector { max-height: 300px; }
div#navbar-formbuilder-item-inspector table.dii-table { clear: both; }

div#navbar-formbuilder-item-inspector div.navbar-formbuilder-inner,
div#navbar-formbuilder-templates-edit div.navbar-formbuilder-inner,
div#navbar-formbuilder-items div.navbar-formbuilder-inner { max-height: 210px; overflow: auto; top: -2px; }
div#navbar-formbuilder-templates div.navbar-formbuilder-inner { top: -2px; padding: 2px 4px; }

div.navbar-formbuilder-header { border-bottom: 1px solid #dcdcdc; line-height: 22px; margin-bottom: 8px; padding: 0 0 6px 8px; font-size: 18px; font-weight: bold; color: #5174d3; }
div.navbar-formbuilder-list { padding: 2px; }

/* Admin Progress Bar
-----------------------------------*/
div#navbar-import-progress { padding: 0; position: absolute; font-size: 10px; font-weight: bold; width: 125px; height: 18px; right: 0; top: -30px; }
div#navbar-import-progress >span.percent-text { color: #8C5545; left: 8px; position: absolute; top: 4px; white-space: nowrap; z-index: 1; }
div#navbar-import-progress >span.ui-icon { cursor: pointer; position: absolute; right: 1px; top: 0; z-index: 1; }
div#navbar-import-progress >div { display: block; width: 100%; position: relative; top: -1px; left: -1px; height: 18px; }


/* Admin Home
----------------------------------*/
.navbar-admin-message { float: left; margin: 0 12px; height: 18px; }
.navbar-admin-message-icon { float: left; margin: 0 2px; }
.navbar-admin-message-text { float: left; margin-right: 4px; padding: 2px; }

/* WebWriter product tabs
----------------------------------*/
a#navbar-tab-ww-hp {width: 60px;}
span.navbar-tabs-ww-hp {background-image: url('../icons/24/home_24.png');} /* icon_home_page */
a#navbar-tab-ww-map {width: 52px;}
span.navbar-tabs-ww-map {background-image: url('../icons/24/world_24.png');} /* icon_site_map */
a#navbar-tab-ww-cal {width: 84px;}
span.navbar-tabs-ww-cal {background-image: url('../icons/24/calendar_month_24.png');} /* icon_calendar */

/* NAVBAR */
/*#dii-navbar .btn {  position: relative; display: inline-block;  border-radius: 4px; padding: 5px 10px 5px 22px; color: #fff;}*/
#dii-navbar .btn { border-radius: 4px; color: #fff; display: inline-block; font-size: 12px; line-height: 14px; padding: 4px 8px; }
#dii-navbar .btn-sky { border: 1px solid #008ec7; background-color: #009ddc; }
#dii-navbar .btn-sky:hover { border-color: #006c98; background-color: #0092cc; }
/*#dii-navbar .btn.btn-notifications { float: right; top: -5px; padding: 4px 10px; }*/
#dii-navbar .btn.btn-notifications { float: right; top: -5px; }
/* END TEAMNET UI BRANDING */

#design-editor-edit { float: left; }

/* ADMIN RESPONSIVE NAVBAR */
.admin-mode #navbar-bars { display: none; }

@media only screen and (max-width: 1000px) {
  .admin-mode { background-position: initial !important; }
  .admin-mode #dii-navbar { position: relative; border: 0; height: initial; }
  .admin-mode #navbar-top-row { overflow: hidden; width: 100%;height: initial; min-height: 30px; border: 0; margin: 0; background: rgba(0,0,0,.8); border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; }
  .admin-mode #navbar-user { float: none; width: 100%; display: block; }
  .admin-mode #navbar-user-name { overflow: initial; width: initial; height: initial; margin: 0; padding: 3px 0 0 6px; }
  .admin-mode #navbar-user-email { overflow: initial; width: initial; height: initial; margin: 0; position: initial; top: initial; left: initial; padding-left: 12px; } 
  .admin-mode #navbar-top-row .navbar-tab { float: none; display: none; margin: 0; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; }
  .admin-mode #navbar-top-row .navbar-tab.show-items { display: block; }
  .admin-mode #navbar-bars { display: inline-block; position: absolute; top: 10px; right: 10px; font-size: 12px; line-height: 12px; }
  .admin-mode #navbar-middle,
  .admin-mode #navbar-product,
  .admin-mode #dii-navbar-spacer { display: none; }
}

/* ---------------- 2026 Overrides ---------------- */

#dii-navbar-load::before {
  content: "** Admin Nav has moved to the top right corner **";
  z-index: 2002;
  position: fixed;
  top: 0;
  left: calc(50% - 10rem);
  width: 20rem;
  border-radius: 0 0 0.25rem 0.25rem;
  background: var(--color-brand-950);
  padding: 0.2rem;
  font-size: 0.75rem;
  font-weight: 500;
  text-align: center;
  color: var(--color-brand-200);
}
#dii-navbar-load #dii-navbar {
  z-index: 2001;
  position: fixed;
  top: 0.5rem;
  right: 0.5rem;
  width: initial;
  height: initial;
  border: 0;
  background: transparent;
  color: inherit;
}
#dii-navbar-load #dii-navbar::before {
  cursor: pointer;
  content: "\f0c9";
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 2px solid transparent;
  background: #19052de0;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font: var(--fa-font-light);
  font-size: 1.5rem;
  color: var(--color-white);
  box-shadow: inset 0px 0px 3px 2px rgb(204 162 251 / 45%), 0 0px 3px 4px rgb(147 57 243 / 15%), 0 0px 6px 4px rgb(145 85 227 / 15%)
}
#dii-navbar #navbar-top-row {
  overflow: hidden;
  position: relative;
  top: 1.5rem;
  right: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: initial;
  min-width: 10rem;
  height: initial;
  max-height: 0;
  margin: 0;
  border-radius: 0.5rem;
  border: 0;
  background: var(--color-white);
  padding: 0;
  color: var(--color-text);
  transition: max-height var(--transition);
}
#dii-navbar:hover #navbar-top-row {
  max-height: 500px;
  border: 1px solid var(--color-border);
  padding: 0.5rem;
  box-shadow: 0 0 0.3rem 1px rgba(0,0,0,0.07);
}
#dii-navbar #navbar-top-row::before {
  content: "Admin Menu";
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border);
  padding: 0.25rem 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-gray-12);
}
#dii-navbar #navbar-top-row #navbar-user {
  float: initial;
  width: initial;
  margin-bottom: 0.5rem;
}
#dii-navbar #navbar-top-row #navbar-user > div {
  top: initial;
  left: initial;
  margin: 0;
  padding: 0;
  font-size: 0.8rem;
  line-height: initial;
  color: inherit;
}
#dii-navbar #navbar-top-row #navbar-user #navbar-user-email {
  font-size: 0.65rem;
}
#dii-navbar #navbar-top-row a {
  float: initial;
  top: 0;
  margin: 0;
  border-radius: initial;
  border: 0;
  border-top: 1px solid var(--color-border);
  background: transparent;
  padding: 0.5rem;
  color: var(--text-color-quaternary);
}
#dii-navbar #navbar-top-row a:hover,
#dii-navbar #navbar-top-row a:focus,
#dii-navbar #navbar-top-row a:focus-within {
  background: var(--btn-bg-hover);
  color: var(--text-color-primary);
}
#dii-navbar #navbar-top-row a.navbar-tab-selected {
  display: none;
}
#dii-navbar #navbar-top-row a span {
  height: initial;
  background: transparent !important;
  padding: 0;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: initial;
}
#dii-navbar #navbar-middle {
  display: none;
}
#dii-navbar #navbar-product {
  position: absolute;
  top: -0.25rem;
  right: 3.5rem;
  width: initial;
  height: initial;
  margin: 0;
  border: 0;
  background: transparent;
  padding: 0;
  font-weight: initial;
}
#dii-navbar #navbar-product #navbar-product-name {
  display: none;
}
#dii-navbar #navbar-product #navbar-product-content {
  margin: 0;
}
#dii-navbar #navbar-product #navbar-product-content > div {
  display: flex;
  flex-direction: row-reverse;
  gap: 0.25rem;
}
#dii-navbar #navbar-product #navbar-product-content a {
  float: initial;
  top: initial;
  margin: 0;
  padding: 0.1rem 0.5rem;
  font-size: 0.75rem;
  color: var(--text-color-quaternary);
}
#dii-navbar #navbar-product #navbar-product-content a .ui-icon {
  display: none;
}
#dii-navbar-spacer {
  display: none;
}
/* Position the Session Management iframe so it no longer negatively affects page layout / design */
body > iframe[height="1"] {
  position: fixed;
}


@media only screen and (max-width: 1000px) {
  #dii-navbar-load::before,
  #dii-navbar-load #dii-navbar::before,
  #dii-navbar #navbar-top-row::before,
  #dii-navbar #navbar-top-row #navbar-user {
    display: none;
  }
  #dii-navbar-load #dii-navbar {
    top: 0;
    right: 0;
  }
  #dii-navbar #navbar-top-row:has(> .show-items)::before {
    display: block;
    position: absolute;
    top: 0.25rem;
    left: 0.5rem;
    margin: 0;
    border: 0;
    padding: 0;
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--color-brand-700);
  }
  #dii-navbar #navbar-top-row {
    top: 0.2rem;
    right: 0.2rem;
    min-width: 1.1rem;
    min-height: 1.1rem;
    max-height: initial;
    border-radius: 0.2rem;
    padding: 0.1rem !important;
  }
  #dii-navbar:hover #navbar-top-row {
    border: 0;
  }
  .admin-mode #navbar-bars {
    order: -1;
    display: flex;
    justify-content: flex-end;
    position: initial;
    font-size: 0;
  }
  .admin-mode #navbar-bars .fa {
    width: 1rem;
    height: 1rem;
    font-size: 1rem;
    color: var(--color-brand-500);
  }
}

/* Custom Template Sticky Nav Fix */

body.admin-mode #design-header-wrapper.design-fixed {
  top: 0 !important;
}