/* Slide the my view box down so the message is readable. 
But not for the duplicate one that uses the message in the current modal. */
.unite-message:not(.modal-open) .viewmanager-popup {
  transform: translateY(31px);
  transition-timing-function: ease-in-out;
  transition: transform 0.84s;
} 
.viewmanager-popup {
  transition: transform 0.84s;
}

.school-select-mobile {
  height: auto !important;
} 
.slot-class {
  display: inline-block;
  margin-left: 5px;
}

.slot-class a {
  margin-left: 0px !important;
  display: block;
  bottom: 0em !important;
  white-space: inherit !important;
}

.unite-mobile-dialog .k-dialog {
  width: 50%;
}

table.k-grid-table,
.k-grid-header table {
  /* make sure the grids are visible for all devices. Touch devices can't expand cells */
  min-width: 1200px;
}
.without-full-width table.k-grid-table,
.without-full-width .k-grid-header table {
  min-width: inherit;
}
tr.k-grid-norecords td {
  /* move "no records avaiable" to the left so that mobile users can read it */
  text-align: left !important;
}

.personactivitytab-space ul {
  list-style: none;
  display: inline-block;
  justify-content: right;
  padding-left: 0;
}
.personactivitytab-space li {
  padding-left: 10px;
  float: left;
}

/* touch tagets should be at least 44px WCAG 2.5.5 */
.viewManagerItem {
  line-height: 3.08 !important;
}
.viewManagerItem span {
  vertical-align: middle;
}
.viewManagerButton {
  padding-top: 11px;
}
.viewManagerTopButtons {
  margin: 10px 4px  10px 4px !important;
}

.single-menu-item {
  margin-top: 110px;
}

.unite-grid-container.sticky {
  z-index: 1;
}

@media screen and (min-width: 1120px) and (max-width: 1395px) {
  /* report builder could have 9 buttons on the bottom  */
  .report-builder #divSubFooter {
    height: auto !important;
  }
}

@media screen and (max-width: 1180px) {
  .contactcarddialog {
    height: auto !important;
  }
}

/* most of the mobile stuff starts at 1120px */
@media screen and (min-width: 1120px) {
  /* #root {
    overflow: auto;
  } */
  .nav-menu {
    display: none;
  }
}

@media screen and (min-width: 1120px) and (max-height: 1000px) {
/* Give the filters enough room not to go outside of the window if the window isn't tall enough */
  .internal-column-menu-expanded.columnmenu-wrapper {
    /* transform: translateY(-190px); TODO: CHECK WITH ROB ON THIS */
    z-index: 999999 !important;
    position: relative;
  }

  .internal-column-menu-expanded.columnmenu-wrapper .k-column-list {
    max-height: 110px;
  }

  #ViewManager .k-button.primary,
  #ViewManager .k-button.primary:hover {
    margin: 0 6px;
  } 
}

@media screen and (max-height: 720px) and (min-width: 860px) {
  .viewManager {
    height: 160px !important;
    max-height: 134px !important;
  }
  #divTrvAvailableColumns {
    height: 612px !important;
  }
}

@media screen and (max-height: 580px) and (min-width: 860px) {

  .viewManager {
    max-height: 100px !important;
    height: 100px !important;
  }

  #divUtilitiesTabs #divDownload .viewmanager-popup {
    top: -78px !important;
  }
}

@media screen and (max-height: 480px) and (min-width: 860px) {
  #divUtilitiesTabs #divDownload .viewmanager-popup {
    top: -397px !important;
  }
}

@media screen and (max-height: 545px) {

  body.user-setting-open .k-animation-container-shown {
    left: 2% !important;
    width: 96%;
    margin-top: -14px;
  }
  body.user-setting-open .parent-ul > li {
    width: 47%;
    float: left;
  }
  
  body.user-setting-open .configuration-ul li {
    padding: 1px 2px;
  }
  body.user-setting-open .configuration-ul li:nth-child(3) {
    margin-top: -4px;
  }
}

