/* ============================================================
   LIYANA CRM WEB EDITION 5.2.57
   RESPONSIVE MASTER LAYER
   Desktop is intentionally preserved.
   ============================================================ */

/* ---------- GLOBAL ---------- */

*,
*::before,
*::after{
  box-sizing:border-box;
}

html,
body{
  max-width:100%;
  overflow-x:hidden;
}

img,
video,
canvas,
svg{
  max-width:100%;
}

input,
select,
textarea,
button{
  max-width:100%;
}

/* ---------- TABLES ---------- */

.table-wrap{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overflow-y:visible;
  -webkit-overflow-scrolling:touch;
}

.table-wrap table{
  min-width:max-content;
}

.table-wrap td,
.table-wrap th{
  white-space:nowrap;
}

.table-wrap td:first-child,
.table-wrap th:first-child{
  white-space:normal;
}

/* ---------- MAIN APP ---------- */

.main{
  min-width:0;
  max-width:100%;
}

.box,
.card,
.form-section,
.commercial-main,
.commercial-shell,
.invoice-preview{
  max-width:100%;
  min-width:0;
}

.action-row{
  min-width:0;
}

/* ---------- COMMERCIAL AREAS ---------- */

.commercial-top{
  min-width:0;
}

.commercial-top > *{
  min-width:0;
}

.two-col,
.maker-bottom,
.crm-maker-grid,
.doc-filter,
.summary-grid{
  min-width:0;
}

.line-table{
  min-width:max-content;
}

.a4-preview-wrap{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

/* ---------- MODALS ---------- */

#modalRoot .modal-backdrop{
  padding:16px;
  overflow:auto;
}

#modalRoot .crm-window{
  width:min(1200px,96vw);
  max-width:96vw;
  min-width:0;
  max-height:92vh;
}

#modalRoot .crm-window .modal-body{
  min-width:0;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

#modalRoot .crm-window.modal-maximized{
  width:96vw;
  max-width:96vw;
}

#modalRoot .crm-large-modal{
  width:min(1500px,96vw)!important;
  max-width:96vw!important;
  min-width:0!important;
}

#modalRoot .modal-head{
  min-width:0;
}

#modalRoot .modal-head h3{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#modalRoot .modal-foot{
  flex-wrap:wrap;
}

#modalRoot .modal-foot .btn{
  flex:0 0 auto;
}

/* ============================================================
   TABLET
   ============================================================ */

