@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
  --color-primary: #289951;
  --color-dark-primary: #0d1321;
  --color-secondary: #20663a;
  --color-dark-secondary: #161e2e;
  --color-active: #26c281;
  --color-inactive: #f1a528;
  --color-offline: #a4a4a4;
  --color-message: #f1f0f0;
  --color-light: #fff;
  --color-dark: #222;
  --color-dark-mode: #006289;
  --color-dark-mode2: #0b5572;
  --shadow: 0 7px 15px 1px rgb(55 62 70 / 7%);
}

[class*='ctd'] * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

[class*='ctd'] {
  font-family: 'Poppins', sans-serif;
}

[class*='ctd-button-'] {
  padding: 15px 30px;
  border: none;
  color: var(--color-light) !important;
  border-radius: 5px;
  font-weight: 600;
  display: inline-flex;
  font-size: 16px;
  gap: 10px;
  align-items: center;
  transition: all 0.5s;
  cursor: pointer;
  text-decoration: none !important;
  border: 1px solid var(--color-primary);
  background-color: var(--color-light);
  i {
    font-size: 20px;
    transition: all 0.5s;
    margin-left: -5px;
    color: var(--color-primary);
  }
  &:hover {
    background-color: var(--color-secondary);
    color: var(--color-light);
    i {
      color: var(--color-light);
    }
  }
  &.ctd-btn-rounded {
    border-radius: 30px;
  }
  &.ctd-btn-lg {
    padding: 15px 35px;
    font-size: 18px;
    i {
      font-size: 25px;
    }
  }
  &.ctd-btn-sm {
    padding: 10px 15px;
  }
  &.ctd-btn-effect {
    &:hover {
      transform: translateY(-10px);
    }
  }
  &.ctd-btn-bg {
    background-color: var(--color-primary);
    color: var(--color-light);
    border: none;
    i {
      color: var(--color-light);
    }
    &:hover {
      background-color: var(--color-secondary);
    }
  }
  &.ctd-button-3 {
    background-color: var(--color-light);
    color: var(--color-dark);
    border-radius: 5px;
    padding: 5px 10px;
    i {
      width: 45px;
      height: 45px;
      border-radius: 50%;
      padding: 0;
      border: none;
      font-size: 20px;
      background: var(--color-primary);
      color: var(--color-light);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.5s;
    }
    &:hover {
      background-color: var(--color-secondary);
      color: var(--color-light);
      i {
        background-color: var(--color-light);
        color: var(--color-primary);
      }
    }
    &.ctd-btn-lg {
      padding: 10px 15px;
      font-size: 18px;
      i {
        width: 50px;
        height: 50px;
      }
    }
    &.ctd-btn-sm {
      font-size: 14px;
      i {
        width: 40px;
        height: 40px;
      }
    }
    &.ctd-btn-rounded {
      border-radius: 45px;
    }
    &.ctd-btn-bg {
      background-color: var(--color-primary);
      color: var(--color-light);
      i {
        background-color: var(--color-light);
        color: var(--color-primary);
      }
      &:hover {
        background-color: var(--color-secondary);
      }
    }
  }
  &.avatar-active,
  &.avatar-inactive {
    line-height: 1;
    padding: 7px 18px 7px 10px;
    border-radius: 5px;
    position: relative;
    a {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
    }
    img {
      width: 55px;
      height: 55px;
      border-radius: 50%;
      object-fit: cover;
      padding: 0;
      border: 1px solid var(--color-light) !important;
    }
    &.ctd-btn-lg {
      padding: 10px 13px;
      .title {
        font-size: 17px;
      }
      img {
        width: 60px;
        height: 60px;
      }
    }
    &.ctd-btn-sm {
      .title {
        font-size: 13px;
      }
      img {
        width: 50px;
        height: 50px;
      }
    }
    .info-wrapper {
      text-align: left;
    }
    .info {
      font-size: 10px;
      margin-bottom: 7px;
      line-height: 1;
    }
    .title {
      margin-bottom: 7px;
      font-weight: 700;
      line-height: 1;
      font-size: 16px;
    }
    .online {
      display: inline-block;
      padding: 5px;
      background-color: var(--color-active);
      font-size: 10px;
      border-radius: 5px;
      line-height: 1;
    }
    .offline {
      display: inline-block;
      padding: 5px;
      background-color: var(--color-active);
      font-size: 10px;
      border-radius: 5px;
      line-height: 1;
    }
    &.ctd-btn-rounded {
      border-radius: 50px;
    }
  }
  &.avatar-active {
    .offline {
      display: none;
    }
  }
  &.avatar-inactive {
    border: none;
  }
  &.avatar-inactive,
  &.avatar-inactive:hover {
    background-color: var(--color-offline) !important;
    color: var(--color-light) !important;
    cursor: not-allowed;
    border-color: var(--color-dark) !important;
    .online {
      display: none;
    }
    .offline {
      background-color: var(--color-inactive) !important;
    }
  }
}

.ctd-desktop-only {
  @media screen and (max-width: 991px) {
    display: none;
  }
}
.ctd-tablet-only {
  @media screen and (min-width: 991px) {
    display: none;
  }
  @media screen and (max-width: 576px) {
    display: none;
  }
}
.ctd-mobile-only {
  @media screen and (min-width: 576px) {
    display: none;
  }
}
.ctd-mobile-tablet-only {
  @media screen and (min-width: 991px) {
    display: none;
  }
}

.avatar-inactive {
  a {
    display: none;
  }
}

.ctdButtons-align-right {
  text-align: right;
}

.ctdButtons-align-center {
  text-align: center;
}

.ctdButtons-align-left {
  text-align: left;
}
.ctdButtons{text-decoration:none}

.wp-block-block-course-buttons, .wp-block-create-block-click-to-dial-button {
	background-color: var(--color-primary);
	color: var(--color-light);
	padding: 10px 20px;
	text-decoration: none;
	&:hover {
    color: var(--color-light);
		opacity: .85;
	}
	&.border-squared {
		border-radius: 0 !important;
	}
	&.border-rounded {
		border-radius: 40px !important;
	}
	&.size-small {
		font-size: 16px;
    padding: 10px 15px;
	}
	&.size-medium {
		font-size: 16px;
    padding: 15px 30px;
	}
	&.size-large {
		font-size: 18px;
    padding: 15px 35px;
	}
	&.block-button-wrapper {
		display: inline-block;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.block-button-title {
		margin: 0;
		flex-grow: 1;
		border: none;
		padding: 15px 20px;
		border-radius: 40px;
		cursor: pointer;
	}

	span {
		font-size: inherit;
		width: auto;
		height: auto;
	}
}
.button-wrapper {
  margin-bottom: 16px;
}
.ctd-editor {
  max-width: 840px;
  margin-left: auto;
  margin-right: auto;
}