/**************************************
 * libFields
 */

.dkField {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  overflow: visible;
  border-radius: 4px;
  background: white;
}

.dkField > div {
  -khtml-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;  
  pointer-events: auto;
}

.dkField > input {
  font-size: 1em;
  font-family: inherit;
  box-sizing: border-box;  
  margin: 0;
  padding: 0 0.1875em;
  width: 100%;
  height: 1.5em;
  line-height: 1.5em;
  border: none;
  outline: none;
  border-radius: 4px;
  background: inherit;
  color: inherit;
  opacity: 1;
  -khtml-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;  
  pointer-events: auto;
}

.dkField > select {
  font-size: 1em;
  font-family: inherit;
  box-sizing: border-box;  
  margin: 0;
  padding: 0;
  width: 100%;
  height: 1.5em;
  line-height: 1.5em;
  border: none;
  outline: none;
  border-radius: 4px;
  background: inherit;
  color: inherit;
  opacity: 1;
}

.dkField > textarea {
  display: block;
  font-size: 1em;
  font-family: inherit;
  box-sizing: border-box;  
  margin: 0;
  padding: 0 0.1875em;
  width: 100%;
  min-height: 1.5em;
  line-height: 1.25em;
  border: none;
  outline: none;
  background: inherit;
  border-radius: 4px;
  resize: none;
  background: inherit;
  color: inherit;
  opacity: 1;
}

.dkField > input[type=checkbox] {
  font-size: 1em;
  font-family: inherit;
  box-sizing: inherit;  
  margin: 0 2px 0 0;
  padding: 0;
  border: inherit;
  width: inherit;
  outline: none;
  vertical-align: baseline;
  color: inherit;
  opacity: 1;
}

.dkField > input[type=radio] {
  font-size: 1em;
  font-family: inherit;
  box-sizing: inherit;  
  margin: 0 2px 0 0;
  padding: 0;
  border: inherit;
  width: inherit;
  outline: none;
  vertical-align: baseline;
  color: inherit;
  opacity: 1;
}

.dkGridTable .dkField > input::-webkit-outer-spin-button, .dkGridTable .dkField > input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.dkGridTable .dkField > input[type=number] {
  -moz-appearance: textfield;
}

.dkField > input:disabled {
  background: #f8f8f8;
}

.dkField > select:disabled {
  background: #f8f8f8;
}

.dkField > textarea:disabled {
  background: #f8f8f8;
}

.dkField > input::-ms-clear {
  display: none;
}

.dkField > table {
  margin: 0;
  padding: 0;
  border: none;
  border-collapse: separate; 
  border-spacing: 0; 
  width: 100%; 
}

.dkField > table > tbody > tr > td {
  font-size: 1em;
  font-family: inherit;
  box-sizing: border-box;  
  padding: 0 0.125em;
  height: 1.5em;
  line-height: 1.5em;
  border: none;
  text-align:center;
}

.dkField > i {
  display: block;
  position: absolute; 
  top: 0; 
  right: 0; 
  bottom: 0;
  margin: 0;
  padding: 0;
  font-size: 1em;
  width: 1.5em;
  height: 1.5em;
  line-height: 1.5em;
  text-align: center;
  background: inherit;
  color: #444;
  cursor: pointer;
}

.dkField > i.disabled {
  color: #ccc;
  pointer-events: none;
}

.dkField > div.flex-box {
  width: 100%;
  padding: 0;
  overflow: hidden;
}

.dkField > div.flex-box > div {
  padding: 0.25em 0.25em 0.1875em 0.25em;
  float: left;  
  line-height: 100%;
  max-width: 100%;
}


/**************************************
 * libForms
 */

.dkformcontainer {
  display: flow-root;
  position: relative;
  margin: 0 0 10px;
  padding: 4px;
  border: 1px solid #ccc;
  border-radius: 0.5em;
  overflow: hidden;
  overflow-y: auto;
  box-sizing: content-box;
  vertical-align: middle;
}

.dkformcontainer:last-child {
  margin-bottom: 0;
}

