@font-face {
  font-family: 'Inter', sans-serif;
  src: url('../cms/fonts/inter/Inter-Regular.ttf');
  src: local('Inter', sans-serif), url('../cms/fonts/inter/Inter-Regular.ttf') format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Inter', sans-serif;
  src: url('../cms/fonts/inter/Inter-Medium.ttf');
  src: local('Inter', sans-serif), url('../cms/fonts/inter/Inter-Regular.ttf') format("truetype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Inter', sans-serif;
  src: url('../cms/fonts/inter/Inter-SemiBold.ttf');
  src: local('Inter', sans-serif), url('../cms/fonts/inter/Inter-SemiBold.ttf') format("truetype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Inter', sans-serif;
  src: url('../cms/fonts/inter/Inter-Bold.ttf');
  src: local('Inter', sans-serif), url('../cms/fonts/inter/Inter-Bold.ttf') format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Inter', sans-serif;
  src: url('../cms/fonts/inter/Inter-ExtraBold.ttf');
  src: local('Inter', sans-serif), url('../cms/fonts/inter/Inter-ExtraBold.ttf') format("truetype");
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: 'Inter', sans-serif;
  src: url('../cms/fonts/inter/Inter-Black.ttf');
  src: local('Inter', sans-serif), url('../cms/fonts/inter/Inter-Black.ttf') format("truetype");
  font-weight: 900;
  font-display: swap;
}
.ft-reg {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
}
.ft-med {
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
}
.ft-semibold {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
}
.ft-bold {
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
}
.ft-ex-bold {
    font-family: 'Inter', sans-serif !important;
    font-weight: 800 !important;
}

html {
    font-size: 0.9375rem;
}

body {
  font-family: 'Inter', sans-serif !important;
  font-weight: 400;
  line-height: 1.8;
  font-size: 0.9375rem;
  color: #172B4D;
  background-color: #F6F8FA;
}
h1, h2, h3, h4, h5, h6, a, label, span, p, div, small {
  font-family: 'Inter', sans-serif !important;
  font-weight: 400;
}

    /* New Feedback styles */
    .cc-blk h3 {
      font-size: 22px;
      line-height: 34px;
      font-weight: 600;
      padding: 0 120px;
    }
    .md-label {
      width: 87%;
      display: inline-block;
      white-space: pre-wrap;
      overflow: hidden;
      text-overflow: ellipsis;
      position: relative;
      top: 2px;
  }
    .mf__store-header {
      background-color: #fff;
      border-radius: 8px;
      padding: 16px 24px;
      display: flex;
      align-items: center;
      flex-direction: row;
      margin: 0 0 20px 0;
    }
    .mf__store-left img {
      width: 100%;
  }
  .star-rating {
    font-size: 14px;
  }
  .multistar-blk .star-rating {
    margin: 4px 0 0 0;
  }
  .completed-img {
    width: 246px;
    margin: 0 auto;
  }
  .get-started {
    background: #fff;
    width: 750px;
    border-radius: 8px;
    margin: 0px auto 40px;
    text-align: center;
    padding: 40px 32px;
  }
  .get-started .store-location {
    font-size: 14px;
    margin: 0;
  }
  .get-started .store-name {
    margin-bottom: 5px;
  }
  .get-started .mf__store-left {
    max-width: 54px;
    height: 54px;
    width: 54px;
    margin: 0 auto;
  }
  .gs-img {
    width: 246px;
    margin: 50px auto 0;
  }
  .get-started button {
    min-width: 200px;
  }
  .get-started p {
    font-size: 18px;
    line-height: 28px;
    margin: 20px 0 15px 0;
  }
  .p-b-32 {
      padding-bottom: 32px;
  }
  .cc-blk {
    background-color: #fff;
    height: auto !important;
    border-radius: 8px;
    padding: 32px 0 !important;
  }
  .mf__store-left {
      max-width: 54px;
      height: 54px;
      width: 54px;
      flex: 0 0 calc(100% - 54px);
  }
    .mf__store-right {
        padding-left: 15px;
    }
    /* Number Rating */
    .br-widget > a {
      color: #fff !important;
      transition: all 500ms ease-in-out;
  }
    .br-widget > a:nth-child(1) {
      background-color: #BE0124;
    }
    .br-widget > a:nth-child(2) {
      background-color: #D40128;
    }
    .br-widget > a:nth-child(3) {
      background-color: #EA0B0B;
    }
    .br-widget > a:nth-child(4) {
      background-color: #F03706;
    }
    .br-widget > a:nth-child(5) {
      background-color: #F97502;
    }
    .br-widget > a:nth-child(6) {
      background-color: #FBB102;
    }
    .br-widget > a:nth-child(7) {
      background-color: #F6DD02;
    }
    .br-widget > a:nth-child(8) {
      background-color: #CCDE0E;
    }
    .br-widget > a:nth-child(9) {
      background-color: #8AD523;
    }
    .br-widget > a:nth-child(10) {
      background-color: #45BC3B;
    }
    .br-widget > a:nth-child(11) {
      background-color: #12AD49;
    }
    .num__rating-label {
      width: 702px;
      margin: 4px auto 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 86px;
      font-size: 16px;
      color: #6B778C;
  }
    /* End Number Rating */
    /* Radio buttons */
    .inputGroupRadio {
      background-color: #fff;
      display: block;
      margin: 0;
      position: relative;
    }
    .inputGroupRadio label {
      padding: 12px 12px;
      width: 100%;
      display: block;
      text-align: left;
      color: #172B4D;
      cursor: pointer;
      position: relative;
      z-index: 2;
      /* transition: color 200ms ease-in; */
      overflow: hidden;
      border-radius: 4px;
      border: 1px solid #B3BAC5;
      font-size: 16px;
      margin: 0;
      line-height: 18px;
  }
    .inputGroupRadio label:before {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      content: "";
      background-color: #fff;
      position: absolute;
      left: 50%;
      top: 50%;
      /* transform: translate(-50%, -50%) scale3d(1, 1, 1);
      transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); */
      opacity: 0;
      z-index: -1;
    }
    .inputGroupRadio label:after {
      width: 20px;
      height: 20px;
      content: "";
      border: 2px solid #C1C7D0;
      background-color: #fff;
      /* background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E "); */
      /* background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20fill%3D%22none%22%20version%3D%221.1%22%20width%3D%2210%22%20height%3D%2210%22%20viewBox%3D%220%200%2010%2010%22%3E%3Cg%3E%3Cellipse%20cx%3D%225%22%20cy%3D%225%22%20rx%3D%225%22%20ry%3D%225%22%20fill%3D%22%230353CC%22%20fill-opacity%3D%221%22/%3E%3C/g%3E%3C/svg%3E"); */
      background-repeat: no-repeat;
      background-position: 3px 3px;
      border-radius: 50%;
      z-index: 2;
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
      /* transition: all 200ms ease-in; */
    }
    .inputGroupRadio input:checked ~ label {
      color: #172B4D;
      border-color: #0253CC;
    }
    .inputGroupRadio input:checked ~ label:before {
      /* transform: translate(-50%, -50%) scale3d(56, 56, 1); */
      opacity: 1;
    }
    .inputGroupRadio input:checked ~ label:after {
      /* background-color: #54E0C7;
      border-color: #54E0C7; */
      background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20fill%3D%22none%22%20version%3D%221.1%22%20width%3D%2210%22%20height%3D%2210%22%20viewBox%3D%220%200%2010%2010%22%3E%3Cg%3E%3Cellipse%20cx%3D%225%22%20cy%3D%225%22%20rx%3D%225%22%20ry%3D%225%22%20fill%3D%22%230353CC%22%20fill-opacity%3D%221%22/%3E%3C/g%3E%3C/svg%3E");
      border-color: #0253CC;
    }
    
    .inputGroupRadio input {
      width: 32px;
      height: 32px;
      order: 1;
      z-index: 2;
      position: absolute;
      right: 30px;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
      visibility: hidden;
    }      
    /* End radio*/

    /* star Radio buttons */
    .inputGroupRadioStar {
      background-color: #fff;
      display: block;
      margin: 0;
      position: relative;
    }
    .inputGroupRadioStar label {
      padding: 12px 12px;
      width: 100%;
      display: block;
      text-align: left;
      color: #172B4D;
      cursor: pointer;
      position: relative;
      z-index: 2;
      overflow: hidden;
      font-size: 16px;
      margin: 0;
      line-height: 18px;
      text-align: center;
    }
    .inputGroupRadioStar label:before {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      content: "";
      background-color: #fff;
      position: absolute;
      left: 50%;
      top: 50%;
      opacity: 0;
      z-index: -1;
    }
    .inputGroupRadioStar input:checked ~ label {
      cursor: pointer;
      transform: scale(1.5);
      padding: 0 10px;
      transition: all 500ms ease-in-out;
    }
    
    .inputGroupRadioStar input {
      width: 32px;
      height: 32px;
      order: 1;
      z-index: 2;
      position: absolute;
      right: 30px;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
      visibility: hidden;
    }      
    .multistar-blk {
      display: flex;
      align-items: center;
      flex-direction: row;
      justify-content: center;
      gap: 30px;
  }
  .quesMiddle .mq-ques {
    font-size: 20px !important;
    margin: 0 0 12px 0;
  }
    /* End star radio*/


    /* checkbox buttons */
    .inputGroupCheckbox {
      background-color: #fff;
      display: block;
      margin: 0;
      position: relative;
    }
    .inputGroupCheckbox label {
      padding: 12px 12px;
      width: 100%;
      display: block;
      text-align: left;
      color: #172B4D;
      cursor: pointer;
      position: relative;
      z-index: 2;
      /* transition: color 200ms ease-in; */
      overflow: hidden;
      border-radius: 4px;
      border: 1px solid #B3BAC5;
      font-size: 16px;
      margin: 0;
      line-height: 18px;
  }
    .inputGroupCheckbox label:before {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      content: "";
      background-color: #fff;
      position: absolute;
      left: 50%;
      top: 50%;
      /* transform: translate(-50%, -50%) scale3d(1, 1, 1);
      transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); */
      opacity: 0;
      z-index: -1;
    }
    .inputGroupCheckbox label:after {
      width: 20px;
      height: 20px;
      content: "";
      border: 2px solid #C1C7D0;
      background-color: #fff;
      /* background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E "); */
      /* background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20fill%3D%22none%22%20version%3D%221.1%22%20width%3D%2210%22%20height%3D%2210%22%20viewBox%3D%220%200%2010%2010%22%3E%3Cg%3E%3Cellipse%20cx%3D%225%22%20cy%3D%225%22%20rx%3D%225%22%20ry%3D%225%22%20fill%3D%22%230353CC%22%20fill-opacity%3D%221%22/%3E%3C/g%3E%3C/svg%3E"); */
      background-repeat: no-repeat;
      background-position: 3px 4px;
      border-radius: 4px;
      z-index: 2;
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
      /* transition: all 200ms ease-in; */
    }
    .inputGroupCheckbox input:checked ~ label {
      color: #172B4D;
      border-color: #0253CC;
    }
    .inputGroupCheckbox input:checked ~ label:before {
      /* transform: translate(-50%, -50%) scale3d(56, 56, 1); */
      opacity: 1;
    }
    .inputGroupCheckbox input:checked ~ label:after {
      /* background-color: #54E0C7;
      border-color: #54E0C7; */
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill='none' version='1.1' width='10.00000286102295' height='7.500207424163818' viewBox='0 0 10.00000286102295 7.500207424163818'%3E%3Cg%3E%3Cpath d='M3.21438,7.50021C2.99623,7.50018,2.7868,7.41461,2.63105,7.26187C2.63105,7.26187,0.250213,4.92854,0.250213,4.92854C0.0922985,4.77383,0.00230986,4.56273,0.0000437955,4.34167C-0.00107825,4.23221,0.0193699,4.12361,0.0602206,4.02205C0.101071,3.9205,0.161525,3.82798,0.238129,3.74979C0.314734,3.6716,0.405989,3.60926,0.506685,3.56634C0.607381,3.52341,0.715545,3.50074,0.825002,3.49962C1.04606,3.49736,1.25897,3.583,1.41688,3.73771C1.41688,3.73771,3.21438,5.50021,3.21438,5.50021C3.21438,5.50021,8.58271,0.23854,8.58271,0.23854C8.66085,0.161881,8.75332,0.101362,8.85485,0.0604401C8.95637,0.0195179,9.06496,-0.0010067,9.17442,0.0000379635C9.28387,0.00108262,9.39205,0.023676,9.49278,0.0665285C9.5935,0.109381,9.6848,0.171654,9.76146,0.249791C9.83812,0.327927,9.89864,0.420397,9.93956,0.521922C9.98048,0.623447,10.001,0.732038,9.99996,0.841495C9.99892,0.950953,9.97633,1.05913,9.93347,1.15986C9.89062,1.26058,9.82835,1.35188,9.75021,1.42854C9.75021,1.42854,3.79771,7.26187,3.79771,7.26187C3.64196,7.41461,3.43252,7.50018,3.21438,7.50021Z' fill='%23FFFFFF' fill-opacity='1'/%3E%3C/g%3E%3C/svg%3E");
      border-color: #0253CC;
      background-color: #0253CC;
    }
    
    .inputGroupCheckbox input {
      width: 32px;
      height: 32px;
      order: 1;
      z-index: 2;
      position: absolute;
      right: 30px;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
      visibility: hidden;
    }      
    /* End checkbox buttons */


    /* End New Feedback Styles */
      .store_logo_blk{
          padding:0 0 16px 0 !important;
      }
      .height-set{
          height: 50px !important;
      }
      .store_logo_blk img {
          max-width: 50px;
          max-height: 54px;
      }
    .modal-header {
      padding: 15px;
      border-bottom: 1px solid #e5e5e5;
      background: #fff;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      position: absolute !important;
    }
    .modal-title {
      font-size: 24px;
      text-align: center;
      color: #172B4D;
      margin: 0;
      line-height: 1.5;
      font-weight: 600;
    }
    #confiramtion .feedback-ques {
          font-size: 17px;
      }
    .modal-content{
      border-radius: 5px;
    }
    .modal-body{
      position: relative;
      padding: 32px;
      margin-top: 60px;
    }
    .modal-footer {
      background: #fff;
      text-align: center;
      border-top: 1px solid #e5e5e5;
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      display: flex;
      padding: 10px 20px;
      justify-content: end;
    }
    .btn {
      line-height: 34px;
      padding: 0.25rem 1rem;
      min-width: 120px;
      min-height: 44px;
      border-radius: 3px;
      font-size: 17px;
      font-weight: 600;
    }
    .btn, .btn.btn-primary, .site-header .dropdown.open .btn.dropdown-toggle {
      background: #0353CC;
      border-color: #0353CC;
      color: #fff;
  }
  .btn:active:focus,.btn.btn-primary-outline:active,.btn.btn-primary-outline:focus:hover, .btn.btn-primary-outline:hover {
      background: #2663D1;
      border-color: #2663D1;
      color: #fff;
  }
  .btn.btn-danger-outline:hover, .btn.btn-danger-outline:focus {
      background: #C9372C;
      border-color: #C9372C;
      color: #fff !important; 
  }
  .btn.btn-danger-outline:hover .fa-trash {
      color: #fff !important; 
  }
  .btn.btn-default:active:focus{
      background: #bec6cc;
  }
  .btn:hover,.btn:focus,.btn.btn-primary:hover, .btn.btn-primary:focus {
      background: #2663D1;
      border-color: #2663D1;
      color: #fff;
  }
  .btn.active{
      background: #cce5ff;
      border-color: #b8daff;
  }
  .btn.active:hover{
      background: #2663D1;
      border-color: #2663D1;
  }
  .btn.btn-default {
      background: transparent;
      border-color: transparent;
      color: #595d6e;
  }
  .btn.btn-default:hover, .btn.btn-default:focus {
      color: #595d6e;
      border-color: #e2e5ec;
      background-color: #f4f5f8;
  }
  .btn.btn-default-line {
      background: transparent;
      border-color: #e2e5ec;
      color: #595d6e;
  }
  .btn.btn-default-line:hover, .btn.btn-default-line:focus {
      color: #595d6e;
      border-color: #e2e5ec;
      background-color: #f4f5f8;
  }
  .btn.btn-danger {
      background-color: #C9372C;
      border-color: #C9372C;
      color: #fff;
  }
  .btn.btn-danger:hover, .btn.btn-danger:focus {
      background-color: #AE2E24;
      border-color: #AE2E24;
      color: #fff;
  }
  .btn.btn-primary-outline {
      background: #fff;
      border: 1px solid #0353CC;
      color: #0353CC;
  }
  .btn.btn-danger-outline {
      background: #fff;
      border: 1px solid #C9372C;
      color: #C9372C;
  }
  .btn.btn-warning {
      background-color: #fff48f;
      border-color: #ffeeba;
      color: #3a3217;
  }
  .btn.btn-warning:hover, .btn.btn-warning:focus {
      background-color: #fbe83f;
      border-color: #ffeeba;
      color: #475059;
      outline: none;
  }
  .btn.btn-transaprent {
      background-color: transparent;
      border-color: transparent;
      color: #42526E;
  
  }
  .btn.btn-transaprent:hover, .btn.btn-transaprent:focus {
      background-color: transparent;
      border-color: transparent;
      color: #42526E;
  }
    .mio__btn {
      text-align: center;
      font-weight: 600;
      border-radius: 3px;
      display: inline-block;
      text-align: center;
      vertical-align: middle;
      cursor: pointer;
      user-select: none;
      min-width: 120px;
      min-height: 44px;
      border: none;
      display: flex;
      justify-content:  center;
      align-items: center;
      text-decoration: none !important;
      }
      .mio__btn-s {
          font-size: 14px;
          line-height: 19px;
          border: none;
          padding: 6px 12px;
      }
      /* Primary */
      .mio__btn-primary {
          background: #0353CC !important;
          color: #ffffff !important;
      }
      
      .mio__btn-primary:hover {
          background: #3762CA !important;
      }
      
      .mio__btn-primary:focus {
          background: #3762CA !important;
      }
         
      /* Default */
      .mio__btn-default {
          background: transparent !important;
          color: #172B4D !important;
      }
      
      .mio__btn-default:hover {
          background: rgba(9, 30, 66, 0.08) !important;
      }
      
      .mio__btn-default:focus {
          background: rgba(179, 212, 255, 0.6) !important;
          color: #0052CC !important;
      }
                   
    .modal-footer .mio__btn+.mio__btn, .modal-footer .mio__btn{
      margin-left: 15px !important;
    }
    .singleselect-feedback {
      padding: 0 15px;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(45%, 1fr));
      gap: 16px 24px;
    }
    /* .singleselect-feedback input[type="radio"] {
      opacity: 0;
      position: fixed;
      width: 0;
    } */
    /* .singleselect-feedback label {
        display: flex;
        background-color: #E2E2E2;
        padding: 8px 20px;
        font-size: 16px;
        border-radius: 5px;
        cursor: pointer;
        justify-content: center;
    }
    .singleselect-feedback label:hover {
      background-color: #FFB838;
    }
    .singleselect-feedback input[type="radio"]:checked + label {
      background-color: #FFB838;
    } */

   .multiselect-feedback{
      padding: 0 15px;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(45%, 1fr));
      gap: 16px 24px;
    }
    .multiselect-feedback .new_checkbox{
        background-color: #E2E2E2;
        font-size: 14px;
        border-radius: 5px;
        cursor: pointer;
        color: #172B4D;
        display: flex;
        align-items: center;
        padding-left: 8px;
    }
    .multiselect-feedback .new_checkbox label{
        padding: 16px 20px 16px 30px;
        display: flex;
        cursor: pointer;
        margin: 0 !important;
        width: 100%;
    }
    .multiselect-feedback .new_checkbox label::selection{
      background: transparent !important;
      color: #172B4D !important;
    }
    .multiselect-feedback .new_checkbox{
        position: relative;
    }
    .multiselect-feedback .new_checkbox input[type="checkbox"] {
        display: none;
    }
    .multiselect-feedback .new_checkbox label:before{
        width: 16px;
        height: 16px;
        background: #fff;
        border: 1px solid #000;
        content: '';
        display: block;
        position: absolute;
        left: 10px;
        border-radius: 4px;
    }
    .multiselect-feedback .new_checkbox input[type="checkbox"]:checked + label:before{
        background: #000;
    }
    .multiselect-feedback .new_checkbox input[type="checkbox"]:checked + label:after {
        color: #FFB838;
        background: #000;
        border-radius: 4px;
    }
    .multiselect-feedback .new_checkbox input[type="checkbox"]:checked+label:after {
        content: "✔" !important;
        display: inline-block;
        width: 16px;
        height: 16px;
        font-weight: 400 !important;
        vertical-align: middle;
        position: absolute;
        font-size: 12px;
        left: 11px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 1px;
    }

    .rating {
      --transition-duration: 0.75s;
      display: flex;
      font-size: 2rem;
      flex-direction: row-reverse;
      justify-content: center;
      gap: 20px;
    }

    .rating__star {
      display: none;
    }
    .rating__star-label svg {
      width: 60px;
    }
    .rating__star-label {
      position: relative;
      transition: all var(--transition-duration);
      cursor: pointer;
      margin: 0;
      line-height: 1.4;
      width: 60px;
      height: 60px;
      opacity: 0.4;
      filter: grayscale(100%);
    }

    .rating__star:checked ~ .rating__star-label,
    .rating__star:checked ~ .rating__star-label ~ .rating__star-label {
      opacity: 1;
      transition: opacity var(--transition-duration);
      cursor: pointer;
      transition: all 500ms ease-in-out;
      filter: grayscale(0%);
      opacity: 1;
    }
    .br-theme-bars-square .br-widget{
      height: 100%;
      white-space: nowrap;
      margin: 0 auto;
      display: flex;
      padding: 8px 0;
      justify-content: center;
    }
    .reset-blk {
      text-align: right;
  }
    .reset-blk a {
      font-size: 14px;
      color: #0065FF;
      font-style: normal;
      font-weight: 400;
      line-height: 22.857px;
  }
    /* loading btn */
    @keyframes stretch {
      0% {
        transform: scale(0.5);
        background-color: #fff;
      }
      50% {
        background-color: #fff;
      }
      100% {
        transform: scale(1);
        background-color: #fff;
      }
    }

      .btn.btn--loading {
        font-size: 0;
      }
      .btn.btn--loading span {
        display: flex;
      }
      .btn.btn--loading span b {
        animation-direction: alternate;
        animation-duration: .5s;
        animation-fill-mode: none;
        animation-iteration-count: infinite;
        animation-name: stretch;
        animation-play-state: running;
        animation-timing-function: ease-out;
        border-radius: 100%;
        display: block;
        height: 10px;
        margin: 0 1px;
        width: 10px;
        animation-delay: .1s;
        margin: 0 5px;
      }
      .btn.btn--loading span b:first-child {
        animation-delay: 0s;
        margin: 0;
      }
      .btn.btn--loading span b:last-child {
        animation-delay: .2s;
        margin: 0;
      }
      .btn b {
        font-weight: normal;
      }
      .btn span {
        display: none;
      }
      .SubmitBtn.btn--loading {
          font-size: 0;
          top: -5px;
      }
    /* Loading btn */
    .feedbackHeight{
      width: 750px;
      margin: auto;
      padding-top: 40px;
    }
    .carousel-caption {
      color: #202124;
    }
    .radio label::before,.radio label::after {
      margin-left: 0;
      top: 7px;
    }
    .wel-text {
        line-height: 26px;
        font-size: 16px;
    }
    .mob-blk {
        margin: 0;
    }
    .ths-blk {
        margin: 26px 0 0 0;
    }
    .store-name {
      color: #172B4D;
      font-size: 18px;
      font-weight: 600;
      line-height: 22px;
      margin-bottom: 8px;
    }
    .store-location{
      color: #6B778C;
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
      margin: 0;
    }
    .quesMiddle .feedback-ques{
      color: #172B4D !important;
      font-size: 22px !important;
      font-style: normal !important;
      font-weight: 600;
      line-height: 30px;
      margin-bottom: 24px;
    }
    .m-b-15 {
      margin-bottom: 15px !important;
    }
    .thanks_feedback{
      color: #172B4D;
      font-size: 22px;
      font-weight: 600;
      line-height: 34px; 
      padding: 30px 0 0 0;
    }
    .thanks_feedback-desc{
      margin: 15px 0 24px 0;
    }
    .completedButton{
      border-radius: 20px;
      background: #FFB838; 
      padding: 10px 40px;   
      position: relative;
      border: none;
      margin-top: 20px;
    }
    .completedButton a{
      color: #000 !important;
      font-size: 14px;
      font-weight: 600;
      line-height: 20px;
      text-decoration: none;
    }
    .sub_heading {
      text-align: initial;
      color: var(--body-text-heading, #172B4D);
      font-size: 20px;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
    }
    .feedback_note{
      margin-top: 8px;
      text-align: initial;
      font-family: Segoe UI;
      font-size: 16px;
      font-style: normal;
      font-weight: 400;
      line-height: 22px;
    }

    .input-group {
      position: relative;
      display: table;
      border-collapse: separate;
      width: 300px;
      margin: 0 auto 32px;
      border-radius: 3px;
      border: 1px solid #B3BAC5;
  }
    .input-group-addon {
      padding: 6px 12px;
      font-size: 14px;
      font-weight: 400;
      line-height: 1;
      color: #172B4D;
      text-align: center;
      background-color: #fff;
      border-radius: 20px 4px 4px 20px;
      border: none;
      border-right : 1px solid #B3BAC5 !important;
    }
    .input-group .form-control{
      border: none;
      border-radius: 4px;
      box-shadow: none;
    }
    .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus {
          outline: thin dotted;
          outline: none;
          outline-offset: 0px;
      }
    
    .errormsg {
      display: flex;
      align-items: flex-start;
      justify-content: center;
      gap: 4px;
      background-color: #FFEBE6;
      border-radius: 4px;
      padding: 8px 8px;
  }
  .error-left {
      position: relative;
      top: 1px;
  }
  .error-right {
    font-size: 14px;
  }
    .SubmitBtn a{
      color: #fff !important;
      text-decoration: none;
      font-weight: 600;
    }
    .btnSur{
      margin: 17px auto 24px;
      display: flex;
      justify-content: center;
    }
    
    .radio label::after{
      top: 10px;
      background: #4285f4;
    }
    .commonBtn:hover,.commonBtn:active,.commonBtn:focus{
      color: #fff;
      outline: none;
    }
    .header,.top-bar,footer{
      display: none;
    }
    .surveyText{
      float: left;
      margin: 0;
    }      
    .side-body{
      margin: 0;
      padding: 0;
    }
    .br-wrapper.br-theme-bars-square{
      width: 100%;
      margin: 0 auto;
      overflow: hidden;
    } 
    .br-theme-bars-square .br-widget a{
      border: none;
      margin: 0;
      width: 48px;
      height: 48px;
      line-height: 48px;
      border-radius: 0;
    }
    /* .br-theme-bars-square .br-widget a:first-child{
      border-left:1px solid #ccc;
    } */
    .br-widget > a:hover, .br-current {
      transform: scale(1.3);
      transition: all 500ms ease-in-out;
   }
    /* .br-theme-bars-square .br-widget a.br-active, .br-theme-bars-square .br-widget a.br-selected{
      border:1px solid #ff503f;
      border-left: none;
    }
    .br-theme-bars-square .br-widget a.br-active:first-child, .br-theme-bars-square .br-widget a.br-selected:first-child{
      border-left: 1px solid #ff503f;
    } */
    .br-theme-bars-square .br-widget a.br-active, .br-theme-bars-square .br-widget a.br-selected {
      border: none !important;
      color: #fff;
  }
    .carousel-indicators{
      display: none;
    }
    .carousel-caption{
      height: 100%;
      display: block;
      position: static;
      width: 100%;
      padding: 0;
      margin: 24px 0 0 0;
    }
    .quesMiddle{
      display: block;
      vertical-align: middle;
      max-width: 850px;
      padding: 24px 24px 32px 24px;
      background-color: #fff;
      border-radius: 8px;
    }
    .quesMiddle textarea{
      width: 600px;
      border-radius: 4px;
      margin: 0;
    }
    .starRatingjs{
      font-size: 40px;
      color: #ffc926;
    }
    .starRatingjs i{
      cursor: pointer;
    }
    textarea {
      color: #172B4D;
      border-color: #B3BAC5;
      width: 100% !important;
  }
  .form-control {
      line-height: 26px;
      height: 44px;
      border-radius: 4px;
      border: 1px solid #B3BAC5;
      box-shadow: none;
      font-size: 1rem;
      color: #172B4D !important;
      background: #fff;
  }
  .form-control:focus {
      border-color: #c3c3c3;
      outline: 0;
      -webkit-box-shadow: none;
      box-shadow: none;
  }
  .feedback_note {
      text-align: center !important;
  }
  .mf__mobile-number {
      width: 300px;
      margin: 0 auto 32px;
  }
    .surveyBtns{
      position: absolute;
      top: 15px;
      right: 15px;
    }
    .surthumb i{
      font-size: 60px;
    }
    .surveyNext,.surveyPrev{
      top: calc(50% - 33px);
      position: absolute;
      right: 15px;
      font-size: 40px;      
    }
    .surveyPrev{
      right: initial;
      left: 15px;
    }
    .multiAnswer .checkbox label::before,.multiAnswer .checkbox label::after{
      margin-left: 0;
      text-align: center;
    }
    .surveyOuter,.invalidSurvey{
      height: 100%;
    }
    .invalidSurvey h3{
      margin: 0;
      /*padding-top: 200px;*/
      text-align: center;
      color: #202124;
    }
    .invalidSurvey h3.invalidlink{
      position: relative;
      top: 50%;
      transform: translateY(-50%);
    }
    .returnFeed{
      position: absolute;
      left: calc(50% - 43px);
      bottom: 15px;
    }
    .mob {
        float: inherit;
    }
    .googleReview-feed{
      display: flex;
      gap: 30px;
      justify-content: center;
    }
    .googleReview-feed .btn{
        width: 30% !important;
    }
    .sb-ani {
      position: relative;
    }
    .btn-ring {
      padding-right: 40px;
      min-width: 140px;
    }
    .btn-ring:after {
      content: "";
      display: block;
      width: 25px;
      height: 25px;
      margin: 8px;
      border-radius: 50%;
      border: 3px solid #fff;
      border-color: #fff transparent #fff transparent;
      animation: ring 1.2s linear infinite;
      top: 0;
      right: 8px;
      position: absolute;
    }
    @keyframes ring {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    .multi-star-blk {
      background-color: #E6EEFA;
      padding: 24px 16px;
      border-radius: 4px;
      margin-top: 40px;
    }
    @media(max-width: 1199px){
      .quesMiddle h3{
        font-size: 20px !important;
      }
    }
    @media screen and (min-width: 767px) and (max-width: 991px) {
      .feedbackHeight {
          width: 700px;
          margin: auto;
          padding-top: 40px;
      }
    }
    @media (max-width:767px){
      .cc-blk h3 {
        padding: 0;
      }
      .get-started {
        width: calc(100% - 32px);
        margin: 32px auto 40px;
        padding: 32px;
      }
      .gs-img {
        width: 150px;
        margin: 24px auto 0;
      }
      .gs-img img {
        width: 100%;
      }
      .cc-blk {
        padding: 32px !important;
        width: calc(100% - 32px) !important;
        margin: 40px auto 0 !important;
      }
      .multistar-blk svg {
        width: 30px;
      }
      .multistar-blk {
        gap: 18px;
      }
      .inputGroupRadioStar label {
        padding: 6px 8px;
      }
      .multistar-blk .star-rating {
        font-size: 10px;
      }
      .quesMiddle .feedback-ques {
        font-size: 20px !important;
        line-height: 27px;
    }
      .num__rating-label {
          width: 100%;
          font-size: 13px;
          padding: 0;
      }
      .rating__star-label svg {
          width: 45px;
      }
      .rating__star-label {
          height: 60px;
          padding: 0 5px;
      }
      .rating{
          gap: 5px;
      }
      .carousel-caption {
          width: 100%;
          margin: 24px 0 0 0;
      }
      .reset-blk {
          text-align: right;
          padding: 0 24px;
      }
      .feedbackHeight {
          padding-top: 0;
      }
      .mf__store-header {
          border-radius: 0;
          align-items: flex-start;
      }
      .carousel-caption {
          width: 100%;
          padding: 0;
      }
      .quesMiddle {
          padding: 24px 16px 32px 16px;
      }
      .surveyOuter, .invalidSurvey {
        padding: 0 24px;
      }
      .multiselect-feedback, .singleselect-feedback {
          padding: 0;
      }
      .quesMiddle h3 {
          font-size: 17px !important;
          line-height: 27px;
      }
      .store_logo_blk {
          padding: 50px 0 10px 0;
      }
      .surveyText {
          width: calc(100% - 115px);
      }
      .multiAnswer li span{
        width: 100%;
      }
      .netpromo,.br-wrapper.br-theme-bars-square{
        width: 100%;
      } 
      .br-theme-bars-square .br-widget a{
        width: 9%;
      }
      .quesMiddle textarea{
        width: 100%;
      }
    }
    @media (max-width:479px){
      .starRatingjs{
        font-size: 30px;
      }
      .br-theme-bars-square .br-widget a{
        height: 30px;
        line-height: 30px;
      }
    }
    @media (max-width:360px){
      .br-theme-bars-square .br-widget a {
          font-size: 10px;
      }
      .rating__star-label svg {
          width: 24px;
      }
      .rating__star:checked ~ .rating__star-label, .rating__star:checked ~ .rating__star-label ~ .rating__star-label {
          transform: scale(1.3);
          padding: 0 5px;
      }
      .googleReview-feed .btn {
          min-width: 90px;
      }
      .input-group {
          width: auto;
      }
      .mf__mobile-number {
          width: auto;
          margin: 0 auto 32px;
      }
      .star-rating {
        font-size: 8px;
      }
      .rating {
        gap: 5px;
      }
    }
    @media (max-width:479px){
      .multiselect-feedback,.singleselect-feedback{
        grid-template-columns: repeat(1, 1fr); 
      }
      .reset-blk{
        right: 25px;
      }
      .feedbackHeight{
        width: 100%;
      }
      .googleReview-feed .btn{
        width: auto !important;
      }
      .height-set{
          height: auto !important;
      }
    }
    
    
    * {
    box-sizing: border-box;
  }
  
  @keyframes stretch {
    0% {
      transform: scale(0.5);
      background-color: #fff;
    }
    50% {
      background-color: #fff;
    }
    100% {
      transform: scale(1);
      background-color: #fff;
    }
  }
  .btn--loading span {
      display: flex;
      justify-content: center;
  }
  
  .btn--loading span b {
    animation-direction: alternate;
    animation-duration: .5s;
    animation-fill-mode: none;
    animation-iteration-count: infinite;
    animation-name: stretch;
    animation-play-state: running;
    animation-timing-function: ease-out;
    border-radius: 100%;
    display: block;
    height: 10px;
    margin: 0 1px;
    width: 10px;
    animation-delay: .1s;
    margin: 0 5px;
  }
  .btn--loading span b:first-child {
    animation-delay: 0s;
    margin: 0;
  }
  .btn--loading span b:last-child {
    animation-delay: .2s;
    margin: 0;
  }
  .progress-container {
      width: 70%;
      margin: 0 auto;
  }
  .progress {
    width: 100%;
    height: 5px;
  }
  
  .progress-wrap {
    background: #ffc823;
    margin: 20px 0;
    overflow: hidden;
    position: relative;
  }
  .progress-wrap .progress-bar {
    background: #fff;
    left: 0;
    position: absolute;
    top: 0;
  }
  .m-0 {
      margin: 0 !important;
  }    
  
  
  /* WOOOW */
  .button_anim .shape  {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .button_anim .button_anim-line {
    content: "";
    position: absolute;
    margin: auto;
    height: 8px;
    width: 2px;
    background: #000;
    opacity: 0;
  }
  /* .button_anim .button_anim-line:nth-of-type(1) {
    top: -20px;
    left: 0;
    right: 0;
  }
  .button_anim .button_anim-line:nth-of-type(2) {
    bottom: -20px;
    left: 0;
    right: 0;
  } */
  .button_anim .button_anim-line:nth-of-type(1) {
    top: 0;
    bottom: 0;
    left: -5px;
  }
  .button_anim .button_anim-line:nth-of-type(2) {
    top: 0;
    bottom: 0;
    right: -5px;
  }
  .button_anim .button_anim-line:nth-of-type(3) {
    top: -10px;
    left: -80%;
    right: 0;
    transform: rotate(-30deg);
  }
  .button_anim .button_anim-line:nth-of-type(4) {
    top: -10px;
    left: 0;
    right: -80%;
    transform: rotate(30deg);
  }
  .button_anim .button_anim-line:nth-of-type(5) {
    bottom: -10px;
    right: 0;
    left: -80%;
    transform: rotate(30deg);
  }
  .button_anim .button_anim-line:nth-of-type(6) {
    bottom: -10px;
    left: 0;
    right: -80%;
    transform: rotate(-30deg);
  }
  /* let's animate this */
  @keyframes bounce {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
    100% {
      transform: scale(1);
    }
  }
  .button_anim.animate {
    animation: bounce 0.3s ease-out 1;
  }
  .button_anim.animate .button_anim-line:nth-of-type(1) {
    animation: anim3 0.4s ease-out 1;
  }
  .button_anim.animate .button_anim-line:nth-of-type(2) {
    animation: anim4 0.4s ease-out 1;
  }
  .button_anim.animate .button_anim-line:nth-of-type(3) {
    animation: anim5 0.4s ease-out 1;
  }
  .button_anim.animate .button_anim-line:nth-of-type(4) {
    animation: anim6 0.4s ease-out 1;
  }
  .button_anim.animate .button_anim-line:nth-of-type(5) {
    animation: anim7 0.4s ease-out 1;
  }
  .button_anim.animate .button_anim-line:nth-of-type(6) {
    animation: anim8 0.4s ease-out 1;
  }
  
  @keyframes anim3 {
    0% {
      transform: rotate(90deg) scaleX(0.5);
      opacity: 0;
    }
    50% {
      transform: rotate(90deg) translateY(10px) scaleX(1.4);
      opacity: 1;
    }
    100% {
      transform: rotate(90deg) translateY(20px) scaleX(0.5);
      opacity: 0;
    }
  }
  @keyframes anim4 {
    0% {
      transform: rotate(90deg) scaleX(0.5);
      opacity: 0;
    }
    50% {
      transform: rotate(90deg) translateY(-10px) scaleX(1.4);
      opacity: 1;
    }
    100% {
      transform: rotate(90deg) translateY(-20px) scaleX(0.5);
      opacity: 0;
    }
  }
  @keyframes anim5 {
    0% {
      transform: rotate(-30deg) scaleY(0.5);
      opacity: 0;
    }
    50% {
      transform: rotate(-30deg) translateY(-8px) scaleY(1.4);
      opacity: 1;
    }
    100% {
      transform: rotate(-30deg) translateY(-16px) scaleY(0.5);
      opacity: 0;
    }
  }
  @keyframes anim6 {
    0% {
      transform: rotate(30deg) scaleY(0.5);
      opacity: 0;
    }
    50% {
      transform: rotate(30deg) translateY(-8px) scaleY(1.4);
      opacity: 1;
    }
    100% {
      transform: rotate(30deg) translateY(-16px) scaleY(0.5);
      opacity: 0;
    }
  }
  @keyframes anim7 {
    0% {
      transform: rotate(30deg) scaleY(0.5);
      opacity: 0;
    }
    50% {
      transform: rotate(30deg) translateY(8px) scaleY(1.4);
      opacity: 1;
    }
    100% {
      transform: rotate(30deg) translateY(16px) scaleY(0.5);
      opacity: 0;
    }
  }
  @keyframes anim8 {
    0% {
      transform: rotate(-30deg) scaleY(0.5);
      opacity: 0;
    }
    50% {
      transform: rotate(-30deg) translateY(8px) scaleY(1.4);
      opacity: 1;
    }
    100% {
      transform: rotate(-30deg) translateY(16px) scaleY(0.5);
      opacity: 0;
    }
  }