@media screen and (max-width: 1260px) {
  #documentWindow {
    margin-top: 10px;
  }
  
  .menu-words {
    font-size: 1.725rem;
  }
  .menu-icon {
    font-size: 2.5em !important;
    vertical-align: top !important;
  }
  .tab-mobile-menu + .k-tabstrip .k-tabstrip-items  {
    background-color: #f0eeea;
    padding-bottom: 5px;
  }
  
  .top-mobile-menu,
  .tab-mobile-menu {
    background-color: #f0eeea;
    width: 100%;
    padding: 5px 12px 6px;
  }

  /* utilites tabs are extra long */
  #divUtilitiesTabs .tab-mobile-menu + .k-tabstrip > .k-tabstrip-items-wrapper .k-tabstrip-items {
    display: none;
  }

  #divUtilitiesTabs .tab-mobile-menu + .k-tabstrip.open > .k-tabstrip-items-wrapper .k-tabstrip-items {
    display: flex;
    flex-wrap: wrap;
  }
  #divUtilitiesTabs button.nav-menu {
    display: block;
    color: #0068a6;
    padding: 5px 12px 6px;
    border: none;
    background-color: #f0eeea;
    text-transform: uppercase; 
    font-weight: 600;     
  } 

  #divUtilitiesTabs button.nav-menu:focus {
    outline: 2px solid #333333;
  }

  #divUtilitiesTabs button.nav-menu .k-i-menu,
  #divUtilitiesTabs button.nav-menu .k-i-close-outline {
    vertical-align: inherit;
    margin-right: 5px;
    font-size: 1.4em;
  }
  #divUtilitiesTabs .tab-mobile-menu + .k-tabstrip > .k-tabstrip-items-wrapper .k-item {
    width: 22%;
    border-radius: 6px !important;
    margin: 2px 1% 4px !important;
    border-width: 2px;
  }
  #dialogContent, .k-dialog {
    overflow-y: inherit !important;
  }

  .person-record-modal .person-record-main-area {
    padding-bottom: 38px !important;
    height: inherit !important;
  }

  /* unstick the name for tiny mobile */
  .dialog-dual-main-content-wells .k-grid-content-sticky,
  .dialog-dual-main-content-wells .k-grid-header-sticky {
    position: inherit !important;
  }
}


