/* 
    Created on : 11 mei 2021, 08:31:03
    Author     : Roeland
*/

:root {
   --color-blue: #0078D7;
   --color-medium-blue: #A5CFF1;
   --color-light-blue: #ECF7FE;
   --color-light-gray: #F4F4F4;
   --color-gray: #DFE3E8;
   --color-dark-gray: #666666;
   --color-green: SeaGreen;
   --color-lightgreen: #E3F0E9;
   --color-mediumgreen: #BAD9C8;
   --color-red:#AF2031;
   --color-red2:#F8C8CC;
   --color-red3:#FADCDD;
   --color-red-dark:#8E2D30;
   --color-red-light:#FF0000;
}

* {
   box-sizing: border-box;
}

/* disable pull to refresh */
html {
   overscroll-behavior: none; 
}

body {
   margin: 0;
   overscroll-behavior: none; 
}

table {
   border-collapse: collapse;
}

.hrmBody td {
   line-height: 16px;
}
.hrmBody tr {
   height: 36px;
}

.optionsBody td {
   line-height: 16px;
}
.optionsBody tr {
   height: 36px;
}


/* div table */
.Table {
   display: table;
   width: 100%;
}
.Row {
   display: table-row;
   line-height: 21px;
}
.Cell {
   display: table-cell;
   vertical-align: bottom;
}

.buttonRowHRM {
   padding-bottom: 5px;   
}

/* used by window's minimize maximize close buttons */
.windowheader1 {
   background: var(--color-red);
}
.windowheader2 {
   color: white;
   text-align: center;
   padding: 8px;
   width: 100%;
   background: var(--color-red);
}
.windowheader3 {
   background: var(--color-red);
}
.windowheader3 div:hover {
   background: var(--color-red-dark) !important;
}
.windowheader4 {
   background: var(--color-red);
}
.windowheader4 div:hover {
   background: var(--color-red-light) !important;
}

table td div {
   overflow:hidden;
}

.hline {
   border-bottom: 1px solid #AAAAAA;
   height: 5px;
   margin: 10px 50px 10px 50px;
}

.jqx-loader {
   background: transparent;
   border: none;   
   z-index: 999999;
}
.jqx-loader-modal {
   background: transparent;
}
.jqx-loader-icon {
   background-image: url("../imageMSO/loading-new.gif");   
}
.jqx-loader-text-bottom {
  font-size: 20px;
  font-weight: bold;
  color: var(--color-green);
}

.jqx-widget-office {
   font-family: Verdana,Arial,sans-serif;
}

.jqx-rc-all-base {
   -moz-border-radius: 0px;
   -webkit-border-radius: 0px;
   border-radius: 0px;
}

.jqx-fill-state-focus-office, 
.jqx-combobox-content-focus-office, 
.jqx-numberinput-focus, 
.jqx-fill-state-hover-office, 
.jqx-datetimeinput-focus-office, 
.jqx-fill-state-pressed-office{ 
   border-color: var(--color-green); 
}

/*customizaton*/
.jqx-scrollbar {
   z-index: 1;
}

.jqx-grid-column-header {
   font-size: 11px;
}
.jqx-window-content {
   padding: 0;
}

.jqx-dropdownlist-state-hover-office {
   background-color: transparent;
}

.jqx-icon-arrow-down-office {
   background-color: #ddd;
}

/*hide tabs on tap strip*/
.jqx-tabs {
   border: 0;
}
.jqx-tabs-header {
   display: none;
}

/*set default font*/
.jqx-widget {
   font-family: Verdana,Arial,sans-serif;
   font-style: normal;
   color: #000000;
}

.jqx-widget-content {
   color: var(--color-dark-gray);
}

.jqx-checkbox {
   font-size: 13px;
   color: var(--color-dark-gray) !important;
}

.jqx-widget-content-office {
  color: #000 !important;
}

.jqx-widget-content-base {
  font-size: 11px !important;
}