@media(max-width:1000px){

  .main{
    padding:20px;
  }

  .commercial-top{
    flex-wrap:wrap;
  }

  .summary-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .crm-maker-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .maker-bottom{
    grid-template-columns:1fr;
  }

  .doc-filter{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .two-col{
    grid-template-columns:1fr;
  }

  .invoice-paper{
    max-width:760px;
  }

  .a4-paper{
    width:100%;
    min-width:0;
  }

}

/* ============================================================
   TABLET / SMALL TABLET
   ============================================================ */

@media(max-width:900px){

  .side{
    width:220px;
  }

  .main{
    margin-left:220px;
    width:calc(100% - 220px);
    padding:18px;
  }

  .grid,
  .two,
  .formgrid{
    grid-template-columns:1fr;
  }

  .summary-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .crm-maker-grid{
    grid-template-columns:1fr;
  }

  .doc-filter{
    grid-template-columns:1fr;
  }

  .invoice-paper{
    padding:32px;
  }

}

/* ============================================================
   MOBILE
   ============================================================ */

@media(max-width:700px){

  html,
  body{
    width:100%;
    min-width:0;
  }

  .app{
    display:block;
    width:100%;
    min-width:0;
  }

  /* Mobile navigation becomes a compact top navigation. */

  .side{
    position:sticky;
    top:0;
    left:0;
    z-index:1000;
    width:100%;
    height:auto;
    min-height:0;
    max-height:none;
    overflow:visible;
  }

  .side-inner{
    width:100%;
    min-width:0;
  }

  .side-brand{
    padding:12px 14px;
  }

  .nav{
    display:flex;
    flex-direction:row;
    gap:6px;
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    padding:8px 10px 10px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  .nav::-webkit-scrollbar{
    display:none;
  }

  .nav button{
    flex:0 0 auto;
    width:auto;
    white-space:nowrap;
    padding:9px 12px;
    border-radius:9px;
  }

  .logout{
    width:auto;
    margin:0 10px 10px;
  }

  .main{
    margin-left:0;
    width:100%;
    max-width:100%;
    padding:14px;
  }

  /* Header / boxes */

  .box{
    width:100%;
    max-width:100%;
    overflow:hidden;
  }

  .box-head{
    flex-wrap:wrap;
    gap:10px;
  }

  .box-head > *{
    min-width:0;
  }

  .box-head .btn{
    max-width:100%;
  }

  /* Cards */

  .cards{
    grid-template-columns:1fr 1fr;
    gap:9px;
  }

  .card{
    min-width:0;
    overflow:hidden;
  }

  .card .num{
    font-size:22px;
  }

  /* Forms */

  .formgrid,
  .summary-grid,
  .crm-maker-grid,
  .maker-bottom,
  .two-col,
  .two,
  .grid{
    grid-template-columns:1fr!important;
  }

  input,
  select,
  textarea{
    width:100%;
    min-width:0!important;
  }

  .action-row{
    width:100%;
  }

  .action-row .btn,
  .action-row select{
    max-width:100%;
  }

  /* Tables stay readable through horizontal scrolling */

  .table-wrap{
    margin-left:0;
    margin-right:0;
    width:100%;
    max-width:100%;
    overflow-x:auto;
  }

  .table-wrap table{
    min-width:680px;
  }

  /* Do NOT force huge document tables onto the viewport */

  .full-doc-lines{
    min-width:760px!important;
  }

  .google-preview-table{
    min-width:760px;
  }

  /* Commercial document areas */

  .commercial-actions{
    width:100%;
  }

  .commercial-actions .btn{
    flex:1 1 auto;
  }

  .crm-filters{
    width:100%;
  }

  .doc-filter{
    grid-template-columns:1fr!important;
  }

  .invoice-paper{
    width:100%;
    max-width:100%;
    min-width:0;
    padding:20px;
  }

  .invoice-paper .brandline{
    flex-direction:column;
    gap:12px;
  }

  .invoice-paper .meta{
    text-align:left;
  }

  .invoice-paper .summary{
    width:100%;
    max-width:100%;
  }

  .a4-preview-wrap{
    padding:8px;
  }

  .a4-paper{
    width:100%;
    min-width:0;
    padding:18px;
  }

  .a4-header{
    flex-direction:column;
  }

  .a4-meta{
    flex-direction:column;
  }

  .a4-meta>div:last-child{
    text-align:left;
  }

  .a4-totals{
    width:100%;
    max-width:100%;
  }

  /* Modal */

  #modalRoot .modal-backdrop{
    padding:8px;
    align-items:stretch;
  }

  #modalRoot .crm-window,
  #modalRoot .crm-window.modal-maximized,
  #modalRoot .crm-large-modal{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto;
    max-height:calc(100vh - 16px);
    border-radius:16px;
  }

  #modalRoot .modal-head{
    padding:14px 16px;
  }

  #modalRoot .modal-body{
    padding:16px;
  }

  #modalRoot .modal-foot{
    padding:12px 16px;
    justify-content:stretch;
  }

  #modalRoot .modal-foot .btn{
    flex:1 1 120px;
  }

  #modalRoot .window-controls{
    flex:0 0 auto;
  }

  #modalRoot .modal-win-btn{
    width:36px;
    height:36px;
  }

  /* Design Time */

  #designTimerValue{
    font-size:42px!important;
  }

  #designJobSelect{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }

  #designTimeJobSearch{
    width:100%!important;
    min-width:0!important;
  }

}

