@font-face {
  font-family: 'Bebas Neue';
  src: url('../fonts/BebasNeue-Regular.woff2') format('woff2'), url('../fonts/BebasNeue-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Bebas Neue Light';
  src: url('../fonts/bebasneue-light.woff2') format('woff2'), url('../fonts/bebasneue-light.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Helvetica Neue LT Std';
  src: url('../fonts/HelveticaNeueLTStd-Bd.woff2') format('woff2'), url('../fonts/HelveticaNeueLTStd-Bd.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Helvetica Neue LT Std';
  src: url('../fonts/HelveticaNeueLTStd-Lt.woff2') format('woff2'), url('../fonts/HelveticaNeueLTStd-Lt.woff') format('woff');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Helvetica Neue LT Std';
  src: url('../fonts/HelveticaNeueLTStd-Blk.woff2') format('woff2'), url('../fonts/HelveticaNeueLTStd-Blk.woff') format('woff');
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: 'Helvetica Neue LT Std';
  src: url('../fonts/HelveticaNeueLTStd-Md.woff2') format('woff2'), url('../fonts/HelveticaNeueLTStd-Md.woff') format('woff');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Helvetica Neue LT Std';
  src: url('../fonts/HelveticaNeueLTStd-Th.woff2') format('woff2'), url('../fonts/HelveticaNeueLTStd-Th.woff') format('woff');
  font-weight: 100;
  font-style: normal;
}

html {
  height: 100%;
  min-height: 100%;
}

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
  font-family: 'Helvetica Neue LT Std';
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
}

a:hover, a:focus{
  text-decoration: none !important;
}

.text-bold{
  font-weight: bold !important
}
.m-0{
  margin: 0 !important;
}

.mt-0{
  margin-top: 0 !important;
}
.pt-0{
  padding-top: 0 !important;
}

.pl-0{
  padding-left: 0 !important;
}

.pb-20{
  padding-bottom: 20px !important;
}

.mt-10 {
  margin-top: 10px;
}
.mt-15 {
  margin-top: 15px;
}

.mt-20 {
  margin-top: 20px;
}

.mt-30 {
  margin-top: 30px;
}

.mt-40 {
  margin-top: 40px;
}

.mt-50 {
  margin-top: 50px;
}

.mr-5 {
  margin-right: 5px;
}

.mr-0{
  margin-right: 0 !important;
}

.mr-10 {
  margin-right: 10px;
}

.mb-10{
  margin-bottom: 10px;
}

.mb-20{
  margin-bottom: 20px;
}

.ml-10 {
  margin-left: 10px;
}

.ml-20 {
  margin-left: 20px;
}

.p-0{
  padding: 0 !important;
}

.pt-0{
  padding-top: 0 !important;
}

.w-100{
  width: 100%;
}

.p-15{
  padding: 15px;
}
.dropdown-menu{
  border-radius: 0;
}

.popover{
  max-width: initial
}
.text-sm{
  font-size: 12px;
}
.w-break{
  word-break: break-all;
}

.form-control.error{
  color: #555;
}

.tab-content{
  padding: 20px;
}

::placeholder{
  font-style: normal;
}

/*login Start*/

.login-bg {
  background-image: url("../images/login-bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
}

.heading {
  color: #fff;
  font-size: 40px;
}

.sub-heading {
  font-family: "Bebas Neue Light";
  color: #333;
  font-size: 46px;
  margin-bottom: 40px;
}

.sm-heading {
  font-family: 'Helvetica Neue LT Std';
  font-size: 24px;
  font-weight: 300;
  color: #007AAC;
}

.login-wrapper {
  width: 600px;
  margin-left: 140px;
  padding-top: 40px;
}
.login-wrapper h1.heading {
  margin-bottom: 1.5rem;
    margin-top: 0;
}
.login-wrapper h2.sub-heading {
  margin-left: -18px;
}
/* .logo {
  margin-bottom: 10px;
} */

.content-txt {
  font-size: 20px;
    color: #fff;
    line-height: normal;
    letter-spacing: 2px;
    font-weight: 300;
    margin-bottom: 15px;
}

.login-box {
  background-color: #fff;
  border: solid 1px #707070;
  /* margin: 0 auto; */
  margin-bottom: 12px;
  min-height: 150px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
  padding: 30px;
  width: 480px;
}

.login-box .logo {
  text-align: center;
}

.login-box .form-group {
  margin-bottom: 20px;
}

.login-box .form-control {
  border: 0;
  border-bottom: solid 1px #0F70BC;
  box-shadow: none;
  border-radius: 0;
  padding-left: 0;
  color: #737373;
  font-size: 18px;
  font-weight: 300;
}

.login-box .links {
  color: #737373;
  font-size: 18px;
  font-weight: 300;
}

.login-box .links:hover {
  color: #0F70BC;
  text-decoration: none;
}

.btn-login {
  background-color: #53B09A;
  border: 0;
  color: #fff;
  padding: 10px 30px;
  margin-top: 10px;
}

.login-footer {
  background-color: #707070;
  color: #fff;
  padding: 10px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
}

.login-footer a {
  color: #fff;
  margin-left: 20px;
}

.login-footer a:hover {
  color: #000;
  text-decoration: none;
}
/*Login End*/

/*Modal Start*/

.modal-default{
  background: #fff !important;
  padding: 20px !important;
}
#wizard.modal-dialog .modal-body {
  height: calc(100vh - 134px);
}

#wizard.modal-dialog {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.content-scroll {
  height: 300px;
  overflow: auto;
}

.modal-content {
  background: linear-gradient(90deg, rgba(0, 121, 171, 0.1) 0%, rgba(86, 175, 155, 0.1) 100%);
  background-color: #EDF7F5;
  height: auto;
  min-height: 100%;
  border-radius: 0;
  padding: 20px 20px 20px 50px;
  position: relative;
}

.modal-content p {
  color: #606A70;
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 1px;
}

.modal-content .heading {
  font-size: 36px;
  color: #007AAC;
  margin-top: 20px;
  margin-bottom: 15px;
  letter-spacing: 3px;
}

.modal-content .close {
  opacity: 1;
}

.modal-header, .modal-footer {
  border: 0;
}

.btn-wrapper {
  text-align: center;
  margin: 0 auto;
  margin-top: 20px
}

.model-alignment{
  width: 400px;
  margin-top: 150px;
}

.btn-wrapper-btm {
  text-align: center;
  margin: 0 auto;
  position: absolute;
  bottom: 10px;
  width: 100%;
  padding: 20px 20px;
}

.btn {
  color: #fff;
  border-radius: 6px;
  font-size: 15px;
  padding: 6px 40px;
  font-weight: 300;
  letter-spacing: 1px;
}


.btn:focus {
  outline: none;
}

.btn-gray {
  background-color: #606A70 !important;
}

.btn-green {
  background-color: #53B09A !important;
}

.btn-red {
  background-color: #ff4040 !important;
}

.btn-blue {
  background-color: #007AAC !important;
}

.btn-gray-outline{
  background-color: transparent !important;
  border: solid 2px #999999;
  color: #999999;
  font-family: 'Helvetica Neue LT Std';
  font-weight: 400;
  padding: 4px 20px;
}

.btn-green-outline{
  background-color: transparent !important;
  border: solid 2px #53B09A;
  color: #53B09A;
  font-family: 'Helvetica Neue LT Std';
  font-weight: 400;
  padding: 4px 20px;
}

.btn-green-outline[disabled]{
  color: #CECECE;
  border-color:#CECECE;
}

.btn-green-outline-thin{
  background-color: transparent !important;
  border: solid 1px #ff4040;
  color: #ff4040;
  font-family: 'Helvetica Neue LT Std';
  font-weight: 300;
  padding: 4px 20px;
}

.btn-red-outline{
  background-color: transparent !important;
  border: solid 2px #ff4040;
  color: #ff4040;
  font-family: 'Helvetica Neue LT Std';
  font-weight: 400;
  padding: 4px 20px;
}

.btn-red-outline[disabled]{
  color: #CECECE;
  border-color:#CECECE;
}

.btn-red-outline-thin{
  background-color: transparent !important;
  border: solid 1px #ff4040;
  color: #ff4040;
  font-family: 'Helvetica Neue LT Std';
  font-weight: 300;
  padding: 4px 20px;
}

.btn-blue-outline{
  background-color: transparent !important;
  border: solid 2px #007AAC;
  color: #007AAC;
  font-family: 'Helvetica Neue LT Std';
  font-weight: 400;
  padding: 4px 20px;
}

.btn-blue-outline[disabled]{
  color: #CECECE;
  border-color:#CECECE;
}

.btn-blue-outline-thin{
  background-color: transparent !important;
  border: solid 1px #007AAC;
  color: #007AAC;
  font-family: 'Helvetica Neue LT Std';
  font-weight: 300;
  padding: 4px 20px;
}

.see-how-wrapper {
  text-align: right;
  width: 90%;
  position: relative;
  /* margin-bottom: 20px; */
}

.see-how-wrapper::before {
  content: "";
  display: block;
  height: 1px;
  background-color: #333333;
  width: calc(100% - 110px);
  position: absolute;
  top: 16px;
}

.see-how {
  border: 0;
  font-size: 18px;
  background-color: #7EACCF;
  color: #fff;
  padding: 4px 30px 4px 20px;
  display: inline-block;
  position: relative;
  letter-spacing: 1px;
}

.see-how::after {
  content: "";
  background-image: url("../images/arrow.svg");
  background-repeat: no-repeat;
  width: 22px;
  height: 17px;
  position: absolute;
  right: 0;
  top: 9px;
}

.intro {
  background-image: url("../images/bg-intro.svg");
  background-repeat: no-repeat;
  background-position: center 120%;
  background-attachment: fixed;
  background-color: linear-gradient(90deg, rgba(0, 121, 171, 0.1) 0%, rgba(86, 175, 155, 0.1) 100%);
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;
}

.info-graphic img {
  width: 90%;
}

.survey .info-graphic, .focus-group .info-graphic, .smart-ads .info-graphic, .limited-offers .info-graphic, .staffing .info-graphic {
  padding-top: 100px;
}

.budget-control .info-graphic, .content .info-graphic {
  padding-top: 100px;
  text-align: center;
}

.targeting-tool .info-graphic {
  padding-top: 50px;
  text-align: center;
}

.targeting-tool .info-graphic {
  text-align: center;
}

.targeting-tool .info-graphic img {
  width: 80%;
}

.budget-control .info-graphic img, .content .info-graphic img {
  width: 60%;
}

.bg-bottom {
  background-image: url("../images/bg-bottom.svg");
  background-repeat: no-repeat;
  background-position: center 120%;
  background-attachment: fixed;
  background-color: linear-gradient(90deg, rgba(0, 121, 171, 0.1) 0%, rgba(86, 175, 155, 0.1) 100%);
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;
}

.survey, .focus-group, .smart-ads, .limited-offers, .staffing, .budget-control, .content, .targeting-tool {
  display: none;
}

.modal-dialog.video-modal{
  height: auto;
  width: 600px;
  margin: 30px auto;
  top: 20%;
}

.modal-dialog.video-modal .modal-content{
  background: #fff;
  background-color: #fff;
  padding: initial;
}

.modal-dialog.video-modal .modal-content .close{
  width: 34px;
  right: -5px;
  position: absolute;
  top: -5px;
}

.modal-dialog.video-modal .modal-content .modal-body{
  height: auto !important;
}

.modal-dialog.video-modal .modal-content .player-wrapper video{
  width: 100%;
}

.download-result{
  text-align: center;
}

.download-result .text{
  margin-top: 10px;
}

.download-result i{
  font-size: 65px;
  color: #7DC4B3;
}

.download-result a{
  color: #333;
}

/*Modal End*/

/*Dashboard*/
header {
  display: block;
  z-index: 10;
  transition: all .2s;
  position: fixed;
  width: 100%;
  
}

.header-content {
  background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    transition: all 0.2s;
    padding: 10px 0;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.16);
    height: 66px;
    position: relative;
}