.dkformitem {
  display: block;
  position: relative;
  float: left;
  width: 100%; 
  margin: 0;
  padding: 0;
  overflow: hidden; 
}

.dkformbox {
  position: relative;
  margin: 0;
  padding: 0.25em;  /* 4px; */
  text-align: left;
}

.dkformbox > label {
  display: block;
  font-size: 12px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dkformfield {
  display: block;
  position: relative;
  padding: 0.0625em;  /* 1px; */
  min-height: 1.5em;
  line-height: 1.5em;
  background: white;
  border-radius: 4px;
  overflow: hidden;
  border: 0.0625em  /* 1px; */ solid #c8d0d8;
}

.dkformfield.type-frame {
  border: none;
  padding: 0;
  margin: 0;
  background: inherit;
}

.dkformfield.type-button {
  border: none;
  padding: 0.0625em  /* 1px; */;
  margin: 0;
  background: inherit;
}

.dkformfield.type-button.disabled {
  background: inherit;
}

.dkformfield.type-button.readonly {
  background: inherit;
}

.dkformfield.type-frame.readonly {
  background: inherit;
}

.dkformfield.disabled {
  background: #f8f8f8;
}

.dkformfield.readonly {
  background: #f8f8f8;
}

.dkformfield.disabled  > .dkField {
  background: inherit;
}

.dkformfield.readonly  > .dkField {
  background: inherit;
}

.dkformfield.disabled  i.enabledonly {
  display: none;
}

.dkformbuttonscontainer {
  clear: both;
  display: block;
  text-align: center;
  padding-top: 12px;
}


/**************************************
 * libToolbars
 */

/* La toolbar no obedece al tamaño de fuente de los ajustes del usuario ya que habitualmente se muestra 
   dentro de la barra de cabecera que actualmente es de tamaño fijo (vertical 40px) por eso el siguiente
   contenedor lleva fijada la fuente aqui */
   
.dkToolbarContainer {
  display: flow-root;
  font-size: 16px;
  margin: -4px -4px 6px -4px;  /* Compensa los 4px de borde transparente que van a tener las celdas */
  padding: 0;
}

.dkToolbarContainer:last-child {
  margin-bottom: -4px;
}

.dkToolbarContainer .button {
  padding: 1px 4px;
  height: 28px;
  min-height: 28px;
  line-height: 24px;
  min-width: 28px;
}

 
/**************************************
 * libBrowsers
 */
 
.dkBrowserContainer {
  display: flow-root;
  position: relative;
  margin: 0;
  border: 0;
  padding: 0;
  overflow: hidden;
}

.dkBrowserTitle {
  margin: -4px -4px 4px -4px;
  padding: 0;
}

.dkBrowserTitle .dkToolbarContainer {
  margin: 0;
}

.dkBrowserBox {
  margin: 1px;  /* para el outline */
  padding: 0;
  overflow: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  border: 1px solid white;  
  outline: 1px solid #e0e1e4;  
  background: white;
  border-radius: 0.25em;
}

.dkBrowserBox::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background: transparent; 
  background: #E8E9EC; 
  border-radius: 0 4px 4px 0;
}

.dkBrowserBox::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 5px;
  border: 3px solid transparent;
  background-clip: padding-box;
}

.dkBrowserTable {
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
}

.dkBrowserTable tbody tr:hover td {
  background: #E4E4E4;
  /*box-shadow: inset 0px 1px white, inset 0px -1px white;*/
  cursor: pointer;
}

.dkBrowserTable tbody tr:hover td.noselect {
  background: inherit;
  cursor: default;
}

.dkBrowserTable tbody tr.selected td {
  background: #D8ECFF;
  /*box-shadow: inset 0px 1px white, inset 0px -1px white;*/
}

.dkBrowserTable tbody tr td:last-child {
  box-shadow: inset -1px 0px white;
}

.dkBrowserTable thead th {
  position: relative;
  position: sticky;
  top: 0;  
  z-index: 2;
  margin: 0;
  padding: 0 0.25em 0 0.25em;
  height: 2em; 
  line-height: 2em;
  font-size: inherit;
  font-weight: normal;
  overflow: hidden; 
  white-space: nowrap;
  text-overflow: ellipsis;  
  color: black; 
  vertical-align: middle;
  background: #E8E9EC;  /* #456 */
  border: none;  
  box-shadow: inset -1px -1px white;  
}