/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media(max-width:480px){

  .main{
    padding:10px;
  }

  .side-brand{
    padding:10px 12px;
  }

  .nav{
    padding:6px 8px 8px;
  }

  .nav button{
    font-size:11px;
    padding:8px 10px;
  }

  .cards{
    grid-template-columns:1fr;
  }

  .box{
    border-radius:12px;
  }

  .box-head h2{
    font-size:18px;
  }

  .btn{
    min-height:38px;
  }

  .action-row .btn{
    flex:1 1 100%;
  }

  #designTimerValue{
    font-size:36px!important;
    letter-spacing:1px!important;
  }

  #modalRoot .modal-head h3{
    font-size:16px;
  }

  #modalRoot .modal-body{
    padding:12px;
  }

  #modalRoot .modal-foot{
    padding:10px 12px;
  }

}

/* ============================================================
   VERY SMALL PHONES
   ============================================================ */

@media(max-width:360px){

  .main{
    padding:8px;
  }

  .nav button{
    font-size:10px;
    padding:7px 9px;
  }

  .btn{
    font-size:11px;
  }

  #designTimerValue{
    font-size:32px!important;
  }

}

/* ============================================================
   MOBILE NAVIGATION — FINAL OVERRIDE
   ============================================================ */

.mobile-topbar,
.mobile-nav-overlay{
  display:none;
}

@media(max-width:700px){

  body{
    overflow-x:hidden;
  }

  /* ----------------------------------------------------------
     Mobile top bar
     ---------------------------------------------------------- */

  .mobile-topbar{
    position:sticky;
    top:0;
    z-index:1100;
    width:100%;
    height:62px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 12px;
    background:#111315;
    color:#fff;
    box-shadow:0 2px 12px rgba(0,0,0,.18);
  }

  .mobile-menu-btn{
    width:42px;
    height:42px;
    flex:0 0 42px;
    border:0;
    border-radius:10px;
    background:#24272b;
    color:#fff;
    font-size:23px;
    line-height:1;
    cursor:pointer;
  }

  .mobile-brand{
    display:flex;
    align-items:center;
    gap:9px;
    min-width:0;
    flex:1;
  }

  .mobile-brand img{
    width:38px;
    height:38px;
    border-radius:9px;
    object-fit:cover;
    flex:0 0 38px;
  }

  .mobile-brand-name{
    font-size:12px;
    font-weight:900;
    letter-spacing:1.5px;
    line-height:1.1;
    white-space:nowrap;
  }

  .mobile-brand-sub{
    margin-top:2px;
    color:#92969c;
    font-size:8px;
    letter-spacing:1.3px;
    white-space:nowrap;
  }

  .mobile-role-dot{
    width:9px;
    height:9px;
    border-radius:50%;
    flex:0 0 9px;
  }

  /* ----------------------------------------------------------
     Real mobile drawer
     ---------------------------------------------------------- */

  .side{
    position:fixed!important;
    top:0!important;
    bottom:0!important;
    left:0!important;
    width:min(310px,86vw)!important;
    height:100vh!important;
    max-height:100vh!important;
    padding:20px 14px!important;
    z-index:1200!important;

    transform:translateX(-105%);
    transition:transform .22s ease;
    box-shadow:12px 0 35px rgba(0,0,0,.28);

    overflow-y:auto!important;
    overflow-x:hidden!important;
  }

  body.mobile-nav-open .side{
    transform:translateX(0);
  }

  .mobile-nav-overlay{
    position:fixed;
    inset:0;
    z-index:1150;
    background:rgba(0,0,0,.48);
    opacity:0;
    pointer-events:none;
    transition:opacity .22s ease;
  }

  body.mobile-nav-open .mobile-nav-overlay{
    display:block;
    opacity:1;
    pointer-events:auto;
  }

  /* Restore normal vertical navigation inside drawer */

  .side .nav{
    display:flex!important;
    flex-direction:column!important;
    gap:5px!important;
    width:100%!important;
    overflow:visible!important;
    padding:0!important;
  }

  .side .nav button{
    width:100%!important;
    flex:0 0 auto!important;
    white-space:normal!important;
    padding:12px 13px!important;
    font-size:13px!important;
  }

  .side .user{
    margin-top:auto;
  }

  .side .user select,
  .side .logout{
    width:100%!important;
  }

  /* ----------------------------------------------------------
     Main content starts immediately below mobile header
     ---------------------------------------------------------- */

  .app{
    display:block!important;
    width:100%!important;
    min-width:0!important;
  }

  .main{
    margin-left:0!important;
    width:100%!important;
    max-width:100%!important;
    padding:14px!important;
  }

  /* ----------------------------------------------------------
     Mobile page header
     ---------------------------------------------------------- */

  .top{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
    margin-bottom:16px;
  }

  .top-left{
    min-width:0;
  }

  .top-left .kicker{
    font-size:9px;
    letter-spacing:1.2px;
  }

  .top h1{
    font-size:27px;
    line-height:1.1;
    margin-top:5px;
  }

  .top-right{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }

  .top-right .btn{
    width:100%;
    min-width:0;
  }

  .top-right .chip{
    grid-column:1 / -1;
    justify-content:center;
    width:100%;
  }

  /* ----------------------------------------------------------
     Prevent accidental horizontal overflow
     ---------------------------------------------------------- */

  #view{
    width:100%;
    min-width:0;
  }

  #view > *{
    max-width:100%;
    min-width:0;
  }

}

