body{margin: 0;padding:0;font-family: 'Poppins', sans-serif;color:#666;font-size: 14px;}
*{box-sizing: border-box;}
.form-container{max-width:430px;box-shadow:0 0 20px rgba(0,0,0,0.1);margin:50px auto;border-radius:20px;padding:35px 25px; background: #fff;}
.form-container.large-size{max-width:600px;}


.form-container h2{margin: 0;padding:0px 0 15px;text-align: center;color:#000;font-size: 25px;}
.form-container h2 span{display: block;}
.form-group{margin:0 0 15px;position: relative;}
.form-control{border-radius:8px;border: solid 1px #e7e7e7;padding:12px 10px;font-size: 14px;width:100%}
.form-container .form-control:disabled {
  background-color: #fff;
  opacity: 1;
}
.form-group label {
    color: #bbb;
    font-size:14px;
    position: absolute;
    z-index: 2;
    left: 15px;
    top:12px;
    padding: 0 2px;
    pointer-events: none;
    background: #fff;
    -webkit-transition: -webkit-transform 100ms ease;
    -moz-transition: -moz-transform 100ms ease;
    -o-transition: -o-transform 100ms ease;
    -ms-transition: -ms-transform 100ms ease;
    transition: transform 100ms ease;
    -webkit-transform: translateY(-20px);
    -moz-transform: translateY(-20px);
    -o-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  .form-group input,   .form-group textarea {
    font-size: 13px;
    color: #555;
    outline: none;
    border: 1px solid #bbb;
    padding: 12px 15px;
    border-radius:8px;
    position: relative;
    font-family: 'Poppins', sans-serif;
    text-align: left;
  }
  .form-group input:invalid + .floating-label, .form-group textarea:invalid + .floating-label {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);

  }
  .form-group input:focus,   .form-group textarea:focus {
    border-color: #2b96f1;
  }
  .form-group input:focus + .floating-label,   .form-group textarea:focus + .floating-label {
    color: #2b96f1;
    -webkit-transform: translateY(-17px);
    -moz-transform: translateY(-17px);
    -o-transform: translateY(-17px);
    -ms-transform: translateY(-17px);
    transform: translateY(-17px);
    font-size: 11px;
  }
  .pb-0{padding-bottom: 0 !important;}
.mb-3{margin-bottom:20px !important;}
.mb-0{margin-bottom: 0 !important;}
.form-group input:focus,  .form-group input:focus-visible{border:solid 1px #2b89bf;outline: none;}

.form-group input::placeholder, .form-group textarea::placeholder  {color: #c4c4c4;opacity: 1; text-align: left;}
.form-group input:-ms-input-placeholder, .form-group textarea:-ms-input-placeholder {color: #c4c4c4; text-align: left;}
.form-group input::-ms-input-placeholder, .form-group textarea::-ms-input-placeholder {color: #c4c4c4; text-align: left;}
.form-checkbox{font-size: 14px;display: flex;align-items: flex-start;margin-bottom:30px;}
.form-checkbox input{margin-right:7px;}
.form-group.error input{border: solid 1px red;}
.errormessage{font-size: 11px;color:red;margin-top:5px;}
.text-center{text-align: center;}

.field-icon {position:absolute;right:10px;top: 13px;z-index: 2;}
.form-button{background:#2b89bf;color:#fff;border-radius:8px;height:45px;padding:0px 15px; line-height:45px;border: none;font-weight: 600;font-size:16px;margin-top:15px;cursor: pointer; display: inline-block; text-align: center; text-decoration: none; transition: all .2s ease-in-out;}
.form-button:hover{transform: translateY(-1px) !important; color: #fff;}

.full-width{width:100%;}
.pagelink{text-align: center;display:block;font-size: 14px;}
.pagelink a{color:#2b89bf;text-decoration:none;}
.google-logo {background: #fff;border-radius: 50%;padding: 3px;width: 25px;height: 25px;margin-right: 10px;line-height: 19px;
    display: inline-block;vertical-align: middle;}
.finilize-video{border-radius:20px;overflow: hidden;margin:25px 0 15px;display: block;}
.finilize-video iframe{border-radius: 20px;border: none;}

.steps-container{max-width: 650px;margin:0;padding:25px}
.back-button a{padding:10px 0;display: flex;align-items: center;color:#666;text-decoration:none;}
.back-button svg{margin-right: 5px;}
.form-radio{display: flex;align-items:flex-start;margin-bottom:20px;}
.form-radio input{margin-right:5px;}

.steps-heading{margin:25px 0 30px;}
.steps-heading h2{color:#000;font-size:25px;margin:0;padding:0px;}
.btn-default{background:#2b89bf;color:#fff;border-radius: 10px;height:45px;padding:0px 40px; line-height:40px;border: none;font-weight: 600;font-size:16px;margin-top:15px;cursor: pointer;}
.addmore-link a{color:#2b89bf;text-decoration: none;}
.subradiolist{margin:0px 0 10px 25px;padding:0px; list-style: none;}


.wizard {
    overflow: hidden;
  }
  .wizard .wizard-header {
    margin-bottom: 30px;
  }
  .wizard .wizard-header h1 {
    margin-top: 0;
    margin-bottom: 20px;
  }
  .wizard .wizard-header h1 small {
    color: #bbb;
  }
  .wizard .wizard-header hr {
    border-color: #2b89bf;
    border-top-width: 2px;
  }
  .showinfo{margin-left:5px;}
  .form-radio .form-check-input{min-width: 1em;}
.steps {
    height: 15px;
  }
 .steps .wizard-step {
    background: #2b89bf;
    width:35px;
    height:4px;
    display: inline-block;
    margin: 0 5px;
    opacity: 0.2;
    border-radius:3px;
    transition: all 0.8s;
  }
  .steps .wizard-step:first-child{margin-left: 0;}

.steps .wizard-step.active {
    opacity: 1;
  }
  .wizard .wizard-body {
    position: relative;
    transition: all 0.3s cubic-bezier(0.68, -0.3, 0.37, 0.6);
    padding-bottom:30px;
  }
  .wizard .wizard-body .step {
    transition: all 0.3s ease-in-out;
    position: absolute;
    width: 100%;
    top: 0;
    right: -100%;
    opacity: 0;
  }
  .wizard .wizard-body .step.initial {
    position: relative;
  }
  .wizard .wizard-body .step.off {
    opacity: 0 !important;
    right: 100% !important;
    display: none;
  }
  .wizard .wizard-body .step.active {
    right: 0;
    margin-left: 0;
    margin-top: 0;
    opacity: 1;
    transition: all 0.4s linear;
    transition-delay: 0.1s;
  }
  .wizard .wizard-footer {
    margin-top: 30px;
  }
    .optionalheading{display: flex; align-items: flex-start;}
    .optionalheading span{margin:5px 0 0 15px;font-size: 16px;color:#c3c3c3}
    .optionalheading h2{max-width:500px;}

/* variables */
:root {
    /* colors */
    --tz4-color-primary-hsl: 250, 84%, 54%;
    --tz4-color-bg-hsl: 0, 0%, 100%;
    --tz4-color-contrast-high-hsl: 230, 7%, 23%;
    --tz4-color-contrast-higher-hsl: 230, 13%, 9%;

    /* spacing */
    --tz4-space-3xs: 0.25rem;
    --tz4-space-2xs: 0.375rem;
    --tz4-space-xs: 0.5rem;
    --tz4-space-sm: 0.75rem;

    /* typography */
    --tz4-text-sm: 0.833rem;
    --tz4-text-xs: 0.694rem;

    --primary-color: #428bca;
    --secondary-color: #5bc0de;
    --dark-bg: #2c3e50;
    --code-bg: #1a1a2e;
    --text-light: #f3f4f6;
    --text-muted: #9ca3af;
}

@media(min-width: 64rem){
    :root {
      /* spacing */
      --tz4-space-3xs: 0.375rem;
      --tz4-space-2xs: 0.5625rem;
      --tz4-space-xs: 0.75rem;
      --tz4-space-sm: 1.125rem;

      /* typography */
      --tz4-text-sm: 1rem;
      --tz4-text-xs: 0.8rem;
    }
  }

  /* component */
  :root {
    --tooltip-triangle-size: 12px;
  }

  .tooltip-trigger {
    /* style inline-text tooltip trigger */
    white-space: nowrap;
    cursor: help;
    vertical-align: top;
  }

  .tooltip {
    /* tooltip element - created using js */
    position: absolute;
    z-index: 5;
    display: inline-block;
    padding: var(--tz4-space-2xs) var(--tz4-space-xs);
    border-radius: 0.25em;
    max-width: 200px;
    background-color: hsla(var(--tz4-color-contrast-higher-hsl), 0.98);
    box-shadow: 0 0.9px 1.5px rgba(0, 0, 0, 0.03),0 3.1px 5.5px rgba(0, 0, 0, 0.08),0 14px 25px rgba(0, 0, 0, 0.12);
    color: hsl(var(--tz4-color-bg-hsl));
    font-size:12px;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: opacity 0.2s, visibility 0.2s;
    font-weight: 300;
  }
  .tooltip a {
    color: inherit;
    text-decoration: underline;
  }
  @supports ((-webkit-clip-path: inset(50%)) or (clip-path: inset(50%))) {
    .tooltip::before {
      /* tooltip triangle  */
      content: "";
      position: absolute;
      background-color: inherit;
      border: inherit;
      width: var(--tooltip-triangle-size);
      height: var(--tooltip-triangle-size);
      -webkit-clip-path: polygon(0% 0%, 100% 100%, 100% 100%, 0% 100%);
              clip-path: polygon(0% 0%, 100% 100%, 100% 100%, 0% 100%);
    }
  }

  .tootip:not(.tooltip--sticky) {
    pointer-events: none;
  }

  /* size variations */
  .tooltip--sm {
    max-width: 150px;
    font-size: var(--tz4-text-xs);
    padding: var(--tz4-space-3xs) var(--tz4-space-2xs);
  }

  .tooltip--md {
    max-width: 300px;
    padding: var(--tz4-space-xs) var(--tz4-space-sm);
  }

  .tooltip--lg {
    max-width: 350px;
    font-size: var(--tz4-text-base-size);
    padding: var(--tz4-space-xs) var(--tz4-space-sm);
  }

  /* tooltip position */
  .tooltip {
    /* variable used in JS to proper place tooltip triangle */
    --tooltip-triangle-translate: 0px;
  }

  .tooltip--top::before, .tooltip--bottom::before {
    left: calc(50% - var(--tooltip-triangle-size) / 2);
  }

  .tooltip--top::before {
    bottom: calc(var(--tooltip-triangle-size) * -0.5);
    -webkit-transform: translateX(var(--tooltip-triangle-translate)) rotate(-45deg);
            transform: translateX(var(--tooltip-triangle-translate)) rotate(-45deg);
  }

  .tooltip--bottom::before {
    top: calc(var(--tooltip-triangle-size) * -0.5);
    -webkit-transform: translateX(var(--tooltip-triangle-translate)) rotate(135deg);
            transform: translateX(var(--tooltip-triangle-translate)) rotate(135deg);
  }

  .tooltip--left::before, .tooltip--right::before {
    top: calc(50% - var(--tooltip-triangle-size) / 2);
  }

  .tooltip--left::before {
    right: calc(var(--tooltip-triangle-size) * -0.5);
    -webkit-transform: translateX(var(--tooltip-triangle-translate)) rotate(-135deg);
            transform: translateX(var(--tooltip-triangle-translate)) rotate(-135deg);
  }

  .tooltip--right::before {
    left: calc(var(--tooltip-triangle-size) * -0.5);
    -webkit-transform: translateX(var(--tooltip-triangle-translate)) rotate(45deg);
            transform: translateX(var(--tooltip-triangle-translate)) rotate(45deg);
  }

  .tooltip--is-hidden {
    /* class used in JS to hide the tooltip element before its top/left positions are set */
    visibility: hidden;
    opacity: 0;
  }
  .tooltip--hide {
    visibility: hidden;
    opacity: 0;
}
#password-field{ background-image: none; }
.container-head-bg{background-color: #696cff; border-radius: 0.5rem 0.5rem 0rem 0rem;}
.cardhead-review{justify-content: space-between;}
.card-subtitle-rating svg{height: 18px; width: 18px; fill: #ffab00;}
.reviews-cards img{width: 55px;}
.app-brand-logo img{width: 135px;}
.bg-primary-custom{background-color: rgb(66, 139, 202) !important;}
.border-primary-custom{border-color: rgb(66, 139, 202) !important;}
.exportpdf .avatar {
  width: 3.375rem;
  height: 3.375rem;
}

@media screen and (max-width:767px){
    .form-container{margin:35px 15px;max-width: 100%;}
    .form-container h2, .steps-heading h2{font-size: 22px;}
}

.swagger-ui .topbar-wrapper{
    display: none !important;
}
.swagger-ui .topbar {
    background-color: #c5c5c5 !important;
    padding: 1px 0 !important;
}
.opblock-tag{
    font-size: 18px !important;
}
.swagger-ui section.models{
    display: none;
}

.oauth-doc {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.doc-header {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    padding: 3rem 2rem;
    border-radius: 1rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

.doc-header h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.doc-header p {
    font-size: 1.2rem;
    opacity: 0.9;
}

.doc-section {
    background: white;
    border-radius: 1rem;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
    transition: transform 0.2s;
}

.doc-section h2 {
    color: var(--primary-color);
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e5e7eb;
    position: relative;
}

.doc-section h2::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 40px;
    height: 1px;
    background: var(--primary-color);
}

.doc-section h3 {
    color: var(--dark-bg);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 1.5rem 0 1rem;
    padding-left: 0.75rem;
    border-left: 3px solid var(--primary-color);
}

.doc-section h3:first-child {
    margin-top: 0;
}

.doc-section:hover {
    transform: translateY(-2px);
}

.code-block {
    background: var(--code-bg);
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin: 1rem 0;
    position: relative;
}

.code-block pre {
    margin: 0;
    color: var(--text-light);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    line-height: 1.5;
}

.code-block .copy-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: var(--text-light);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: background 0.2s;
}

.code-block .copy-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.info-box {
    background: #e0e7ff;
    border-left: 4px solid var(--primary-color);
    padding: 1rem;
    margin: 1rem 0;
    border-radius: 0.25rem;
}

.step-number {
    background: var(--primary-color);
    color: white;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
}

.scope-badge {
    background: var(--dark-bg);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    margin: 0.25rem;
    display: inline-block;
}

.token-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

.token-card {
    background: #f3f4f6;
    padding: 1rem;
    border-radius: 0.5rem;
    text-align: center;
}

.token-card h6 {
    color: var(--text-muted);
    margin: 0;
}

.token-card p {
    color: var(--primary-color);
    font-weight: bold;
    margin: 0.5rem 0 0;
}

/* Navbar Styles */
.navbar {
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.navbar-nav .nav-item {
    margin: 0 2px;
}

.navbar-nav .nav-link {
    display: flex;
    align-items: center;
    padding: 0.8rem 1rem;
    color: #333;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.3px;
}

.navbar-nav .nav-link:hover {
    color: #008abd;
}

.navbar-nav .nav-link:hover i {
    color: #008abd;
}

.navbar-nav .nav-link i {
    font-size: 16px;
    margin-right: 8px;
    color: #6c757d;
    width: 20px;
    text-align: center;
}

.navbar-nav .dropdown-toggle::after {
    margin-left: 8px;
    color: #6c757d;
}

.navbar-nav .dropdown-menu {
    margin-top: 0;
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.navbar-nav .dropdown-item {
    padding: 0.6rem 1rem;
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.navbar-nav .dropdown-item:hover {
    background-color: #f8f9fa;
    color: #008abd;
}

.navbar-nav .dropdown-item:hover i {
    color: #008abd;
}

.navbar-nav .dropdown-item i {
    font-size: 14px;
    margin-right: 8px;
    color: #6c757d;
    width: 16px;
    text-align: center;
}

.navbar-toggler {
    padding: 0.5rem;
    border: 1px solid rgba(0,0,0,0.1);
}

.navbar-toggler:focus {
    box-shadow: none;
}

@media (max-width: 991.98px) {
    .navbar-nav .nav-link {
        padding: 0.8rem 1rem;
        border-bottom: 1px solid rgba(0,0,0,0.05);
    }
    .navbar-nav .nav-link:last-child {
        border-bottom: none;
    }
    .navbar-nav .dropdown-menu {
        border: none;
        box-shadow: none;
        padding-left: 2rem;
    }
}