:root {
  --quarter-pad: 0.125rem;
  --half-pad: 0.25rem;
  --pad: 0.5rem;
  --double-pad: 1rem;
}

/*
//------------------------------------------------------------------------------
// Specificity, by ESLint
//------------------------------------------------------------------------------
*/

.content {
  padding: 0;
}

.hBox,
.vBox {
  padding: var(--half-pad);
}

.hBox > *,
.vBox > * {
  padding: var(--half-pad);
}

.specializedPart,
.specializedPart > .vBox,
.specializedPart > .hBox {
  padding: 0 !important;
}

.titleBtnContent > .vBox {
  padding-left: var(--half-pad) !important;
}

.titleContent > .content {
  padding-left: var(--pad) !important;
}

.titleContentBtn > .contentRow {
  padding: 0 var(--half-pad);
}

.legendList > .hBox,
.mgmtBoard > .hBox {
  padding: 0;
}

.radioGroup > .hBox,
.radioGroup > .hBox > .radio {
  padding: var(--half-pad) !important;
}

/* remove padding from immediate children */
.hBox > .hBox,
.hBox > .vBox,
.vBox > .hBox,
.vBox > .vBox {
  padding: 0;
}

.legendList > .hBox > .chipContainer,
.mgmtBoard > .hBox > .dispatchCol {
  padding: var(--half-pad) !important;
}

.dispatchCol > .vBox > .vBox > .chipContainer {
  padding: var(--half-pad);
}

.divider {
  margin: var(--half-pad) 0;
  padding: 0;
}

.divider.black {
  background-color: black;
}

.stackContent > * {
  padding: 0 !important;
}

.addressShapeMap .vBox {
  padding: 0;
}

.inputWrapper > div:last-child {
  padding-right: 0;
}

.memberList > .hBox {
  padding-left: 0;
}

.checkBtn,
.checkBtn > .hBox {
  padding: 0;
}

.titleContent > .content > .hBox {
  padding: 0;
}

.titleContent > .content > .hBox > div:first-child {
  padding-left: 0;
}

.addressShapeMap .address .inputWrapper {
  padding-left: 0;
  padding-right: 0;
}

.titleDateTime .inputContainer {
  padding-right: 0;
}

.address .inputContainer {
  column-gap: var(--pad);
}

.addressShapeMap .address .inputContainer {
  padding: 0 0 0 var(--pad);
}

/* override materialize */
.chip > .icon {
  margin: 0 var(--pad) 0 0 !important;
}

.msgInput .utilityArea .icon {
  margin: var(--pad);
}

.collapsibleTile .collapsibleTileContent .mgmtBoard {
  padding: 0;
}

.filter > * {
  padding: var(--half-pad) !important;
}

.titleTextArea .content {
  padding-left: var(--pad);
}

.mgmtRow .rightCol .content {
  padding-left: 0 !important;
}

.mgmtList.textOnly .content {
  padding: var(--pad);
}

.titleContent .titleText > .hBox,
.titleContent .titleText > .hBox > .content {
  padding: 0;
}

.titleContentSpaceLink > .content > .hBox,
.titleContentSpaceBtn > .content > .hBox {
  padding: 0 0 0 var(--half-pad);
}

.tile > .content > .vBox {
  padding: 0;
}

.tile > .tileContent > .content > .hBox {
  padding: 0;
}

.modal .modalContent > .content > .hBox,
.modal .modalContent > .content > .vBox {
  padding: var(--half-pad);
}

.instructionTile .msgInput {
  margin-bottom: var(--pad);
}

.hBox.padNarrow > *,
.vBox.padNarrow > * {
  padding: var(--quarter-pad);
}

/*
//------------------------------------------------------------------------------
// Page DOM Container: .stackContent, #stickyPanelArea
//------------------------------------------------------------------------------
*/

.stackContent {
  padding: var(--half-pad);
}

.stackContent > .divider {
  margin: var(--half-pad);
}

#stickyPanelArea > .stackContent {
  padding: 0;
}