@media(max-width:480px){

  .mobile-topbar{
    height:58px;
    padding:7px 10px;
  }

  .mobile-menu-btn{
    width:40px;
    height:40px;
    flex-basis:40px;
  }

  .mobile-brand img{
    width:36px;
    height:36px;
    flex-basis:36px;
  }

  .mobile-brand-name{
    font-size:11px;
  }

  .main{
    padding:10px!important;
  }

  .top-right{
    grid-template-columns:1fr;
  }

  .top-right .chip{
    grid-column:auto;
  }

}

/* ============================================================
   MOBILE NAV RESTORE
   Keep horizontal swipe navigation.
   No hamburger / drawer on mobile.
   ============================================================ */

@media(max-width:700px){

  /* Hide the mobile drawer/header introduced by the previous patch */
  .mobile-topbar{
    display:none!important;
  }

  .mobile-nav-overlay{
    display:none!important;
  }

  /* Restore normal horizontal navigation */
  .side{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    bottom:auto!important;

    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;

    padding:12px 10px 0!important;

    transform:none!important;
    box-shadow:none!important;

    overflow:hidden!important;
  }

  .side-brand{
    padding:4px 10px 8px!important;
  }

  .side-brand img{
    width:42px!important;
    height:42px!important;
  }

  .side .small{
    margin:2px 10px 12px!important;
  }

  .side .nav{
    display:flex!important;
    flex-direction:row!important;

    width:100%!important;

    gap:6px!important;

    overflow-x:auto!important;
    overflow-y:hidden!important;

    padding:0 6px 9px!important;

    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  .side .nav::-webkit-scrollbar{
    display:none;
  }

  .side .nav button{
    flex:0 0 auto!important;
    width:auto!important;

    white-space:nowrap!important;

    padding:9px 12px!important;
    border-radius:9px!important;

    font-size:11px!important;
  }

  /* User section stays compact */
  .side .user{
    margin-top:0!important;
    padding:10px 9px 8px!important;
  }

  .side .user select{
    margin-top:7px!important;
  }

  .side .logout{
    width:auto!important;
    margin-top:7px!important;
    padding:9px 14px!important;
  }

  /* Main content starts after compact navigation */
  .main{
    margin-left:0!important;
    width:100%!important;
    max-width:100%!important;

    padding:14px!important;

    /*
      Sidebar contains brand + nav + user.
      Keep enough space for it without recreating the
      huge previous mobile header.
    */
    margin-top:0!important;
  }

  /*
     The page header remains compact.
     Update controls are moved below the role chip.
  */

  .top{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:10px!important;
    margin-bottom:16px!important;
  }

  .top-left{
    order:1!important;
  }

  .top-right{
    order:2!important;

    width:100%!important;

    display:flex!important;
    flex-direction:column!important;

    gap:8px!important;
  }

  /* Role chip first */
  .top-right .chip{
    order:1!important;

    width:100%!important;
    justify-content:flex-start!important;

    min-height:38px;
  }

  /* Update buttons below role */
  .top-right #updateBtn{
    order:2!important;
    width:100%!important;
  }

  .top-right #updateSettingsBtn{
    order:3!important;
    width:100%!important;
  }

}