.dkBrowserTable thead th > label {
  font-size: 90%;
  color: black;  /* white; */ 
}

.dkBrowserTable thead th.headAction {
  width: 1.75em;
  padding: 0 1px 1px;
  text-align: center;
  cursor: pointer;
  color: black;
}

.dkBrowserTable tfoot th {
  position: relative;
  position: sticky;
  bottom: -1px;  
  z-index: 2;
  margin: 0;
  padding: 0 0.25em;
  height: 2em;
  line-height: 2em;
  font-weight: normal;
  color: black;
  vertical-align: middle;
  overflow: hidden; 
  white-space: nowrap;
  text-overflow: ellipsis;  
  background: #E8E9EC;
  border: none;
  box-shadow: inset -1px 2px white;
}

.dkBrowserTable td {
  position: relative;
  margin: 0;
  padding: 0.0625em 0.25em 0;
  height: 1.9375em;
  line-height: 1.9375em;
  border-color: transparent;
  overflow: hidden; 
  white-space: nowrap;
  text-overflow: ellipsis;  
  vertical-align: middle;
}

.dkBrowserTable td.rowAction {
  width: 2em;
  padding: 1px;
  text-align: center;
  cursor: pointer;
}

.dkBrowserTable td.collapsed {
  padding: 0.1875em 0.25em 0.1875em;
  height: auto;
  line-height: 1.25em;
  border-bottom: 1px solid #ddd;
}

.dkBrowserTable caption {
  caption-side: bottom;
  text-align: left;
  border-top: 1px solid #ddd;
}

.dkBrowserTable th.treeControl {
  font-size: inherit;
  display: none;
  width: 1.75em;
  padding: 1px;
  text-align: center;
  cursor: pointer;
}

.dkBrowserTable td.treeControl {
  display: none;
  width: 1.75em;
  padding: 0;
  overflow: visible;
  z-index: 1;
  text-align: left;
  cursor: pointer;
}

.dkBrowserTable td.treeControl i {
  width: 1em;
  margin-left: 0.25em;
}

.dkBrowserTable tr.expanded  td.treeControl i:before { content: "\f146"; }
.dkBrowserTable tr.collapsed td.treeControl i:before { content: "\f0fe"; }
.dkBrowserTable tr.level-1   td.treeAligned { padding-left: 0.25em; }
.dkBrowserTable tr.level-2   td.treeAligned { padding-left: 1.25em; }
.dkBrowserTable tr.level-3   td.treeAligned { padding-left: 2.25em; }
.dkBrowserTable tr.level-4   td.treeAligned { padding-left: 3.25em; }
.dkBrowserTable tr.level-5   td.treeAligned { padding-left: 4.25em; }
.dkBrowserTable tr.level-6   td.treeAligned { padding-left: 5.25em; }
.dkBrowserTable tr.level-7   td.treeAligned { padding-left: 6.25em; }
.dkBrowserTable tr.level-8   td.treeAligned { padding-left: 7.25em; }
.dkBrowserTable tr.level-9   td.treeAligned { padding-left: 8.25em; }
.dkBrowserTable tr.level-10  td.treeAligned { padding-left: 9.25em; }
.dkBrowserTable tr.level-11  td.treeAligned { padding-left: 10.25em; }
.dkBrowserTable tr.level-12  td.treeAligned { padding-left: 11.25em; }
.dkBrowserTable tr.level-13  td.treeAligned { padding-left: 12.25em; }
.dkBrowserTable tr.level-14  td.treeAligned { padding-left: 13.25em; }
.dkBrowserTable tr.level-15  td.treeAligned { padding-left: 14.25em; }
.dkBrowserTable tr.level-16  td.treeAligned { padding-left: 15.25em; }
.dkBrowserTable tr.level-17  td.treeAligned { padding-left: 16.25em; }
.dkBrowserTable tr.level-18  td.treeAligned { padding-left: 17.25em; }
.dkBrowserTable tr.level-19  td.treeAligned { padding-left: 18.25em; }