/* most of the mobile stuff starts at 1120px */
@media screen and (max-width: 1120px) {
  html, body {
    /* overflow: inherit !important; */

    overflow: visible !important;
  }

  body.modal-open,
  body.modal-open .with-scrollbars-hidden {
    overflow: hidden !important;
  }
  body.flyout-open,
  body.flyout-open .with-scrollbars-hidden {
    overflow:auto !important;
  }

  img {
    max-width: 100%;
  }

  #nav__main,
  #divNavBar .admin-menu,
  .tab-mobile-menu + .k-tabstrip > .k-tabstrip-items-wrapper .k-tabstrip-items {
    display: none;
  }


  /* .sticky2 .header-expanded #UniteNavbar {
    display: block;
  } */
  .tab-mobile-menu + .k-tabstrip.open > .k-tabstrip-items-wrapper .k-tabstrip-items {
    display: flex;
    flex-wrap: wrap;
  }
  #divNavBar .admin-menu.open {
    display: block;
  }

  .admin-menu .k-menu {
    flex-wrap: wrap;
  }

  .unite-nav-bar__item {
    width: 24%;
  }
  .tab-mobile-menu + .k-tabstrip >  .k-tabstrip-items-wrapper .k-item {
    width: 30%;
    border-radius: 6px !important;
    margin: 2px 1% 4px !important;
    border-width: 2px;
  }

  #divNavBar .k-menu-item,
  .tab-mobile-menu + .k-tabstrip.activities-tabs >  .k-tabstrip-items-wrapper .k-item,
  .tab-mobile-menu + .k-tabstrip.applications-tabs >  .k-tabstrip-items-wrapper .k-item {
    width: 45%;
  }
  .tab-mobile-menu + .activities-tabs .k-tabstrip-items >  .k-tabstrip-items-wrapper .k-link,
  .tab-mobile-menu + .applications-tabs .k-tabstrip-items >  .k-tabstrip-items-wrapper .k-link {
    font-size: 1em;
  }
  
  button.nav-menu {
    display: block;
    color: #0068a6;
    padding: 5px 12px 6px;
    border: none;
    background-color: #f0eeea;
    text-transform: uppercase; 
    font-weight: 600;     
  } 

  button.nav-menu:focus {
    outline: 2px solid #333333;
  }

  button.nav-menu .k-i-menu,
  button.nav-menu .k-i-close-outline {
    vertical-align: inherit;
    margin-right: 5px;
    font-size: 1.4em;
  }

  button.nav-menu .k-i-menu:focus {
    outline: none;
  }
  
  #records .menu-icon {
    font-size: 1.8em !important;
  }

  #records .menu-words {
    font-size: 1.4rem;
  }

  .header-one, .base-switch {
    position: inherit !important;
    overflow: hidden !important;
  }

  .header-one {
    margin: 0 10px;
  }

 .Footer {
    margin: 15 10px 0;
  }

  a:focus.skip-link {
    top: 5px;
  }

  a:focus.skip-link + .header-one {
    margin-top: 32px;
  }

  #reportsTab {
    height: auto !important;
  }

  .mobile-grid .k-grid {
    min-height: 400px;
  }
  

  .person-record-modal #divSubFooter,
  .report-builder #divSubFooter {
    bottom: inherit;
    z-index: 100;
    height: auto !important;
    position: relative;
  }

  .home + .row #divSubFooter {
    bottom: unset;
    z-index: 3;
    height: 40px !important;
    margin-top: 10px;
    position: static;
    width: 100%;
  }

  .Footer {
    position: inherit !important;
    overflow: inherit !important;
    top: inherit;
    left: inherit !important;
    right: inherit !important;
    bottom: inherit !important;
  }

  #divGridColumnList  .k-item,
  #divTrvAvailableColumns .k-item {
    width: 90%;
  }

  .report-builder .k-item {
    width: auto !important;
  }
  #lvMostRecentScores .divWrapperforListJD {
    height: auto;
  }
  .k-splitter-flex,
  #SplitterDiv,
  #divUtilitiesTabs,
  #divgridCustomImport,
  .k-splitter-horizontal aside,
  #RolesGrid .k-grid,
  #systemSettings .k-grid,
  #divGridColumnSettings,
  #divGridColSetting,
  #divGridColumnList > .k-listbox,
  #divGridCASData .k-grid,
  #divgridStatusData .k-grid,
  #divgridUserList .k-grid,
  #divgridSubStatusData .k-grid,
  #divTrvAvailableColumns .k-grid,
  .mobile-height-auto,
  aside {
    height: auto !important;
  }
  .mobile-height-auto {
    min-height: 400px
  }

  .viewManager {
    height: 160px !important;
  }
  .unite-mobile-dialog-has-form .k-dialog {
    min-width: 86%;
  }
  .dialog-dual-main-content-wells .k-dialog .k-content {
    padding: 10px;
  }
}

@media screen and (max-width: 1081px) {
  .person-record-modal #divSubFooter {
    margin-top: 0px !important;
  }
  
  .person-record-modal .person-record-main-area {
    padding-bottom: 0px !important;
  }
}

@media screen and (max-width: 992px) {
  .k-splitter-flex.k-splitter-horizontal {
    flex-direction: column !important;
  }
  .k-splitter-flex .k-splitbar {
    position: relative !important;
    left: 48%;
  }
  .k-i-arrow-60-left::before {
    content: "\e004" !important;
  }
  .k-i-arrow-60-right::before {
    content: "\e006" !important;
  }
  .k-splitbar .k-icon {
    border-radius: 3px !important;
    margin-top: 3px;
  }
  

  #sendCommunications .k-dialog-wrapper {
    overflow: auto;
  }

  .mobile-small-padding {
    padding-left: 5px;
  } 
  
  .school-select .k-button.primary,
  .school-select .k-button.secondary {
    min-width: 88px;
  }
}