/* Smaller phones */
@media(max-width:480px){

  .side{
    padding:9px 8px 0!important;
  }

  .side-brand{
    padding:2px 8px 6px!important;
  }

  .side-brand img{
    width:38px!important;
    height:38px!important;
  }

  .side .small{
    margin:2px 8px 8px!important;
  }

  .side .nav{
    padding-left:3px!important;
    padding-right:3px!important;
    padding-bottom:7px!important;
  }

  .side .nav button{
    font-size:10px!important;
    padding:8px 10px!important;
  }

  .side .user{
    padding:8px 8px 7px!important;
  }

  .side .user-name{
    font-size:12px!important;
  }

  .side .user-role{
    font-size:10px!important;
  }

  .main{
    padding:10px!important;
  }

}


/* ============================================================
   MOBILE — USER / LANGUAGE / LOGOUT AT BOTTOM
   ============================================================ */

@media(max-width:700px){

  .side .user{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    z-index:1050!important;

    width:100%!important;
    margin:0!important;

    padding:9px 12px 10px!important;

    background:#111315!important;
    border-top:1px solid #2c2f34!important;

    display:flex!important;
    align-items:center!important;
    gap:8px!important;
  }

  .side .user-name,
  .side .user-role{
    display:none!important;
  }

  .side .user select{
    flex:1 1 auto!important;
    width:auto!important;
    min-width:0!important;
    margin:0!important;
    height:40px!important;
  }

  .side .logout{
    flex:0 0 auto!important;
    width:auto!important;
    margin:0!important;
    height:40px!important;
    padding:8px 16px!important;
  }

  /*
     Give the main content enough room so the fixed
     bottom controls never cover the page.
  */
  .main{
    padding-bottom:72px!important;
  }

}

@media(max-width:480px){

  .side .user{
    padding:8px 10px 9px!important;
  }

  .side .user select{
    height:38px!important;
  }

  .side .logout{
    height:38px!important;
    padding:7px 14px!important;
  }

  .main{
    padding-bottom:68px!important;
  }

}


/* ============================================================
   MOBILE FOOTER — FINAL
   Update controls + User controls
   Nothing may appear underneath.
   ============================================================ */

@media(max-width:700px){

  /* ----------------------------------------------------------
     MOBILE FOOTER AREA
     ---------------------------------------------------------- */

  /*
     User controls occupy the bottom row.
     Update controls occupy the row immediately above.
  */

  .side .user{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;

    width:100%!important;
    height:54px!important;

    margin:0!important;
    padding:7px 10px!important;

    z-index:2000!important;

    display:flex!important;
    align-items:center!important;
    gap:8px!important;

    background:#111315!important;
    border-top:1px solid #35383d!important;

    box-shadow:0 -4px 16px rgba(0,0,0,.14)!important;
  }

  .side .user-name,
  .side .user-role{
    display:none!important;
  }

  .side .user select{
    flex:1 1 auto!important;

    width:auto!important;
    min-width:0!important;
    max-width:none!important;

    height:40px!important;
    margin:0!important;
  }

  .side .logout{
    flex:0 0 auto!important;

    width:auto!important;
    height:40px!important;

    margin:0!important;
    padding:8px 16px!important;
  }


  /* ----------------------------------------------------------
     UPDATE BUTTONS = FOOTER ROW ABOVE USER
     ---------------------------------------------------------- */

  /*
     Keep the role chip in the normal page header.
     Only the two update buttons are moved into the footer.
  */

  .top-right{
    position:static!important;
  }

  .top-right #updateBtn,
  .top-right #updateSettingsBtn{

    position:fixed!important;

    bottom:62px!important;

    z-index:1999!important;

    height:42px!important;
    margin:0!important;

    width:calc(50% - 8px)!important;
    max-width:none!important;

    padding:8px 10px!important;
  }

  .top-right #updateBtn{
    left:8px!important;
  }

  .top-right #updateSettingsBtn{
    right:8px!important;
  }


  /* ----------------------------------------------------------
     ROLE CHIP STAYS IN PAGE HEADER
     ---------------------------------------------------------- */

  .top-right .chip{
    position:static!important;

    width:100%!important;
    justify-content:flex-start!important;

    min-height:38px!important;
  }


  /* ----------------------------------------------------------
     RESERVE THE ENTIRE FOOTER HEIGHT
     ---------------------------------------------------------- */

  .main{
    padding-bottom:128px!important;
  }

  #view{
    padding-bottom:8px!important;
  }

}


