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

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

.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;
}

.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;
  color: #404040;
}

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

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

.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.25em 0.25em;
  float: left;  
  line-height: 100%;
  max-width: 100%;
}


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

.dkformcontainer {
  clear: both;
  position: relative;
  margin: 0 0 10px 0;
  padding: 4px;
  border: 1px solid #ccc;
  border-radius: 0.5em;
  overflow: hidden;
  overflow-y: auto;
  box-sizing: content-box;
}

.dkformfield .dkformcontainer {
  margin: -4px;
  padding: 0;
  border: none;
  border-radius: 0;
}

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

.dkformbox {
  position: relative;
  margin: 0;
  padding: 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: 1px;
  min-height: 1.5em;
  line-height: 1.5em;
  background: white;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #c8d0d8;
}

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

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

.dkformfield.disabled {
  color: #404040;
  background: #f8f8f8;
}

.dkformfield.disabled  > .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
   div contenedor lleva fijada la fuente (en la hoja de estilos). */
   
.dkToolbarContainer {
  clear: both;
  font-size: 16px;
  margin: 0 -4px;
  padding: 2px;
}

.dkPopup .dkToolbarContainer {
  margin: 0 -4px 8px;
}

.dkformfield .dkToolbarContainer {
  margin: 0;
}

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

 
/**************************************
 * libBrowsers
 */
 
.dkBrowserContainer {
  clear: both;
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.dkBrowserBox {
  margin: 4px;
  padding: 0;
  border-radius: 4px;
  overflow: hidden;
}

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

.dkBrowserTable tr:hover td {
  background: #ddd;
  cursor: pointer;
}

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

.dkBrowserTable th {
  position: relative;
  margin: 0;
  padding: 0.0625em 0.125em 0;
  font-weight: bold;
  height: 1.5em;
  line-height: 1.25em;
  border-bottom: 1px solid;
  border-color: #888;
  overflow: hidden; 
  white-space: nowrap;
  text-overflow: ellipsis;  
}

.dkBrowserTable th > label {
  font-size: 12px;
}

.dkBrowserTable td {
  position: relative;
  margin: 0;
  padding: 0.0625em 0.125em 0;
  height: 1.9375em;
  line-height: 1.9375em;
  border-top: 1px solid #ddd;
  overflow: hidden; 
  white-space: nowrap;
  text-overflow: ellipsis;  
  vertical-align: middle;
}

.dkBrowserTable td.collapsed {
  padding: 0.1875em 0 0.1875em 0;
  height: auto;
  line-height: 1.25em;
}

.dkBrowserTable td .icon, .dkBrowserTable td .thumbnail {
  vertical-align: middle;
  font-size: 133%;
}

.dkBrowserTable td.collapsed .icon, .dkBrowserTable td.collapsed .thumbnail {
  font-size: 200%;
}

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


/**************************************
 * libGrids
 */
 
.dkGridContainer {
  clear: both;
  position: relative;
  margin: 0 0 10px 0;
  padding: 8px;
  border-width: 1px ;
  border-style: solid;
  border-color: #ccc;
  border-radius: 0.5em;
  overflow: hidden;
  box-sizing: 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;
  max-height: 1024px;
  overflow-x: hidden;
  overflow-y: auto;
  border-width: 1px;
  border-style: solid;
  border-color: inherit;
  background: white;
  box-sizing: 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;   
}

.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;
}

.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: 1.75em;
  padding: 1px;
  text-align: center;
  cursor: pointer;
}

.dkGridTable.collapsable th.collapsed {
  display: none;
  width: 100%;
  cursor: pointer;
}

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

.dkGridTable.collapsable td.collapsed {
  display: none;
}

.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;
}


@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: block; 
  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; 
  xcursor: move;
  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; 
  position: relative;
  margin: 6px 8px 6px 8px;
  padding: 5px 4px 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: 8px;
  height: 8px;
  background-color: white;
}

.dkPopupInner::-webkit-scrollbar-thumb {
  background: #ccc;
  border-left: 4px solid white;
}

.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;
}


/**************************************
 * 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;
}


 
/**************************************
 * 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;
}