/* FLAT DESIGN */

.tabs-side li a {
   box-sizing: border-box;
   width: 100%;
}

#sub-header {
   border: 0px !important;
}
#user-color-preview {
   height: 23px;
}
.bar {
   background: none !important;
}
.menu {
   box-shadow: none !important;
   -webkit-box-shadow: none !important;
   -moz-box-shadow: none !important;
}
.menu a:hover {
   border: 1px solid transparent !important;
   background-position: 0px -3px !important;
}
.tabs-side li a, .item, .menu a:hover, .btn, .menu, #sub-header .tab, .fc-header .fc-button {
   border-radius: 0;
}

.btn:not(.ui-icons) {
   background-image: none !important;
}
.btn {
   border: 0px !important;
   box-shadow: none !important;
   -webkit-box-shadow: none !important;
   -moz-box-shadow: none !important;
}

.item {
   background: none !important;
}

.tabs-side li a:after, .item:after, .btn:after, .menu:after, #sub-header .tab:after, .fc-header .fc-button:after {
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   pointer-events: none;
   background-color: rgb(234 234 234 / 20%);
}

input:focus{
   outline: none;
}

input:focus, textarea:focus, select:focus {
    box-shadow: none !important;
    border-bottom: 2px solid #666 !important;
}

input[type=text], textarea, select {
   background-color: #eee !important;
   border: 0px !important;
   border-bottom: 2px solid #ccc !important;
}

/* ************ */

.btn-stacking {
  margin-left: 3px;
}

.exitsearchicon {
   position: absolute;
   top: -8px;
   left: -8px;
}

.clickrows td {
   cursor: pointer;
}

#spinner
{
   position: fixed;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   background: url(../images/spinner.gif) no-repeat center center #FFFFFF;

   opacity: .75;
   filter: alpha(opacity=75);
   -webkit-opacity: .75;

   display: none;
   z-index: 9999;
}


.overlay-list-box,
#recent-clients-box
{
   position : absolute;
   padding  : 1px;

   background-color : white;
   background-color : rgba(255, 255, 255, .9);

   box-shadow         : 0 3px 5px #666;
   -moz-box-shadow    : 0 3px 5px #666;
   -webkit-box-shadow : 0 3px 5px #666;

   border-radius         : 2px;
   -moz-border-radius    : 2px;
   -webkit-border-radius : 2px;
}
.overlay-list-box
{
   box-shadow         : 0px 2px 5px #666;
   -moz-box-shadow    : 0px 2px 5px #666;
   -webkit-box-shadow : 0px 2px 5px #666;
}

.overlay-list-box ul,
#recent-clients-box ul
{
   margin  : 0;
   padding : 0;
}
.overlay-list-box ul li,
#recent-clients-box ul li
{
   margin           : 0;
   padding          : 5px 15px;
   list-style       : none;
   background-color : transparent;
}
.overlay-list-box ul li:hover,
#recent-clients-box ul li:hover{ background-color: #06C; }

.overlay-list-box ul li:hover a,
.overlay-list-box ul li:hover a:visited,
.overlay-list-box ul li:hover a:hover,
#recent-clients-box ul li:hover a,
#recent-clients-box ul li:hover a:visited,
#recent-clients-box ul li:hover a:hover{ color: #FFF; text-decoration: none; }



#sub-header form{ margin: 27px 0 25px; }

.hide{ display: none; }

.item.fullscreen span{ background-image: url(../images/layout/fullscreen_12x12.png); }


/*reduce datatables height*/
.dataTables_wrapper{ min-height: inherit; }

.footer-flag
{
   margin-right: 5px;
   cursor: pointer;

   -moz-opacity:.55;
   -webkit-opacity:.55;
   -khtml-opacity:.55;
   opacity:0.55;
   filter:alpha(opacity=55);
}