.header-left {
  display: flex;
  align-items: center;
  padding: 0 0 0 20px;
}

.header-right {
  align-items: center;
  display: flex;
  margin-left: auto;
  padding: 0 30px 0 0;
}

/* header .logo {
  margin-left: 10px;
} */

header .logo img {
  width: 170px;
}

.hamburger-menu {
  background-image: url("../images/icon-menu.svg");
  background-repeat: no-repeat;
  width: 38px;
  height: 32px;
  display: inline-block;
}

.balance {
  float: right;
  color: #fff !important;
}

.balance:hover{
  color: #fff;
}

.notifications-wrapper {
  position: relative;
  right: 50px;
}

.notifications {
  background-image: url("../images/icon-notifications.svg");
  background-repeat: no-repeat;
  width: 22px;
  height: 26px;
  display: inline-block;
  position: relative;
}

.notifications .count-badge {
  background-color: #FF0000;
  position: absolute;
  left: 13px;
  top: -5px;
  /* color: #fff;
  border-radius: 15px;
  position: absolute;
  right: -28px;
  top: 0;
  min-width: 30px;
  text-align: center;
  font-size: 12px;
  padding-top: 2px; */
}

.user-wrapper {
  position: relative;
}

.user-name {
  color: #007AAC;
  margin-right: 10px;
}

