md-input-container .md-input {
  margin: 0;
}

.searchBarCustom {
  height: 58px;
  margin-bottom: 15px;
}
.searchBarCustom h2.md-title {
  margin: 0px;
}
.searchBarCustom button.autorenew {
  margin: 0 20px 0 0;
  padding: 0;
  height: 24px;
  width: 24px;
  min-height: 24px;
}
.searchBarCustom md-input-container {
  margin: 0px;
  width: 30%;
}
.searchBarCustom md-input-container md-select, .searchBarCustom md-input-container input {
  width: 90% !important;
}
.searchBarCustom md-input-container .md-errors-spacer {
  min-height: 1px;
}
.searchBarCustom md-button[type=submit] {
  width: 100%;
  margin: 0px;
}

.progress-bar-toast {
  width: 100%;
  padding: 0px;
  z-index: 999;
}
.progress-bar-toast .md-toast-content {
  padding: 20px;
  background: white;
  color: black;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
}
.progress-bar-toast .progress-bar-title {
  font-size: 1.5em;
  padding-bottom: 20px;
  padding-top: 0;
}
.progress-bar-toast .message-box {
  min-height: 50px;
}
.progress-bar-toast .content {
  width: 100%;
}
.progress-bar-toast .content .progress-container {
  padding-top: 20px;
}
.progress-bar-toast .content .progress-container md-progress-linear {
  height: 25px;
  position: relative;
}
.progress-bar-toast .content .progress-container md-progress-linear .md-container {
  background-color: white;
  border-radius: 5px;
  height: 25px;
  border: solid 1px rgba(0, 0, 0, 0.5);
}
.progress-bar-toast .content .progress-container md-progress-linear .md-container .md-bar {
  border-radius: 5px;
  height: 25px;
}
.progress-bar-toast .content .progress-container .bar-percent {
  line-height: 25px;
  font-size: 20px;
  margin-left: 20px;
  font-weight: bold;
}

.iconButton {
  margin: 5px !important;
}

td.emptyTable.md-cell {
  width: 100% !important;
  text-align: center !important;
  padding: 24px !important;
}
td.emptyTable.md-cell span {
  display: inline-block;
}
td.emptyTable.md-cell span:first-child {
  min-height: 40px;
  line-height: 40px;
}

.errorWarn {
  color: red !important;
}

md-icon.clearInput {
  width: 12px;
  height: 12px;
  right: 27px;
  left: auto;
  top: 10px;
  cursor: pointer;
}
md-icon.clearInput:focus {
  outline: 0;
}

.cmsSpinner-80 {
  z-index: 999;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -80px;
  margin-top: -80px;
}

.spinnerOverlay,
.page-loading-overlay {
  display: block !important;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 998;
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: absolute;
}

.drop-overlay-container .drop-overlay {
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  height: 100%;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 998;
}
.drop-overlay-container .drop-overlay::before {
  content: "";
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 5px;
  color: #fff;
  padding: 1rem;
}
.drop-overlay-container.dragover .drop-overlay, .drop-overlay-container.dragover-err .drop-overlay {
  display: flex;
}
.drop-overlay-container.dragover .drop-overlay {
  background-color: rgba(0, 20, 0, 0.5);
}
.drop-overlay-container.dragover .drop-overlay::before {
  content: "Drop file(s) to upload";
}
.drop-overlay-container.dragover-err .drop-overlay {
  background-color: rgba(20, 0, 0, 0.5);
}
.drop-overlay-container.dragover-err .drop-overlay::before {
  content: "Invalid file type(s)";
}

md-progress-circular#cmsSpinner-100 {
  z-index: 999;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -100px;
  margin-top: -100px;
}
md-progress-circular#cmsSpinner-100::before {
  content: "";
  width: 100%;
  background: #000;
}

.tableSpinner {
  width: 40px;
  height: 40px;
  position: relative;
  left: 50%;
  margin-left: -40px;
  top: 110px;
  overflow: hidden;
}

td.button-column md-icon {
  cursor: pointer;
}
td.button-column md-icon:focus {
  outline: 0;
}