.footer-flag.selected
{
   cursor: default;

   -moz-opacity:1;
   -webkit-opacity:1;
   -khtml-opacity:1;
   opacity:1;
   filter:alpha(opacity=100);
}

/*CHECKBOXES LABEL*/
.checkboxlabel{ cursor: pointer; }
.checkboxlabel:hover{ text-decoration: underline; }

#wrapper {
    margin-top: 56px;
}

#header {
    position: fixed;
    width: 100%;
    z-index: 200;
    top: 0px;
}


/* TEXT ALIGNMENT */
.align-left  { text-align : left    !important; }
.align-right { text-align : right   !important; }
.centralize  { text-align : center  !important; }
.justify     { text-align : justify !important; }



/* DATATABLE CUSTOMFIELDS FILTER CONTAINER */
#customfields-dtfilter-container
{
   position      : relative;
   display       : inline-block !important;
   width         : calc(100% - 26px);
   margin-top    : -6px;
   margin-bottom : 9px;
   padding       : 5px 12px;
   border        : 1px solid #E0E0E0;
   background    : #EEE;

   -webkit-border-radius : 3px;
      -moz-border-radius : 3px;
           border-radius : 3px;
}


   #customfields-dtfilter-container .content
   {
      clear       : both;
      margin-top  : 4px;
      padding-top : 12px;
      border-top  : solid 1px #DDD;
   }
   #customfields-dtfilter-container.collapsed .content{ display : none; }


   #customfields-dtfilter-container .header{ position : relative; }

      #customfields-dtfilter-container .header span
      {
         color       : #369;
         font-weight : bold;
      }

      #customfields-dtfilter-container .header a.toggle-btn
      {
         position        : absolute;
         right           : 0;
         top             : 2px;
         padding         : 1px 3px;
         font-size       : 14px;
         line-height     : 13px;
         background      : #D3D3D3;
         text-decoration : none;

         -webkit-border-radius : 1px;
            -moz-border-radius : 1px;
                 border-radius : 1px;
      }
         #customfields-dtfilter-container .header a.toggle-btn span{ color : #777; }

            #customfields-dtfilter-container .header a.toggle-btn span.times{ display : inline; }
            #customfields-dtfilter-container .header a.toggle-btn span.plus { display : none; }
               #customfields-dtfilter-container.collapsed .header a.toggle-btn span.times{ display : none; }
               #customfields-dtfilter-container.collapsed .header a.toggle-btn span.plus { display : inline; }


   #customfields-dtfilter-container .field-block
   {
      width         : 24%;
      float         : left;
      margin-right  : 1%;
      margin-bottom : 5px;
   }

      #customfields-dtfilter-container .field-block label{ display : block; }

      #customfields-dtfilter-container .field-block input{ width : 90%; }
         #customfields-dtfilter-container .field-block.end input{ width : 99%; }

#menubtn {
   display: none;
   margin:8px;
   position: absolute;
   z-index: 4;
}

.searchtitle {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
}

.form .field {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
}

.field.columns {
   flex-direction: column;
}

.fields.columns {
   flex-direction: column;
}


.form .field > label{
   margin-right: 5px;
   margin-bottom: 5px;
}

.form .field > label {
   position: unset;
}

input[type=text], input[type=password], input[type=search], select, textarea {
   box-sizing: border-box;
   max-width: 100%;
}

.hidden {
   display: none !important;
}

.form .actions {
   margin-left: unset;
   display: flex !important;
   justify-content: space-between;
}

.jquery-timepicker-container {
   display: flex;
   flex-direction: column;
}

.jquery-timepicker-container > .hoursrow {
   display: flex;
   flex-wrap: wrap;
}

.form .input label:first-child, .form .select label:first-child {
   top: unset;
}

#modal {
   margin-left: unset !important;
   position: fixed;
   left: 50% !important;
   top: 50% !important;
   transform: translate(-50%, -50%);
   max-height: 90vh;
   overflow: auto;
   z-index: 999;
}