.avatar {
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.avatar img {
  width: 48px;
  height: 48px;
  border: solid 2px #007AAC
}

.user-drop-arrow {
  border: none !important;
    margin-left: 6px;
    transition: 0.5s;
    width: 10px !important;
}
.rotate-arrow {
  transform: rotate(90deg);
}
.rounded-circle {
  border-radius: 50% !important;
}

.sub-header {
  background-color: #007AAC;
  padding: 12px 20px;
  color: #fff;
  letter-spacing: 1px;
  border-bottom: 1px solid #056b95;
}

.home {
  font-size: 14px;
  color: #fff;
  font-weight: 300;
  margin-bottom: 0;
}
#breadcrumb label.home{
  font-weight: 400;
  font-size: 14px;
  margin-bottom: 0;
}
.home:hover{
  color: #f2f2f2;
}

.home img {
  margin-right: 10px;
}

@media(min-width:768px) {
  .side-nav {
      position: fixed;
      top: 114px;
      left: 225px;
      width: 240px;
      margin-left: -225px;
      border: none;
      border-radius: 0;
      overflow-y: hoverle;
      background-color: #1587cc;
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
      bottom: 0;
      overflow-x: hidden;
      padding: 0 0 20px 0px;
  }
  .side-nav li.no-sub {
      border-bottom: 1px solid #056b95;
  }
  /* .side-nav li.nav-active a, .side-nav li.nav-active i:before {
    color: #fff !important; 
    } */
  .side-nav li a {
      color: #ffffff;
      display: flex;
      width: 240px;
      padding: 14px 0 14px 23px;
      font-size: 15px;
      font-weight: 300;
      position: relative;
      letter-spacing: 0.7px;
      background-color: transparent !important;
  }
  .side-nav li a i::before {
    color: #ffffff;
}
.side-nav li a:hover, 
.side-nav li a:focus, 
.side-nav li a:hover i::before,
.side-nav li a:focus i::before{
      outline: none;
      color: #007AAC;
      background-color: #ffffff !important;
      text-decoration: none;
  }
  .side-nav li a i {
    font-size: 19px;
    width: 30px;
    display: inline-block;
    margin-right: 20px;
    text-align: center;
  }
  .side-nav li a i.icon-staffing {
      font-size: 22px;
  }
  .side-nav li a i.icon-rating {
      font-size: 17px;
  }
  .side-nav li a i.icon-Chevron-right {
      font-size: 16px;
      width: auto;
      margin: 0 15px 0 0;
      color: #56AF9B;
      transition: all .3s;
  }
  .side-nav li a i.icon-Chevron-right.down {
      transform: rotate(90deg);
      transition: all .3s;
  }

  .side-nav li a .badge{
      background-color: #FF0000;
      color: #fff;
      border-radius: 15px;
      min-width: 30px;
      text-align: center;
      font-size: 12px;
      height: 20px;
      margin-left: 2px;
      padding-top: 5px;
  }
}

.side-nav li ul {
  padding: 0;
  /* border-bottom: 1px rgba(0,0,0,.3) solid; */
  list-style: none;
}

.side-nav li ul li a {
  display: block;
  padding: 1px 0 1px 70px;
  text-decoration: none;
  color: #48AA9B;
  font-weight: 300;
  font-size: 15px;
}

.side-nav li ul li a:hover {
  color: #707070;
}

.navbar .nav li a .label {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  position: absolute;
  top: 14px;
  right: 6px;
  font-size: 10px;
  font-weight: normal;
  min-width: 15px;
  min-height: 15px;
  line-height: 1.0em;
  text-align: center;
  padding: 2px;
}

.navbar .nav li a:hover .label {
  top: 10px;
}

.navbar-brand {
  padding: 5px 15px;
}

.mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
  background-color: #3BA1DA !important;
  background-color: rgba(0, 122, 172,1) !important;
}

/*Left Panel*/

.left-panel {
  height: 100%;
  width: 250px;
  position: fixed;
  z-index: 1;
  top: 119px;
  right: -270px;
  background-color: #fafafa;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  overflow-x: hidden;
  transition: 0.5s;
}