@media screen and (max-width: 860px) {
  .tab-mobile-menu + .k-tabstrip > .k-tabstrip-items-wrapper .k-item {
    width: 45%;
  }

  /* #divgridPersonActivityGrid th,
  #divgridPersonActivityGrid td {
    width: 60px;
    box-sizing: border-box;
  } */
  .k-pager.k-grid-pager {
    flex-wrap: wrap;
  }

}

@media screen and (max-width: 785px) {
  .school-logo {
    text-align: center !important;
    position: absolute;
  }
  .div-user{
    text-align: right;
  }
  .Footer, #divACES3Logo, #divCopyright, #divSOC {
    height: auto !important;
  }
  #divACES3Logo, #divCopyright, #divSOC {
    line-height: inherit !important;
  }
  .k-menu-horizontal>.k-item {
    flex-grow: 0 !important; 
  } 
  .unite-nav-bar__item {
    width: 32%;
  }
  #divUtilitiesTabs .tab-mobile-menu + .k-tabstrip > .k-tabstrip-items-wrapper .k-item {
    width: 30%;
  }
  .userDropdown {
    margin-bottom: 5px;
  }
  .dropdown-title {
    margin-left: 1px !important;
  }
  .dialog-dual-main-content-wells .row.gutters > .col, 
  .dialog-dual-main-content-wells .row.gutters > .row > .col { 
    margin-left: 0 !important;
  }
  
  .k-grid {
    min-height: 500px;
  }
  .k-pager-sizes.k-label {
    margin-top: 10px;
  }
  #divGridColumnSettings .middle-button {
    margin-top: 20px !important;
    margin-bottom: 20px;
  }
  
  .person-record-modal #divSubFooter {
    margin-top: -35px !important;
  }
  
  .person-record-modal .person-record-main-area {
    padding-bottom: 35px !important;
  }

}

@media screen and (min-width: 1024px) {
  /* The sizes below have importants to overcome the .gutters width  */
  .col-xl-1 { width: 8.33333% !important; }
  .col-xl-2 { width: 16.66667% !important; }
  .col-xl-3 { width: 25% !important; }
  .col-xl-4 { width: 33.33333% !important; }
  .col-xl-5 { width: 41.66667% !important; }
  .col-xl-6 { width: 50% !important; }
  .col-xl-7 { width: 58.33333% !important; }
  .col-xl-8 { width: 66.66667% !important; }
  .col-xl-9 { width: 75% !important; }
  .col-xl-10 { width: 83.33333% !important; }
  .col-xl-11 { width: 91.66667% !important; }
  .col-xl-12 { width: 100% !important; }
}

@media screen and (min-width: 992px) and (max-width: 1024px) {
  /* The sizes below have importants to overcome the .gutters width  */
  .col-lg-1 { width: 8.33333% !important; }
  .col-lg-2 { width: 16.66667% !important; }
  .col-lg-3 { width: 25% !important; }
  .col-lg-4 { width: 33.33333% !important; }
  .col-lg-5 { width: 41.66667% !important; }
  .col-lg-6 { width: 50% !important; }
  .col-lg-7 { width: 58.33333% !important; }
  .col-lg-8 { width: 66.66667% !important; }
  .col-lg-9 { width: 75% !important; }
  .col-lg-10 { width: 83.33333% !important; }
  .col-lg-11 { width: 91.66667% !important; }
  .col-lg-12 { width: 100% !important; }
}