/**************************************
 * libGrids
 */
 
.dkGridContainer {
  display: flow-root;
  position: relative;
  margin: 0;
  padding: 8px;
  border-width: 1px ;
  border-style: solid;
  border-color: #ccc;
  border-radius: 0.5em;
  overflow: hidden;
  box-sizing: border-box;  /* content-box ?? */
}

.dkformfield .dkGridContainer {
  margin: 0;
  padding: 0;
  border-width: 0;
  border-radius: 0;
}

.dkGridHeader {
  margin: -4px -4px 4px -4px;
  padding: 0;
}

.dkGridScroller {
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  border-width: 1px;
  border-style: solid;
  border-color: inherit;
  background: white;
  box-sizing: border-box;  /* content-box ?? */
}
 
.dkGridFooter {
  padding: 4px;
  background: white;
  border-width: 0 1px 1px 1px;
  border-style: solid;
  border-color: inherit;
  border-radius: 0 0 5px 5px;
  box-sizing: border-box;
}

.dkGridTable {
  margin: -1px -1px 0 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-color: inherit;
  box-sizing: border-box;
}

.dkGridTable tbody {
  border-color: inherit;
}

.dkGridTable tr {
  border-color: inherit;
}

.dkGridTable tr.hidden {display:none}

.dkGridTable tr td, .dkGridTable tr td input {
  background: inherit;
}

.dkGridTable tr.selected td, .dkGridTable tr.selected td input {
  background: #D8ECFF;
}

.dkGridTable tr.expanded  td.treeControl i:before { content: "\f146"; }
.dkGridTable tr.collapsed td.treeControl i:before { content: "\f0fe"; }
.dkGridTable tr.level-1   td.treeAligned { padding-left: 1px;   }
.dkGridTable tr.level-2   td.treeAligned { padding-left: 16px;  }
.dkGridTable tr.level-3   td.treeAligned { padding-left: 31px;  }
.dkGridTable tr.level-4   td.treeAligned { padding-left: 46px;  }
.dkGridTable tr.level-5   td.treeAligned { padding-left: 61px;  }
.dkGridTable tr.level-6   td.treeAligned { padding-left: 76px;  }
.dkGridTable tr.level-7   td.treeAligned { padding-left: 91px;  }
.dkGridTable tr.level-8   td.treeAligned { padding-left: 106px; }
.dkGridTable tr.level-9   td.treeAligned { padding-left: 121px; }
.dkGridTable tr.level-10  td.treeAligned { padding-left: 136px; }
.dkGridTable tr.level-11  td.treeAligned { padding-left: 151px; }
.dkGridTable tr.level-12  td.treeAligned { padding-left: 166px; }
.dkGridTable tr.level-13  td.treeAligned { padding-left: 181px; }
.dkGridTable tr.level-14  td.treeAligned { padding-left: 196px; }
.dkGridTable tr.level-15  td.treeAligned { padding-left: 211px; }
.dkGridTable tr.level-16  td.treeAligned { padding-left: 224px; }
.dkGridTable tr.level-17  td.treeAligned { padding-left: 241px; }
.dkGridTable tr.level-18  td.treeAligned { padding-left: 256px; }
.dkGridTable tr.level-19  td.treeAligned { padding-left: 271px; }

.dkGridTable th {
  position: relative;
  margin: 0;
  padding: 0 4px 1px;
  border-style: solid;
  border-width: 0;
  border-color: transparent;
  font-weight: normal;
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;   
  box-sizing: border-box;
}

.dkGridTable th.regular {
  border-width: 0 1px 0 0;
}

.dkGridTable td {
  position: relative;
  margin: 0;
  padding: 1px;
  border-style: solid;
  border-width: 1px 0 1px 0;
  border-color: inherit;
  background: white;
  overflow: hidden; 
  vertical-align: middle;
  box-sizing: border-box;
}

.dkGridTable td.regular {
  border-width: 1px 1px 1px 0;
}

.dkGridTable th.treeControl {
  display: none;
  width: 1.75em;
  padding: 0 1px 1px;
  text-align: left;
  cursor: pointer;
}