.left-panel.open {
  right: 0px;
}

.left-panel a {
  display: flex;
  padding: 14px 0 14px 23px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 300;
  color: #707070;
  transition: 0.3s;
  border-bottom: 1px solid #dfdfdf;
  letter-spacing: 0.7px;
}

.left-panel a:hover {
  color: #72b37d;
    background: #efefef;
}

.left-panel a i {
  color: #72B37D;
  font-size: 22px;
  width: 30px;
  margin-right: 15px;
  display: inline-block;
  text-align: center;
}

.left-panel a i.icon-faq {
  font-size: 20px;
}

/**/

/*Content Area*/
.main-content .content-area {
  background-image: url("../images/main-bg.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position-y: 120px;
  background-color: #EFEBED;
  padding: 140px 25px 20px 265px;
  height: 100%;
  min-height: 100vh;
  overflow-x: hidden;
}

.card {
  background-color: #fff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
  border-width: 0;
  transition: all .2s;
  padding: 20px;
}

.card-title{
  color: #007AAC;
  font-size: 30px;
  font-weight: 300;
  margin-bottom: 10px;
  letter-spacing: 2px;
}

.card .widget-wrapper{    
  width: 33.33333333%;
  float: left;
  padding-right: 7px;
  padding-left: 7px;
}

.card .widget{
  background-color: #fff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
  padding: 10px;
  min-height: 170px;
  margin-bottom: 10px;
}

.card .widget .widget-title{
  color: #444444;
  font-size: 16px;
  font-weight: 300;
}

.card .widget .widget-title span{
  color: #399B9C;
  display: block;
}

.card .widget .count{
  color: #399B9C;
  font-size: 36px;
  font-weight: 700;
  margin-top: 20px;
}

.card .widget .chart{
  text-align: center;
}

/*Message*/
.messages ul{
  padding: 0;
  list-style: none;
}
.message-list {
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 300;
    border-bottom: solid 1px #ccc;
    padding-bottom: 20px;
}

.message-list .initials {
    color: #fff;
    font-size: 2rem;
    background-color: #4584FA;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
    flex: 0 0 auto;
    min-width: 1px;
    margin-right: 15px;
    border-radius: 50%;
    height: 40px;
    width: 40px;
    justify-content: center;
    align-items: center;
    display: flex;
    float: left;
}


.message-details {
  padding-left: 60px;
}

.sender {
  color: #1A1A23;
  margin-bottom: 5px;
}

.sender span{
  float: right;
}

.message {
  color: #666666;
  line-height: normal;
  display: inline-block;
  width: calc(100% - 20px);
  margin-bottom: 0;
}

.trash{
  float: right;
}

.trash i{
  color: #FF0000;
  font-size: 18px;
}

.knowledge-center{
  color: #707070;
  text-align: center;
}

.knowledge-center .icon{
  color: #838283;
  font-size: 46px;
  text-align: center;
  width: 46px;
  margin: 0 auto;
  display: block;
}

.knowledge-center .title{
  color: #707070;
  font-size: 22px;
  display: block;
  letter-spacing: 2px;
  margin-bottom: 10px;
}

.knowledge-center p{
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 1px;
}

.administration{
  color: #707070;
  text-align: center;
}

.administration .icon{
  color: #838283;
  font-size: 46px;
  text-align: center;
  width: 46px;
  margin: 0 auto;
  display: block;
}

.administration .title{
  color: #707070;
  font-size: 22px;
  display: block;
  letter-spacing: 2px;
  margin-bottom: 10px;
}

.administration p{
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 1px;
}

/*Wizard CSS*/

.wizard>.actions.introbtn {
  bottom: auto;
  top: 500px;
  text-align: center;
  left: 10%;
}

.wizard>.actions a, .wizard>.actions a:hover, .wizard>.actions a:active {
  padding: 0 30px
}

/*Form*/
.fs20{
  font-size: 20px;
}
label{
  font-weight: 300;
  font-size: 16px;
}
.note{
  font-size: 14px;
  font-weight: 300;
  margin-top: 5px;
  display: inline-block;
}
#listerProfile .note{
  display: block;
}
input.error{
  margin-top: 0;
}
.required{
  color: #FF0000;
}

.tap-upload{
  height: 150px;
  width: 150px;
  border: dashed 1px #707070;
  display: flex;
  background-image: url("../images/upload.jpg");
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  cursor: pointer;
}

.tap-upload span{
  position: absolute;
  bottom: 15px;
  width: 100%;
  text-align: center;
}

.tap-upload input[type='file']{
  height: 100%;
  opacity: 0;
}

.description{
  position: relative;
}

.description textarea{
  resize: none;
}

.description #counter{
  position: absolute;
  right: 5px;
  bottom: -2px;
  font-weight: 300;
}


.social-links .icon-wrapper{
  float: left;
}

.social-links .icon-wrapper img{
  width: 36px;
}

.icon-profile {
  color: #007AAC;
}

.btn-rounded{
  border-radius: 20px;
}

.btn-gray-outline{
  background-color: transparent !important;
  border: solid 2px #999999;
  color: #999999;
  font-family: 'Helvetica Neue LT Std';
  font-weight: 400;
  padding: 4px 20px;
}

.btn-green-outline{
  background-color: transparent !important;
  border: solid 2px #53B09A;
  color: #53B09A;
  font-family: 'Helvetica Neue LT Std';
  font-weight: 400;
  padding: 4px 20px;
}

.btn-green-outline[disabled]{
  color: #CECECE;
  border-color:#CECECE;
}

.btn-green-outline-thin{
  background-color: transparent !important;
  border: solid 1px #53B09A;
  color: #53B09A;
  font-family: 'Helvetica Neue LT Std';
  font-weight: 300;
  padding: 6px 15px;
}