@media screen and (min-width: 780px) and (max-width: 992px) {
  /* The sizes below have importants to overcome the .gutters width  */
  .col-md-1 { width: 8.33333% !important; }
  .col-md-2 { width: 16.66667% !important; }
  .col-md-3 { width: 25% !important; }
  .col-md-4 { width: 33.33333% !important; }
  .col-md-5 { width: 41.66667% !important; }
  .col-md-6 { width: 50% !important; }
  .col-md-7 { width: 58.33333% !important; }
  .col-md-8 { width: 66.66667% !important; }
  .col-md-9 { width: 75% !important; }
  .col-md-10 { width: 83.33333% !important; }
  .col-md-11 { width: 91.66667% !important; }
  .col-md-12 { width: 100% !important; }

  .gutters > .col-md-1 { width: calc(8.33333% - 2%) !important; }
  .gutters > .col-md-2 { width: calc(16.66667% - 2%) !important; }
  .gutters > .col-md-3 { width: calc(25%  - 2%) !important; }
  .gutters > .col-md-4 { width: calc(33.33333% - 2%) !important; }
  .gutters > .col-md-5 { width: calc(41.66667% - 2%) !important; }
  .gutters > .col-md-6 { width: calc(50% - 2%) !important; }
  .gutters > .col-md-7 { width: calc(58.33333% - 2%) !important; }
  .gutters > .col-md-8 { width: calc(66.66667% - 2%) !important; }
  .gutters > .col-md-9 { width: calc(75% - 2%) !important; }
  .gutters > .col-md-10 { width: calc(83.33333% - 2%) !important; }
  .gutters > .col-md-11 { width: calc(91.66667% - 2%) !important; }
  .gutters > .col-md-12 { width: calc(100% - 2%) !important; }
  
  .dialog-dual-main-content-wells .row.gutters > .col, 
  .dialog-dual-main-content-wells .row.gutters > .row > .col {
    margin-left: 2% !important;
  }
 
}

@media screen and (min-width: 576px) and (max-width: 780px) {
  /* The sizes below have importants to overcome the .gutters width  */
  .col-sm-1 { width: 8.33333% !important; }
  .col-sm-2 { width: 16.66667% !important; }
  .col-sm-3 { width: 25% !important; }
  .col-sm-4 { width: 33.33333% !important; }
  .col-sm-5 { width: 41.66667% !important; }
  .col-sm-6 { width: 50% !important; }
  .col-sm-7 { width: 58.33333% !important; }
  .col-sm-8 { width: 66.66667% !important; }
  .col-sm-9 { width: 75% !important; }
  .col-sm-10 { width: 83.33333% !important; }
  .col-sm-11 { width: 91.66667% !important; }
  .col-sm-12 { width: 100% !important; }

  .gutters > .col-sm-1 { width: calc(8.33333% - 2%) !important; }
  .gutters > .col-sm-2 { width: calc(16.66667% - 2%) !important; }
  .gutters > .col-sm-3 { width: calc(25%  - 2%) !important; }
  .gutters > .col-sm-4 { width: calc(33.33333% - 2%) !important; }
  .gutters > .col-sm-5 { width: calc(41.66667% - 2%) !important; }
  .gutters > .col-sm-6 { width: calc(50% - 2%) !important; }
  .gutters > .col-sm-7 { width: calc(58.33333% - 2%) !important; }
  .gutters > .col-sm-8 { width: calc(66.66667% - 2%) !important; }
  .gutters > .col-sm-9 { width: calc(75% - 2%) !important; }
  .gutters > .col-sm-10 { width: calc(83.33333% - 2%) !important; }
  .gutters > .col-sm-11 { width: calc(91.66667% - 2%) !important; }
  .gutters > .col-sm-12 { width: calc(100% - 2%) !important; }

  .dialog-dual-main-content-wells .row.gutters > .col, 
  .dialog-dual-main-content-wells .row.gutters > .row > .col {
    margin-left: 0% !important;
  }
  
  #divPaneLeft  .row.gutters > .col, .row.gutters > .row > .col,
  .mo-no-margin .row.gutters .col:first-child {
    margin-left: 0% !important;
  }
  .mo-no-margin .row.gutters .col:nth-child(2) {
    margin-left: 4% !important;
  }
  #divGridLegend {
    margin-top: inherit !important;
  }
 
}

@media screen and (max-width: 640px) {
  .unite-mobile-dialog .k-dialog {
    width: 86%;
  }
}

@media screen and (max-width: 625px) {
  .person-record-modal #divSubFooter {
    margin-top: -75px !important;
  }
  .person-record-modal .person-record-main-area {
    padding-bottom: 75px !important;
  }
}