/* do not set padding on all selector '*' with tabulator, width increases non-stop */
#stickyPanelArea .detailContent > .stackContent > .vBox > *:not(.tabulator) {
  padding: var(--half-pad);
}

#stickyPanelArea .detailContent > .stackContent > .vBox > .mgmtBoard {
  padding: 0 !important;
}

#stickyPanelArea .detailDiv .msgInput {
  padding: var(--half-pad) var(--pad) var(--pad) var(--pad);
}

.detailDiv .closeBtn,
.detailDiv .expandBtn,
.detailDiv .menuBtn {
  padding: var(--pad);
}

/*
//------------------------------------------------------------------------------
// Container Parts
//------------------------------------------------------------------------------
*/

.collapsibleTile .headerInfo {
  column-gap: var(--pad);
}

/* border is replaced by outline */
.tile,
.collapsibleTile.border {
  border: none !important;
  outline: var(--border-width) solid var(--gray-dark);
  outline-offset: calc(-1 * (var(--half-pad) + var(--border-width)));
  padding: calc(var(--half-pad) + var(--pad)) !important; /* offset for border */
  border-radius: 0.5rem;
}

.collapsibleTile.borderless {
  position: relative;
  padding: calc(var(--half-pad) + var(--pad)) !important; /* offset for border */
}

.collapsibleTile.borderless::before {
  position: absolute;
  box-sizing: border-box;
  border-top: var(--border-width) solid var(--off-white) !important;
  content: '';
  top: var(--half-pad);
  left: calc(var(--half-pad));
  right: calc(var(--half-pad));
}

.collapsibleTile.borderless::after {
  position: absolute;
  box-sizing: border-box;
  border-top: var(--border-width) solid var(--off-white) !important;
  content: '';
  bottom: var(--half-pad);
  left: calc(var(--half-pad));
  right: calc(var(--half-pad));
}

.collapsibleTile .collapsibleTileDigest .titleText > .hBox {
  padding: 0;
}

.collapsibleTile .collapsibleTileDigest .titleText > .hBox > div:first-child {
  padding-left: 0;
}

/* remove extra padding in overviewMap */
.overviewMap .filterContainer > .collapsibleTile {
  outline-offset: calc(-1 * var(--border-width)) !important;
}

/*
//------------------------------------------------------------------------------
// Combination Parts
//------------------------------------------------------------------------------
*/

.mgmtFilter .filter {
  padding: 0;
}

.mgmtFilter .hBox > .input {
  padding: 0 !important;
}

.mgmtFilter > .expandIconContainer {
  padding: var(--pad) var(--half-pad) 0 0;
}

.mgmtFilter.hideOverflow {
  max-height: calc(var(--line-height) + var(--double-pad) + var(--half-pad)) !important;
}

.mgmtFilter .checkListTitle,
.mgmtFilter .dropdown > .leftTitle {
  padding-right: var(--double-pad) !important;
}

.mgmtBoard > .hBox > .dispatchCol > .vBox {
  padding: 0 !important;
}

.titleContent > .content > .radioGroup {
  margin-left: calc(-1 * var(--pad)) !important;
}

.titleContent > .content > .hBox > .content > .hBox {
  padding: 0;
}

.shapeMap > .toggleContainer {
  padding: var(--pad) 0;
}

.addressShapeMap .shapeMap {
  padding: 0 0 0 var(--pad);
}

.addressShapeMap .address {
  padding: 0;
}

/* border is replaced by outline */
.dragList .dragToggleRow {
  border: none !important;
  outline: var(--border-width) solid #000;
  outline-offset: calc(-1 * (var(--half-pad) + var(--border-width)));
}

.dragList .dragToggleRow .rowHeader {
  padding: calc(var(--half-pad) + var(--pad)) !important; /* offset for border */
  gap: var(--pad);
}

.dragList .dragToggleRow .rowContent {
  padding: calc(var(--half-pad) + var(--pad)) !important; /* offset for border */
  padding-top: 0 !important;
  gap: var(--pad);
}

.memberList {
  padding: 0;
}

.mediaResize .closeBtn {
  padding: var(--pad);
}