.btn-green{
  border-color: #53B09A;
  color: #fff;
  font-family: 'Helvetica Neue LT Std';
  font-weight: 300;
  padding: 6px 20px;
}

.btn-red-outline{
  background-color: transparent !important;
  border: solid 2px #ff4040;
  color:#ff4040;
  font-family: 'Helvetica Neue LT Std';
  font-weight: 400;
  padding: 6px 20px;
}

.btn-red-outline[disabled]{
  color: #CECECE;
  border-color:#CECECE;
}

.btn-red-outline-thin{
  background-color: transparent !important;
  border: solid 1px #ff4040;
  color: #ff4040;
  font-family: 'Helvetica Neue LT Std';
  font-weight: 300;
  padding: 4px 15px;
}


.btn-red{
  border-color: #ff4040;
  color: #fff;
  font-family: 'Helvetica Neue LT Std';
  font-weight: 300;
  padding: 4px 20px;
}

.btn-blue-outline{
  background-color: transparent !important;
  border: solid 2px #007AAC;
  color: #007AAC;
  font-family: 'Helvetica Neue LT Std';
  font-weight: 400;
  padding: 4px 20px;
}

.btn-blue-outline[disabled]{
  color: #CECECE;
  border-color:#CECECE;
}

.btn-blue-outline-thin{
  background-color: transparent !important;
  border: solid 1px #007AAC;
  color: #007AAC;
  font-family: 'Helvetica Neue LT Std';
  font-weight: 300;
  padding: 4px 15px;
}


.btn-blue{
  border-color: #007AAC;
  color: #fff;
  font-family: 'Helvetica Neue LT Std';
  font-weight: 300;
  padding: 6px 20px;
}

.btn-default{
  background-color: #606A70;
  color: #fff;
  font-family: 'Helvetica Neue LT Std';
  font-weight: 300;
  padding: 6px 20px;
}
.btn-default i{
  font-size: 14px;
}

.text-blue{
  color: #007AAC;
}

.text-purple{
  color: #5B3268 !important;
}

.custom-dd{
  position: relative;
}

.custom-dd select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 25px;
}

.custom-dd::after{
  content: "\e913";
  font-family: 'icomoon';
  font-size: 12px;
  color: #676767;
  right: 10px;
  top: 10px;
  position: absolute;
  pointer-events: none;
  transform: rotate(90deg)
}

.custom-dd .txt{
  position: absolute;
  left: 100%;
  top: 6px;
}

.dropzone.dz-clickable {
  cursor: pointer;
}

.dropzone {
  border: 1px dashed #ccc;
  border-radius: 5px;
  background: white;
  min-height: 150px;
  padding: 10px 20px;
  
}

.dropzone-sm{
  width:150px;
  padding: 10px 25px;
}

.dz-message{
  background-image: url(../images/upload.jpg);
  background-repeat: no-repeat;
  background-position: center;
  height: 150px;
  position: relative;
  text-align: center;
}

.dz-message span{
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
}

.dz-message.sm{
  height: 120px;
  background-position: top;
}

.upload svg{
  width: 25px;
  height: 25px;    
}

.dz-success-mark, .dz-error-mark{
  display: inline-block
}



.preview-file{
  border: 1px dashed #ccc;
  min-height: 150px; 
  position: relative;
  background-size: contain;
  background-repeat: no-repeat;
}

.preview-file span{
  display: block;
  width: 100%;
  height: -webkit-calc(100% - 27px);
  height: -moz-calc(100% - 27px);
  height: calc(100% - 27px);
  overflow: hidden;
  text-align: center;
}

.preview-file a{
  border:0;
  background-color: #53B09A;
  color: #fff;
  width: 100%;
  /* position: absolute; */
  bottom: 0;
  padding: 5px 0;
  text-align: center;
  z-index: 0;
  font-size: 12px;
}

.preview-file button{
  border:0;
  background-color: #53B09A;
  color: #fff;
  width: 100%;
  position: absolute;
  bottom: 0;
  padding: 5px 0;
  text-align: center;
  z-index: 0;
}

.preview-file input[type='file']{
  height: 100%;
  opacity: 0;
  position: absolute;
  bottom: 0;
  z-index: 1;
  cursor: pointer;
  width: 100%;
}

.preview-file img{
  max-width: 100%;
  max-height: 100%;
}

.preview-file video{
  display: flex;
  width: 100%;
  height: -webkit-calc(100% - 27px);
  height: -moz-calc(100% - 27px);
  height: calc(100% - 27px);
  overflow: hidden;
  align-items: center;
  justify-content: center;
  position: relative;
}
.preview-file .file-name{
  text-align: center;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  padding: 0 5px;
}
.preview-file .overlay{
  background-color: rgba(25,25,26,0.5);
  color: #fff;
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 1;
}
.preview-file a.btn-play{
  background-color: rgba(255,255,255,0.85);
  color: #19191a;
  height: 40px;
  width: 40px;
  display: flex;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -20px;
  margin-top: -20px;
}

.preview-file-sm{
  border: 1px dashed #ccc;
  min-height: 100px;
  position: relative;
}

.dz-filename{
  word-break: break-word;
}

.preview-file-sm a{
  border:0;
  background-color: #53B09A;
  color: #fff;
  width: 100%;
  position: absolute;
  bottom: 0;
  padding: 5px 0;
  text-align: center;
  z-index: 0;
}

.preview-file-sm input[type='file']{
  height: auto;
  opacity: 0;
  position: absolute;
  bottom: 0;
  z-index: 1;
  cursor: pointer;
  width: 100%;
}

/* .preview-file-sm .dropzone{
  border: 0;
} */

.preview-file-sm .dz-message.sm{
  height: 95px;
}


.guidelines img{
  box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
  border-radius: 50%;
  float: left;
}

.guidelines .lines{
  font-size:14px;
  font-weight: 300;
  padding-left: 60px;
}