.spec-assets-dialog .spec-assets-dialog-content .info-line {
  padding-top: 20px;
}
.spec-assets-dialog .spec-assets-dialog-content .checkbox-container {
  margin-left: 20px;
  font-weight: 600;
  padding-top: 20px;
  padding-bottom: 4px;
}
.spec-assets-dialog .spec-assets-dialog-content .final-warning {
  color: red;
  font-style: italic;
}
.spec-assets-dialog .cancel-button {
  margin-right: 20px;
}

#database-env-inputbox {
  padding-bottom: 15px;
}

.database-table-subname {
  opacity: 0.35;
}

.database-table-name {
  font-weight: bold;
}

.database-table-float-right {
  float: right;
}

.database-table-float-right-max {
  position: absolute;
  top: 20px;
  right: 25px;
}

.database-table-input {
  padding-bottom: 3px !important;
  margin: 0 !important;
  padding-left: 0 !important;
  position: absolute;
  top: 5px;
}

.database-table-icon {
  left: initial;
  right: -24px;
  opacity: 0.75;
  cursor: pointer;
}

.database-table-link {
  position: absolute;
  top: 5px;
  right: 0;
}

.database-input-search-field {
  position: relative;
}

.database-h4 {
  margin-left: 22px;
  color: rgba(0, 0, 0, 0.54);
}

.database-max-width {
  max-width: 200px;
  overflow: hidden;
}

.wizard-dialog-container {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  max-width: 800px;
  min-height: 680px;
  width: 100%;
}
.wizard-dialog-container .action-new-page md-tabs-wrapper {
  display: none !important;
}
.wizard-dialog-container .action-new-page md-tabs-content-wrapper {
  top: 0;
}
.wizard-dialog-container .wizard-dialog .left-section {
  background-color: rgb(255, 64, 129);
  box-sizing: border-box;
  color: #fff;
  padding: 18px;
}
.wizard-dialog-container .wizard-dialog .left-section .container-section .headline {
  margin-top: 0;
}
.wizard-dialog-container .wizard-dialog .left-section .container-section .step-container .circle {
  border-radius: 50%;
  border: 1px solid #fff;
  font-size: 1.5rem;
  font-weight: bold;
  height: 80px;
  transition: background-color 0.5s;
  width: 80px;
}
.wizard-dialog-container .wizard-dialog .left-section .container-section .step-container .circle.active, .wizard-dialog-container .wizard-dialog .left-section .container-section .step-container .circle.done {
  color: rgb(255, 64, 129);
  background-color: #fff;
}
.wizard-dialog-container .wizard-dialog .left-section .container-section .step-container .circle.active md-icon, .wizard-dialog-container .wizard-dialog .left-section .container-section .step-container .circle.done md-icon {
  color: rgb(255, 64, 129);
}
.wizard-dialog-container .wizard-dialog .left-section .container-section .step-container .step-label {
  margin-left: 15px;
}
.wizard-dialog-container .wizard-dialog .left-section .container-section .step-container-joiner {
  background: linear-gradient(to right, transparent 40px, #fff 40px, transparent 42px);
  height: 20px;
}

.fas-lg {
  font-size: 1.7em;
  margin-right: 0.8rem;
  min-width: 32px;
  text-align: center;
}

.layout-fill {
  box-sizing: border-box;
}

.md-button.md-icon-button.packed {
  margin: 0;
  padding: 0;
}

.md-icon-button.input-sibling {
  position: relative;
  top: 20px;
}

.fullscreen {
  height: 100%;
  width: 100%;
}

main,
.main-view {
  height: 100%;
  position: relative;
}

/* Toolbar area */
md-toolbar h1 {
  margin: auto;
  margin-left: 0;
}

md-toolbar h1.notLoggedIn {
  margin-left: 16px;
}

.tidal-pictogram {
  height: 30%;
  width: auto;
  margin-right: 0.75em;
}

/* Sidenav area */
md-sidenav.md-locked-open {
  width: 204px;
  min-width: 204px;
  max-width: 204px;
}

md-sidenav md-list-item .md-list-item-inner {
  font-size: 14px;
  font-weight: 500;
  margin: 0;
  padding-left: 8px;
  text-align: left;
  text-transform: uppercase;
  width: 100%;
}

md-sidenav md-list .selected {
  color: #03a9f4;
}

/* Primary content area */
#userlogin-content md-content {
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 5px;
}