.field-width-1 input {
   max-width: 10%;   
}
.field-width-2 input {
   max-width: 20%;
}
.field-width-3 input {
   max-width: 30%;
}
.field-width-4 input {
   max-width: 40%;
}
.field-width-5 input {
   max-width: 50%;
}
.field-width-6 input {
   max-width: 60%;
}
.field-width-7 input {
   max-width: 70%;
}
.field-width-8 input {
   max-width: 80%;
}
.field-width-9 input {
   max-width: 90%;
}
@media only screen and (min-width: 964px) {
   .mobileonly {
      display: none !important;
   }
}


/* Responsive CSS */
@media only screen and (max-width: 963px) {
   #project-fields-area .projectfield-row {
      float: none !important;
      height: auto;
      margin: 0 !important;
      width: 100% !important;
      display: flex !important;
      border-bottom: 1px solid #eaeaea;
      white-space: nowrap;
   }

   #project-fields-area .projectfield-row > div:not(:first-child) {
      text-align: right;
   }

   #project-tasks-area div.project-tasks {
      margin-left: 0;
   }

   #project-tasks-area div.project-tasks div {
      padding-left: 0;
   }

   tr.shrink-wrapper>td div.shrinked-row {
      border-bottom: solid 1px #CCC;
      box-sizing: border-box;
   }

   .shrink-toggle {
      position: relative;
   }

   .shrink-toggle > span {
      position: absolute;
      top: 50%;  /* position the top  edge of the element at the middle of the parent */
      left: 50%; /* position the left edge of the element at the middle of the parent */
      transform: translate(-50%, -50%);
   }

   .mobileflex-col {
      display: flex;
      flex-direction: column;
   }

   .mobileflex-col > *:not(:first-child) {
      margin-top: 10px;
   }

   #modal_close {
      font-size: 40px;
   }

   .ui-resizable-handle.ui-resizable-s {
      display: none;
   }

   #eventend-a {
      display: flex;
      flex-wrap: wrap;
   }

   .form .field.input.expandable {
      padding: 15px 15px 15px 20px !important;
   }

   .form .field.input.expandable .projecttype-field {
      width: 100%;
      display: flex;
      flex-direction: column;
   }

   .fc-header-title h2 {
      font-size: 12px;
   }

   .customfields-dtfilter-container {

   }

   #customfields-dtfilter-container .content {
      display: flex;
      flex-direction: column;
   }

   #customfields-dtfilter-container .field-block {
      flex: 1;
      width: unset;
      margin-right: unset;
   }

   #customfields-dtfilter-container .field-block input {
      width: 100% !important;
   }

   .prettybuttons {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
   }

   .prettybuttons > a, .prettybuttons > button {
      margin-right: 10px;
      margin-bottom: 10px;
      height: fit-content;
   }

   #order-table #orderrows-area tr td:not(.mobiledetails):not(.actions) {
      padding-bottom: 80px;
   }

   #order-table tbody tr td:not(.mobiledetails):not(.actions), #credited-rows tbody tr td:not(.mobiledetails):not(.actions) {
      padding-bottom: 40px;
   }

   #orderrows-area tr:not(.ui-sortable-helper) .actions img {
      visibility: unset;
      padding: 5px;
      width: 20px;
      height: 20px;
   }

   #orderrows-area .actions {
      display: flex;
      flex-wrap: wrap;
      position: absolute;
      left: 0;
      bottom: 0;
      box-sizing: border-box;
      width: 50% !important;
      justify-content: space-between;
   }

   #order-table #orderrows-area .mobiledetails {
      position: absolute;
      left: 0;
      bottom: 40px;
      width: 100% !important;
      padding: 0px 0px 0px 10px;
      box-sizing: border-box;
   }

   #order-table .mobiledetails, #credited-rows .mobiledetails {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100% !important;
      padding: 0px 0px 0px 10px;
      box-sizing: border-box;
   }

   #orderrows-area .mobiledetails div, #order-table .mobiledetails div, #credited-rows .mobiledetails div {
      display: flex;
      flex-direction: row;
      align-items: center;
   }

   #orderrows-area .mobiledetails div:first-child, #order-table .mobiledetails div:first-child, #credited-rows .mobiledetails div:first-child {
      padding-right: 10px;
   }

   #recent-clients-box {
      right: 10px !important;
      left: unset !important;
   }

   .mobilehide {
      display: none !important;
   }

   .container {
      zoom: unset;
      min-width: unset;
   }

   #content {
      margin: 0;
      padding: 10px;
   }

   .fields {
      display: flex;
   }

   #content > .container .prepend_1 {
      padding-left: 0;
   }

   #content .container [class*="grid_"] {
      width: 100%;
      overflow: auto;
   }

   #content .container .grid {
      float: none;
      margin-left: inherit;
      margin-right: inherit;
      display: block;
   }

   .clientprojectdisplay {
      display: flex;
   }

   .clientprojectdisplay > .grid:last-child {
      margin-left: 5px !important;
   }

   #menubtn {
      display: block;
   }

   #header {
      width: 150px;
      height: auto;
      position: absolute;
      padding-top: 37px;
      display: none;
      box-shadow: inset 0 0 3px #000000;
      z-index: 3;
   }

   #header .container {
      width: 150px;
      min-width: auto;
   }

   #header > .container > .grid_24 {
      margin-bottom: 1.5px !important;
   }
   
   #header > .container > .grid_24 > ul {
      display: flex;
      flex-direction: column;
   }

   #header > .container > .grid_24 > ul > li.homebutton {
      position: absolute;
      top: 9px;
      left: 100px;
   }

   #header > .container > .grid_24 > ul > li.homebutton > a {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0;
      width: 40px;
   }
   
   #header > .container > .grid_24 > ul > li > .menu {
      left: 150px;
      top: 0px;
   }

   #header > .container ul.configbuttons > li > .menu {
      top:34px;
      left: 0;
   }

   #header > .container ul.configbuttons > li > .menu > span.menu-top {
      background: none;
   }

   #header > .container > .grid_24 > ul > li > .item {
      height: inherit;
      border-radius: 0;
      line-height: inherit;
   }

   #header > .container > .grid_24 > ul > li > .item:not(.icon) {

      padding: 10px 0px 10px 5px;
   }

   #header > .container > .grid_24 > ul > li > .item.icon {
      padding: 9px 0px 9px 5px;
   }

   #header > .container > .grid_24 > ul > li.homebutton > .item.icon {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0;
      width: 40px;
   }
   
   #header > .container > .grid_24 > ul > li > .menu > span.menu-top {
      background: none;
   }

   #header > .container ul > li.nav {
      margin:0;
   }

   #header > .container ul.configbuttons {
      display: flex;
   }

   #header > .container ul > li.nav, #header > .container ul > li.bar {
      top: auto;
      flex:1;
   }

   #header > .container ul > li.bar:last-child {
      display:none;
   }
   
   #header > .container ul > li.bar {
      background: none;
      width: 100%;
      height: 0px;
      border: 0;
      background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
      height: 1px;
      margin-bottom: 5px;
      margin-top: 5px;
      margin-left: -4px;
   }
   
   #wrapper {
      margin-top: 0;
   }
   
   #sub-header {
      height: auto !important;
      padding-bottom: 10px;
   }
   
   #sub-header > .container {
      margin-top: 10px;
      display: flex;
      align-items: center;
      width: calc(100% - 57px);
      justify-content: space-between;
      min-width: initial;
      flex-wrap: wrap;
      margin-left: 56px;
   }
   
   #sub-header > .container > [class*="grid_"] {
      width: 100%;
      margin-top: -5px;
   }
   
   #sub-header > .container > form, #sub-header > .container .searchtitle > form {
      margin: 0;
      text-align: inherit !important;
      margin-left: auto !important;
      position: initial !important;
      width: inherit !important;
      display: flex;
      align-items: center;
      max-width: 255px;
      flex-wrap: wrap;
      margin-top: 5px;
   }

   .item, .btn, .paginate_active, .paginate_button, .tab-nav li a {
      font-weight: 400 !important;
      white-space: nowrap !important;
      vertical-align: middle !important;
      -webkit-user-select: none !important;
      -moz-user-select: none !important;
      -ms-user-select: none !important;
      user-select: none !important;
   }

   .item, .btn, .paginate_active, .paginate_button, .tab-nav li a, .tabs-side.tabs-top li a {
      background-blend-mode: color;
   }

   #header li:not(.homebutton) .item {
      border-radius: 0px !important;
      border-top: 0;
      border-left:0;
      border-right:0;
   }

   .configbuttons .item {
      border-bottom: 0;
   }

   #sub-header > .container > form > a, #sub-header > .container .searchtitle > form > a {
      top:initial !important;
      padding: 3px 8px 5px 8px !important;
      margin-right: 5px;
   }

   #sub-header > .container > form > a, #sub-header > .container .searchtitle > form > #searchinput {
      padding: 5px;
   }

   #searchinputbtn {
      display: block;
   }

   #searchinputbtn img:first-child, #searchclosebtn img:first-child {
      filter: invert(100%);
   }

   #sub-header > .container .searchtitle {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
   }

   #sub-header > .container > form > #client-history-search-btn, #sub-header > .container .searchtitle #client-history-search-btn {
      margin-right: 5px;
      padding: 4px 7px;
      line-height: 17px;
      display: flex;
      align-items: center;
   }
   
   #sub-header h2 {
      margin:0;
      margin-top:5px;
      font-size: 15px;
      font-weight: 600;
   }

   #footer > .container,#content > .container {
      min-width: auto;
      width: 100%;
   }

   #footer {
      padding-left: 5px;
      padding-right: 5px;
   }

   #footer .grid {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
   }

   #footer > .container > #copyright {
      width: inherit;
   }

   #content > .container {
      display: flex;
      flex-direction: column;
   }

   #content > .container > .grid_6{
      width: auto;
      display: block;
      float: none;
      margin: 0;
      margin-bottom: 1%;

   }

   #content > .container .tabs-side {
      min-height: auto;
      border: 0;
      margin: 0;
      padding: 0;
      background-image: linear-gradient(to right, #e7e4e4, hsla(0, 0%, 80%, 1) );
   }

   #content > .container .tabs-side > .tab-nav {
      margin: 0;
      display: flex;
      height: 100%;
   }

   #content > .container .tabs-side > .tab-nav li {
      flex: 1;
      justify-self: stretch;
   }

   #content > .container .tabs-side > .tab-nav li a {
      padding: 5px;
      width: 100%;
      display: flex;
      justify-content: stretch;
      flex-direction: revert;
      height: 100%;
      border-radius: 0 !important;
      word-break: break-word;
      align-items: center;
      box-sizing: border-box;
   }

   #content > .container .tabs-side > .tab-nav li a > div {
      padding: 0;
      margin:5px;
      width: 100%;
      display: flex;
      justify-content: stretch;
      flex-direction: revert;
      height: 100%;
      border-radius: 0 !important;
      word-break: break-word;
      align-items: center;
      box-sizing: border-box;
   }

   #content > .container .tabs-side > .tab-nav li a > span, #content {
      margin: 5px;
      flex: 1;
   }

   #content > .container .tabs-side > .tab-nav li a > div > * {
      flex: 1;
   }


   .paging_full_numbers {
      height: inherit;
      width: 100%;
   }

   #modal {
      margin-left: unset !important;
      position: fixed;
      left: 50% !important;
      top: 50% !important;
      transform: translate(-50%, -50%);
      max-height: 100vh;
      overflow: auto;
      width: 90vw;
      border-radius: 0;
   }

   #modal_content {
      width: 100% !important;
      box-sizing: border-box;
   }

   #modal_content > iframe {
      width: 80vw !important;
   }

   input[type=text], input[type=password], input[type=search], select, textarea {
      box-sizing: border-box;
      max-width: 100%;
      flex: 1;
      padding: 10px;
   }

   .chzn-container {
      width: 100% !important;
   }
   
   .chzn-drop {
      width: 100% !important;
   }
   
   .chzn-search {
      display: flex !important;
   }
   
   .chzn-search > input {
      width: 100% !important;
   }

   #importdata-area iframe {
      width: 100%;
   }

   .grid_24 > #extra-controllers {
      display: flex;
      flex-wrap: wrap;
      position: unset;
   }

   .msgAlert {
      margin-left: 0;
      transform: translate(-50%, 50%);
      width: calc(100% - 10px);
   }

   #extra-controllers input[type=text],#extra-controllers input[type=password],#extra-controllers select,#extra-controllers textarea {
      margin: 5px;
   }

   #extra-controllers > label {
      margin: 5px;
   }

   #extra-controllers + .dataTables_wrapper input[type=text],#extra-controllers + .dataTables_wrapper select, #extra-controllers + .dataTables_wrapper label {
      margin: 5px;
   }

   .form .field {
      display: flex;
   }

   .form .field > .fields {
      width: 100%;
      flex: 1;
      display: flex;
      flex-direction: column;
   }

   .form .field > .fields > input[type="text"],.form .field > .fields > select,.form .field > .fields > textarea, .form .field > .fields > input[type="password"] {
      width: 100% !important;
      max-width: inherit !important;
      margin:0 !important;
   }

   .form .field > .fields > .btn {
      width: fit-content;
   }

   .form .field > label {
      position: unset;
   }

   #content > .container .tabs-side > .tab-nav {
      flex-direction: column;
   }

   #order-area .tab-content {
      height: inherit;
   }

   .orderfields {
      display: flex;
      flex-wrap: wrap;
   }

   .orderfields > .grid.grid_14 {
      max-width: 250px;
      margin-right: auto;
   }

   .orderfields > .grid.grid_14 {
      max-width: 250px;
      margin-right: auto !important;
   }

   .orderfields > .grid.grid_10 {
      max-width: 250px;
   }

   #producttabs {
      width: fit-content;
   }

   #producttabs > .tabs-side.tabs-top {
      display: flex;
      border-bottom: 0;
   }   

   .jquery-searchbox-container li {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
   }

   ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
      padding: 10px;
   }

   #ui-datepicker-div {
      position: fixed !important;
      top: 50% !important;
      left: 50% !important;
      z-index: 9999 !important;
      width: calc(100% - 20px);

      -webkit-transform   : translateX(-50%) translateY(-50%) !important;
      -moz-transform      : translateX(-50%) translateY(-50%) !important;
      -ms-transform       : translateX(-50%) translateY(-50%) !important;
      transform           : translateX(-50%) translateY(-50%) !important;
   }

   table.project-task-table.floating {
      transform: translateZ(0);
   }

   #content > .container > .grid_6#main-buttons-area {
      margin-bottom: 0px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
   }

   #minicatalog-overlay #modal.minicatalog {
      width: 96% !important;
   }

   #minicatalog-overlay form {
      overflow: auto;
   }

 }

 @media only screen and (max-width: 414px) {

   .dataTables_wrapper {
      display: flex;
      flex-direction: column;
   }

   .dataTables_wrapper > .dataTables_length {
      width: 100%;
      float: none;
   }

   .dataTables_wrapper > .dataTables_filter {
      width: 100%;
      float: none;
      text-align: unset;
   }

   #content > .container > .grid_6#main-buttons-area {
      margin-bottom: 0px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
   }
 }