/* Webhooks */
.dev-navigation {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
  }
  .dev-navigation-item {
    font-family: 'Avenir Light', sans-serif;
    font-size: 17px;
    color: #807E9C;
    letter-spacing: 0;
    margin-bottom: 16px;
    display: inline-block;
  }
  a.dev-navigation-item:hover, a.dev-navigation-item:focus, a.dev-navigation-item:active {
    font-family: 'Avenir Roman',sans-serif;
  }
  .webhook-item.webhook-v1 {
      -webkit-border-radius: 3px;
      background: #FFFCFA;
      border: 1px solid rgba(255,129,63,0.26);
      border-radius: 3px;
      position: relative;
      padding: 0 !important;
  }
  .webhook-item.webhook-v2 {
      /* -webkit-border-radius: 3px; */
      background: #FFF;
      border-bottom: 1px solid rgba(34, 34, 34, 0.15);
      border-top: 1px solid rgba(34, 34, 34, 0.15);
      /* border-radius: 3px; */
      position: relative;
      padding: 0 !important;
      width: 600px;
  }
  @media(max-width:480px) {
    .webhook-item {
          width:min-content;
        }
      }
      @media(max-width:780px) {
        .webhook-item {
          width:340px;
        }
  
  .webhook-item.webhook-v2 {
    width:100%
  }
      }
  .border-b-1 {
    border-bottom: 1px solid rgba(34, 34, 34, 0.15) !important;
  }
  .border-1 {
    border: 1px solid rgba(34, 34, 34, 0.15);
  }
  .border-1:hover{
    border: 1px solid #222222;
  }
  option.inactive{
    display:none;
  }
  label.inactive{
    display:none;
  }
  
  .listening-for-content{
    display:none;
  }
  .listening-for-input{
    display:none;
  }
  .listening-for-content.show-content{
    display:flex;
  }
  .listening-for-input.show-content{
    display:flex;
  }
  
  .secret-text {
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-line-clamp: 1; /* number of lines to show */
             line-clamp: 1; 
     -webkit-box-orient: vertical;
     width: -webkit-fill-available;
  }
  
  .webhook-back-button {
    background: rgba(34, 34, 34, 0.05);
    border-radius: 100px;
    color: rgba(34, 34, 34, 0.7);
    width:min-content;
    padding:0px 12px 0px 12px;
    display: none;
    align-item-center;
    vertical-align:middle;
  }
  .webhook-back-button.show-button{
    display: flex;
    align-item:center;
  }
  .back-button-icon{
    fill-opacity:0.7
  }
  .webhook-back-button:hover{
    background: rgba(34, 34, 34, 0.1);
    color: rgba(34, 34, 34, 1);
  }
  .webhook-back-button:hover .back-button-icon{
    fill-opacity:1
  }
  .webhook-header-content{
    display:none;
  }
  .webhook-header-content.show{
    display:block;
  }
  .webhook-url-content{
    display:none;
  }
  .webhook-url-content.show{
    display:block;
  }
  .webhook-url-list{
    display:none;
  }
  .webhook-url-list.show{
    display:block;
  }
  .webhook_item{
    background:#fff
  }
  .webhook_item:hover{
    background: #F5F5F5;
  }
  .container.show-webhook{
    margin-top:16px;
  }
  .f-10 { font-size:10px; letter-spacing:0.5px; color: rgba(34, 34, 34, 0.7); }
  .webhook-events-wrapper {
    padding: 20px;
  }
  .webhook-item-wrapper {
    /* border-bottom: 1px solid rgba(255,129,63,0.26); */
    padding: 16px;
    display:flex;
    align-items:center;
  }
  .webhook-item-wrapper.webhook-v1 {
    border-bottom: 1px solid rgba(255,129,63,0.26);
    padding: 20px;
  }
  .webhook-active {
    background: rgba(52, 177, 102, 0.1);
    border-radius: 4px;
    font-size: 12px;
    line-height: 20px;
    color: #009F40;
    margin:0px 34px 2px 0px;
    padding: 0px 6px 0px 6px;
  }
  .tabEach {
    border-bottom: 1px solid transparent;
    margin: 0px 24px 0px 0px !important;
    padding: 0px 6px 6px 6px !important;
  }
  .tabEach.webhook-active {
    text-decoration: none !important;
    border-bottom: 1px solid #222222;
    border-radius: 0;
    margin: 0px 24px 0px 0px !important;
    padding: 0px 6px 6px 6px !important;
  }
  .w-wh-btn {
    width: 35%;
  }
  .webhook-table {
    width: 100%;
  }
  .wh-thead {
    font-family: 'Avenir Roman',sans-serif;
    font-size: 15px;
    color: #000000;
    letter-spacing: 0;
    padding-bottom: 8px;
  }
  .webhook-table td {
    font-family: 'Avenir Light',sans-serif;
    font-size: 14px;
    color: #807E9C;
    letter-spacing: 0;
    padding-top: 6px;
  }
  .webhook-table .switch {
    width: 49px !important;
    height: 23px !important;
    margin-top: 0 !important;
  }
  .webhook-table .slider:before {
      height: 17px !important;
      width: 17px !important;
      left: 3px !important;
      bottom: 2px !important;
  }
  .webhook-table .toggle_on {
      top: 5px !important;
      left: 9px !important;
      font-size: 10.5px !important;
  }
  .webhook-table .toggle_off {
      top: 5px !important;
      right: 7px !important;
      font-size: 10.5px !important;
  }
  .webhook-table input:checked + .slider:before {
    -webkit-transform: translateX(25px);
      -ms-transform: translateX(25px);
      transform: translateX(25px);
  }
  .send-test-link {
    font-family: 'Avenir Roman',sans-serif;
    font-size: 14px;
    letter-spacing: 0.2px;
  }
  .SendTest-modal-content {
    background: #FFFFFF;
    border-radius: 3px;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  #SendTestModal {
    padding-right: 0 !important;
  }
  .SendTest-modal-body {
    padding: 40px 9% !important;
  }
  .SendTest-head {
    font-weight: 700;
    line-height: 20px;
    color: #222222;
    letter-spacing: 0;
  }
  .SendTest-subtext {
    font-weight: 450;
    font-size: 14px;
    line-height: 20px;
    color: rgba(34, 34, 34, 0.7);
  }
  .SendTest-head.webhook-v1 {
    font-family: 'Avenir Heavy',sans-serif;
    font-size: 20px;
    color: #262626;
    letter-spacing: 0;
    margin-top: 0;
    margin-bottom: 15px;
  }
  .SendTest-subtext.webhook-v1 {
    font-family: 'Avenir Light',sans-serif;
    font-size: 17px;
    color: #807E9C;
    letter-spacing: 0;
  }
  .SendTest-bold {
    color: #262626 !important;
  }
  .SendTest-modal-content .script-wrapper p {
    margin-bottom: 0;
  }
  .h-54-btn {
    min-width: 155px;
    height: 54px;
    line-height: 54px;
    padding: 0 !important;
  }

