@import 'open-color/open-color.css';

.container {
  composes: dashboard_content from 'STYLES/common.css';
}

.card_container {
  composes: card_container from 'STYLES/common.css';
}

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  &::after {
    transform: translate(10px,10px) !important;
  }
}

.cardBg {
  width: 100%;
  transform: initial !important;
}

.info_container_wrapper {
  width: 100%;
  position: relative;

  &:not(:first-child) {
    border-top: 1px solid var(--oc-gray-2);
  }
}

.subSection {
  background-color: var(--oc-gray-1) !important;
}

.subDragableWrapper {
}

.subDragableSection {
  padding: 0 !important;
}

.inputContainer {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

.sectionInput {
  min-width: initial;
  max-width: 250px;
  padding: 0;
  flex: initial;
}

.subSection-clickable {
  composes: subSection;

  &:hover {
    background-color: var(--oc-gray-3) !important;
  }

  &:not(:first-child) {
    border-top: 1px solid var(--oc-gray-3);
  }
}

.base_container {
  &:not(:first-child) {
    border-top: 1px solid var(--oc-gray-2);
  }
}

.info_container {
  display: flex;
  flex-direction: row;
  padding: 0 15px;
  align-items: center;
  composes: base_container;
}

.info_container_large {
  composes: info_container;
  padding: 15px;
}

.check_info_container {
  cursor: pointer;
  background-color: transparent;
  transition: background-color 0.3s;

  &:hover {
    background-color: var(--oc-gray-2);
  }
}

.check_container {
  margin: 0 15px;
}

.info {
  flex: 1;
  display: flex;
  align-items: center;
}

.info_loading {
  composes: modal-z-index from 'STYLES/common.css';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  min-height: auto;
}

.tipsoIntro {
  display: inline-block;
  position: relative;
  color: var(--oc-gray-5);
}

.tipsoWrapper {
  padding: 0 10px;
}

.tipso {
  min-width: 150px;
  font-size: 12px;
  line-height: 1.5em;
}

@media (max-width: 600px) {
  .inputContainer {
    justify-content: flex-end;
  }
}
