/*
  GLOBAL CSS
  These styles overwrite Ant styles
*/

a, .Button {
  transition: color .3s, border-color .3s, background-color .3s, box-shadow .3s !important;
}

a:not(.Button):focus {
  color: #02bf6f;
}

button[disabled],
html input[disabled] {
  cursor: no-drop;
}

.ant-btn-primary {
  box-shadow: none;
}

.ant-dropdown-trigger {
  &:focus {
    color: inherit;
    background-color: inherit;
    border-color: #dee4e8;
  }
}

.icon-loading {
  flex-direction: column;
  margin-top: 10px;

  i {
    background: #00c06c;
    border-radius: 50%;
    padding: 3px;
    font-size: 20px;
    color: #fff;
  }

  .loading-text {
    color: #76899f;
    padding: 15px;
  }
}

.select-loading {
  color: #00c06c;
  margin-right: 10px;
}

.full-width {
  width: 100%;
}

.align-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.demio-green {
  color: #02bf6f;
}

.demio-border-green {
  border-color: #02bf6f;
}

.demio-bg-green {
  background-color: #02bf6f;
}

html [type="button"] {
  -webkit-appearance: none;
}

label {

  /*
  Disabled while we use the old embed options UI

  &:before {
    display: none !important;
  }
  */
}

input, div[tabindex]:not(.ant-calendar) {
  &:focus {
    box-shadow: none !important;
  }
}

.animated {
  &.faster {
    animation-duration: .5s !important;
  }

  &.slower {
    animation-duration: 2s !important;
  }

  &.slow {
    animation-duration: 3s !important;
  }
}

.icon-delete,
.icon-edit {
  &.--icon-middle {
    margin-top: 17px;
    display: flex;
    align-items: center;
  }

  &:hover {
    cursor: pointer;
    transition: transform .3s ease-in;
    transform: scale(1.1);
  }
}

.icon-edit {
  font-size: 18px;
  padding: 0 15px;
  color: #3b98df;

  &.--icon-middle {
    margin-top: 23px;
  }
}

.icon-delete {
  font-size: 20px;
  color:#de4735;
}

.ant-form-item-with-help + .icon-delete {
  margin-top: -15px !important;
}

.btn-red-color {
  color: #de4430;

  &:hover {
    color: #de4430;
  }
}

.flex-3 {
  flex: 3;
}
.flex-1 {
  flex: 1;
}
.flex-row-column {
  flex-direction: column;
}

// Select
.ant-select, .ant-calendar-picker {
  min-width: 270px;
}

.select-fullsize {
  min-width: 100%;
}


// Date & Time Input
.ant-calendar-input-wrap {
  height: 49px;
  padding-bottom: 12px;
  padding-top: 12px;
}

.ant-time-picker-panel-input-wrap {
  padding-top: 12px;
  padding-bottom: 12px;
}

.ant-time-picker-panel-clear-btn {
  top: 12px;
}

// SWITCH
.ant-switch {
  height: 40px;
  border-radius: 5px;
  background: #eff3f6;
  min-width: 90px;
}

.ant-switch-inner {
  color: #868686;
  font-size: 12px;
  margin-left: 48px;
  margin-right: 15px;
  line-height: 40px;
  font-weight: bold;
}

.ant-switch-checked {
  background: #02bf6f;

  .ant-switch-inner {
    color: #fff;
    margin-left: 15px;
    margin-right: 48px;
  }
}

.ant-switch:before,
.ant-switch:after {
  width: 30px;
  height: 30px;
  left: 4px;
  top: 4px;
  border-radius: 4px;
  background-color: #ffffff;
}

.ant-switch-checked:before,
.ant-switch-checked:after {
  margin-left: -4px;
  left: 100%;
}

// MODAL

.modal-header-left {
  text-align: left;
  padding: 0 30px;

  img {
    margin-right: 15px;
    width: 32px;
  }
}

.ant-modal-content {
  overflow: hidden;
}

.ant-modal-body {
  padding: 0;
}

.ant-modal-close-x, .ant-modal-body, .and-modal-content {
  border-radius: 10px;
}

.ant-modal-close-x {
  font-size: 20px;
  font-weight: bold;
  color: #b0bac9;
  width: 70px;

  .ant-modal-close-icon {
    height: 100%;
    line-height: 84px;
  }

  svg {
    width: 18px;
    height: 18px;
  }
}

// TABS
.ant-tabs .ant-tabs-bar {
  background: #fbfdfe;
}

.ant-tabs-content {
  padding: 0;
  background: #fff;
}

.ant-tabs-ink-bar {
  height: 0;
  visibility: hidden;
}

.ant-tabs-bar {
  border-bottom: 1px solid #e8ecf3;
  margin-bottom: 0;
}

.ant-tabs-nav-wrap {
  margin-bottom: 0;
}

.ant-tabs-nav-container {
  margin-right: 0;
  margin-bottom: 0;
  border-radius: 8px 8px 0 0;
}

.tabs-full-size {
  .ant-tabs-nav {
    min-height: 78px;
    line-height: 78px;

    .ant-tabs-tab {
      min-height: 78px;
      line-height: 78px;
    }
  }
  .ant-tabs-nav-container {
    margin: 0;
  }
}

.ant-tabs-bar:not(.ant-tabs-left-bar) .ant-tabs-nav > div {
  flex: 1;
  display: flex;
}