.webhook-url-border-item {
  padding: 10px 16px;
}
.webhook-url-border.show:has(> .webhook-url-border-item) {
  padding: 0px;
}
.webhook-url-border-item:hover{
  background: #F5F5F5;
}
.webhook-url-border.show:hover .webhook-url-border-item:hover{
  background: #fff;
}
.webhook-event-tag-edit:hover, .webhook-event-tag:hover, .webhook-event-tag-test:hover{
  background: rgba(34, 34, 34, 0.15);
}
.pd-x-20{
  padding:0px 20px;
}
.mg-l-20{
  margin-left:20px;
}

.bmc-header-dropdown{
  padding: 6px 0;
  top: 52px;
  right: 0;
  width: 230px;
  box-shadow: 0px 10px 20px rgb(0 0 0 / 10%);
  border: none;
}

.no-border-input, .no-border-input :focus {
  font-size: 16px;
  padding-top: 4px;
  display: block;
  font-family: Circular Regular, sans-serif;
  color: #222;
  border-bottom: 1px solid transparent !important;
  outline: 0;
  border: 0;
  width:100%;
  /*margin-top: 1px;*/
}
.no-border-input::placeholder {
  color: #717171;
  font-size: 16px;
  font-family: Circular Regular, sans-serif !important;
}
.no-border-input::-ms-placeholder {
  color: #717171;
  font-size: 16px;
  font-family: Circular Regular, sans-serif !important;
}
.no-border-input::-webkit-input-placeholder{
  color: #717171;
  font-size: 16px;
  font-family: Circular Regular, sans-serif !important;
}
.skeleton-box {
  height: 20px;
  width: 182px !important;
  position: relative;
  overflow: hidden;
  background-color: #f4f4f4;
  border-radius:0;
}
.skeleton-box.rounded {
  border-radius:9999px;
  width:20px !important;
}
.skeleton-box.small {
  width:40px !important;
  height:20px;
}
.skeleton-box.medium {
  width:30% !important;
  height:22px;
}
  @keyframes shimmer {
    100% {
      transform: translateX(100%);
    }
  }
.skeleton-box::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.2), rgba(255,255,255,0.5), rgba(255,255,255,0));
    animation: shimmer 2s infinite;
    content: '';
  }