@media(max-width:480px){

  .side .user{
    height:52px!important;
    padding:6px 8px!important;
  }

  .side .user select{
    height:38px!important;
  }

  .side .logout{
    height:38px!important;
    padding:7px 14px!important;
  }

  .top-right #updateBtn,
  .top-right #updateSettingsBtn{
    bottom:59px!important;
    height:40px!important;
  }

  .top-right #updateBtn{
    left:7px!important;
    width:calc(50% - 10px)!important;
  }

  .top-right #updateSettingsBtn{
    right:7px!important;
    width:calc(50% - 10px)!important;
  }

  .main{
    padding-bottom:122px!important;
  }

}


/* ============================================================
   MOBILE — HEADER MUST STAY IN DOCUMENT FLOW
   Nothing may appear underneath the header.
   ============================================================ */

@media(max-width:700px){

  /* Header is no longer fixed over the page */
  .side{
    position:relative!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;

    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;

    transform:none!important;

    overflow:visible!important;

    z-index:20!important;

    box-shadow:none!important;
  }

  /* Navigation remains horizontal / swipeable */
  .side .nav{
    display:flex!important;
    flex-direction:row!important;
    width:100%!important;

    overflow-x:auto!important;
    overflow-y:hidden!important;

    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  .side .nav::-webkit-scrollbar{
    display:none;
  }

  .side .nav button{
    flex:0 0 auto!important;
    width:auto!important;
    white-space:nowrap!important;
  }

  /* Main content follows the header naturally */
  .main{
    position:relative!important;

    margin-top:0!important;
    margin-left:0!important;

    width:100%!important;
    max-width:100%!important;

    padding-top:14px!important;
    padding-bottom:128px!important;

    z-index:1!important;
  }

  /* Page title can never sit underneath the header */
  .top{
    position:relative!important;
    z-index:1!important;
  }

  #view{
    position:relative!important;
    z-index:1!important;
  }

}

@media(max-width:480px){

  .main{
    padding-top:10px!important;
    padding-bottom:122px!important;
  }

}


/* ============================================================
   MOBILE FOOTER — LANGUAGE SELECT VISIBILITY FIX
   ============================================================ */

@media(max-width:700px){

  .side .user{
    height:64px!important;
    min-height:64px!important;

    padding:10px 12px!important;

    align-items:center!important;

    overflow:visible!important;
  }

  .side .user select{
    height:44px!important;
    min-height:44px!important;

    line-height:normal!important;

    padding:8px 34px 8px 14px!important;

    margin:0!important;

    box-sizing:border-box!important;

    overflow:visible!important;

    vertical-align:middle!important;
  }

  .side .logout{
    height:44px!important;
    min-height:44px!important;

    line-height:normal!important;

    padding:8px 16px!important;

    margin:0!important;

    box-sizing:border-box!important;
  }

  /*
     Reserve the full footer height.
     Nothing from CRM content can sit underneath it.
  */
  .main{
    padding-bottom:142px!important;
  }

}

@media(max-width:480px){

  .side .user{
    height:62px!important;
    min-height:62px!important;

    padding:9px 10px!important;
  }

  .side .user select{
    height:42px!important;
    min-height:42px!important;

    padding:7px 32px 7px 13px!important;
  }

  .side .logout{
    height:42px!important;
    min-height:42px!important;

    padding:7px 14px!important;
  }

  .main{
    padding-bottom:138px!important;
  }

}