input.jqx-input[type="text"] {
   max-width: 325px;
}

.jqx-fill-state-normal-office {
  color: #000 !important;
  xfont-size: 12px !important;
}


/*set left align for checkbox*/
.jqx-rtl {
   text-align: left !important;
}

/* grid header */
.jqx-input-button-header-office, 
.jqx-calendar-title-header-office, 
.jqx-grid-office .jqx-widget-header-office, 
.jqx-grid-header-office, 
.jqx-grid-column-header-office, 
.jqx-grid-office {
   background-color: var(--color-gray);
}
/* grid selection column */
.jqx-grid-cell-pinned-office {
   background-color: var(--color-gray);
}

/* hide 'no data to display' in empty grid */
.jqx-grid-empty-cell {
   color: white !important;
}

/* popup window title bar */
.jqx-window-header-office{
   background-color: var(--color-blue);
   color: #fff;
   padding: 8px;
}

/* popup window border */
.jqx-window-office {
   border-color: var(--color-blue);
}

/*radio button*/
.jqx-radiobutton-check-checked-office{
   background-color: #000 !important;
}

.jqx-fill-state-normal-office,
.jqx-widget-content-office,
.jqx-widget-office .jqx-grid-column-header-office,
.jqx-grid-cell-office,
.jqx-widget-office .jqx-grid-cell-office,
.jqx-widget-office .jqx-grid-group-cell-office,
.jqx-grid-group-cell-office,
.jqx-window-header-office {
   font-family: Verdana,Arial,sans-serif;
}

.jqx-listitem-state-selected, 
.jqx-listitem-state-normal {
   border: 0;
   padding-top: 2px;
   padding-bottom: 2px;
}

.jqx-window {
   box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0,0,0,0.15);
}

.index_main {
   width: 100%;
   height: 480px;
}

table.hrm {
   padding: 0 50px;
   border-spacing: 0px;
   border-collapse: separate;
   width: 820px;
}
table.hrm td {
   padding: 4px 0;
}

table.hrm-left {
   padding-left: 50px;
   border-spacing: 0px;
   border-collapse: separate;
}
table.hrm-left td {
   padding: 4px 0;
}

table.hrm-right {
   padding-left: 0px;
   border-spacing: 0px;
   border-collapse: separate;
}
table.hrm-right td {
   padding: 4px 0;
}

table.options {
   padding: 20px 50px 0px 50px;
   border-spacing: 0px;
   border-collapse: separate;
   width: 900px;
}
table.options td {
   padding: 5px 0;
}

table.parameters {
   padding: 20px 50px 0px 50px;
   border-spacing: 0px;
   border-collapse: separate;
   width: 900px;
}
table.parameters td {
   padding: 2px 0;
}

#cover {
   position: fixed;
   height: 100%;
   width: 100%;
   top:0;
   left: 0;
   background: #FFF;
   z-index:9999;
   font-size: 14px;
   text-align: center;
   padding-top: 200px;
   color: #000;
}

/* logo upload */

.drag-area{
   border: 2px dashed var(--color-blue);
   height: 75px;
   width: 300px;
   border-radius: 5px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
}
.drag-area.active{
   border: 2px solid var(--color-green);
}

.drag-area p {
   text-align: center;   
}

.drag-area button{
   font-weight: 500;
   border: none;
   outline: none;
   background: #fff;
   color: #5256ad;
   border-radius: 5px;
   cursor: pointer;
   transition: all 0.5s;
}

.drag-area button:hover{
   background: rgb(228, 220, 220);
}

@media (max-width: 745px) {

   .drag-area button{
      padding: 8px 20px;
      font-size: 18px;
      font-weight: bold;
   }

   .drag-area{
      height: 75px;
      width: 300px;
   }

   .drag-area header{
      font-size: 25px;
      font-weight: bold;
      color: #fff;
   }

   .drag-area .icon{
      font-size: 80px;
   }
}