.dkGridTable th.treeControl i {
  left: 3px;
  color: black;
}

.dkGridTable th.headAction {
  width: 1.75em;
  padding: 0 1px 1px;
  text-align: center;
  cursor: pointer;
  color: black;
}

.dkGridTable th.headSpacer {
  padding: 0 0 1px;
}

.dkGridTable td.treeControl {
  display: none;
  width: 1.75em;
  padding: 1px;
  overflow: visible;
  z-index: 1;
  text-align: left;
  cursor: pointer;
}

.dkGridTable td.treeControl i {
  top: 1px;
  left: 3px;
}

.dkGridTable td.rowAction {
  width: 2em;
  padding: 1px;
  text-align: center;
  cursor: pointer;
}

.dkGridTable td.collapsed {
  display: none;
  padding-top: 4px;
  padding-bottom: 4px;
  width: 100%;
  cursor: pointer;
}

.dkGridTable tr.messageRow td {
  padding: 8px;
  color: #aaa;
  border: none;
  pointer-events: none;
}

.dkGridTable caption {
  caption-side: bottom;
  text-align: left;
  padding: 4px;
  Xborder-top: 1px solid #ccc;
}

.dkGridTable td .dkField {
  background: inherit;
}

.dkGridTable td > div {
  margin: 0 0.1875em;
}

.dkGridContainer.collapsed thead {display: none}
.dkGridContainer.collapsed th.regular {display: none}
.dkGridContainer.collapsed th.collapsed {display: table-cell}
.dkGridContainer.collapsed td.regular {display: none}
.dkGridContainer.collapsed td.collapsed {display: table-cell}
.dkGridContainer.collapsed .collapse-hidden {display: none !important}

/*
@media only screen and (max-width: 560px) {
  .dkGridTable.collapsable.regular {display: none}
  .dkGridTable.collapsable th.regular {display: none}
  .dkGridTable.collapsable th.collapsed {display: table-cell}
  .dkGridTable.collapsable td.regular {display: none}
  .dkGridTable.collapsable td.collapsed {display: table-cell}
  .dkGridTable.collapsable thead {display: none}
  .dkGridContainer .collapse-hidden {display: none !important}
  .dkGridScroller {border-radius: 5px 5px 0 0}
}
*/

/**************************************
 * libPopups
 */

.dkPopup { 
  display: flow-root;
  position: fixed;
  margin: 0; 
  padding: 0; 
  width: 128px;
  height: 128px;
  overflow: hidden; 
  border: 1px solid; 
  border-color: #D8E4F0 #A8B4C0 #A8B4C0 #D8E4F0; 
  border-radius: 8px; 
  background: #C8D4E0; 
  color: black; 
  box-shadow: 2px 2px 13px 3px rgba(0,0,0,.8); 
} 

.dkPopupBack {
  display: block; 
  position: fixed;
  margin: 0; 
  padding: 0; 
  overflow: hidden; 
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: not-allowed;  
  touch-action: none;
  background-color: black;
  opacity: 0.25;
  filter: alpha(opacity=25);
}

.dkPopupTitle  { 
  display: block; 
  position: relative;
  margin: 4px;
  padding: 0 1px;
  height: 24px;
  line-height: 24px;
  overflow: hidden; 
  font-weight: bold; 
  touch-action: none;
} 

.dkPopupClose  { 
  display: block; 
  position: absolute;
  top: 5px;
  right: 6px;
  width: 24px;
  height: 24px;
  line-height: 24px;
  font-size: 1.25em;
  overflow: visible; 
  cursor: pointer;
  text-align:right;
} 

.dkPopupInner  { 
  display: block; 
  display: flow-root;
  position: relative;
  min-height: 80px;
  margin: 6px 8px 6px 8px;
  padding: 4px; 
  overflow: auto; 
  overflow-x: hidden;
  border: 1px solid; 
  border-radius: 6px; 
  border-color: #BDC4BC #CBD6E0 #CBD6E0 #BDC4BC; 
  background: #EDF4F8; 
  color: black; 
} 