/* Utils */
.content-wrapper {
  position: relative;
}

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.hide-if-empty:empty {
  display: none !important;
}

/* Forms */
:not(th) > md-progress-linear[md-mode=indeterminate] {
  left: 0;
  position: absolute;
  top: 0;
}

md-bottom-sheet :not(th) > md-progress-linear[md-mode=indeterminate] {
  position: absolute;
  top: auto;
}

div label:not(.md-no-float), md-radio-group label:not(.md-no-float) {
  display: block;
  -webkit-transform: translate3d(0, 4px, 0) scale(0.75);
  transform: translate3d(0, 4px, 0) scale(0.75);
  -webkit-transform-origin: left top;
  transform-origin: left top;
  color: rgba(0, 0, 0, 0.54);
}

md-radio-button {
  margin-top: 5px;
}

/* drag and drop */
.drop-box {
  background-color: #f8f8f8;
  border: 3px dashed #ddd;
  box-sizing: border-box;
  cursor: pointer;
  outline: none;
}

.drop-box:hover {
  background-color: #e0e0e0;
}

.drop-box.dragover {
  border: 3px dashed rgb(63, 81, 181);
}

.drop-box.dragover-err {
  border: 3px dashed rgb(255, 64, 129);
}

.item-title {
  outline: none;
  color: rgb(63, 81, 181);
  text-decoration: none;
  display: block;
}

.handler-content.ng-enter, .handler-content.ng-leave {
  transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s;
}

.handler-content.ng-enter, .handler-content.ng-leave.ng-leave-active {
  opacity: 0;
}

.handler-content.ng-leave, .handler-content.ng-enter.ng-enter-active {
  opacity: 1;
}

/* Typography support coming in 0.8.0 */
md-toolbar h1 {
  font-size: 1.25em;
  font-weight: 400;
}

.notransition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  -ms-transition: none !important;
  transition: none !important;
}

#notEditable *.CodeMirror.cm-s-default.CodeMirror-wrap {
  z-index: 0 !important;
  height: 100px !important;
  background-color: rgba(128, 128, 128, 0.5) !important;
}

.CodeMirror {
  border: 1px solid #eee;
  font-family: monospace;
  min-height: 100%;
}

.CodeMirror pre.CodeMirror-placeholder {
  color: #999;
}

.ta-button-group {
  background-color: #000;
}

.ta-button {
  background-color: #000;
  border: none;
  color: #fefefe;
  height: 40px;
  width: 40px;
}
.ta-button:hover {
  background-color: #3C3C3C;
}
.ta-button.active {
  background-color: #ff347e;
}
.ta-button.active:hover {
  background-color: hsl(338, 100%, 70%);
}

.ta-editor {
  border: solid 1px;
  border-color: rgba(0, 0, 0, 0.54);
  min-height: 200px !important;
  resize: vertical;
}

.ta-scroll-window > .ta-bind {
  height: auto;
  min-height: 200px;
  padding: 6px 12px;
}

.content-container {
  max-width: 1140px;
}

.max-100-height {
  box-sizing: border-box;
  max-height: 100%;
  padding: 0;
}

.floatRight {
  float: right;
}

.floatLeft {
  float: left;
}

html {
  overflow-x: hidden;
}

json-tree .key {
  color: black !important;
  font-weight: bold;
  font-size: 105%;
  padding: 5px 10px 5px 15px;
}

.full-page-view {
  padding: 0 !important;
}

.no-overflow-x {
  overflow-x: hidden;
}

.noOverflow {
  overflow: hidden;
}

.scrollable-y {
  overflow-x: hidden;
  overflow-y: auto;
}

.bottom-sheet-fix {
  height: 100%;
  left: 0 !important;
  margin-bottom: 80px !important;
  /*max-height: 80%;*/
  overflow-y: scroll;
  position: fixed !important;
}