.mediaResize .mediaResizeFooter {
  padding: var(--double-pad);
}

/*
//------------------------------------------------------------------------------
// Basic Parts
//------------------------------------------------------------------------------
*/

.barChart .barChartDiv .bodyContainer .iconsContainer {
  margin: 0 !important;
}

.chip {
  margin: 0 !important;
  height: fit-content !important;
  line-height: initial !important;
}

.link .clickWrapper {
  gap: var(--pad);
}

.toggle label .lever {
  margin: 0 var(--pad);
}

.textArea {
  padding: var(--pad);
}

.dropdown .clickableArea {
  grid-gap: var(--pad);
}

.dropdownOverlay .dropdownContent .dropdownItemList .dropdownItem {
  padding: var(--pad);
}

.dropdown .clickableArea .choiceContainer .icon,
.dropdownOverlay .dropdownContent .dropdownItemList .dropdownItem .icon {
  padding-right: var(--pad);
}

.shortcut .rightHeader,
.shortcut .rightName {
  grid-gap: var(--pad);
}

/*
//------------------------------------------------------------------------------
// Row Parts
//------------------------------------------------------------------------------
*/

/* using legacy class name due to many existing instances, refers to msgThreadRow */
.messageThread {
  padding: var(--half-pad);
}

.messageThread .replyDataArea {
  padding: var(--pad) !important;
  margin: var(--pad) 0 0 0 !important;
}

.messageThread .messageTimestampContainer {
  padding-top: 0 !important;
}

.messageThread .threadReplyContainer {
  margin-bottom: 0 !important;
}

.instructionRow {
  padding: var(--pad);
}

.instructionRow .instructionHeader {
  gap: var(--pad);
}

.responseRow {
  padding: var(--pad);
  gap: var(--pad);
}

.responseRow .responseAttachmentList,
.responseRow .attachmentLabelContainer {
  gap: var(--pad);
}

.mgmtRow .mgmtRowIcon {
  padding-left: 0 !important;
  padding-right: 0;
}

.mgmtRow .leftCol {
  padding-right: 0;
}

/*
//------------------------------------------------------------------------------
// Modularized Parts: Tile, MapLayer
//------------------------------------------------------------------------------
*/

/* remove duplicate padding with child tile */
.instructionTile,
.responseTile {
  padding: 0 !important;
}

.tilePart {
  padding: 0 !important;
}

.mapLayerPart,
.mapLayerPart .collapsibleTileContent > .content .vBox {
  padding: 0 !important;
}

/*
//------------------------------------------------------------------------------
// Special: .msgInput
//------------------------------------------------------------------------------
*/

.msgInput .bodyRow {
  gap: var(--pad);
}

.msgInput .requestAndMemberArea {
  gap: var(--pad);
  padding: var(--half-pad) 0;
}

.msgInput .requestAndMemberArea .messageTypeArea .label,
.msgInput .requestAndMemberArea .memberArea > .label,
.msgInput .requestAndMemberArea .headerRow .cancelBtn,
.msgInput .requestAndMemberArea .headerRow .threadInfoArea {
  padding-right: var(--pad);
}

.msgInput .utilityArea {
  gap: var(--pad);
  padding-left: 0 var(--pad);
}

.msgInput .utilityArea .listItem {
  padding: var(--pad);
}

.msgInput .sendMessageBtn {
  padding: 0;
}

/* simple hard-coded fix for tagify spacing, dynamic is too complicated */
.msgInput .utilityArea,
.msgInput .sendBtnArea {
  padding-bottom: 0.32rem;
}

/*
//------------------------------------------------------------------------------
// Special: .sideNav
//------------------------------------------------------------------------------
*/

#sideNav .sideNavHeader {
  height: calc(var(--header-top-height) + var(--header-bottom-height));
}

/* override materialize */
#sideNav .divider {
  margin: 0 !important;
  padding: 0;
}

/* override materialize */
#sideNav .sideNavLogo,
#sideNav li > a {
  padding-left: calc(var(--double-pad) * 2);
  padding-right: var(--double-pad);
  padding-top: calc(var(--half-pad) * 3);
  padding-bottom: calc(var(--half-pad) * 3);
  height: auto;
  line-height: normal;
}