.dkPopupInner::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

.dkPopupInner::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
  border: 3px solid transparent;
  border-right: 0px;
  background-clip: padding-box;
}

.dkPopupFooter  { 
  display: block; 
  position: relative;
  margin: 4px;
  height: 40px;
  line-height: 40px;
  overflow: hidden;
  text-align: center;
} 

.dkPopupCalendarCell {
  display: block;
  margin: 4px 3px 3px 4px; 
  width: 16px; 
  height: 16px; 
  padding: 6px 8px; 
  float: left; 
  text-align: center;  
  background: white;
  border-radius: 3px;
  font-size: 15px;
  cursor: pointer;
}

.dkPopupCalendarCell.dkPopupCalendarCellActive {
  border: 3px solid #7092BE;
  padding: 3px 5px;
  font-weight: bold;
}

.dkPopupCalendarCell.dkPopupCalendarCellSunday {
  color: red;
}

.dkPopupCalendarCell.dkPopupCalendarCellEmpty {
  background: transparent;
}

.dkPopupClockText {
  margin: 4px; 
  width: 266px; 
  background: white; 
  font-size: 64px; 
  text-align: center;
  overflow: hidden;
}

.dkPopupClockWheel {
  margin:8px 7px 0 8px; 
  width:76px; 
  height:128px; 
  float:left; 
  background:white; 
  background: linear-gradient(to bottom, #fff, #999);
  border-radius: 3px; 
  box-shadow: inset 0 0 4px 2px #666;
  overflow:auto; 
  cursor: pointer;
}

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

.dkPopupClockWheelInner {
  background-repeat: repeat-y;
  background-image: linear-gradient(to bottom, #6080B0, transparent 6px, transparent 8px);
  background-size: 100% 8px;
}


/**************************************
 * libSlider
 */
 
.dkSliderControlContainer {
  position: relative;
  margin-bottom: 10px;
  overflow: hidden;
}

.dkSliderControlIndicatorLeft {
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 32px;
  background-image: linear-gradient(to right, white, transparent);
  z-index: 3;
  display: none;
  pointer-events: none;
}

.dkSliderControlIndicatorRight {
  position: absolute;
  right: 0;
  top: 0;
  width: 16px;
  height: 32px;
  background-image: linear-gradient(to left, white, transparent);
  z-index: 3;
  display: none;
  pointer-events: none;
}

.dkSliderControlScroller {
  position: relative;
  height: 32px;
  overflow: hidden;
  overflow-x: auto;
}

.dkSliderControlScroller::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.dkSliderControlBlock {
  position: relative;
  height: 32px;
  width: auto;
  min-width: 100%;
  overflow: hidden;
}

.dkSliderControlItem {
  position: static;
  float: left;
  width: 25%;
  height: 29px;
  box-sizing: border-box;
  overflow: hidden;
  background: #EEE;
  border: 1px solid #CCC;
  margin-top: 3px;
  border-radius: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.dkSliderControlItem > div {
  position: relative; 
  height: 28px;
  line-height: 28px;
  padding: 0 7px;
  font-size: 15px;
  font-weight: normal;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  z-index: 2;
}

.dkSliderControlCursor {
  position: absolute;
  box-sizing: border-box;
  left: 0;
  top: 0;
  width: 25%;
  height: 32px;
  background: white;
  border: 1px solid #CCC;
  border-bottom: 0;
  border-radius: none;
  overflow: hidden;
  z-index: 1;
}

.dkSliderContainer {
  position: relative; 
  top: 0; 
  left: -16px; 
  width: calc(100% + 32px); 
  overflow: hidden;
  vertical-align: middle;
}

.dkPopup .dkSliderContainer {
  left: -2px; 
  width: calc(100% + 4px); 
}

.dkSlider {
  position: relative; 
  left: 0%; 
  width: 100%; 
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
}

.dkSliderPage {
  position: relative; 
  float: left; 
  width: 100%; 
  margin: 0;
  padding: 0 16px;
  border: 0;
  box-sizing: border-box;
  overflow: hidden;
  overflow-y: auto;
  overflow-y: overlay;
}

.dkPopup .dkSliderPage {
  padding: 0 2px;
}

.dkSliderPage::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.dkSliderPage::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 5px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
 
 
/**************************************
 * Wait animation
 */
 
.dkWait {
  position: absolute;
  top: calc(50% - 48px);
  left: calc(50% - 48px);
  width: 96px;
  height: 96px;
  border-radius: 50%;
  perspective: 800px;
}

.dkWait .inner {
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.dkWait .inner.one {
  left: 0%;
  top: 0%;
  animation: rotate-one 1s linear infinite;
  border-bottom: 6px solid #38E;
}

.dkWait .inner.two {
  right: 0%;
  top: 0%;
  animation: rotate-two 1s linear infinite;
  border-right: 6px solid #38E;
}

.dkWait .inner.three {
  right: 0%;
  bottom: 0%;
  animation: rotate-three 1s linear infinite;
  border-top: 6px solid #38E;
}

@keyframes rotate-one {
    0% {transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);  }
  100% {transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);}
}

@keyframes rotate-two {
    0% {transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);  }
  100% {transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);}
}

