@use '../../../styles/variables.scss';

app-sos-crude-settings {
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 11002;
}

app-sos-crude-settings kendo-drawer-content {
  display: flex;
  height: 100%;
  flex-direction: column;
}

app-sos-crude-settings .k-drawer .k-drawer-items .k-drawer-item {
  font-weight: bold;
  padding: 20px;
}

app-sos-crude-settings .k-drawer .k-drawer-items {
  flex-direction: column;
  flex-grow: 1
}

.app-sos-crude-settings.k-popup.k-list-container {
  min-width: 100px;
}

app-sos-crude-settings .smallDropWidth {
  width: 150px;
}

app-sos-crude-settings .allSettingsContainer {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  width: 150px;
  min-width: 150px;
  padding: 0 15px 15px 15px;
  border-style: solid solid none solid;
}

app-sos-crude-settings .columnOrderableContainer {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  width: 370px;
  min-width: 370px;
  padding: 0 15px 15px 15px;
  border-style: solid solid none solid;
}

app-sos-crude-settings .columnOrderableContainer.mid {
  border-style: solid none none none;
}

app-sos-crude-settings .columnOrderable {
  align-items: center;
  justify-content: center;
  height: 30px;
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  font-size: 16px;
}

app-sos-crude-settings .columnOrderable:has(.lastFrozenColumn) {
  height: 40px;
}

app-sos-crude-settings .columnOrderableActive {
  max-width: 370px;
  height: 30px;
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  font-size: 16px;
}

app-sos-crude-settings .columnOrderableActive:has(.lastFrozenColumn) {
  height: 40px;
}

app-sos-crude-settings .columnOrderable .k-numerictextbox,
app-sos-crude-settings .columnOrderableActive .k-numerictextbox {
  width: 50px;
}

app-sos-crude-settings .orderable-x {
  width: 20px;
  height: 20px;
}

app-sos-crude-settings .orderable-x:hover {
  color: variables.$medium-red;
  text-align: center;
  margin: 0;
}

app-sos-crude-settings .rowItemNameHeader {
  display: flex;
  flex-grow: 1;
  justify-content: center;
  margin: 5px;
}

app-sos-crude-settings .rowItemWidthHeader {
  display: flex;
  margin: 5px;
  min-width: 116px;
  max-width: 116px;
}

app-sos-crude-settings .rowItemName {
  display: flex;
  flex-grow: 1;
  margin: 0 5px 0 5px;
  justify-content: center;
  overflow: hidden;
}

app-sos-crude-settings .rowItemNameSpan {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

app-sos-crude-settings .rowItemColWidth {
  display: flex;
  flex-grow: 0;
  margin-right: 5px;
}

app-sos-crude-settings .rowItemShowHide {
  display: flex;
  flex-grow: 0;
  align-items: center;
  margin-right: 5px;
}

app-sos-crude-settings .k-icon.null {
  display: none;
}

app-sos-crude-settings .k-drawer-item.k-state-disabled {
  color: #212529;
  opacity: 1;
}

app-sos-crude-settings .k-drawer-item.k-state-disabled {
  color: #212529;
  opacity: 1;
}

app-sos-crude-settings .k-drawer-container .k-drawer-items .k-drawer-item.k-state-disabled .k-item-text {
  padding: 0;
}

app-sos-crude-settings .k-drawer-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

app-sos-crude-settings .lastFrozenColumn {
  border-bottom: solid;
  border-bottom-width: 10px;
}

app-sos-crude-settings .columnOrderableInner {
  padding-bottom: 1px;
}

app-sos-crude-settings .topSection {
  display: flex;
  justify-content: center;
}

app-sos-crude-settings .topSectionContainer {
  display: flex;
  flex-grow: 1;
}

app-sos-crude-settings .topSectionContainerInner {
  display: flex;
  min-width: max-content;
}

app-sos-crude-settings .topSectionFiller {
  display: flex;
  flex-grow: 1;
  margin-right: 10px;
}

app-sos-crude-settings .mainGridTopLabel {
  min-width: 105px;
  max-width: 105px;
}

app-sos-crude-settings .mainGridTopInput {
  min-width: 66px;
  max-width: 66px;
}

app-sos-crude-settings .drawerNote {
  font-size: 0.7em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
  display: block;
}