/* override materialize */
#sideNav .sideNavLogo,
#sideNav .sidenav-close {
  padding-top: 0;
  padding-bottom: 0;
}

/* override materialize */
#sideNav .sidenav-close i {
  margin: 0;
}

#sideNav .icon {
  margin-right: var(--pad);
}

/*
//------------------------------------------------------------------------------
// Special: .modal
//------------------------------------------------------------------------------
*/

.modal .modalHeader,
.modal .modalFooter {
  grid-column-gap: var(--pad);
  padding: var(--double-pad);
}

.modal .modalContent {
  padding: 0 var(--double-pad);
}

/*
//------------------------------------------------------------------------------
// Special: .groupSelectList
//------------------------------------------------------------------------------
*/

.groupSelectList .listIcon {
  padding-right: var(--pad);
}

/* necessary for alignment and border */
.groupSelectList .collapsible {
  margin: -1px;
}

.groupSelectList .collapsible-header {
  padding: var(--pad);
}

.groupSelectList .collapsible-body {
  padding: 0 !important;
}

.groupSelectList .parentContainer .listIcon {
  padding-left: var(--half-pad);
}

/* remove thick bottom border when parent collapsible is open */
.groupSelectList .childrenContainer.collapsible-body {
  margin: 0 0 -1px 0;
}

.groupSelectList .childContainer {
  padding: var(--pad);
}

.groupSelectList .childContainer .checkIcon {
  padding-right: var(--pad);
}

.groupSelectList .groupContainer[data-tree-level="2"] {
  margin-left: calc(var(--double-pad) * 2);
}

.groupSelectList .groupContainer[data-tree-level="3"] {
  margin-left: calc(var(--double-pad) * 4);
}

.groupSelectList .groupContainer[data-tree-level="4"] {
  margin-left: calc(var(--double-pad) * 6);
}

.groupSelectList .groupContainer[data-tree-level="5"] {
  margin-left: calc(var(--double-pad) * 8);
}

/*
//------------------------------------------------------------------------------
// Special: Tabulator
//------------------------------------------------------------------------------
*/

.mgmtList .tabulator-cell,
.mgmtList .tabulator-cell .rightCol > .rightColHeader .hBox,
.mgmtList .tabulator-cell .rightCol > .rightColContent .hBox {
  padding: 0 !important;
}

.mgmtList .tabulator-cell .rightCol > .rightColHeader .content,
.mgmtList .tabulator-cell .rightCol > .rightColContent .content {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.mgmtList .moreCol {
  position: absolute;
  top: 0;
  right: 0;
}

.mgmtList .moreCol > .moreBtn {
  padding: var(--pad);
}

/* 24px is expected size of material-icons, plus 2 (right and left) paddings  */
.mgmtList .moreColPad {
  padding-right: calc(24px + var(--pad) * 2) !important;
}

/* Larger padding when list items are draggable for easier scrolling in iPad */
.mgmtList .lrgMoreColPad {
  padding-right: calc(32px + var(--pad)) !important;
}

/* stops unwanted horizontal scrollbar caused by pixel rounding error */
.mgmtList .tabulator-tableholder {
  overflow-x: hidden;
}

/*
//------------------------------------------------------------------------------
// Special: Tabulator
//------------------------------------------------------------------------------
*/
.toggle.child {
  padding-left: var(--pad);
}

/*
//------------------------------------------------------------------------------
// Others
//------------------------------------------------------------------------------
*/

.padBottom {
  padding-bottom: var(--pad);
}

.padLeft {
  padding-left: var(--pad);
}

.padRight {
  padding-right: var(--pad);
}

.padAround {
  padding: var(--pad);
}

.padNone {
  padding: 0;
}

.tagify--mix .tagify__input {
  padding: var(--pad) !important;
}

.btnContainer.fixedToBottom {
  padding-bottom: var(--pad) !important;
}

.btnContainer.fixedHalfRight {
  padding-right: var(--pad) !important;
}