.toolbar-current-env {
  font-size: 10px;
}

@media screen and (min-width: 1280px) {
  .bottom-sheet-fix {
    left: 204px !important;
  }
}
.buttonLabel {
  color: rgba(0, 0, 0, 0.54);
  font-family: "nationale-demibold", sans-serif;
  font-size: 75%;
  margin-left: 10px;
}

.dialogText {
  font-family: "nationale-demibold", sans-serif;
  /*font-size: 75%;*/
  margin-left: 10px;
}

.imageLabel {
  color: rgba(0, 0, 0, 0.54);
  font-family: "nationale-demibold", sans-serif;
  font-size: 10px;
  text-align: left !important;
}

.md-button.top-margin-18 {
  margin-top: 18px;
}

.disabled-color {
  color: rgba(0, 0, 0, 0.54) !important;
}

.cropArea {
  background: #E4E4E4;
  overflow: hidden;
  width: 425px;
  height: 250px;
}

.error {
  color: #f04124;
  margin-top: 5px;
}

.errorIcon {
  color: #f04124;
  cursor: pointer;
  margin-left: 0px;
  margin-right: 15px;
}

/* this needs to go somewhere else it breaks the date picker*/
.md-dialog-fullscreen {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  border-radius: 0;
}

.background-grey {
  background-color: rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.3);
}

.file-grid-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: 98%;
  max-width: 98%;
}

.file-grid-name {
  background-color: rgba(0, 0, 0, 0.4);
  bottom: 0;
  color: white;
  left: 0;
  overflow: hidden;
  padding: 5px 5%;
  position: absolute;
  width: 90%;
}

.fields-container {
  position: relative;
}

.field-sortable {
  background-color: #fff;
  padding: 0;
}

.fields-container > .reordering {
  padding-bottom: 0;
  padding-top: 0;
}

label {
  text-transform: capitalize;
}

.capitilized {
  text-transform: capitalize;
}

.md-button span {
  width: 100%;
}

.button-column {
  width: 20%;
  text-align: right !important;
}
.button-column .md-icon-button {
  margin: 0;
}

.zero-padding {
  padding: 0 !important;
}

.zero-margin {
  margin: 0 !important;
}

.databaseIcon {
  float: right;
}

.pointer {
  cursor: pointer;
}

.subtable-checkbox-column {
  text-align: center !important;
}

.actions-column {
  color: rgba(0, 0, 0, 0.54);
}

.subtable-header-row {
  height: 56px;
}

.subtable-header-row.ng-enter,
.subtable-header-row.ng-leave,
.subtable-row.ng-enter,
.subtable-row.ng-leave {
  transition: opacity 0.3s;
}

.subtable-header-row.ng-enter,
.subtable-header-row.ng-leave.ng-leave-active,
.subtable-row.ng-enter,
.subtable-row.ng-leave.ng-leave-active {
  opacity: 0;
}

.subtable-header-row.ng-leave,
.subtable-header-row.ng-enter.ng-enter-active,
.subtable-row.ng-leave,
.subtable-row.ng-enter.ng-enter-active {
  opacity: 1;
}

.subtable-row:hover {
  background-color: #eee;
}

.group-name {
  font-weight: bold;
  word-break: break-word;
}

.cms-anchor-link,
.cms-anchor-link:visited {
  color: #000;
}

.databaseIcon:hover {
  cursor: pointer;
}

.hidden-style {
  display: none;
  transition: 3s;
}

.css-class-tab {
  color: rgba(255, 255, 255, 0.87);
  background-color: rgb(63, 81, 181);
  padding: 3px;
}

.css-button-selected {
  color: rgb(255, 64, 129);
}

.css-class-border {
  border: 2px solid rgb(121, 134, 203);
}

.table-toolbar {
  padding: 0 24px;
  font-size: 100% !important;
}

.md-button.md-accent.md-raised {
  color: rgba(255, 255, 255, 0.87) !important;
}

.subtable-header {
  padding: 0 56px 0 0;
  height: 56px;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.54);
  vertical-align: middle;
  text-align: left;
}