.webhook-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -o-transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition:0.5s;
  -ms-transition:0.5s;
  transition:0.5s;
  box-sizing: border-box;
  background: #D9DEE3;
  border: 1px solid #E9E9E9;
  border-radius: 100px;
}
.webhook-slider:hover{
  background: rgba(34, 34, 34, 0.25);
}
.webhook-slider:before {
  position: absolute;
  content: "";
  left: 2px;
  background: #fff;
  height: 12px;
  width: 12px;
  border-radius:1000px;
  bottom:2px;
  -o-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.webhook_slider_toggle_on:before {
  background: #ffffff !important;
  left: 14px;    
  webkit-transform: translateX(0px);
  -ms-transform: translateX(0px);
  transform: translateX(0px);
}
.webhook_slider_toggle_on {
  background: #FFDD00 !important;
}

.sticky-link-webhook{
  color: rgba(34, 34, 34, 0.7);
  line-height:16.8px;
  margin:0;
  margin-top:12px;
}
.sticky-link-webhook:hover, .sticky-link-webhook:focus{
  color: #222222;
}
.json-pre {
   background-color: transparent;
   border: none !important;
   padding: 0;
   margin: 0; 
   }

.webhook-tabs-link {
  background:#fff;
  color: rgba(34, 34, 34,0.5);
  cursor:pointer;
  text-decoration: none;
  text-underline-offset: 0px;
}
.webhook-tabs-link:hover{
  color: #717171;
}
.webhook-tabs-link.webhook-active {
  background:#fff;
  color: #222222;
  text-decoration: underline;
  text-underline-offset: 8px;
  text-decoration-color:#222222;
}
.webhook-tabs-link.webhook-active:hover {
  color:#222;
}
  @media(min-width:768px) {
    .SendTest-dialog {
      max-width: 635px;
    }
    .webhooks-container {
      width: min-content;
    }

  }
  
  .webhook-wrapper {
    width:600px;
  }
  @media(max-width:480px) {
    .webhook-wrapper {
          width:min-content;
        }
      }
      @media(max-width:780px) {
        .webhook-wrapper {
          width:340px;
        }
      }
  
  @media(min-width:481px) and (max-width:767px) {
    .SendTest-dialog {
      width: 85% !important;
      margin: 10px auto !important;
    }
    .w-wh-btn {
      width: 250px !important;
    }
  }
  @media(max-width: 767px) {
    .webhook_url_created {
      width: 90%;
    }
  }
  @media(max-width:480px) {
    .SendTest-modal-content .script-wrapper {
      font-size: 13px !important;
      width: 100% !important;
    }
    .SendTest-subtext {
      font-size: 15px !important;
    }
    .webhook-table td {
      font-size: 13px !important;
    }
    .webhook-table .wh-thead {
      font-size: 14px !important;
      width: 50% !important;
    }
    .webhook-table .switch {
      float: right;
    }
    .webhook-url-response .script-wrapper {
      width: inherit !important;
    }

    .webhook_url_created {
      width: 100%;
    }
    .webhook-url-border-item {
      padding:10px 8px;
    }
    .pd-x-20{
      padding:0px 10px;
    }
    .mg-l-20{
      margin-left:10px;
    }

  }

.webhook-url-border.show{
border: 1px solid rgba(34, 34, 34, 0.15);
border-radius: 4px;
padding: 10px 16px;
margin-bottom:10px;
width:inherit;
display:inline-block;
}

.webhook-url-response{
  display:none;
}
.webhook-url-response.show{
  display:flex;
  flex-direction:column;
display:inline-block;
}
.webhook-response-text {
  background: linear-gradient(0deg, rgba(0, 159, 64, 0.15), rgba(0, 159, 64, 0.15)), #FFFFFF;
  border-radius: 4px;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #009F40;
  padding:0px 8px;
  height: min-content;
  vertical-align:middle;
}
.webhook-response-text.error {
color: #F14747;
background: rgba(241, 71, 71, 0.1);
}
.signup-alert.webhook-v2 {
  width: 100%;
  margin:0;
  margin-top: 16px;
  padding:0px;
}

.script-wrapper.webhook-v2 {
  font-size: 14px;
  font-weight: 450;
  line-height: 20px;
  padding: 17.5px 32px;
  background: #f5f5f5;
  -webkit-box-shadow:  0 1px 2px 0 rgba(0,0,0,0.00), 0 2px 5px 0 rgba(49,49,93,0.10), 0 0 0 0 rgba(82,95,127,0.03);
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.00), 0 2px 5px 0 rgba(49,49,93,0.10), 0 0 0 0 rgba(82,95,127,0.03);
  border-radius: 4px;
  margin: 0 auto;
}
.black-clr {
  color:#000000;
  word-wrap: break-word;
}
.dark-blue-clr {
  color:#22509F;
  word-wrap: break-word;
}
.brown-clr {
  color:#9B322C;
  word-wrap: break-word;
}
.dark-green-clr {
  color:#579749;
  word-wrap: break-word;
}
.yellow-color {
  background: #FFDD00;
}
.yellow-color:hover {
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), #FFDD00;
}
.webhook-url-events, .copy-btn-webhook {
  background: #F5F5F5;
  border-radius: 4px;
  padding: 4px 6px 4px 6px;
  position:relative;
  display:inline-block;
}
.webhook-url-events:hover, .copy-btn-webhook:hover {
  background: #E7E7E7;
}
.circle-loader.webhook-v2{
  position: inherit;
}
.circle-loader.black{
  border-left-color: #222222;
}
  /* /.. Webhooks */