@keyframes rotate-three {
    0% {transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);  }
  100% {transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);}
}

 
/**************************************
 * TinyMCE teeaking for fields
 */
 
.dkField .tox-tinymce {
  border: 0;
}

.dkField .tox .tox-toolbar__primary {
  padding: 0.125em 0.125em 0.1875em 0.125em;
  background-position: left bottom;
  background-repeat: repeat-x;
}

.dkField .tox .tox-toolbar--scrolling {
  padding: 0.125em 0.125em 0.1875em 0.125em;
  background-position: left bottom;
  background-repeat: repeat-x;
}

.dkField .tox .tox-toolbar__group {
  margin: 0; 
  padding: 0;
}

.dkField .tox .tox-tbtn {
  width: auto; 
  max-width: 4.5em;
  margin: 0.125em;
  padding: 0 0.125em 0 0.0625em;
  height: 2em;
  background: #eee;
} 

.dkField .tox .tox-tbtn--enabled {
  background: #c8cbcf;
}

.dkField .tox .tox-tbtn:disabled {
  background: #eee;
}

.dkField .tox .tox-split-button {
  margin: 0.125em;
}

.dkField .tox .tox-split-button  .tox-tbtn {
  margin: 0;
}

.dkField .tox .tox-split-button__chevron {
  width: 1em;
}

.dkField .tox .tox-tbtn__select-chevron {
  margin: 0.125em;
}


/**************************************
 * widgets
 */
 
.widgetItem {
  float:left; position:relative; min-width:100px; max-width:100%; border-radius: 6px; z-index:1; overflow:hidden;
}

.dragTarget {
  background: #3388EE;
}

.widgetBox {
  position:relative; margin:4px; padding:2px; border-radius:4px; overflow:hidden;
}

.widgetTitle {
  font-size:11px; font-weight:500; line-height:15px; padding:2px 4px; overflow:hidden; white-space:nowrap; text-overflow: ellipsis;
}

.widgetContent {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.xwidgetContent::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background: transparent; 
  border-radius: 0 4px 4px 0;
}

.xwidgetContent::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 5px;
  border: 3px solid transparent;
  background-clip: padding-box;
}

 
 
/**************************************
 * common
 */

.selectable {
  cursor: pointer;
}

.selectable:hover {
  background: #f0f6fc;
}

.highlighted {
  background: #f0f6fc;
}

.hidden {
  display: none;
}

.shadedback {
  background-color: #f4f8fc;
}

.translucent {
  opacity: 0.5 !important;
}

.translucent-childs > * {
  opacity: 0.5 !important;
}

.notranslucent {
  opacity: 1 !important;
}

.invisible {
  opacity: 0 !important;
}

.invisible-childs > * {
  opacity: 0 !important;
}

.scrollBox {
  position:relative;
  overflow:auto;
}

.scrollBox::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background: transparent; 
  border-radius: 0 4px 4px 0;
}

.scrollBox::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 5px;
  border: 3px solid transparent;
  background-clip: padding-box;
}