.no-focus {
  outline: none;
}

.header-sort-icon {
  opacity: 0;
  transition: -webkit-transform 0.25s, opacity 0.25s;
  transition: transform 0.25s, opacity 0.25s;
  height: 16px;
  width: 16px;
  font-size: 16px !important;
  line-height: 16px !important;
}

.header-sort-icon.asc {
  opacity: 1;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  color: rgba(0, 0, 0, 0.87);
}

.header-sort-icon.desc {
  opacity: 1;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  color: rgba(0, 0, 0, 0.87);
}

.page-translations {
  word-break: break-word;
}

.table-sizer {
  /*Take 100& of screen size remove main toolbar height table toolbar size pagination size and marins*/
  height: calc(100vh - 64px - 57px - 64px - 70px);
  overflow: auto;
}

.full-table-dialog-sizer {
  /*Take 100& of screen size remove main toolbar height table toolbar size pagination size and marins*/
  height: calc(100vh - 64px - 57px - 53px - 64px - 56px);
  overflow: auto;
}

.form-table-dialog-sizer {
  /*Take 100& of screen size remove main toolbar height table toolbar size pagination size and marins*/
  height: calc(100vh - 64px - 57px - 53px - 64px - 56px - 60px);
  overflow: auto;
}

.select-table-cell {
  width: 11%;
}

.nw-toolbar {
  background: #000000;
}

.nw-button {
  color: #fefefe !important;
  background-color: #000000 !important;
  opacity: 1 !important;
}

.table-input {
  height: 30px;
  width: 100%;
}

@media (min-height: 770px) and (min-width: 1367px) {
  .select-table-cell {
    width: 7%;
  }
}
.section-content-buttons,
.section-content-buttons md-icon {
  color: #fff;
  transition: transform 0.2s;
}

.section-content-buttons .collapse {
  transform: rotate(90deg);
}

.input-div {
  margin: 30px 15px 0px 15px !important;
}

fieldset.standard {
  border-style: solid;
  border-width: 1px;
}

.as-sortable-placeholder {
  outline: 3px dashed #ccc;
  outline-offset: -3px;
}

.disable-text-transform {
  text-transform: none;
}

.field-override-warning {
  background-color: #2196f3;
  color: #fff;
  font-size: 0.9rem;
}

.single-line {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.icon-40 {
  font-size: 40px;
  height: 40px;
  width: 40px;
}

/* Fixing up list styles so that md-list-item-text container doesn't overflow. */
md-list-item.md-2-line > .md-no-style {
  box-sizing: border-box;
  max-width: 100%;
}

.country-code {
  font-size: 0.8rem;
}

.validation-error {
  color: red;
  font-size: 0.8rem;
  font-weight: bold;
}

.select-header-search {
  align-items: center;
  background-color: #fff;
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(0, 0, 0, 0.14), 0 0 0 0 rgba(0, 0, 0, 0.12);
  cursor: pointer;
  display: flex;
  height: 48px;
  padding-left: 10.667px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
}

.select-header-search-input {
  border: none;
  height: 100%;
  outline: none;
  padding: 0;
  width: 100%;
}

.select-items-container {
  padding-top: 48px;
}

.compound-button-container {
  display: flex;
  flex-direction: row;
}

.compound-button {
  box-shadow: none !important;
  min-width: 36px;
}

.compound-button-first {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  margin-right: 0;
}

.compound-button-last {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  margin-left: 0;
}

.compound-button:not(.compound-button-first):not(.compound-button-last) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-left: 0;
  margin-right: 0;
}

.compound-button:not(.compound-button-first):not(.compound-button-last),
.compound-button-last {
  border-left: 1px solid #222;
}

.filter-input {
  border: none;
  height: 100%;
  outline: none;
  padding-left: 16px;
  padding-right: 16px;
}

.filter-input:focus {
  background-color: #eee;
}

.material-icons.small {
  font-size: 20px;
  height: 20px;
  margin-right: 5px;
  vertical-align: middle;
  width: 20px;
}

.new-version-banner {
  padding: 0.5rem;
  text-align: center;
}