/*Table*/
.thead-dark{
  background-color: #606A70;
  color: #fff;
  
}

.thead-dark th{
  font-weight: 400;
}

table .icon-link{
  font-size:20px;
  font-weight: bold;
  color: #00ADEF;
  padding: 7px;
}

table .icon-link:hover, table .icon-link:focus{
  text-decoration: none;
}
.table>thead>tr>th{
  border:0;
}
.table>tbody>tr>td{
  border-top: 0;
  border-bottom: solid 1px #707070;
}

/** Floting Lable Form CSS Start **/
/****  floating-Lable style start ****/

.floating-label { 
  position:relative; 
  margin-bottom:20px; 
}
.floating-input , .floating-select {
  height: 50px;
  padding: 10px 20px;
  font-size:14px;
  display:block;
  width:100%;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
 /* -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
       -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
          transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;	*/
}


.floating-select {
  padding: 10px 10px 10px 8px;
}

.floating-input:focus , .floating-select:focus {
    /*outline:none;
    border-bottom:2px solid var(--theme-defaultaction);	
    border-color: var(--theme-defaultaction);
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
      box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);*/

    color: #495057;
    background-color: #fff;
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

.floating-label label {
  color:#999; 
  font-size:14px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:10px;
  top:15px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}

.floating-input:focus ~ label, 
.floating-input:not(:placeholder-shown) ~ label {
  top:4px;
  font-size:12px;
  color:#777;
  font-weight: 500;
}

.floating-select:focus ~ label{
  top:4px;
  font-size:12px;
  color:#777;
  font-weight: 500;
}

.floating-select:not([value=""]):valid ~ label {
  top:4px;
  font-size:12px;
  color:#777;
  font-weight: 500;
}


.floating-input, .floating-select {
    padding-top: 42px;
}

select option { color: black; }
select option[value=""] {
  color: gray;
  font-style: italic;
  font-weight: normal;
}
select option:first-child {
  color: black;
  font-style: normal;
}


/* active state */
.floating-input:focus ~ .bar:before, .floating-input:focus ~ .bar:after, .floating-select:focus ~ .bar:before, .floating-select:focus ~ .bar:after {
  width:50%;
}

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.floating-textarea {
   min-height: 30px;
   max-height: 260px; 
   overflow:hidden;
  overflow-x: hidden; 
}

/* highlighter */
.highlight {
  position:absolute;
  height:50%; 
  width:100%; 
  top:15%; 
  left:0;
  pointer-events:none;
  opacity:0.5;
}

/* active state */
.floating-input:focus ~ .highlight , .floating-select:focus ~ .highlight {
  -webkit-animation:inputHighlighter 0.3s ease;
  -moz-animation:inputHighlighter 0.3s ease;
  animation:inputHighlighter 0.3s ease;
}

/****  floating-Lable style ends ****/

/* Bank Flow css */


/** CheckBox and Radio CSS Start **/
/* Custom labels: the container */
.checkcontainer {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 17px;
  -webkit-user-select: none; /* Chrome, Opera, Safari */
  -moz-user-select: none; /* Firefox 2+ */
  -ms-user-select: none; /* IE 10+ */
  user-select: none; /* Standard syntax */
}

/* Hide the browser's default checkbox */
.checkcontainer input {
  position: absolute;
  opacity: 0;
cursor: pointer;}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.checkcontainer:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkcontainer input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.checkcontainer input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.checkcontainer .checkmark:after {
  left: 10px;
  top: 6px;
  width: 7px;
  height: 12px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* Create a custom radio button */
.radiobtn{
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.checkcontainer:hover input ~ .radiobtn{
background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.checkcontainer input:checked ~ .radiobtn{
background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.radiobtn:after {
content: "";
position: absolute;
display: none;
}

/* Show the indicator (dot/circle) when checked */
.checkcontainer input:checked ~ .radiobtn:after {
display: block;
}

/* Style the indicator (dot/circle) */
.checkcontainer .radiobtn:after {
top: 9px;
left: 9px;
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
}

/** CheckBox and Radio CSS End **/
.shadow-section-box {
  padding: 15px;
  border: 1px solid rgba(0,0,0,0.10);
  -webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.10);
  -moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.10);
  box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.10);
  background: #fff;
margin-bottom: 15px;
}

.balancetablistBox{
display: table;
width: 100%;
}
.balancetablist{
display: table;
padding-bottom: 15px;
width: 100%;
}
.balancetablist-icon{
display: table-cell;
width: 8%;
}
.balancetablist-listBox{
display: table-cell;
vertical-align: top;
padding-top: 8px;
}
.listbigIcon{
line-height: 35px;
}

.balancetablist i:hover{
text-decoration: none;
}
.listbox-rightarrow{
text-align: right;
  display: table-cell;
  padding-top: 13px;
  vertical-align: top;
}
.linkBankAccount{
display: table;
width: 100%;
position: relative;
}
.linkBankAccount .AccountIMG{
display:table-cell;
}
.linkBankAccount .AccountIMG{
height: 80px;
width: 130px;
float: left;
}
.linkBankAccount .AccountContent{
display:table-cell;    
  float: left;
  width: 70%;
padding-left: 20px;
box-sizing: border-box;
}
.linkBankAccount .AccountRadio{
display: table-cell;
  float: right;
  right: 36px;
  position: absolute;    
margin-top: 26px;
}
/* Create a custom radio button */
.linkBankAccount .AccountRadio .radiobtn{
position: absolute;
height: 22px;
width: 22px;
background-color: #fff;
border-radius: 22px;
border: 2px solid #BCBCBC;
}
.linkBankAccount .AccountRadio .checkcontainer input:checked ~ .radiobtn {
 
background-color: #fff;
border-color: var(--theme-primary)
}
.linkBankAccount .AccountRadio .checkcontainer:hover input ~ .radiobtn {
  
background-color: #fff;
border-color: var(--theme-primary)
}
.linkBankAccount .AccountRadio .checkcontainer .radiobtn:after {
top: -1px;
  left: 0px;
  width: 20px;
  height: 20px;
  border-radius: 22px;
  background-color: var(--theme-primary);
  border: 0px;
}
.linkBankCheckingAccount{
/*background: #F5F7FA;
border-radius: 4px;*/
}
.linkBankCheckingAccount-TopSpace{
border-top: 1px solid #BCBCBC;
  margin-top: 30px;
  padding-top: 15px;
}
.closeIconBX{
position: absolute;
right: 15px;
color: #C0BBBB;
cursor: pointer;
font-size: 16px;
top: 12px;
}
.TransferAmountBox{
padding: 0 16%;
}

.bizBaseAccount-iconSML {
	height: 28px;
    width: auto;
    margin-top: -2px;
    float: right;
}

.tableActionicon{
	display: flex;
}

.cursor{
  position: relative;
	cursor: pointer;
}
.centerBTN {
	display: block;
    text-align: center;
    margin: 0px auto;
}

.border-left {
  border-left: 1px solid #c4c9cc;
}
.border-top-dashed {
  border-top: 1px dashed #c4c9cc;
}
.border-bottom-dashed {
  border-bottom: 1px dashed #c4c9cc;
}
.border-bottom-1px {
  border-bottom: 1px solid #c4c9cc;
}

.border-top-solid {
  border-top: 1px solid #c4c9cc;
}
.border-2px {
  border-width: 2px;
  border-style: solid;
}
.no-border{
border: 0px solid #000;
}

/* margin padding CSS styles
---------------------------------------------------- */
.ma8 {
  margin: 8px !important;
}
.ma10 {
  margin: 10px !important;
}
.ma15 {
  margin: 15px !important;
}
.ma20 {
  margin: 20px !important;
}

.mt2 {
  margin-top: 2px !important;
}
.mt5 {
  margin-top: 5px !important;
}
.mt10 {
  margin-top: 10px !important;
}
.mt15 {
  margin-top: 15px !important;
}
.mt20 {
  margin-top: 20px !important;
}

.mb5 {
  margin-bottom: 5px !important;
}
.mb10 {
  margin-bottom: 10px !important;
}
.mb15 {
  margin-bottom: 15px !important;
}
.mb-20 {
  margin-bottom: 20px !important;
}

.mr10 {
  margin-right: 10px !important;
}
.mr15 {
  margin-right: 15px !important;
}
.mr20 {
  margin-right: 20px !important;
}


.ml5 {
  margin-left: 5px !important;
}
.ml10 {
  margin-left: 10px !important;
}
.ml15 {
  margin-left: 15px !important;
}
.ml20 {
  margin-left: 20px !important;
}


/*No Margin*/
.no-mar {
  margin: 0px !important;
}
.no-ml {
  margin-left: 0px !important;
}
.no-mr {
  margin-right: 0px !important;
}
.no-mt {
  margin-top: 0px !important;
}
.no-mb {
  margin-bottom: 0px !important;
}


.mAuto {
  margin: auto !important;
}

.noMargin {
  margin: 0px !important;
}


.pa5 {
  padding: 5px !important;
}
.pa10 {
  padding: 10px !important;
}
.pa15 {
  padding: 15px !important;
}
.pa20 {
  padding: 20px !important;
}

.pl5 {
  padding-left: 5px !important;
}
.pl10 {
  padding-left: 10px !important;
}
.pl15 {
  padding-left: 15px !important;
}
.pl20 {
  padding-left: 20px !important;
}

.pl30 {
  padding-left: 30px !important;
}

.pr5 {
  padding-right: 5px !important;
}
.pr15 {
  padding-right: 15px !important;
}
.pr10 {
  padding-right: 10px !important;
}
.pr20 {
  padding-right: 20px !important;
}
.pr30 {
  padding-right: 30px !important;
}

.pt5 {
  padding-top: 5px !important;
}
.pt10 {
  padding-top: 10px !important;
}
.pt15 {
  padding-top: 15px !important;
}
.pt20 {
  padding-top: 20px !important;
}
.pt30 {
  padding-top: 30px !important;
}

.pb5 {
  padding-bottom: 5px !important;
}
.pb10 {
  padding-bottom: 10px !important;
}
.pb15 {
  padding-bottom: 15px !important;
}
.pb20 {
  padding-bottom: 20px !important;
}
.pb30 {
  padding-bottom: 30px !important;
}

.no-pa {
  padding: 0px !important;
}
.no-pt {
  padding-top: 0px !important;
}
.no-pb {
  padding-bottom: 0px !important;
}
.no-pl {
  padding-left: 0px !important;
}
.no-pr {
  padding-right: 0px !important;
}

.noBorder {
  border-top: none !important;
}
.noBorderBtm {
  border-bottom: none !important;
}


/* font CSS styles 
---------------------------------------------------- */
.font10 {
  font-size: 10px;
}
.font12 {
  font-size: 12px;
}
.font13 {
  font-size: 13px;
}
.font14 {
  font-size: 14px;
}
.font15 {
  font-size: 15px;
}
.font11 {
  font-size: 11px;
}
.font16 {
  font-size: 16px;
}
.font17 {
  font-size: 17px;
}
.font18 {
  font-size: 18px;
}
.font20 {
  font-size: 20px;
}
.font22 {
  font-size: 22px;
}
.font25 {
  font-size: 25px;
}
.font30 {
  font-size: 30px;
}
.font35 {
  font-size: 35px;
}
.font40 {
  font-size: 40px;
}
.font50 {
  font-size: 50px;
}
.fontBold {
	font-weight: bold;
}
.fontNormal {
	font-weight: normal;
}

.imageIcon {
	height: 40px;
    width: 80px;
    margin-top: -2px;
    float: right;
}

.infoiocn {
  color: #53B09A;
  margin-left: 8px;
  cursor: pointer;
  font-size: 16px;
}

/* vertical align*/
.verticalTop{
	vertical-align: top;
}
.verticalMiddle{
	vertical-align: middle;
}
.btn-fixed-width{
  width:100px;
}

.floatRight{
  float: right;
}

/*Media Queries Starts*/
@media (min-width:768px) and (max-width:1366px) {
  .login-wrapper {
      width: 520px;
      margin-left: 70px;
      padding-top: 20px;
  }
  .logo img {
      width: 220px;
  }
  .login-bg {
      padding-bottom: 40px;
      background-size: 100%;
      background-color: #fff;
      background-repeat: no-repeat
  }
  .heading {
    font-size: 32px;
  }
  .sub-heading {
      font-size: 40px;
  }
  .content-txt {
    font-size: 16px;
    line-height: 20px;
  }
  .sm-heading {
      font-size: 18px;
      text-align: center;
  }
  .login-box .form-control {
      font-size: 16px;
  }
  .login-box .form-control:focus{
      box-shadow: none;
  }
  .login-box .links {
      font-size: 16px;
  }
  .focus-group .info-graphic {
      text-align: center;
  }
  .focus-group .info-graphic img {
      width: 70%;
  }
  .targeting-tool .info-graphic {
      padding-top: 10px;
  }
  .targeting-tool .info-graphic img {
      width: 60%;
  }
  .targeting-tool .content-scroll {
      height: 220px;
      overflow: auto;
  }
}

@media (min-width:768px) and (max-width:1024px) {
  .login-wrapper {
      width: 480px;
      margin-left: 50px;
  }
  .login-box {
      width: 420px;
  }
  .logo img {
      width: 220px;
  }
  .sub-heading {
      font-size: 36px;
  }
  .sm-heading {
      font-size: 18px;
  }
  .login-box .form-control {
      font-size: 16px;
  }
  .login-box .links {
      font-size: 14px;
  }
  .login-box .form-group {
      margin-bottom: 15px;
  }
  .modal-content {
      background-color: #EDF7F5;
  }
  .modal-content .heading {
      font-size: 32px;
  }
  .modal-content p {
      font-size: 16px;
  }
  .targeting-tool .content-scroll {
      height: 280px;
      overflow: auto;
  }

  .card .widget .count{
      font-size: 20px;
  }

  .card .widget-wrapper{    
      width: 50%;
  }

  .knowledge-center .title{
      font-size: 18px;
  }
}

@media (min-width:1025px) and (max-width:1366px){
  .dz-message{
    background-size: 50%;
  }

  .card .widget .count{
    font-size: 30px;
  }
}

/* dashboard graph css start here*/
path {
  stroke: #fff;
}

path:hover {
  opacity: 0.9;
}

rect:hover {
  fill: blue;
}

.axis {
  font: 15px sans-serif;
}

.legend tr {
  border-bottom: 1px solid grey;
}

.legend tr:first-child {
  border-top: 1px solid grey;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path {
  display: none;
}

.legend {
  margin-bottom: 76px;
  display: inline-block;
  border-collapse: collapse;
  border-spacing: 0px;
}

.legend td {
  padding: 4px 5px;
  vertical-align: bottom;
}

.legendFreq,
.legendPerc {
  align: right;
  width: 50px;
}

.side-nav .mCSB_inside>.mCSB_container {
  margin-right: 0 !important;
 }

#wrapSurvey .popover{
  width: 30rem !important;
}
.flex-wrapper {
  display: flex;
  align-items: center;
}

.dropPicture {
    border: 1px dashed #ccc;
    border-radius: 5px;
    background: white;
    min-height: 150px;
    padding: 10px 5px 30px 5px;
}

.flex-wrapper-category {
  display: flex;
  align-items: baseline;
}

.category-eye-icon {
  margin-right: 10px;
}

.category-delete-icon {
  margin-right: 10px;
  min-width: 15px;
}

.category-item-wrapper {
  background-color: #f3f3f3;
  padding-top: 6px;
  width: 100%;
  border-bottom: 2px solid #fff
}

.category-item-input-wrapper {
  background-color: #f3f3f3;
  width: 100%;
  border-bottom: 2px solid #fff
}

.category-number {
  background-color: #a3a3a3;
  padding: 10px;
  margin-right: 10px;
  min-width: 36px;
  display: inline-block;
  text-align: center;
}

.category-input-item {
  background-color: #f3f3f3;
  width: 100%;
  border-bottom: 2px solid #fff;
  margin-top: 1px;
}

.category-label {
 width: 80.7%;
}

.category-model-sub-text {
  font-size: 14px;
    font-weight: 400;
    color: #9f9c9c;
    font-style: italic;
    margin-top: 7px;
}

/* reorder list with drag and drop */
.slip-reordering {
  -webkit-box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.02);
  box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.03);
}

.mediafile-wrapper {
  padding: 0;
  margin-left: 20px;
  padding-top: 20px;
}

.data-selected-wrapper {
  height: 50px !important;
  background-size: 45% !important;
}

.data-selected-wrapper span {
  bottom: -10px !important;
}

.selected-msg {
  display: flex;
  padding: 10px 0px;
  background-color: #6a6a6a;
  color: #ffff;
  align-items: end;
}

.media-wrapper {
  border-top: 2px solid #cbc5c5;
  margin: 0px 20px;
  min-height: 100px;
  overflow: hidden;
}

.media-file {
  border: none;
}

.video-bg {
  background-image: url('../images/upload-img.png');
  background-repeat: no-repeat;
  position: relative;
  text-align: center;
  width: 120px;
}

.media-wrapper:last-child {
  border-bottom: 2px solid #cbc5c5;
}

.disabled-media {
  pointer-events: none;
  opacity: 0.5; /* You can also reduce the opacity to make it visually disabled */
}