.ant-tabs-nav {
  min-height: 78px;
  line-height: 78px;
  display: flex;
  font-size: 16px;

  .ant-tabs-tab {
    flex: 1;
    line-height: 100px;
    text-transform: capitalize;
    color: #838b97;
    border-right: 0;
    background: #fbfdfe;
    padding: 0;
    margin: 0;
    text-align: center;
  }

  .ant-tabs-tab-active {
    color: #353d41;
    background: #fff;
  }

  .ant-tabs-tab-active:hover {
    color: inherit;
  }
}

.ant-modal-body > .ant-tabs > .ant-tabs-bar:not(.ant-tabs-vertical) .ant-tabs-tab {
  font-weight: 600;
  font-size: 16px;
  line-height: 78px;
  letter-spacing: 0.25px;
}

.ant-tabs-vertical {
  .ant-tabs-content {
    padding: 0 !important;
  }
  .ant-tabs-bar {
    margin-right: 0 !important;
  }
  .ant-tabs-nav {
    width: 255px !important;
    flex-wrap: wrap;

    .ant-tabs-tab {
      height: 73px;
      font-size: 14px;
      min-width: 255px;
      max-width: 255px;
      margin: 0 1px 0 0;
      text-align: left !important;
      line-height: 56px;
      border-bottom: 1px solid #e8ecf3;
    }
    .ant-tabs-tab-active {
      margin: 0;
    }
  }
}

// CHECKBOX
.ant-checkbox-group-item {
  margin:  0;
}
.ant-checkbox-inner {
  width: 27px;
  height: 27px;
  border: 2px solid #e4e8ec;
  border-radius: 4px;

  &:after {
    top: 11px;
    left: 6px;
    width: 8.7px;
    height: 14px;
  }
}

.ant-checkbox-input:focus + .ant-checkbox-inner {
  background: #fff;
  border-color: #e4e8ec;
}

.ant-checkbox-checked .ant-checkbox-inner,
.ant-checkbox-indeterminate .ant-checkbox-inner {
  background-color: #02bf6f !important;
  border-color: #02bf6f !important;
}

@media (hover: hover) {
  .ant-checkbox-wrapper:hover:not(.ant-checkbox-wrapper-disabled) .ant-checkbox-inner,
  .ant-checkbox-wrapper:hover:not(.ant-checkbox-wrapper-disabled) .ant-checkbox:hover .ant-checkbox-inner {
    background-color: #02bf6f !important;
    border-color: #02bf6f !important;
  }
}

.ant-checkbox-checked .ant-checkbox-inner:after {
  border: 3px solid #fff;
  border-top: 0;
  border-left: 0;
}

.ant-checkbox-wrapper + span, .ant-checkbox + span {
  padding-left: 15px;
}

// DROP AREA
.ant-upload.ant-upload-drag {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: #fff;
  border-radius: 4px;
  border: 2px dashed #d2dae4;
  padding: 20px 0;
  margin: 20px 0;
  min-height: 160px;
}


.--big {
  .ant-upload.ant-upload-drag {
    margin: 30px 0;
    min-height: 246px
  }
}

.ant-upload-list-item-info {
  padding: 0 22px 0 4px;
}

// Notification
.ant-notification-notice-icon {
  line-height: 32px;
}

// Radio groups
.ant-radio-group {
  font-size: 12px;
  user-select: none;

  label {
    height: 40px;
    line-height: 39px;
    color: #676e76;
    background: #f4f5f7;
  }

  .ant-radio-button-wrapper-checked {
    background: #02bf6f;
    color: #fff;


    &:after{
      content: '';
      position: absolute;
      top: -1px;
      left: -1px;
      bottom: -1px;
      right: -1px;
      border-radius: inherit;
      border: 0 solid #02bf6f;
      opacity: 0.4;
      animation: buttonEffect .4s;
      display: block;
    }
  }

  &.radios-classic label {
    color: initial;
    background: none;
    margin: 0 23px 0 0;
  }
}

.demio-radio-buttons-outline {
  label {
    background: #fff;
  }
  .ant-radio-button-wrapper-checked {
    background: #fff;
    color: #02bf6f;

    &:last-child {
      background: #fff;
      border-color: #02bf6f;
      box-shadow: -1px 0 0 0 #02bf6f;;
    }
  }
}

.ant-radio-inner {
  width: 19px;
  height: 19px;

  &:after {
    width: 11px;
    height: 11px;
    border-radius: 50%;
  }
}


// AVATAR
.ant-avatar-lg {
  width: 50px;
  height: 50px;
  line-height: 50px;
  border-radius: 50%;

  .ant-avatar-string {
    left: 19px !important;
    line-height: 50px !important;
  }
}

// ERRORS
.ant-form-item-control.has-error {
  padding-bottom: 10px;
}

// FORM ITEMS
.ant-form-item {
  margin-bottom: 20px;
}

.ant-input-group-addon {
  font-size: 16px;
}

// BOXES

textarea.ant-input {
  padding: 13px 19px;
}

.ant-pagination {
  text-align: center;
  margin-top: 30px;
}

.ant-form-item-label {
  text-align: left;
}

.anticon-close {
  font-size: 16px;
  color: rgba(0,0,0,0.45);
  cursor: pointer;

  &:hover {
    color: rgba(0,0,0,0.55);
  }
}

.ant-tooltip-inner {
  background-color: #242424;
}

.ant-dropdown-menu-item-divider {
  margin: 0;
}