@media screen and (max-width: 575px) {
  .person-record-modal #divSubFooter {
    margin-top: -114px !important;
  }
  .person-record-modal .person-record-main-area {
    padding-bottom: 114px !important;
  }
}

@media screen and (max-width: 576px) {
  /* The sizes below have importants to overcome the .gutters width  */
  .col-xs-1 { width: 8.33333% !important; }
  .col-xs-2 { width: 16.66667% !important; }
  .col-xs-3 { width: 25% !important; }
  .col-xs-4 { width: 33.33333% !important; }
  .col-xs-5 { width: 41.66667% !important; }
  .col-xs-6 { width: 50% !important; }
  .col-xs-7 { width: 58.33333% !important; }
  .col-xs-8 { width: 66.66667% !important; }
  .col-xs-9 { width: 75% !important; }
  .col-xs-10 { width: 83.33333% !important; }
  .col-xs-11 { width: 91.66667% !important; }
  .col-xs-12 { width: 100% !important; }

  .gutters > .col-xs-1 { width: calc(8.33333% - 2%) !important; }
  .gutters > .col-xs-2 { width: calc(16.66667% - 2%) !important; }
  .gutters > .col-xs-3 { width: calc(25%  - 2%) !important; }
  .gutters > .col-xs-4 { width: calc(33.33333% - 2%) !important; }
  .gutters > .col-xs-5 { width: calc(41.66667% - 2%) !important; }
  .gutters > .col-xs-6 { width: calc(50% - 2%) !important; }
  .gutters > .col-xs-7 { width: calc(58.33333% - 2%) !important; }
  .gutters > .col-xs-8 { width: calc(66.66667% - 2%) !important; }
  .gutters > .col-xs-9 { width: calc(75% - 2%) !important; }
  .gutters > .col-xs-10 { width: calc(83.33333% - 2%) !important; }
  .gutters > .col-xs-11 { width: calc(91.66667% - 2%) !important; }
  .gutters > .col-xs-12 { width: calc(100% - 2%) !important; }
  .unite-nav-bar__item {
    width: 49%;
  }
  .mo-no-margin .row.gutters .col:first-child {
    margin-left: 0% !important;
  }
  .mo-no-margin .row.gutters .col:nth-child(2) {
    margin-left: 4% !important;
  }
  .tab-mobile-menu + .k-tabstrip > .k-tabstrip-items-wrapper .k-item {
    width: 95%;
  }
  #divNavBar .k-menu-item {
    width: 100%;
  }
   #divUtilitiesTabs .tab-mobile-menu + .k-tabstrip > .k-tabstrip-items-wrapper .k-item {
    width: 45%;
  }
  
  #divPowerBI {
    max-height: 300px !important;
    height: auto !important;
  }

  /* .k-grid {
    max-height: 500px;
  } */
  .dialog-dual-main-content-wells .k-expander-content {
    padding: 16px !important;
  }

}



@media screen and (max-width: 480px) {
  .unite-nav-bar__item {
    width: 98%;
  }
  #divNavBar .k-menu-item {
    width: 100%;
  }

  .person-record-modal #divSubFooter {
    margin-top: -140px !important;
  }
  .person-record-modal .person-record-main-area {
    padding-bottom: 140px !important;
  }
  .school-select-mobile {
    height: 60px !important;
  }
  .k-pager-numbers {
    display: initial !important;
  }
  .k-pager {
    white-space: normal !important;
  }
  .mobile-grid .k-grid {
    min-height: 700px;
  }
}
@media screen and (max-height: 600px) {
  .k-animation-container-shown .internal-column-menu-expanded  {
    overflow-y: auto !important;
    max-height: 190px;
    border: 1px solid #333;
  }
  .k-animation-container-shown .internal-column-menu-expanded .single-menu-item {
    margin-top: inherit !important;
  }
}

@media screen and (max-width:940px) {
  .send-test-dialog #divSubFooter {
    height: auto !important;
  }
  .send-test-dialog #divSubFooter .k-button {
    float: right;
    margin: 5px !important;
    width: 80%;
  }
}