@import '../../lib/commonStyles/variable.scss';

$headerHight: 35px;
$pageSpacing: 16px;

$headerHight_classic: 31px;
$pageSpacing_classic: 10px;

.editSection {
  flex: 1;
  flex-grow: 1;
  max-height: 100%;
  height: 100%;
  width: 100%;
  padding: 0 $pageSpacing;
  box-sizing: border-box;
  overflow: hidden;
  overflow-y: auto;
}

.callControlRoot {
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 $pageSpacing;
  box-shadow: 0 -2px 5px 0 rgba(0, 0, 0, 0.15);
}

.header {
  height: $header-height;
}

.root {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: $headerHight;
  height: calc(100% - #{$headerHight});

  background: #fff;
  z-index: 20;
  width: 100%;

  &.classic {
    @include main_border(right);
    @include main_border(bottom);
    top: $headerHight_classic;
    height: calc(100% - #{$headerHight_classic});

    .header {
      @include main_border(right);
    }

    .editSection,
    .callControlRoot {
      padding: 0 $pageSpacing_classic;
      @include main_border(right);
    }
  }
}

.spinner {
  top: $header-height;
}

.callLogPanelClass {
  top: 0px !important;
  height: 100% !important;
}

.callLogPanelClassLeftNav {
  top: 0px !important;
  left: 0px;
  right: 0;
  width: auto;
  height: 100% !important;
}