@font-face {
  font-family: 'DIN Pro';
  src: url("../fonts/DINPro-Medium.woff2") format("woff2"), url("../fonts/DINPro-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal; }

@font-face {
  font-family: 'DIN Pro';
  src: url("../fonts/DINPro.woff2") format("woff2"), url("../fonts/DINPro.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'DIN Pro';
  src: url("../fonts/DINPro-Bold.woff2") format("woff2"), url("../fonts/DINPro-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal; }

@font-face {
  font-family: 'Helvetica';
  src: url("../fonts/HelveticaNeue-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal; }

@font-face {
  font-family: 'Helvetica';
  src: url("../fonts/HelveticaNeue-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal; }

@font-face {
  font-family: 'Helvetica';
  src: url("../fonts/HelveticaNeue-Thin.woff") format("woff");
  font-weight: 100;
  font-style: normal; }

@font-face {
  font-family: 'Helvetica';
  src: url("../fonts/HelveticaNeue-Heavy.woff") format("woff");
  font-weight: 600;
  font-style: normal; }

@font-face {
  font-family: 'Helvetica';
  src: url("../fonts/HelveticaNeue-Black.woff") format("woff");
  font-weight: 900;
  font-style: normal; }

@font-face {
  font-family: 'Euclid Circular B';
  src: url("../fonts/euclid/Euclid Circular B Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal; }

@font-face {
  font-family: 'Euclid Circular B';
  src: url("../fonts/euclid/Euclid Circular B Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal; }

@font-face {
  font-family: 'Euclid Circular B';
  src: url("../fonts/euclid/Euclid Circular B Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal; }

@font-face {
  font-family: 'Euclid Circular B';
  src: url("../fonts/euclid/Euclid Circular B SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal; }

@font-face {
  font-family: 'Euclid Circular B';
  src: url("../fonts/euclid/Euclid Circular B Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal; }

@font-face {
  font-family: 'Euclid Circular B';
  src: url("../fonts/euclid/Euclid Circular B Medium Italic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic; }

.mainNavbar {
  padding-bottom: 20px;
  width: auto;
  background: #ffffff;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  box-shadow: 4px 0px 10px rgba(0, 0, 0, 0.05);
  z-index: 1005;
  position: fixed;
  left: 0;
  top: 0;
  transition: all 0.2s ease-in; }
  .mainNavbar .topBarLogo {
    transition: all 0.2s ease-in; }
  .mainNavbar .deskViewLogo {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 160px;
    height: 60px;
    margin: 0 25px;
    transition: all 0.2s ease-in; }
    @media (max-width: 1680px) {
      .mainNavbar .deskViewLogo {
        margin-left: 15px; } }
    @media (max-width: 1179px) {
      .mainNavbar .deskViewLogo {
        display: none; } }
  .mainNavbar .hide {
    display: none; }
  .mainNavbar .group {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    margin-bottom: 25px; }
  .mainNavbar .mobileViewLogo {
    display: none;
    justify-content: flex-start;
    align-items: center;
    width: 40px;
    height: 60px;
    margin: 0;
    transition: all 0.2s ease-in; }
    @media (max-width: 1179px) {
      .mainNavbar .mobileViewLogo {
        display: inline-flex; } }
  .mainNavbar .show {
    display: flex; }
  .mainNavbar.collapse {
    display: flex !important; }
    .mainNavbar.collapse .group {
      justify-content: center; }
  .mainNavbar ul {
    padding: 0;
    margin: 0;
    width: 100%; }
    .mainNavbar ul li {
      width: 100%;
      padding: 0 25px;
      margin-bottom: 20px;
      white-space: nowrap;
      overflow: hidden;
      position: relative; }
      @media (max-width: 1680px) {
        .mainNavbar ul li {
          padding: 0 5px 0 12px; } }
      .mainNavbar ul li:last-child {
        margin-bottom: 0; }
      .mainNavbar ul li a {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        cursor: pointer;
        padding: 5px 0;
        color: #525151 !important;
        font-size: 14px;
        transition: all 0.2s ease-in;
        font-family: "Euclid Circular B";
        font-weight: 500; }
        .mainNavbar ul li a:focus {
          color: #303030 !important; }
      .mainNavbar ul li:hover {
        background: #E5FFFB; }
        .mainNavbar ul li:hover a {
          color: #303030 !important;
          font-family: "Euclid Circular B";
          font-weight: 600; }
        .mainNavbar ul li:hover .navIcon {
          background-color: #A5E7E6; }
          .mainNavbar ul li:hover .navIcon img {
            filter: invert(100%) sepia(100%) saturate(100%) hue-rotate(66deg) brightness(10%) contrast(200%); }
      .mainNavbar ul li.active {
        background: #E5FFFB; }
        .mainNavbar ul li.active .activeBorder {
          position: absolute;
          background: linear-gradient(226.85deg, #8020CF 3.02%, #22FCDB 100%);
          width: 6px;
          height: 100%;
          left: 0;
          border-top-right-radius: 5px;
          border-bottom-right-radius: 5px; }
        .mainNavbar ul li.active a {
          color: #303030 !important; }
          .mainNavbar ul li.active a:focus {
            color: #303030 !important; }
          .mainNavbar ul li.active a .navItemName {
            font-family: "Euclid Circular B";
            font-weight: 600; }
        .mainNavbar ul li.active .navIcon {
          background-color: #A5E7E6; }
          .mainNavbar ul li.active .navIcon img {
            filter: invert(100%) sepia(100%) saturate(100%) hue-rotate(66deg) brightness(10%) contrast(200%); }
      .mainNavbar ul li .tour-tour-element {
        color: #303030; }
        .mainNavbar ul li .tour-tour-element:focus {
          color: #303030 !important; }
        .mainNavbar ul li .tour-tour-element .navItemName {
          font-family: "Euclid Circular B";
          font-weight: 500; }
        .mainNavbar ul li .tour-tour-element .navIcon {
          background-color: #A5E7E6; }
          .mainNavbar ul li .tour-tour-element .navIcon img {
            filter: invert(100%) sepia(100%) saturate(100%) hue-rotate(66deg) brightness(10%) contrast(200%); }
      .mainNavbar ul li .navIcon {
        margin-right: 8px;
        width: 32px;
        height: 32px;
        display: inline-flex;
        border-radius: 5px;
        background-color: #F6F6F6;
        padding: 6px;
        transition: all 0.2s ease-in; }
        .mainNavbar ul li .navIcon img {
          filter: invert(29%) sepia(5%) saturate(0%) hue-rotate(349deg) brightness(10%) contrast(90%); }
        @media (max-width: 768px) {
          .mainNavbar ul li .navIcon {
            width: 48px;
            height: 48px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 8px; } }
        @media (max-width: 480px) {
          .mainNavbar ul li .navIcon {
            width: 42px;
            height: 42px; } }
      .mainNavbar ul li.smartAnalytics .externalLink {
        position: absolute;
        right: 10px;
        bottom: 25px; }
        @media (min-width: 1680px) {
          .mainNavbar ul li.smartAnalytics .externalLink {
            bottom: 32px; } }
      .mainNavbar ul li.smartAnalytics .navItemName {
        margin-top: 5px; }
    .mainNavbar ul .navItemName {
      margin-top: 2px;
      font-size: 12px;
      transition: all 0.2s ease-in;
      font-family: "Euclid Circular B";
      font-weight: 500;
      white-space: normal; }
      @media (min-width: 1680px) {
        .mainNavbar ul .navItemName {
          font-size: 14px; } }
      @media (max-width: 1279px) {
        .mainNavbar ul .navItemName {
          font-size: 10px; } }
      @media (max-width: 768px) {
        .mainNavbar ul .navItemName {
          display: none;
          font-size: 12px; } }
    .mainNavbar ul .navItemName i {
      font-style: normal; }
      .mainNavbar ul .navItemName i .purple-span-text {
        color: #8020CF;
        position: unset; }
      .mainNavbar ul .navItemName i span {
        color: #C424FA;
        font-weight: 700;
        position: absolute;
        right: 10px;
        top: 6.5px; }
      .mainNavbar ul .navItemName i .beta {
        font-weight: 400 !important;
        color: #303030 !important;
        position: unset !important; }
  @media (max-width: 967px) {
    .mainNavbar ul.mobview {
      display: flex;
      flex-direction: column; } }
  .mainNavbar .devider {
    margin: 10px 0;
    border-top: solid 1px #ffffff; }
  .mainNavbar.collapse ul li {
    padding: 0 13px; }
    .mainNavbar.collapse ul li a {
      justify-content: center;
      margin-right: 0; }
    .mainNavbar.collapse ul li .navIcon {
      margin-right: 0; }
  .mainNavbar.collapse ul .navItemName {
    display: none; }

.NavbarSidebar {
  padding: 0 !important;
  flex: 0 0 12.333333% !important;
  max-width: 12.333333% !important;
  transition: all 0.2s ease-in; }
  .NavbarSidebar.collapsed {
    flex: 0 0 5.333333% !important;
    max-width: 5.333333% !important; }
  .NavbarSidebar .mainNavbar {
    width: 100% !important;
    max-width: 12.333333%;
    transition: all 0.2s ease-in; }
    .NavbarSidebar .mainNavbar.collapse {
      max-width: 5.333333% !important; }

.hamburger {
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
  width: 37px;
  height: 37px;
  cursor: pointer;
  transition: all 0.2s ease-in;
  transform: translateX(20px);
  display: inline-flex;
  position: absolute;
  right: 0; }

.hamburger.is-active {
  transform: rotateY(-180deg) translateX(-20px);
  transition: all 0.2s ease-in; }

.needHelp {
  margin: auto auto 0;
  width: 100%;
  max-width: 168px;
  padding: 2px;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#8020cf+0,492de6+100 */
  background: #8020cf;
  /* Old browsers */
  background: -moz-linear-gradient(top, #8020cf 0%, #492de6 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #8020cf 0%, #492de6 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #8020cf 0%, #492de6 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8020cf', endColorstr='#492de6',GradientType=0 );
  /* IE6-9 */
  overflow: hidden;
  mix-blend-mode: normal;
  border-radius: 30px; }
  @media (max-width: 1680px) {
    .needHelp {
      max-width: 180px; } }
  @media (max-width: 1500px) {
    .needHelp {
      max-width: 140px; } }
  .needHelp h5 {
    color: #210835;
    margin-bottom: 20px;
    font-family: "Euclid Circular B";
    font-weight: 500; }
  .needHelp p {
    margin-bottom: 10px;
    color: #ffffff;
    font-size: 12px; }
  .needHelp .contactBtn {
    width: 100%;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    border-radius: 30px;
    font-family: "Euclid Circular B";
    font-weight: 600;
    font-size: 14px;
    color: #210835; }
    @media (max-width: 1400px) {
      .needHelp .contactBtn {
        height: 36px; } }
    .needHelp .contactBtn .icon {
      margin-left: 10px; }

.topBetaArea {
  padding: 5px 25px 5px 15px;
  margin: 0 20px 0 auto;
  border: 1px solid rgba(205, 205, 205, 0.5);
  border-radius: 6px; }
  .topBetaArea:hover {
    background-color: #48444438; }
  .topBetaArea .topTry {
    font-weight: 400;
    font-size: 12px;
    color: #595959;
    margin-bottom: -2px; }
  .topBetaArea .topContent {
    font-weight: 400;
    font-size: 12px;
    color: #0A2E60;
    white-space: nowrap;
    padding-right: 20px; }
  .topBetaArea span.topBeta {
    font-weight: 400;
    font-size: 10px;
    color: #F7941D;
    top: -5px !important;
    position: relative;
    margin-left: 2px; }
  .topBetaArea img.blank_link_class {
    float: right;
    margin-right: -19px;
    margin-top: 11px; }

#step-0 .btn[data-role="end"],
#step-0 .btn[data-role="prev"] {
  display: none; }

.getStartTour .popover.right > .arrow {
  border: none;
  width: 60px;
  left: -45px;
  top: 28px !important; }
  .getStartTour .popover.right > .arrow:before {
    width: 12px;
    height: 12px;
    border-radius: 20px;
    border: none;
    background-color: #352B63; }
  .getStartTour .popover.right > .arrow:after {
    width: 46px;
    height: 2px;
    background-color: #352B63;
    border: none;
    top: 5px; }

.getStartTour .popover.bottom > .arrow {
  border: none;
  height: 102px;
  width: 10px;
  top: -102px; }
  .getStartTour .popover.bottom > .arrow:before {
    width: 12px;
    height: 12px;
    border-radius: 20px;
    border: none;
    background-color: #352B63; }
  .getStartTour .popover.bottom > .arrow:after {
    width: 2px;
    height: 100%;
    background-color: #352B63;
    border: none;
    margin-left: 5px; }

.getStartTour .popover[class*="tour-"] {
  margin: 0 !important; }

.getStartTour #step-0 {
  transform: translate(40px, 72px);
  top: 10.5px !important; }

.getStartTour #step-1 {
  transform: translate(40px, 90px); }

.getStartTour #step-2 {
  transform: translate(40px, 83px);
  max-width: 721px; }

.getStartTour #step-3 {
  transform: translate(40px, 203px); }

.getStartTour #step-4 {
  transform: translate(40px, 64px); }

.getStartTour #step-5 {
  transform: translate(40px, 72px); }

.getStartTour #step-6 {
  transform: translate(40px, 62px); }

.getStartTour #step-7 {
  transform: translate(40px, 64px); }

.getStartTour #step-8 {
  transform: translate(0, 94px); }

.getStartTour .overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  z-index: 1004;
  background: rgba(225, 225, 225, 0.75); }

.hideTour .popover {
  opacity: 0 !important;
  z-index: -1 !important; }

.hideTour .mainNavbar ul li .tour-tour-element {
  color: #5071A6; }
  .hideTour .mainNavbar ul li .tour-tour-element .navIcon {
    background-color: #EBEFF2; }
    .hideTour .mainNavbar ul li .tour-tour-element .navIcon img {
      filter: invert(99%) sepia(63%) saturate(352%) hue-rotate(177deg) brightness(10%) contrast(94%); }

.popover {
  background-color: #352B63 !important;
  font-family: "Euclid Circular B" !important;
  font-weight: 400 !important; }
  .popover .popover-content {
    font-weight: 400; }
  .popover .popover-navigation .popCount {
    font-weight: 600; }
  .popover .popover-navigation .btn-group .btn {
    height: 30px;
    font-size: 14px; }
  .popover .popover-navigation .btn-group .btn[data-role="next"] {
    color: #352B63;
    background-color: #F2E9FA;
    border-radius: 10px !important; }
  .popover .popover-navigation .btn-group .btn[data-role="end"] {
    color: #352B63;
    background-color: #F2E9FA;
    border-radius: 10px !important; }
  .popover .popover-navigation .btn-group .btn[data-role="prev"] {
    color: #ffffff;
    background-color: #352B63;
    border: 1px solid #AAAAAA;
    border-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
    border-top-right-radius: 10px !important; }
  .popover.bottom h3,
  .popover.bottom .popover-title {
    margin-bottom: 10px; }
  .popover.bottom .popover-navigation {
    padding-top: 30px; }

.readyNowModalNavBar ul li {
  opacity: 0.5;
  pointer-events: none; }
  .readyNowModalNavBar ul li:first-child, .readyNowModalNavBar ul li:nth-child(2), .readyNowModalNavBar ul li.active {
    opacity: 1;
    pointer-events: all; }

.help-popover {
  background-color: #352B63 !important;
  font-family: "Euclid Circular B" !important;
  font-weight: 400 !important;
  position: fixed;
  z-index: 1010;
  top: 90px;
  left: 260px;
  width: 400px;
  transition: all 0.3s ease-in-out;
  padding: 20px;
  border-radius: 10px;
  display: none; }
  .help-popover:before {
    content: "";
    position: absolute;
    top: 18px;
    left: -50px;
    width: 12px;
    height: 12px;
    border-radius: 20px;
    border: none;
    background-color: #352B63; }
  .help-popover:after {
    content: "";
    position: absolute;
    left: -38px;
    top: 23px;
    width: 46px;
    height: 2px;
    border: none;
    background-color: #352B63; }
  .help-popover .help-popover-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    font-size: 16px;
    color: #ffffff;
    font-weight: 600; }
    .help-popover .help-popover-title img {
      cursor: pointer;
      width: 14px; }
  .help-popover .help-popover-content {
    color: #ffffff;
    font-weight: 400;
    font-size: 14px; }
  .help-popover.visible {
    display: block; }
  .help-popover#readynow {
    top: 220px; }
  .help-popover#custommodels {
    top: 280px; }
  .help-popover#datasets {
    top: 344px; }
  .help-popover#devices {
    top: 405px; }
  .help-popover#raw-data {
    top: 468px; }

#help-questionRaw {
  margin-left: 7px;
  border: none;
  background: none;
  box-shadow: none;
  padding: 0; }

.blue-button {
  background: #138bfa;
  /* Old browsers */
  background: -moz-linear-gradient(top, #138bfa 0%, #138bfa 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #138bfa 0%, #138bfa 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #138bfa 0%, #138bfa 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#138bfa', endColorstr='#138bfa',GradientType=0 );
  /* IE6-9 */
  border-radius: 26px;
  border: 0;
  transition: all 0.2s ease-in;
  color: white;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
  cursor: pointer; }
  .blue-button:hover, .blue-button:active, .blue-button:focus {
    background: #3b98ec;
    /* Old browsers */
    background: -moz-linear-gradient(top, #3b98ec 0%, #3b98ec 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #3b98ec 0%, #3b98ec 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #3b98ec 0%, #3b98ec 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b98ec', endColorstr='#3b98ec',GradientType=0 );
    /* IE6-9 */
    color: white !important;
    transition: all 0.2s ease-in; }

.blue-border-button {
  background: #fff;
  border-radius: 26px;
  transition: all 0.2s ease-in;
  border: solid 1px #138bfa;
  color: #138bfa !important;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
  cursor: pointer; }
  .blue-border-button:hover, .blue-border-button:active, .blue-border-button:focus {
    color: #3b98ec !important; }

.upgrade-button {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 14px;
  border: none;
  padding: 8px 15px;
  gap: 10px;
  width: 89px;
  height: 36px;
  left: 1081px;
  top: 12px;
  background: linear-gradient(267.94deg, #48FDE1 -23.98%, #60EFFF 96.66%);
  border-radius: 20px; }
  .upgrade-button button {
    width: 59px;
    height: 20px;
    font-family: "Euclid Circular B";
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    /* identical to box height, or 143% */
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #303030;
    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0; }

.orange-button,
.orange-border-button {
  background: #8020CF;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f7941d+0,f7941d+100 */
  background: #8020cf;
  /* Old browsers */
  background: -moz-linear-gradient(top, #8020cf 0%, #8020cf 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #8020cf 0%, #8020cf 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #8020cf 0%, #8020cf 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8020CF', endColorstr='#8020CF',GradientType=0 );
  /* IE6-9 */
  color: #fff !important;
  text-align: center;
  border: solid 2px #8020CF;
  font-family: "Euclid Circular B";
  border-radius: 10px;
  transition: all 0.2s ease-in;
  cursor: pointer;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-appearance: none !important; }
  .orange-button:focus,
  .orange-border-button:focus {
    color: #fff !important;
    background: #8020CF;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f7941d+0,f7941d+100 */
    background: #f7941d;
    /* Old browsers */
    background: -moz-linear-gradient(top, #8020cf 0%, #8020cf 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #8020cf 0%, #8020cf 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #8020cf 0%, #8020cf 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8020CF', endColorstr='#8020CF',GradientType=0 );
    /* IE6-9 */ }
  .orange-button:hover, .orange-button:active, .orange-button:focus:hover,
  .orange-border-button:hover,
  .orange-border-button:active,
  .orange-border-button:focus:hover {
    color: #fff !important;
    background: #8020CF;
    border-color: #8020CF;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fbaf54+0,fbaf54+100 */
    background: #8020cf;
    /* Old browsers */
    background: -moz-linear-gradient(top, #8020cf 0%, #8020cf 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #8020cf 0%, #8020cf 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #8020cf 0%, #8020cf 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8020CF', endColorstr='#8020CF',GradientType=0 );
    /* IE6-9 */ }

.darkOrangeBtn {
  background: linear-gradient(90deg, #8020CF 0%, #492DE6 100%);
  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.08), inset 0px -1px 0px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  color: #ffffff;
  height: 36px !important;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0 15px;
  min-height: 36px;
  border: none;
  transition: all 0.2s ease-in;
  /*&:focus {
    background-color: #FBCA84;
    color: #F7941D;
  }*/ }
  .darkOrangeBtn:hover {
    color: #ffffff; }

.lightPurpleBtn {
  background: #F2E9FA;
  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.08), inset 0px -1px 0px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  color: #303030 !important;
  font-family: "Euclid Circular B";
  font-weight: 500;
  padding: 0 15px;
  height: 36px;
  border: none !important;
  transition: all 0.2s ease-in;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer; }

.lightOrangeBtn {
  background: linear-gradient(267.94deg, #48FDE1 -23.98%, #60EFFF 96.66%);
  color: #303030;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-family: "Euclid Circular B";
  font-weight: 500;
  border-radius: 20px;
  padding: 0 15px;
  min-height: 36px;
  border: none !important;
  transition: all 0.2s ease-in; }
  .lightOrangeBtn:hover, .lightOrangeBtn:focus {
    color: #303030; }

.blueLightBorderBtn {
  background: transparent;
  border: solid 1px #360D57;
  color: #360D57 !important;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  padding: 0 15px;
  min-height: 36px;
  transition: all 0.2s ease-in; }
  .blueLightBorderBtn:hover, .blueLightBorderBtn:focus {
    color: #360D57; }

.darkBlueBtn {
  background-color: #8020CF;
  color: #ffffff;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  padding: 0 15px;
  min-height: 36px;
  border: none;
  transition: all 0.2s ease-in; }
  .darkBlueBtn:hover {
    background-color: #8020CF;
    color: #ffffff; }
  .darkBlueBtn:focus {
    background-color: #8020CF;
    color: #ffffff; }
  .darkBlueBtn:disabled {
    background-color: #F6F6F7;
    color: #8C9196; }

.purpleBtn {
  background-color: #8020CF;
  color: #ffffff !important;
  cursor: pointer !important;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  padding: 0 15px;
  min-height: 36px;
  border: none;
  transition: all 0.2s ease-in; }
  .purpleBtn:hover {
    opacity: 0.9;
    color: #ffffff !important; }
  .purpleBtn.disabled {
    background-color: #F6F6F7 !important;
    color: #8C9196 !important;
    pointer-events: none; }

.purpleBorderBtn {
  background-color: transparent !important;
  color: #8020CF !important;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  padding: 0 15px;
  min-height: 36px;
  border: 1px solid #8020CF;
  transition: all 0.2s ease-in; }
  .purpleBorderBtn:hover {
    opacity: 0.9; }
  .purpleBorderBtn:disabled {
    background-color: #F6F6F7;
    color: #8C9196; }

.darkPurpleBtn {
  background-color: #352B63 !important;
  color: #FFFFFF !important;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  padding: 0 15px;
  min-height: 36px;
  border: none;
  transition: all 0.2s ease-in; }
  .darkPurpleBtn:hover {
    opacity: 0.9; }
  .darkPurpleBtn:disabled {
    background-color: #F6F6F7;
    color: #8C9196; }

.darkPurpleBorderBtn {
  background-color: transparent !important;
  color: #210835 !important;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  padding: 0 15px;
  min-height: 36px;
  border: 1px solid #210835;
  transition: all 0.2s ease-in; }
  .darkPurpleBorderBtn:hover {
    opacity: 0.9; }
  .darkPurpleBorderBtn:disabled {
    background-color: #F6F6F7;
    color: #8C9196; }

.justTextBtn {
  background-color: #ffffff;
  color: #303030;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  padding: 0 15px;
  min-height: 36px;
  border: none;
  transition: all 0.2s ease-in; }
  .justTextBtn:hover {
    opacity: 0.8; }
  .justTextBtn:disabled {
    background-color: #F6F6F7;
    color: #8C9196; }

.lightGrayWithBlueTextBtn {
  background-color: #F2E9FA;
  color: #352B63;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  padding: 0 15px;
  min-height: 36px;
  border: none;
  transition: all 0.2s ease-in; }

.disabled-white-btn {
  background: linear-gradient(267.94deg, #F7F7F7 -23.98%, #F7F7F7 96.66%) !important;
  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.08), inset 0px -1px 0px rgba(0, 0, 0, 0.2) !important;
  color: #B7B7B7;
  pointer-events: none !important;
  opacity: 1 !important; }
  .disabled-white-btn img {
    opacity: 0.5 !important; }

.borderedDropdown {
  padding: 10px 30px 10px 12px !important;
  height: 36px !important;
  background-color: transparent !important;
  box-shadow: 0px 2px 5px rgba(40, 40, 40, 0.1) !important;
  border-radius: 10px !important;
  color: #360D57 !important;
  font-size: 14px !important;
  font-family: "Euclid Circular B" !important;
  font-weight: 500 !important;
  display: flex;
  align-items: center;
  border: 1px solid #360D57 !important; }

.dotsDropdownBtn {
  position: relative;
  border-radius: 5px; }
  .dotsDropdownBtn .dotsDropdownActionBtn {
    background: url(../img/option-vellips-darkgray.svg) center center no-repeat;
    border-radius: 30px;
    height: 25px;
    width: 25px;
    border: 0;
    color: #D8D8D8;
    font-size: 16px;
    padding: 0;
    cursor: pointer; }
  .dotsDropdownBtn .dotsDropdownActionItemList {
    position: absolute;
    top: 0;
    right: 25px;
    background: #ffffff;
    border-radius: 6px;
    display: none;
    flex-direction: column;
    box-shadow: 0px 3px 5px rgba(6, 0, 41, 0.2);
    margin: 0;
    text-align: left;
    width: 130px; }
    .dotsDropdownBtn .dotsDropdownActionItemList div {
      padding: 5px 10px;
      cursor: pointer; }
      .dotsDropdownBtn .dotsDropdownActionItemList div:hover {
        background-color: #EAEAEA; }
    .dotsDropdownBtn .dotsDropdownActionItemList.active {
      display: block; }

.redBtn {
  background: #BF2600;
  border: none;
  color: #FFFFFF !important;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px !important;
  padding: 5px 12px;
  min-height: 36px;
  transition: all 0.2s ease-in; }
  .redBtn:hover, .redBtn:focus {
    background: #BF2600;
    color: #360D57; }

.transparentBtn {
  background: transparent;
  border: none;
  color: #303030 !important;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  padding: 5px 12px;
  min-height: 36px;
  transition: all 0.2s ease-in; }
  .transparentBtn:hover, .transparentBtn:focus {
    color: #303030; }

.purple-text {
  padding: 0 10px;
  color: #8020CF;
  cursor: pointer;
  font-weight: 500;
  margin-bottom: 0 !important; }

.cb-container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }
  .cb-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer; }
  .cb-container .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #FFFFFF;
    border-radius: 50%;
    border: 1px solid #878787; }
  .cb-container input:checked ~ .checkmark {
    background-color: #8020CF; }
  .cb-container .checkmark:after {
    content: "";
    position: absolute;
    display: none; }
  .cb-container input:checked ~ .checkmark:after {
    display: block; }
  .cb-container .checkmark:after {
    top: 2px;
    left: 2px;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: #8020CF;
    border: 3px solid white; }

.customGrayDropdown {
  position: relative;
  margin-bottom: 20px; }
  .customGrayDropdown label {
    font-weight: 500 !important;
    font-size: 16px !important;
    line-height: 20px !important;
    color: #210835 !important;
    margin-bottom: 0.2rem !important; }
  .customGrayDropdown .itemBtn {
    border: 1px solid #E0E0E0;
    border-radius: 6px;
    background: #F7F7F7 url(../img/trangle-down-arrow-gray.svg) 94% center no-repeat;
    width: 100%;
    padding: 0 35px 0 10px;
    height: 52px;
    cursor: pointer;
    color: #4E4576;
    display: inline-block;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-size: 14px; }
    .customGrayDropdown .itemBtn:focus {
      color: #4E4576 !important;
      border: 1px solid #8020CF; }
  .customGrayDropdown .dropdownItemList {
    position: absolute;
    top: 77px;
    left: 0;
    width: 100%;
    background: #FAFBFC;
    box-shadow: 0px 3px 5px rgba(44, 44, 44, 0.2), 0px 0px 1px rgba(44, 44, 44, 0.31);
    border-radius: 6px;
    margin: 0;
    padding: 5px 0 !important;
    flex-direction: column !important;
    display: none;
    max-height: 200px;
    overflow: hidden; }
    .customGrayDropdown .dropdownItemList .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden {
      margin-right: 0; }
    .customGrayDropdown .dropdownItemList .mCSB_inside > .mCSB_container {
      margin-right: 0; }
    .customGrayDropdown .dropdownItemList li {
      width: 100%;
      padding: 0 !important; }
      .customGrayDropdown .dropdownItemList li:hover {
        cursor: pointer; }
      .customGrayDropdown .dropdownItemList li a {
        font-size: 13px;
        color: #535353;
        display: block;
        padding: 8px 12px;
        width: 100%;
        text-align: left; }
      .customGrayDropdown .dropdownItemList li:hover a,
      .customGrayDropdown .dropdownItemList li:hover a:focus {
        background: #F7F7F7; }
      .customGrayDropdown .dropdownItemList li.disabled {
        pointer-events: none !important;
        color: #B7B7B7 !important; }
    .customGrayDropdown .dropdownItemList.show {
      display: block;
      z-index: 2; }

.loginBg {
  width: 100%;
  min-height: 100vh;
  height: auto;
  float: left;
  background: #F2F2F2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 20px; }
  @media (min-width: 1200px) {
    .loginBg {
      padding: initial;
      padding: 40px 0;
      justify-content: center; } }

.loginArea {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  max-width: 1030px; }

.loginFormContainer {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-bottom: 0; }
  @media (min-width: 639px) {
    .loginFormContainer {
      width: 460px; } }
  .loginFormContainer input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px #fff inset;
    -webkit-text-fill-color: #4a4a4a !important; }
  .loginFormContainer input[type=text],
  .loginFormContainer input[type=password] {
    border: 1px solid #9B9B9B;
    box-sizing: border-box;
    border-radius: 26px;
    height: 50px;
    font-size: 16px;
    font-weight: 400;
    padding: 10px 20px 10px 20px;
    transition: 0.2s ease-in all;
    color: #4a4a4a; }
    .loginFormContainer input[type=text]::-webkit-input-placeholder,
    .loginFormContainer input[type=password]::-webkit-input-placeholder {
      /* Chrome/Opera/Safari */
      color: rgba(0, 0, 0, 0.6);
      transition: 0.2s ease-in all; }
    .loginFormContainer input[type=text]::-moz-placeholder,
    .loginFormContainer input[type=password]::-moz-placeholder {
      /* Firefox 19+ */
      transition: 0.2s ease-in all;
      color: #000; }
    .loginFormContainer input[type=text]:-ms-input-placeholder,
    .loginFormContainer input[type=password]:-ms-input-placeholder {
      /* IE 10+ */
      transition: 0.2s ease-in all;
      color: rgba(0, 0, 0, 0.6); }
    .loginFormContainer input[type=text]:-moz-placeholder,
    .loginFormContainer input[type=password]:-moz-placeholder {
      /* Firefox 18- */
      transition: 0.2s ease-in all;
      color: rgba(0, 0, 0, 0.6); }
    .loginFormContainer input[type=text]:focus,
    .loginFormContainer input[type=password]:focus {
      color: #4a4a4a;
      outline: 0; }
      .loginFormContainer input[type=text]:focus::-webkit-input-placeholder,
      .loginFormContainer input[type=password]:focus::-webkit-input-placeholder {
        /* Chrome/Opera/Safari */
        color: #4a4a4a; }
      .loginFormContainer input[type=text]:focus::-moz-placeholder,
      .loginFormContainer input[type=password]:focus::-moz-placeholder {
        /* Firefox 19+ */
        color: #4a4a4a; }
      .loginFormContainer input[type=text]:focus:-ms-input-placeholder,
      .loginFormContainer input[type=password]:focus:-ms-input-placeholder {
        /* IE 10+ */
        color: #4a4a4a; }
      .loginFormContainer input[type=text]:focus:-moz-placeholder,
      .loginFormContainer input[type=password]:focus:-moz-placeholder {
        /* Firefox 18- */
        color: #4a4a4a; }

.loginForm {
  padding: 0px !important;
  width: 100%;
  position: relative;
  font-family: "latoregular";
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 0; }

.loginValidation {
  color: #EB5857;
  font-size: 14px !important;
  display: none;
  font-weight: 500; }
  .loginValidation a {
    transition: all 0.2s ease-in;
    color: #DE350B;
    font-weight: 600; }
    .loginValidation a:focus, .loginValidation a:active {
      color: #8020CF !important; }
    .loginValidation a:hover {
      text-decoration: underline !important; }

.loginUsernameLabel {
  position: relative;
  width: 100%;
  margin-bottom: 20px; }
  .loginUsernameLabel:before {
    position: absolute;
    background: white;
    color: #138BFA;
    font-weight: 500;
    font-size: 14px;
    left: 45px;
    top: -9px;
    z-index: 9;
    padding: 0 5px; }
  .loginUsernameLabel input {
    background: #fff;
    font-family: "latoregular";
    font-size: 14px;
    font-weight: 500;
    color: #4a4a4a !important;
    width: 100%;
    display: block; }
  .loginUsernameLabel img {
    transition: 0.2s ease-in all;
    position: absolute;
    left: 10px;
    top: 13px;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor; }

.loginPasswordLabel {
  position: relative;
  width: 100%;
  margin-bottom: 20px; }
  .loginPasswordLabel:before {
    position: absolute;
    background: white;
    color: #138BFA;
    font-weight: 500;
    font-size: 14px;
    left: 45px;
    top: -9px;
    z-index: 9;
    padding: 0 5px; }
  .loginPasswordLabel input {
    background: #fff;
    font-family: "latoregular";
    font-size: 14px;
    font-weight: 500;
    color: #4a4a4a !important;
    width: 100%;
    display: block; }
  .loginPasswordLabel img {
    position: absolute;
    left: 10px;
    top: 13px;
    transition: 0.2s ease-in all;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor; }

.loginWrapper {
  background: #fff;
  width: 500px;
  min-height: 100vh;
  margin: 0 auto;
  position: relative; }

.loginLogoArea {
  width: 320px;
  height: 115px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #cdcdcd;
  border-radius: 7px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: none; }
  @media (min-width: 1680px) {
    .loginLogoArea {
      height: 255px; } }

.loginAreaWrapper {
  width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto; }
  .loginAreaWrapper h1 {
    font-family: "latoregular";
    font-weight: bold;
    color: #58595b;
    text-align: center;
    font-size: 33px;
    margin: 10px 0; }
    @media (min-width: 1680px) {
      .loginAreaWrapper h1 {
        margin: 50px 0; } }

.loginArea input:focus {
  outline: 0; }

.loginUsername {
  position: relative; }
  .loginUsername input {
    background: #e2e2e2;
    border: 0;
    border-radius: 5px;
    color: #58595b;
    font-family: "latoregular";
    font-size: 16px;
    margin-bottom: 20px;
    height: 40px;
    width: 100%;
    padding-left: 45px;
    font-size: 16px; }
  .loginUsername img {
    position: absolute;
    left: 10px;
    top: 5px;
    width: 23px; }

.loginPw {
  position: relative; }
  .loginPw input {
    background: #e2e2e2;
    border: 0;
    border-radius: 5px;
    color: #58595b;
    font-family: "latoregular";
    font-size: 16px;
    margin-bottom: 20px;
    height: 40px;
    padding-left: 45px;
    width: 100%; }
  .loginPw img {
    position: absolute;
    left: 10px;
    top: 5px;
    width: 22px; }

.login_forgotPw {
  font-family: "latoregular";
  font-size: 14px;
  color: #4a4a4a;
  font-weight: 500;
  float: left; }
  .login_forgotPw a {
    font-weight: 500;
    text-decoration: none;
    color: #4a4a4a;
    text-decoration: underline; }
    .login_forgotPw a:active, .login_forgotPw a:focus {
      color: #4a4a4a !important; }

.login_signUp {
  font-family: "latoregular";
  font-size: 14px;
  color: #4a4a4a;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; }
  @media (max-width: 1023px) {
    .login_signUp {
      margin-top: 30px; } }
  .login_signUp a {
    font-weight: 500;
    text-decoration: none;
    color: #f7941d;
    text-decoration: none; }
    .login_signUp a:active, .login_signUp a:focus {
      color: #4a4a4a !important; }

.brand-checkbox-label {
  float: left; }

.brand-checkbox-input {
  display: none; }

.brand-checkbox-icon {
  display: inline-block;
  position: relative;
  width: 24px;
  height: 24px;
  background: #fff;
  border: 1px solid #9B9B9B;
  margin-top: 3px;
  cursor: pointer;
  float: left; }

.brand-checkbox-icon::after {
  display: block;
  position: absolute;
  content: "";
  left: -1px;
  top: -1px;
  font-size: 13px;
  width: 24px;
  height: 24px;
  overflow: hidden; }

.brand-checkbox-input:checked ~ .brand-checkbox-icon::after {
  background: url(../img/icon-check-orange.svg) no-repeat center center; }

.remember_forgot .brand-checkbox i:after {
  left: 2px; }

.brand-checkbox {
  font-family: "latoregular";
  color: #828282;
  float: left;
  margin-top: 10px;
  float: right;
  font-size: 14px; }
  @media (min-width: 768px) {
    .brand-checkbox {
      font-size: 16px; } }
  .brand-checkbox label {
    width: initial !important;
    float: left;
    padding-left: 10px;
    font-weight: 400;
    cursor: pointer; }

.loginAccountActions {
  width: 100%;
  margin-top: 0;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center; }
  .loginAccountActions .login_signUp {
    width: auto; }
  .loginAccountActions p {
    margin-top: 0;
    font-size: 14px; }
  @media (max-width: 767px) {
    .loginAccountActions {
      flex-direction: column; } }

.loginFooter {
  color: #58595b;
  width: 100%;
  height: 55px;
  border-top: 1px #cdcdcd solid;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500; }
  @media (min-width: 1200px) {
    .loginFooter {
      height: 45px; } }
  @media (min-width: 1400px) {
    .loginFooter {
      height: 55px;
      position: absolute; } }
  .loginFooter p {
    margin: 0;
    color: #58595b;
    font-family: "latoregular";
    width: 320px;
    text-align: center;
    margin: 0 auto;
    font-size: 12px; }

.loginCopyright {
  color: #58595B;
  font-size: 14px;
  display: flex;
  align-items: center;
  margin-top: 35px !important;
  font-weight: normal; }
  .loginCopyright .devider {
    width: 1px;
    height: 14px;
    background: #595959;
    display: inline-block;
    margin: 0 10px; }
  @media (min-width: 1023px) {
    .loginCopyright {
      margin-top: 40px !important; } }

.loginWebsite {
  font-size: 16px;
  display: flex;
  margin-top: 15px !important; }
  @media (min-width: 1023px) {
    .loginWebsite {
      margin-top: 2px !important; } }
  .loginWebsite a {
    color: gainsboro;
    text-decoration: underline; }
    .loginWebsite a:focus, .loginWebsite a:active {
      color: gainsboro !important; }

.signupSuccess {
  font-family: "latoregular"; }
  .signupSuccess p {
    text-align: center;
    font-weight: 400;
    font-size: 28px;
    line-height: 36px;
    color: #210835; }
  .signupSuccess h1 {
    text-align: center;
    display: block;
    font-weight: 400;
    font-size: 34px;
    line-height: 36px;
    color: #4E4576; }
  .signupSuccess img {
    width: 240px;
    margin-bottom: 50px; }
  .signupSuccess a {
    color: #8020CF; }
    .signupSuccess a:active, .signupSuccess a:focus {
      color: #484848 !important; }
  .signupSuccess .confirmedBanner {
    font-weight: 600;
    font-size: 32px;
    line-height: 26px;
    text-align: center;
    color: #210835; }
  .signupSuccess .confirmedText {
    font-weight: 400;
    font-size: 18px;
    line-height: 20px;
    text-align: center;
    color: #303030; }
  .signupSuccess .tick {
    width: 86px;
    margin-bottom: 20px !important;
    margin-top: 80px; }

.welcomeBtn {
  color: white !important;
  width: 150px !important;
  margin: 0 auto 20px auto;
  text-decoration: none; }

.emailExistError {
  font-family: "latoregular";
  color: #484848;
  float: left;
  text-align: center;
  width: 100%;
  line-height: 24px; }
  .emailExistError a {
    color: #8020CF; }
    .emailExistError a:focus, .emailExistError a:active {
      color: #8020CF; }

.loginBg .socialLogin {
  width: 100%; }
  @media (min-width: 1200px) {
    .loginBg .socialLogin {
      margin: 30px 0; } }
  .loginBg .socialLogin ul {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0 auto; }
    @media (min-width: 1200px) {
      .loginBg .socialLogin ul {
        flex-direction: row; } }
    .loginBg .socialLogin ul li {
      list-style-type: none;
      float: left;
      width: 100%; }
      @media (min-width: 768px) {
        .loginBg .socialLogin ul li {
          max-width: 282px; } }
      .loginBg .socialLogin ul li:first-of-type {
        margin-bottom: 10px; }
        @media (min-width: 1200px) {
          .loginBg .socialLogin ul li:first-of-type {
            margin-bottom: initial;
            margin-right: 20px; } }
      .loginBg .socialLogin ul li a {
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        background: white;
        border: 1px solid #e0e0e0;
        border-radius: 26px;
        padding: 0 25px;
        height: 50px;
        font-size: 14px;
        color: #828282;
        width: 100%; }
        .loginBg .socialLogin ul li a:hover, .loginBg .socialLogin ul li a:focus, .loginBg .socialLogin ul li a:active {
          transition: all 0.2s ease-in;
          color: #828282 !important;
          text-decoration: none;
          opacity: 0.8; }
      .loginBg .socialLogin ul li img {
        margin-right: 20px;
        height: 24px; }
        @media (min-width: 1200px) {
          .loginBg .socialLogin ul li img {
            margin-right: 18px; } }

.login_header {
  width: 100%;
  height: 80px;
  position: relative;
  z-index: 100;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1); }
  .login_header .logo {
    width: 230px; }

.orangeRadialBgBar-left {
  width: 100%;
  border-radius: 30px;
  background-color: #f7941d;
  height: 45px;
  background-image: url(../img/fill_1.png);
  background-repeat: no-repeat;
  background-position: 115% center;
  padding: 0 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px; }
  @media (min-width: 1200px) {
    .orangeRadialBgBar-left {
      height: 60px; } }
  .orangeRadialBgBar-left h1 {
    font-size: 26px;
    color: white;
    font-weight: 300;
    float: left;
    margin: 0; }
    @media (min-width: 1200px) {
      .orangeRadialBgBar-left h1 {
        font-size: 22px; } }

.signUpLogo,
.loginLogo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 35px; }
  .signUpLogo img,
  .loginLogo img {
    width: 176px; }

.loginFormWrapper {
  background: white;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 10px;
  padding: 50px 0; }
  @media (max-width: 967px) {
    .loginFormWrapper {
      padding-left: 20px;
      padding-right: 20px; } }

.login-pw-toggle-hidden {
  position: absolute;
  right: 16px;
  left: initial !important;
  cursor: pointer; }

.login-pw-toggle-visible {
  display: none;
  position: absolute;
  right: 16px;
  left: initial !important;
  opacity: 0.5;
  cursor: pointer; }

.login-pw-toggle-active {
  display: block !important; }

.login-pw-toggle-inactive {
  display: none !important; }

.loginBtn {
  width: 100%;
  height: 50px;
  color: white;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 500; }
  @media (min-width: 768px) {
    .loginBtn {
      width: 175px;
      height: 50px; } }

.login_ButtonArea {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center; }
  .login_ButtonArea a {
    color: #f7941d;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none; }
    @media (min-width: 1200px) {
      .login_ButtonArea a {
        font-size: 14px;
        margin-top: initial; } }
  .login_ButtonArea p {
    text-align: right;
    width: 100%;
    margin: 0 0 20px; }
    @media (max-width: 768px) {
      .login_ButtonArea p {
        text-align: center; } }

.login_or {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
  margin-bottom: 10px;
  position: relative; }
  @media (min-width: 1200px) {
    .login_or {
      font-size: 14px;
      margin-top: 45px; } }
  .login_or:after {
    content: "";
    width: 100%;
    height: 1px;
    background: #E2E2E4;
    position: absolute;
    left: 0;
    z-index: 1; }
    @media (min-width: 768px) {
      .login_or:after {
        width: calc(100% + 100px);
        left: -50px; } }
  .login_or span {
    align-items: center;
    justify-content: center;
    display: flex;
    color: #4A4A4A;
    font-size: 14px;
    border: 1px solid #E2E2E4;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    background: white;
    position: relative;
    z-index: 9; }

.input-warning-bordered {
  border-color: #EB5757 !important; }

.forgotPwBg {
  justify-content: flex-start !important; }
  .forgotPwBg .forgotPwInput {
    border: 1px solid #9B9B9B;
    box-sizing: border-box;
    border-radius: 26px;
    height: 50px;
    font-size: 16px;
    font-weight: 400;
    padding: 10px 20px 10px 20px;
    transition: 0.2s ease-in all;
    color: #595959; }
    .forgotPwBg .forgotPwInput::-webkit-input-placeholder {
      /* Chrome/Opera/Safari */
      color: #595959;
      transition: 0.2s ease-in all; }
    .forgotPwBg .forgotPwInput::-moz-placeholder {
      /* Firefox 19+ */
      transition: 0.2s ease-in all;
      color: #000; }
    .forgotPwBg .forgotPwInput:-ms-input-placeholder {
      /* IE 10+ */
      transition: 0.2s ease-in all;
      color: #595959; }
    .forgotPwBg .forgotPwInput:-moz-placeholder {
      /* Firefox 18- */
      transition: 0.2s ease-in all;
      color: #000; }
    .forgotPwBg .forgotPwInput:focus {
      color: #4a4a4a;
      outline: 0; }
      .forgotPwBg .forgotPwInput:focus::-webkit-input-placeholder {
        /* Chrome/Opera/Safari */
        color: #4a4a4a; }
      .forgotPwBg .forgotPwInput:focus::-moz-placeholder {
        /* Firefox 19+ */
        color: #4a4a4a; }
      .forgotPwBg .forgotPwInput:focus:-ms-input-placeholder {
        /* IE 10+ */
        color: #4a4a4a; }
      .forgotPwBg .forgotPwInput:focus:-moz-placeholder {
        /* Firefox 18- */
        color: #4a4a4a; }
  .forgotPwBg .forgotPwContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 50px 0 120px 0 !important;
    position: relative; }
    .forgotPwBg .forgotPwContainer h1 {
      font-weight: 500;
      font-size: 24px;
      line-height: 36px;
      color: #210835;
      margin-bottom: 18px; }
    .forgotPwBg .forgotPwContainer h2 {
      font-weight: 400;
      font-size: 16px;
      line-height: 20px;
      color: #210835;
      margin-bottom: 56px; }
    .forgotPwBg .forgotPwContainer .loginUsernameLabel {
      margin: 0 0 15px; }
    .forgotPwBg .forgotPwContainer form {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      max-width: 460px; }
      .forgotPwBg .forgotPwContainer form input[type=email] {
        background: #FAFBFC;
        border: 1px solid #DFE1E6;
        border-radius: 5px;
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        color: #210835; }
      .forgotPwBg .forgotPwContainer form p {
        margin-top: 140px;
        font-size: 16px;
        color: #595959;
        font-weight: 400;
        color: #210835; }
        .forgotPwBg .forgotPwContainer form p a {
          color: #8020CF;
          font-weight: 600; }
      .forgotPwBg .forgotPwContainer form input[value="Reset Password"] {
        font-size: 14px;
        font-weight: 500;
        min-width: 147px; }
        .forgotPwBg .forgotPwContainer form input[value="Reset Password"]:focus {
          outline: none; }

.forgotPw760 {
  width: 100%;
  max-width: 1030px; }
  .forgotPw760 img {
    width: 280px;
    margin-bottom: 50px; }

.invalid-email-address {
  position: absolute;
  left: 0;
  bottom: -30px;
  right: 0;
  text-align: center; }

.forgotPw760 .invalid-email-address {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #00875A;
  position: static;
  display: flex;
  justify-content: center; }

.forgotPwSuccess {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  position: absolute;
  height: 100%;
  z-index: 99;
  background: white;
  bottom: 0;
  border-radius: 10px;
  left: 0; }
  .forgotPwSuccess .orange-button {
    width: 100%;
    max-width: 240px;
    height: 42px;
    font-weight: 500; }
  .forgotPwSuccess img {
    width: 50px;
    margin-top: -40px; }
  .forgotPwSuccess p {
    margin-top: 30px;
    font-size: 16px;
    text-align: center;
    color: #4A4A4A;
    margin-bottom: 40px; }

.authenticationContainer {
  width: 100%;
  max-width: 500px;
  margin-bottom: 100px; }
  .authenticationContainer h4 {
    font-size: 16px;
    color: #210835;
    margin: 20px 0 50px;
    text-align: center;
    font-weight: 600; }
  .authenticationContainer .confirmCodeBtn {
    min-width: 100px;
    padding: 0 15px;
    height: 36px;
    border-radius: 10px;
    font-size: 14px;
    border: none;
    background-color: #8020CF;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 30px 0 0 auto; }
  .authenticationContainer .confirmCodeBtn:disabled,
  .authenticationContainer .confirmCodeBtn[disabled] {
    background-color: #F7F7F7;
    color: #B7B7B7;
    pointer-events: none; }
  .authenticationContainer .enterDetail h5 {
    color: #595959;
    font-size: 16px;
    margin-top: 0;
    margin-bottom: 10px;
    font-weight: 500; }
  .authenticationContainer .enterDetail p {
    color: #A39E9E;
    margin-bottom: 15px;
    font-size: 14px; }
    .authenticationContainer .enterDetail p strong {
      font-weight: normal;
      color: #595959; }
    .authenticationContainer .enterDetail p .number {
      color: #000; }
  .authenticationContainer .enterDetail .note {
    margin-top: 10px;
    margin-bottom: 0;
    color: #DD8010;
    font-size: 14px; }
    .authenticationContainer .enterDetail .note.authMsg {
      color: #8020CF;
      width: 90%; }
  .authenticationContainer .enterDetail .extraLinks {
    display: flex; }
  .authenticationContainer .enterDetail .resendCode {
    display: inline-block;
    /*text-decoration: underline;
      text-underline-position: under;*/
    color: #8020CF;
    font-size: 14px;
    font-weight: 600;
    /*&:hover,
      &:focus {
      	text-decoration: underline;
      }*/ }
    .authenticationContainer .enterDetail .resendCode .customTooltipHover {
      display: inline-block;
      margin-right: 5px; }
    .authenticationContainer .enterDetail .resendCode .customTooltip {
      font-style: normal;
      width: 415px;
      white-space: normal;
      top: 25px;
      left: 0;
      padding: 10px; }
  .authenticationContainer .enterDetail .getBackupCode {
    display: inline-block;
    text-decoration: underline;
    text-underline-position: under;
    color: #8020CF;
    font-size: 14px;
    margin-left: auto; }
    .authenticationContainer .enterDetail .getBackupCode:hover, .authenticationContainer .enterDetail .getBackupCode:focus {
      text-decoration: underline; }
  .authenticationContainer .enterDetail .enterCode {
    margin-top: 5px;
    /*border: solid 1px #8020CF;
      height: 70px;
      padding: 10px;
      box-shadow: 2px 6px 24px rgba(0, 0, 0, 0.08);
      border-radius: 5px;*/
    margin-bottom: 10px; }
    .authenticationContainer .enterDetail .enterCode label {
      display: block;
      margin-bottom: 0;
      font-weight: 500;
      font-size: 16px;
      color: #535353; }
    .authenticationContainer .enterDetail .enterCode .errorText {
      color: #EB5857;
      font-size: 14px;
      margin-top: 12px;
      display: none; }
    .authenticationContainer .enterDetail .enterCode .error_msg {
      margin-top: 5px;
      color: #EB5857; }
    .authenticationContainer .enterDetail .enterCode .enterCodeInput {
      color: #58595B;
      font-size: 14px;
      width: 100%;
      height: 50px;
      padding: 0 20px;
      border: none;
      box-shadow: none;
      background: #F7F7F7;
      border: 1px solid #e0e0e0;
      border-radius: 5px;
      max-width: 415px; }
      .authenticationContainer .enterDetail .enterCode .enterCodeInput:focus {
        border: 1px solid #8020CF; }
      .authenticationContainer .enterDetail .enterCode .enterCodeInput.notValidCode ~ .errorText {
        display: block; }

.login-content-mobile {
  height: 100vh;
  width: 100%;
  background: linear-gradient(221.79deg, #8020CF 23.02%, #22FCDB 100%);
  padding: 1vh 10px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  display: none; }
  .login-content-mobile .header {
    font-family: "Euclid Circular B";
    font-weight: 600;
    font-size: 24px;
    line-height: 42px;
    letter-spacing: 0.08em;
    color: #F2E9FA;
    text-align: center;
    width: 100%; }
  .login-content-mobile .catchword {
    font-family: "Euclid Circular B";
    font-weight: 600;
    font-size: 16px;
    line-height: 32px;
    letter-spacing: 0.02em;
    color: #FFFFFF;
    width: 100%;
    text-align: center; }
    .login-content-mobile .catchword h5 {
      margin-bottom: 5px;
      font-size: 16px;
      font-weight: 600; }
      @media (max-width: 1500px) {
        .login-content-mobile .catchword h5 {
          margin-top: 0; } }
  .login-content-mobile .introducingImageChat {
    margin-bottom: 42px;
    margin-bottom: 42px;
    margin-left: auto;
    margin-right: auto;
    width: 450px; }
    @media (max-width: 1500px) {
      .login-content-mobile .introducingImageChat {
        margin-bottom: 32px; } }
    .login-content-mobile .introducingImageChat h4 {
      margin-bottom: 10px !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      color: #ffffff;
      font-weight: 600;
      font-size: 24px; }
      @media (max-width: 1500px) {
        .login-content-mobile .introducingImageChat h4 {
          margin-top: 0; } }
    .login-content-mobile .introducingImageChat h3 {
      margin-top: 0 !important;
      margin-bottom: 10px;
      margin-left: 0 !important;
      margin-right: 0 !important;
      color: #FFD62B;
      font-weight: 600;
      font-size: 28px;
      line-height: 36px; }
      @media (max-width: 1500px) {
        .login-content-mobile .introducingImageChat h3 {
          margin-top: 0; } }
    .login-content-mobile .introducingImageChat p {
      margin-top: 0;
      margin-bottom: 20px !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      font-size: 20px;
      font-weight: 600;
      max-width: 380px;
      color: #F2F2F2; }
    .login-content-mobile .introducingImageChat .get-started {
      color: #FFF;
      font-size: 16px;
      font-weight: 500;
      line-height: 20px;
      text-decoration-line: underline;
      margin-top: 10px; }
  .login-content-mobile .ImageChatGif {
    width: 450px;
    filter: drop-shadow(2px 8px 24px rgba(255, 255, 255, 0.15));
    border-radius: 10px;
    text-align: center;
    margin-left: auto !important;
    margin-right: auto !important; }
    @media (max-width: 1500px) {
      .login-content-mobile .ImageChatGif {
        margin-bottom: 22px; } }
    .login-content-mobile .ImageChatGif .animationGif {
      max-width: 450px;
      border-radius: 10px; }
  .login-content-mobile .storeButtonWrapper {
    display: flex;
    justify-content: center; }
    .login-content-mobile .storeButtonWrapper a {
      margin: 0 12px; }

.login-content {
  height: 100vh;
  display: flex;
  display: none; }
  .login-content .login-content-left {
    background: linear-gradient(103.05deg, #6306B0 9.41%, #3FECFF 83.02%);
    width: 50%;
    height: 100%;
    padding: 50px 0 0 82px;
    display: flex;
    flex-direction: column; }
    .login-content .login-content-left .header {
      font-family: "Euclid Circular B";
      font-weight: 600;
      font-size: 24px;
      line-height: 42px;
      letter-spacing: 0.08em;
      color: #F2E9FA;
      text-align: center;
      width: 80%;
      margin-top: 0;
      margin-left: auto;
      margin-right: auto; }
      .login-content .login-content-left .header span {
        color: #FFFFFF;
        font-weight: 600; }
    .login-content .login-content-left .catchword {
      font-family: "Euclid Circular B";
      font-weight: 600;
      font-size: 16px;
      letter-spacing: 0.02em;
      color: #FFFFFF;
      margin-left: 100px; }
      @media (max-width: 1500px) {
        .login-content .login-content-left .catchword {
          margin-left: 50px; } }
      .login-content .login-content-left .catchword h5 {
        margin-bottom: 5px;
        font-size: 16px;
        font-weight: 600; }
        @media (max-width: 1500px) {
          .login-content .login-content-left .catchword h5 {
            margin-top: 0; } }
    .login-content .login-content-left .introducingImageChat {
      margin-bottom: 42px; }
      .login-content .login-content-left .introducingImageChat h4 {
        margin-bottom: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        color: #ffffff;
        font-weight: 600;
        font-size: 24px; }
        @media (max-width: 1500px) {
          .login-content .login-content-left .introducingImageChat h4 {
            margin-top: 0; } }
      .login-content .login-content-left .introducingImageChat h3 {
        margin-top: 0 !important;
        margin-bottom: 20px;
        margin-left: 0 !important;
        margin-right: 0 !important;
        color: #FFD62B;
        font-weight: 600;
        font-size: 28px;
        line-height: 36px; }
        @media (max-width: 1500px) {
          .login-content .login-content-left .introducingImageChat h3 {
            margin-top: 0; } }
      .login-content .login-content-left .introducingImageChat p {
        margin-top: 0;
        margin-bottom: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        font-size: 22px;
        font-weight: 600;
        color: #F2F2F2; }
      .login-content .login-content-left .introducingImageChat .get-started {
        color: #FFF;
        font-size: 18px;
        font-weight: 500;
        line-height: 20px;
        text-decoration-line: underline;
        text-underline-offset: 5px; }
    .login-content .login-content-left .ImageChatGif {
      filter: drop-shadow(2px 8px 24px rgba(255, 255, 255, 0.15));
      border-radius: 10px; }
      @media (max-width: 1500px) {
        .login-content .login-content-left .ImageChatGif {
          margin-bottom: 22px; } }
      .login-content .login-content-left .ImageChatGif .animationGif {
        border-radius: 10px; }
        @media (max-width: 1500px) {
          .login-content .login-content-left .ImageChatGif .animationGif {
            max-width: 403px !important; } }
    .login-content .login-content-left .storeButtonWrapper a {
      width: 130px; }
      .login-content .login-content-left .storeButtonWrapper a:nth-child(2) {
        margin: 0 20px; }
      .login-content .login-content-left .storeButtonWrapper a img {
        border-radius: 8px; }
  .login-content .login-content-right {
    background-color: white;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
    height: 100%;
    width: 55%;
    position: absolute;
    right: 0;
    padding: 5vh 0; }
    .login-content .login-content-right .backToLogin {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: solid 2px #878787;
      background: transparent;
      display: none;
      justify-content: center;
      align-items: center;
      padding: 5px;
      box-shadow: none;
      position: absolute;
      top: 5vh;
      left: 33px; }
      .login-content .login-content-right .backToLogin .arrow {
        margin-right: 2px; }
    .login-content .login-content-right .header {
      text-align: center;
      font-family: "Euclid Circular B";
      font-weight: 500;
      font-size: 32px;
      color: #303030;
      margin: 0 !important; }
    .login-content .login-content-right .sub-header {
      font-family: "Euclid Circular B";
      font-weight: 700;
      font-size: 21.9626px;
      line-height: 178.3%;
      text-align: center;
      color: #8020CF;
      margin: 0 !important; }
    .login-content .login-content-right .verify-email-message {
      display: none;
      font-family: "Euclid Circular B";
      font-weight: 600;
      font-size: 18px;
      line-height: 26px;
      width: 50%;
      margin: 200px auto;
      background: #FFFFFF;
      border: 1px solid #F2F1F1;
      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
      border-radius: 5px;
      text-align: center;
      padding: 45px; }
      .login-content .login-content-right .verify-email-message .purple-text {
        color: #8020CF; }
    .login-content .login-content-right .login-form-wrapper {
      width: 60%;
      margin: 10vh auto 0 auto; }
      .login-content .login-content-right .login-form-wrapper.signup-form-wrapper {
        width: 62% !important;
        margin: 0 auto !important; }
      .login-content .login-content-right .login-form-wrapper .password-requirements {
        display: none;
        position: absolute;
        left: -530;
        top: 150;
        width: 516px;
        height: 226px;
        background: #FFFFFF;
        border: 1px solid #F2F1F1;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
        border-radius: 5px;
        padding: 25px;
        font-family: "Euclid Circular B";
        z-index: 10; }
        .login-content .login-content-right .login-form-wrapper .password-requirements p {
          font-weight: 600;
          font-size: 16px;
          line-height: 20px;
          color: #535353; }
        .login-content .login-content-right .login-form-wrapper .password-requirements li {
          font-weight: 400;
          font-size: 16px;
          line-height: 18px;
          color: #535353;
          display: flex;
          margin-bottom: 5px; }
          .login-content .login-content-right .login-form-wrapper .password-requirements li span {
            font-weight: 600; }
      .login-content .login-content-right .login-form-wrapper .password-error {
        display: none;
        position: absolute;
        font-family: "Euclid Circular B";
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        color: #EB5857;
        margin-bottom: 0 !important; }
      .login-content .login-content-right .login-form-wrapper .login-text {
        font-family: "Euclid Circular B";
        font-weight: 600;
        font-size: 20px;
        line-height: 1.5;
        margin-bottom: 3vh;
        background: -webkit-linear-gradient(123deg, #8020CF 1.4%, #FF00F8 123.89%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-right: auto; }
      .login-content .login-content-right .login-form-wrapper .loginUsernameLabel img, .login-content .login-content-right .login-form-wrapper .loginPasswordLabel img, .login-content .login-content-right .login-form-wrapper .signupFirstNameLabel img, .login-content .login-content-right .login-form-wrapper .signupLastNameLabel img,
      .login-content .login-content-right .login-form-wrapper .signupCompanyNameLabel img, .login-content .login-content-right .login-form-wrapper .signupEmailLabel img, .login-content .login-content-right .login-form-wrapper .signupPwLabel img, .login-content .login-content-right .login-form-wrapper .signupPwConfirmLabel img {
        top: 10px !important;
        right: 0 !important; }
      .login-content .login-content-right .login-form-wrapper .loginUsernameLabel input, .login-content .login-content-right .login-form-wrapper .loginPasswordLabel input, .login-content .login-content-right .login-form-wrapper .signupFirstNameLabel input, .login-content .login-content-right .login-form-wrapper .signupLastNameLabel input,
      .login-content .login-content-right .login-form-wrapper .signupCompanyNameLabel input, .login-content .login-content-right .login-form-wrapper .signupEmailLabel input, .login-content .login-content-right .login-form-wrapper .signupPwLabel input, .login-content .login-content-right .login-form-wrapper .signupPwConfirmLabel input {
        font-size: 14px !important;
        line-height: 35px !important;
        letter-spacing: 0.08em !important;
        font-family: "Euclid Circular B" !important;
        font-weight: 400 !important;
        outline: 0;
        border-width: 0 0 0.4px;
        height: 35px;
        border-color: #868686; }
        .login-content .login-content-right .login-form-wrapper .loginUsernameLabel input:focus, .login-content .login-content-right .login-form-wrapper .loginPasswordLabel input:focus, .login-content .login-content-right .login-form-wrapper .signupFirstNameLabel input:focus, .login-content .login-content-right .login-form-wrapper .signupLastNameLabel input:focus,
        .login-content .login-content-right .login-form-wrapper .signupCompanyNameLabel input:focus, .login-content .login-content-right .login-form-wrapper .signupEmailLabel input:focus, .login-content .login-content-right .login-form-wrapper .signupPwLabel input:focus, .login-content .login-content-right .login-form-wrapper .signupPwConfirmLabel input:focus {
          border-color: #868686; }
        .login-content .login-content-right .login-form-wrapper .loginUsernameLabel input.password-error-border, .login-content .login-content-right .login-form-wrapper .loginPasswordLabel input.password-error-border, .login-content .login-content-right .login-form-wrapper .signupFirstNameLabel input.password-error-border, .login-content .login-content-right .login-form-wrapper .signupLastNameLabel input.password-error-border,
        .login-content .login-content-right .login-form-wrapper .signupCompanyNameLabel input.password-error-border, .login-content .login-content-right .login-form-wrapper .signupEmailLabel input.password-error-border, .login-content .login-content-right .login-form-wrapper .signupPwLabel input.password-error-border, .login-content .login-content-right .login-form-wrapper .signupPwConfirmLabel input.password-error-border {
          border-color: red !important; }
      .login-content .login-content-right .login-form-wrapper .loginUsernameLabel input:-webkit-autofill,
      .login-content .login-content-right .login-form-wrapper .loginUsernameLabel input:-webkit-autofill:hover,
      .login-content .login-content-right .login-form-wrapper .loginUsernameLabel input:-webkit-autofill:focus,
      .login-content .login-content-right .login-form-wrapper .loginUsernameLabel input:-webkit-autofill:active, .login-content .login-content-right .login-form-wrapper .loginPasswordLabel input:-webkit-autofill,
      .login-content .login-content-right .login-form-wrapper .loginPasswordLabel input:-webkit-autofill:hover,
      .login-content .login-content-right .login-form-wrapper .loginPasswordLabel input:-webkit-autofill:focus,
      .login-content .login-content-right .login-form-wrapper .loginPasswordLabel input:-webkit-autofill:active, .login-content .login-content-right .login-form-wrapper .signupFirstNameLabel input:-webkit-autofill,
      .login-content .login-content-right .login-form-wrapper .signupFirstNameLabel input:-webkit-autofill:hover,
      .login-content .login-content-right .login-form-wrapper .signupFirstNameLabel input:-webkit-autofill:focus,
      .login-content .login-content-right .login-form-wrapper .signupFirstNameLabel input:-webkit-autofill:active, .login-content .login-content-right .login-form-wrapper .signupLastNameLabel input:-webkit-autofill,
      .login-content .login-content-right .login-form-wrapper .signupLastNameLabel input:-webkit-autofill:hover,
      .login-content .login-content-right .login-form-wrapper .signupLastNameLabel input:-webkit-autofill:focus,
      .login-content .login-content-right .login-form-wrapper .signupLastNameLabel input:-webkit-autofill:active,
      .login-content .login-content-right .login-form-wrapper .signupCompanyNameLabel input:-webkit-autofill,
      .login-content .login-content-right .login-form-wrapper .signupCompanyNameLabel input:-webkit-autofill:hover,
      .login-content .login-content-right .login-form-wrapper .signupCompanyNameLabel input:-webkit-autofill:focus,
      .login-content .login-content-right .login-form-wrapper .signupCompanyNameLabel input:-webkit-autofill:active, .login-content .login-content-right .login-form-wrapper .signupEmailLabel input:-webkit-autofill,
      .login-content .login-content-right .login-form-wrapper .signupEmailLabel input:-webkit-autofill:hover,
      .login-content .login-content-right .login-form-wrapper .signupEmailLabel input:-webkit-autofill:focus,
      .login-content .login-content-right .login-form-wrapper .signupEmailLabel input:-webkit-autofill:active, .login-content .login-content-right .login-form-wrapper .signupPwLabel input:-webkit-autofill,
      .login-content .login-content-right .login-form-wrapper .signupPwLabel input:-webkit-autofill:hover,
      .login-content .login-content-right .login-form-wrapper .signupPwLabel input:-webkit-autofill:focus,
      .login-content .login-content-right .login-form-wrapper .signupPwLabel input:-webkit-autofill:active, .login-content .login-content-right .login-form-wrapper .signupPwConfirmLabel input:-webkit-autofill,
      .login-content .login-content-right .login-form-wrapper .signupPwConfirmLabel input:-webkit-autofill:hover,
      .login-content .login-content-right .login-form-wrapper .signupPwConfirmLabel input:-webkit-autofill:focus,
      .login-content .login-content-right .login-form-wrapper .signupPwConfirmLabel input:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0 30px white inset !important; }
      .login-content .login-content-right .login-form-wrapper .forgot-password a {
        font-family: "Euclid Circular B";
        font-weight: 600;
        font-size: 13px;
        line-height: 35px;
        letter-spacing: 0.08em;
        color: #8020CF;
        cursor: pointer; }
        .login-content .login-content-right .login-form-wrapper .forgot-password a:hover {
          opacity: 0.9; }
      .login-content .login-content-right .login-form-wrapper .login-btn {
        height: 44px;
        width: 100%;
        background: #8020CF;
        border: none !important;
        border-radius: 20px;
        font-family: "Euclid Circular B";
        font-weight: 700;
        font-size: 16px;
        line-height: 20px;
        text-align: center;
        color: #FFFFFF; }
        .login-content .login-content-right .login-form-wrapper .login-btn:hover {
          opacity: 0.9; }
        .login-content .login-content-right .login-form-wrapper .login-btn.disabled {
          background-color: #F7F7F7;
          color: #B7B7B7;
          pointer-events: none; }
      .login-content .login-content-right .login-form-wrapper .other-option {
        font-family: "Euclid Circular B";
        font-weight: 400;
        font-size: 13px;
        line-height: 35px;
        letter-spacing: 0.08em;
        color: #868686;
        text-align: center;
        margin-bottom: 0 !important; }
        .login-content .login-content-right .login-form-wrapper .other-option a {
          font-family: "Euclid Circular B";
          font-weight: 600;
          color: #8020CF;
          cursor: pointer;
          text-decoration: none !important; }
          .login-content .login-content-right .login-form-wrapper .other-option a:hover {
            opacity: 0.9; }
      .login-content .login-content-right .login-form-wrapper .or-text {
        font-family: "Euclid Circular B";
        font-weight: 400;
        font-size: 18px;
        line-height: 35px;
        letter-spacing: 0.08em;
        color: #868686;
        text-align: center;
        margin: 10px 0 20px !important; }
      .login-content .login-content-right .login-form-wrapper .login-google-btn {
        border: 1px solid #E5E5E5;
        border-radius: 8px;
        font-family: "Euclid Circular B";
        font-weight: 400;
        font-size: 14px;
        line-height: 35px;
        color: #868686;
        padding: 5px 18px !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-width: 200px;
        text-decoration: none !important; }
        .login-content .login-content-right .login-form-wrapper .login-google-btn img {
          width: 27px;
          height: 27px;
          margin-right: 12px; }
        .login-content .login-content-right .login-form-wrapper .login-google-btn:hover {
          opacity: 0.9; }

.twoFector .loginArea {
  justify-content: center; }

.twoFector .loginBg {
  background-color: #ffffff;
  justify-content: center; }

.twoFector .loginFormWrapper {
  padding: 0;
  position: relative; }

.twoFector .youAllSet {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  visibility: hidden;
  opacity: 0; }
  .twoFector .youAllSet.allSetDone {
    visibility: visible;
    opacity: 1; }
  .twoFector .youAllSet h4 {
    color: #535353;
    font-size: 24px;
    font-weight: 400;
    display: flex;
    margin-bottom: 20px; }
  .twoFector .youAllSet p {
    color: #535353;
    font-size: 18px;
    font-weight: 400; }

.login-form-wrapper .copyright {
  font-family: "Euclid Circular B";
  font-weight: 400;
  font-size: 12px;
  line-height: 35px;
  letter-spacing: 0.08em;
  color: #868686;
  text-align: center;
  margin: 100px auto 0; }
  @media (max-width: 1500px) {
    .login-form-wrapper .copyright {
      margin: 20px auto 0; } }

.signup-form-wrapper .copyright {
  margin: 100px auto 0; }
  @media (max-width: 1500px) {
    .signup-form-wrapper .copyright {
      margin: 20px auto 0; } }

.platformArea h6 {
  font-size: 20px;
  font-weight: 600;
  color: #303030;
  line-height: 36px;
  margin-top: 0;
  margin-bottom: 20px; }

.platformArea .aiVisionStudio {
  background-color: #ECFDFF !important; }
  .platformArea .aiVisionStudio dt {
    color: #492CE6 !important; }

.platformArea .imageChat {
  background-color: #FDFBFF !important; }
  .platformArea .imageChat dt {
    color: #C800C3 !important; }

.platformArea .smartAnalytics {
  background-color: #F2E9FA !important; }
  .platformArea .smartAnalytics dt {
    color: #8020CF !important; }

.platformArea .loginBtn {
  width: 134px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #303030;
  background: linear-gradient(white, white) padding-box, linear-gradient(90deg, #8020CF 0%, #FF00F8 100%) border-box;
  border-radius: 35px;
  text-decoration: none; }
  .platformArea .loginBtn .arrow {
    margin-left: 18px; }
  .platformArea .loginBtn:hover {
    opacity: 0.9; }

.platformArea .aiVisionStudio .loginBtn {
  color: #ffffff;
  background: linear-gradient(90deg, #6306B0 0%, #3FECFF 100%); }
  .platformArea .aiVisionStudio .loginBtn img {
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(209deg) brightness(200%) contrast(101%); }

.platformArea .imageChat .loginBtn {
  color: #ffffff;
  background: linear-gradient(90deg, #8020CF 0%, #FF00F8 100%); }
  .platformArea .imageChat .loginBtn img {
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(209deg) brightness(200%) contrast(101%); }

.platformArea .smartAnalytics .loginBtn {
  color: #ffffff;
  background: linear-gradient(90deg, #0034B9 0%, #9716FB 100%); }
  .platformArea .smartAnalytics .loginBtn img {
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(209deg) brightness(200%) contrast(101%); }

.platformArea dl {
  background: #FDFBFF;
  box-shadow: 2px 5px 5px rgba(22, 22, 22, 0.08);
  border-radius: 5px;
  padding: 0 65px 0 30px;
  height: 92px;
  display: flex;
  justify-content: space-between;
  align-items: center; }
  .platformArea dl.imageChatMM {
    margin-bottom: 60px; }
  .platformArea dl dt {
    color: #8020CF;
    font-weight: 400;
    font-size: 20px;
    line-height: 26px; }
    .platformArea dl dt strong {
      font-weight: 600; }
    .platformArea dl dt i {
      margin-left: 5px; }
  .platformArea dl.disable {
    opacity: 1;
    background: #FFFFFF; }
    .platformArea dl.disable dt {
      color: #B7B7B7; }
      .platformArea dl.disable dt i {
        color: #8020CF; }
    .platformArea dl.disable .loginBtn {
      opacity: 0.6;
      border: 2px solid #B7B7B7;
      color: #B7B7B7; }
      .platformArea dl.disable .loginBtn img {
        opacity: 0.5; }

.platformArea .other-option {
  text-align: center;
  font-size: 18px;
  font-weight: 400;
  color: #868686; }
  .platformArea .other-option a {
    color: #8020CF;
    font-weight: 700;
    text-decoration: none; }
    .platformArea .other-option a:focus {
      color: #8020CF; }

.login-form-wrapper .forgot-password {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 33px; }

.rememberMeCheckbox {
  color: #535353;
  font-size: 13px;
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  margin: 0;
  cursor: pointer; }
  .rememberMeCheckbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    border: 2px solid #878787;
    border-radius: 4px;
    margin-right: 8px;
    background: white;
    appearance: none;
    -webkit-appearance: none; }
  .rememberMeCheckbox input[type="checkbox"]:checked {
    border-color: #8020CF;
    background: #8020CF url(../img/ch-check-white.svg) center center no-repeat;
    background-size: 9px; }

input::-webkit-contacts-auto-fill-button {
  visibility: hidden;
  display: none !important;
  pointer-events: none;
  position: absolute;
  right: 0; }

.socialLogin {
  display: flex;
  justify-content: space-between; }

a,
p,
h1,
h2,
h3,
h4,
h5,
h6,
span,
b,
div,
button,
label,
input,
form,
textarea {
  font-family: "latoregular"; }

.signupBg {
  width: 100%;
  min-height: 100vh;
  height: auto;
  background: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 40px; }
  @media (min-width: 1200px) {
    .signupBg {
      justify-content: center; } }

.radialBarContainer {
  width: 100%; }

.signUpTopBar {
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 90px;
  box-shadow: 1px 3px 15px #dcdcdc;
  position: absolute;
  top: 0;
  left: 0; }

.signupArea {
  display: flex;
  align-items: center;
  flex-direction: column;
  height: 100%; }
  .signupArea > h1 {
    font-weight: bold;
    color: #4a4a4a;
    text-align: center;
    font-size: 21px;
    font-family: "latoregular";
    margin-top: 0; }
    @media (min-width: 639px) {
      .signupArea > h1 {
        font-size: 30px;
        margin-top: initial; } }

.signupAreaContainer {
  background: white;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 15px 30px 15px; }
  @media (min-width: 1023px) {
    .signupAreaContainer {
      padding: 30px 15px; } }

.signupFormContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  margin: 0 auto;
  height: 100%; }
  @media (min-width: 768px) {
    .signupFormContainer {
      max-width: 500px; } }
  @media (min-width: 1023px) {
    .signupFormContainer {
      max-width: initial;
      padding: 15px 40px; } }
  .signupFormContainer h2 {
    font-weight: 500;
    line-height: 30px;
    color: #f7941d;
    font-size: 24px;
    font-family: "latoregular";
    margin-top: 0;
    margin-bottom: 35px; }
    @media (min-width: 639px) {
      .signupFormContainer h2 {
        font-size: 24px;
        margin-top: initial; } }
  .signupFormContainer input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px #fff inset;
    -webkit-text-fill-color: #4a4a4a !important; }
  .signupFormContainer input[type=text],
  .signupFormContainer input[type=password],
  .signupFormContainer input[type=email] {
    caret-color: #4a4a4a;
    border: 1px solid #9B9B9B !important;
    box-sizing: border-box;
    border-radius: 26px;
    height: 50px;
    border: 0;
    font-size: 16px;
    font-weight: 400;
    padding: 10px 15px 10px 25px;
    transition: 0.2s ease-in all;
    color: #4a4a4a; }
    @media (max-width: 1024px) {
      .signupFormContainer input[type=text],
      .signupFormContainer input[type=password],
      .signupFormContainer input[type=email] {
        width: 100% !important; } }
    .signupFormContainer input[type=text]::-webkit-input-placeholder,
    .signupFormContainer input[type=password]::-webkit-input-placeholder,
    .signupFormContainer input[type=email]::-webkit-input-placeholder {
      /* Chrome/Opera/Safari */
      color: rgba(0, 0, 0, 0.6);
      transition: 0.2s ease-in all; }
    .signupFormContainer input[type=text]::-moz-placeholder,
    .signupFormContainer input[type=password]::-moz-placeholder,
    .signupFormContainer input[type=email]::-moz-placeholder {
      /* Firefox 19+ */
      transition: 0.2s ease-in all;
      color: #000; }
    .signupFormContainer input[type=text]:-ms-input-placeholder,
    .signupFormContainer input[type=password]:-ms-input-placeholder,
    .signupFormContainer input[type=email]:-ms-input-placeholder {
      /* IE 10+ */
      transition: 0.2s ease-in all;
      color: rgba(0, 0, 0, 0.6); }
    .signupFormContainer input[type=text]:-moz-placeholder,
    .signupFormContainer input[type=password]:-moz-placeholder,
    .signupFormContainer input[type=email]:-moz-placeholder {
      /* Firefox 18- */
      transition: 0.2s ease-in all;
      color: rgba(0, 0, 0, 0.6); }
    .signupFormContainer input[type=text]:focus,
    .signupFormContainer input[type=password]:focus,
    .signupFormContainer input[type=email]:focus {
      color: rgba(0, 0, 0, 0.6);
      outline: 0; }
      .signupFormContainer input[type=text]:focus::-webkit-input-placeholder,
      .signupFormContainer input[type=password]:focus::-webkit-input-placeholder,
      .signupFormContainer input[type=email]:focus::-webkit-input-placeholder {
        /* Chrome/Opera/Safari */
        color: rgba(0, 0, 0, 0.6); }
      .signupFormContainer input[type=text]:focus::-moz-placeholder,
      .signupFormContainer input[type=password]:focus::-moz-placeholder,
      .signupFormContainer input[type=email]:focus::-moz-placeholder {
        /* Firefox 19+ */
        color: #000; }
      .signupFormContainer input[type=text]:focus:-ms-input-placeholder,
      .signupFormContainer input[type=password]:focus:-ms-input-placeholder,
      .signupFormContainer input[type=email]:focus:-ms-input-placeholder {
        /* IE 10+ */
        color: rgba(0, 0, 0, 0.6); }
      .signupFormContainer input[type=text]:focus:-moz-placeholder,
      .signupFormContainer input[type=password]:focus:-moz-placeholder,
      .signupFormContainer input[type=email]:focus:-moz-placeholder {
        /* Firefox 18- */
        color: rgba(0, 0, 0, 0.6); }

.signUpForm {
  position: relative;
  width: 100%;
  margin: 0 auto; }

.termstext {
  text-align: left;
  font-size: 14px;
  color: #868686;
  font-weight: 400; }

.signUpTerms {
  font-family: "Euclid Circular B";
  width: 100%;
  color: #4c4c4c;
  font-weight: 700;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  margin-bottom: 15px; }
  .signUpTerms a {
    font-family: "Euclid Circular B";
    color: #8020CF;
    text-decoration: underline;
    font-weight: 600; }
    .signUpTerms a:active, .signUpTerms a:focus {
      color: #8020CF !important; }
  @media (max-width: 1024px) {
    .signUpTerms span {
      text-align: left; } }

.customTerms .pretty {
  font-size: 16px;
  margin-right: 0;
  margin-left: 5px;
  margin-top: 4px !important; }
  .customTerms .pretty label:before {
    border: none !important;
    background: url(../img/checkbox-default.svg) 0 0 no-repeat;
    width: 16px !important;
    height: 16px !important; }
  .customTerms .pretty label:after {
    display: none; }

.customTerms .pretty input:checked ~ .state.p-warning label:before,
.customTerms .pretty.p-toggle .state.p-warning label:before {
  background: url(../img/checkbox-active.svg) 0 0 no-repeat !important;
  background-color: none !important; }

.loginForm {
  padding: 30px;
  width: 100%;
  position: relative;
  font-family: 'latoregular'; }

.loginCopyright {
  color: #4c4c4c !important;
  font-size: 14px !important;
  margin-top: 22px !important;
  display: flex !important;
  position: absolute;
  bottom: 0; }

.SignUpSignIn {
  font-family: "latoregular";
  width: 100%;
  color: #828282;
  font-weight: 500;
  font-size: 14px;
  float: left;
  position: relative;
  font-weight: 400;
  margin-top: 0; }
  .SignUpSignIn:after {
    content: "";
    width: 100%;
    height: 1px;
    background: #EDEDED;
    position: absolute;
    bottom: -25px;
    left: 0; }

@media (min-width: 1023px) {
  .SignUpSignIn:after {
    display: none; } }
  .SignUpSignIn a {
    color: #f7941d;
    text-decoration: none;
    font-weight: 500;
    margin-left: 3px; }
    .SignUpSignIn a:active, .SignUpSignIn a:focus {
      color: #f7941d !important; }

.signup_slide {
  margin-top: 50px;
  display: none; }
  @media (min-width: 1023px) {
    .signup_slide {
      display: block; } }
  .signup_slide img {
    width: 100%;
    max-width: 500px;
    position: absolute;
    bottom: 120px; }
    @media (min-width: 1200px) {
      .signup_slide img {
        bottom: 200px; } }

@media (min-width: 768px) {
  .signup-text-area {
    max-width: 500px;
    margin: 0 auto; } }

@media (min-width: 1023px) {
  .signup-text-area {
    max-width: initial;
    margin: initial; } }

.signup-text-area h1 {
  font-weight: 500;
  font-size: 24px;
  color: #f7941d;
  margin-bottom: 20px; }

.signup-text-area p {
  font-weight: 300;
  font-size: 16px;
  line-height: 28px;
  color: #4F4F4F;
  margin: 20px 0; }
  .signup-text-area p b {
    font-size: 18px;
    display: block;
    margin-top: 50px; }

.signup-text-area strong {
  font-weight: 500; }

.signup-text-area ul {
  padding: 0;
  display: flex;
  flex-direction: column; }
  .signup-text-area ul li {
    font-weight: 500;
    font-size: 16px;
    line-height: 26px;
    color: #333B46;
    list-style-type: none;
    padding-left: 30px;
    padding-left: 36px;
    position: relative;
    margin-bottom: 20px; }
    .signup-text-area ul li:before {
      content: "";
      width: 20px;
      height: 20px;
      background: url(../img/orange-check.svg);
      position: absolute;
      left: 0;
      top: 3px; }

.orange-button-white {
  border-radius: 45px;
  background: white;
  padding: 10px 30px;
  font-weight: 500;
  color: #f7941d !important;
  font-size: 18px;
  text-decoration: none;
  border: 1px solid #f7941d;
  box-shadow: 0;
  transition: all 0.2s ease-in; }
  .orange-button-white:focus, .orange-button-white:active {
    color: #f7941d !important;
    outline: 0; }
  .orange-button-white:hover {
    background: #f7941d;
    color: white !important;
    transition: all 0.2s ease-in;
    box-shadow: 1px 3px 15px #b9b9b9; }

.signup_pricing_wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  flex-direction: column;
  margin-bottom: 20px; }
  @media (min-width: 768px) {
    .signup_pricing_wrapper {
      flex-direction: row;
      margin-bottom: initial; } }
  .signup_pricing_wrapper h3 {
    margin-top: 0; }
  .signup_pricing_wrapper p {
    margin-top: 10px; }

.signup_pricing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; }

.signupFirstNameLabel {
  position: relative;
  width: 100%;
  float: left;
  margin-bottom: 20px;
  margin-right: 2%; }
  @media (min-width: 1200px) {
    .signupFirstNameLabel {
      max-width: 49%; } }
  .signupFirstNameLabel:before {
    position: absolute;
    background: white;
    color: #9B9B9B;
    font-weight: 500;
    font-size: 14px;
    padding: 0 5px;
    left: 25px;
    top: -9px;
    z-index: 9; }
  .signupFirstNameLabel input {
    height: 50px;
    width: 100%;
    color: #4A4A4A !important; }

.signupLastNameLabel {
  position: relative;
  width: 100%;
  float: left;
  margin-bottom: 20px; }
  @media (min-width: 1200px) {
    .signupLastNameLabel {
      max-width: 49%; } }
  .signupLastNameLabel:before {
    position: absolute;
    background: white;
    color: #9B9B9B;
    font-weight: 500;
    font-size: 14px;
    left: 25px;
    top: -9px;
    padding: 0 5px;
    z-index: 9; }
  .signupLastNameLabel input {
    height: 50px;
    width: 100%;
    color: #4A4A4A !important; }

.signupEmailLabel {
  position: relative;
  width: 100%;
  float: left;
  margin-bottom: 20px; }
  .signupEmailLabel:before {
    position: absolute;
    background: white;
    color: #9B9B9B;
    font-weight: 500;
    font-size: 14px;
    left: 25px;
    top: -9px;
    z-index: 9;
    padding: 0 5px; }
  .signupEmailLabel input {
    background: #fff;
    font-size: 14px;
    font-weight: 500;
    color: #4a4a4a !important;
    width: 100%;
    display: block; }
  .signupEmailLabel img {
    transition: 0.2s ease-in all;
    position: absolute;
    left: 10px;
    top: 13px;
    width: 24px;
    height: 24px;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor; }

.signupCompanyNameLabel {
  position: relative;
  width: 100%;
  float: left;
  margin-bottom: 20px; }
  .signupCompanyNameLabel:before {
    position: absolute;
    background: white;
    color: #9B9B9B;
    font-weight: 500;
    font-size: 14px;
    left: 25px;
    top: -9px;
    z-index: 9;
    padding: 0 5px; }
  .signupCompanyNameLabel input {
    background: #fff;
    font-family: "latoregular";
    font-size: 14px;
    font-weight: 500;
    color: #4a4a4a !important;
    width: 100%;
    display: block; }
  .signupCompanyNameLabel img {
    transition: 0.2s ease-in all;
    position: absolute;
    left: 10px;
    top: 13px;
    width: 24px;
    height: 24px;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor; }

.signupPwLabel {
  position: relative;
  width: 100%;
  float: left;
  margin-bottom: 20px; }
  .signupPwLabel:before {
    position: absolute;
    background: white;
    color: #9B9B9B;
    font-weight: 500;
    font-size: 14px;
    left: 25px;
    top: -9px;
    z-index: 9;
    padding: 0 5px; }
  .signupPwLabel input {
    background: #fff;
    font-family: "latoregular";
    font-size: 14px;
    font-weight: 500;
    color: #4a4a4a !important;
    width: 100%;
    display: block; }
  .signupPwLabel img {
    transition: 0.2s ease-in all;
    position: absolute;
    left: 20px;
    top: 13px;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor; }

.signupPwConfirmLabel {
  position: relative;
  width: 100%;
  float: left;
  margin-bottom: 20px; }
  .signupPwConfirmLabel:before {
    padding: 0 5px;
    position: absolute;
    background: white;
    color: #9B9B9B;
    font-weight: 500;
    font-size: 14px;
    left: 25px;
    top: -9px;
    z-index: 9; }
  .signupPwConfirmLabel input {
    background: #fff;
    font-family: "latoregular";
    font-size: 14px;
    font-weight: 500;
    color: #4a4a4a !important;
    width: 100%;
    display: block; }
  .signupPwConfirmLabel img {
    transition: 0.2s ease-in all;
    position: absolute;
    left: 20px;
    top: 13px;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor; }

.login-pw-toggle-hidden {
  position: absolute;
  right: 16px;
  left: initial !important;
  cursor: pointer; }

.login-pw-toggle-visible {
  display: none;
  position: absolute;
  right: 16px;
  left: initial !important;
  opacity: 0.5;
  cursor: pointer; }

.login-pw-toggle-active {
  display: block !important; }

.login-pw-toggle-inactive {
  display: none !important; }

.signUpFormBtn {
  height: 44px;
  width: 100%;
  background: #8020CF;
  border: none !important;
  border-radius: 20px;
  font-family: "Euclid Circular B";
  font-weight: 700;
  font-size: 16px;
  line-height: 20px;
  text-align: center;
  color: #FFFFFF; }
  .signUpFormBtn:hover {
    opacity: 0.9; }

.signUpButtonWrapper {
  width: 100%;
  position: relative;
  float: left; }

.termsModal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  background: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%; }

.termsModal-hidden {
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s ease-in;
  z-index: -1; }

.termsModal-visible {
  visibility: visible;
  opacity: 1;
  transition: all 0.2s ease-in;
  z-index: 99; }

.termsModalContainer {
  width: calc(100% - 40px);
  position: relative;
  max-width: 960px;
  max-height: calc(100% - 115px);
  background: #FFFFFF;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 15px;
  margin: 100px auto 0 auto;
  overflow: hidden; }
  @media (min-width: 1023px) {
    .termsModalContainer {
      padding: 15px 30px;
      width: 100%;
      max-height: 600px;
      margin: 120px auto 0 auto; } }
  .termsModalContainer .mCSB_scrollTools {
    right: -20px !important; }
  .termsModalContainer h3 {
    font-size: 18px;
    color: #4A4A4A;
    width: 100%;
    text-align: center;
    margin-top: 10px; }
    @media (max-width: 480px) {
      .termsModalContainer h3 {
        font-size: 16px; } }
  .termsModalContainer .licenseContent {
    color: #4A4A4A;
    font-size: 14px;
    display: block;
    width: 100%;
    height: 100%;
    padding-bottom: 100px;
    overflow: hidden; }
    .termsModalContainer .licenseContent p {
      font-size: 14px;
      color: #4A4A4A; }
    .termsModalContainer .licenseContent iframe {
      width: 100%;
      height: 53%;
      border: 0; }

.termsModal-agree {
  width: 100%;
  background: pink;
  height: 70px;
  position: absolute;
  bottom: 0;
  left: 0;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: -moz-linear-gradient(top, white 18%, rgba(255, 255, 255, 0) 100%);
  background: -webkit-linear-gradient(top, white 18%, rgba(255, 255, 255, 0) 100%);
  background: linear-gradient(to top, white 18%, rgba(255, 255, 255, 0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=0); }
  @media (min-width: 1023px) {
    .termsModal-agree {
      height: 100px; } }
  .termsModal-agree .orange-button {
    height: 42px;
    width: 100%;
    max-width: 215px;
    font-size: 16px;
    font-weight: 500; }

.termsModalClose {
  position: absolute;
  top: 22px;
  right: 26px; }
  @media (max-width: 480px) {
    .termsModalClose {
      right: 15px; } }
  .termsModalClose img {
    width: 24px; }

.signupBg #pswd_info {
  left: 0;
  top: 0;
  width: 100%;
  height: 265px;
  z-index: 9;
  background: rgba(255, 255, 255, 0.95);
  display: none;
  position: absolute;
  font-size: 14px;
  font-family: "latoregular";
  color: #4a4a4a;
  padding: 20px;
  flex-direction: column;
  justify-content: flex-start;
  border-left: 1px solid gainsboro;
  background: rgba(247, 247, 247, 0.97);
  border-bottom: 2px solid orange;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px; }
  @media (min-width: 1023px) {
    .signupBg #pswd_info {
      width: 50%;
      height: 100%;
      border-bottom: initial;
      padding: 30px;
      padding-top: 80px;
      border-bottom-right-radius: 10px;
      border-top-left-radius: 0; } }
  .signupBg #pswd_info ul {
    padding-left: 0;
    margin-top: 0; }
    @media (min-width: 1023px) {
      .signupBg #pswd_info ul {
        margin-top: 25px; } }
    .signupBg #pswd_info ul li {
      list-style-type: none;
      font-size: 16px;
      line-height: 35px !important; }
  .signupBg #pswd_info h4 {
    margin: 0 0 10px 0;
    padding: 0;
    font-weight: bold;
    font-size: 18; }

.signup_or {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
  margin-bottom: 10px;
  position: relative; }
  @media (min-width: 1200px) {
    .signup_or {
      font-size: 14px;
      margin-top: 45px; } }
  .signup_or:after {
    content: "";
    width: 100%;
    height: 1px;
    background: #E2E2E4;
    position: absolute;
    left: 0;
    z-index: 1; }
  .signup_or span {
    align-items: center;
    justify-content: center;
    display: flex;
    color: #4A4A4A;
    font-size: 14px;
    border: 1px solid #E2E2E4;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    background: white;
    position: relative;
    z-index: 9; }

.signupBg .socialLogin {
  float: left;
  width: 100%; }
  @media (min-width: 1200px) {
    .signupBg .socialLogin {
      margin-bottom: 30px; } }
  .signupBg .socialLogin ul {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0 auto; }
    @media (min-width: 1200px) {
      .signupBg .socialLogin ul {
        flex-direction: row; } }
    .signupBg .socialLogin ul li {
      list-style-type: none;
      float: left;
      width: 100%; }
      @media (min-width: 768px) {
        .signupBg .socialLogin ul li {
          max-width: 300px; } }
      .signupBg .socialLogin ul li:first-of-type {
        margin-bottom: 10px; }
        @media (min-width: 1200px) {
          .signupBg .socialLogin ul li:first-of-type {
            margin-bottom: initial;
            margin-right: 20px; } }
      .signupBg .socialLogin ul li a {
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        background: white;
        border: 1px solid #e0e0e0;
        border-radius: 26px;
        padding: 0 20px;
        height: 50px;
        margin: 8px 0;
        font-weight: 400;
        font-size: 14px;
        color: #828282;
        transition: all 0.2s ease-in; }
        @media (min-width: 1200px) {
          .signupBg .socialLogin ul li a {
            justify-content: flex-start; } }
        .signupBg .socialLogin ul li a:hover, .signupBg .socialLogin ul li a:focus, .signupBg .socialLogin ul li a:active {
          transition: all 0.2s ease-in;
          color: #f7941d !important;
          text-decoration: none;
          opacity: 0.8; }
      .signupBg .socialLogin ul li img {
        margin-right: 20px;
        height: 24px; }
        @media (min-width: 1200px) {
          .signupBg .socialLogin ul li img {
            margin-right: 18px; } }

@media (max-width: 1024px) {
  .comp-vision-img img {
    max-width: 400px; } }

.newSignupWrapper {
  background-color: #fff;
  padding: 0; }

.signupBanner {
  border-top: solid 40px #f2f2f2;
  text-align: center;
  background-color: #fff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center; }
  .signupBanner .bannerCaption {
    font-size: 32px;
    font-weight: 500;
    text-transform: uppercase;
    box-shadow: 0px 2px 9px rgba(2, 2, 2, 0.5);
    background-color: #138BFA;
    color: #fff;
    max-width: 700px;
    padding: 10px 20px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute; }
    @media (max-width: 480px) {
      .signupBanner .bannerCaption {
        font-size: 22px;
        max-width: 280px; } }

.verified_warn {
  padding: 0;
  height: 100%; }
  .verified_warn .signupArea {
    width: 100%; }
  .verified_warn .signupFormContainer {
    padding: 20px;
    max-width: 100%;
    justify-content: flex-start; }
  .verified_warn .signupSuccess .logo {
    margin-top: 100px; }
  .verified_warn .signupSuccess .confirmedBanner {
    margin-top: 0;
    margin-bottom: 0; }
  .verified_warn .signupSuccess .tick {
    width: 65px;
    margin-bottom: 0 !important; }
  .verified_warn .ecloginBtn {
    width: 100px;
    height: 35px;
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
    text-decoration: none; }
    .verified_warn .ecloginBtn:focus {
      color: #ffffff !important; }

.userUpdateStatus {
  padding: 0;
  height: 100%; }
  .userUpdateStatus .signupArea {
    width: 100%; }
  .userUpdateStatus .signupFormContainer {
    padding: 20px;
    max-width: 100%;
    justify-content: flex-start; }
  .userUpdateStatus .signupSuccess .logo {
    margin-top: 100px; }
  .userUpdateStatus .signupSuccess .confirmedBanner {
    margin-top: 0;
    margin-bottom: 0; }
  .userUpdateStatus .ecloginBtn {
    width: 100px;
    height: 35px;
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
    text-decoration: none; }
    .userUpdateStatus .ecloginBtn:focus {
      color: #ffffff !important; }

input::-webkit-contacts-auto-fill-button {
  visibility: hidden;
  display: none !important;
  pointer-events: none;
  position: absolute;
  right: 0; }

img {
  max-width: 100%; }

.disable {
  opacity: 0.5;
  pointer-events: none; }

.signup_Btn {
  padding: 0 20px;
  background: #ffffff;
  color: #ffffff;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
  height: 36px;
  background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(101deg, #8020cf, #ff00f8);
  font-weight: 600;
  font-size: 16px; }
  .signup_Btn:hover, .signup_Btn:focus {
    color: #ffffff !important; }

.login_Btn {
  min-width: 110px;
  height: 36px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #303030;
  border: solid 2px transparent;
  background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(101deg, #8020cf, #ff00f8);
  background-origin: border-box;
  background-clip: content-box, border-box;
  box-shadow: 2px 1000px 1px #F8F9FA inset;
  font-weight: 600;
  font-size: 14px;
  line-height: 15px;
  margin-right: 15px;
  margin-left: auto; }
  .login_Btn:hover, .login_Btn:focus {
    color: #303030 !important; }

.topBarWrapper {
  width: 100%;
  position: fixed;
  z-index: 1003; }

.topBar {
  width: 100%;
  height: 60px;
  background: #FFFFFF;
  box-shadow: 0px 2px 4px rgba(10, 46, 96, 0.1); }

.topBarContainer {
  display: flex;
  height: 100%;
  flex-direction: row;
  align-items: center;
  justify-content: space-between; }
  .topBarContainer .logo {
    width: 100px; }
    @media (max-width: 967px) {
      .topBarContainer .logo {
        width: 50px; } }

.topSearch {
  width: 440px;
  display: flex;
  align-items: center;
  flex-direction: column;
  margin: 0;
  position: relative; }
  .topSearch input {
    background: #F6F7FB;
    border: 1px solid #E9E8E8;
    box-sizing: border-box;
    border-radius: 21px;
    height: 44px;
    width: 100%;
    padding: 0 15px;
    font-family: "latoregular";
    font-size: 16px;
    color: #9B9B9B;
    font-weight: normal;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding-right: 50px !important;
    /*&:focus {
          box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.0960992) !important;
        }*/ }
  .topSearch button {
    height: 36px;
    width: 36px;
    border: 0;
    font-family: "Roboto";
    position: absolute;
    left: 0;
    top: 0;
    background-color: transparent;
    background-image: url(../img/ch-search-gray.svg);
    background-position: center;
    background-repeat: no-repeat;
    transition: all 0.2s ease-in; }

.topBar .easy-autocomplete {
  height: 80px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100% !important; }

#eac-container-topSearch {
  top: 45px; }

.easy-autocomplete-container ul {
  border: 0 !important;
  max-height: 180px;
  padding-top: 12px;
  overflow-y: auto;
  background: #FFFFFF;
  border: 1px solid #E9E8E8;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.197662);
  border-radius: 5px;
  position: relative; }
  @media (min-width: 1025px) {
    .easy-autocomplete-container ul {
      max-height: 180px;
      overflow-y: auto; } }

.easy-autocomplete-container ul li {
  background: #fff !important;
  color: #58595b !important;
  font-family: "Roboto" !important;
  font-size: 16px !important;
  padding: 10px 15px !important;
  border: none !important;
  border-bottom: solid 1px #F6F6F7 !important; }

.easy-autocomplete-container ul li.selected {
  background: #F6F7FB !important;
  position: relative !important;
  /*&:after {
    content: "";
    width: 3px;
    height: 100%;
    float: right;
    background: #f7941d;
    position: absolute;
    left: 0;
    top: 0;
  }*/ }

.autoCompleteResults {
  float: left;
  width: 100%;
  padding-left: 0;
  margin: 0;
  background: #F6F7FB; }
  .autoCompleteResults li {
    float: left;
    width: 100%;
    list-style-type: none;
    transition: all 0.2s ease-in;
    position: relative; }
    .autoCompleteResults li:hover {
      background: #F6F7FB; }
    .autoCompleteResults li:hover:after {
      content: "";
      width: 3px;
      height: 100%;
      float: right;
      background: #f7941d;
      position: absolute;
      left: 0;
      top: 0; }
    .autoCompleteResults li a {
      font-family: "Roboto";
      color: #4a4a4a;
      float: left;
      width: 100%;
      padding: 10px 10px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis; }
      .autoCompleteResults li a:active, .autoCompleteResults li a:focus {
        color: #4a4a4a !important; }

.topBarProfile {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 60px;
  padding: 0 15px;
  border-radius: 7px;
  cursor: pointer; }
  .topBarProfile.active {
    background-color: #F6F6F7; }
    .topBarProfile.active .group {
      background: url(../img/up-arrow-gray.svg) right center no-repeat; }
  .topBarProfile .userInfo {
    width: 100%;
    margin: 0;
    font-weight: 600;
    display: flex;
    align-items: center; }
  .topBarProfile .userName {
    width: 32px;
    height: 32px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: #E9FFFB;
    color: #0D5E52;
    font-family: "Euclid Circular B";
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    border-radius: 50px;
    margin-right: 10px; }
  .topBarProfile .group {
    background: url(../img/down-arrow-light-gray.svg) right center no-repeat; }
    .topBarProfile .group p {
      margin: 0;
      font-weight: normal;
      color: #535353;
      font-size: 12px;
      font-family: "Euclid Circular B";
      line-height: 14px; }
  .topBarProfile .topBarUsername {
    padding-right: 25px;
    font-size: 14px;
    color: #202223;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 200px;
    display: inline-block;
    font-weight: 500;
    font-family: "Euclid Circular B"; }
    @media (max-width: 967px) {
      .topBarProfile .topBarUsername {
        max-width: 150px; } }

.topBarProfileMenu {
  background: #ffffff;
  box-shadow: 0px 3px 5px rgba(6, 0, 41, 0.2);
  border-radius: 6px;
  position: absolute;
  top: 55px;
  right: 0;
  margin: 0;
  display: none;
  width: 100%;
  min-width: 150px;
  max-width: 230px;
  overflow: hidden;
  padding: 10px 0 15px;
  /*&:before {
    content: "";
    width: 25px;
    height: 12px;
    background-image: url(../img/triangle-up.png);
    background-size: 25px 12px;
    position: absolute;
    z-index: 9;
    top: -12px;
    right: 30px;
    margin: auto;
    display: none;
  }*/ }
  .topBarProfileMenu li {
    list-style-type: none;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row; }
    .topBarProfileMenu li:last-child {
      border-bottom: 0; }
    .topBarProfileMenu li a {
      color: #595959;
      font-size: 14px;
      font-weight: 500;
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      transition: all 0.2s ease-in;
      position: relative;
      padding: 12px 10px 12px 60px;
      /*&:hover:after {
        content: "";
        width: 3px;
        height: 100%;
        float: right;
        background: #f7941d;
        position: absolute;
        left: 0;
        top: 0;
      }*/ }
      .topBarProfileMenu li a.userSettings {
        background: url(../img/user-settings.svg) 20px center no-repeat; }
        .topBarProfileMenu li a.userSettings:hover {
          background: #EBEFF2 url(../img/user-settings.svg) 20px center no-repeat; }
      .topBarProfileMenu li a.account {
        background: url(../img/user-settings.svg) 20px center no-repeat; }
        .topBarProfileMenu li a.account:hover {
          background: #EBEFF2 url(../img/user-settings.svg) 20px center no-repeat; }
      .topBarProfileMenu li a.billing {
        background: url(../img/ch-billing-gray.svg) 20px center no-repeat;
        box-shadow: none;
        border-radius: 0; }
        .topBarProfileMenu li a.billing:hover {
          background: #EBEFF2 url(../img/ch-billing-blue.svg) 20px center no-repeat; }
      .topBarProfileMenu li a.logOut {
        background: url(../img/logout.svg) 20px center no-repeat; }
        .topBarProfileMenu li a.logOut:hover {
          background: #EBEFF2 url(../img/logout.svg) 20px center no-repeat; }
      .topBarProfileMenu li a:hover {
        background: #EBEFF2;
        transition: all 0.2s ease-in;
        color: #595959; }
    .topBarProfileMenu li i {
      width: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 10px; }
  .topBarProfileMenu li.devider {
    height: 1px;
    background-color: #ccc;
    margin: 0 10px 1px;
    width: 88%; }

.contentArea {
  width: 100%;
  height: auto;
  min-height: 93.5%;
  float: left;
  background-color: #F8F9FA;
  margin-top: 60px;
  padding-bottom: 70px;
  position: relative; }

.rightContentArea {
  flex: 0 0 87.666667% !important;
  max-width: 87.666667% !important;
  position: relative;
  transition: all 0.2s ease-in; }
  .rightContentArea.collapsed {
    flex: 0 0 94.666667% !important;
    max-width: 94.666667% !important; }

.orangeRadialBgBar-left {
  width: 100%;
  border-radius: 30px;
  background-color: #F7941D;
  height: 45px;
  background-image: none;
  background-repeat: no-repeat;
  background-position: 115% center;
  padding: 0 30px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 30px; }
  @media (min-width: 1200px) {
    .orangeRadialBgBar-left {
      height: 60px;
      background-image: url(../img/fill_1.png); } }
  .orangeRadialBgBar-left a {
    color: #fff; }
    .orangeRadialBgBar-left a:hover, .orangeRadialBgBar-left a:focus, .orangeRadialBgBar-left a:active {
      color: #fff !important; }
  .orangeRadialBgBar-left h1 {
    font-size: 18px;
    color: white;
    font-weight: 300;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    max-width: 100%;
    overflow: hidden; }
    @media (min-width: 1200px) {
      .orangeRadialBgBar-left h1 {
        font-size: 18px; } }

.blueRadialBgBar-left {
  background-color: #138BFA;
  background-image: none; }
  .blueRadialBgBar-left h1 {
    font-weight: 500; }

.navigationSide {
  width: 70px;
  height: 360px;
  background: #FFFFFF;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
  border-radius: 44px;
  margin: 0 auto;
  transition: all 0.2s ease-in; }
  .navigationSide ul {
    padding: 20px 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
    height: 100%;
    justify-content: space-between; }
    .navigationSide ul li {
      list-style-type: none; }
      .navigationSide ul li a {
        position: relative;
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50px;
        transition: all 0.2s ease-in; }
        .navigationSide ul li a:hover > .navHiddenPart {
          background: #0084FF;
          width: 190px;
          transition: width 0.4s ease-in-out; }
        .navigationSide ul li a:hover > .navHiddenPart i {
          transition: opacity 0.3s ease-in-out;
          opacity: 1; }
        .navigationSide ul li a:hover svg path {
          transition: all 0.2s ease-in;
          fill: #FFFFFF !important; }
        .navigationSide ul li a:hover svg {
          background: #0084FF; }
        .navigationSide ul li a svg {
          position: relative;
          z-index: 10;
          height: 27px; }
          .navigationSide ul li a svg path {
            transition: all 0.2s ease-in;
            fill: #58595B; }
        .navigationSide ul li a .navIcon {
          position: relative;
          z-index: 10;
          width: 48px;
          height: 48px;
          border-radius: 50px;
          display: flex;
          justify-content: center;
          align-items: center; }
          .navigationSide ul li a .navIcon img {
            image-rendering: -webkit-optimize-contrast; }
        .navigationSide ul li a .iconHome {
          width: 27px;
          height: 27px; }
        .navigationSide ul li a .iconMyfile {
          width: 27px;
          height: 27px; }
        .navigationSide ul li a .iconTrain {
          width: 34px;
          height: 34px; }
        .navigationSide ul li a .iconSupport {
          width: 29px;
          height: 29px; }
        .navigationSide ul li a .iconDevice {
          width: 27px; }
        .navigationSide ul li a:hover .navIcon {
          background-color: #0084FF; }
          .navigationSide ul li a:hover .navIcon img {
            filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(200deg) brightness(200%) contrast(200%); }
    .navigationSide ul .navTraining:hover svg path {
      transition: opacity 0.3s ease-in-out;
      stroke: #FFFFFF !important; }

.navHiddenPart {
  color: white;
  font-size: 18px;
  font-weight: normal;
  background: #fff;
  width: 48px;
  height: 48px;
  border-radius: 50px;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 0;
  z-index: 9;
  transition: width 0.4s ease-in-out;
  overflow: hidden;
  padding-left: 48px;
  white-space: nowrap; }
  .navHiddenPart i {
    transition: opacity 0.3s ease-in-out;
    opacity: 0;
    font-style: normal; }
  .navHiddenPart:hover svg path {
    transition: opacity 0.3s ease-in-out;
    fill: #FFFFFF !important; }

.navDashboard svg {
  margin-top: -5px; }

.navDashboard:hover {
  background: #0084FF;
  transition: all 0.2s ease-in; }

.navigationSide-active svg path {
  transition: opacity 0.3s ease-in-out;
  fill: #FFFFFF !important;
  stroke: #FFFFFF !important; }

.navigationSide-active .navHiddenPart {
  background: #0084FF; }

.navigationSide-active .navIcon {
  background-color: #0084FF; }
  .navigationSide-active .navIcon img {
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(200deg) brightness(200%) contrast(200%); }

.myFilesContentArea {
  display: flex;
  width: 100%;
  border-radius: 10px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
  height: auto; }

.myFilesFolderArea {
  width: 270px;
  background: #fbfbfb;
  border-radius: 10px 0px 0 10px;
  position: relative;
  padding: 42px 10px; }
  .myFilesFolderArea h3 {
    color: #58595B;
    font-weight: bold;
    font-size: 16px;
    padding-left: 10px;
    margin-bottom: 35px; }
    @media (min-width: 1600px) {
      .myFilesFolderArea h3 {
        font-size: 18px; } }

.createNewfolder {
  /*width: calc(100% - 20px);
  max-width: 240px;*/
  width: 100%;
  height: 44px;
  margin-top: 30px;
  display: block; }

.myFilesFileArea {
  width: calc(100% - 270px);
  min-height: 600px;
  background: #fff;
  border-radius: 0px 10px 10px 0px;
  padding: 30px 25px 70px 25px;
  position: relative;
  border-left: solid 0.5px #ededed; }
  .myFilesFileArea .fromUrlLoader {
    position: absolute;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center; }
    .myFilesFileArea .fromUrlLoader .loaderInner {
      width: 100px;
      height: 100px;
      border-radius: 100%;
      background-color: #ffffff;
      box-shadow: 0 0 3px #ccc; }

.folderTree {
  margin-top: 25px; }
  .folderTree ul {
    margin: 0; }
    .folderTree ul li {
      margin-bottom: 15px;
      font-size: 15px; }
      .folderTree ul li a {
        color: #58595B !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: calc(100% - 25px); }
        .folderTree ul li a .iconFolder {
          width: 20px;
          margin-right: 5px;
          margin-top: -4px; }

.fileAreaTopBar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px; }

.fileAreaFileCount h4 {
  font-size: 16px;
  margin-bottom: 0;
  display: inline-flex;
  line-height: 35px; }
  @media (min-width: 1600px) {
    .fileAreaFileCount h4 {
      font-size: 18px; } }
  .fileAreaFileCount h4 b {
    color: #58595B; }

.fileAreaFileCount span {
  color: #9B9B9B;
  margin-left: 8px; }

.fileAreaFileCount .itemCounter,
.fileAreaFileCount .itemCounterAllFiles {
  width: 34px;
  height: 34px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: rgba(19, 139, 250, 0.14);
  border-radius: 34px;
  font-size: 16px;
  font-weight: 500;
  color: #138BFA; }
  @media (min-width: 1600px) {
    .fileAreaFileCount .itemCounter,
    .fileAreaFileCount .itemCounterAllFiles {
      font-size: 18px; } }

.viewTypeFilters {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  position: relative;
  width: 95px;
  height: 42px;
  margin: 0 20px; }
  @media (max-width: 1023px) {
    .viewTypeFilters {
      display: none; } }
  .viewTypeFilters a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    /*background-color: rgba(196, 196, 196, 0.31);*/
    background-color: #f8f8f8;
    width: 44px;
    height: 44px;
    transition: all 0.2s ease-in;
    cursor: pointer; }
    .viewTypeFilters a:hover {
      background-color: rgba(19, 139, 250, 0.21); }
      .viewTypeFilters a:hover img {
        filter: invert(44%) sepia(33%) saturate(6662%) hue-rotate(194deg) brightness(103%) contrast(96%); }
    .viewTypeFilters a.active {
      background-color: rgba(19, 139, 250, 0.21);
      cursor: default; }
      .viewTypeFilters a.active img {
        filter: invert(44%) sepia(33%) saturate(6662%) hue-rotate(194deg) brightness(103%) contrast(96%); }
  .viewTypeFilters .customTooltip {
    top: 50px;
    right: 0; }

.fileAreaButtons {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center; }

.publishUploadBtn {
  width: 140px;
  height: 44px;
  border-radius: 26px;
  font-weight: 400;
  font-size: 16px;
  padding: 5px 20px; }
  .publishUploadBtn img {
    margin-right: 10px; }

.fileArea {
  float: left;
  width: 100%;
  margin-top: 15px; }

.sortByList li {
  list-style-type: none;
  font-size: 14px;
  color: #58595B;
  position: relative; }

.sortByList .fileAreaTopInnerBar {
  padding: 10px;
  background: #F6F7FB;
  border-radius: 10px;
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: row;
  margin: 0; }
  .sortByList .fileAreaTopInnerBar li {
    font-weight: 500; }
  .sortByList .fileAreaTopInnerBar .fileAreaTopCheckbox label span {
    width: 21px;
    height: 21px; }
  .sortByList .fileAreaTopInnerBar .fileAreaTopCheckbox [type=checkbox]:checked + span:before {
    width: 21px;
    height: 21px; }

.sortByList .fileAreaTopCheckbox {
  width: 3%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  /* Style the artificial checkbox */
  /* Style its checked state...with a ticked icon */ }
  .sortByList .fileAreaTopCheckbox label input {
    display: none;
    /* Hide the default checkbox */ }
  .sortByList .fileAreaTopCheckbox label span {
    height: 21px;
    width: 21px;
    display: inline-block;
    position: relative;
    border-radius: 3px;
    cursor: pointer;
    background: #fff url(../img/checkbox-default.svg) 0 0 no-repeat;
    background-size: cover; }
  .sortByList .fileAreaTopCheckbox label {
    margin: 0; }
  .sortByList .fileAreaTopCheckbox [type=checkbox]:checked + span {
    background: #fff url(../img/checkbox-active-21*20.svg) 0 0 no-repeat;
    background-size: cover; }
  .sortByList .fileAreaTopCheckbox span {
    background: #ffffff; }

.sortByList .fileAreaTopImage {
  width: 17%;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center; }
  @media (min-width: 1680px) {
    .sortByList .fileAreaTopImage {
      width: 9%; } }

.sortByList .fileAreaTopName {
  width: 30%;
  display: flex;
  align-items: center;
  justify-content: flex-start; }
  @media (min-width: 1680px) {
    .sortByList .fileAreaTopName {
      width: 37%; } }

.sortByList .fileAreaTopFolder {
  width: 15%;
  display: flex;
  align-items: center;
  justify-content: center; }

.sortByList .fileAreaTopDate {
  width: 16%;
  display: flex;
  align-items: center;
  justify-content: center; }

.sortByList .fileAreaTopActions {
  width: 20%;
  display: flex;
  align-items: center;
  justify-content: center; }

.sortByList .fileAreaContent {
  float: left;
  width: 100%;
  padding: 0;
  min-height: 860px; }
  .sortByList .fileAreaContent ul {
    padding: 0 10px;
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 70px; }

.sortByList .eachFileAreaContent {
  border-bottom: 1px solid #EDEDED;
  padding: 10px 0;
  font-size: 14px;
  color: #58595B; }
  .sortByList .eachFileAreaContent:last-of-type {
    border: none; }

.sortByList .fileAreaCheckbox {
  width: 3%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Style the artificial checkbox */
  /* Style its checked state...with a ticked icon */ }
  .sortByList .fileAreaCheckbox label input {
    display: none;
    /* Hide the default checkbox */ }
  .sortByList .fileAreaCheckbox label span {
    height: 20px;
    width: 20px;
    border: 1px solid #9B9B9B;
    display: inline-block;
    position: relative;
    border-radius: 3px;
    cursor: pointer; }
  .sortByList .fileAreaCheckbox label {
    margin: 0; }
  .sortByList .fileAreaCheckbox [type=checkbox]:checked + span:before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    background-color: #F7941D;
    width: 20px;
    height: 20px; }

.sortByList .fileAreaImage {
  width: 17%;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer; }
  @media (min-width: 1680px) {
    .sortByList .fileAreaImage {
      width: 9%; } }
  .sortByList .fileAreaImage a {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    width: 100%; }
  .sortByList .fileAreaImage img {
    max-width: 100px;
    max-height: 66px; }

.sortByList .fileAreaName {
  width: 30%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 5px; }
  @media (min-width: 1680px) {
    .sortByList .fileAreaName {
      width: 37%; } }
  .sortByList .fileAreaName a {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 100%;
    color: #58595B; }
    .sortByList .fileAreaName a:hover, .sortByList .fileAreaName a:active, .sortByList .fileAreaName a:focus {
      opacity: 0.8;
      color: #58595B !important;
      transition: all 0.2s ease-in; }

.sortByList .fileAreaFolder {
  width: 15%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px; }
  .sortByList .fileAreaFolder a {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
    text-align: center;
    color: #58595B; }
    .sortByList .fileAreaFolder a:hover, .sortByList .fileAreaFolder a:active, .sortByList .fileAreaFolder a:focus {
      opacity: 0.8;
      color: #58595B !important;
      transition: all 0.2s ease-in; }

.sortByList .fileAreaDate {
  width: 16%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px; }

.sortByList .fileAreaActions {
  width: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  position: relative; }
  .sortByList .fileAreaActions a {
    margin: 0 5px;
    width: 18px;
    height: 18px;
    display: inline-flex;
    justify-content: center;
    align-items: flex-start; }
  .sortByList .fileAreaActions .folderOpTrigger {
    display: flex;
    align-items: center; }
  .sortByList .fileAreaActions .customTooltip {
    top: 25px;
    right: 0; }

.sortByGrid ul {
  position: relative; }

.sortByGrid li {
  list-style-type: none;
  font-size: 14px;
  color: #58595B; }

.sortByGrid .fileAreaTopInnerBar {
  padding: 10px;
  background: #F6F7FB;
  border-radius: 10px;
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: row;
  margin: 0; }
  .sortByGrid .fileAreaTopInnerBar li {
    font-weight: 500; }
  .sortByGrid .fileAreaTopInnerBar .fileAreaTopCheckbox {
    justify-content: flex-start; }
    .sortByGrid .fileAreaTopInnerBar .fileAreaTopCheckbox label span {
      width: 20px;
      height: 20px; }
    .sortByGrid .fileAreaTopInnerBar .fileAreaTopCheckbox [type=checkbox]:checked + span:before {
      width: 20px;
      height: 20px; }

.sortByGrid .fileAreaTopCheckbox {
  width: 3%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  /* Style the artificial checkbox */
  /* Style its checked state...with a ticked icon */ }
  .sortByGrid .fileAreaTopCheckbox label input {
    display: none;
    /* Hide the default checkbox */ }
  .sortByGrid .fileAreaTopCheckbox label span {
    height: 21px;
    width: 21px;
    display: inline-block;
    position: relative;
    border-radius: 3px;
    cursor: pointer;
    background: url(../img/checkbox-default.svg) 0 0 no-repeat;
    background-size: cover; }
  .sortByGrid .fileAreaTopCheckbox label {
    margin: 0; }
  .sortByGrid .fileAreaTopCheckbox [type=checkbox]:checked + span {
    background: url(../img/checkbox-active-21*20.svg) 0 0 no-repeat;
    background-size: cover; }

.sortByGrid .fileAreaTopImage {
  display: none; }

.sortByGrid .fileAreaTopName {
  display: none; }

.sortByGrid .fileAreaTopFolder {
  display: none; }

.sortByGrid .fileAreaTopDate {
  display: none; }

.sortByGrid .fileAreaTopActions {
  display: none; }

.sortByGrid .fileAreaContent {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  min-height: 496px;
  width: 100%; }
  .sortByGrid .fileAreaContent ul {
    padding: 0 10px 0 0;
    display: flex;
    flex-direction: column;
    width: 100%; }

.sortByGrid .eachFileAreaContent {
  padding: 10px 0;
  font-size: 14px;
  color: #58595B;
  width: calc(100% / 5);
  position: relative; }
  .sortByGrid .eachFileAreaContent .fileAreaTopCheckbox {
    position: absolute;
    top: 90px;
    left: 15px; }

.sortByGrid .fileAreaCheckbox {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Style the artificial checkbox */
  /* Style its checked state...with a ticked icon */ }
  .sortByGrid .fileAreaCheckbox label input {
    display: none;
    /* Hide the default checkbox */ }
  .sortByGrid .fileAreaCheckbox label span {
    height: 20px;
    width: 20px;
    border: 1px solid #9B9B9B;
    display: inline-block;
    position: relative;
    border-radius: 3px;
    cursor: pointer; }
  .sortByGrid .fileAreaCheckbox label {
    margin: 0; }
  .sortByGrid .fileAreaCheckbox [type=checkbox]:checked + span:before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    width: 20px;
    height: 20px;
    border-radius: 3px; }

.sortByGrid .fileAreaImage {
  overflow: hidden;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  height: 117px;
  cursor: pointer; }
  .sortByGrid .fileAreaImage a {
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; }
  .sortByGrid .fileAreaImage img {
    width: 100%; }

.sortByGrid .fileAreaName {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 5px; }
  .sortByGrid .fileAreaName a {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
    color: #58595B;
    text-align: left; }
    .sortByGrid .fileAreaName a:hover, .sortByGrid .fileAreaName a:active, .sortByGrid .fileAreaName a:focus {
      opacity: 0.8;
      color: #58595B !important;
      transition: all 0.2s ease-in; }

.sortByGrid .fileAreaFolder {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 5px; }
  .sortByGrid .fileAreaFolder a {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
    text-align: left;
    color: #F7941D;
    font-weight: 600; }
    .sortByGrid .fileAreaFolder a:hover, .sortByGrid .fileAreaFolder a:active, .sortByGrid .fileAreaFolder a:focus {
      opacity: 0.8;
      color: #58595B !important;
      transition: all 0.2s ease-in; }

.sortByGrid .fileAreaDate {
  color: #9B9B9B;
  display: flex;
  align-items: left;
  justify-content: flex-start;
  padding: 0 5px; }

.sortByGrid .fileAreaActions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 14px;
  position: relative; }
  .sortByGrid .fileAreaActions a {
    margin: 0 5px;
    width: 18px;
    height: 18px; }
  .sortByGrid .fileAreaActions .customTooltip {
    bottom: 25px;
    left: 0; }

.sortByGrid a.videoThumbWrapper {
  background-color: #000; }

.fileArea.sortByGrid {
  display: none; }

.stickyBottomBar {
  height: 60px;
  width: 100%;
  position: sticky;
  bottom: 10px;
  left: 0;
  z-index: 999;
  background: #EBEFF2;
  box-shadow: 2px 5px 20px rgba(65, 65, 65, 0.08);
  border-radius: 6px;
  display: none;
  overflow: hidden; }
  @media (max-width: 967px) {
    .stickyBottomBar {
      z-index: 99; } }
  .stickyBottomBar .trainingAreaBottomBar {
    height: 60px;
    bottom: 0;
    left: 0;
    right: 0;
    position: sticky;
    z-index: 1000;
    margin: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #352B63;
    box-shadow: 2px 5px 5px rgba(22, 22, 22, 0.08);
    border-radius: 6px; }
    .stickyBottomBar .trainingAreaBottomBar .label {
      font-style: normal;
      font-weight: 500;
      font-size: 12px;
      line-height: 14px;
      color: #9b9b9b;
      margin-left: 10px;
      width: 55px; }
    .stickyBottomBar .trainingAreaBottomBar .preceptionAreaTopActions {
      width: auto; }
    .stickyBottomBar .trainingAreaBottomBar .footerActions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%; }
      .stickyBottomBar .trainingAreaBottomBar .footerActions .deleteAllPerson,
      .stickyBottomBar .trainingAreaBottomBar .footerActions span.or {
        line-height: 40px; }
      .stickyBottomBar .trainingAreaBottomBar .footerActions .selectedFileCount {
        color: white; }
      .stickyBottomBar .trainingAreaBottomBar .footerActions a {
        color: white !important; }
      .stickyBottomBar .trainingAreaBottomBar .footerActions .selectedFileActions li a {
        color: white !important; }
      .stickyBottomBar .trainingAreaBottomBar .footerActions .deleteAction {
        display: inline-flex;
        margin-left: auto; }
    .stickyBottomBar .trainingAreaBottomBar .changeStatusText {
      float: right;
      line-height: 26px !important; }
    .stickyBottomBar .trainingAreaBottomBar .btnWrapper {
      text-align: center; }
      .stickyBottomBar .trainingAreaBottomBar .btnWrapper .blue-button,
      .stickyBottomBar .trainingAreaBottomBar .btnWrapper .blue-border-button {
        display: inline-block;
        width: auto;
        margin-bottom: 0; }
    .stickyBottomBar .trainingAreaBottomBar .selectAllCheckbox {
      margin-right: 30px;
      color: #FFFFFF;
      font-size: 16px;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      background: transparent;
      border: none; }
    .stickyBottomBar .trainingAreaBottomBar .selectedCount {
      font-size: 16px;
      color: #FFFFFF;
      margin: 0;
      font-weight: 600; }
    .stickyBottomBar .trainingAreaBottomBar .selectedOptions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 100%;
      padding: 0 20px;
      width: 100%; }
  .stickyBottomBar .deleteAllClassImg,
  .stickyBottomBar .deleteAllPerson,
  .stickyBottomBar .download_file,
  .stickyBottomBar .deleteFiles,
  .stickyBottomBar .copyFiles,
  .stickyBottomBar .cancelFiles,
  .stickyBottomBar .cancelBtn,
  .stickyBottomBar .moveFiles,
  .stickyBottomBar .smartAnnotation {
    color: #FFFFFF;
    font-size: 14px;
    margin-left: 30px;
    line-height: 40px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 5px;
    border: none;
    background: transparent;
    display: inline-flex !important;
    justify-content: center;
    align-items: center; }
    @media (max-width: 967px) {
      .stickyBottomBar .deleteAllClassImg,
      .stickyBottomBar .deleteAllPerson,
      .stickyBottomBar .download_file,
      .stickyBottomBar .deleteFiles,
      .stickyBottomBar .copyFiles,
      .stickyBottomBar .cancelFiles,
      .stickyBottomBar .cancelBtn,
      .stickyBottomBar .moveFiles,
      .stickyBottomBar .smartAnnotation {
        margin-left: 0; } }
    .stickyBottomBar .deleteAllClassImg img,
    .stickyBottomBar .deleteAllPerson img,
    .stickyBottomBar .download_file img,
    .stickyBottomBar .deleteFiles img,
    .stickyBottomBar .copyFiles img,
    .stickyBottomBar .cancelFiles img,
    .stickyBottomBar .cancelBtn img,
    .stickyBottomBar .moveFiles img,
    .stickyBottomBar .smartAnnotation img {
      margin-right: 10px; }
    .stickyBottomBar .deleteAllClassImg:focus, .stickyBottomBar .deleteAllClassImg:hover, .stickyBottomBar .deleteAllClassImg:visited,
    .stickyBottomBar .deleteAllPerson:focus,
    .stickyBottomBar .deleteAllPerson:hover,
    .stickyBottomBar .deleteAllPerson:visited,
    .stickyBottomBar .download_file:focus,
    .stickyBottomBar .download_file:hover,
    .stickyBottomBar .download_file:visited,
    .stickyBottomBar .deleteFiles:focus,
    .stickyBottomBar .deleteFiles:hover,
    .stickyBottomBar .deleteFiles:visited,
    .stickyBottomBar .copyFiles:focus,
    .stickyBottomBar .copyFiles:hover,
    .stickyBottomBar .copyFiles:visited,
    .stickyBottomBar .cancelFiles:focus,
    .stickyBottomBar .cancelFiles:hover,
    .stickyBottomBar .cancelFiles:visited,
    .stickyBottomBar .cancelBtn:focus,
    .stickyBottomBar .cancelBtn:hover,
    .stickyBottomBar .cancelBtn:visited,
    .stickyBottomBar .moveFiles:focus,
    .stickyBottomBar .moveFiles:hover,
    .stickyBottomBar .moveFiles:visited,
    .stickyBottomBar .smartAnnotation:focus,
    .stickyBottomBar .smartAnnotation:hover,
    .stickyBottomBar .smartAnnotation:visited {
      color: #FFFFFF;
      background: #4E4576;
      border-radius: 5px; }

.stickyBottomBar-active {
  display: block; }

.fileAreaBottomBar {
  height: 50px;
  bottom: 0;
  left: 0;
  right: 0;
  position: sticky;
  z-index: 1000;
  margin: 0;
  width: 100%;
  background: #EBEFF2;
  border-radius: 6px; }

.selectedFileOptions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 15px;
  width: 100%; }

.selectedFileCount {
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  color: #303030; }

.selectedFileActions {
  padding: 0;
  margin: 0;
  display: flex !important;
  flex-direction: row;
  align-items: center;
  margin-left: auto; }
  .selectedFileActions li {
    list-style-type: none;
    margin-right: 15px;
    display: inline-block; }
    .selectedFileActions li a {
      text-decoration: none;
      font-weight: 600;
      font-size: 14px;
      color: #303030;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease-in;
      line-height: 24px; }
      .selectedFileActions li a:hover, .selectedFileActions li a:active, .selectedFileActions li a:focus {
        transition: all 0.2s ease-in;
        color: #303030 !important;
        text-decoration: none; }
      .selectedFileActions li a img {
        margin-right: 5px;
        height: 16px; }

.dashboardCopyright {
  text-align: center;
  align-items: center;
  justify-content: center;
  display: flex;
  margin: 1.5rem 0;
  color: #595959;
  font-size: 16px;
  font-weight: 500;
  position: absolute;
  width: 100%;
  bottom: 0; }
  .dashboardCopyright .devider {
    width: 1px;
    height: 16px;
    background: #595959;
    display: inline-block;
    margin: 0 10px; }

.smoothModal {
  position: fixed;
  top: 0px;
  left: 0;
  width: 100%;
  height: calc(100%);
  background: rgba(109, 109, 109, 0.4);
  mix-blend-mode: normal;
  z-index: 1005;
  display: flex;
  padding-top: 120px;
  padding-left: 15px;
  padding-right: 15px; }
  .smoothModal .invisibleBtn,
  .smoothModal .thumbnailModalClose {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%; }

.smoothModalContainer {
  background: white;
  border-radius: 10px;
  padding: 15px;
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  height: min-content;
  height: max-content; }
  .smoothModalContainer .smoothModalTitle {
    color: #138BFA;
    font-size: 16px;
    font-weight: 500;
    margin: 0;
    padding: 0;
    min-height: 40px;
    word-break: break-word;
    display: flex;
    align-items: center; }
  .smoothModalContainer .smoothModalClose {
    position: absolute;
    right: 20px;
    top: 20px;
    cursor: pointer; }
  .smoothModalContainer .thumbnailModal {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: calc(100% - 340px);
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    border-radius: 10px 0 0 10px; }
    @media (max-width: 967px) {
      .smoothModalContainer .thumbnailModal {
        width: calc(100%); } }
  .smoothModalContainer .thumbnailModal-visible {
    display: flex; }
  .smoothModalContainer .thumbnailModal-inner {
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    justify-content: center; }
  .smoothModalContainer .thumbnailModal-inner img {
    max-width: 100%;
    max-height: 150px;
    border: 2px solid white; }
  @media (min-width: 769px) {
    .smoothModalContainer .thumbnailModal-inner img {
      max-height: 200px; } }
  @media (min-width: 1200px) {
    .smoothModalContainer .thumbnailModal-inner img {
      max-height: 250px; } }
  .smoothModalContainer .thumbnailModal-inner .thumbResultTag {
    margin-top: 10px;
    font-size: 15px;
    font-weight: 400;
    border-radius: 20px;
    min-height: 40px;
    color: white;
    padding: 8px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    margin-bottom: 10px; }

.smoothModalImageWrapper {
  width: 700px;
  height: 420px;
  align-items: left;
  justify-content: center; }
  .smoothModalImageWrapper img {
    max-height: 300px; }
  .smoothModalImageWrapper .smoothModalImage {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: column; }
  .smoothModalImageWrapper .showvideo {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: column;
    width: 100%;
    height: 94%; }

.smoothModalTags {
  width: 325px;
  min-height: 348px;
  max-height: 348px;
  border-top: 0;
  box-sizing: border-box;
  padding: 41px 0 0 12px; }
  .smoothModalTags .mCSB_inside > .mCSB_container {
    margin-right: 10px !important; }
  .smoothModalTags .nav-tabs {
    border-bottom: none !important;
    height: 45px; }
    .smoothModalTags .nav-tabs li a {
      font-weight: normal;
      color: #4A4A4A;
      padding: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%; }
      .smoothModalTags .nav-tabs li a:focus, .smoothModalTags .nav-tabs li a:active {
        color: #4A4A4A !important; }
    .smoothModalTags .nav-tabs li .active {
      font-weight: 500;
      color: #F7941D;
      position: relative; }
      .smoothModalTags .nav-tabs li .active:focus, .smoothModalTags .nav-tabs li .active:active {
        color: #F7941D !important; }
      .smoothModalTags .nav-tabs li .active:after {
        content: "";
        width: 100%;
        height: 4px;
        background: white;
        position: absolute;
        bottom: -3px;
        left: 1px;
        z-index: 9; }
    .smoothModalTags .nav-tabs li:first-of-type a.active {
      border-right: 1px solid #D8D8D8 !important;
      border-top: 1px solid #D8D8D8 !important;
      border-left: 1px solid #D8D8D8 !important;
      border-top-right-radius: 5px;
      border-top-left-radius: 5px; }
    .smoothModalTags .nav-tabs li:nth-of-type(2) a.active {
      border-right: 1px solid #D8D8D8 !important;
      border-top: 1px solid #D8D8D8 !important;
      border-left: 1px solid #D8D8D8 !important;
      border-top-right-radius: 5px;
      border-top-left-radius: 5px; }
    .smoothModalTags .nav-tabs .active {
      background: #ffffff; }
  .smoothModalTags .tab-content {
    padding-bottom: 10px;
    border: 1px solid #D8D8D8;
    border-radius: 0 6px 6px 6px; }

.tagsUl {
  margin: 0;
  margin-left: 0;
  float: left;
  width: 100%;
  position: relative;
  padding-top: 10px;
  /* Track */
  /* Handle */
  /* Handle on hover */ }
  .tagsUl .tagsOverflow {
    flex-wrap: wrap; }
  .tagsUl .mCSB_container {
    margin-right: 10px !important; }
  .tagsUl .resultThumbnail {
    margin-left: -10px; }
  .tagsUl .resultThumbnailImg {
    width: 32px;
    height: 34px;
    border-radius: 100%;
    border: solid 1px #fff; }
  .tagsUl ::-webkit-scrollbar {
    width: 10px; }
  .tagsUl ::-webkit-scrollbar-track {
    background: #f1f1f1; }
  .tagsUl ::-webkit-scrollbar-thumb {
    background: #888; }
  .tagsUl ::-webkit-scrollbar-thumb:hover {
    background: #555; }

.tags {
  position: relative;
  width: 100%;
  background: #fff;
  height: 280px;
  overflow: hidden;
  padding-bottom: 20px; }
  .tags li {
    list-style-type: none;
    float: left;
    position: relative;
    list-style-type: none;
    margin-right: 9px;
    margin-bottom: 9px;
    cursor: pointer;
    min-height: 36px; }
    .tags li span {
      color: #4A4A4A;
      background: #F6F7FB;
      border-radius: 17px;
      float: left;
      font-size: 14px;
      text-decoration: none;
      font-family: "Roboto";
      word-wrap: break-word;
      line-height: 34px;
      min-height: 34px;
      padding-right: 10px;
      padding-left: 10px; }
      .tags li span .imgCircle {
        width: 34px;
        height: 34px;
        background: #d5d416;
        border-radius: 100%;
        margin-right: 8px;
        float: left;
        overflow: hidden; }
        .tags li span .imgCircle img {
          width: 34px;
          height: 34px;
          border-radius: 100%; }
  .tags .tagsEdit {
    float: none;
    clear: both;
    width: 94%;
    position: fixed;
    bottom: 5px;
    right: 2px;
    background-color: #fff; }
  .tags .mCSB_container {
    min-height: 260px; }

.metadata .tags li span {
  padding-left: 10px; }

.tagsWrapper .nav-tabs {
  width: 100%;
  border: 0;
  height: 45px;
  padding: 0 !important;
  flex-direction: row; }
  .tagsWrapper .nav-tabs li {
    margin-bottom: 0;
    display: inline-block; }
    .tagsWrapper .nav-tabs li a {
      border-radius: 0;
      font-size: 14px;
      font-weight: 500;
      padding: 5px 12px !important;
      position: relative;
      font-weight: normal;
      color: #4A4A4A;
      padding: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%; }
      .tagsWrapper .nav-tabs li a:hover {
        border-color: transparent !important; }
      .tagsWrapper .nav-tabs li a:focus, .tagsWrapper .nav-tabs li a:active {
        color: #4A4A4A !important;
        background-color: #fff; }
    .tagsWrapper .nav-tabs li .show {
      color: #f7941d;
      border: solid 1px #D8D8D8;
      border-top-right-radius: 5px;
      border-top-left-radius: 5px;
      border-bottom-color: #fff !important; }
      .tagsWrapper .nav-tabs li .show:hover {
        border-color: #D8D8D8 !important;
        border-bottom-color: #fff !important; }
    .tagsWrapper .nav-tabs li .active {
      color: #f7941d;
      border: solid 1px #D8D8D8;
      border-top-right-radius: 5px;
      border-top-left-radius: 5px; }
      .tagsWrapper .nav-tabs li .active:hover {
        border-color: #D8D8D8 !important;
        border-bottom-color: #fff !important; }
      .tagsWrapper .nav-tabs li .active:focus {
        color: #F7941D !important; }

.tagsEdit {
  text-align: right;
  overflow: hidden;
  padding: 10px;
  margin: 0 !important; }
  .tagsEdit a {
    text-align: center;
    height: 34px;
    padding: 8px 15px;
    font-size: 14px;
    background-color: #F7941D;
    border-radius: 17px;
    color: #ffffff !important;
    cursor: pointer; }
    .tagsEdit a:hover, .tagsEdit a:active, .tagsEdit a:focus {
      color: #ffffff !important; }
    .tagsEdit a .iconPlus {
      font-style: normal;
      font-weight: bold;
      margin-right: 5px;
      margin-top: -1px; }
      .tagsEdit a .iconPlus img {
        height: 12px;
        width: 12px; }

.publishWrapper .folderPopup .modal-dialog,
.publishWrapper .folderRenamePopup .modal-dialog,
.publishWrapper .imgRenamePopup .modal-dialog {
  max-width: 500px; }

.publishWrapper .createFolderPopup {
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center; }

.publishWrapper .createFolderInside {
  width: 100%;
  background-color: #fff;
  position: relative;
  z-index: 10; }
  .publishWrapper .createFolderInside .settings_orangeSquare {
    left: 0;
    top: -28px; }
    @media (min-width: 639px) {
      .publishWrapper .createFolderInside .settings_orangeSquare {
        left: -25;
        top: -15px; } }

.publishWrapper #directory_form {
  margin: 0; }

.folderNameCreateWrapper {
  margin: 0 25px 0;
  position: relative; }
  .folderNameCreateWrapper label {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #210835; }
  .folderNameCreateWrapper input[type="text"] {
    height: 52px;
    padding-left: 15px;
    padding-right: 15px;
    width: 100% !important;
    background: #F7F7F7;
    border: 1px solid #E0E0E0;
    border-radius: 5px; }
  .folderNameCreateWrapper textarea {
    height: 100px;
    resize: none;
    background: #F7F7F7;
    border: 1px solid #E0E0E0;
    border-radius: 5px;
    width: 100%;
    padding: 10px 25px; }
    .folderNameCreateWrapper textarea:focus {
      outline: none; }
  .folderNameCreateWrapper .descriptionTextarea {
    margin-bottom: 30px; }

.rename_file_name::placeholder {
  color: #4a4a4a !important; }

.folderNameCreateBtn {
  width: 100%;
  margin: 0 auto;
  min-height: 36px; }

.folderOptions {
  position: absolute;
  top: 0;
  right: 0;
  margin-bottom: 0; }
  .folderOptions > a {
    display: flex !important;
    width: 25px;
    height: 25px;
    background-color: transparent;
    overflow: visible !important;
    margin-bottom: 0 !important;
    padding-right: 0 !important; }
  .folderOptions .arrow {
    position: absolute;
    margin: 0 auto;
    top: -11px;
    left: 0;
    right: 0;
    width: 24px;
    height: 24px;
    background: url(../img/triangle-up.png) 0 0 no-repeat;
    background-size: contain;
    /*&:after {
        border-bottom: 10px solid #fff;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        z-index: 2;
        content: '';
      }
      &:before {
        border-bottom: 10px solid #ccc;
        border-left: 11px solid transparent;
        border-right: 11px solid transparent;
        z-index: 0;
        content: '';
        margin-right: -19px;
      }*/ }

.folderOpTrigger {
  background: #565758;
  color: #2f2f31;
  font-family: "DIN Pro";
  letter-spacing: 2px;
  height: 15px;
  border-radius: 3px;
  font-size: 16px;
  font-weight: bold;
  padding: 0 1px;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center; }
  .folderOpTrigger:hover {
    color: initial;
    text-decoration: none; }
  .folderOpTrigger i {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 9px; }

.folderDropdown {
  position: absolute;
  top: 5px !important;
  min-width: 120px;
  width: 120px;
  background: #fff;
  padding: 20px 20px 20px !important;
  border-radius: 10px !important;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.197662); }

.treeMenu .root {
  padding-left: 10px; }

.treeMenu ul {
  padding-left: 30px;
  margin-bottom: 0;
  /*.noRoot {
      padding-right: 25px;
    }*/ }
  .treeMenu ul li {
    list-style: none; }
    .treeMenu ul li a {
      color: #58595B;
      display: inline-block;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      padding-right: 20px;
      max-width: 74%;
      position: relative; }
    .treeMenu ul li .folderDropdown {
      text-align: center;
      border: 0;
      left: auto !important;
      right: -68px;
      top: 10px !important; }
      .treeMenu ul li .folderDropdown a {
        display: inline-block;
        margin-right: 10px;
        margin-bottom: 0;
        padding: 0;
        width: 18px;
        height: 18px;
        max-width: 100%;
        padding-right: 0;
        overflow: visible; }
        .treeMenu ul li .folderDropdown a:last-child {
          margin: 0; }
        .treeMenu ul li .folderDropdown a:focus {
          background-color: transparent; }
      .treeMenu ul li .folderDropdown .customTooltip {
        top: 25px;
        left: 0; }
      .treeMenu ul li .folderDropdown .rename_folder img,
      .treeMenu ul li .folderDropdown .delete_folder img {
        height: 18px; }
  .treeMenu ul li[class*="level"] {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    /*padding-right: 25px;*/ }
    .treeMenu ul li[class*="level"] .icon {
      background: url(../img/down-arrow-gray.svg);
      background-size: 20px 20px;
      background-position: center center;
      background-repeat: no-repeat;
      width: 24px;
      height: 24px;
      display: block;
      position: relative;
      z-index: 2;
      cursor: pointer; }
    .treeMenu ul li[class*="level"] .minus {
      background: url(../img/down-arrow-gray.svg);
      background-size: 20px 20px;
      background-position: center center;
      background-repeat: no-repeat;
      transform: rotate(-180deg); }
    .treeMenu ul li[class*="level"] ul {
      display: none; }
  .treeMenu ul .open .dropdown {
    display: block;
    margin-top: 10px;
    padding-left: 15px;
    width: 100%; }
  .treeMenu ul > li {
    margin-bottom: 15px;
    position: relative; }
    .treeMenu ul > li li {
      margin-bottom: 0;
      display: flex;
      flex-wrap: wrap; }

.treeMenu .folderOpTrigger {
  width: 25px;
  height: 25px;
  max-width: 100%;
  border-radius: 20px;
  background-color: #9b9b9b; }

.treeMenu .folderCount {
  font-size: 12px;
  position: absolute;
  right: 0;
  top: 4px; }

.renameFolder .form-group input[type="text"] {
  background: #F6F7FB;
  border: 1px solid #E9E8E8;
  box-sizing: border-box;
  border-radius: 21px;
  width: 100% !important; }

.renameFolder .folderDropdown {
  width: 220px;
  left: -97px !important; }
  .renameFolder .folderDropdown .btn-link {
    border: 0;
    font-weight: bold;
    color: #4A4A4A; }
    .renameFolder .folderDropdown .btn-link img {
      width: 16px;
      margin-right: 5px; }
    .renameFolder .folderDropdown .btn-link:hover {
      text-decoration: none; }
  .renameFolder .folderDropdown .btnCancel {
    float: left; }
  .renameFolder .folderDropdown .btnSave {
    float: right;
    color: #0084FF; }
    .renameFolder .folderDropdown .btnSave img {
      filter: invert(35%) sepia(72%) saturate(3760%) hue-rotate(196deg) brightness(105%) contrast(104%); }

.renameFolder .renameFolderForm {
  margin: 0; }

.tagDeleteWarn_files {
  position: fixed;
  top: 0;
  transition: all 0.2s ease-in;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0 15px;
  font-size: 18px;
  opacity: 0;
  visibility: hidden;
  z-index: 9999; }
  .tagDeleteWarn_files .header {
    padding: 20px 30px;
    position: relative;
    width: 100%;
    text-align: left;
    margin-top: 0;
    font-size: 20px;
    color: #303030;
    font-weight: 500;
    display: flex;
    align-items: center;
    margin-top: 0; }
    .tagDeleteWarn_files .header .icon {
      margin-right: 10px; }
  .tagDeleteWarn_files .closeModal {
    padding: 0 !important; }
  .tagDeleteWarn_files p {
    padding: 10px 30px 15px;
    margin: 0;
    text-align: left;
    font-size: 16px;
    color: #595959;
    font-weight: 400;
    width: 100%; }
    .tagDeleteWarn_files p strong {
      font-weight: 600; }
  .tagDeleteWarn_files p + p {
    padding-top: 0; }
  .tagDeleteWarn_files .delete-trueFiles,
  .tagDeleteWarn_files .deleteModal-true {
    background: #BF2600;
    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.08), inset 0px -1px 0px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    color: #fff;
    height: 36px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0 15px;
    font-size: 14px; }
  .tagDeleteWarn_files .delete-falseFiles,
  .tagDeleteWarn_files .deleteModal-false {
    color: #303030;
    font-size: 14px;
    font-weight: 500;
    padding: 0 15px; }
    .tagDeleteWarn_files .delete-falseFiles:hover, .tagDeleteWarn_files .delete-falseFiles:focus,
    .tagDeleteWarn_files .deleteModal-false:hover,
    .tagDeleteWarn_files .deleteModal-false:focus {
      color: #303030; }
  .tagDeleteWarn_files .okay-btn {
    display: flex;
    height: 36px;
    padding: 5px 12px;
    border: none !important;
    border-radius: 10px;
    background: #8020CF;
    box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px 1px 0px 0px rgba(0, 0, 0, 0.08);
    justify-content: center;
    align-items: center;
    color: #FFF;
    text-align: center;
    font-size: 14px;
    font-weight: 600; }
  .tagDeleteWarn_files .tagDeleteWarn_files_inner {
    padding: 0; }
  .tagDeleteWarn_files .deleteWarnOptions {
    margin-top: 10px;
    padding: 0 20px 20px; }

.tagDeleteWarn_files-active {
  opacity: 1;
  visibility: visible; }

.tagDeleteWarn_files_inner {
  background: #ffffff;
  border-radius: 10px;
  padding: 10px 20px;
  width: 100%;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  position: relative; }
  .tagDeleteWarn_files_inner h4 {
    font-weight: 500;
    font-size: 20px;
    line-height: 36px;
    color: #303030;
    margin-bottom: 25px; }
  .tagDeleteWarn_files_inner p {
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #595959; }

.tagDeleteWarn_process {
  position: fixed;
  top: 0;
  transition: all 0.2s ease-in;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0 15px;
  font-size: 17px;
  font-weight: 300;
  opacity: 0;
  visibility: hidden;
  z-index: 9999; }
  .tagDeleteWarn_process p {
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    color: #333333; }
  .tagDeleteWarn_process a {
    padding: 4px 30px;
    font-weight: 400;
    border-radius: 30px;
    margin: 0 5px; }
    .tagDeleteWarn_process a:focus, .tagDeleteWarn_process a:active, .tagDeleteWarn_process a:hover {
      color: #fff; }

.tagDeleteWarn_process-active {
  opacity: 1;
  visibility: visible; }

.tagDeleteWarn_process_inner {
  background: #ffffff;
  border-radius: 10px;
  padding: 20px;
  width: 100%;
  max-width: 400px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; }

.contextMenuPlugin {
  display: none !important; }

.tagDeleteWarn_folder {
  position: fixed;
  top: 0;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  font-size: 18px;
  font-weight: 300;
  opacity: 0;
  visibility: hidden;
  z-index: 9999; }
  .tagDeleteWarn_folder p {
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    color: #333333; }
  .tagDeleteWarn_folder a {
    padding: 4px 30px;
    font-weight: 500;
    border-radius: 30px;
    margin: 0 5px; }
    .tagDeleteWarn_folder a:focus, .tagDeleteWarn_folder a:hover {
      color: #fff; }
    .tagDeleteWarn_folder a .active {
      color: #fff; }
  .tagDeleteWarn_folder .tagDeleteWarn_folder_inner {
    background: #ffffff;
    padding: 20px;
    width: 100%;
    max-width: 400px;
    height: 200px;
    border-radius: 10px;
    transition: all 0.2s ease-in;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; }

.tagDeleteWarn_folder-active {
  opacity: 1;
  visibility: visible; }

.fileAreaContent .videoPlaybuttonImg {
  display: none; }

.fileAreaContent .eachFileAreaContent.nonSelected {
  opacity: 0.7; }

.fileAreaContent .eachFileAreaContent.selected {
  opacity: 1; }

.fileAreaContent .videoThumbWrapper {
  position: relative; }
  .fileAreaContent .videoThumbWrapper .videoPlaybuttonImg {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    background: url(../img/play-button.svg) center center no-repeat;
    background-size: 48px; }

.sortByList .fileAreaContent .videoThumbWrapper .videoPlaybuttonImg {
  background-size: 35px; }

.emptyFolderWarn-active {
  opacity: 1;
  visibility: visible;
  transition: all 0.2s ease-in; }

.emptyFolderWarn_inner {
  background: #ffffff;
  padding: 20px;
  width: 400px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  color: #58595B; }

.emptyFolderWarn {
  position: fixed;
  top: 0;
  transition: all 0.2s ease-in;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0 15px;
  font-size: 17px;
  font-weight: 300;
  opacity: 0;
  visibility: hidden;
  z-index: 9999; }
  .emptyFolderWarn p {
    color: #58595B;
    font-size: 18px;
    font-weight: 400; }
  .emptyFolderWarn small {
    color: #58595B;
    font-family: "Roboto";
    margin-bottom: 15px; }
  .emptyFolderWarn a {
    padding: 4px 30px;
    font-weight: 500;
    background: #F7941D;
    margin: 0 5px; }

.myFilesFileArea .fileAreaBottomBar .footerActions {
  box-shadow: 2px 5px 5px rgba(22, 22, 22, 0.08);
  display: flex;
  align-items: center;
  padding-top: 5px; }
  .myFilesFileArea .fileAreaBottomBar .footerActions .actions {
    display: none; }

.myFilesFileArea .topSearch {
  max-width: 255px;
  margin-right: 20px;
  z-index: 4; }
  @media (max-width: 480px) {
    .myFilesFileArea .topSearch {
      margin: 0 auto;
      max-width: 100%; } }
  .myFilesFileArea .topSearch input {
    border-color: #ededed;
    border-radius: 10px;
    background: #ffffff;
    color: #58595b;
    padding-left: 45px !important;
    padding-right: 0 !important;
    box-shadow: 0px 1px 4px rgba(95, 95, 95, 0.25);
    transition: all 0.2s ease-in;
    font-size: 14px; }
    .myFilesFileArea .topSearch input:hover, .myFilesFileArea .topSearch input:focus {
      box-shadow: 0px 1px 4px rgba(95, 95, 95, 0.25) !important; }
    .myFilesFileArea .topSearch input::-webkit-input-placeholder {
      /* Chrome/Opera/Safari */
      color: rgba(0, 0, 0, 0.75); }
    .myFilesFileArea .topSearch input::-moz-placeholder {
      /* Firefox 19+ */
      color: #5F5F5F; }
    .myFilesFileArea .topSearch input:-ms-input-placeholder {
      /* IE 10+ */
      color: rgba(0, 0, 0, 0.75); }
    .myFilesFileArea .topSearch input:-moz-placeholder {
      /* Firefox 18- */
      color: rgba(0, 0, 0, 0.75); }
  .myFilesFileArea .topSearch button {
    right: auto;
    left: 0; }
  .myFilesFileArea .topSearch .dispFlex {
    display: flex;
    justify-content: flex-start;
    align-items: center; }
    .myFilesFileArea .topSearch .dispFlex .search-icon {
      width: 30px;
      margin-right: 5px;
      display: inline-flex;
      justify-content: center; }
    .myFilesFileArea .topSearch .dispFlex .eac-item {
      width: 90%;
      font-size: 14px; }

.selecteFolder {
  background: #F6F7FB;
  border: 2px solid #FFFFFF;
  padding: 10px 15px;
  color: #58595B;
  font-size: 16px;
  line-height: 19px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 10px 10px 0 0;
  margin-bottom: 15px; }
  .selecteFolder a {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center; }
    .selecteFolder a img {
      width: 16px; }

.allFolderModal .modal-header h4 {
  text-align: left !important;
  border-bottom: solid 2px #EDEDED;
  padding-bottom: 10px;
  margin-bottom: 10px; }

.allFolderModal .modal-header .closeModal {
  width: 16px;
  height: 16px;
  padding: 0; }

.allFolderModal .allFolder {
  width: 100%;
  padding: 0 15px 20px;
  height: auto;
  max-height: 300px; }
  .allFolderModal .allFolder .mCSB_inside > .mCSB_container {
    padding-right: 30px; }
  .allFolderModal .allFolder .folderDropdown {
    min-width: 200px;
    right: 40px;
    top: -21px !important;
    border-radius: 10px !important;
    padding: 15px 20px !important;
    transform: none !important; }
    .allFolderModal .allFolder .folderDropdown a {
      margin-right: 20px; }
    .allFolderModal .allFolder .folderDropdown .arrow {
      left: auto;
      right: -10px;
      transform: rotate(90deg);
      top: 30%; }
  .allFolderModal .allFolder .treeMenu {
    padding-top: 30px; }

.allFolderModal .modal-footer {
  margin: 0 auto;
  display: block;
  width: 90%;
  border-top: solid 2px #EDEDED;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0; }

.allFolderModal .createNewfolder {
  position: static;
  max-width: 215px;
  margin: 0 auto; }

.mobView {
  display: none;
  justify-content: space-between;
  align-items: center; }

.topSearch .easy-autocomplete {
  width: 100% !important; }

.topSearch.mobView .easy-autocomplete-container {
  top: 80px; }

.imagePreviewModal {
  width: 100%; }
  .imagePreviewModal .modal-lg {
    max-width: 1100px; }
  .imagePreviewModal .modalImgWrapper {
    padding: 40px 0 0;
    align-items: center;
    justify-content: center;
    display: flex; }
  .imagePreviewModal .tagsWrapper {
    width: 345px;
    min-height: 345px;
    max-height: 345px;
    border-top: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 41px 12px 0 12px; }
  .imagePreviewModal .tab-content {
    border: 1px solid #D8D8D8;
    margin-top: -1px; }

.imagePreviewModal .tab-pane {
  padding: 10px 5px 20px 10px; }

.tagsWrapper .tab-content .tab-pane {
  padding: 10px 5px 20px 10px; }

@media (max-width: 1200px) {
  .smoothModalContainer {
    max-width: 960px;
    width: 100%; }
  .topSearchBtnMobile {
    display: none; } }

@media (max-width: 967px) {
  .mobView {
    display: flex; }
  .deskView {
    display: none; }
  .orangeRadialBgBar-left {
    margin-bottom: 20px;
    padding: 0 15px; }
  .myFilesWrapper {
    padding-top: 0; }
    .myFilesWrapper .topSearch {
      width: 100%; }
  .myFilesFileArea {
    width: calc(100%);
    padding: 0;
    border-radius: 10px; }
    .myFilesFileArea .fileAreaTopFolder,
    .myFilesFileArea .fileAreaTopDate,
    .myFilesFileArea .fileAreaFolder,
    .myFilesFileArea .fileAreaDate {
      display: none; }
    .myFilesFileArea .fileArea,
    .myFilesFileArea .fileAreaTopBar {
      padding: 0 10px; }
  .fileAreaBottomBar {
    width: calc(94%);
    margin: 0 10px; }
  .myFilesContentArea {
    flex-wrap: wrap; }
  .myFilesFolderArea {
    display: none; }
  .topBarWrapper .topSearch {
    display: none; }
  .sortByGrid .fileAreaContent,
  .sortByList .fileAreaContent {
    height: auto;
    padding-bottom: 50px; }
  .sortByList .fileAreaTopCheckbox {
    width: 35px; }
  .sortByList .fileAreaTopActions,
  .sortByList .fileAreaActions {
    width: 10%; }
  .sortByList .fileAreaActions .actions {
    display: none; }
  .sortByList .fileAreaActions .folderOptions {
    position: static; }
    .sortByList .fileAreaActions .folderOptions .folderDropdown {
      left: auto !important;
      right: 60px;
      transform: none !important;
      top: -10px !important;
      min-width: 215px;
      border-radius: 10px !important; }
      .sortByList .fileAreaActions .folderOptions .folderDropdown a {
        margin: 0 10px; }
      .sortByList .fileAreaActions .folderOptions .folderDropdown .arrow {
        left: auto;
        right: -11px;
        top: 30%;
        transform: rotate(90deg); }
  .sortByList .fileAreaTopName,
  .sortByList .fileAreaName {
    width: 65%; }
  .sortByList .fileAreaTopImage,
  .sortByList .fileAreaImage {
    width: 120px; }
    .sortByList .fileAreaTopImage img,
    .sortByList .fileAreaImage img {
      max-width: 75px; }
  .publishUploadBtn {
    width: auto;
    padding: 5px 20px;
    /* font-size: 0;
    width: auto;
    background: transparent;
    box-shadow: none;

    img {
      margin: 0;
      filter: invert(32%) sepia(9%) saturate(131%) hue-rotate(182deg) brightness(95%) contrast(81%);
    }*/ }
  .fileAreaFileCount h4 b {
    font-weight: normal; }
  .smoothModalImageWrapper {
    width: 100%;
    height: auto; }
    .smoothModalImageWrapper .smoothModalImage {
      height: auto; }
    .smoothModalImageWrapper img {
      max-height: 265px;
      max-width: 265px; }
  .smoothModalContainer {
    flex-direction: column;
    padding-bottom: 20px; }
  .smoothModalTags {
    width: 100%;
    max-height: 100%;
    min-height: 100%;
    padding-left: 0; }
  .videoPlaybuttonImg {
    width: 50px; }
  .imagePreviewModal .tagsWrapper {
    width: 100%; }
  .imagePreviewModal .modal-content {
    flex-direction: row !important;
    overflow-y: auto;
    height: 80% !important; }
  .imagePreviewModal .tab-content {
    margin-bottom: 50px; }
  .tagsWrapper {
    margin-bottom: 50px; }
  .imagePreviewModal .modalImgWrapper {
    padding-top: 60px; } }

@media (max-width: 767px) {
  .fileAreaButtons .sortByList,
  .fileAreaButtons .sortByGrid {
    display: none; } }

@media (max-width: 480px) {
  .orangeRadialBgBar-left h1 {
    font-size: 16px; }
  .smoothModalContainer {
    height: 70%; }
  .topSearch {
    width: 93%; }
  .sortByList .eachFileAreaContent {
    padding: 10px 13px; }
  .sortByList .fileAreaContent ul {
    padding: 0;
    position: relative; }
  .sortByList .fileAreaTopName,
  .sortByList .fileAreaTopImage,
  .sortByList .fileAreaTopActions {
    display: none; }
  .sortByList .fileAreaTopActions,
  .sortByList .fileAreaActions {
    width: 40px; }
  .sortByList .fileAreaTopName,
  .sortByList .fileAreaName {
    width: 160px; }
    .sortByList .fileAreaTopName a,
    .sortByList .fileAreaName a {
      width: 100px; }
  .sortByList .fileAreaTopImage,
  .sortByList .fileAreaImage {
    width: 100px; }
  .sortByList .fileAreaActions .folderOptions .folderDropdown {
    right: 40px; }
  .sortByGrid .eachFileAreaContent {
    width: calc(100% / 2); }
  .allFolderModal .modal-header {
    padding-bottom: 0; }
  .selectedFileOptions {
    display: block; }
  .myFilesFileArea .fileAreaBottomBar {
    min-height: 40px;
    height: auto;
    padding: 10px;
    position: static;
    clear: both; }
    .myFilesFileArea .fileAreaBottomBar .selectedFileOptions {
      height: auto;
      padding: 0; }
    .myFilesFileArea .fileAreaBottomBar .footerActions {
      display: block;
      text-align: center; }
      .myFilesFileArea .fileAreaBottomBar .footerActions .actions {
        width: 100%; }
      .myFilesFileArea .fileAreaBottomBar .footerActions .selectedFileActions {
        margin: 5px 0;
        height: auto; }
        .myFilesFileArea .fileAreaBottomBar .footerActions .selectedFileActions li a {
          height: auto; }
          .myFilesFileArea .fileAreaBottomBar .footerActions .selectedFileActions li a img {
            margin-top: -5px; }
  .smoothModalContainer {
    overflow-y: auto; }
  .sortByList .fileAreaContent .videoThumbWrapper .videoPlaybuttonImg {
    background-size: 25px; } }

.no_notification_warn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #9c9c9c; }

.imageTypeFilters {
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  justify-content: space-between;
  position: relative;
  width: 80px;
  height: 36px;
  border-image: initial;
  box-shadow: 0px 4px 7px -1px rgba(0, 0, 0, 0.11), 0px 2px 4px -1px rgba(0, 0, 0, 0.07);
  border-radius: 5px; }
  @media (max-width: 1023px) {
    .imageTypeFilters {
      display: none; } }
  .imageTypeFilters a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    /*background-color: rgba(196, 196, 196, 0.31);*/
    background-color: #f8f8f8;
    width: 50%;
    height: 100%;
    transition: all 0.2s ease-in;
    cursor: pointer; }
    .imageTypeFilters a:hover {
      background-color: #ffffff; }
    .imageTypeFilters a.active {
      cursor: default;
      background-color: #EBEFF2; }
  .imageTypeFilters .sortByGrid {
    border-radius: 5px 0 0 5px;
    background: #ffffff url(../img/grid-icon-gray.svg) center center no-repeat; }
    .imageTypeFilters .sortByGrid.active {
      background: #E7E6EC url(../img/grid-icon-purple.svg) center center no-repeat; }
    .imageTypeFilters .sortByGrid .customTooltip {
      left: 0;
      right: auto; }
  .imageTypeFilters .sortByList {
    border-radius: 0 5px 5px 0;
    background: #ffffff url(../img/list-icon-gray.svg) center center no-repeat; }
    .imageTypeFilters .sortByList.active {
      background: #EBEFF2 url(../img/list-icon-purple.svg) center center no-repeat; }
    .imageTypeFilters .sortByList .customTooltip {
      right: 0;
      left: auto; }
  .imageTypeFilters .customTooltip {
    top: 40px;
    border-radius: 5px; }

.videoContentArea {
  margin-top: 0; }
  @media (max-width: 768px) {
    .videoContentArea {
      padding-top: 30px; } }
  .videoContentArea .myFilesContentArea {
    margin: 0 15px;
    max-width: 600px;
    margin: 0 auto; }
    @media (max-width: 480px) {
      .videoContentArea .myFilesContentArea {
        margin: 0 20px; } }

.videoUploadWrapper {
  text-align: center;
  width: calc(100%);
  border-radius: 10px;
  padding: 50px;
  float: none; }
  .videoUploadWrapper .fileAreaTopBar {
    width: auto;
    justify-content: center; }
  .videoUploadWrapper .iconUploadVideo {
    max-width: 100px;
    margin-bottom: 20px;
    filter: invert(0%) sepia(3%) saturate(0%) hue-rotate(235deg) brightness(105%) contrast(105%);
    opacity: 0.4; }

.topBarContainer .search-icon {
  width: 25px;
  margin-right: 10px; }
  .topBarContainer .search-icon img {
    filter: invert(90%) sepia(0%) saturate(663%) hue-rotate(92deg) brightness(100%) contrast(80%); }

.topBarContainer .dispFlex {
  display: flex; }

.topBarContainer .eac-item {
  width: 90%; }

.load-icon {
  text-align: center; }

.load-icon img {
  width: 50%;
  height: 120px; }
  @media (max-width: 967px) {
    .load-icon img {
      width: 100%; } }

.shareFolderContentArea .videoItem .videoOverlay {
  display: flex !important;
  justify-content: center;
  align-items: center;
  background-color: transparent !important;
  background: url(../img/play-button.svg) center center no-repeat;
  background-size: 35px; }

.shareFolderContentArea .modalVideo {
  padding: 0 20px; }

.shareFolderContentArea .imagePreviewModal .videoOverlay {
  display: none !important; }

.shareFolderContentArea .galleryThumbnailBox {
  width: 100%;
  min-height: 100px;
  max-height: 100px;
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center; }

@media (max-width: 480px) {
  .myFilesFileArea .fileAreaTopBar {
    flex-wrap: wrap;
    height: auto; }
  .myFilesFileArea .fileAreaFileCount {
    width: 100%;
    margin-bottom: 5px; }
  .myFilesFileArea .fileAreaButtons {
    width: 100%;
    flex-direction: column; }
  .btnSubmitRaw {
    padding: 5px 15px; } }

.fileAreaButtons #uploadModal {
  margin: 0 !important; }

.training-facial-wrapper {
  /*.createPerceptionBtn {
      font-family: $mainFont;
      background: $orange;
      color: #fff;
      font-size: 18px;
      font-weight: 500;
      height: 45px;
      text-align: center;
      float: left;
      width: 215px;
      font-weight: 300;
      border: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 500;
      border-radius: 30px;

      &:active,
      &:focus,
      &:hover {
          color: #fff !important;
      }
    }*/ }
  .training-facial-wrapper .createPerceptionInside {
    position: relative;
    z-index: 10; }
  .training-facial-wrapper .subBar {
    background: #333333;
    height: 70px;
    line-height: 33px;
    width: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
    align-items: center;
    padding: 0 30px; }
    @media (max-width: 1024px) {
      .training-facial-wrapper .subBar {
        padding: 15px !important; } }
  .training-facial-wrapper .perceptionCreateWrapper p {
    font-weight: 500;
    color: #fff;
    margin: 5px 0;
    font-size: 16px; }
  .training-facial-wrapper .perceptionCreateWrapper .radio p {
    color: #595959;
    display: inline-block;
    font-weight: 500; }
  .training-facial-wrapper .perceptionCreateWrapper .radio label {
    font-weight: 500; }
  .training-facial-wrapper .perceptionCreateWrapper .form-group {
    position: relative;
    margin-bottom: 20px; }
  .training-facial-wrapper .perceptionCreateWrapper input[type='text'],
  .training-facial-wrapper .perceptionCreateWrapper select {
    font-size: 16px;
    border: 0; }
  .training-facial-wrapper .perceptionCreateBtn {
    height: 50px;
    width: 100%;
    max-width: 160px;
    margin: 0 auto; }
  .training-facial-wrapper .settings_orangeSquare {
    background: #f7941d;
    width: 50px;
    height: 50px;
    font-family: "Roboto";
    font-weight: bold;
    color: #2f2f31;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: -25px;
    top: -15px; }
    .training-facial-wrapper .settings_orangeSquare img {
      width: 25px; }
  .training-facial-wrapper .createPerceptionModal .modal-md,
  .training-facial-wrapper .editClassModal .modal-md,
  .training-facial-wrapper .optionModal .modal-md {
    z-index: 10;
    height: 100%;
    max-width: 580; }
  .training-facial-wrapper .caption {
    text-align: center;
    color: #fff;
    background: #272727;
    font-size: 22px;
    font-weight: 500;
    display: flex;
    width: 100%;
    height: 70px;
    text-align: center;
    justify-content: center;
    align-items: center;
    font-family: "Roboto";
    margin: 0; }
    @media (min-width: 1025px) {
      .training-facial-wrapper .caption {
        height: 50px; } }
    .training-facial-wrapper .caption img {
      width: 35px;
      margin-left: 15px; }
    .training-facial-wrapper .caption .backBtn img {
      margin-left: 0 !important; }
  .training-facial-wrapper .perceptionTable {
    width: 100%;
    color: #fff;
    border: 1px solid #828282;
    background: #424242;
    margin-top: 0;
    float: left; }
    .training-facial-wrapper .perceptionTable thead {
      background: #2b2b2b;
      font-size: 16px;
      font-weight: bold; }
    .training-facial-wrapper .perceptionTable a:focus,
    .training-facial-wrapper .perceptionTable a:active {
      color: white !important; }
    .training-facial-wrapper .perceptionTable tr {
      border: 1px solid #828282;
      height: 37px;
      padding: 3px 5px; }
      .training-facial-wrapper .perceptionTable tr a {
        color: #fff;
        text-decoration: underline; }
        .training-facial-wrapper .perceptionTable tr a:hover {
          text-decoration: underline !important; }
    .training-facial-wrapper .perceptionTable td {
      height: 75px;
      padding: 3px 5px;
      border: 1px solid #828282;
      font-size: 16px; }
    .training-facial-wrapper .perceptionTable th {
      height: 50px;
      padding: 3px 5px;
      border: 1px solid #828282; }
  .training-facial-wrapper .classDetailBar {
    justify-content: space-between; }
  .training-facial-wrapper .classDetailDropdownToggle {
    width: 190px;
    height: 35px;
    color: #fff;
    background: #2e9268;
    float: left;
    text-align: center;
    font-family: "Roboto";
    font-size: 16px;
    border-radius: 30px; }
    .training-facial-wrapper .classDetailDropdownToggle :active,
    .training-facial-wrapper .classDetailDropdownToggle :focus,
    .training-facial-wrapper .classDetailDropdownToggle :hover {
      color: #fff !important; }
  .training-facial-wrapper .classDetailDropdownToggle:focus,
  .training-facial-wrapper .classDetailDropdownToggle:hover {
    color: #fff !important; }
  .training-facial-wrapper .classDetailDropdown-active {
    position: relative;
    padding: 0; }
    .training-facial-wrapper .classDetailDropdown-active ul {
      display: block !important;
      position: absolute;
      top: 36px;
      left: 0;
      padding: 0; }
      @media (max-width: 1024px) {
        .training-facial-wrapper .classDetailDropdown-active ul {
          z-index: 999; } }
      .training-facial-wrapper .classDetailDropdown-active ul li {
        text-align: left;
        list-style-type: none;
        background: #2e9268;
        color: #fff;
        font-size: 16px;
        font-weight: 500;
        height: 35px;
        text-align: center;
        float: left;
        width: 190px;
        font-weight: 300;
        border: 0;
        line-height: 33px;
        font-family: "Roboto";
        text-decoration: none; }
        .training-facial-wrapper .classDetailDropdown-active ul li a {
          padding-left: 8px;
          text-align: left;
          color: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%; }
  .training-facial-wrapper .classDetailDropdown {
    position: relative;
    padding: 0;
    margin: 0; }
    .training-facial-wrapper .classDetailDropdown li {
      list-style-type: none; }
    .training-facial-wrapper .classDetailDropdown a {
      font-size: 16px; }
    .training-facial-wrapper .classDetailDropdown ul {
      display: none; }

.trainingContentArea {
  display: flex;
  width: 100%;
  border-radius: 10px;
  height: auto;
  margin-top: 15px; }
  .trainingContentArea .trainingMenu {
    float: right;
    width: 220px;
    background: #ffffff;
    border-radius: 10px 0px 0px 10px;
    position: relative;
    padding: 15px 10px;
    z-index: 2; }
    @media (min-width: 1680px) {
      .trainingContentArea .trainingMenu {
        width: 270px; } }
    .trainingContentArea .trainingMenu h3 {
      color: #58595b;
      font-weight: bold;
      font-size: 18px;
      padding-left: 10px;
      margin-bottom: 35px; }
    .trainingContentArea .trainingMenu ul {
      padding: 0 0 0 15px;
      margin: 0 -10px 0; }
      @media (min-width: 1680px) {
        .trainingContentArea .trainingMenu ul {
          padding: 0 0 0 28px; } }
      .trainingContentArea .trainingMenu ul li {
        list-style: none;
        margin-bottom: 6px; }
        .trainingContentArea .trainingMenu ul li a {
          display: block;
          border-radius: 27px 0px 0px 27px;
          font-weight: bold;
          font-size: 18px;
          line-height: 21px;
          color: #58595b;
          padding: 13px 10px 12px 30px; }
          .trainingContentArea .trainingMenu ul li a:hover, .trainingContentArea .trainingMenu ul li a:focus, .trainingContentArea .trainingMenu ul li a:focus {
            color: #138bfa; }
        .trainingContentArea .trainingMenu ul li .upgradePlanTootlTip {
          visibility: hidden;
          opacity: 0;
          position: absolute; }
      .trainingContentArea .trainingMenu ul .normalUser a {
        color: rgba(89, 89, 89, 0.49); }
      .trainingContentArea .trainingMenu ul .active a {
        background: #ffffff;
        color: #138bfa;
        box-shadow: -10px 0px 10px rgba(0, 0, 0, 0.103994); }
      .trainingContentArea .trainingMenu ul .active:after {
        display: none; }
  .trainingContentArea .trainingArea {
    width: 100%;
    /*background: #fff;
    border-radius: 10px;
    padding: 30px 25px 70px 25px;*/
    position: relative;
    min-height: 620px; }
    @media (min-width: 1680px) {
      .trainingContentArea .trainingArea {
        min-height: 760px; } }
    @media (max-width: 1400px) {
      .trainingContentArea .trainingArea {
        min-height: 560px; } }
    .trainingContentArea .trainingArea .trainingAreaTopBar {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      z-index: 1001; }
      .trainingContentArea .trainingArea .trainingAreaTopBar .trainingAreaButtons {
        display: flex;
        position: relative;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        /*/ .deleteAllClassImg {
        //   img {
        //     // filter: invert(8%) sepia(32%) saturate(5390%) hue-rotate(344deg) brightness(120%) contrast(99%);
        //     filter: invert(8%) sepia(32%) saturate(0%) hue-rotate(344deg) brightness(200%) contrast(99%);
        //   }
        // }

        // .createPerceptionBtn {
        //   img {
        //     filter: invert(8%) sepia(32%) saturate(5390%) hue-rotate(344deg) brightness(160%) contrast(99%);
        //   }
        // }*/ }
        @media (max-width: 967px) {
          .trainingContentArea .trainingArea .trainingAreaTopBar .trainingAreaButtons {
            flex-direction: column; } }
        .trainingContentArea .trainingArea .trainingAreaTopBar .trainingAreaButtons img {
          margin-right: 10px; }
        .trainingContentArea .trainingArea .trainingAreaTopBar .trainingAreaButtons .orange-button,
        .trainingContentArea .trainingArea .trainingAreaTopBar .trainingAreaButtons .blue-button,
        .trainingContentArea .trainingArea .trainingAreaTopBar .trainingAreaButtons .btnDisable {
          padding: 9px 25px;
          white-space: nowrap; }
          @media (max-width: 967px) {
            .trainingContentArea .trainingArea .trainingAreaTopBar .trainingAreaButtons .orange-button,
            .trainingContentArea .trainingArea .trainingAreaTopBar .trainingAreaButtons .blue-button,
            .trainingContentArea .trainingArea .trainingAreaTopBar .trainingAreaButtons .btnDisable {
              margin-bottom: 10px;
              width: 100%;
              max-width: 200px; } }
        .trainingContentArea .trainingArea .trainingAreaTopBar .trainingAreaButtons .disabled,
        .trainingContentArea .trainingArea .trainingAreaTopBar .trainingAreaButtons .disable {
          background: #cbcbcb;
          border-color: #cbcbcb;
          opacity: 1;
          pointer-events: auto;
          cursor: default;
          position: relative; }
          .trainingContentArea .trainingArea .trainingAreaTopBar .trainingAreaButtons .disabled .customTooltip,
          .trainingContentArea .trainingArea .trainingAreaTopBar .trainingAreaButtons .disable .customTooltip {
            top: 50px;
            right: 0; }
          .trainingContentArea .trainingArea .trainingAreaTopBar .trainingAreaButtons .disabled:hover .customTooltip,
          .trainingContentArea .trainingArea .trainingAreaTopBar .trainingAreaButtons .disable:hover .customTooltip {
            visibility: visible;
            opacity: 1; }
        @media (max-width: 967px) {
          .trainingContentArea .trainingArea .trainingAreaTopBar .trainingAreaButtons .orange-button.add_new_image {
            max-width: 230px; } }
        .trainingContentArea .trainingArea .trainingAreaTopBar .trainingAreaButtons .perception_enableAllBtn,
        .trainingContentArea .trainingArea .trainingAreaTopBar .trainingAreaButtons .perception_disableAllBtn {
          padding: 0 25px; }
        .trainingContentArea .trainingArea .trainingAreaTopBar .trainingAreaButtons .orange-border-button,
        .trainingContentArea .trainingArea .trainingAreaTopBar .trainingAreaButtons .blue-border-button,
        .trainingContentArea .trainingArea .trainingAreaTopBar .trainingAreaButtons .createPerceptionBtn,
        .trainingContentArea .trainingArea .trainingAreaTopBar .trainingAreaButtons .createPreception,
        .trainingContentArea .trainingArea .trainingAreaTopBar .trainingAreaButtons .predictViaUpladBtn {
          padding: 9px 25px;
          margin-right: 15px;
          white-space: nowrap; }
          @media (max-width: 1500px) {
            .trainingContentArea .trainingArea .trainingAreaTopBar .trainingAreaButtons .orange-border-button,
            .trainingContentArea .trainingArea .trainingAreaTopBar .trainingAreaButtons .blue-border-button,
            .trainingContentArea .trainingArea .trainingAreaTopBar .trainingAreaButtons .createPerceptionBtn,
            .trainingContentArea .trainingArea .trainingAreaTopBar .trainingAreaButtons .createPreception,
            .trainingContentArea .trainingArea .trainingAreaTopBar .trainingAreaButtons .predictViaUpladBtn {
              padding: 6px 20px;
              margin-right: 10px;
              font-size: 14px; } }
          @media (max-width: 967px) {
            .trainingContentArea .trainingArea .trainingAreaTopBar .trainingAreaButtons .orange-border-button,
            .trainingContentArea .trainingArea .trainingAreaTopBar .trainingAreaButtons .blue-border-button,
            .trainingContentArea .trainingArea .trainingAreaTopBar .trainingAreaButtons .createPerceptionBtn,
            .trainingContentArea .trainingArea .trainingAreaTopBar .trainingAreaButtons .createPreception,
            .trainingContentArea .trainingArea .trainingAreaTopBar .trainingAreaButtons .predictViaUpladBtn {
              margin-right: 0;
              width: 100%;
              max-width: 200px; } }
        @media (max-width: 967px) {
          .trainingContentArea .trainingArea .trainingAreaTopBar .trainingAreaButtons .orange-border-button,
          .trainingContentArea .trainingArea .trainingAreaTopBar .trainingAreaButtons .blue-border-button {
            margin-bottom: 10px;
            width: 100%;
            max-width: 200px; } }
        .trainingContentArea .trainingArea .trainingAreaTopBar .trainingAreaButtons .orange-button,
        .trainingContentArea .trainingArea .trainingAreaTopBar .trainingAreaButtons .blue-button {
          margin-right: 0;
          padding: 9px 25px; }
          @media (max-width: 1500px) {
            .trainingContentArea .trainingArea .trainingAreaTopBar .trainingAreaButtons .orange-button,
            .trainingContentArea .trainingArea .trainingAreaTopBar .trainingAreaButtons .blue-button {
              padding: 6px 20px; } }
          @media (max-width: 967px) {
            .trainingContentArea .trainingArea .trainingAreaTopBar .trainingAreaButtons .orange-button,
            .trainingContentArea .trainingArea .trainingAreaTopBar .trainingAreaButtons .blue-button {
              margin-bottom: 10px;
              width: 100%;
              max-width: 200px; } }
        .trainingContentArea .trainingArea .trainingAreaTopBar .trainingAreaButtons .addFileBtn.alertDesable {
          background-color: #d7d7d7; }
          .trainingContentArea .trainingArea .trainingAreaTopBar .trainingAreaButtons .addFileBtn.alertDesable:hover .trainingContentArea .trainingArea .trainingAreaTopBar .trainingAreaButtons .addFileBtn.alertDesable:focus {
            background-color: #d7d7d7; }
    .trainingContentArea .trainingArea .preceptionAreaTopInnerBar {
      padding: 20px 10px;
      background: white;
      border-radius: 10px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-direction: row;
      margin: 10px 0 0 0;
      border-bottom: 1px solid #ededed; }
      .trainingContentArea .trainingArea .preceptionAreaTopInnerBar li {
        font-weight: 600;
        list-style-type: none;
        font-size: 14px;
        color: 4E4576;
        white-space: nowrap; }
      .trainingContentArea .trainingArea .preceptionAreaTopInnerBar .preceptionAreaTopCheckbox label span {
        width: 20px;
        height: 20px; }
        .trainingContentArea .trainingArea .preceptionAreaTopInnerBar .preceptionAreaTopCheckbox label span:before {
          width: 20px;
          height: 20px;
          background-color: #f7941d;
          background-size: 14px 14px;
          border-radius: 3px;
          border: 1px solid #f7941d; }
    .trainingContentArea .trainingArea .preceptionAreaTopCheckbox {
      width: 3%;
      display: flex;
      align-items: center;
      justify-content: center !important;
      /* Style the artificial checkbox */
      /* Style its checked state...with a ticked icon */ }
      .trainingContentArea .trainingArea .preceptionAreaTopCheckbox label input {
        display: none;
        /* Hide the default checkbox */ }
      .trainingContentArea .trainingArea .preceptionAreaTopCheckbox label span {
        height: 20px;
        width: 20px;
        display: inline-block;
        position: relative;
        border-radius: 3px;
        cursor: pointer;
        background: url(../img/checkbox-default.svg) 0 0 no-repeat;
        background-size: cover; }
      .trainingContentArea .trainingArea .preceptionAreaTopCheckbox label {
        margin: 0; }
      .trainingContentArea .trainingArea .preceptionAreaTopCheckbox [type='checkbox']:checked + span {
        background: url(../img/checkbox-active.svg) 0 0 no-repeat;
        background-size: cover; }
      .trainingContentArea .trainingArea .preceptionAreaTopCheckbox span {
        background: #ffffff; }
      .trainingContentArea .trainingArea .preceptionAreaTopCheckbox .alertDesable {
        border-radius: 4px;
        width: 20px;
        height: 20px; }
      .trainingContentArea .trainingArea .preceptionAreaTopCheckbox .alertTooltip {
        background: #ffffff;
        border: 1px solid #e6e6e6;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
        border-radius: 5px;
        position: absolute;
        height: 26px;
        width: auto;
        bottom: 25px;
        right: -85px;
        display: flex; }
    .trainingContentArea .trainingArea .preceptionAreaTopName {
      width: 20%;
      display: flex;
      align-items: center;
      justify-content: flex-start; }
      .trainingContentArea .trainingArea .preceptionAreaTopName .instructions_cls {
        max-width: 450px; }
      .trainingContentArea .trainingArea .preceptionAreaTopName a {
        color: #58595b;
        word-break: break-word; }
        .trainingContentArea .trainingArea .preceptionAreaTopName a:focus {
          color: #58595b !important; }
      .trainingContentArea .trainingArea .preceptionAreaTopName .btnDownArrow {
        margin-left: 10px;
        cursor: pointer;
        padding: 0;
        border: 0;
        background: transparent;
        width: 20px;
        height: 20px;
        line-height: 20px;
        margin-top: 2px; }
    .trainingContentArea .trainingArea .preceptionAreaTopId {
      width: 8%;
      display: flex;
      align-items: center;
      justify-content: flex-start; }
    .trainingContentArea .trainingArea .preceptionAreaTopTraining {
      width: 15%;
      flex-direction: column; }
      .trainingContentArea .trainingArea .preceptionAreaTopTraining .statusclass {
        font-size: 12px;
        margin-bottom: 0; }
    .trainingContentArea .trainingArea .preceptionAreaTopDate {
      width: 10%; }
    .trainingContentArea .trainingArea .preceptionAreaTopTrainingMode {
      width: 12%; }
      .trainingContentArea .trainingArea .preceptionAreaTopTrainingMode a {
        color: #58595b; }
    .trainingContentArea .trainingArea .preceptionAreaTopStatus {
      text-align: center; }
      .trainingContentArea .trainingArea .preceptionAreaTopStatus .gifLoader {
        width: 30px; }
      .trainingContentArea .trainingArea .preceptionAreaTopStatus .tick {
        width: 20px; }
    .trainingContentArea .trainingArea .preceptionAreaTopOwner {
      width: 18%;
      position: relative; }
      .trainingContentArea .trainingArea .preceptionAreaTopOwner .customTooltip {
        top: 30px; }
    .trainingContentArea .trainingArea .preceptionAreaTopSharedWith {
      width: 12%;
      text-align: center; }
    .trainingContentArea .trainingArea .preceptionAreaOnOff {
      width: 10%;
      text-align: center; }
    .trainingContentArea .trainingArea .preceptionAreaTopActions {
      position: relative;
      width: 12%;
      display: flex;
      align-items: center;
      justify-content: center; }
    .trainingContentArea .trainingArea .changeStatusText {
      font-style: normal;
      font-weight: 500;
      font-size: 12px;
      line-height: 14px;
      color: #9b9b9b;
      margin-left: 10px;
      width: 55px;
      display: none; }
    .trainingContentArea .trainingArea .perceptionClassToggle {
      display: inline-block;
      width: 44px;
      height: 16px;
      background: #138bfa;
      border-radius: 12px;
      z-index: 2;
      transition: all 0.2s ease-in;
      cursor: pointer;
      position: relative; }
      .trainingContentArea .trainingArea .perceptionClassToggle:before {
        content: '';
        display: block;
        height: 20px;
        width: 20px;
        background-color: #e0e0e0;
        border: 2px solid #138bfa;
        border-radius: 50%;
        transition: all 0.2s ease-in;
        position: absolute;
        left: 0;
        top: -2px; }
    .trainingContentArea .trainingArea .perceptionClassToggle-disabled {
      background: #e0e0e0; }
      .trainingContentArea .trainingArea .perceptionClassToggle-disabled:before {
        right: 0;
        left: auto;
        background-color: #bdbdbd;
        border-color: #e0e0e0; }
  .trainingContentArea .preceptionArea {
    width: 100%; }
  .trainingContentArea .preceptionAreaContent {
    width: 100%;
    padding: 0;
    min-height: 500px;
    list-style: none;
    background: white; }
    .trainingContentArea .preceptionAreaContent ul {
      padding: 0 10px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      width: 100%;
      list-style: none; }
    .trainingContentArea .preceptionAreaContent .eachPreceptionAreaContent {
      border-bottom: 1px solid #ededed;
      padding: 15px 0;
      font-size: 14px;
      color: #58595b; }
      .trainingContentArea .preceptionAreaContent .eachPreceptionAreaContent:last-of-type {
        border: none; }
      .trainingContentArea .preceptionAreaContent .eachPreceptionAreaContent li {
        display: flex;
        justify-content: flex-start;
        align-items: center; }
      .trainingContentArea .preceptionAreaContent .eachPreceptionAreaContent .preceptionAreaTopThumbil {
        justify-content: center; }
      .trainingContentArea .preceptionAreaContent .eachPreceptionAreaContent .preceptionAreaTopTraining {
        align-items: flex-start;
        justify-content: center; }
      .trainingContentArea .preceptionAreaContent .eachPreceptionAreaContent .preceptionAreaTopStatus {
        justify-content: center; }
      .trainingContentArea .preceptionAreaContent .eachPreceptionAreaContent .lessPhotoCount,
      .trainingContentArea .preceptionAreaContent .eachPreceptionAreaContent .image_count,
      .trainingContentArea .preceptionAreaContent .eachPreceptionAreaContent .ready {
        justify-content: flex-start; }
      .trainingContentArea .preceptionAreaContent .eachPreceptionAreaContent .preceptionAreaOnOff {
        width: 10%;
        display: flex;
        align-items: center;
        justify-content: center; }
      .trainingContentArea .preceptionAreaContent .eachPreceptionAreaContent .preceptionAreaTopSharedWith {
        justify-content: center; }
      .trainingContentArea .preceptionAreaContent .eachPreceptionAreaContent .preceptionAreaTopActions {
        justify-content: center; }
        .trainingContentArea .preceptionAreaContent .eachPreceptionAreaContent .preceptionAreaTopActions .customTooltip {
          top: 25px;
          right: 0; }
  .trainingContentArea .selectedActions {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: 15px; }
  .trainingContentArea .switch {
    margin: 0 0 0 15px; }
  .trainingContentArea .label {
    margin-bottom: 0; }
  .trainingContentArea .download_file img {
    height: 16px; }
  .trainingContentArea .or {
    padding: 0 10px; }

.breadCrumb + .trainingContentArea {
  margin-top: 20px; }

.rawDataContentArea .rawTrainingDataArea .preceptionAreaTopActions {
  width: 15%; }

.rawTrainingDataArea .selectedFileActions a {
  line-height: 36px; }

.deepDetectToggle {
  display: inline-block;
  width: 55px;
  height: 24px;
  background: #f6f7fb;
  border: 1px solid #d0d1d5;
  border-radius: 12px;
  z-index: 2;
  transition: all 0.2s ease-in;
  cursor: pointer;
  position: relative; }
  .deepDetectToggle:before {
    content: '';
    display: block;
    height: 17px;
    width: 17px;
    background: url(../img/enable-check.svg) 0 0 no-repeat;
    border-radius: 50%;
    transform: translateY(0px);
    transition: all 0.2s ease-in;
    position: absolute;
    left: 3px;
    bottom: 3px; }
  .deepDetectToggle span {
    display: flex !important;
    justify-content: flex-end;
    align-items: center;
    margin-left: 0 !important;
    padding-right: 5px;
    font-weight: normal;
    height: 21px;
    transition: all 0.2s ease-in; }
  .deepDetectToggle .off {
    display: none !important; }

.deepDetectToggle.off {
  background: #d0d1d5; }
  .deepDetectToggle.off:before {
    transform: translateX(28px);
    background: url(../img/disable-minus.svg) 0 0 no-repeat;
    right: 3px; }
  .deepDetectToggle.off span {
    justify-content: flex-start;
    padding-right: 0;
    padding-left: 5px; }
  .deepDetectToggle.off .off {
    display: flex !important; }
  .deepDetectToggle.off .on {
    display: none !important; }

.eachPreceptionAreaContent .preceptionAreaTopName a {
  height: initial !important; }

.trainingAreaCount h4 {
  font-size: 16px;
  margin: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center; }
  @media (min-width: 1600px) {
    .trainingAreaCount h4 {
      font-size: 18px; } }
  .trainingAreaCount h4 b {
    color: #58595b;
    font-weight: 500; }
  .trainingAreaCount h4 span {
    display: inline-flex;
    font-weight: 500; }
    .trainingAreaCount h4 span b {
      max-width: 250px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap; }
      @media (min-width: 1680px) {
        .trainingAreaCount h4 span b {
          max-width: 500px; } }
  .trainingAreaCount h4 .personName {
    max-width: 250px;
    margin: 0;
    color: #58595b;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
    margin-bottom: -5px; }
    @media (min-width: 1680px) {
      .trainingAreaCount h4 .personName {
        max-width: 500px; } }

.trainingAreaCount .itemCounter,
.trainingAreaCount .item_Counter {
  width: 34px;
  height: 34px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: rgba(19, 139, 250, 0.14);
  border-radius: 34px;
  font-size: 16px;
  font-weight: 500;
  color: #138bfa;
  margin-left: 8px; }

.idBar {
  border-radius: 10px 10px 0 0;
  display: flex;
  justify-content: flex-start;
  align-items: center; }
  .idBar .idGroup {
    margin-right: 20px;
    white-space: nowrap;
    display: flex; }
    @media (min-width: 1400px) {
      .idBar .idGroup {
        margin-right: 20px; } }
    .idBar .idGroup label {
      margin: 0 5px 0 0;
      font-weight: 600;
      font-size: 14px;
      color: #5071A6;
      text-transform: capitalize;
      display: inline-block;
      letter-spacing: 0.4px; }
      @media (min-width: 1400px) {
        .idBar .idGroup label {
          font-size: 16px; } }
    .idBar .idGroup span {
      font-weight: 600;
      font-size: 14px;
      color: #0A2E60;
      text-transform: capitalize;
      max-width: 135px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: inline-block; }
      @media (min-width: 1400px) {
        .idBar .idGroup span {
          font-size: 16px; } }
    .idBar .idGroup .image_count {
      color: #0A2E60 !important; }
    .idBar .idGroup.alertDesable {
      background: transparent; }
      .idBar .idGroup.alertDesable .copyUID {
        opacity: 0.3; }
  @media (max-width: 967px) {
    .idBar {
      display: none; } }
  .idBar .copyUID {
    font-size: 16px;
    font-weight: 400;
    padding-left: 20px;
    height: 20px;
    color: #595959;
    background: url(../img/copy-clipboard-gray.svg) left center no-repeat;
    background-size: 16px; }
    @media (max-width: 1500px) {
      .idBar .copyUID {
        font-size: 14px; } }
  .idBar span.customTooltip,
  .idBar span.alertTooltip {
    top: 25px;
    left: 0;
    font-size: 15px;
    font-weight: 400;
    line-height: 22px;
    max-width: none; }

.switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 24px;
  /* Hide default HTML checkbox */
  /* The slider */ }
  .switch input {
    opacity: 0;
    width: 0;
    height: 0; }
  .switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #f6f7fb;
    border: 1px solid #d0d1d5;
    box-sizing: border-box;
    border-radius: 12px;
    -webkit-transition: 0.4s;
    transition: 0.4s; }
  .switch .slider:before {
    position: absolute;
    content: '';
    height: 17px;
    width: 17px;
    left: 3px;
    bottom: 3px;
    background: url(../img/enable-check.svg) 0 0 no-repeat;
    -webkit-transition: 0.4s;
    transition: 0.4s; }
  .switch input:checked + .slider {
    background-color: #d0d1d5; }
  .switch input:focus + .slider {
    box-shadow: 0 0 1px #d0d1d5; }
  .switch input:checked + .slider:before {
    -webkit-transform: translateX(23px);
    -ms-transform: translateX(23px);
    transform: translateX(23px);
    background: url(../img/disable-minus.svg) 0 0 no-repeat; }
  .switch .slider.round:before {
    border-radius: 50%; }

.showDropdown {
  display: block !important; }

.filterCount {
  border-radius: 15px;
  height: 22px;
  width: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #360D57;
  display: none;
  margin-right: 8px; }
  .filterCount span {
    color: #FFFFFF; }

.datasetFilterBox {
  display: none;
  position: absolute;
  top: 40px;
  right: 0;
  z-index: 999;
  height: auto;
  width: 405px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0px 2px 5px rgba(40, 40, 40, 0.1); }
  .datasetFilterBox h5 {
    margin: 0px 16px;
    font-family: "Euclid Circular B";
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #210835;
    margin-bottom: 0 !important;
    width: 100%;
    border-bottom: 1px solid #E0E0E0;
    padding-bottom: 5px; }
  .datasetFilterBox p {
    padding: 20px 20px 5px 16px;
    font-family: "Euclid Circular B";
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    margin-bottom: 0 !important;
    text-decoration-line: underline;
    text-underline-offset: 5px;
    color: #8020CF !important;
    cursor: pointer; }
    .datasetFilterBox p:hover {
      opacity: 0.9; }
  .datasetFilterBox .filterHeaders {
    padding: 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #D8D8D8;
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    color: #303030;
    background: url(../down-arrow-light-gray.svg) 96% center; }
  .datasetFilterBox .filterContentType {
    padding: 10px 16px;
    display: flex;
    flex-wrap: wrap;
    max-height: 150px;
    overflow-y: auto;
    margin: 0 16px 0 0;
    /*.radio-items{
      width: 50%;
      // margin-right: 1%;
      display: flex;
      margin-bottom: 20px;
      input{
        -webkit-appearance: none;
        -moz-appearance: none;
        -o-appearance: none;
        appearance: none;
        width: 20px;
        height: 20px;
        border: 2px solid #8C9196;
        // box-shadow: 0 0 0 1px #D8D8D8; !* Outer border *!
        border-radius: 15px;
      }
      input:checked {
        // background: #8020CF url(../img/ch-check-white.svg) center center no-repeat;
        // background-size: 12px;
        border-radius: 15px;
        border: 3px solid white;
        box-shadow:  0 0 1px #8020CF
      }
      .input:after {
        top: 9px;
       left: 9px;
       width: 8px;
       height: 8px;
       border-radius: 50%;
       background: white;
     }
     input:focus {
      outline: none;
     }
      !*input:focus {
        // background: url(../img/ch-check-white.svg) center center no-repeat;
        background-color: #0367A6;
        // background-size: 12px;
        border-radius: 15px;
        border: 3px solid white;
        box-shadow:  0 0 5px red
      }*!
      label{
        margin-bottom: 0 !important;
        margin-left: 10px !important;
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        color: #202223;
      }
    }*/ }
    .datasetFilterBox .filterContentType::-webkit-scrollbar-track {
      border-radius: 5px;
      background-color: #FFF; }
    .datasetFilterBox .filterContentType::-webkit-scrollbar {
      width: 5px; }
    .datasetFilterBox .filterContentType::-webkit-scrollbar-thumb {
      background-clip: padding-box;
      border-radius: 5px;
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
      box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
      background-color: #D8D8D8; }
    .datasetFilterBox .filterContentType .radio-items {
      width: 50%;
      display: flex;
      margin-bottom: 20px; }
      .datasetFilterBox .filterContentType .radio-items input[type='radio'] {
        display: inline-block;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        width: 18px;
        height: 18px;
        border-radius: 20px;
        border: 2px solid #8C9196;
        position: relative;
        margin-right: 8px;
        cursor: pointer; }
        .datasetFilterBox .filterContentType .radio-items input[type='radio']:before {
          width: 10px;
          height: 10px;
          position: absolute;
          top: 2px;
          left: 2px;
          background-color: #fff;
          border-radius: 20px;
          content: ''; }
      .datasetFilterBox .filterContentType .radio-items input[type="radio"]:focus {
        outline: none;
        border: 2px solid #E0E0E0;
        background: transparent; }
      .datasetFilterBox .filterContentType .radio-items input[type='radio']:checked + .btn {
        background: transparent;
        color: #202223; }
      .datasetFilterBox .filterContentType .radio-items input[type='radio']:checked:before {
        background: #8020CF; }
      .datasetFilterBox .filterContentType .radio-items input[type='radio']:checked {
        border-color: #8020CF; }
      .datasetFilterBox .filterContentType .radio-items label {
        margin-bottom: 0 !important;
        margin-left: 0 !important;
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        color: #535353;
        cursor: pointer; }
    .datasetFilterBox .filterContentType .checkbox-items {
      width: 50%;
      display: flex;
      margin-bottom: 20px; }
      .datasetFilterBox .filterContentType .checkbox-items input {
        -webkit-appearance: none;
        -moz-appearance: none;
        -o-appearance: none;
        appearance: none;
        width: 18px;
        height: 18px;
        border-radius: 4px;
        border: 2px solid #878787;
        cursor: pointer; }
      .datasetFilterBox .filterContentType .checkbox-items input:checked {
        background: url(../img/ch-check-white.svg) center center no-repeat;
        background-color: #8020CF;
        border-color: #8020CF;
        background-size: 12px;
        border-radius: 4px; }
      .datasetFilterBox .filterContentType .checkbox-items input:focus {
        outline: none; }
      .datasetFilterBox .filterContentType .checkbox-items label {
        margin-bottom: 0 !important;
        margin-left: 10px !important;
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        color: #535353;
        cursor: pointer; }
  .datasetFilterBox .btnWrapper {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    box-shadow: 3px 0px 5px 1px rgba(193, 193, 193, 0.25);
    padding: 15px 50px 15px 0; }
  .datasetFilterBox .btn-area {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    border-top: 1px solid #E0E0E0;
    padding: 20px 0; }
  .datasetFilterBox .filterApplyBtn {
    background-color: #8020CF;
    color: #FFF;
    border-radius: 10px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 15px;
    border: none !important;
    float: right;
    margin-right: 10px;
    margin-bottom: 10px; }
    .datasetFilterBox .filterApplyBtn:hover {
      opacity: 0.9; }
    .datasetFilterBox .filterApplyBtn.disable {
      background-color: #f7f7f7;
      color: #b7b7b7; }
  .datasetFilterBox .filterClearBtn {
    background-color: #FFFFFF;
    color: #360D57;
    border-radius: 10px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 15px;
    border: 1px solid #360D57;
    margin-bottom: 10px; }
    .datasetFilterBox .filterClearBtn:hover {
      opacity: 0.9; }
    .datasetFilterBox .filterClearBtn.disable {
      background-color: #f7f7f7;
      color: #b7b7b7;
      border-color: #f7f7f7; }

.datasetDetailFilterBox {
  display: none;
  position: absolute;
  top: 40px;
  right: 0;
  height: auto;
  width: 540px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0px 2px 5px rgba(40, 40, 40, 0.1); }
  .datasetDetailFilterBox h5 {
    padding: 16px;
    font-weight: 500;
    font-size: 20px;
    line-height: 24px;
    color: #303030; }
  .datasetDetailFilterBox p {
    padding: 16px;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    opacity: 0.5;
    /* &:active{
      opacity: 0.9;
      color: #8020CF;
    }*/ }
  .datasetDetailFilterBox p.active {
    color: #8020CF;
    opacity: 1;
    cursor: pointer; }
  .datasetDetailFilterBox .filterHeaders {
    padding: 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #D8D8D8;
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    color: #303030;
    background: url(../img/down-arrow-light-gray.svg) 96% center no-repeat;
    background-size: 15px; }
    .datasetDetailFilterBox .filterHeaders.up {
      background: url(../img/up-arrow-light-gray.svg) 96% center no-repeat;
      background-size: 15px; }
  .datasetDetailFilterBox .filterContentType {
    padding: 10px 16px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    height: 110px;
    max-height: 110px;
    overflow-y: auto;
    margin: 0 16px 0 0; }
    .datasetDetailFilterBox .filterContentType .filterAssignedToMail {
      min-width: 49% !important;
      width: fit-content !important; }
      .datasetDetailFilterBox .filterContentType .filterAssignedToMail label {
        min-width: 80% !important;
        width: fit-content !important; }
    .datasetDetailFilterBox .filterContentType::-webkit-scrollbar-track {
      border-radius: 5px;
      background-color: #FFF; }
    .datasetDetailFilterBox .filterContentType::-webkit-scrollbar {
      width: 5px; }
    .datasetDetailFilterBox .filterContentType::-webkit-scrollbar-thumb {
      background-clip: padding-box;
      border-radius: 5px;
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
      box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
      background-color: #D8D8D8; }
    .datasetDetailFilterBox .filterContentType .checkbox-items {
      width: 25%;
      margin-right: 1%;
      display: flex;
      margin-bottom: 20px; }
      .datasetDetailFilterBox .filterContentType .checkbox-items input {
        -webkit-appearance: none;
        -moz-appearance: none;
        -o-appearance: none;
        appearance: none;
        width: 18px;
        height: 18px;
        border-radius: 4px;
        border: 2px solid #878787; }
      .datasetDetailFilterBox .filterContentType .checkbox-items input:checked {
        background: url(../img/ch-check-white.svg) center center no-repeat;
        background-color: #8020CF;
        border-color: #8020CF;
        background-size: 12px;
        border-radius: 4px; }
      .datasetDetailFilterBox .filterContentType .checkbox-items input:focus {
        outline: none; }
      .datasetDetailFilterBox .filterContentType .checkbox-items label {
        margin-bottom: 0 !important;
        margin-left: 10px !important;
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        color: #535353;
        width: 80%;
        word-wrap: break-word;
        word-break: break-all; }
  .datasetDetailFilterBox .btnWrapper {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    box-shadow: 3px 0px 5px 1px rgba(193, 193, 193, 0.25);
    padding: 15px 50px 15px 0; }
    .datasetDetailFilterBox .btnWrapper p {
      padding: 0;
      margin: 0 10px 0 0;
      font-weight: 500; }
  .datasetDetailFilterBox .filterApplyBtn {
    background-color: #8020CF;
    color: #FFF;
    border-radius: 10px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none !important;
    padding: 0 15px;
    border-radius: 10px; }
    .datasetDetailFilterBox .filterApplyBtn:hover {
      opacity: 0.9; }
    .datasetDetailFilterBox .filterApplyBtn:disabled {
      border-color: #F6F6F7;
      background: #F6F6F7;
      color: #8C9196;
      cursor: default; }

.publishWrapper .createPerceptionPopup {
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center; }

.publishWrapper .createPerceptionInside {
  width: 100%;
  background-color: #fff;
  position: relative;
  z-index: 10; }
  .publishWrapper .createPerceptionInside #create_perception_form,
  .publishWrapper .createPerceptionInside #create_upload_form {
    margin: 0; }
  .publishWrapper .createPerceptionInside .settings_orangeSquare {
    left: 0;
    top: -28px; }
    @media (min-width: 639px) {
      .publishWrapper .createPerceptionInside .settings_orangeSquare {
        left: -25;
        top: -15px; } }

.publishWrapper .modal-header {
  width: 100%;
  text-align: center;
  border: 0;
  align-items: center;
  padding-left: 25px;
  padding-right: 25px; }
  .publishWrapper .modal-header .backBtn {
    margin-right: 0; }

.publishWrapper .modal-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  color: #210835;
  width: 100%; }

.publishWrapper .modal-dialog {
  margin: 0 auto;
  align-items: center; }

.publishWrapper .modal-content {
  margin-top: 0;
  background-color: #fff !important;
  border-radius: 8px;
  height: auto;
  padding-bottom: 20px;
  flex-wrap: wrap; }

.publishWrapper .perceptionCreateWrapper {
  margin: 15px 25px 0;
  position: relative; }
  .publishWrapper .perceptionCreateWrapper label {
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    color: #210835;
    background-color: #fff;
    margin: 0 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start; }
  .publishWrapper .perceptionCreateWrapper input[type='number'],
  .publishWrapper .perceptionCreateWrapper input[type='text'],
  .publishWrapper .perceptionCreateWrapper select#id_dataset {
    background: #f7f7f7;
    border: 1px solid #eaeaea;
    border-radius: 5px;
    height: 44px;
    padding-left: 20px;
    padding-right: 20px;
    width: 100% !important;
    box-shadow: none;
    font-size: 14px;
    font-weight: 500;
    color: #222222; }
  .publishWrapper .perceptionCreateWrapper select#id_dataset {
    appearance: none;
    -webkit-appearance: none;
    background: #f7f7f7 url(../img/trangle-down-arrow-lightblue.svg) 96% center no-repeat;
    color: #58595b; }
    .publishWrapper .perceptionCreateWrapper select#id_dataset.show {
      background: #f7f7f7 url(../img/trangle-up-arrow-lightblue.svg) 96% center no-repeat; }
    .publishWrapper .perceptionCreateWrapper select#id_dataset option {
      padding: 0 30px; }
  .publishWrapper .perceptionCreateWrapper input[type='text'].searchDataset,
  .publishWrapper .perceptionCreateWrapper input[type='text'].searchDatasetVersion {
    position: absolute;
    top: 0;
    border: none;
    /*background: transparent url(../img/Search.svg) 12px center no-repeat !important;*/
    cursor: pointer;
    max-width: 99.4%;
    color: #595959;
    font-size: 14px;
    font-weight: 400;
    margin: 1px;
    height: 42px;
    padding-left: 40px;
    padding-right: 30px; }
    .publishWrapper .perceptionCreateWrapper input[type='text'].searchDataset:focus,
    .publishWrapper .perceptionCreateWrapper input[type='text'].searchDatasetVersion:focus {
      outline-width: 1px;
      box-shadow: none;
      cursor: auto; }

.closeModal {
  background: transparent;
  position: absolute;
  right: 25px;
  top: 20px;
  cursor: pointer;
  border: 0;
  padding: 0;
  z-index: 99;
  width: 15px;
  height: 15px;
  opacity: 0.7; }

.backBtn {
  display: inline-flex;
  margin-right: 10px;
  opacity: 0.7;
  height: 14px;
  background: transparent;
  border: 0;
  padding: 0; }
  .backBtn img {
    margin: 0; }
  @media (max-width: 768px) {
    .backBtn {
      display: inline-block; }
      .backBtn img {
        width: 12px; } }

.trainingFacialListWrapper .trainingContentArea .trainingArea .preceptionAreaTopThumbil,
.trainingFacialDetail .trainingContentArea .trainingArea .preceptionAreaTopThumbil,
.trainingObjectListWrapper .trainingContentArea .trainingArea .preceptionAreaTopThumbil {
  width: 14%;
  text-align: center; }
  .trainingFacialListWrapper .trainingContentArea .trainingArea .preceptionAreaTopThumbil a,
  .trainingFacialDetail .trainingContentArea .trainingArea .preceptionAreaTopThumbil a,
  .trainingObjectListWrapper .trainingContentArea .trainingArea .preceptionAreaTopThumbil a {
    padding: 0 10px;
    display: block; }
  .trainingFacialListWrapper .trainingContentArea .trainingArea .preceptionAreaTopThumbil img,
  .trainingFacialDetail .trainingContentArea .trainingArea .preceptionAreaTopThumbil img,
  .trainingObjectListWrapper .trainingContentArea .trainingArea .preceptionAreaTopThumbil img {
    max-height: 70px; }

.trainingFacialListWrapper .trainingContentArea .trainingArea .preceptionAreaTopStatus,
.trainingFacialDetail .trainingContentArea .trainingArea .preceptionAreaTopStatus,
.trainingObjectListWrapper .trainingContentArea .trainingArea .preceptionAreaTopStatus {
  width: 27%;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: flex-start; }

.trainingFacialListWrapper .trainingContentArea .trainingArea .preceptionAreaTopName,
.trainingFacialDetail .trainingContentArea .trainingArea .preceptionAreaTopName,
.trainingObjectListWrapper .trainingContentArea .trainingArea .preceptionAreaTopName {
  width: 18%; }

.trainingFacialListWrapper .trainingContentArea .trainingArea .lessPhotoCount,
.trainingFacialListWrapper .trainingContentArea .trainingArea .image_count,
.trainingFacialDetail .trainingContentArea .trainingArea .lessPhotoCount,
.trainingFacialDetail .trainingContentArea .trainingArea .image_count,
.trainingObjectListWrapper .trainingContentArea .trainingArea .lessPhotoCount,
.trainingObjectListWrapper .trainingContentArea .trainingArea .image_count {
  color: #FF8B00;
  font-family: "Euclid Circular B";
  font-weight: 600px;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: flex-start; }

.trainingFacialListWrapper .trainingContentArea .trainingArea .preceptionAreaTopActions,
.trainingFacialDetail .trainingContentArea .trainingArea .preceptionAreaTopActions,
.trainingObjectListWrapper .trainingContentArea .trainingArea .preceptionAreaTopActions {
  justify-content: center; }

.trainingFacialListWrapper .delete_person {
  margin-right: 10px; }

.trainingFacialListWrapper .renamePerception {
  margin-right: 10px; }

.trainingFacialListWrapper .trainingContentArea .trainingArea .preceptionAreaTopActions {
  width: 15%; }

.trainingFacialListWrapper .trainingContentArea .trainingArea .preceptionAreaTopStatus.ready {
  color: #46da7a; }

.trainingFacialListWrapper .createPerceptionModal .modal-title, .trainingFacialListWrapper .createPerceptionParametersModal .modal-title {
  text-transform: capitalize; }

.myimageClassification .renamePerception {
  margin-right: 10px; }

.myimageClassification .shareEmail {
  margin-right: 10px; }

.listPerceptionDetail .delete_class {
  margin-right: 10px; }

.listPerceptionDetail .renamePerception {
  margin-right: 10px; }

.generalFileError {
  position: fixed;
  top: 0;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 0 15px;
  font-size: 17px;
  font-weight: 300;
  opacity: 0;
  visibility: hidden;
  z-index: 999; }
  .generalFileError p {
    color: #535353;
    margin: 0;
    text-align: left;
    font-weight: 500;
    font-size: 16px;
    line-height: 36px;
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-top: 40px;
    height: 100%; }
  .generalFileError .generalFileError small {
    color: #58595b;
    font-size: 15px;
    font-family: 'DIN Pro'; }
  .generalFileError a {
    color: #fff;
    font-weight: 500;
    font-size: 14px;
    margin-left: auto;
    margin-top: auto; }
    .generalFileError a:focus, .generalFileError a:active, .generalFileError a:hover {
      color: #fff !important; }
  .generalFileError .generalFileError_inner {
    background: #ffffff;
    border-radius: 10px;
    padding: 20px;
    width: 600px;
    min-height: 190px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    position: relative; }
    .generalFileError .generalFileError_inner .btnOk {
      margin-left: auto; }
    .generalFileError .generalFileError_inner img {
      width: 18px;
      filter: invert(45%) sepia(95%) saturate(4753%) hue-rotate(196deg) brightness(104%) contrast(104%);
      position: relative;
      top: -29px; }
    .generalFileError .generalFileError_inner .img {
      width: 18px;
      filter: invert(45%) sepia(95%) saturate(4753%) hue-rotate(196deg) brightness(104%) contrast(104%);
      background: url(../img/ch-info-dark-purple.svg) center center no-repeat;
      position: relative;
      top: -29px; }
    .generalFileError .generalFileError_inner span {
      font-size: 12px; }
    .generalFileError .generalFileError_inner .closeApiLimitModal,
    .generalFileError .generalFileError_inner .closeSignupModal {
      position: absolute;
      right: 0;
      top: 0;
      width: 15px;
      height: 15px;
      opacity: 0.7;
      background: transparent;
      padding: 0;
      cursor: pointer; }
      .generalFileError .generalFileError_inner .closeApiLimitModal img,
      .generalFileError .generalFileError_inner .closeSignupModal img {
        filter: none;
        background: none;
        top: 0;
        cursor: pointer; }
    .generalFileError .generalFileError_inner .closeSignupModal {
      top: -20px;
      filter: none;
      cursor: pointer; }
    .generalFileError .generalFileError_inner .logo {
      width: 147px;
      margin: -20px auto 20px;
      filter: none; }
    .generalFileError .generalFileError_inner .sunBtn {
      margin-right: auto;
      margin-top: 40px;
      margin-bottom: 20px;
      min-width: 130px;
      height: 44px;
      border-radius: 20px;
      background: linear-gradient(267.94deg, #48FDE1 -23.98%, #60EFFF 96.66%);
      color: #303030;
      font-size: 14px;
      font-weight: 500;
      display: inline-flex;
      justify-content: center;
      align-items: center; }
      .generalFileError .generalFileError_inner .sunBtn:hover, .generalFileError .generalFileError_inner .sunBtn:focus {
        color: #303030 !important; }

.generalStreamError .generalFileError .generalFileError_inner {
  width: 525px;
  min-height: 136px;
  position: relative; }

.generalStreamError .generalFileError .closeApiLimitModal {
  right: 20px;
  top: 30px;
  z-index: 2; }

.generalStreamError .generalFileError p {
  padding-top: 0;
  color: #303030;
  font-size: 20px;
  font-weight: 500; }

.generalStreamError .generalFileError .btnOk {
  font-size: 14px;
  font-weight: 500;
  width: 60px;
  transition: none !important; }

.generalFileError-active {
  opacity: 1;
  visibility: visible;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in; }

.trainingFacialDetail .trainingContentArea .preceptionAreaContent {
  min-height: auto; }

.trainingFacialDetail .trainingContentArea .preceptionAreaTopName,
.trainingFacialDetail .trainingContentArea .preceptionAreaTopId {
  width: 18.25%; }

.trainingFacialDetail #image_list {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap; }

.facialGalleryWrapper {
  padding-top: 20px; }
  .facialGalleryWrapper ul {
    padding-left: 0;
    margin: 0; }
    .facialGalleryWrapper ul li {
      list-style-type: none;
      position: relative;
      height: 150px;
      width: 150px;
      /* Fallback */
      margin-right: 10px;
      margin-bottom: 10px;
      background: #ffffff;
      border-radius: 5px;
      border: none;
      padding-top: 0 !important; }
      @media (max-width: 1500px) {
        .facialGalleryWrapper ul li {
          width: 25%;
          /* Fallback */
          width: 150px;
          height: 150px; } }
      @media (max-width: 480px) {
        .facialGalleryWrapper ul li {
          width: 50%;
          /* Fallback */
          width: -webkit-calc(100% / 2);
          width: calc(100% / 2); } }
      .facialGalleryWrapper ul li a.getImg,
      .facialGalleryWrapper ul li a.fancybox {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        overflow: hidden;
        border-radius: 5px; }
      .facialGalleryWrapper ul li .deleteClassImg {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        bottom: 10px;
        right: 10px;
        display: none; }
      .facialGalleryWrapper ul li .itemSelectBox {
        visibility: visible;
        opacity: 1;
        position: absolute;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%; }
        .facialGalleryWrapper ul li .itemSelectBox .overlay {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          background: rgba(0, 0, 0, 0.5);
          display: none;
          border-radius: 5px; }
        .facialGalleryWrapper ul li .itemSelectBox.itemSelectBox-selected .overlay {
          display: block; }
      .facialGalleryWrapper ul li .brand-checkbox {
        font-family: 'DIN Pro';
        color: #fff;
        margin-top: 0px;
        font-size: 14px;
        position: absolute;
        top: 10px;
        right: 10px;
        border-radius: 4px;
        z-index: 2; }
      .facialGalleryWrapper ul li .brand-checkbox-input {
        display: none; }
      .facialGalleryWrapper ul li .brand-checkbox-icon {
        display: inline-block;
        position: relative;
        width: 21px;
        height: 21px;
        margin-top: 0;
        cursor: pointer;
        background: #ffffff;
        border: solid 0px #8C9196;
        border-width: 2px;
        border-radius: 4px; }
        .facialGalleryWrapper ul li .brand-checkbox-icon:after {
          display: none; }
      .facialGalleryWrapper ul li .brand-checkbox-input:checked ~ .brand-checkbox-icon {
        opacity: 1;
        background: #8020CF url(../img/ch-check-white.svg) center center no-repeat;
        background-size: 12px;
        border-color: #8020CF; }
      .facialGalleryWrapper ul li .classImg {
        max-height: 200px; }
        @media (max-width: 1500px) {
          .facialGalleryWrapper ul li .classImg {
            max-height: 145px; } }
      .facialGalleryWrapper ul li #video {
        background-color: #000; }
      .facialGalleryWrapper ul li .itemSelectBox-active {
        opacity: 1;
        visibility: visible; }
      .facialGalleryWrapper ul li .itemSelectBox-selected {
        height: 100%;
        opacity: 1;
        visibility: visible;
        width: 100% !important; }
  .facialGalleryWrapper .video-js .vjs-tech {
    position: static; }
  .facialGalleryWrapper .video-js {
    max-height: 160px !important;
    max-width: 260px; }
  .facialGalleryWrapper .brand-checkbox.alertDesable .alertTooltip {
    top: 25px;
    right: 0;
    width: 130px;
    font-size: 12px;
    line-height: 16px; }

.lightbox {
  top: 10%; }

.radio {
  clear: both; }
  .radio label {
    position: static;
    font-size: 14px;
    color: #4a4a4a;
    line-height: 26px;
    white-space: nowrap; }
    .radio label span {
      float: left;
      margin-right: 10px;
      width: 20px;
      height: 20px;
      border: 1px solid #0367A6;
      background-color: #ffffff;
      position: relative;
      cursor: pointer;
      border-radius: 100%; }
      .radio label span:before {
        width: 20px;
        height: 20px;
        position: absolute;
        top: -1px;
        left: -1px;
        background-color: #f7941d;
        content: '';
        opacity: 0;
        border-radius: 100%; }
    .radio label input[type='radio']:checked + span {
      border-color: #8020CF; }
    .radio label input[type='radio']:checked + span:before {
      opacity: 1; }

.createDatabaseModal label {
  color: #210835 !important; }

.createDatabaseModal .radio .radio-inline:first-child {
  width: 180px; }

.createDatabaseModal .radio label {
  position: static;
  padding: 0;
  border-bottom: solid 1px #fff;
  color: #202223;
  font-weight: 400 !important;
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 0; }
  .createDatabaseModal .radio label.rectangle {
    margin-right: 50px; }

.createDatabaseModal .customDropdown .itemBtn {
  border: 1px solid #9b9b9b;
  border-radius: 26px;
  height: 52px;
  padding-left: 30px;
  padding-right: 30px;
  width: 100% !important;
  box-shadow: none; }

.createDatabaseModal .customDropdown .dropdownItemList {
  top: 55px; }
  .createDatabaseModal .customDropdown .dropdownItemList li.selected a {
    background: rgba(19, 139, 250, 0.19);
    color: #8020CF !important; }

.createDatabaseModal .dataset_upload_warn {
  display: block;
  color: #535353;
  font-size: 14px;
  line-height: 18px;
  font-family: "Euclid Circular B";
  font-weight: 400; }
  .createDatabaseModal .dataset_upload_warn strong {
    font-weight: 400;
    color: #8020CF; }

.createDatabaseModal .zipParent {
  position: relative;
  width: 100%;
  margin: 0 0 30px;
  background: #888888;
  height: 150px;
  background: #ffffff;
  border: 1px dashed #bab7bb;
  border-radius: 20px;
  text-align: center;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap; }
  .createDatabaseModal .zipParent .clearfix {
    flex-wrap: nowrap;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding-top: 20px; }
  .createDatabaseModal .zipParent label {
    position: static;
    float: left;
    font-weight: 500;
    color: #fff;
    margin: 5px 0 !important;
    font-size: 16px;
    cursor: pointer;
    width: 169px;
    background: transparent; }
  .createDatabaseModal .zipParent .uploadIcon img {
    width: 78px;
    height: 55px; }
    @media (max-width: 480px) {
      .createDatabaseModal .zipParent .uploadIcon img {
        width: 50px;
        height: 45px; } }
  .createDatabaseModal .zipParent .uploadIcon,
  .createDatabaseModal .zipParent .dragFile {
    width: 100%;
    margin-top: 5px;
    font-size: 18px;
    color: #9b9b9b; }
    .createDatabaseModal .zipParent .uploadIcon a,
    .createDatabaseModal .zipParent .dragFile a {
      color: #0084ff; }
  .createDatabaseModal .zipParent .perceptionUploadBrowseText {
    color: #0084ff;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    margin-top: 7px; }
  .createDatabaseModal .zipParent .ODuploadTrigger {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    color: #0084ff;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    text-decoration: underline; }
  .createDatabaseModal .zipParent .ODuploadTrigger:active,
  .createDatabaseModal .zipParent .ODuploadTrigger:focus,
  .createDatabaseModal .zipParent .ODuploadTrigger:hover {
    color: #0084ff !important; }

.createDatabaseModal .nav-tabs {
  border: 0; }
  .createDatabaseModal .nav-tabs li:first-child a {
    border-radius: 5px 0px 0px 5px; }
  .createDatabaseModal .nav-tabs li:last-child a {
    border-radius: 0px 5px 5px 0px; }
  .createDatabaseModal .nav-tabs a {
    width: 102px;
    height: 36px;
    color: #595959;
    font-size: 14px;
    font-weight: 400;
    border: 1px solid #D8D8D8;
    background: #ffffff;
    transition: all 0.2s ease-in;
    display: inline-flex;
    justify-content: center;
    align-items: center; }
    .createDatabaseModal .nav-tabs a:hover, .createDatabaseModal .nav-tabs a:focus, .createDatabaseModal .nav-tabs a:active {
      color: #8020CF;
      border-color: #8020CF;
      background-color: #ffffff; }
  .createDatabaseModal .nav-tabs .active a {
    color: #8020CF;
    border-color: #8020CF;
    background-color: #ffffff; }

.createDatabaseModal .perceptionCreateWrapper {
  margin: 10px 25px 0; }
  @media (max-width: 768px) {
    .createDatabaseModal .perceptionCreateWrapper .label {
      font-size: 14px; } }
  .createDatabaseModal .perceptionCreateWrapper p {
    color: #595959;
    font-weight: 500;
    font-size: 16px;
    position: relative;
    display: block;
    width: 100%; }
  .createDatabaseModal .perceptionCreateWrapper .setPerceptionName {
    margin-bottom: 30px; }
  .createDatabaseModal .perceptionCreateWrapper .datasetNameField {
    margin-bottom: 0px; }
  .createDatabaseModal .perceptionCreateWrapper .createDatasetNameError {
    font-size: 14px;
    color: #D72C0D;
    opacity: 0;
    margin-top: 5px; }

.createDatabaseModal #uploadModal {
  border-radius: 10px;
  height: 190px !important;
  margin-bottom: 30px !important; }
  .createDatabaseModal #uploadModal .note {
    padding-left: 13px; }
    .createDatabaseModal #uploadModal .note p {
      font-size: 16px;
      font-family: "Euclid Circular B";
      font-weight: 600;
      margin: 0 0 10px;
      color: #535353; }
      .createDatabaseModal #uploadModal .note p strong {
        color: #8020CF;
        border-bottom: solid 1px #8020CF;
        font-family: "Euclid Circular B";
        font-weight: 600; }

.createDatabaseModal .dataset-upload-placeholder {
  flex-direction: row; }
  .createDatabaseModal .dataset-upload-placeholder p {
    color: #787878; }

.createDatabaseModal .addItem {
  display: inline-block;
  color: #8020CF;
  font-size: 14px;
  font-weight: 600; }
  .createDatabaseModal .addItem img {
    width: 21px;
    height: 21px;
    background-color: #ff8f00;
    border-radius: 100%;
    margin-right: 5px;
    padding: 4px;
    float: left;
    transform: rotate(45deg); }
  .createDatabaseModal .addItem:hover, .createDatabaseModal .addItem:focus, .createDatabaseModal .addItem:active {
    color: #8020CF !important; }

.createDatabaseModal .uploadedItem {
  box-shadow: 0 0 2px rgba(198, 198, 198, 0.5);
  border-radius: 13px;
  background-color: #fbfbfb; }
  .createDatabaseModal .uploadedItem ul {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 560px;
    min-height: 175px;
    overflow-x: hidden;
    white-space: nowrap;
    flex-direction: row;
    padding: 18px 20px; }
  .createDatabaseModal .uploadedItem li {
    width: 121px;
    height: 119px;
    border-radius: 13px;
    margin: 10px 7px;
    position: relative;
    background-color: #fbfbfb;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
    /*display: inline-flex;
      justify-content: center;
      align-items: center;*/
    display: inline-block;
    float: left; }
    .createDatabaseModal .uploadedItem li:last-child {
      margin-right: 20px; }
    .createDatabaseModal .uploadedItem li:before {
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      content: '';
      border-radius: 13px; }
    .createDatabaseModal .uploadedItem li img {
      max-height: 119px; }
    .createDatabaseModal .uploadedItem li .icon {
      height: 29px;
      width: 30px;
      border-radius: 5px;
      position: absolute;
      left: 0;
      right: 0;
      margin: 0 auto;
      bottom: 35px;
      z-index: 2; }
    .createDatabaseModal .uploadedItem li .iconPicture {
      background: #726B92 url(../img/icon-picture.svg) center center no-repeat; }
    .createDatabaseModal .uploadedItem li .iconVideoPlayer {
      background: #ffffff url(../img/icon-play-green.svg) center center no-repeat;
      background-size: 18px; }
    .createDatabaseModal .uploadedItem li .iconFolder {
      background: #726B92 url(../img/icon-folder.svg) center center no-repeat; }
    .createDatabaseModal .uploadedItem li .itemName {
      margin: 0 auto;
      font-size: 14px;
      font-weight: 400;
      display: block;
      text-align: center;
      line-height: initial;
      width: 100%;
      max-width: 100px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      z-index: 2;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 5px;
      color: #ffffff; }
    .createDatabaseModal .uploadedItem li .remove {
      width: 21px;
      height: 21px;
      position: absolute;
      top: -10px;
      right: -10px;
      border-radius: 100%;
      z-index: 2;
      line-height: initial;
      cursor: pointer;
      background: #595959 url(../img/icon-close-bold.svg) center center no-repeat;
      background-size: 11px; }
    .createDatabaseModal .uploadedItem li .imgContainer {
      /*display: -webkit-inline-box;*/
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      overflow: hidden;
      border-radius: 13px; }
  .createDatabaseModal .uploadedItem .mCustomScrollBox {
    width: 100%;
    height: auto !important; }

.createDatabaseModal .testViaUploadBtn {
  width: 100%;
  max-width: 160px;
  margin: 0 auto !important;
  height: 42px;
  padding: 0 !important; }

.trainingDataModal {
  padding-right: 0 !important; }
  .trainingDataModal .buttonBar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 !important; }
    .trainingDataModal .buttonBar button {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      min-width: 118px;
      height: 36px;
      border-radius: 5px;
      border: none; }
    .trainingDataModal .buttonBar button + button {
      margin-left: 10px; }
    .trainingDataModal .buttonBar .cancel {
      background: transparent;
      color: #595959;
      font-weight: 500;
      min-width: auto; }
      .trainingDataModal .buttonBar .cancel:focus {
        color: #595959; }
  .trainingDataModal .cancel_myfiles,
  .trainingDataModal .cancel {
    color: #0367A6; }
  .trainingDataModal .selectAll,
  .trainingDataModal .selectAllCopy,
  .trainingDataModal .selectAllDataset,
  .trainingDataModal .selectDatasets {
    color: #8020CF;
    font-size: 14px;
    font-family: "Euclid Circular B";
    font-weight: 600;
    text-transform: uppercase;
    background: transparent; }
  .trainingDataModal .add,
  .trainingDataModal .addMyFiles,
  .trainingDataModal .addRawData,
  .trainingDataModal .addCadDataset,
  .trainingDataModal .addDataset,
  .trainingDataModal .add_dataset,
  .trainingDataModal .addCadRawData {
    background: #F7F7F7;
    border-radius: 10px !important;
    padding: 5px 12px !important;
    color: #B7B7B7 !important;
    font-family: "Euclid Circular B" !important;
    font-weight: 500;
    font-size: 14px;
    pointer-events: none !important; }
    .trainingDataModal .add.active,
    .trainingDataModal .addMyFiles.active,
    .trainingDataModal .addRawData.active,
    .trainingDataModal .addCadDataset.active,
    .trainingDataModal .addDataset.active,
    .trainingDataModal .add_dataset.active,
    .trainingDataModal .addCadRawData.active {
      background-color: #8020CF !important;
      color: #FFFFFF !important;
      pointer-events: all !important;
      cursor: pointer; }
  .trainingDataModal .add,
  .trainingDataModal .addSelected,
  .trainingDataModal .add_dataset,
  .trainingDataModal .moveImageDatasets,
  .trainingDataModal .copyImageDatasets,
  .trainingDataModal .moveDatasets {
    background: #F7F7F7;
    border-radius: 5px;
    color: #B7B7B7;
    height: 36px;
    border: 0;
    padding: 0 20px;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    pointer-events: none; }
    .trainingDataModal .add.active,
    .trainingDataModal .addSelected.active,
    .trainingDataModal .add_dataset.active,
    .trainingDataModal .moveImageDatasets.active,
    .trainingDataModal .copyImageDatasets.active,
    .trainingDataModal .moveDatasets.active {
      background: #8020CF;
      color: #ffffff;
      pointer-events: auto;
      cursor: pointer; }
  .trainingDataModal .moveImageDatasets,
  .trainingDataModal .copyImageDatasets {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    height: 36px;
    border-radius: 5px;
    border: none;
    width: auto; }
    .trainingDataModal .moveImageDatasets:hover, .trainingDataModal .moveImageDatasets:focus,
    .trainingDataModal .copyImageDatasets:hover,
    .trainingDataModal .copyImageDatasets:focus {
      background: #8020CF;
      color: #ffffff !important; }
  .trainingDataModal .selectAllRawData,
  .trainingDataModal .selectAllDataset {
    color: #8020CF;
    font-size: 14px;
    font-family: "Euclid Circular B";
    font-weight: 600;
    text-transform: uppercase;
    background: transparent; }
  .trainingDataModal .subtitle {
    color: #595959;
    font-weight: 400;
    font-size: 16px;
    margin: 10px 0 10px; }
  .trainingDataModal .group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px; }
    .trainingDataModal .group .subtitle {
      margin: 0; }
  .trainingDataModal .modal-lg {
    max-width: 1312px;
    margin: auto;
    align-items: center; }
  .trainingDataModal .modal-content {
    margin-top: 0px; }
  .trainingDataModal .modal-body {
    height: 656px;
    padding-top: 0;
    padding-bottom: 0; }
    @media (max-width: 1400px) {
      .trainingDataModal .modal-body {
        height: 490px; } }
    @media (max-width: 967px) {
      .trainingDataModal .modal-body {
        height: auto; } }
    .trainingDataModal .modal-body .modelBodyTopBar {
      padding: 0 25px 0 35px; }
  .trainingDataModal .modal-header .back {
    position: absolute;
    left: 20px;
    top: 18px;
    background-color: transparent;
    border: 0;
    z-index: 2;
    padding: 0;
    cursor: pointer; }
  .trainingDataModal .modal-title {
    color: #210835;
    font-weight: 600;
    font-size: 16px;
    text-align: center; }
  .trainingDataModal .folderContainer {
    height: 85%;
    max-height: 85%;
    overflow: hidden; }
    .trainingDataModal .folderContainer .subtitle {
      margin: 20px 15px 10px;
      width: 100%; }
    .trainingDataModal .folderContainer ul {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-wrap: wrap;
      align-content: flex-start;
      position: relative;
      padding-top: 5px;
      padding-left: 15px;
      margin-bottom: 0 !important; }
      .trainingDataModal .folderContainer ul:after {
        width: 100%;
        height: 30px;
        display: block;
        content: ''; }
    .trainingDataModal .folderContainer li {
      display: inline-flex;
      align-items: center;
      max-width: 390px;
      width: 100%;
      background-color: #F6F6F7;
      padding: 0;
      box-shadow: 0px 2px 5px rgba(40, 40, 40, 0.1);
      border-radius: 5px;
      margin: 0 0 21px 21px;
      position: relative;
      height: auto;
      border: solid 2px transparent; }
      @media (max-width: 480px) {
        .trainingDataModal .folderContainer li {
          margin: 10px 0 10px 10px;
          max-width: 90%; } }
      .trainingDataModal .folderContainer li .iconFolder {
        margin-right: 10px;
        width: 18px;
        height: 14px;
        background: url(../img/folder-icon.svg) 0 0 no-repeat;
        display: inline-flex; }
      .trainingDataModal .folderContainer li a {
        color: #595959;
        font-size: 16px;
        font-weight: 400;
        display: flex;
        align-items: center;
        width: 100%;
        padding: 10px 0 10px 15px;
        margin-right: 40px;
        height: 48px; }
        .trainingDataModal .folderContainer li a:focus, .trainingDataModal .folderContainer li a:active {
          color: #595959 !important; }
    .trainingDataModal .folderContainer #my_files_data_tab_id a,
    .trainingDataModal .folderContainer #training_data_tab_id a,
    .trainingDataModal .folderContainer #dataset_tab_id a {
      width: 100%;
      padding: 10px 15px;
      margin: 0; }
    .trainingDataModal .folderContainer li.active {
      border: 2px solid #8020CF; }
    .trainingDataModal .folderContainer li.selected {
      border: 2px solid #8020CF; }
    .trainingDataModal .folderContainer li.eachFiles {
      display: flex;
      justify-content: center;
      align-items: stretch;
      width: 140px;
      height: 140px;
      background-color: #C4C4C4;
      border-radius: 5px;
      margin-left: 15px;
      margin-bottom: 15px;
      position: relative;
      overflow: hidden;
      text-align: center;
      padding: 0; }
      @media (max-width: 480px) {
        .trainingDataModal .folderContainer li.eachFiles {
          width: 126px;
          height: 120px; } }
      .trainingDataModal .folderContainer li.eachFiles .dbClickDivMyfiles {
        display: flex; }
        .trainingDataModal .folderContainer li.eachFiles .dbClickDivMyfiles:before {
          position: absolute;
          top: 0;
          left: 0;
          content: '';
          background: rgba(0, 0, 0, 0);
          z-index: 2; }
      .trainingDataModal .folderContainer li.eachFiles img {
        max-height: 140px;
        filter: brightness(0.6);
        object-fit: cover; }
        @media (max-width: 480px) {
          .trainingDataModal .folderContainer li.eachFiles img {
            max-height: 120px; } }
      .trainingDataModal .folderContainer li.eachFiles .icon {
        height: 20px;
        width: 20px;
        border-radius: 3px;
        position: absolute;
        left: 7px;
        top: 7px;
        z-index: 2; }
      .trainingDataModal .folderContainer li.eachFiles .iconPicture {
        background: #ffffff url(../img/icon-image-light-purple.svg) center center no-repeat; }
      .trainingDataModal .folderContainer li.eachFiles .iconVideoPlayer {
        background: #ffffff url(../img/icon-play-green.svg) center center no-repeat; }
      .trainingDataModal .folderContainer li.eachFiles .iconFolder {
        background: #f7941d url(../img/icon-folder.svg) center center no-repeat; }
      .trainingDataModal .folderContainer li.eachFiles .itemName {
        margin: 0 auto;
        font-size: 14px;
        font-weight: 400;
        display: none;
        text-align: center;
        width: 100%;
        max-width: 150px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        z-index: 2;
        color: #fff;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 10px; }
      .trainingDataModal .folderContainer li.eachFiles .checkbox {
        top: 7px;
        right: 7px;
        z-index: 9;
        margin: 0; }
    .trainingDataModal .folderContainer li.active .dbClickDivMyfiles:before {
      background: rgba(0, 0, 0, 0.5);
      width: 100%;
      height: 100%; }
    .trainingDataModal .folderContainer li.clearfix {
      width: 100%;
      max-width: 100%;
      padding: 0;
      margin: 0;
      box-shadow: none;
      background-color: transparent;
      margin-bottom: 10px;
      margin-bottom: 15px; }
  .trainingDataModal .folderDataContainer li {
    padding-left: 40px;
    padding-right: 20px;
    height: 48px; }
    .trainingDataModal .folderDataContainer li .driveFolderName {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: block;
      width: 100%;
      color: #58595B;
      font-size: 16px;
      margin: 0 10px; }
      .trainingDataModal .folderDataContainer li .driveFolderName .iconFolder {
        float: left;
        margin-top: 6px; }
    .trainingDataModal .folderDataContainer li a {
      font-family: "Euclid Circular B";
      font-weight: 500;
      font-size: 16px;
      line-height: 20px;
      color: #8020CF;
      padding: 0 15px 0 0;
      margin: 0 0 0 auto;
      height: auto;
      width: auto;
      white-space: nowrap;
      background: url(../img/arrow-right-sm-purple.svg) right center no-repeat; }
      .trainingDataModal .folderDataContainer li a:hover, .trainingDataModal .folderDataContainer li a:focus {
        color: #8020CF !important; }
  .trainingDataModal .folderDataContainer .eachFolder .checkbox {
    left: 15px;
    right: auto; }
  .trainingDataModal .checkbox {
    position: absolute;
    right: 15px;
    top: 15px;
    z-index: 2;
    margin: 0;
    cursor: pointer; }
    .trainingDataModal .checkbox input[type='checkbox'] {
      display: none; }
    .trainingDataModal .checkbox span {
      display: inline-block;
      width: 16px;
      height: 16px;
      position: relative;
      border: 2px solid #878787;
      border-radius: 4px;
      background-color: #fff; }
    .trainingDataModal .checkbox input[type='checkbox']:checked + span {
      background: #8020CF url(../img/ch-check-white.svg) center center no-repeat;
      border-radius: 4px;
      border-color: #8020CF; }
  .trainingDataModal .mCustomScrollBox {
    width: 100%;
    height: auto !important; }
  .trainingDataModal .actionBar {
    background-color: #ececec;
    border-radius: 8px;
    padding: 8px 20px;
    justify-content: flex-start;
    align-items: center;
    width: calc(100% - 50px);
    margin: 0 auto;
    display: none;
    position: relative;
    z-index: 3; }
    @media (max-width: 480px) {
      .trainingDataModal .actionBar {
        width: calc(100% - 0px); } }
    .trainingDataModal .actionBar .selectedDataset {
      font-size: 16px;
      color: #595959;
      display: inline-flex;
      justify-content: flex-start;
      align-items: center;
      height: 30px; }
    .trainingDataModal .actionBar .cancel,
    .trainingDataModal .actionBar .add {
      margin-left: 30px;
      font-size: 16px;
      font-weight: 500;
      color: #8020CF;
      position: relative;
      display: inline-flex;
      justify-content: flex-start;
      align-items: center; }
      .trainingDataModal .actionBar .cancel:active, .trainingDataModal .actionBar .cancel:focus,
      .trainingDataModal .actionBar .add:active,
      .trainingDataModal .actionBar .add:focus {
        color: #8020CF !important; }
      @media (max-width: 480px) {
        .trainingDataModal .actionBar .cancel,
        .trainingDataModal .actionBar .add {
          margin-left: 10px; } }
    .trainingDataModal .actionBar .add_dataset,
    .trainingDataModal .actionBar .cancel_myfiles,
    .trainingDataModal .actionBar .addMyFiles {
      margin-left: 30px;
      font-size: 16px;
      font-weight: 500;
      color: #8020CF;
      display: inline-flex;
      justify-content: flex-start;
      align-items: center; }
      .trainingDataModal .actionBar .add_dataset:active, .trainingDataModal .actionBar .add_dataset:focus,
      .trainingDataModal .actionBar .cancel_myfiles:active,
      .trainingDataModal .actionBar .cancel_myfiles:focus,
      .trainingDataModal .actionBar .addMyFiles:active,
      .trainingDataModal .actionBar .addMyFiles:focus {
        color: #8020CF !important; }
      @media (max-width: 480px) {
        .trainingDataModal .actionBar .add_dataset,
        .trainingDataModal .actionBar .cancel_myfiles,
        .trainingDataModal .actionBar .addMyFiles {
          margin-left: 10px; } }
    .trainingDataModal .actionBar .iconPlus,
    .trainingDataModal .actionBar .iconMinus {
      width: 30px;
      height: 30px;
      border-radius: 100%;
      float: left;
      margin-right: 5px; }

.trainingDataInnerFolder {
  padding-right: 0 !important; }
  .trainingDataInnerFolder .buttonBar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 !important; }
    .trainingDataInnerFolder .buttonBar button {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      min-width: 118px;
      height: 36px;
      border-radius: 5px;
      border: none; }
    .trainingDataInnerFolder .buttonBar button + button {
      margin-left: 10px; }
  .trainingDataInnerFolder .selectAll {
    color: #8020CF;
    font-size: 14px;
    font-family: "Euclid Circular B";
    font-weight: 600;
    text-transform: uppercase;
    background: transparent; }
  .trainingDataInnerFolder .addSelected {
    background: #F7F7F7;
    border-radius: 5px;
    color: #B7B7B7;
    height: 36px;
    border: 0;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    pointer-events: none; }
    .trainingDataInnerFolder .addSelected.active {
      background: #8020CF;
      color: #ffffff;
      pointer-events: auto;
      cursor: pointer; }
  .trainingDataInnerFolder .subtitle {
    color: #595959;
    font-weight: 400;
    font-size: 16px;
    margin: 0 25px 10px; }
  .trainingDataInnerFolder .group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px; }
    .trainingDataInnerFolder .group .subtitle {
      margin: 0; }
  .trainingDataInnerFolder .alertSelectedImage {
    font-size: 16px;
    font-weight: 600;
    color: #8020CF;
    margin-bottom: 0;
    margin-right: auto;
    margin-left: 20px;
    display: none; }
  .trainingDataInnerFolder .modal-body {
    height: 656px;
    padding-top: 0;
    padding-bottom: 0; }
    @media (max-width: 967px) {
      .trainingDataInnerFolder .modal-body {
        width: 100%; } }
    @media (max-width: 1400px) {
      .trainingDataInnerFolder .modal-body {
        height: 490px; } }
    .trainingDataInnerFolder .modal-body .modelBodyTopBar {
      padding: 0 25px 0 30px; }
  .trainingDataInnerFolder .modal-lg {
    max-width: 1312px;
    margin: auto;
    align-items: center; }
  .trainingDataInnerFolder .modal-content {
    margin-top: 0px; }
  .trainingDataInnerFolder .modal-header .back {
    background-color: transparent;
    left: 15px;
    top: 15px;
    border: 0;
    z-index: 2;
    padding: 0;
    cursor: pointer; }
  .trainingDataInnerFolder .modal-title {
    text-align: center; }
  .trainingDataInnerFolder .closeModal {
    top: 15px;
    right: 15px; }
  .trainingDataInnerFolder .folderContainer {
    height: 80%;
    max-height: 80%;
    overflow: hidden; }
    .trainingDataInnerFolder .folderContainer ul {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-wrap: wrap;
      align-content: flex-start;
      position: relative;
      padding-top: 15px;
      padding-left: 10px;
      margin-bottom: 0 !important; }
      .trainingDataInnerFolder .folderContainer ul:after {
        width: 100%;
        height: 30px;
        display: block;
        content: ''; }
      @media (max-width: 1400px) {
        .trainingDataInnerFolder .folderContainer ul {
          height: 415px;
          max-height: 415px; } }
      @media (max-width: 480px) {
        .trainingDataInnerFolder .folderContainer ul {
          width: calc(100% - 20px);
          padding-top: 15px; } }
    .trainingDataInnerFolder .folderContainer li {
      display: flex;
      justify-content: center;
      align-items: stretch;
      width: 140px;
      height: 140px;
      background-color: #C4C4C4;
      border-radius: 5px;
      margin-left: 15px;
      margin-bottom: 15px;
      position: relative;
      overflow: hidden;
      text-align: center;
      padding: 0; }
      @media (max-width: 480px) {
        .trainingDataInnerFolder .folderContainer li {
          width: 126px;
          height: 120px;
          margin-left: 15px;
          margin-bottom: 15px; } }
      .trainingDataInnerFolder .folderContainer li .dbClickDiv {
        display: flex; }
        .trainingDataInnerFolder .folderContainer li .dbClickDiv:before {
          position: absolute;
          top: 0;
          left: 0;
          content: '';
          background: rgba(0, 0, 0, 0);
          z-index: 2; }
      .trainingDataInnerFolder .folderContainer li img {
        max-height: 140px;
        filter: brightness(0.6);
        object-fit: cover; }
        @media (max-width: 480px) {
          .trainingDataInnerFolder .folderContainer li img {
            max-height: 120px; } }
      .trainingDataInnerFolder .folderContainer li .icon {
        height: 20px;
        width: 20px;
        border-radius: 3px;
        position: absolute;
        left: 7px;
        top: 7px;
        z-index: 2; }
      .trainingDataInnerFolder .folderContainer li .iconPicture {
        background: #ffffff url(../img/icon-image-light-purple.svg) center center no-repeat; }
      .trainingDataInnerFolder .folderContainer li .iconVideoPlayer {
        background: #ffffff url(../img/icon-play-green.svg) center center no-repeat; }
      .trainingDataInnerFolder .folderContainer li .iconFolder {
        background: #f7941d url(../img/icon-folder.svg) center center no-repeat; }
      .trainingDataInnerFolder .folderContainer li .itemName {
        margin: 0 auto;
        font-size: 14px;
        font-weight: 400;
        display: none;
        text-align: center;
        line-height: initial;
        width: 100%;
        max-width: 150px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        z-index: 2;
        color: #fff;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 10px; }
    .trainingDataInnerFolder .folderContainer li.selected .dbClickDiv:before {
      background: rgba(0, 0, 0, 0.5);
      width: 100%;
      height: 100%; }
  .trainingDataInnerFolder .checkbox {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 4;
    cursor: pointer;
    margin: 0; }
    .trainingDataInnerFolder .checkbox input[type='checkbox'] {
      display: none; }
    .trainingDataInnerFolder .checkbox span {
      display: inline-block;
      width: 18px;
      height: 18px;
      position: relative;
      background: url(../img/checkbox-default.svg) 0 0 no-repeat;
      background-size: cover; }
    .trainingDataInnerFolder .checkbox input[type='checkbox']:checked + span {
      background: #8020CF url(../img/ch-check-white.svg) center center no-repeat;
      border-radius: 4px; }
  .trainingDataInnerFolder .mCustomScrollBox {
    width: 100%;
    height: auto !important; }

.datasetInnerFolder {
  padding-right: 0 !important; }
  .datasetInnerFolder .buttonBar {
    display: flex;
    justify-content: space-between;
    align-items: center; }
    .datasetInnerFolder .buttonBar button {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      min-width: 118px;
      height: 36px;
      border-radius: 5px;
      border: none; }
    .datasetInnerFolder .buttonBar button + button {
      margin-left: 10px; }
  .datasetInnerFolder .selectAll,
  .datasetInnerFolder .selectAllDataset {
    color: #8020CF;
    font-size: 14px;
    font-family: "Euclid Circular B";
    font-weight: 600;
    text-transform: uppercase;
    background: transparent; }
  .datasetInnerFolder .addSelected {
    background: #F7F7F7;
    border-radius: 5px;
    color: #B7B7B7;
    height: 36px;
    border: 0;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    pointer-events: none; }
    .datasetInnerFolder .addSelected.active {
      background: #8020CF;
      color: #ffffff;
      pointer-events: auto;
      cursor: pointer; }
  .datasetInnerFolder .subtitle {
    color: #595959;
    font-weight: 400;
    font-size: 16px;
    margin: 0 25px 10px; }
  .datasetInnerFolder .group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px; }
    .datasetInnerFolder .group .subtitle {
      margin: 0; }
    .datasetInnerFolder .group .versionDropdown {
      width: 210px;
      margin-bottom: 20px;
      z-index: 5; }
      .datasetInnerFolder .group .versionDropdown .itemBtn {
        border-radius: 10px; }
      .datasetInnerFolder .group .versionDropdown .dropdownItemList {
        width: 252px;
        max-height: none;
        padding-top: 0;
        box-shadow: -4px 0px 4px rgba(65, 65, 65, 0.25), 0px -4px 4px rgba(65, 65, 65, 0.15), 4px 0px 4px rgba(65, 65, 65, 0.15), 0px 4px 4px rgba(65, 65, 65, 0.15); }
        .datasetInnerFolder .group .versionDropdown .dropdownItemList li {
          border-bottom: 1px solid #E7E7E7; }
          .datasetInnerFolder .group .versionDropdown .dropdownItemList li:last-child {
            border-bottom: none; }
          .datasetInnerFolder .group .versionDropdown .dropdownItemList li a {
            padding: 20px 15px;
            color: #595959;
            font-size: 16px;
            font-weight: "latomedium"; }
            .datasetInnerFolder .group .versionDropdown .dropdownItemList li a p {
              margin: 0; }
          .datasetInnerFolder .group .versionDropdown .dropdownItemList li:hover a, .datasetInnerFolder .group .versionDropdown .dropdownItemList li:focus a {
            background-color: #EBEFF2;
            color: #595959 !important; }
          .datasetInnerFolder .group .versionDropdown .dropdownItemList li.active a {
            background-color: #EBEFF2;
            color: #595959 !important; }
  .datasetInnerFolder .alertSelectedImage {
    font-size: 16px;
    font-weight: 600;
    color: #8020CF;
    margin-bottom: 0;
    margin-right: auto;
    margin-left: 20px;
    display: none; }
  .datasetInnerFolder .modal-body {
    height: 656px;
    padding-top: 0;
    padding-bottom: 0; }
    @media (max-width: 967px) {
      .datasetInnerFolder .modal-body {
        width: 100%; } }
    @media (max-width: 1400px) {
      .datasetInnerFolder .modal-body {
        height: 490px; } }
    .datasetInnerFolder .modal-body .modelBodyTopBar {
      padding: 0 25px 0 35px; }
  .datasetInnerFolder .modal-lg {
    max-width: 1312px;
    margin: auto;
    align-items: center; }
  .datasetInnerFolder .modal-content {
    margin-top: 0; }
  .datasetInnerFolder .modal-header .back {
    position: absolute;
    left: 15px;
    top: 15px;
    background-color: transparent;
    border: 0;
    z-index: 2;
    padding: 0; }
  .datasetInnerFolder .modal-title {
    text-align: center; }
  .datasetInnerFolder .closeModal {
    top: 15px;
    right: 15px; }
  .datasetInnerFolder .folderContainer {
    height: 80%;
    max-height: 80%;
    overflow: hidden; }
    .datasetInnerFolder .folderContainer ul {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-wrap: wrap;
      align-content: flex-start;
      padding-top: 0;
      position: relative;
      padding-left: 15px;
      margin: 0 !important; }
      .datasetInnerFolder .folderContainer ul:after {
        width: 100%;
        height: 30px;
        display: block;
        content: ''; }
      @media (max-width: 480px) {
        .datasetInnerFolder .folderContainer ul {
          width: calc(100% - 20px);
          padding-top: 15px; } }
    .datasetInnerFolder .folderContainer li {
      display: flex;
      justify-content: center;
      align-items: stretch;
      width: 140px;
      height: 140px;
      background-color: #C4C4C4;
      border-radius: 5px;
      margin-left: 15px;
      margin-bottom: 15px;
      position: relative;
      overflow: hidden;
      text-align: center;
      padding: 0; }
      @media (max-width: 480px) {
        .datasetInnerFolder .folderContainer li {
          width: 126px;
          height: 120px;
          margin-left: 15px;
          margin-bottom: 15px; } }
      .datasetInnerFolder .folderContainer li .dbClickDivDataset {
        display: flex; }
        .datasetInnerFolder .folderContainer li .dbClickDivDataset:before {
          position: absolute;
          top: 0;
          left: 0;
          content: '';
          background: rgba(0, 0, 0, 0);
          z-index: 2; }
      .datasetInnerFolder .folderContainer li img {
        max-height: 140px;
        filter: brightness(0.6);
        object-fit: cover; }
        @media (max-width: 480px) {
          .datasetInnerFolder .folderContainer li img {
            max-height: 120px; } }
      .datasetInnerFolder .folderContainer li .icon {
        height: 20px;
        width: 20px;
        border-radius: 3px;
        position: absolute;
        left: 7px;
        top: 7px;
        z-index: 2; }
      .datasetInnerFolder .folderContainer li .iconPicture {
        background: #ffffff url(../img/icon-image-light-purple.svg) center center no-repeat; }
      .datasetInnerFolder .folderContainer li .iconVideoPlayer {
        background: #ffffff url(../img/icon-play-green.svg) center center no-repeat; }
      .datasetInnerFolder .folderContainer li .iconFolder {
        background: #f7941d url(../img/icon-folder.svg) center center no-repeat; }
      .datasetInnerFolder .folderContainer li .itemName {
        margin: 0 auto;
        font-size: 14px;
        font-weight: 400;
        display: none;
        text-align: center;
        line-height: initial;
        width: 100%;
        max-width: 150px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        z-index: 2;
        color: #fff;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 10px; }
    .datasetInnerFolder .folderContainer li.selected .dbClickDiv:before {
      background: rgba(0, 0, 0, 0.5);
      width: 100%;
      height: 100%; }
  .datasetInnerFolder .checkbox {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 4;
    cursor: pointer;
    margin: 0; }
    .datasetInnerFolder .checkbox input[type='checkbox'] {
      display: none; }
    .datasetInnerFolder .checkbox span {
      display: inline-block;
      width: 18px;
      height: 18px;
      position: relative;
      background: url(../img/checkbox-default.svg) 0 0 no-repeat;
      background-size: cover; }
    .datasetInnerFolder .checkbox input[type='checkbox']:checked + span {
      background: #8020CF url(../img/ch-check-white.svg) center center no-repeat;
      border-radius: 4px; }
  .datasetInnerFolder .mCustomScrollBox {
    width: 100%;
    height: auto !important; }

.trainingObjectListWrapper .preceptionAreaTopOwner {
  width: 18%;
  display: flex;
  justify-content: flex-start;
  align-items: center; }

.trainingObjectListWrapper .preceptionAreaTopSharedWith {
  width: 14%;
  display: flex;
  justify-content: center;
  align-items: center; }

.trainingObjectListWrapper .preceptionAreaTopActions a {
  color: #0084ff; }
  .trainingObjectListWrapper .preceptionAreaTopActions a:hover, .trainingObjectListWrapper .preceptionAreaTopActions a:active, .trainingObjectListWrapper .preceptionAreaTopActions a:focus {
    color: #0084ff !important; }

.trainingObjectListWrapper .preceptionAreaTopActions .plusIcon {
  margin-right: 10px;
  margin-top: -2px; }

.trainingObjectListWrapper .preceptionAreaTopActions .add_annotation_images {
  color: #8c8c8c;
  margin-right: 30px;
  font-weight: 500; }
  .trainingObjectListWrapper .preceptionAreaTopActions .add_annotation_images:hover, .trainingObjectListWrapper .preceptionAreaTopActions .add_annotation_images:active, .trainingObjectListWrapper .preceptionAreaTopActions .add_annotation_images:focus {
    color: #8c8c8c !important; }

.trainingObjectListWrapper .preceptionAreaTopActions .downloadDataset {
  margin-right: 15px;
  margin-top: 2px; }
  .trainingObjectListWrapper .preceptionAreaTopActions .downloadDataset img {
    width: 19px; }

.trainingObjectListWrapper .preceptionAreaTopActions .renameDataset,
.trainingObjectListWrapper .preceptionAreaTopActions .shareEmail {
  margin-right: 10px; }

.trainingObjectListWrapper .percentageLoader {
  visibility: hidden;
  opacity: 0;
  width: 25px;
  display: inline-flex;
  position: absolute; }

.trainingObjectListWrapper .percentageLoader.show {
  visibility: visible;
  opacity: 1; }

.trainingObjectImageWrapper .blue-border-button img {
  filter: invert(38%) sepia(81%) saturate(3792%) hue-rotate(195deg) brightness(102%) contrast(107%); }

.trainingObjectImageWrapper .class_detail_name {
  text-align: center;
  font-size: 18px;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  padding: 0 30px;
  color: #58595b;
  margin-top: 20px; }

.infoMessage {
  background: #fff8d9;
  border: 1px solid #f4c579;
  box-sizing: border-box;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  color: #595959;
  margin: 15px 0;
  position: relative;
  height: 44px; }
  .infoMessage img {
    margin-right: 15px;
    width: 32px;
    height: 32px;
    filter: invert(78%) sepia(30%) saturate(558%) hue-rotate(354deg) brightness(98%) contrast(95%);
    float: left; }

.annotationWrapper {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 20px 0 50px 0;
  position: relative;
  overflow: hidden; }
  .annotationWrapper canvas {
    width: 100% !important; }
  .annotationWrapper img {
    max-width: 100%;
    max-height: 800px; }
    @media (max-width: 768px) {
      .annotationWrapper img {
        max-height: 300px; } }
  .annotationWrapper .annotorious-popup {
    width: 284px;
    background: #ffffff;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.147645);
    border-radius: 10px;
    padding: 15px; }
  .annotationWrapper .annotorious-editor {
    width: 284px;
    height: auto !important;
    background: #ffffff;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.147645);
    border-radius: 10px;
    padding: 40px 15px 15px;
    z-index: 3 !important; }
    .annotationWrapper .annotorious-editor form {
      position: relative;
      margin: 0; }
    .annotationWrapper .annotorious-editor .annotorious-editor-text {
      background: #ffffff;
      border: 1px solid #d0d1d5;
      border-radius: 26px;
      padding: 14px 30px;
      height: 45px !important; }
    .annotationWrapper .annotorious-editor label {
      font-size: 14px;
      line-height: 16px;
      color: #9b9b9b;
      padding: 0 5px;
      background-color: #fff;
      position: absolute;
      margin: 0;
      left: 26px;
      top: -8px; }
  .annotationWrapper .annotorious-editor-button-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 15px; }
  .annotationWrapper .annotorious-editor-recomended-container {
    padding: 0;
    max-height: 120px;
    overflow-y: auto; }

.annotationWrapper .orange-button {
  background: transparent;
  padding: 0px; }
  .annotationWrapper .orange-button img {
    width: 15px; }

.annotationWrapper .closeEditorModal {
  position: absolute;
  right: -10px;
  top: -30px;
  background: url(../img/icon-close.svg) no-repeat center center;
  background-size: contain;
  width: 16px;
  height: 16px;
  transition: none !important;
  border: 0; }
  .annotationWrapper .closeEditorModal:hover {
    background: url(../img/icon-close.svg) no-repeat center center !important;
    background-size: contain !important; }

.annotationWrapper .annotationThumbWrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f6f7fb;
  border-radius: 10px;
  padding: 25px 30px 15px;
  overflow: hidden;
  position: relative; }
  .annotationWrapper .annotationThumbWrapper .owlPrev,
  .annotationWrapper .annotationThumbWrapper .owlNext {
    position: absolute;
    width: 30px;
    height: 100%;
    top: 0;
    background: transparent;
    border: 0;
    z-index: 2;
    cursor: pointer; }
  .annotationWrapper .annotationThumbWrapper .owlPrev {
    left: 0; }
  .annotationWrapper .annotationThumbWrapper .owlNext {
    right: 0; }
  .annotationWrapper .annotationThumbWrapper .viewAll {
    position: absolute;
    top: 10px;
    right: 30px;
    color: #f7941d;
    font-size: 12px;
    font-weight: 500; }
  .annotationWrapper .annotationThumbWrapper ul {
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: row;
    white-space: nowrap; }
    .annotationWrapper .annotationThumbWrapper ul li {
      background-color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      margin: 0 8px; }
      .annotationWrapper .annotationThumbWrapper ul li:first-child {
        margin-left: 0; }
      .annotationWrapper .annotationThumbWrapper ul li img {
        max-height: 122px;
        max-width: 100% !important;
        width: auto !important;
        opacity: 0.5; }
      .annotationWrapper .annotationThumbWrapper ul li .annotedCompleted {
        position: absolute;
        top: 10px;
        left: 10px;
        width: 24px;
        height: 24px;
        text-align: center;
        line-height: 24px;
        background: #fff url(../img/check-icon-circle-green-v2.svg) center center no-repeat;
        background-size: 12px;
        border: 1px solid #f7941d;
        border-radius: 50%;
        z-index: 1; }
      .annotationWrapper .annotationThumbWrapper ul li .annotedNotCompleted {
        position: absolute;
        top: 10px;
        left: 10px;
        width: 24px;
        height: 24px;
        text-align: center;
        line-height: 24px;
        background: url(../img/info-mark.svg) center center no-repeat;
        z-index: 1;
        background-color: #f7941d;
        border-radius: 50%; }
      .annotationWrapper .annotationThumbWrapper ul li .annotationTaskWaiting {
        background: #fff url(../img/ch-annotation-task-in-progress.svg) center center no-repeat;
        position: absolute;
        top: 10px;
        left: 10px;
        width: 24px;
        height: 24px;
        text-align: center;
        line-height: 24px;
        z-index: 1;
        border-radius: 50%; }
      .annotationWrapper .annotationThumbWrapper ul li .itemNumber {
        position: absolute;
        font-style: normal;
        right: 5px;
        top: 10px;
        border-radius: 10px;
        font-size: 10px;
        text-align: center;
        border: 1px solid #c7c7c7;
        color: #676767;
        padding: 0 9px;
        background: gainsboro; }
    .annotationWrapper .annotationThumbWrapper ul .active {
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); }
  .annotationWrapper .annotationThumbWrapper .owl-carousel .owl-stage-outer {
    z-index: 2; }
  .annotationWrapper .annotationThumbWrapper .owl-carousel .owl-stage {
    padding: 10px 0; }
  .annotationWrapper .annotationThumbWrapper .owl-carousel .owl-item .owl-item {
    margin-right: 0 !important;
    width: 100% !important; }
  .annotationWrapper .annotationThumbWrapper .owl-carousel .owl-item .owl-item.active {
    box-shadow: none; }
  .annotationWrapper .annotationThumbWrapper .owl-carousel .owl-item .item {
    height: 130px;
    margin: 0; }
  .annotationWrapper .annotationThumbWrapper .owl-carousel .owl-item img {
    opacity: 0.7; }
  .annotationWrapper .annotationThumbWrapper .owl-carousel .active img {
    opacity: 1; }
  .annotationWrapper .annotationThumbWrapper .owl-nav {
    position: absolute;
    width: 100%;
    z-index: 0;
    display: flex;
    justify-content: space-between; }
    .annotationWrapper .annotationThumbWrapper .owl-nav .owl-prev,
    .annotationWrapper .annotationThumbWrapper .owl-nav .owl-next {
      width: 20px;
      height: 100%;
      font-size: 0;
      width: 10px;
      height: 20px; }
    .annotationWrapper .annotationThumbWrapper .owl-nav .owl-prev {
      margin-left: -20px;
      background: url(../img/icon-prev.svg) 0 0 no-repeat; }
    .annotationWrapper .annotationThumbWrapper .owl-nav .owl-next {
      margin-right: -20px;
      background: url(../img/icon-next.svg) 0 0 no-repeat; }

.perceptionSearch {
  min-width: 400px;
  width: 100%;
  padding: 0; }
  .perceptionSearch input {
    border: none;
    border-radius: 4px;
    background: white;
    color: #535353;
    padding-left: 40px !important;
    box-shadow: 0px 2px 5px rgba(40, 40, 40, 0.1);
    transition: all 0.2s ease-in;
    font-size: 14px;
    font-weight: 400; }
    .perceptionSearch input:hover, .perceptionSearch input:focus {
      box-shadow: 0px 2px 5px rgba(40, 40, 40, 0.1) !important; }
    .perceptionSearch input::-webkit-input-placeholder {
      /* Chrome/Opera/Safari */
      color: rgba(0, 0, 0, 0.65); }
    .perceptionSearch input::-moz-placeholder {
      /* Firefox 19+ */
      color: #000; }
    .perceptionSearch input:-ms-input-placeholder {
      /* IE 10+ */
      color: rgba(0, 0, 0, 0.75); }
  .perceptionSearch .easy-autocomplete {
    width: 100% !important; }
  .perceptionSearch .topSearch button {
    top: 0;
    right: auto;
    left: 0;
    opacity: 0.8; }
  .perceptionSearch .result {
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    float: left; }
    .perceptionSearch .result .backBtn img {
      filter: invert(32%) sepia(9%) saturate(131%) hue-rotate(182deg) brightness(95%) contrast(81%);
      margin: 0 !important;
      width: 10px; }

.preTrainedPreception .noFileWarn_one {
  margin-left: 10px;
  position: static; }

.preTrainedPreception .preceptionAreaTopName {
  width: 55%; }

.preTrainedPreception .preceptionAreaTrainedBy {
  width: 20%; }

.preTrainedPreception .preceptionAreaTopActions {
  width: 10%; }

.listPerceptionDetail .trainingContentArea .preceptionAreaTopName {
  width: 35%; }

.listPerceptionDetail .trainingContentArea .preceptionAreaTopId {
  width: 10%; }

.listPerceptionDetail .trainingContentArea .preceptionAreaTopAccuracy {
  width: 10%;
  display: flex;
  justify-content: flex-start;
  align-items: center; }

.listPerceptionDetail .trainingContentArea .preceptionAreaTrainStatus {
  width: 15%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-align: center; }

.listPerceptionDetail .trainingContentArea .preceptionAreaTopActions {
  width: 15%; }
  @media (max-width: 480px) {
    .listPerceptionDetail .trainingContentArea .preceptionAreaTopActions {
      width: 38%; } }

.trainingAreaBottomBar .deleteAllClassImg {
  line-height: 40px; }

.predictionResultImage #myCanvas {
  max-width: 100%;
  padding: 50px 0; }

.trainingFacialListWrapper .customModalInner {
  width: 100%;
  position: relative;
  padding: 0; }
  .trainingFacialListWrapper .customModalInner .predictionResultImage {
    padding-left: 20px;
    padding-right: 20px; }

.objectDetectionPerceptions .note {
  margin-bottom: 0;
  margin-left: 5px; }

.objectDetectionPerceptions .trainingContentArea .preceptionAreaTopId {
  width: 5%; }

.objectDetectionPerceptions .trainingContentArea .preceptionAreaTopName {
  width: 20%; }

.objectDetectionPerceptions .trainingContentArea .preceptionAreaTopStatus {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  text-align: center; }
  .objectDetectionPerceptions .trainingContentArea .preceptionAreaTopStatus p,
  .objectDetectionPerceptions .trainingContentArea .preceptionAreaTopStatus a {
    width: 100%;
    text-align: center;
    margin: 0; }

.objectDetectionPerceptions .trainingContentArea .preceptionAreaTopTraininglog {
  width: 15%;
  flex-direction: column; }

.objectDetectionPerceptions .trainingContentArea .preceptionAreaTopMode {
  width: 17%;
  text-align: center; }

.objectDetectionPerceptions .trainingContentArea .preceptionAreaTopCreatedby {
  width: 18%;
  display: flex;
  text-align: center;
  position: relative; }

.objectDetectionPerceptions .trainingContentArea .preceptionAreaTopCreatedby {
  width: 18%;
  display: flex;
  text-align: center; }

.objectDetectionPerceptions .trainingContentArea .preceptionAreaTopSharedWith {
  width: 14%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center; }

.objectDetectionPerceptions .trainingContentArea .preceptionAreaTopActions {
  justify-content: center !important;
  width: 12%; }

.objectDetectionPerceptions .trainingContentArea .onOff {
  width: 10%; }

.mobTitleBar {
  background: #f6f7fb;
  border: 2px solid #ffffff;
  padding: 5px 15px;
  color: #58595b;
  font-size: 16px;
  line-height: 19px;
  justify-content: space-between;
  align-items: center;
  border-radius: 10px 10px 0 0;
  display: none;
  min-height: 40px; }
  .mobTitleBar h4 {
    font-size: 14px;
    color: #58595b;
    margin: 0;
    font-weight: 500; }
    .mobTitleBar h4 b {
      font-weight: 500; }
    .mobTitleBar h4 .itemCounter,
    .mobTitleBar h4 .item_Counter {
      width: 34px;
      height: 34px;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      background: rgba(19, 139, 250, 0.14);
      border-radius: 34px;
      font-size: 14px;
      font-weight: 500;
      color: #138bfa;
      margin-left: 8px; }
  .mobTitleBar a {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center; }
    .mobTitleBar a img {
      width: 16px; }
  .mobTitleBar .eoview {
    width: auto;
    height: auto; }
  .mobTitleBar .idBar {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 0;
    padding: 0;
    height: auto; }
    .mobTitleBar .idBar .idGroup {
      margin-right: 20px; }
      .mobTitleBar .idBar .idGroup a {
        width: auto;
        height: auto; }

.btnWrapper {
  text-align: center;
  width: 100%; }
  .btnWrapper .blue-button,
  .btnWrapper .blue-border-button {
    display: block;
    padding: 11px 30px;
    margin-bottom: 15px;
    width: 100%; }
    .btnWrapper .blue-button img,
    .btnWrapper .blue-border-button img {
      margin-right: 10px; }
  .btnWrapper .blue-border-button img {
    filter: invert(33%) sepia(88%) saturate(2757%) hue-rotate(201deg) brightness(112%) contrast(96%); }

.actorsInfo {
  list-style: none;
  flex-wrap: wrap;
  color: #58595b; }
  .actorsInfo li {
    width: 100%;
    font-weight: bold; }
    .actorsInfo li label {
      font-weight: normal;
      width: 130px; }
    .actorsInfo li span {
      display: inline-flex !important;
      padding-left: 10px;
      position: relative; }
      .actorsInfo li span:before {
        content: ':';
        position: absolute;
        left: 0; }

.objectDetectionPerceptions .trainingContentArea .preceptionArea .preceptionAreaTopInnerBar li,
.perceptionsDetailListWrapper .trainingContentArea .preceptionArea .preceptionAreaTopInnerBar li {
  padding: 0 10px; }
  @media (max-width: 480px) {
    .objectDetectionPerceptions .trainingContentArea .preceptionArea .preceptionAreaTopInnerBar li,
    .perceptionsDetailListWrapper .trainingContentArea .preceptionArea .preceptionAreaTopInnerBar li {
      padding: 0 5px; } }

.objectDetectionPerceptions .trainingContentArea .preceptionArea .eachPreceptionAreaContent ul li,
.perceptionsDetailListWrapper .trainingContentArea .preceptionArea .eachPreceptionAreaContent ul li {
  padding: 0 10px;
  display: flex;
  justify-content: flex-start;
  align-items: center; }
  @media (max-width: 480px) {
    .objectDetectionPerceptions .trainingContentArea .preceptionArea .eachPreceptionAreaContent ul li,
    .perceptionsDetailListWrapper .trainingContentArea .preceptionArea .eachPreceptionAreaContent ul li {
      padding: 0 5px; } }

.objectDetectionPerceptions .trainingContentArea .preceptionArea .eachPreceptionAreaContent ul .preceptionAreaTopSharedWith,
.perceptionsDetailListWrapper .trainingContentArea .preceptionArea .eachPreceptionAreaContent ul .preceptionAreaTopSharedWith {
  justify-content: center; }

.objectDetectionPerceptions .trainingContentArea .preceptionArea .eachPreceptionAreaContent ul .preceptionAreaTopTraininglog,
.perceptionsDetailListWrapper .trainingContentArea .preceptionArea .eachPreceptionAreaContent ul .preceptionAreaTopTraininglog {
  align-items: flex-start; }

.objectDetectionPerceptions .trainingContentArea .preceptionArea .eachPreceptionAreaContent ul .preceptionAreaTopMode,
.perceptionsDetailListWrapper .trainingContentArea .preceptionArea .eachPreceptionAreaContent ul .preceptionAreaTopMode {
  justify-content: center; }

.objectDetectionPerceptions .trainingContentArea .preceptionArea .eachPreceptionAreaContent ul .preceptionAreaTopThumbnail img,
.perceptionsDetailListWrapper .trainingContentArea .preceptionArea .eachPreceptionAreaContent ul .preceptionAreaTopThumbnail img {
  max-height: 100px; }

.objectDetectionPerceptions .preceptionAreaTopActions .actions {
  width: 100%;
  display: flex;
  justify-content: center; }
  .objectDetectionPerceptions .preceptionAreaTopActions .actions a,
  .objectDetectionPerceptions .preceptionAreaTopActions .actions button {
    margin: 0 8px 0 8px; }

.objectDetailListWrapper .preceptionAreaTopThumbnail {
  width: 16%; }

.objectDetailListWrapper .preceptionAreaImageCount {
  width: 15%;
  display: flex;
  justify-content: flex-start;
  align-items: center; }

.trainingObjectListWrapper .trainingContentArea .preceptionAreaTopActions {
  justify-content: center; }

@media (max-width: 967px) {
  .trainingContentArea .trainingMenu {
    display: none; }
  .trainingContentArea .trainingArea {
    width: calc(100%);
    border-radius: 10px;
    padding: 1px; }
    .trainingContentArea .trainingArea .preceptionArea {
      padding: 15px;
      margin-top: 0; } }
    @media (max-width: 967px) and (max-width: 480px) {
      .trainingContentArea .trainingArea .preceptionArea {
        padding: 10px; } }

@media (max-width: 967px) {
    .trainingContentArea .trainingArea .preceptionAreaTopCheckbox {
      width: 35px; }
    .trainingContentArea .trainingArea .preceptionAreaTopName {
      width: 65%; }
      .trainingContentArea .trainingArea .preceptionAreaTopName a {
        font-weight: normal; }
      .trainingContentArea .trainingArea .preceptionAreaTopName .tableFilterBtn {
        font-weight: 500; }
    .trainingContentArea .trainingArea .preceptionAreaTopActions {
      font-size: 13px !important;
      width: 125px;
      margin: 0 auto;
      padding: 0; }
    .trainingContentArea .trainingArea .preceptionAreaTopInnerBar {
      background-color: transparent;
      border-bottom: 1px solid #ededed;
      border-radius: 0; }
    .trainingContentArea .trainingArea .trainingAreaBottomBar {
      height: auto;
      position: static; }
      .trainingContentArea .trainingArea .trainingAreaBottomBar .mobView {
        width: 100%; }
      .trainingContentArea .trainingArea .trainingAreaBottomBar .preceptionAreaTopActions {
        width: 125px; }
      .trainingContentArea .trainingArea .trainingAreaBottomBar .perception_disableAllBtn {
        margin: 15px auto 0; }
      .trainingContentArea .trainingArea .trainingAreaBottomBar .btnDisable {
        padding: 5px 20px;
        max-width: 150px;
        width: 100%; }
    .trainingContentArea .trainingArea .footerActions,
    .trainingContentArea .trainingArea .selectedOptions {
      display: block;
      text-align: center; }
    .trainingContentArea .trainingArea .selectedOptions {
      padding: 10px; }
    .trainingContentArea .trainingArea .pagination {
      margin-top: 15px; }
    .trainingContentArea .trainingArea .preceptionAreaContent {
      min-height: 100px; }
  .preTrainedPreception .perceptionSearch {
    margin: 0;
    width: 100%;
    margin-top: -10px; }
  .preTrainedPreception .perceptionSearch {
    width: 100%;
    padding: 0 30px; }
    .preTrainedPreception .perceptionSearch .result {
      padding: 10px 0;
      width: 100%; }
    .preTrainedPreception .perceptionSearch h3 {
      flex-direction: row; }
  .mobTitleBar {
    display: flex; }
  .listPerceptionDetail .preceptionAreaTopId {
    display: none; }
  .trainingFacialListWrapper .trainingContentArea .preceptionAreaTopThumbil,
  .trainingFacialDetail .trainingContentArea .preceptionAreaTopThumbil,
  .trainingObjectListWrapper .trainingContentArea .preceptionAreaTopThumbil {
    width: 130px;
    padding: 10px; }
  .trainingFacialListWrapper .trainingContentArea .preceptionAreaTopId,
  .trainingFacialDetail .trainingContentArea .preceptionAreaTopId,
  .trainingObjectListWrapper .trainingContentArea .preceptionAreaTopId {
    display: none; }
  .trainingObjectImageWrapper .trainingArea {
    padding: 10px; }
  .infoMessage .annotation_obj_total {
    display: block;
    font-size: 14px; }
  .infoMessage .annotation_obj_number {
    font-size: 14px;
    top: 15px; }
  .trainingFacialDetail .trainingContentArea .preceptionAreaTopInnerBar,
  .trainingFacialDetail .trainingContentArea .preceptionAreaContent {
    display: none; }
  .trainingFacialListWrapper .trainingContentArea .preceptionAreaTopThumbil a {
    padding: 0; }
  .trainingFacialListWrapper .trainingContentArea .preceptionAreaTopName {
    width: 50%; }
  .trainingFacialListWrapper .trainingContentArea .preceptionAreaTopStatus,
  .trainingFacialListWrapper .trainingContentArea .lessPhotoCount {
    justify-content: flex-end; }
  .trainingFacialListWrapper .trainingContentArea .preceptionAreaContent .preceptionAreaTopStatus,
  .trainingFacialListWrapper .trainingContentArea .preceptionAreaContent .lessPhotoCount {
    font-size: 0; }
    .trainingFacialListWrapper .trainingContentArea .preceptionAreaContent .preceptionAreaTopStatus img,
    .trainingFacialListWrapper .trainingContentArea .preceptionAreaContent .lessPhotoCount img {
      width: 25px; }
    .trainingFacialListWrapper .trainingContentArea .preceptionAreaContent .preceptionAreaTopStatus .iconInfo,
    .trainingFacialListWrapper .trainingContentArea .preceptionAreaContent .lessPhotoCount .iconInfo {
      filter: invert(65%) sepia(66%) saturate(1873%) hue-rotate(347deg) brightness(180%) contrast(94%); }
  .trainingFacialListWrapper .deleteAction {
    width: 100%;
    clear: both; }
  .trainingObjectListWrapper .trainingContentArea .preceptionAreaTopName {
    width: 42%; }
  .annotationWrapper .annotationThumbWrapper ul {
    justify-content: flex-start; }
    .annotationWrapper .annotationThumbWrapper ul li img {
      max-height: 108px; }
  .publishWrapper .modal-content .modal-header .modal-title {
    font-size: 16px !important;
    line-height: 22px; } }

@media (max-width: 480px) {
  .deleteModal a {
    margin-bottom: 10px !important;
    width: 100%; }
  .deleteModalContent {
    padding: 20px 0; }
  .deleteModal_inner p {
    font-size: 19px !important; }
  .objectDetectionPerceptions .trainingContentArea .preceptionArea ul li,
  .perceptionsDetailListWrapper .trainingContentArea .preceptionArea ul li {
    word-break: break-word; }
  .objectDetectionPerceptions .trainingContentArea .preceptionArea ul .preceptionAreaTopName,
  .perceptionsDetailListWrapper .trainingContentArea .preceptionArea ul .preceptionAreaTopName {
    width: 50%; }
  .objectDetectionPerceptions .trainingContentArea .preceptionArea ul .preceptionAreaTopStatus,
  .perceptionsDetailListWrapper .trainingContentArea .preceptionArea ul .preceptionAreaTopStatus {
    width: 40%; }
  .trainingAreaButtons {
    width: 100%; } }

@media (min-width: 1025px) {
  .predictionResultFace .prediction_result_list_each {
    flex-direction: row !important; } }

.predictionResultFace .similarImgResult img {
  max-height: 125px;
  max-width: 100%; }

.enable_selected_btn {
  display: inline-block;
  width: 44px;
  height: 16px;
  background: #138bfa;
  color: #9b9b9b;
  border-radius: 12px;
  z-index: 7;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  cursor: pointer;
  position: relative;
  margin-left: 15px;
  font-size: 0;
  padding: 1px 10px 0px 30px;
  line-height: 22px; }
  @media (max-width: 480px) {
    .enable_selected_btn {
      margin-left: 5px; } }
  .enable_selected_btn:hover {
    color: #9b9b9b;
    opacity: 0.8; }
  .enable_selected_btn:before {
    content: '';
    display: block;
    height: 20px;
    width: 20px;
    background-color: #e0e0e0;
    border: solid 2px #138bfa;
    border-radius: 50%;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
    position: absolute;
    left: 0;
    top: -2px; }

.disable_selected_btn {
  display: inline-block;
  width: 44px;
  height: 16px;
  background: #e0e0e0;
  border-radius: 12px;
  z-index: 7;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  cursor: pointer;
  position: relative;
  margin-left: 15px;
  font-size: 0;
  padding: 1px 30px 0px 10px;
  color: #ff4b4b;
  line-height: 22px; }
  @media (max-width: 480px) {
    .disable_selected_btn {
      margin-left: 5px; } }
  .disable_selected_btn:hover {
    color: #ff4b4b;
    opacity: 0.8; }
  .disable_selected_btn:before {
    content: '';
    display: block;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background-color: #bdbdbd;
    border: solid 2px #e0e0e0;
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
    position: absolute;
    right: 0;
    top: -2px; }

.or_ {
  font-size: 12px;
  margin-left: 15px; }
  @media (max-width: 480px) {
    .or_ {
      margin-left: 5px; } }

@media (max-width: 1024px) {
  .trainingAreaBottomBar .preceptionAreaTopActions {
    width: 100% !important; } }

.thumbnailGalleryExpanded {
  width: 100%;
  position: absolute;
  transform: translateY(110%);
  background: #f6f6f6;
  border-radius: 11px;
  z-index: 999;
  height: 100%;
  overflow: auto;
  transition: 0.4s ease-in all; }
  .thumbnailGalleryExpanded .row {
    padding-top: 55px;
    padding-left: 15px; }
  .thumbnailGalleryExpanded .item {
    flex-direction: column;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background: #ffffff;
    margin-bottom: 10px;
    position: relative; }
    .thumbnailGalleryExpanded .item a {
      height: 160px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden; }
      @media (max-width: 480px) {
        .thumbnailGalleryExpanded .item a {
          height: 100px; } }
    .thumbnailGalleryExpanded .item img {
      max-width: 100%;
      max-height: 160px;
      width: auto; }
      @media (max-width: 480px) {
        .thumbnailGalleryExpanded .item img {
          max-height: 100%; } }
    .thumbnailGalleryExpanded .item .itemNumber {
      margin-top: 6px; }
    .thumbnailGalleryExpanded .item .annotedCompleted {
      position: absolute;
      top: 10px;
      left: 10px;
      width: 24px;
      height: 24px;
      text-align: center;
      line-height: 24px;
      background: #fff url(../img/check-icon-circle-green-v2.svg) center center no-repeat;
      background-size: 12px;
      border: 1px solid #f7941d;
      border-radius: 50%;
      z-index: 1; }
    .thumbnailGalleryExpanded .item .annotedNotCompleted {
      position: absolute;
      top: 10px;
      left: 10px;
      width: 24px;
      height: 24px;
      text-align: center;
      line-height: 24px;
      background: url(../img/info-mark.svg) center center no-repeat;
      z-index: 1;
      background-color: #f7941d;
      border-radius: 50%; }
    .thumbnailGalleryExpanded .item .itemNumber {
      position: absolute;
      font-style: normal;
      right: 5px;
      top: 10px;
      border-radius: 10px;
      font-size: 10px;
      text-align: center;
      border: 1px solid #c7c7c7;
      color: #676767;
      padding: 0 9px;
      background: gainsboro; }
  .thumbnailGalleryExpanded .active .item {
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); }
  @media (max-width: 480px) {
    .thumbnailGalleryExpanded .owl-item {
      max-width: 46%; } }

.thumbnailGalleryExpanded-active {
  transform: translateY(1%);
  transition: 0.4s ease-in all; }

.hideThumbnails {
  background: #138bfa;
  color: white;
  text-decoration: none;
  transition: all 0.2s ease-in;
  position: absolute;
  top: 15px;
  right: 15px;
  border-radius: 30px;
  padding: 2px 20px; }
  .hideThumbnails:hover {
    opacity: 0.8;
    transition: all 0.2s ease-in;
    text-decoration: none;
    color: white; }
  .hideThumbnails:active {
    color: white !important;
    text-decoration: none !important; }

.obj_thumb_tags_wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  z-index: 9;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  background: rgba(19, 139, 250, 0.9);
  overflow: auto;
  cursor: pointer;
  opacity: 0;
  transition: 0.2s ease-in all; }
  .obj_thumb_tags_wrapper:hover {
    opacity: 1; }

.obj_thumb_tags {
  width: 100%;
  height: auto;
  margin: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding: 10px; }
  .obj_thumb_tags li {
    list-style-type: none;
    background: white;
    padding: 3px 15px;
    border-radius: 25px;
    margin: 5px; }

.test-via-upload-obj img {
  filter: none !important; }

.mobeileVisibleTopBar {
  display: flex !important; }
  @media (max-width: 967px) {
    .mobeileVisibleTopBar {
      height: auto !important; } }
  @media (max-width: 967px) {
    .mobeileVisibleTopBar .trainingAreaButtons {
      flex-direction: column !important;
      width: 100%; } }

.imageDetailTrainingArea .perceptionName {
  max-width: 250px !important; }

@media (max-width: 1024px) {
  .imageDetailTrainingArea .trainingAreaCount h4 {
    font-size: 16px !important;
    overflow: hidden;
    height: 20px; } }

@media (max-width: 1024px) {
  .imageDetailTrainingArea .trainingAreaTopBar {
    display: flex !important;
    height: auto !important;
    flex-direction: column !important; } }

.imageDetailTrainingArea .trainingAreaTopBar .trainingAreaButtons {
  width: 100%; }
  @media (max-width: 1024px) {
    .imageDetailTrainingArea .trainingAreaTopBar .trainingAreaButtons {
      flex-direction: column !important;
      width: 100%;
      padding: 10px 0; } }

@media (max-width: 1024px) {
  .faceDetailTrainingArea .trainingAreaTopBar {
    display: flex !important;
    height: auto !important;
    flex-direction: column !important; } }

@media (max-width: 1024px) {
  .faceDetailTrainingArea .trainingAreaTopBar .trainingAreaCount h4 {
    font-size: 16px !important;
    overflow: hidden;
    height: 20px; } }

@media (max-width: 1024px) {
  .faceDetailTrainingArea .trainingAreaTopBar .trainingAreaButtons {
    flex-direction: column !important;
    width: 100%; } }

@media (max-width: 1024px) {
  .faceDetailTrainingArea .trainingAreaTopBar .createPerceptionBtn {
    margin: 15px 0 !important; } }

.faceDetailTrainingArea .preceptionAreaContent .preceptionAreaTopName {
  word-break: break-word; }

#prediction_file_button {
  max-width: 218px;
  width: 100%; }

.addNewImgVideoBtn {
  min-width: 250px;
  max-width: 250px; }

#facialImageUploadDetail {
  max-width: 213px;
  width: 100%; }

.annotationArea .add_image_button {
  max-width: 200px;
  width: 100%; }

@media (max-width: 1024px) {
  .annotationArea .trainingAreaTopBar {
    display: flex !important;
    flex-direction: column !important; } }

@media (max-width: 1024px) {
  .annotationArea .trainingAreaButtons {
    flex-direction: column !important;
    height: auto !important; } }

@media (max-width: 1024px) {
  .annotationArea #uploadModal.upload-modal-hidden {
    padding: 0 !important;
    bottom: 4px !important; } }

@media (max-width: 1024px) {
  .imageClassDetailTrainingArea #uploadModal.upload-modal-hidden {
    padding: 0 !important;
    right: 0;
    left: 0;
    margin: auto;
    bottom: 20px; } }

.imageClassDetailTrainingArea .deleteAllClassImg .alertTooltip {
  top: 40px;
  left: 0; }

.imageClassDetailTrainingArea #addNewImgVideoBtn .alertTooltip {
  top: 40px;
  right: 0; }

.objectListTrainingArea .trainingAreaTopBar h4 {
  margin-top: 7px; }

.objectListTrainingArea .deepDetect {
  display: inline-block;
  margin-top: -28px; }

.objectListTrainingArea .modalId,
.objectListTrainingArea .modalName,
.objectListTrainingArea .dataset {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block; }

.objectListTrainingArea .modalId {
  max-width: 200px; }

.objectListTrainingArea .modalName,
.objectListTrainingArea .dataset {
  max-width: 450px; }

.objectListTrainingArea .trainingAreaButtons .sharePeople {
  margin-left: 20px; }

.imageDetailTrainingArea h4 b {
  display: inline-block; }

.imageDetailTrainingArea .perceptionName {
  color: #58595b;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  margin-bottom: -4px; }

@media (max-width: 1024px) {
  .objectListTrainingArea .trainingAreaTopBar {
    height: auto !important;
    flex-direction: column;
    display: flex !important; }
  .objectListTrainingArea .trainingAreaCount {
    display: block;
    margin: 20px 0; }
    .objectListTrainingArea .trainingAreaCount h4 {
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      line-height: 30px; } }

@media screen and (min-width: 1025px) and (max-width: 1279px) {
  .trainingAreaTopBar {
    height: auto !important;
    flex-direction: column;
    display: flex !important; }
  .trainingAreaCount {
    display: block;
    margin: 0 0 20px; }
    .trainingAreaCount h4 {
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      line-height: 30px; } }

.dataset-upload-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column; }
  .dataset-upload-placeholder p {
    color: #0087f7;
    font-size: 19px;
    font-weight: 500;
    margin: 5px 0; }
  .dataset-upload-placeholder .uploadIcon img {
    width: 70px;
    height: 40px; }
    @media (max-width: 480px) {
      .dataset-upload-placeholder .uploadIcon img {
        width: 50px;
        height: 45px; } }

.createDatabaseModal {
  padding: 0 !important; }
  .createDatabaseModal .perceptionCreateBtn {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    height: 50px;
    cursor: pointer;
    border-radius: 5px; }
    .createDatabaseModal .perceptionCreateBtn:disabled {
      border-color: #F6F6F7;
      background: #F6F6F7;
      color: #8C9196 !important;
      pointer-events: none;
      opacity: 1; }
  .createDatabaseModal .mCSB_scrollTools_horizontal {
    visibility: hidden; }
  .createDatabaseModal .showScroll .mCSB_scrollTools_horizontal {
    visibility: visible; }
  .createDatabaseModal .uploadedItem {
    margin-bottom: 15px;
    padding: 5px 13px; }

.annotationTrainingArea {
  padding: 0;
  margin-top: 15px;
  box-shadow: none; }
  .annotationTrainingArea .perceptionSearch h3 {
    font-size: 14px; }
    @media (min-width: 1600px) {
      .annotationTrainingArea .perceptionSearch h3 {
        font-size: 18px; } }
  .annotationTrainingArea .trainingMenu {
    width: 250px; }
    .annotationTrainingArea .trainingMenu .viewJob {
      font-size: 14px;
      font-weight: 500;
      color: #138bfa;
      text-decoration: underline;
      margin: -15px 0 0 5px;
      display: inline-block; }
      .annotationTrainingArea .trainingMenu .viewJob:hover, .annotationTrainingArea .trainingMenu .viewJob:focus {
        text-decoration: underline !important; }
    .annotationTrainingArea .trainingMenu ul {
      padding: 0;
      max-width: 230px;
      width: 100%;
      margin: 0 auto; }
      .annotationTrainingArea .trainingMenu ul > li > a {
        text-align: center;
        line-height: 30px;
        padding: 0 0 10px;
        color: #0A2E60; }
    .annotationTrainingArea .trainingMenu ul .active {
      margin-bottom: 0; }
      .annotationTrainingArea .trainingMenu ul .active a {
        background: transparent;
        text-align: left;
        box-shadow: none; }
    .annotationTrainingArea .trainingMenu .extraInfo {
      color: #4E4576;
      font-size: 14px;
      padding: 25px 15px;
      border: 1px solid #F2E9FA;
      border-radius: 0 10px 10px 10px;
      position: relative; }
      .annotationTrainingArea .trainingMenu .extraInfo label {
        background: #F2E9FA;
        border: 1px solid #F2E9FA;
        border-radius: 6px 6px 0px 0px;
        color: #210835;
        font-size: 14px;
        font-weight: 600;
        padding: 5px 15px;
        position: absolute;
        top: -33px;
        left: 0; }
      .annotationTrainingArea .trainingMenu .extraInfo p:last-child {
        margin-bottom: 0; }
    .annotationTrainingArea .trainingMenu .percentageLoad-icon {
      margin-left: 5px;
      display: inline-block;
      visibility: hidden;
      opacity: 0; }
    .annotationTrainingArea .trainingMenu .percentageLoad-icon.show {
      visibility: visible;
      opacity: 1; }
    .annotationTrainingArea .trainingMenu .percentage {
      margin-left: 5px;
      color: #8020CF;
      font-size: 14px; }
    .annotationTrainingArea .trainingMenu .spinnerLoader {
      width: 16px;
      height: 16px; }
    .annotationTrainingArea .trainingMenu .subTitle {
      color: #0A2E60;
      font-family: "Euclid Circular B";
      font-weight: 500;
      font-size: 20px;
      margin: 20px 0; }
    .annotationTrainingArea .trainingMenu .subTitle + p {
      font-size: 14px; }
  .annotationTrainingArea .annotationArea {
    width: calc(100% - 260px);
    border-radius: 6px 6px;
    margin-right: 10px;
    background: #ffffff;
    padding: 10px; }
    @media (max-width: 967px) {
      .annotationTrainingArea .annotationArea {
        width: calc(100%);
        padding-top: 0; } }
    .annotationTrainingArea .annotationArea .trainingAreaTopBar {
      padding: 10px 0;
      height: auto;
      flex-wrap: wrap;
      position: relative;
      z-index: 13; }
      .annotationTrainingArea .annotationArea .trainingAreaTopBar .add_image_button {
        padding: 8px 20px !important; }
    .annotationTrainingArea .annotationArea .imageTypeFilters {
      width: 80px; }
      .annotationTrainingArea .annotationArea .imageTypeFilters img {
        margin: 0 !important; }
      .annotationTrainingArea .annotationArea .imageTypeFilters .customTooltip {
        left: 0;
        right: auto; }
    .annotationTrainingArea .annotationArea .trainingAreaCount {
      display: flex;
      flex-direction: column; }
    .annotationTrainingArea .annotationArea .tagsSearch {
      margin-bottom: 5px;
      margin-top: -15px; }
  .annotationTrainingArea .infoMessage {
    background-color: #f2f2f2;
    /*border: dashed 2px #e6e6e6;*/
    border: none;
    font-size: 1rem;
    font-weight: 400;
    border-radius: 6px;
    width: 75%;
    margin-left: 10px; }
    @media (min-width: 1680px) {
      .annotationTrainingArea .infoMessage {
        width: 76.5%; } }
    @media (max-width: 1366px) {
      .annotationTrainingArea .infoMessage {
        font-size: 14px; } }
    .annotationTrainingArea .infoMessage b {
      line-height: 20px;
      margin-bottom: -6px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 140px;
      display: inline-block;
      font-weight: 400; }
    .annotationTrainingArea .infoMessage div {
      color: #979797;
      font-weight: 400;
      font-size: 14px; }
      .annotationTrainingArea .infoMessage div b {
        color: #595959; }
  .annotationTrainingArea .thumbnailsGrid {
    min-height: 550px;
    margin: 0 -10px 0 0;
    padding-bottom: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
    align-content: flex-start; }
    .annotationTrainingArea .thumbnailsGrid .topbar,
    .annotationTrainingArea .thumbnailsGrid .status,
    .annotationTrainingArea .thumbnailsGrid .actions {
      display: none; }
    .annotationTrainingArea .thumbnailsGrid li {
      height: 145px;
      display: inline-flex;
      justify-content: center;
      align-items: stretch;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.103994);
      margin-right: 10px;
      margin-bottom: 10px;
      position: relative;
      cursor: pointer; }
      .annotationTrainingArea .thumbnailsGrid li .thumbnail img {
        height: 100%;
        width: 100%;
        object-fit: cover; }
      .annotationTrainingArea .thumbnailsGrid li .thumbnail .alertTooltip {
        top: 30px;
        right: 10px;
        height: auto;
        padding: 5px 10px;
        width: 135px;
        white-space: normal;
        border-radius: 10px; }
      @media (max-width: 480px) {
        .annotationTrainingArea .thumbnailsGrid li {
          margin-right: 10px; } }
      .annotationTrainingArea .thumbnailsGrid li .infoContent {
        font-size: 14px;
        color: #0A2E60;
        font-family: "Euclid Circular B";
        font-weight: 500;
        margin: 0;
        padding-left: 10px;
        padding-top: 64px;
        width: 100%;
        height: 100%;
        background: #F6F6F7; }
    .annotationTrainingArea .thumbnailsGrid .thumbnailType {
      position: absolute;
      left: 10px;
      top: 10px;
      width: 24px;
      height: 24px;
      border-radius: 6px;
      font-size: 0; }
    .annotationTrainingArea .thumbnailsGrid .cad {
      background: #fff url(../img/3d-icon-green.svg) center center no-repeat;
      background-size: 16px; }
    .annotationTrainingArea .thumbnailsGrid .mtl {
      background: #fff url(../img/ch-mtl-gray.svg) center center no-repeat;
      left: 50px; }
    .annotationTrainingArea .thumbnailsGrid .syntheticData {
      background: #fff url(../img/ch-synthetic-data-blue.svg) center center no-repeat;
      top: 38px; }
    .annotationTrainingArea .thumbnailsGrid .augmentationIcon {
      background: #fff url(../img/ch-augmentation-blue.svg) center center no-repeat;
      top: 38px; }
    .annotationTrainingArea .thumbnailsGrid .video {
      background: #fff url(../img/icon-play-green.svg) center center no-repeat;
      background-size: 18px; }
    .annotationTrainingArea .thumbnailsGrid .picture {
      background: #fff url(../img/icon-image-purple.svg) center center no-repeat;
      background-size: 18px; }
    .annotationTrainingArea .thumbnailsGrid .playIcon {
      background: #fff url(../img/ch-play-circle-orange.svg) center center no-repeat;
      background-size: 22px; }
    .annotationTrainingArea .thumbnailsGrid .imageIcon {
      background: #fff url(../img/icon-image.svg) center center no-repeat;
      background-size: 22px; }
    .annotationTrainingArea .thumbnailsGrid .annotedCompleted {
      position: absolute;
      bottom: 10px;
      right: 10px;
      width: 24px;
      height: 24px;
      text-align: center;
      line-height: 24px;
      border-radius: 50%;
      z-index: 1;
      background: url(../img/check-icon-circle-green-v2.svg) center center no-repeat;
      background-size: 24px; }
    .annotationTrainingArea .thumbnailsGrid .annotedNotCompleted {
      position: absolute;
      bottom: 10px;
      right: 10px;
      width: 24px;
      height: 24px;
      text-align: center;
      line-height: 24px;
      background: url(../img/missing-icon-circle-red.svg) center center no-repeat;
      background-size: 24px;
      z-index: 1;
      border-radius: 50%; }
    .annotationTrainingArea .thumbnailsGrid .annotationTaskWaiting {
      position: absolute;
      bottom: 10px;
      right: 10px;
      width: 24px;
      height: 24px;
      text-align: center;
      line-height: 24px;
      border-radius: 50%;
      z-index: 1;
      background: #fff url(../img/ch-annotation-task-in-progress.svg) center center no-repeat;
      background-size: 24px; }
    .annotationTrainingArea .thumbnailsGrid .itemNumber {
      position: absolute;
      font-style: normal;
      right: 10px;
      top: 13px;
      border-radius: 20px;
      font-size: 12px;
      text-align: center;
      color: #fff;
      padding: 3px 10px;
      background: #595959; }
    .annotationTrainingArea .thumbnailsGrid .imageBox .status {
      display: block;
      font-size: 0; }
  .annotationTrainingArea .thumbnailsList {
    overflow-x: hidden;
    padding-bottom: 70px;
    display: block; }
    .annotationTrainingArea .thumbnailsList .annotationTaskWaiting,
    .annotationTrainingArea .thumbnailsList .annotedCompleted,
    .annotationTrainingArea .thumbnailsList .annotedNotCompleted {
      position: static;
      display: inline-flex;
      margin-right: 10px; }
    .annotationTrainingArea .thumbnailsList .topbar {
      display: flex;
      padding: 20px 0;
      flex-direction: row;
      white-space: nowrap;
      font-weight: 600;
      font-size: 14px;
      color: #4E4576;
      border-bottom: solid 2px #D8D8D8;
      justify-content: space-between; }
      .annotationTrainingArea .thumbnailsList .topbar span {
        color: #4E4576 !important;
        font-weight: 600 !important; }
    .annotationTrainingArea .thumbnailsList .imageBox .status {
      display: inline-flex;
      font-size: 14px; }
    .annotationTrainingArea .thumbnailsList li {
      width: 100%;
      height: auto;
      margin: 0;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #dcdcdc;
      padding: 10px 0;
      box-shadow: none;
      color: #2C5A99;
      font-size: 14px;
      border-radius: 0px;
      cursor: auto;
      overflow: visible;
      font-weight: 600;
      overflow: visible !important; }
      .annotationTrainingArea .thumbnailsList li .thumbnail {
        width: 10%; }
        .annotationTrainingArea .thumbnailsList li .thumbnail img {
          height: 50px;
          width: 50px;
          border-radius: 8px; }
        .annotationTrainingArea .thumbnailsList li .thumbnail.alertDesable {
          background: transparent; }
          .annotationTrainingArea .thumbnailsList li .thumbnail.alertDesable .alertTooltip {
            left: 75%;
            top: 20px;
            right: 0;
            width: auto;
            white-space: nowrap;
            border-radius: 5px; }
      .annotationTrainingArea .thumbnailsList li .thumbnail.cut-out {
        display: none !important; }
    .annotationTrainingArea .thumbnailsList .thumbnail {
      display: inline-flex;
      justify-content: center;
      align-items: center; }
    .annotationTrainingArea .thumbnailsList .thumbnailType {
      font-size: 14px;
      position: static;
      width: 11%;
      height: auto;
      background: transparent;
      display: inline-flex;
      justify-content: flex-start;
      align-items: center;
      color: #535353; }
    .annotationTrainingArea .thumbnailsList .itemNumber {
      width: 11%;
      position: static;
      background: transparent;
      color: #2C5A99;
      font-size: 14px;
      font-weight: 400;
      padding: 0;
      display: inline-flex;
      justify-content: flex-start;
      align-items: center;
      color: #535353; }
    .annotationTrainingArea .thumbnailsList .brand-checkbox {
      width: 5%;
      float: none;
      padding: 0;
      display: inline-flex;
      justify-content: center;
      align-items: center; }
    .annotationTrainingArea .thumbnailsList .status {
      width: 12%;
      display: inline-flex;
      justify-content: flex-start;
      align-items: center; }
      .annotationTrainingArea .thumbnailsList .status img {
        height: 30px; }
    .annotationTrainingArea .thumbnailsList .actions {
      display: inline-flex;
      align-items: center;
      width: 30%;
      justify-content: flex-end; }
      .annotationTrainingArea .thumbnailsList .actions .customTooltip {
        right: 0;
        top: 25px; }
      .annotationTrainingArea .thumbnailsList .actions .annotateDataset .customTooltip {
        top: 35px; }

.annotedClasess {
  padding: 15px 0px 20px;
  height: 100%; }
  .annotedClasess .mCSB_container {
    padding-bottom: 300px; }
  .annotedClasess .filter_tag {
    background: #ffffff;
    box-sizing: border-box;
    border-radius: 7px;
    display: inline-block;
    margin: 0 auto 20px;
    padding: 10px 15px;
    font-size: 16px;
    font-weight: 500;
    color: #595959;
    width: 100%;
    max-width: 220px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    box-shadow: 0px 4px 12px rgba(133, 130, 130, 0.25);
    position: relative; }
    .annotedClasess .filter_tag:hover {
      color: #595959; }
    .annotedClasess .filter_tag .counterWrapper {
      width: 85%;
      margin-top: 5px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      color: #535353;
      font-size: 14px;
      font-weight: 600; }
      .annotedClasess .filter_tag .counterWrapper img {
        margin-right: 5px; }
      .annotedClasess .filter_tag .counterWrapper .customTooltip {
        font-size: 12px;
        left: -5px;
        top: 25px;
        right: auto; }
      .annotedClasess .filter_tag .counterWrapper .totalImagesCount {
        position: relative;
        margin-right: 20px;
        cursor: pointer; }
        .annotedClasess .filter_tag .counterWrapper .totalImagesCount:hover .customTooltip {
          visibility: visible;
          opacity: 1; }
      .annotedClasess .filter_tag .counterWrapper .totalAnnotationCount {
        position: relative;
        cursor: pointer; }
        .annotedClasess .filter_tag .counterWrapper .totalAnnotationCount img {
          margin-top: -4px; }
        .annotedClasess .filter_tag .counterWrapper .totalAnnotationCount:hover .customTooltip {
          visibility: visible;
          opacity: 1; }
  .annotedClasess .annotedTages {
    display: inline-block; }
    .annotedClasess .annotedTages a {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      max-width: 150px;
      color: #303030;
      display: block;
      font-weight: 600; }
      .annotedClasess .annotedTages a:focus {
        color: #595959 !important; }
      .annotedClasess .annotedTages a .customTooltip {
        font-size: 12px;
        left: 65px;
        top: 35px;
        white-space: initial;
        max-width: 130px;
        word-break: break-all;
        word-wrap: break-word; }
      .annotedClasess .annotedTages a:hover .customTooltip {
        visibility: visible;
        opacity: 1; }
    .annotedClasess .annotedTages .className {
      color: #535353;
      margin-right: 5px;
      font-weight: 400; }
  .annotedClasess label {
    margin-bottom: 0; }
  .annotedClasess .annotationsCount {
    display: flex;
    align-items: center;
    color: #535353; }
  .annotedClasess #mCSB_10_container {
    margin-right: 0; }

.annotation-class-ngtv-pstv-count {
  display: flex;
  position: absolute;
  right: 5px;
  top: 10px; }

.annotateImageGalleryModal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 1005;
  display: flex;
  opacity: 0;
  visibility: hidden;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  align-items: flex-start; }
  @media (max-width: 967px) {
    .annotateImageGalleryModal {
      flex-direction: column; } }
  .annotateImageGalleryModal .status_ {
    background: #E6F2ED;
    box-shadow: 2px 5px 20px rgba(65, 65, 65, 0.8);
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1070;
    position: absolute;
    left: 39%;
    height: 50px;
    min-width: 130px;
    top: 70px;
    font-size: 16px;
    font-weight: 600;
    color: #006C04;
    visibility: hidden;
    opacity: 0; }
    .annotateImageGalleryModal .status_ .icon {
      margin-right: 10px; }
    .annotateImageGalleryModal .status_.alert {
      visibility: visible;
      opacity: 1; }
  .annotateImageGalleryModal .imageCount {
    font-style: normal;
    letter-spacing: 2px;
    display: inline-block;
    margin: 0 20px;
    font-weight: 600; }
  .annotateImageGalleryModal .annotedClasess {
    height: 78%;
    width: 100%;
    padding-bottom: 0;
    margin-bottom: 20px; }
    @media (max-width: 1366px) {
      .annotateImageGalleryModal .annotedClasess {
        height: 70%; } }
    .annotateImageGalleryModal .annotedClasess .annotedTages a {
      max-width: 130px; }
    .annotateImageGalleryModal .annotedClasess p {
      margin: 0; }
  .annotateImageGalleryModal .annotateClassesPanel {
    width: 255px;
    height: 95%;
    background-color: #FAFBFC;
    overflow: hidden;
    padding: 20px 10px 0 15px;
    color: #595959;
    position: relative;
    z-index: 91 !important; }
    .annotateImageGalleryModal .annotateClassesPanel h3 {
      font-size: 18px;
      color: #210835; }
      @media (max-width: 967px) {
        .annotateImageGalleryModal .annotateClassesPanel h3 {
          margin: 0; } }
    .annotateImageGalleryModal .annotateClassesPanel p {
      font-size: 14px;
      color: #4E4576;
      font-weight: 500;
      line-height: 22px; }
      @media (max-width: 967px) {
        .annotateImageGalleryModal .annotateClassesPanel p {
          margin: 0; } }
    .annotateImageGalleryModal .annotateClassesPanel .filter_tag {
      box-shadow: 2px 5px 5px rgba(22, 22, 22, 0.08);
      margin-bottom: 20px; }
      @media (max-width: 967px) {
        .annotateImageGalleryModal .annotateClassesPanel .filter_tag {
          margin-bottom: 10px; } }
    .annotateImageGalleryModal .annotateClassesPanel .filterSelected {
      border: solid 4px #138bfa; }
      .annotateImageGalleryModal .annotateClassesPanel .filterSelected a {
        color: #333333; }
    .annotateImageGalleryModal .annotateClassesPanel .mCSB_inside > .mCSB_container {
      margin-right: 0 !important;
      padding-right: 20px; }
    @media (max-width: 967px) {
      .annotateImageGalleryModal .annotateClassesPanel {
        width: 100%;
        padding: 60px 20px 20px; } }
    .annotateImageGalleryModal .annotateClassesPanel .view_log_class,
    .annotateImageGalleryModal .annotateClassesPanel .view_log_class:active,
    .annotateImageGalleryModal .annotateClassesPanel .view_log_class:focus,
    .annotateImageGalleryModal .annotateClassesPanel .view_log_class:visited {
      color: #8020CF !important;
      font-size: 16px;
      font-weight: 600; }
    .annotateImageGalleryModal .annotateClassesPanel .btnWrapper {
      background: #ffffff;
      border-top: 1px solid #d2d1d1;
      padding: 10px 20px;
      width: 102%;
      margin-left: -20px;
      margin-right: -20px;
      position: absolute;
      bottom: 0;
      display: flex;
      justify-content: center;
      align-items: center; }
      .annotateImageGalleryModal .annotateClassesPanel .btnWrapper button {
        width: 90px;
        height: 37px;
        margin: 10px; }
      .annotateImageGalleryModal .annotateClassesPanel .btnWrapper .alertTooltip {
        top: -60px;
        width: 170px;
        height: auto;
        padding: 5px 10px;
        white-space: normal;
        text-align: left;
        border-radius: 5px; }
      .annotateImageGalleryModal .annotateClassesPanel .btnWrapper #saveButton .alertTooltip {
        left: 0;
        right: auto;
        text-align: left; }
      .annotateImageGalleryModal .annotateClassesPanel .btnWrapper #skipButton .alertTooltip {
        right: 0;
        left: auto;
        text-align: left; }
    .annotateImageGalleryModal .annotateClassesPanel .optionItems {
      width: 190px;
      padding: 0; }
      .annotateImageGalleryModal .annotateClassesPanel .optionItems a {
        font-size: 15px;
        height: 38px;
        padding: 10px 10px 10px 45px; }
  .annotateImageGalleryModal .annotateImageGallery {
    width: calc(100% - 255px);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 95%;
    /*overflow: hidden;*/ }
    @media (max-width: 967px) {
      .annotateImageGalleryModal .annotateImageGallery {
        width: 100%; } }
  .annotateImageGalleryModal .imageViewArea {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    width: 100% !important;
    height: 100% !important;
    background-color: #ffffff; }
    .annotateImageGalleryModal .imageViewArea .imageViewArea {
      padding: 10px 65px 60px; }
      @media (max-width: 1400px) {
        .annotateImageGalleryModal .imageViewArea .imageViewArea {
          padding: 20px; } }
    .annotateImageGalleryModal .imageViewArea video {
      right: 0;
      margin: 0 auto; }
    .annotateImageGalleryModal .imageViewArea .toolbar {
      font-size: 0;
      display: flex;
      position: absolute !important;
      bottom: 25px;
      z-index: 999; }
      .annotateImageGalleryModal .imageViewArea .toolbar .closeFullscreen {
        display: none; }
      .annotateImageGalleryModal .imageViewArea .toolbar > div {
        display: inline-flex;
        align-items: center; }
      .annotateImageGalleryModal .imageViewArea .toolbar div > div {
        position: relative !important; }
      .annotateImageGalleryModal .imageViewArea .toolbar div > div > div > div > div {
        margin: 0 15px !important;
        cursor: pointer; }
        .annotateImageGalleryModal .imageViewArea .toolbar div > div > div > div > div:nth-child(4) {
          display: none !important; }
      .annotateImageGalleryModal .imageViewArea .toolbar div[title='Toggle full page'] img,
      .annotateImageGalleryModal .imageViewArea .toolbar div[title='Go home'] img,
      .annotateImageGalleryModal .imageViewArea .toolbar div[title='Zoom out'] img,
      .annotateImageGalleryModal .imageViewArea .toolbar div[title='Zoom in'] img {
        display: none; }
      .annotateImageGalleryModal .imageViewArea .toolbar div[title='Toggle full page'] img:first-child,
      .annotateImageGalleryModal .imageViewArea .toolbar div[title='Go home'] img:first-child,
      .annotateImageGalleryModal .imageViewArea .toolbar div[title='Zoom out'] img:first-child,
      .annotateImageGalleryModal .imageViewArea .toolbar div[title='Zoom in'] img:first-child {
        display: block; }
    .annotateImageGalleryModal .imageViewArea .galleryControl {
      z-index: 9;
      margin-top: -100px;
      top: 50%;
      position: absolute;
      width: 100%;
      padding: 0 20px;
      display: flex;
      justify-content: space-between; }
      .annotateImageGalleryModal .imageViewArea .galleryControl a {
        cursor: pointer;
        display: inline-flex;
        flex-direction: column;
        color: #595959;
        font-size: 14px;
        font-weight: 600; }
        .annotateImageGalleryModal .imageViewArea .galleryControl a img {
          margin-bottom: 20px; }
    .annotateImageGalleryModal .imageViewArea .btnWrapper {
      position: absolute;
      bottom: 20px;
      right: 60px;
      width: auto;
      z-index: 999;
      display: flex;
      justify-content: flex-end; }
      .annotateImageGalleryModal .imageViewArea .btnWrapper .saveBtn {
        min-width: 120px;
        height: 26px; }
        .annotateImageGalleryModal .imageViewArea .btnWrapper .saveBtn.disable {
          opacity: 1;
          background-color: #F1F1F1;
          color: #8C9196;
          box-shadow: 0px 2px 5px rgba(40, 40, 40, 0.1); }
  .annotateImageGalleryModal .videoViewArea {
    justify-content: flex-start; }
    .annotateImageGalleryModal .videoViewArea .videoScreen {
      background-color: #ffffff;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      position: relative;
      padding: 20px 60px; }
    .annotateImageGalleryModal .videoViewArea img {
      max-width: 100%;
      max-height: 100%;
      margin: 0 auto;
      display: block;
      width: 100%;
      height: 100%; }
  .annotateImageGalleryModal .closeAnnotateModal {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 49px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; }
    .annotateImageGalleryModal .closeAnnotateModal .customTooltip {
      top: 40px;
      right: 0; }
  .annotateImageGalleryModal .videoViewArea .annotorious-annotationlayer {
    position: absolute !important;
    z-index: 100 !important;
    height: 92%;
    width: 92%;
    margin: 0 auto;
    left: 0;
    right: 0; }
  .annotateImageGalleryModal .annotorious-opacity-fade {
    height: 100% !important;
    width: 100% !important;
    padding: 5px; }
  .annotateImageGalleryModal .vjs-text-track-display {
    bottom: 0 !important; }
  .annotateImageGalleryModal .topToolBar {
    width: 100%;
    height: 52px;
    background-color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #4E4576;
    font-size: 16px;
    font-weight: 600;
    font-style: normal;
    z-index: 999;
    box-shadow: 2px 5px 20px rgba(65, 65, 65, 0.08); }
    .annotateImageGalleryModal .topToolBar .closeFullscreen {
      display: none; }
    .annotateImageGalleryModal .topToolBar .imageTitle {
      display: none; }
    .annotateImageGalleryModal .topToolBar .btnPrev,
    .annotateImageGalleryModal .topToolBar .btnNext {
      cursor: pointer;
      display: inline-flex; }
    .annotateImageGalleryModal .topToolBar .btnPrev img {
      margin-right: 10px; }
    .annotateImageGalleryModal .topToolBar .btnNext img {
      margin-left: 10px; }
    .annotateImageGalleryModal .topToolBar .optionLeft {
      width: 25%;
      height: 52px;
      display: inline-flex;
      justify-content: flex-start;
      align-items: center;
      padding-left: 40px;
      visibility: hidden;
      opacity: 0; }
      .annotateImageGalleryModal .topToolBar .optionLeft button {
        padding: 5px 10px;
        border-radius: 6px 6px 0 0; }
        .annotateImageGalleryModal .topToolBar .optionLeft button img {
          margin-right: 10px; }
        .annotateImageGalleryModal .topToolBar .optionLeft button.active {
          background: #ffe7ca; }
    .annotateImageGalleryModal .topToolBar .rangeSlider {
      position: relative;
      border-radius: 6px 6px 0 0;
      height: 3px; }
      .annotateImageGalleryModal .topToolBar .rangeSlider .rangeValue {
        width: 30px;
        display: inline-flex; }
      .annotateImageGalleryModal .topToolBar .rangeSlider .rangebtn {
        display: flex;
        align-items: center;
        border-radius: 6px; }
      .annotateImageGalleryModal .topToolBar .rangeSlider .rangeSliderInner {
        position: absolute;
        background: #ffe7ca;
        width: 100%;
        left: 0;
        padding: 10px 10px 15px;
        top: 32px;
        border-radius: 0 0 6px 6px;
        visibility: hidden;
        opacity: 0;
        display: flex;
        justify-content: center; }
        .annotateImageGalleryModal .topToolBar .rangeSlider .rangeSliderInner .inputRange {
          height: 120px;
          background: transparent;
          appearance: none;
          -webkit-appearance: none;
          -moz-appearance: none;
          height: 120px;
          border-radius: 5px;
          /*! background: #ccc; */
          outline: none;
          writing-mode: bt-lr;
          /* IE */
          -webkit-appearance: slider-horizontal;
          /* WebKit */ }
      .annotateImageGalleryModal .topToolBar .rangeSlider input[type='range']::-webkit-slider-runnable-track {
        height: 3px;
        background: #2e1b05;
        border: 0; }
      .annotateImageGalleryModal .topToolBar .rangeSlider input[type='range']::-moz-range-track {
        background: #2e1b05;
        border: 0; }
      .annotateImageGalleryModal .topToolBar .rangeSlider input::-moz-focus-inner,
      .annotateImageGalleryModal .topToolBar .rangeSlider input::-webkit-focus-inner {
        border: 0; }
      .annotateImageGalleryModal .topToolBar .rangeSlider input[type='range']::-webkit-slider-thumb {
        cursor: pointer;
        -webkit-appearance: none;
        margin-top: -6px;
        background: #ffffff;
        width: 16px;
        height: 16px;
        border-radius: 40px;
        border: 3px solid #eb5857; }
      .annotateImageGalleryModal .topToolBar .rangeSlider input[type='range']::-moz-range-thumb {
        background: #f7941d;
        width: 16px;
        height: 16px;
        border-radius: 40px;
        border: 0; }
      .annotateImageGalleryModal .topToolBar .rangeSlider.active {
        background: #ffe7ca; }
        .annotateImageGalleryModal .topToolBar .rangeSlider.active .rangeSliderInner {
          visibility: visible;
          opacity: 1; }
        .annotateImageGalleryModal .topToolBar .rangeSlider.active .rangebtn {
          background: #ffe7ca; }
    .annotateImageGalleryModal .topToolBar .optionCenter {
      display: inline-flex;
      align-items: center;
      margin: 0 auto;
      transform: translateX(20%); }
      .annotateImageGalleryModal .topToolBar .optionCenter .itemNumber {
        font-style: normal;
        letter-spacing: 1px; }
    .annotateImageGalleryModal .topToolBar .optionRight {
      position: relative;
      height: 52px;
      margin-right: 50px;
      display: inline-flex;
      justify-content: flex-end;
      align-items: center;
      margin-left: auto; }
      .annotateImageGalleryModal .topToolBar .optionRight .option {
        margin: 0 5px;
        padding: 8px 10px;
        border-radius: 4px; }
      .annotateImageGalleryModal .topToolBar .optionRight .keyboardBtn {
        /*background: $blue;*/ }
      .annotateImageGalleryModal .topToolBar .optionRight .alertTooltip,
      .annotateImageGalleryModal .topToolBar .optionRight .customTooltip {
        top: 35px;
        right: 0; }
      .annotateImageGalleryModal .topToolBar .optionRight .toolbar {
        font-size: 0;
        display: flex; }
        .annotateImageGalleryModal .topToolBar .optionRight .toolbar > div {
          display: inline-flex;
          align-items: center; }
        .annotateImageGalleryModal .topToolBar .optionRight .toolbar div > div {
          position: relative !important; }
        .annotateImageGalleryModal .topToolBar .optionRight .toolbar div > div > div > div > div {
          margin: 0 15px !important;
          cursor: pointer; }
          .annotateImageGalleryModal .topToolBar .optionRight .toolbar div > div > div > div > div:nth-child(3) {
            margin-right: 40px !important; }
          .annotateImageGalleryModal .topToolBar .optionRight .toolbar div > div > div > div > div:nth-child(4) {
            display: none !important; }
          .annotateImageGalleryModal .topToolBar .optionRight .toolbar div > div > div > div > div:nth-child(3):after {
            width: 1px;
            height: 35px;
            background: #595959;
            position: absolute;
            right: -25px;
            top: -8px;
            content: ''; }
        .annotateImageGalleryModal .topToolBar .optionRight .toolbar div[title='Toggle full page'] img,
        .annotateImageGalleryModal .topToolBar .optionRight .toolbar div[title='Go home'] img,
        .annotateImageGalleryModal .topToolBar .optionRight .toolbar div[title='Zoom out'] img,
        .annotateImageGalleryModal .topToolBar .optionRight .toolbar div[title='Zoom in'] img {
          display: none; }
        .annotateImageGalleryModal .topToolBar .optionRight .toolbar div[title='Toggle full page'] img:first-child,
        .annotateImageGalleryModal .topToolBar .optionRight .toolbar div[title='Go home'] img:first-child,
        .annotateImageGalleryModal .topToolBar .optionRight .toolbar div[title='Zoom out'] img:first-child,
        .annotateImageGalleryModal .topToolBar .optionRight .toolbar div[title='Zoom in'] img:first-child {
          display: block; }
    .annotateImageGalleryModal .topToolBar a,
    .annotateImageGalleryModal .topToolBar button {
      padding: 0;
      margin: 0;
      background: transparent;
      border: 0;
      cursor: pointer; }
  .annotateImageGalleryModal .footerNav {
    position: absolute;
    bottom: 20px;
    height: 60px;
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center; }
    @media (max-width: 1024px) {
      .annotateImageGalleryModal .footerNav {
        width: 100%; } }
    @media (max-width: 967px) {
      .annotateImageGalleryModal .footerNav {
        position: static; } }
    @media (min-width: 1680px) {
      .annotateImageGalleryModal .footerNav {
        bottom: 40px; } }
    .annotateImageGalleryModal .footerNav button {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: transparent;
      border: 0;
      padding: 0; }
    .annotateImageGalleryModal .footerNav .imageTitle {
      min-width: 200px;
      max-width: 400px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 1rem;
      color: #333;
      box-shadow: 0 3px 4px #999;
      background-color: #fff;
      border-radius: 50px;
      padding: 5px 15px;
      height: 40px;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      margin: 0 20px;
      font-weight: 500;
      display: none; }
  .annotateImageGalleryModal .options {
    width: 40px;
    position: absolute;
    top: 150px;
    right: 10px; }
    @media (min-width: 1680px) {
      .annotateImageGalleryModal .options {
        right: 20px; } }
    .annotateImageGalleryModal .options .option {
      border: 0;
      background-color: #fff;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 20px;
      position: relative;
      padding: 0; }
      @media (max-width: 967px) {
        .annotateImageGalleryModal .options .option {
          margin: 0 10px; } }
      .annotateImageGalleryModal .options .option .icon {
        position: relative;
        z-index: 2;
        width: 40px;
        height: 40px;
        background-color: #fff;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center; }
        .annotateImageGalleryModal .options .option .icon img {
          filter: invert(65%) sepia(28%) saturate(2764%) hue-rotate(348deg) brightness(101%) contrast(94%); }
      .annotateImageGalleryModal .options .option .optionName {
        position: absolute;
        right: 0;
        top: 0;
        color: #333;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s;
        width: 40px;
        height: 40px;
        border-radius: 50px;
        padding-left: 20px;
        padding-right: 40px;
        background-color: #fff;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        white-space: nowrap;
        font-weight: 500; }
      .annotateImageGalleryModal .options .option:hover .optionName {
        opacity: 1;
        visibility: visible;
        width: 175px; }
        @media (max-width: 967px) {
          .annotateImageGalleryModal .options .option:hover .optionName {
            opacity: 0;
            visibility: hidden; } }
    .annotateImageGalleryModal .options .editImage .icon img {
      filter: none; }
    @media (max-width: 967px) {
      .annotateImageGalleryModal .options {
        width: 100%;
        right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        left: 0;
        top: 20px; } }
    @media (max-width: 480px) {
      .annotateImageGalleryModal .options {
        top: 10px; } }
  .annotateImageGalleryModal .videoPlayerDashboard {
    background-color: #ffffff;
    padding: 10px 60px 30px;
    width: 100%;
    margin-top: 20px;
    z-index: 9; }
    @media (max-width: 1200px) {
      .annotateImageGalleryModal .videoPlayerDashboard {
        padding: 10px; } }
    .annotateImageGalleryModal .videoPlayerDashboard h5 {
      font-weight: 600;
      font-size: 18px;
      color: #210835;
      height: 30px;
      display: flex;
      align-items: center; }
    .annotateImageGalleryModal .videoPlayerDashboard .timeinfoIcon {
      width: 18px;
      display: inline-block;
      margin-left: 10px; }
      .annotateImageGalleryModal .videoPlayerDashboard .timeinfoIcon .customTooltip {
        font-style: normal;
        top: 25px;
        left: -10px; }
    .annotateImageGalleryModal .videoPlayerDashboard .actions {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 15px;
      position: relative; }
      @media (max-width: 1400px) {
        .annotateImageGalleryModal .videoPlayerDashboard .actions {
          margin-bottom: 10px; } }
    .annotateImageGalleryModal .videoPlayerDashboard .videoPlayBar {
      display: flex;
      align-items: flex-end;
      justify-content: space-between; }
      .annotateImageGalleryModal .videoPlayerDashboard .videoPlayBar .irs--flat {
        width: 95%; }
    .annotateImageGalleryModal .videoPlayerDashboard label {
      color: #535353;
      margin: 0;
      font-size: 16px;
      margin-left: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: 500;
      padding-right: 10px; }
      @media (max-width: 1400px) {
        .annotateImageGalleryModal .videoPlayerDashboard label {
          margin-left: 10px; } }
    .annotateImageGalleryModal .videoPlayerDashboard .startEndTime {
      display: flex; }
      .annotateImageGalleryModal .videoPlayerDashboard .startEndTime .time {
        background: #F7F7F7;
        border-radius: 5px;
        font-size: 16px;
        font-weight: 600;
        color: #303030;
        width: 60px;
        height: 36px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #E0E0E0;
        text-align: center; }
    .annotateImageGalleryModal .videoPlayerDashboard .playTime {
      color: #8020CF;
      margin-left: 20px;
      font-weight: 600;
      display: none; }
      .annotateImageGalleryModal .videoPlayerDashboard .playTime span {
        color: #a7a6a6; }
    .annotateImageGalleryModal .videoPlayerDashboard .startAnnotateBtn {
      font-weight: 500;
      height: 36px;
      font-size: 15px;
      color: #fff;
      padding: 0 20px;
      display: block;
      background: #8020CF;
      box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.08), inset 0px -1px 0px rgba(0, 0, 0, 0.2);
      border-radius: 10px;
      border: 0;
      margin-left: auto; }
      .annotateImageGalleryModal .videoPlayerDashboard .startAnnotateBtn:disabled {
        color: #B7B7B7;
        background: #F7F7F7; }
      .annotateImageGalleryModal .videoPlayerDashboard .startAnnotateBtn.alertDesable {
        background-color: #8020CF; }
        .annotateImageGalleryModal .videoPlayerDashboard .startAnnotateBtn.alertDesable .alertTooltip {
          top: auto;
          bottom: 40px;
          right: 10px; }
  .annotateImageGalleryModal .hideBar {
    margin-top: 0; }
  .annotateImageGalleryModal .annotateVideoGallery {
    justify-content: flex-start; }
    .annotateImageGalleryModal .annotateVideoGallery .imageViewArea .toolbar {
      display: none; }

.toolbar.fullpage {
  font-size: 0;
  display: flex; }
  .toolbar.fullpage .closeFullscreen {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    position: fixed;
    right: 0;
    top: 10px;
    cursor: pointer;
    z-index: 2; }
  .toolbar.fullpage div > div {
    z-index: 9;
    cursor: pointer; }
  .toolbar.fullpage div > div > div > div > div {
    margin: 15px 0 0 30px !important; }
    .toolbar.fullpage div > div > div > div > div:first-child {
      margin-left: 20px !important; }
  .toolbar.fullpage div[title='Toggle full page'] img,
  .toolbar.fullpage div[title='Go home'] img,
  .toolbar.fullpage div[title='Zoom out'] img,
  .toolbar.fullpage div[title='Zoom in'] img {
    display: none; }
  .toolbar.fullpage div[title='Toggle full page'] img:first-child,
  .toolbar.fullpage div[title='Go home'] img:first-child,
  .toolbar.fullpage div[title='Zoom out'] img:first-child,
  .toolbar.fullpage div[title='Zoom in'] img:first-child {
    display: block;
    filter: invert(99%) sepia(15%) saturate(580%) hue-rotate(265deg) brightness(200%) contrast(100%); }

.overflowHidden {
  overflow-y: hidden; }

body.overflowHidden {
  overflow-y: hidden !important; }

.class-count-warning {
  display: flex;
  flex-direction: row;
  font-size: 13px;
  font-weight: 500;
  align-items: center;
  justify-content: center;
  border: 2px dashed #ffff;
  border-radius: 30px;
  padding: 10px 5px;
  background: #ffd63f;
  box-shadow: -10px 0px 10px rgba(0, 0, 0, 0.1);
  margin-top: 17px; }
  .class-count-warning img {
    width: 20px;
    margin-right: 12px; }

.deleteAnnotatinClass {
  margin-left: 10px;
  margin-bottom: 0; }
  .deleteAnnotatinClass img {
    width: 19px;
    cursor: pointer; }

.renameAnnotatinClass {
  margin-left: 10px;
  margin-bottom: 0; }
  .renameAnnotatinClass img {
    width: 19px;
    cursor: pointer; }

.perceptionsDisableAll .deleteModal_inner h5 {
  margin-bottom: 20px;
  color: #138bfa; }

.perceptionsDisableAll .deleteModal_inner p {
  font-size: 18px;
  color: #4a4a4a;
  font-weight: 400; }

@media (max-width: 967px) {
  #prediction_file_button,
  #facialImageUploadDetail {
    max-width: 320px; }
  .trainingAreaTopBar {
    height: auto !important; }
    .trainingAreaTopBar .trainingAreaCount {
      display: none; }
    .trainingAreaTopBar .trainingAreaButtons {
      width: 100%;
      margin: 10px 0 0;
      border-bottom: solid 1px #ededed;
      margin-bottom: 10px;
      flex-wrap: wrap; }
      .trainingAreaTopBar .trainingAreaButtons .blue-border-button,
      .trainingAreaTopBar .trainingAreaButtons .blue-button {
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 15px;
        max-width: 320px;
        width: 100%; }
      .trainingAreaTopBar .trainingAreaButtons #uploadModal {
        width: 100%;
        left: 0;
        margin: 0 auto 10px !important; }
      .trainingAreaTopBar .trainingAreaButtons .noFileWarn_one {
        position: static;
        font-size: 20px;
        margin-bottom: 10px; } }

@media (max-width: 480px) {
  .mobTitleBar {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start; }
    .mobTitleBar h4 span {
      display: inline-block; }
  .infoMessage {
    height: auto;
    flex-direction: column; }
    .infoMessage .annotation_obj_number,
    .infoMessage .annotation_obj_total {
      position: static; }
  .deleteModal br {
    display: none; }
  .deleteModal .deleteWarnOptions {
    flex-direction: column; } }

@media screen and (max-width: 400px) {
  .preTrainedPreception .perceptionSearch {
    padding: 0 12px; } }

.rawDataContentArea .rawTrainingDataArea .eachPreceptionAreaContent a {
  color: #58595b;
  word-break: break-word; }

.rawDataContentArea .rawTrainingDataArea .preceptionAreaTopThumbil {
  width: 15%;
  text-align: center;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center; }
  .rawDataContentArea .rawTrainingDataArea .preceptionAreaTopThumbil img {
    max-height: 65px; }
  .rawDataContentArea .rawTrainingDataArea .preceptionAreaTopThumbil .videoPlaybuttonImg {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    background: url(../img/play-button.svg) center center no-repeat;
    background-size: 35px; }

.rawDataContentArea .rawTrainingDataArea .preceptionAreaTopId {
  width: 10%; }

.rawDataContentArea .rawTrainingDataArea .instructions {
  color: #138bfa;
  width: 30%; }

.rawDataContentArea .rawTrainingDataArea .preceptionOwner {
  width: 6%;
  position: relative; }
  .rawDataContentArea .rawTrainingDataArea .preceptionOwner .email {
    max-width: 100px;
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden; }
    @media (min-width: 1400px) {
      .rawDataContentArea .rawTrainingDataArea .preceptionOwner .email {
        max-width: 160px; } }
    .rawDataContentArea .rawTrainingDataArea .preceptionOwner .email .customTooltip {
      top: 25px;
      left: 10px;
      pointer-events: auto; }
    .rawDataContentArea .rawTrainingDataArea .preceptionOwner .email:hover .customTooltip {
      visibility: visible;
      opacity: 1; }
  .rawDataContentArea .rawTrainingDataArea .preceptionOwner .sharedWithPeopleThumbs {
    cursor: default; }

.rawDataContentArea .rawTrainingDataArea .fileName {
  width: 25%;
  justify-content: flex-start; }

.rawDataContentArea .rawTrainingDataArea .infoIcon {
  display: inline-block;
  margin-left: 5px;
  width: 24px; }
  .rawDataContentArea .rawTrainingDataArea .infoIcon .customTooltip {
    top: -5px;
    left: 25px;
    line-height: 22px;
    font-weight: 400; }
    @media (max-width: 480px) {
      .rawDataContentArea .rawTrainingDataArea .infoIcon .customTooltip {
        top: 25px;
        left: -70px;
        white-space: normal;
        width: 310px;
        right: auto;
        line-height: initial;
        border-radius: 10px;
        padding: 5px 10px; } }

.rawDataContentArea .preceptionAreaTopActions a {
  margin: 0 10px;
  width: 25px;
  height: 20px;
  display: inline-flex;
  justify-content: center;
  align-items: flex-end; }
  @media (max-width: 480px) {
    .rawDataContentArea .preceptionAreaTopActions a {
      margin: 0 5px; } }

.rawDataContentArea .eachPreceptionAreaContent.nonSelected {
  opacity: 1; }

.rawDataContentArea .eachPreceptionAreaContent.selected {
  opacity: 1;
  background: #FAF5FF; }

.rawDataButton {
  padding: 0 !important;
  box-shadow: none; }

.createDatasetPopup .createDataset {
  position: relative;
  width: 100%;
  padding: 10px 40px; }
  @media (max-width: 480px) {
    .createDatasetPopup .createDataset {
      padding: 0 30px; } }
  .createDatasetPopup .createDataset .label {
    font-size: 16px;
    font-weight: 600;
    line-height: 16px;
    color: #595959;
    background-color: #fff; }
  .createDatasetPopup .createDataset .label:is(p) {
    font-size: 14px;
    font-weight: 600;
    color: #595959; }
  .createDatasetPopup .createDataset .note:is(p) {
    font-size: 16px;
    font-weight: 600;
    color: #595959; }
  .createDatasetPopup .createDataset .form-group {
    position: relative; }
    .createDatasetPopup .createDataset .form-group label {
      font-size: 14px;
      font-weight: 600;
      display: block; }
  .createDatasetPopup .createDataset .form-control {
    background: #F7F7F7;
    border: 1px solid #E0E0E0;
    border-radius: 5px;
    height: 50px;
    width: 100% !important;
    margin-bottom: 30px; }
  .createDatasetPopup .createDataset .form-control.instructions {
    height: 120px;
    resize: none;
    border-radius: 5px; }
  .createDatasetPopup .createDataset .createDatasetbutton {
    width: 100%;
    height: 44px;
    font-size: 14px;
    margin-top: 30px;
    border-radius: 10px; }
    .createDatasetPopup .createDataset .createDatasetbutton:disabled {
      background: #F6F6F7;
      border-color: #F6F6F7;
      color: #8C9196 !important;
      pointer-events: none;
      opacity: 1; }

.createDatasetPopup .modal-dialog {
  max-width: 650px; }

.createDatasetPopup .radio {
  margin-bottom: 10px; }
  .createDatasetPopup .radio label {
    position: static;
    display: inline-block;
    color: #636363;
    font-weight: 500;
    font-size: 16px;
    padding-left: 0; }
  .createDatasetPopup .radio .radio-inline {
    line-height: 25px;
    font-size: 14px;
    color: #9b9b9b;
    cursor: pointer;
    margin-left: 10px; }
  .createDatasetPopup .radio .notSelected {
    opacity: 0.5; }
  .createDatasetPopup .radio .selected {
    opacity: 1; }

.createDatasetPopup .trainingDataGroup {
  display: none; }

.createDatasetPopup .multiselect-native-select .multiselect,
.createDatasetPopup .multiselect-native-select .btn-group {
  width: 100%;
  background: transparent;
  text-align: left; }

.createDatasetPopup .multiselect-native-select .btn-group {
  border: 1px solid #9b9b9b;
  border-radius: 26px; }

.createDatasetPopup .multiselect-native-select .multiselect-selected-text {
  width: 96%;
  display: inline-block;
  color: #58595b; }

.createDatasetPopup .multiselect-native-select .multiselect-container {
  position: absolute !important;
  width: 100%;
  padding: 10px; }
  .createDatasetPopup .multiselect-native-select .multiselect-container li {
    margin-bottom: 5px; }
  .createDatasetPopup .multiselect-native-select .multiselect-container label.checkbox {
    position: static;
    color: #58595b;
    padding-left: 10px;
    width: 100%; }
  .createDatasetPopup .multiselect-native-select .multiselect-container input[type='checkbox'] {
    margin-right: 5px; }
  .createDatasetPopup .multiselect-native-select .multiselect-container .dropdown-toggle:after {
    border-top-color: #58595b; }

.createDatasetPopup .multiselect-native-select .btn:focus {
  box-shadow: none; }

.createDatasetPopup .dropzone-scale-dataset,
.createDatasetPopup .dropzone-scale-dataset .dropzone {
  height: 200px !important; }

.uploadMedia {
  padding-right: 0 !important; }
  .uploadMedia .info .customTooltip {
    left: -70px;
    top: 25px;
    min-width: 300px;
    padding: 10px;
    white-space: normal; }
  .uploadMedia .createDataset {
    position: relative;
    width: 100%;
    padding: 10px 30px 0; }
    @media (max-width: 967px) {
      .uploadMedia .createDataset {
        padding: 0 30px; } }
    .uploadMedia .createDataset .form-group {
      position: relative; }
      .uploadMedia .createDataset .form-group label {
        font-size: 16px;
        font-weight: 500;
        color: #210835;
        display: block; }
    .uploadMedia .createDataset .form-control {
      background: #F7F7F7;
      border: 1px solid #E0E0E0;
      border-radius: 5px;
      height: 50px;
      font-size: 14px;
      width: 100% !important;
      margin-bottom: 30px;
      color: #4E4576;
      text-overflow: ellipsis; }
    .uploadMedia .createDataset .videorUrl {
      margin-bottom: 5px;
      padding-right: 40px;
      display: inline-block;
      overflow: hidden; }
      .uploadMedia .createDataset .videorUrl:focus {
        box-shadow: 0 0 0 2px #8020CF !important;
        color: #4E4576; }
      .uploadMedia .createDataset .videorUrl.urlValid {
        border-color: #36B37E;
        background: #FAFBFC url(../img/check-dark-green.svg) 97% center no-repeat;
        box-shadow: 0 0 0 1px #36B37E !important; }
      .uploadMedia .createDataset .videorUrl.urlNotValid {
        border-color: #FF7452;
        box-shadow: 0 0 0 1px #FF7452 !important;
        margin: 0;
        background: none; }
    .uploadMedia .createDataset .errorText {
      display: none;
      font-size: 14px;
      font-weight: 400;
      color: #EB5857;
      margin-bottom: 0; }
    .uploadMedia .createDataset .urlNotValid ~ .errorText {
      display: block; }
    .uploadMedia .createDataset .removeError {
      display: none;
      box-shadow: none;
      border: none; }
    .uploadMedia .createDataset .urlNotValid ~ .removeError {
      background: url(../img/close-red.svg) center center no-repeat;
      display: block;
      width: 20px;
      height: 20px;
      position: absolute;
      right: 15px;
      top: 47px; }
    .uploadMedia .createDataset .supportedFiles {
      margin: 0;
      font-size: 14px;
      font-weight: 400;
      margin-top: 4px;
      color: #210835; }
      .uploadMedia .createDataset .supportedFiles em {
        color: #FF0000;
        font-style: normal; }
    .uploadMedia .createDataset .instructions {
      height: 120px;
      resize: none;
      margin: 0;
      padding: 10px; }
      .uploadMedia .createDataset .instructions:focus {
        box-shadow: none; }
    .uploadMedia .createDataset .createDatasetbutton {
      width: 100%;
      height: 44px;
      font-size: 14px;
      margin-top: 30px;
      font-weight: 500; }
      .uploadMedia .createDataset .createDatasetbutton:disabled {
        background: #F6F6F7;
        border-color: #F6F6F7;
        color: #8C9196 !important;
        pointer-events: none;
        opacity: 1; }
    .uploadMedia .createDataset .or {
      text-align: center;
      font-size: 16px;
      font-weight: 600;
      margin-top: 20px;
      margin-bottom: 20px;
      padding: 0;
      color: #2C5A99;
      text-transform: uppercase;
      position: relative; }
      .uploadMedia .createDataset .or:before {
        width: 580px;
        height: 1px;
        background: #D8D8D8;
        position: absolute;
        top: 55%;
        left: -30px;
        right: 0;
        content: ''; }
      .uploadMedia .createDataset .or span {
        padding: 10px;
        background: #ffffff;
        color: #535353;
        position: relative; }
    .uploadMedia .createDataset .togglebtnWrapper .labelText {
      margin-right: 0;
      margin-left: 0;
      font-weight: 500; }
    .uploadMedia .createDataset .advancedSettings {
      cursor: pointer;
      background: url(../img/down-arrow-light-gray.svg) 98% center no-repeat; }
      .uploadMedia .createDataset .advancedSettings.open {
        background: url(../img/up-arrow-light-gray.svg) 98% center no-repeat; }
    .uploadMedia .createDataset .minMaxGroup {
      display: none; }
  .uploadMedia .modal-dialog {
    max-width: 580px; }
  .uploadMedia .radio {
    margin-bottom: 10px; }
    .uploadMedia .radio label {
      position: static;
      display: inline-block;
      color: #636363;
      font-weight: 500;
      font-size: 16px;
      padding-left: 0; }
    .uploadMedia .radio .radio-inline {
      line-height: 25px;
      font-size: 14px;
      color: #9b9b9b;
      cursor: pointer;
      margin-left: 10px; }
    .uploadMedia .radio .notSelected {
      opacity: 0.5; }
    .uploadMedia .radio .selected {
      opacity: 1; }
  .uploadMedia .trainingDataGroup {
    display: none; }
  .uploadMedia .multiselect-native-select .multiselect,
  .uploadMedia .multiselect-native-select .btn-group {
    width: 100%;
    background: transparent;
    text-align: left; }
  .uploadMedia .multiselect-native-select .btn-group {
    border: 1px solid #9b9b9b;
    border-radius: 26px; }
  .uploadMedia .multiselect-native-select .multiselect-selected-text {
    width: 96%;
    display: inline-block;
    color: #58595b; }
  .uploadMedia .multiselect-native-select .multiselect-container {
    position: absolute !important;
    width: 100%;
    padding: 10px; }
    .uploadMedia .multiselect-native-select .multiselect-container li {
      margin-bottom: 5px; }
    .uploadMedia .multiselect-native-select .multiselect-container label.checkbox {
      position: static;
      color: #58595b;
      padding-left: 10px;
      width: 100%; }
    .uploadMedia .multiselect-native-select .multiselect-container input[type='checkbox'] {
      margin-right: 5px; }
    .uploadMedia .multiselect-native-select .multiselect-container .dropdown-toggle:after {
      border-top-color: #58595b; }
  .uploadMedia .multiselect-native-select .btn:focus {
    box-shadow: none; }
  .uploadMedia .uploadFileBtn {
    min-width: 110px;
    height: 30px;
    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.08), inset 0px -1px 0px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    margin: 0 auto;
    display: inherit; }
    .uploadMedia .uploadFileBtn:disabled {
      background: #F6F6F7;
      border-color: #F6F6F7;
      color: #8C9196 !important;
      pointer-events: none;
      opacity: 1; }

.multiselect-native-select .multiselect-container {
  min-height: 100px;
  max-height: 200px;
  overflow-y: auto; }
  .multiselect-native-select .multiselect-container li {
    display: flex; }
    .multiselect-native-select .multiselect-container li a {
      display: flex;
      width: 100%; }
    .multiselect-native-select .multiselect-container li label.checkbox {
      font-size: 16px;
      padding-top: 0;
      padding-bottom: 0;
      line-height: 24px; }

.createDatabaseModal .dropzone-scale-dataset,
.createDatabaseModal .dropzone-scale-dataset .dropzone {
  height: 200px !important; }

.createDatabaseModal .trainingDataGroup {
  display: none; }

.createDatabaseModal p.label {
  width: 100%;
  position: relative;
  display: block;
  margin-top: 0;
  margin-bottom: 5px;
  font-size: 16px;
  font-weight: 400;
  color: #210835; }

.createDatabaseModal .info {
  margin-left: 5px; }
  .createDatabaseModal .info .customTooltip {
    top: 24px;
    left: -200px;
    text-transform: none;
    white-space: normal;
    min-width: 360px;
    border: 1px solid #F2F1F1;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    padding: 10px 15px;
    font-size: 15px;
    color: #595959;
    padding: 20px; }

.createDatabaseModal .infoContent {
  position: absolute;
  right: -15px;
  top: 0;
  width: 72%;
  padding: 10px 15px;
  background: #ffffff;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  border: 2px solid #4E4576;
  color: #595959;
  transform: translateY(-40%);
  z-index: 2;
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s ease-in;
  /*&:before {
      border-right: solid 14px white;
      border-bottom: solid 12px transparent;
      border-top: solid 12px transparent;
      position: absolute;
      left: -14px;
      top: 42%;
      content: '';
      z-index: 2;

      @media (max-width: 767px) {
        top: -14px;
        left: 122px;

        border-right: solid 12px transparent;
        border-left: solid 12px transparent;
        border-bottom: solid 14px white;
        border-top: none;
      }

    }

    &:after {
      border-right: solid 15px rgba(0, 0, 0, 0.15);
      border-bottom: solid 13px transparent;
      border-top: solid 13px transparent;
      position: absolute;
      left: -15px;
      top: 42%;
      content: '';
      margin-top: -1px;

      @media (max-width: 767px) {
        top: -14px;
        left: 122px;

        border-top: none;
        border-right: solid 12px transparent;
        border-left: solid 12px transparent;
        border-bottom: solid 15px rgba(0, 0, 0, 0.15);
      }
    }*/ }
  @media (max-width: 767px) {
    .createDatabaseModal .infoContent {
      width: 100%;
      font-size: 12px;
      transform: translateY(30px); } }

.createDatabaseModal .infoIcon:hover .infoContent {
  visibility: visible;
  opacity: 1; }

.createDatabaseModal .mylocal,
.createDatabaseModal .rectangle {
  min-width: 100px; }

.createDatabaseModal .multiselect-native-select .multiselect,
.createDatabaseModal .multiselect-native-select .btn-group {
  width: 100%;
  background: transparent;
  text-align: left; }

.createDatabaseModal .multiselect-native-select .btn-group {
  border: 1px solid #9b9b9b;
  border-radius: 26px; }

.createDatabaseModal .multiselect-native-select .multiselect-selected-text {
  width: 96%;
  display: inline-block;
  color: #58595b; }

.createDatabaseModal .multiselect-native-select .multiselect-container {
  position: absolute !important;
  width: 100%;
  padding: 10px; }
  .createDatabaseModal .multiselect-native-select .multiselect-container li {
    margin-bottom: 5px; }
  .createDatabaseModal .multiselect-native-select .multiselect-container label.checkbox {
    position: static;
    color: #58595b;
    padding-left: 10px;
    width: 100%; }
  .createDatabaseModal .multiselect-native-select .multiselect-container input[type='checkbox'] {
    margin-right: 5px; }
  .createDatabaseModal .multiselect-native-select .multiselect-container .dropdown-toggle:after {
    border-top-color: #58595b; }

.createDatabaseModal .multiselect-native-select .btn:focus {
  box-shadow: none; }

.uploadDatasetModal {
  padding: 0 !important; }
  .uploadDatasetModal .back {
    background: transparent;
    border: none;
    padding: 0;
    opacity: 0.7;
    width: 10px; }
  .uploadDatasetModal .perceptionCreateWrapper {
    margin-top: 20px;
    margin-bottom: 0; }
    .uploadDatasetModal .perceptionCreateWrapper label {
      color: #210835; }
    .uploadDatasetModal .perceptionCreateWrapper .uploadNote {
      font-size: 14px;
      color: #535353;
      margin: 20px 0 20px 0; }
      .uploadDatasetModal .perceptionCreateWrapper .uploadNote li {
        line-height: 30px; }
        .uploadDatasetModal .perceptionCreateWrapper .uploadNote li:last-child {
          margin-top: 15px; }
      @media (max-width: 967px) {
        .uploadDatasetModal .perceptionCreateWrapper .uploadNote {
          font-size: 12px !important; } }
    .uploadDatasetModal .perceptionCreateWrapper input[type="text"] {
      padding-left: 20px;
      padding-right: 20px; }
  .uploadDatasetModal .dataset-upload-placeholder {
    flex-direction: row; }
  .uploadDatasetModal .label {
    color: #58595b;
    font-weight: normal;
    margin-bottom: 5px; }
  .uploadDatasetModal code {
    color: #8020CF;
    font-family: "Euclid Circular B";
    font-size: 15px;
    font-weight: 500; }
  .uploadDatasetModal .jsonSample a {
    color: #8020CF;
    font-weight: 600;
    display: flex; }
    .uploadDatasetModal .jsonSample a .icon {
      margin-right: 4px; }
  .uploadDatasetModal .uploadIcon {
    width: 50px;
    height: 80px; }
  .uploadDatasetModal .note {
    padding-left: 20px; }
    .uploadDatasetModal .note p {
      font-size: 18px;
      font-family: "Euclid Circular B";
      font-weight: 500;
      margin: 0 0 10px;
      color: #595959; }
      .uploadDatasetModal .note p strong {
        color: #8020CF;
        border-bottom: solid 1px #2C5A99;
        font-family: "Euclid Circular B";
        font-weight: 500; }
  .uploadDatasetModal .dataset_upload_warn {
    display: block;
    color: #787878;
    font-size: 14px;
    font-family: "Euclid Circular B";
    font-weight: 500; }
    .uploadDatasetModal .dataset_upload_warn strong {
      font-weight: 400;
      color: #8020CF; }
  .uploadDatasetModal .dataset-upload-first-view {
    border: dashed 1px #ccc;
    width: 100%;
    height: 200px;
    min-height: 200px;
    border-radius: 0px;
    box-shadow: none;
    max-width: 585px;
    margin: 0 auto 20px;
    position: relative; }
    .uploadDatasetModal .dataset-upload-first-view .uploadModalWrapper {
      position: initial; }
    .uploadDatasetModal .dataset-upload-first-view .dropzone {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0; }
  .uploadDatasetModal .udBtn {
    max-width: 160px;
    margin: 0 auto;
    height: 42px;
    cursor: pointer;
    width: 100%; }
  .uploadDatasetModal .modal-dialog {
    max-width: 580px; }
  .uploadDatasetModal .uploadDatasetInner {
    padding: 10px 40px;
    width: 100%; }
  .uploadDatasetModal .form-control {
    background: #fff;
    border: 1px solid #9b9b9b;
    border-radius: 26px;
    height: 52px;
    padding-left: 30px;
    padding-right: 30px;
    width: 100%;
    margin-bottom: 15px; }
    .uploadDatasetModal .form-control:focus {
      border-color: #9b9b9b; }
  .uploadDatasetModal .form-control::placeholder {
    color: #999999; }
  .uploadDatasetModal .modal-title {
    font-size: 16px;
    font-weight: 600;
    color: #210835; }
  .uploadDatasetModal .dropzone-scale-dataset,
  .uploadDatasetModal .dropzone-scale-dataset .dropzone {
    height: 200px !important; }
  .uploadDatasetModal .nav-tabs {
    border: 0; }
    .uploadDatasetModal .nav-tabs li:first-child a {
      border-radius: 5px 0px 0px 5px; }
    .uploadDatasetModal .nav-tabs li:last-child a {
      border-radius: 0 5px 5px 0; }
    .uploadDatasetModal .nav-tabs a {
      width: 102px;
      height: 36px;
      color: #303030;
      font-size: 14px;
      font-weight: 400;
      border: 1px solid #D8D8D8;
      background: #ffffff;
      transition: all 0.2s ease-in;
      display: inline-flex;
      justify-content: center;
      align-items: center; }
      .uploadDatasetModal .nav-tabs a:hover, .uploadDatasetModal .nav-tabs a:focus, .uploadDatasetModal .nav-tabs a:active {
        color: #8020CF;
        border-color: #8020CF;
        background-color: #FDFBFF; }
    .uploadDatasetModal .nav-tabs .active a {
      color: #8020CF;
      font-weight: 400;
      border-color: #8020CF;
      background-color: #FDFBFF; }
  .uploadDatasetModal .perceptionCreateBtn {
    width: 100%;
    height: 44px;
    border-radius: 10px;
    max-width: 100%; }
    .uploadDatasetModal .perceptionCreateBtn:focus {
      color: #ffffff; }
    .uploadDatasetModal .perceptionCreateBtn:disabled {
      background: #F7F7F7;
      color: #B7B7B7;
      pointer-events: none; }

.instructionsPopup .modal-dialog {
  max-width: 580px; }

.instructionsPopup .modal-body {
  text-align: center;
  padding: 25px;
  width: 100%; }

.instructionsPopup .modal-footer {
  padding: 55px 25px 0;
  justify-content: center;
  width: 100%;
  border-top: none; }

.instructionsPopup .modal-title {
  text-transform: uppercase; }

.instructionsPopup .editInstructionBtn {
  border: 0;
  padding: 0;
  border-radius: 10px;
  width: 100%;
  height: 44px;
  font-weight: 500; }
  .instructionsPopup .editInstructionBtn .iconEdit {
    margin-right: 5px;
    height: 16px; }
  .instructionsPopup .editInstructionBtn span {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 44px;
    border-radius: 10px; }
  .instructionsPopup .editInstructionBtn .save {
    display: none;
    line-height: 40px; }
  .instructionsPopup .editInstructionBtn:disabled {
    background: #F7F7F7;
    color: #B7B7B7 !important; }

.instructionsPopup .editInstructionArea {
  display: none; }
  .instructionsPopup .editInstructionArea label {
    margin-bottom: 5px;
    font-size: 16px;
    font-weight: 500;
    color: #210835;
    width: 100%;
    text-align: left; }

.instructionsPopup .instructionsArea {
  padding: 15px;
  border-radius: 5px;
  border: 1px solid #E0E0E0;
  resize: none;
  height: 100px;
  width: 100%;
  color: #4E4576;
  overflow-y: auto;
  background: #F7F7F7; }
  .instructionsPopup .instructionsArea:focus, .instructionsPopup .instructionsArea:focus-visible {
    outline: none;
    border-color: #8020CF; }

.instructionsPopup #instructions_txt {
  max-height: 300px;
  overflow-y: auto;
  word-break: break-word;
  text-align: left;
  color: #535353; }

.trainingDatasetDetail {
  padding-left: 0;
  padding-right: 0; }
  .trainingDatasetDetail ul li {
    display: inline-block;
    list-style-type: none; }
  .trainingDatasetDetail .eachGalleryItem {
    list-style-type: none;
    display: inline-block;
    overflow: hidden !important; }
    .trainingDatasetDetail .eachGalleryItem .innerContainer {
      position: relative; }
    .trainingDatasetDetail .eachGalleryItem .dataFileName {
      color: #fff;
      font-size: 12px;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      padding: 7px 10px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      background-color: rgba(0, 0, 0, 0.7);
      visibility: hidden;
      transition: all 0.2s ease-in;
      opacity: 0;
      margin: 0; }
    .trainingDatasetDetail .eachGalleryItem:hover .dataFileName, .trainingDatasetDetail .eachGalleryItem:hover .rename_file {
      visibility: visible;
      opacity: 1; }
    .trainingDatasetDetail .eachGalleryItem .fname {
      max-width: calc(100% - 20px);
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      display: block; }
    .trainingDatasetDetail .eachGalleryItem a {
      display: flex;
      justify-content: center;
      align-items: center; }
      .trainingDatasetDetail .eachGalleryItem a:hover .dataFileName {
        visibility: visible; }
    .trainingDatasetDetail .eachGalleryItem a.video {
      background: #000; }
    .trainingDatasetDetail .eachGalleryItem .videoDataOverlay {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      display: none;
      z-index: 2; }
    .trainingDatasetDetail .eachGalleryItem .videoPlaybuttonImg {
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      margin: 0 auto;
      width: 100%;
      height: 100%;
      background: url(../img/play-button.svg) center center no-repeat;
      background-size: 48px; }
    .trainingDatasetDetail .eachGalleryItem .icon {
      width: 56px;
      height: 52px;
      position: absolute;
      left: 0;
      right: 0;
      margin: 0 auto;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 3px;
      font-size: 16px;
      color: #ffffff;
      background: #595959;
      text-transform: uppercase; }
    .trainingDatasetDetail .eachGalleryItem .mov, .trainingDatasetDetail .eachGalleryItem .avi {
      display: none; }
    .trainingDatasetDetail .eachGalleryItem .doc, .trainingDatasetDetail .eachGalleryItem .docx {
      background: #138BFA; }
    .trainingDatasetDetail .eachGalleryItem .pdf {
      background: #EB5857; }
    .trainingDatasetDetail .eachGalleryItem .zip {
      background: url(../img/ch-icon-zip.png) 0 0 no-repeat;
      font-size: 0; }
    .trainingDatasetDetail .eachGalleryItem .txt {
      background: url(../img/ch-icon-txt.png) 0 0 no-repeat;
      font-size: 0; }
    .trainingDatasetDetail .eachGalleryItem .jpg, .trainingDatasetDetail .eachGalleryItem .jpeg, .trainingDatasetDetail .eachGalleryItem .ts, .trainingDatasetDetail .eachGalleryItem .mp4, .trainingDatasetDetail .eachGalleryItem .webm {
      display: none; }
    .trainingDatasetDetail .eachGalleryItem .odt, .trainingDatasetDetail .eachGalleryItem .odp, .trainingDatasetDetail .eachGalleryItem .csv {
      background: url(../img/ch-icon-file.svg) 0 0 no-repeat;
      color: #595959;
      width: 46px;
      height: 56px;
      align-items: flex-end;
      padding-bottom: 5px; }
    .trainingDatasetDetail .eachGalleryItem .xls, .trainingDatasetDetail .eachGalleryItem .xlsx {
      background: #1d6f42; }
    .trainingDatasetDetail .eachGalleryItem.zip a.fancybox, .trainingDatasetDetail .eachGalleryItem.rar a.fancybox, .trainingDatasetDetail .eachGalleryItem.tiff a.fancybox, .trainingDatasetDetail .eachGalleryItem.tif a.fancybox {
      pointer-events: none; }
  .trainingDatasetDetail .txt .fancybox,
  .trainingDatasetDetail .rar .fancybox,
  .trainingDatasetDetail .pdf .fancybox,
  .trainingDatasetDetail .doc .fancybox,
  .trainingDatasetDetail .docx .fancybox,
  .trainingDatasetDetail .odp .fancybox,
  .trainingDatasetDetail .odt .fancybox,
  .trainingDatasetDetail .csv .fancybox,
  .trainingDatasetDetail .xls .fancybox,
  .trainingDatasetDetail .xlsx .fancybox {
    pointer-events: none; }

.datasetVideoPopup {
  background: rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  padding: 0 20px;
  transition: all 0.3s;
  visibility: hidden;
  opacity: 0; }
  .datasetVideoPopup .innerContainer {
    width: 100%;
    max-width: 700px;
    min-height: 480px;
    max-height: 480px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background: #fff;
    border-radius: 10px;
    padding: 50px 15px 15px;
    position: relative; }
    .datasetVideoPopup .innerContainer #video {
      max-width: 100%;
      max-height: 375px;
      background: #000; }
      @media (max-width: 480px) {
        .datasetVideoPopup .innerContainer #video {
          max-height: 200px; } }
    @media (max-width: 480px) {
      .datasetVideoPopup .innerContainer {
        min-height: 320px;
        max-height: 320px; } }
    .datasetVideoPopup .innerContainer .video-js {
      max-height: 360px !important; }
  .datasetVideoPopup .closeModalHidden {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: -1; }

.datasetVideoPopup.open {
  visibility: visible;
  opacity: 1; }

@media (max-width: 967px) {
  .rawDataContentArea .rawTrainingDataArea .preceptionAreaTopThumbil {
    width: 10%; } }

.annotationCustomModalParent {
  padding: 0 !important;
  border-radius: 0 !important; }

.annotationCustomModal {
  max-width: 100% !important;
  width: 100% !important;
  background: #fafafa !important; }
  .annotationCustomModal > .row {
    height: 100%; }
  .annotationCustomModal .annotorious-item-focus {
    opacity: 0.8 !important; }
  .annotationCustomModal .annotorious-item-unfocus {
    opacity: 0.8 !important; }
  .annotationCustomModal .predictionResultWrapper {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    height: 100%; }
    @media (max-width: 967px) {
      .annotationCustomModal .predictionResultWrapper {
        flex-direction: column; } }
  .annotationCustomModal .predictionResultList {
    max-width: 50%;
    overflow: auto;
    max-height: 100vh;
    height: auto;
    position: relative;
    align-items: center;
    justify-content: space-between;
    display: flex;
    flex-direction: column; }
    @media (min-width: 1680px) {
      .annotationCustomModal .predictionResultList {
        max-width: 40%; } }
  .annotationCustomModal .predictionResultImage {
    max-height: 100vh;
    padding: 0 !important;
    position: relative;
    /*max-width: 600px;*/
    margin: 0 auto;
    /*@media (min-width: 1680px) {
      max-width: 800px;
    }*/ }
  .annotationCustomModal canvas {
    max-width: 100%;
    max-height: 100%; }
  .annotationCustomModal .match_warn_match {
    text-align: center !important; }
  .annotationCustomModal .predictionMatchResult {
    margin-top: 15px;
    padding-bottom: 50px; }
  .annotationCustomModal .prediction_model li img {
    min-width: 30px;
    min-height: 30px;
    max-width: 70px;
    max-height: 60px; }
    @media (max-width: 967px) {
      .annotationCustomModal .prediction_model li img {
        max-width: 60px;
        max-height: 50px; } }
    @media (max-width: 480px) {
      .annotationCustomModal .prediction_model li img {
        max-width: 50px;
        max-height: 40px; } }
  .annotationCustomModal .prediction_model li:nth-of-type(1) {
    width: 15%; }
  .annotationCustomModal .prediction_model li:nth-of-type(2) {
    width: 25%; }
  .annotationCustomModal .prediction_model li:nth-of-type(3) {
    width: 25%; }

.contentArea .annotationCustomModalParent {
  display: flex !important;
  z-index: -9999; }

.loader-m {
  margin-left: -12px;
  margin-right: 8px; }

.imagePerceptionListTopInnerBar .preceptionAreaTrainingType {
  width: 20%; }

.imagePerceptionListInnerBar {
  padding: 5px 10px !important; }
  .imagePerceptionListInnerBar .changeStatusText {
    position: absolute;
    bottom: -16px;
    margin: 0px !important;
    left: 0;
    width: 100% !important;
    text-align: center; }
  .imagePerceptionListInnerBar .preceptionAreaTrainingType {
    width: 20%; }
    .imagePerceptionListInnerBar .preceptionAreaTrainingType a {
      color: #58595b; }
  .imagePerceptionListInnerBar .perceptionClassToggle {
    margin-left: 0 !important; }

.imageDetailTrainingArea .changeStatusText {
  position: absolute;
  bottom: -18px;
  margin: 0px;
  left: -8px; }

@media (max-width: 967px) {
  .imageDetailTrainingArea .predictViaUpladBtn {
    margin-left: 0; } }

.trainingAreaCount .perceptionName {
  color: #58595b;
  margin-left: 0; }

.select-style .prediction_model {
  border: 2px solid red; }

.hideScrollBar {
  overflow: hidden; }

.noData {
  text-align: center !important;
  margin-top: 5em; }

.statusclass {
  font-size: 1.01em; }

.log-bold {
  font-weight: bold;
  margin-right: 5px; }

.alertCloseModalWrapper {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden; }
  .alertCloseModalWrapper .alertCloseModal {
    max-width: 400px;
    height: 200px;
    width: 100%;
    border-radius: 10px;
    background-color: #fff;
    padding: 20px;
    overflow: hidden;
    position: absolute;
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; }
    .alertCloseModalWrapper .alertCloseModal .options {
      display: flex;
      flex-direction: row;
      align-items: center; }
    .alertCloseModalWrapper .alertCloseModal .blue-button,
    .alertCloseModalWrapper .alertCloseModal .blue-border-button {
      padding: 4px 30px;
      font-weight: 500;
      border-radius: 30px;
      margin: 0 5px; }

.alertCloseModalActive {
  opacity: 1;
  visibility: visible;
  z-index: 9999; }

.createDatasetPopup .addItem {
  display: inline-block;
  color: #8020CF;
  font-size: 14px;
  font-weight: 600; }
  .createDatasetPopup .addItem img {
    width: 21px;
    height: 21px;
    background-color: #8020CF;
    border-radius: 100%;
    margin-right: 5px;
    padding: 4px;
    float: left;
    transform: rotate(45deg); }
  .createDatasetPopup .addItem:hover, .createDatasetPopup .addItem:focus, .createDatasetPopup .addItem:active {
    color: #8020CF !important; }

.createDatasetPopup #uploadModal {
  border: 2px dashed #9B9B9B !important;
  border-radius: 10px;
  height: 200px !important; }
  .createDatasetPopup #uploadModal .uploadIcon {
    width: 50px;
    height: 80px; }
  .createDatasetPopup #uploadModal .note {
    padding-left: 20px; }
    .createDatasetPopup #uploadModal .note p {
      font-size: 16px;
      font-family: "Euclid Circular B";
      font-weight: 500;
      margin: 0 0 10px;
      color: #535353; }
      .createDatasetPopup #uploadModal .note p strong {
        color: #8020CF;
        border-bottom: solid 1px #8020CF;
        font-family: "Euclid Circular B";
        font-weight: 500; }

.createDatasetPopup .dataset-upload-placeholder {
  flex-direction: row; }
  .createDatasetPopup .dataset-upload-placeholder p {
    color: #9b9b9b; }

.createDatasetPopup .nav-tabs {
  border: 0; }
  .createDatasetPopup .nav-tabs a {
    padding: 3px 15px;
    color: #aaa;
    border-bottom: solid 1px #fff;
    display: inline-block;
    font-size: 14px; }
    @media (min-width: 1600px) {
      .createDatasetPopup .nav-tabs a {
        font-size: 16px; } }
    .createDatasetPopup .nav-tabs a:hover, .createDatasetPopup .nav-tabs a:focus, .createDatasetPopup .nav-tabs a:active {
      color: #8020CF !important; }
  .createDatasetPopup .nav-tabs .active a {
    color: #8020CF;
    background: rgba(19, 139, 250, 0.14);
    border-radius: 20px;
    font-weight: 500; }

.createDatasetPopup .dataset_upload_warn {
  display: block;
  color: #535353;
  font-size: 14px;
  font-family: "Euclid Circular B";
  font-weight: 400; }
  .createDatasetPopup .dataset_upload_warn strong {
    font-weight: 400;
    color: #8020CF; }

.createDatasetPopup .uploadedItem {
  box-shadow: 0 0 2px rgba(198, 198, 198, 0.5);
  border-radius: 13px;
  background-color: #fbfbfb; }
  .createDatasetPopup .uploadedItem ul {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 560px;
    min-height: 175px;
    overflow-x: hidden;
    white-space: nowrap;
    flex-direction: row;
    padding: 18px 20px; }
  .createDatasetPopup .uploadedItem li {
    width: 121px;
    height: 119px;
    border-radius: 13px;
    margin: 10px 7px;
    position: relative;
    background-color: #fbfbfb;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
    /*display: inline-flex;
      justify-content: center;
      align-items: center;*/
    display: inline-block;
    float: left; }
    .createDatasetPopup .uploadedItem li:last-child {
      margin-right: 20px; }
    .createDatasetPopup .uploadedItem li:before {
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      content: '';
      border-radius: 13px; }
    .createDatasetPopup .uploadedItem li img {
      max-height: 119px; }
    .createDatasetPopup .uploadedItem li .icon {
      height: 29px;
      width: 30px;
      border-radius: 5px;
      position: absolute;
      left: 0;
      right: 0;
      margin: 0 auto;
      bottom: 35px;
      z-index: 2; }
    .createDatasetPopup .uploadedItem li .iconPicture {
      background: #726B92 url(../img/icon-picture.svg) center center no-repeat; }
    .createDatasetPopup .uploadedItem li .iconVideoPlayer {
      background: #ffffff url(../img/icon-play-green.svg) center center no-repeat;
      background-size: 18px; }
    .createDatasetPopup .uploadedItem li .iconFolder {
      background: #726B92 url(../img/icon-folder.svg) center center no-repeat; }
    .createDatasetPopup .uploadedItem li .itemName {
      margin: 0 auto;
      font-size: 14px;
      font-weight: 400;
      display: block;
      text-align: center;
      line-height: initial;
      width: 100%;
      max-width: 100px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      z-index: 2;
      color: #fff;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 5px; }
    .createDatasetPopup .uploadedItem li .remove {
      width: 21px;
      height: 21px;
      position: absolute;
      top: -10px;
      right: -10px;
      border-radius: 100%;
      z-index: 2;
      line-height: initial;
      cursor: pointer;
      background: #595959 url(../img/icon-close-bold.svg) center center no-repeat;
      background-size: 11px; }
    .createDatasetPopup .uploadedItem li .imgContainer {
      /*display: -webkit-inline-box;*/
      display: flex;
      justify-content: center;
      width: 100%;
      height: 100%;
      overflow: hidden;
      border-radius: 13px; }
  .createDatasetPopup .uploadedItem .mCustomScrollBox {
    width: 100%;
    height: auto !important; }

.uploadMedia .label {
  color: #595959;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 5px; }

.uploadMedia .addItem {
  color: #8020CF;
  border-radius: 5px;
  height: 36px;
  border: 0;
  cursor: pointer;
  font-size: 14px;
  font-family: "Euclid Circular B";
  font-weight: 600;
  min-width: 120px;
  justify-content: center;
  align-items: center; }
  .uploadMedia .addItem:hover {
    color: #8020CF; }
  .uploadMedia .addItem .iconPlus {
    margin-right: 10px; }

.uploadMedia #uploadModal {
  border: 2px dashed #9B9B9B !important;
  border-radius: 10px;
  height: 200px !important; }
  .uploadMedia #uploadModal .uploadIcon {
    width: 50px;
    height: 80px; }
  .uploadMedia #uploadModal .note {
    padding-left: 20px; }
    .uploadMedia #uploadModal .note a {
      font-size: 16px;
      font-weight: 600;
      color: #8020CF;
      text-decoration: underline;
      margin-right: 2px; }
      .uploadMedia #uploadModal .note a:focus {
        text-decoration: underline;
        color: #8020CF; }
    .uploadMedia #uploadModal .note p {
      font-size: 16px;
      font-family: "Euclid Circular B";
      font-weight: 600;
      margin: 0 0 10px;
      color: #535353; }
      .uploadMedia #uploadModal .note p strong {
        color: #8020CF;
        border-bottom: solid 1px #8020CF;
        font-family: "Euclid Circular B";
        font-weight: 500; }

.uploadMedia .dataset-upload-placeholder {
  flex-direction: row; }
  .uploadMedia .dataset-upload-placeholder p {
    color: #9b9b9b; }

.uploadMedia .group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px; }

.uploadMedia .nav-tabs {
  border: 0; }
  .uploadMedia .nav-tabs li:first-child a {
    border-radius: 5px 0px 0px 5px; }
  .uploadMedia .nav-tabs li:last-child a {
    border-radius: 0 5px 5px 0; }
  .uploadMedia .nav-tabs a {
    width: 102px;
    height: 36px;
    color: #303030;
    font-size: 14px;
    font-weight: 400;
    border: 1px solid #D8D8D8;
    background: #ffffff;
    transition: all 0.2s ease-in;
    display: inline-flex;
    justify-content: center;
    align-items: center; }
    .uploadMedia .nav-tabs a:hover, .uploadMedia .nav-tabs a:focus, .uploadMedia .nav-tabs a:active {
      color: #8020CF;
      border-color: #8020CF;
      background-color: #FDFBFF; }
  .uploadMedia .nav-tabs .active a {
    color: #8020CF;
    font-weight: 400;
    border-color: #8020CF;
    background-color: #FDFBFF; }

.uploadMedia .dataset_upload_warn {
  display: block;
  color: #535353;
  font-size: 14px;
  font-family: "Euclid Circular B";
  font-weight: 400; }
  .uploadMedia .dataset_upload_warn strong {
    font-weight: 400;
    color: #8020CF; }

.uploadMedia .uploadedItem {
  box-shadow: 0 0 2px rgba(198, 198, 198, 0.5);
  border-radius: 13px;
  background-color: #fbfbfb; }
  .uploadMedia .uploadedItem ul {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 560px;
    min-height: 175px;
    overflow-x: hidden;
    white-space: nowrap;
    flex-direction: row;
    padding: 18px 20px; }
  .uploadMedia .uploadedItem li {
    width: 121px;
    height: 119px;
    border-radius: 13px;
    margin: 10px 7px;
    position: relative;
    background-color: #fbfbfb;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
    /*display: inline-flex;
      justify-content: center;
      align-items: center;*/
    display: inline-block;
    float: left; }
    .uploadMedia .uploadedItem li:last-child {
      margin-right: 20px; }
    .uploadMedia .uploadedItem li:before {
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      content: '';
      border-radius: 13px; }
    .uploadMedia .uploadedItem li img {
      max-height: 119px; }
    .uploadMedia .uploadedItem li .icon {
      height: 29px;
      width: 30px;
      border-radius: 5px;
      position: absolute;
      left: 0;
      right: 0;
      margin: 0 auto;
      bottom: 35px;
      z-index: 2; }
    .uploadMedia .uploadedItem li .iconPicture {
      background: #726B92 url(../img/icon-picture.svg) center center no-repeat; }
    .uploadMedia .uploadedItem li .iconVideoPlayer {
      background: #ffffff url(../img/icon-play-green.svg) center center no-repeat;
      background-size: 18px; }
    .uploadMedia .uploadedItem li .iconFolder {
      background: #726B92 url(../img/icon-folder.svg) center center no-repeat; }
    .uploadMedia .uploadedItem li .itemName {
      margin: 0 auto;
      font-size: 14px;
      font-weight: 400;
      display: block;
      text-align: center;
      line-height: initial;
      width: 100%;
      max-width: 100px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      z-index: 2;
      color: #fff;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 5px; }
    .uploadMedia .uploadedItem li .remove {
      width: 21px;
      height: 21px;
      position: absolute;
      top: -10px;
      right: -10px;
      border-radius: 100%;
      z-index: 2;
      line-height: initial;
      cursor: pointer;
      background: #595959 url(../img/icon-close-bold.svg) center center no-repeat;
      background-size: 11px; }
    .uploadMedia .uploadedItem li .imgContainer {
      /*display: -webkit-inline-box;*/
      display: flex;
      justify-content: center;
      width: 100%;
      height: 100%;
      overflow: hidden;
      border-radius: 13px; }
  .uploadMedia .uploadedItem .mCustomScrollBox {
    width: 100%;
    height: auto !important; }

.radioLinks .rectangle,
.radioLinks .polygon {
  padding: 10px 10px 30px 0 !important;
  font-size: 16px !important;
  cursor: pointer;
  position: relative !important; }

.radioLinks input[type='radio'] {
  display: none; }

.radioLinks label span {
  width: 18px;
  height: 18px;
  border: solid 2px #8C9196;
  border-radius: 20px;
  position: ralative; }
  .radioLinks label span:before {
    width: 10px;
    height: 10px;
    background-color: #0367A6;
    border-radius: 20px;
    position: absolute;
    top: 2px;
    left: 2px; }

.radioLinks input[type='radio']:checked + span {
  border-color: #8020CF; }

.radioLinks input[type='radio']:checked + span:before {
  background-color: #8020CF; }

.enableDisable .perceptionClassToggle,
.enableDisable .changeStatusText {
  margin: 0 !important; }

.facialPerceptionListInnerBar {
  padding: 5px 10px !important; }
  .facialPerceptionListInnerBar .changeStatusText {
    position: absolute;
    bottom: -16px;
    margin: 0px !important;
    left: 0;
    width: 100% !important;
    text-align: center; }

.annotationTrainingArea .annotationType {
  max-width: 230px;
  margin-right: auto; }
  @media (max-width: 967px) {
    .annotationTrainingArea .annotationType {
      margin: 0 10px; } }

.annotationTrainingArea .annotation_obj_name {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 20px; }
  @media (max-width: 967px) {
    .annotationTrainingArea .annotation_obj_name {
      margin: 0 10px; } }

@media (max-width: 967px) {
  .annotationTrainingArea .annotation_obj_number {
    margin: 0 10px; } }

.annotationTrainingArea .annotation_obj_total {
  position: absolute;
  left: 30px;
  top: 8px;
  line-height: 32px; }

.trainingObjectListWrapper #dataset_name::placeholder {
  color: #999999; }

.trainingObjectListWrapper .preceptionAreaTopId {
  width: 10% !important; }

.trainingObjectListWrapper .preceptionAreaTopInnerBar .preceptionAreaTopStatus {
  justify-content: center !important; }

.trainingObjectListWrapper .preceptionAreaTopActions {
  width: 16% !important; }

.trainingObjectListWrapper .preceptionAreaTopAnnotationType,
.trainingObjectListWrapper .preceptionAreaAnnotationType {
  width: 16%; }

.trainingObjectListWrapper .preceptionAreaAnnotationType {
  display: flex;
  justify-content: flex-start;
  align-items: center; }

.trainingObjectListWrapper .preceptionAreaTopStatus {
  width: 20%; }

.trainingObjectListWrapper .lessPhotoCount {
  justify-content: center !important; }

.trainingObjectListWrapper .uploadDatasetBtn {
  margin-right: 0 !important;
  display: flex;
  justify-content: center;
  align-items: center; }
  @media (max-width: 967px) {
    .trainingObjectListWrapper .uploadDatasetBtn {
      margin-left: 0; } }

.hideScrollBar {
  overflow: hidden; }

.modal-open .modal.testViaUploadModal {
  padding: 8px !important; }

.modal.testViaUploadModal {
  padding: 8px !important; }
  .modal.testViaUploadModal .invisibleDisableBackground {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; }

.testViaUploadModal {
  padding: 8px !important; }
  .testViaUploadModal .note {
    margin: 0;
    font-size: 14px;
    color: #f7941d;
    display: none;
    align-items: center;
    font-weight: 500;
    width: 100%;
    top: 0;
    position: absolute; }
    .testViaUploadModal .note .infoIcon {
      display: inline-flex;
      width: 19px;
      height: 19px;
      border-radius: 30px;
      margin-right: 4px;
      background: #fff url(../img/ch-info-orange.svg) 0 center no-repeat;
      background-size: contain;
      float: left; }
  .testViaUploadModal .note.show {
    display: flex; }
  .testViaUploadModal .loaderGif {
    position: absolute; }
  .testViaUploadModal .annotorious-item-unfocus {
    opacity: 0.9 !important; }
  .testViaUploadModal .closeModal {
    padding: 0;
    position: static; }
  .testViaUploadModal .invisibleBtn {
    z-index: 0;
    width: 100%;
    height: 100%; }
  .testViaUploadModal .modal-dialog {
    max-width: 100%;
    margin: 0; }
  .testViaUploadModal .modal-content {
    padding: 0;
    margin: 0;
    height: 100%;
    border-radius: 4px;
    padding-bottom: 10px !important; }
  .testViaUploadModal .modal-header {
    padding: 10px 20px;
    box-shadow: 0px 2px 4px rgba(10, 46, 96, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1; }
    .testViaUploadModal .modal-header h4 {
      margin: 0;
      text-align: left;
      text-transform: capitalize;
      font-family: "Euclid Circular B";
      font-weight: 500;
      font-size: 20px;
      line-height: 36px;
      color: #0A2E60; }
  .testViaUploadModal .modal-body {
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    height: 95%; }
    .testViaUploadModal .modal-body .breadCrumb {
      margin: 15px 0 10px;
      width: 100%; }
      .testViaUploadModal .modal-body .breadCrumb ul {
        padding: 0;
        margin: 0;
        display: flex; }
        .testViaUploadModal .modal-body .breadCrumb ul li {
          display: inline-flex;
          font-size: 14px;
          color: #8C9196;
          padding: 0 20px 0 10px;
          background: url(../img/arrow-right-light-gray.svg) right bottom no-repeat;
          line-height: 16px;
          background-size: 8px;
          margin: 0; }
          .testViaUploadModal .modal-body .breadCrumb ul li:first-child {
            padding-left: 0; }
          .testViaUploadModal .modal-body .breadCrumb ul li:last-child {
            background: none; }
          .testViaUploadModal .modal-body .breadCrumb ul li.active {
            color: #303030;
            padding-right: 0;
            font-family: "Euclid Circular B";
            font-weight: 600; }
  .testViaUploadModal .galleryAreaSection {
    width: 100%;
    max-width: 60%;
    background-color: #ffffff;
    overflow: hidden;
    padding: 0 20px;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column; }
    @media (max-width: 967px) {
      .testViaUploadModal .galleryAreaSection {
        max-width: 100%; } }
    .testViaUploadModal .galleryAreaSection canvas {
      max-width: 100%;
      max-height: 94%;
      top: 30px;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;
      position: absolute;
      width: auto !important;
      height: auto !important; }
    .testViaUploadModal .galleryAreaSection .thumbnailPreview {
      background-color: transparent;
      height: 80%;
      max-height: 100%;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 25px 0 0;
      position: relative; }
      .testViaUploadModal .galleryAreaSection .thumbnailPreview .annotorious-annotationlayer {
        height: 90%;
        display: flex !important;
        justify-content: center;
        align-items: center; }
      .testViaUploadModal .galleryAreaSection .thumbnailPreview img {
        max-height: 100%; }
    .testViaUploadModal .galleryAreaSection .galleryControl {
      position: absolute;
      top: 45%;
      display: flex;
      justify-content: space-between;
      width: 96%;
      z-index: 2; }
      .testViaUploadModal .galleryAreaSection .galleryControl button {
        width: 40px;
        height: 40px;
        border-radius: 40px;
        background: rgba(255, 255, 255, 0.5);
        border: solid 1px #8C9196;
        transition: all 0.2s ease-in; }
        .testViaUploadModal .galleryAreaSection .galleryControl button.prev {
          background: rgba(255, 255, 255, 0.5) url(../img/ch-left-arrow-gray.svg) center center no-repeat; }
          .testViaUploadModal .galleryAreaSection .galleryControl button.prev:hover {
            background: white url(../img/ch-left-arrow-gray.svg) center center no-repeat; }
        .testViaUploadModal .galleryAreaSection .galleryControl button.next {
          background: rgba(255, 255, 255, 0.5) url(../img/ch-right-arrow-gray.svg) center center no-repeat; }
          .testViaUploadModal .galleryAreaSection .galleryControl button.next:hover {
            background: white url(../img/ch-right-arrow-gray.svg) center center no-repeat; }
  .testViaUploadModal .wrapper {
    width: 100%;
    height: 100%;
    max-width: 60%;
    overflow: hidden; }
    @media (max-width: 1680px) {
      .testViaUploadModal .wrapper {
        max-width: 50%; } }
    .testViaUploadModal .wrapper .galleryAreaSection {
      max-width: 100%; }
  .testViaUploadModal .itemList {
    width: 100%;
    height: 100%;
    max-width: 40%;
    padding: 15px 20px 0px 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-shadow: 0px 14.3769px 19.4088px rgba(0, 0, 0, 0.05);
    position: relative; }
    @media (max-width: 1680px) {
      .testViaUploadModal .itemList {
        max-width: 50%; } }
    @media (max-width: 967px) {
      .testViaUploadModal .itemList {
        max-width: 100%; } }
    @media (max-width: 480px) {
      .testViaUploadModal .itemList {
        padding: 0 10px 10px 10px; } }
    .testViaUploadModal .itemList h4 {
      font-size: 24px;
      color: #8020CF;
      text-align: left;
      margin-bottom: 15px;
      margin-top: 20px;
      width: 100%; }
      @media (max-width: 1366px) {
        .testViaUploadModal .itemList h4 {
          font-size: 18px;
          margin-bottom: 10px;
          margin-top: 10px; } }
      @media (max-width: 967px) {
        .testViaUploadModal .itemList h4 {
          font-size: 16px; } }
      .testViaUploadModal .itemList h4 a {
        font-size: 16px; }
    .testViaUploadModal .itemList .textalignLeft {
      text-align: left; }
    .testViaUploadModal .itemList .header {
      display: none; }
    .testViaUploadModal .itemList .listItemArea {
      color: #595959;
      width: 100%;
      height: 100%;
      overflow: hidden; }
    .testViaUploadModal .itemList .matchResult {
      height: auto;
      min-height: min-content;
      overflow: visible; }
      .testViaUploadModal .itemList .matchResult .predictionResultFace .prediction_model {
        justify-content: space-between;
        align-items: center; }
      .testViaUploadModal .itemList .matchResult li {
        margin: 0; }
        @media (max-width: 480px) {
          .testViaUploadModal .itemList .matchResult li {
            font-size: 12px; } }
      .testViaUploadModal .itemList .matchResult .listItemTopbar {
        margin-bottom: 5px; }
      .testViaUploadModal .itemList .matchResult .labelTitle {
        margin: 0;
        padding: 0;
        border-bottom: solid 1px #f7941d;
        display: flex;
        justify-content: flex-end; }
        .testViaUploadModal .itemList .matchResult .labelTitle .label {
          background-color: #f7941d;
          color: #ffffff;
          border-radius: 6px 6px 0px 0px;
          padding: 5px 15px;
          font-size: 14px;
          font-weight: 600;
          min-width: 115px; }
    .testViaUploadModal .itemList .similarFaces {
      min-height: 200px; }
      .testViaUploadModal .itemList .similarFaces .labelTitle {
        margin: 0;
        padding: 0;
        border-bottom: solid 1px #0367A6;
        display: flex;
        justify-content: flex-end; }
        .testViaUploadModal .itemList .similarFaces .labelTitle .label {
          background-color: #0367A6;
          color: #ffffff;
          border-radius: 6px 6px 0px 0px;
          padding: 5px 15px;
          font-size: 14px;
          font-weight: 600;
          min-width: 115px; }
      @media (max-width: 967px) {
        .testViaUploadModal .itemList .similarFaces {
          padding-top: 0; } }
      @media (max-width: 480px) {
        .testViaUploadModal .itemList .similarFaces {
          min-height: 100px; } }
      @media (min-width: 1680px) {
        .testViaUploadModal .itemList .similarFaces {
          min-height: 480px; } }
      .testViaUploadModal .itemList .similarFaces .listItemContent {
        height: 75%; }
    .testViaUploadModal .itemList .listItemTopbar {
      padding: 8px 30px 8px 10px;
      margin: 0;
      font-weight: 500;
      font-size: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      text-align: center;
      margin-bottom: 10px;
      border-bottom: 2px solid #E7E6EC; }
      .testViaUploadModal .itemList .listItemTopbar li {
        margin: 0;
        padding: 0 10px;
        font-weight: 600; }
      @media (max-width: 1366px) {
        .testViaUploadModal .itemList .listItemTopbar {
          font-size: 14px; } }
      @media (max-width: 967px) {
        .testViaUploadModal .itemList .listItemTopbar {
          font-size: 12px;
          padding: 10px 0; } }
    .testViaUploadModal .itemList .eachTagTopbar {
      display: none; }
    .testViaUploadModal .itemList .listItemContent {
      font-size: 14px;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      overflow: hidden;
      width: 100%;
      height: 80%;
      text-align: center;
      padding: 0 0 0 10px;
      margin: 0; }
      .testViaUploadModal .itemList .listItemContent li {
        padding: 5px 10px; }
      .testViaUploadModal .itemList .listItemContent .mCSB_inside > .mCSB_container {
        margin-right: 20px !important; }
      @media (max-width: 1200px) {
        .testViaUploadModal .itemList .listItemContent {
          font-size: 14px; } }
      @media (max-width: 480px) {
        .testViaUploadModal .itemList .listItemContent {
          font-size: 12px; } }
      .testViaUploadModal .itemList .listItemContent .objectModelName ul {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
        min-height: 70px; }
      .testViaUploadModal .itemList .listItemContent .select-style {
        border: solid 1px red; }
      .testViaUploadModal .itemList .listItemContent .eachItem {
        border: 2px solid transparent;
        border-bottom: 2px solid #dadada;
        padding: 10px 0; }
        .testViaUploadModal .itemList .listItemContent .eachItem:hover {
          border-color: #e02020; }
        .testViaUploadModal .itemList .listItemContent .eachItem ul {
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: row;
          min-height: 50px; }
      .testViaUploadModal .itemList .listItemContent .mCSB_container {
        padding-bottom: 50px; }
    .testViaUploadModal .itemList .alignedLeftclassName li {
      display: inline-flex;
      justify-content: flex-start;
      flex-wrap: wrap; }
    .testViaUploadModal .itemList .predictionResultList {
      padding: 0; }
    .testViaUploadModal .itemList .listItemTopbar .itemclassName,
    .testViaUploadModal .itemList .listItemContent .itemclassName {
      width: 45%;
      word-break: break-word; }
    .testViaUploadModal .itemList .listItemTopbar .itemSimilarity,
    .testViaUploadModal .itemList .listItemContent .itemSimilarity {
      width: 40%; }
    .testViaUploadModal .itemList .listItemTopbar .itemImage,
    .testViaUploadModal .itemList .listItemContent .itemImage {
      text-align: left; }
    .testViaUploadModal .itemList .listItemTopbar .itemReport,
    .testViaUploadModal .itemList .listItemContent .itemReport {
      text-align: left; }
    .testViaUploadModal .itemList .listItemContent .itemSimilarity {
      font-size: 20px; }
    .testViaUploadModal .itemList .mCustomScrollBox {
      width: 100%;
      height: auto !important;
      max-width: 100%;
      max-height: auto !important; }
    .testViaUploadModal .itemList .matchFoundResult {
      border: solid 2px #ff8f00;
      padding: 15px 10px;
      border-radius: 2px;
      margin-top: 0; }
      .testViaUploadModal .itemList .matchFoundResult ul {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        font-size: 16px;
        text-align: center;
        color: #595959; }
        @media (max-width: 1200px) {
          .testViaUploadModal .itemList .matchFoundResult ul {
            font-size: 14px; } }
        @media (max-width: 480px) {
          .testViaUploadModal .itemList .matchFoundResult ul {
            font-size: 12px; } }
        .testViaUploadModal .itemList .matchFoundResult ul b {
          font-weight: 500;
          font-size: 18px;
          display: block; }
          @media (max-width: 1200px) {
            .testViaUploadModal .itemList .matchFoundResult ul b {
              font-size: 14px; } }
          @media (max-width: 480px) {
            .testViaUploadModal .itemList .matchFoundResult ul b {
              font-size: 12px; } }
        .testViaUploadModal .itemList .matchFoundResult ul span {
          max-width: 200px;
          display: inline-block;
          line-height: initial;
          margin-bottom: -1px; }
      .testViaUploadModal .itemList .matchFoundResult .itemclassName {
        width: 45%;
        word-break: break-word; }
      .testViaUploadModal .itemList .matchFoundResult .itemSimilarity {
        width: 35%; }
    .testViaUploadModal .itemList .mfRuslt .itemImage {
      width: 23%;
      text-align: left; }
    .testViaUploadModal .itemList .mfRuslt .itemclassName {
      width: 25%; }
    .testViaUploadModal .itemList .mfRuslt .itemSimilarity {
      width: 25%; }
  .testViaUploadModal .jsonResponse {
    display: inline-flex;
    color: #8020CF;
    font-family: "Euclid Circular B";
    font-size: 16px;
    font-weight: 600; }
  .testViaUploadModal .thumbnailWrapper {
    border-top: 1px solid #E3E3E3;
    background-color: #F9FCFF;
    padding: 5px 20px;
    margin-top: 5px;
    margin-left: -20px;
    margin-right: -20px;
    height: 100px; }
    .testViaUploadModal .thumbnailWrapper .uploadImageVideo {
      color: #595959;
      font-size: 12px;
      margin-bottom: 10px; }
    .testViaUploadModal .thumbnailWrapper ul {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-direction: row;
      width: 100%;
      max-width: 1100px;
      overflow: hidden;
      white-space: nowrap;
      margin: 0;
      text-align: left; }
    .testViaUploadModal .thumbnailWrapper .mCustomScrollBox {
      height: auto !important; }
    .testViaUploadModal .thumbnailWrapper .thumbnail {
      width: 50px !important;
      height: 50px;
      border-radius: 5px;
      overflow: hidden;
      border: solid 2px #777;
      opacity: 0.5;
      box-shadow: 0px 0px 11px rgba(0, 0, 0, 0.12);
      margin: 0 10px 0 0;
      /*display: -webkit-inline-box;*/
      display: inline-flex;
      justify-content: center;
      /*align-items: center;*/
      background-color: #fff; }
      @media (max-width: 480px) {
        .testViaUploadModal .thumbnailWrapper .thumbnail {
          width: 40px !important;
          height: 40px;
          margin-right: 15px; } }
      .testViaUploadModal .thumbnailWrapper .thumbnail img {
        max-width: 60px;
        max-height: 60px; }
        @media (max-width: 480px) {
          .testViaUploadModal .thumbnailWrapper .thumbnail img {
            max-width: 40px;
            max-height: 40px; } }
      .testViaUploadModal .thumbnailWrapper .thumbnail:hover {
        opacity: 1;
        border-color: #48FDE1; }
    .testViaUploadModal .thumbnailWrapper .active {
      opacity: 1;
      border-color: #48FDE1; }
  .testViaUploadModal #testViaUploadModal {
    width: 100%; }
  .testViaUploadModal .noMatchFound {
    position: absolute;
    top: 25%;
    margin: auto;
    text-align: center;
    width: 100%;
    justify-content: center;
    display: none; }
    .testViaUploadModal .noMatchFound h5 {
      font-weight: 400;
      font-size: 24px;
      color: #8020CF;
      margin-bottom: 15px; }
    .testViaUploadModal .noMatchFound p {
      font-size: 18px;
      color: #535353;
      font-weight: 600; }
    .testViaUploadModal .noMatchFound .noMatchFoundAction {
      margin-top: 40px;
      display: flex;
      justify-content: space-between;
      padding: 0 50px; }
      .testViaUploadModal .noMatchFound .noMatchFoundAction .checkbox {
        display: inline-flex;
        align-items: center;
        position: relative;
        cursor: pointer;
        margin: 0 20px;
        color: #202223; }
        .testViaUploadModal .noMatchFound .noMatchFoundAction .checkbox input[type="radio"] {
          display: none; }
        .testViaUploadModal .noMatchFound .noMatchFoundAction .checkbox span {
          width: 19px;
          height: 19px;
          border-radius: 20px;
          border: 2px solid #E0E0E0;
          background: #ffffff;
          margin-right: 10px;
          background-size: 10px;
          display: inline-block;
          position: relative; }
        .testViaUploadModal .noMatchFound .noMatchFoundAction .checkbox input[type="radio"]:checked + span {
          background: #20B526 url(../img/ch-check-white.svg) center center no-repeat;
          border-color: #20B526; }

.objectPerceptionDetail .testViaUploadModal .galleryAreaSection canvas {
  max-height: 92%; }

.tvuExampleOutput .thumbnailWrapper {
  display: none; }

.testViaUploadModal.objectDetection .listItemContent .prediction_model li img {
  min-width: 60px;
  object-fit: cover; }

.testViaUploadModal.objectDetection .prediction_model {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  border: solid 2px transparent;
  border-bottom: solid 1px #dadada; }
  .testViaUploadModal.objectDetection .prediction_model:hover {
    border-color: #e02020; }

.testViaUploadModal.objectDetection .itemList .listItemTopbar .itemImage,
.testViaUploadModal.objectDetection .itemList .listItemContent .itemImage {
  width: 23%;
  overflow: hidden;
  position: relative; }
  .testViaUploadModal.objectDetection .itemList .listItemTopbar .itemImage img,
  .testViaUploadModal.objectDetection .itemList .listItemContent .itemImage img {
    max-height: 70px;
    object-fit: cover; }
    @media (max-width: 480px) {
      .testViaUploadModal.objectDetection .itemList .listItemTopbar .itemImage img,
      .testViaUploadModal.objectDetection .itemList .listItemContent .itemImage img {
        max-height: 50px; } }

.testViaUploadModal.objectDetection .itemList .listItemTopbar .itemclassName,
.testViaUploadModal.objectDetection .itemList .listItemContent .itemclassName {
  width: 25%;
  word-break: break-word; }

.testViaUploadModal.objectDetection .itemList .listItemTopbar .itemSimilarity,
.testViaUploadModal.objectDetection .itemList .listItemContent .itemSimilarity {
  width: 25%; }

.testViaUploadModal.objectDetection .matchFoundResult {
  border: solid 2px #ccc;
  padding: 5px;
  border-radius: 2px; }
  .testViaUploadModal.objectDetection .matchFoundResult ul {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 12px;
    text-align: center;
    color: #595959; }
    .testViaUploadModal.objectDetection .matchFoundResult ul b {
      margin-right: 5px;
      font-weight: 500; }
    .testViaUploadModal.objectDetection .matchFoundResult ul span {
      max-width: 90px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: inline-block;
      line-height: 10px;
      margin-bottom: -1px; }
  .testViaUploadModal.objectDetection .matchFoundResult .itemImage {
    width: 23%; }
    .testViaUploadModal.objectDetection .matchFoundResult .itemImage img {
      max-height: 52px; }
  .testViaUploadModal.objectDetection .matchFoundResult .itemclassName {
    width: 30%;
    word-break: break-word; }
  .testViaUploadModal.objectDetection .matchFoundResult .itemSimilarity {
    width: 25%; }

.testViaUploadModalDZ .modal-dialog {
  max-width: 650px; }

.testViaUploadModalDZ .createPerceptionInside {
  padding: 0 40px; }

.videoAnnotationPlay {
  width: 65px;
  height: 36px;
  background-color: #F2E9FA;
  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.08), inset 0px -1px 0px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  cursor: pointer; }
  .videoAnnotationPlay .fa {
    color: #303030; }

.annotationAreaInfoMessage {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #1c1e27;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99; }
  .annotationAreaInfoMessage span {
    color: white; }

.annotateImageGallery .annotorious-popup {
  width: 284px;
  background: #ffffff;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.147645);
  border-radius: 10px;
  padding: 15px; }

.annotateImageGallery .annotorious-editor {
  width: 440px;
  height: auto !important;
  background: #ffffff;
  box-shadow: 0px 3px 5px rgba(6, 0, 41, 0.2);
  border-radius: 5px;
  padding: 20px;
  z-index: 3 !important; }
  .annotateImageGallery .annotorious-editor form {
    position: relative;
    margin: 0; }
  .annotateImageGallery .annotorious-editor .annotorious-editor-text {
    background: #f7f7f7;
    border: 1px solid #EAEAEA;
    border-radius: 5px;
    padding: 10px;
    height: 42px !important;
    width: 100% !important; }
  .annotateImageGallery .annotorious-editor label {
    font-size: 14px;
    line-height: 16px;
    color: #9b9b9b;
    padding: 0 5px;
    background-color: #fff;
    position: absolute;
    margin: 0;
    left: 26px;
    top: -8px;
    display: none; }

.annotateImageGallery .annotorious-editor-button-container {
  display: flex;
  align-items: center;
  justify-content: flex-end; }

.annotateImageGallery .annotorious-editor-recomended-container {
  min-height: 80px;
  max-height: 110px;
  overflow-y: auto; }

.fullpage .annotorious-editor-recomended-container {
  max-height: 110px;
  overflow-y: auto; }

.annotatedThumnailContainer {
  min-height: 600px; }

.btnUploadDone {
  max-width: 150px;
  width: 100%;
  padding: 10px;
  margin: 10px auto 0; }

/* Tooltip text */
.overMe {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: 25px;
  z-index: 2; }
  .overMe .overMeText {
    visibility: hidden;
    min-width: 120px;
    max-width: 120px;
    background-color: #fff;
    color: #595959;
    text-align: center;
    padding: 5px;
    border-radius: 6px;
    position: absolute;
    z-index: 1;
    border: solid 1px #ccc;
    font-size: 12px;
    transition: all 0.3s; }
    .overMe .overMeText:before, .overMe .overMeText:after {
      content: '';
      position: absolute;
      width: 10px;
      margin: 0 auto;
      left: 0;
      right: 0;
      bottom: 100%; }
    .overMe .overMeText:before {
      border-bottom: solid 8px #bbb;
      border-right: solid 8px transparent;
      border-left: solid 8px transparent; }
    .overMe .overMeText:after {
      border-bottom: solid 7px #fff;
      border-right: solid 7px transparent;
      border-left: solid 7px transparent; }
    .overMe .overMeText span.text {
      width: 100%;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      display: block; }
  .overMe .bottom {
    top: 100%;
    left: 15px; }
  .overMe .top {
    bottom: 100%;
    left: 15px; }
  .overMe:hover .overMeText {
    visibility: visible; }

.statusTooltip {
  position: relative; }
  .statusTooltip .statusText {
    visibility: hidden;
    width: 145px;
    background-color: #fff;
    color: #595959;
    text-align: center;
    padding: 10px;
    border-radius: 6px;
    position: absolute;
    left: -62px;
    right: 0;
    top: 30px;
    margin: 0 auto;
    z-index: 5;
    border: solid 1px #ccc;
    font-size: 12px;
    transition: all 0.2s;
    word-break: break-word;
    white-space: normal; }
    .statusTooltip .statusText:before, .statusTooltip .statusText:after {
      content: '';
      position: absolute;
      width: 10px;
      margin: 0 auto;
      left: 0;
      right: 0;
      bottom: 100%; }
    .statusTooltip .statusText:before {
      border-bottom: solid 8px #bbb;
      border-right: solid 8px transparent;
      border-left: solid 8px transparent; }
    .statusTooltip .statusText:after {
      border-bottom: solid 7px #fff;
      border-right: solid 7px transparent;
      border-left: solid 7px transparent; }
  .statusTooltip:hover .statusText {
    visibility: visible; }

#trainingData .overMe .overMeText {
  bottom: 75px;
  left: 0;
  right: 0;
  margin: 0 2px; }
  #trainingData .overMe .overMeText:before, #trainingData .overMe .overMeText:after {
    top: 100%;
    bottom: auto; }
  #trainingData .overMe .overMeText:before {
    border-bottom: 0;
    border-top: solid 8px #bbb;
    border-right: solid 8px transparent;
    border-left: solid 8px transparent; }
  #trainingData .overMe .overMeText:after {
    border-bottom: 0;
    border-top: solid 7px #fff;
    border-right: solid 7px transparent;
    border-left: solid 7px transparent; }

#training_data_image .overMe .overMeText {
  bottom: 75px;
  left: 0;
  right: 0;
  margin: 0 auto;
  line-height: initial;
  max-width: 160px; }
  #training_data_image .overMe .overMeText:before, #training_data_image .overMe .overMeText:after {
    top: 100%;
    bottom: auto; }
  #training_data_image .overMe .overMeText:before {
    border-bottom: 0;
    border-top: solid 8px #bbb;
    border-right: solid 8px transparent;
    border-left: solid 8px transparent; }
  #training_data_image .overMe .overMeText:after {
    border-bottom: 0;
    border-top: solid 7px #fff;
    border-right: solid 7px transparent;
    border-left: solid 7px transparent; }

.tagsSearch .perceptionSearch .result {
  white-space: nowrap;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  float: left; }
  .tagsSearch .perceptionSearch .result .backBtn {
    width: 10px; }
    .tagsSearch .perceptionSearch .result .backBtn img {
      -webkit-filter: invert(32%) sepia(9%) saturate(131%) hue-rotate(182deg) brightness(95%) contrast(81%);
      filter: invert(32%) sepia(9%) saturate(131%) hue-rotate(182deg) brightness(95%) contrast(81%);
      margin: 0; }

.testViaUploadModal .listItemTopbar li {
  font-size: 16px; }
  @media (max-width: 1366px) {
    .testViaUploadModal .listItemTopbar li {
      font-size: 14px; } }
  @media (max-width: 480px) {
    .testViaUploadModal .listItemTopbar li {
      font-size: 12px; } }

.testViaUploadModal .modelIdNameGroup {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start; }
  .testViaUploadModal .modelIdNameGroup .group {
    display: inline-flex;
    flex-direction: column; }
  .testViaUploadModal .modelIdNameGroup h5 {
    margin: 0 0 5px;
    color: #4E4576;
    font-size: 16px;
    display: flex;
    align-items: center;
    position: relative;
    font-family: "Euclid Circular B";
    font-weight: 500; }
    .testViaUploadModal .modelIdNameGroup h5:after {
      display: none; }
    .testViaUploadModal .modelIdNameGroup h5.last, .testViaUploadModal .modelIdNameGroup h5:last-child {
      margin-bottom: 0; }
    .testViaUploadModal .modelIdNameGroup h5 span {
      margin-left: 4px;
      font-family: "Euclid Circular B";
      font-weight: 500;
      font-size: 16px;
      line-height: 20px;
      color: #210835; }
    .testViaUploadModal .modelIdNameGroup h5 .titleInfo {
      width: 14px;
      height: 14px;
      display: inline-block;
      margin-left: 6px;
      cursor: pointer;
      background: url(../img/ch-info-darkblue.svg) 0 0 no-repeat;
      background-size: contain; }
    .testViaUploadModal .modelIdNameGroup h5 .customTooltip {
      top: 25px;
      left: 170px;
      white-space: normal;
      width: 100%;
      max-width: 260px;
      padding: 10px;
      border-radius: 10px;
      color: #595959;
      font-size: 15px;
      font-weight: 400; }
    .testViaUploadModal .modelIdNameGroup h5 .titleInfo:hover + .customTooltip {
      visibility: visible;
      opacity: 1; }

.testViaUploadModal .eachTag {
  border: solid 2px #6DBA48;
  color: #0A2E60;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 16px;
  display: inline-flex;
  justify-content: center;
  align-items: center; }

.testViaUploadModal .separateET {
  margin: 0 10px 10px 0; }

.testViaUploadModal .urlInfo {
  position: relative;
  margin-left: 5px;
  position: relative; }
  .testViaUploadModal .urlInfo .customTooltip {
    top: 25px;
    left: auto;
    right: 0;
    color: #595959 !important;
    font-size: 15px; }
  .testViaUploadModal .urlInfo:hover .customTooltip {
    visibility: visible;
    opacity: 1; }

.testViaUploadModal .contentGroup {
  display: inline-flex;
  align-items: center; }
  .testViaUploadModal .contentGroup #match_text {
    font-family: "Euclid Circular B";
    font-weight: 500;
    color: #8020CF;
    font-size: 24px; }

.annotationCustomModalParent.testViaUploadModal {
  align-items: flex-start; }
  .annotationCustomModalParent.testViaUploadModal .thumbnailWrapper ul {
    padding: 0; }
  .annotationCustomModalParent.testViaUploadModal .mCSB_container {
    width: auto; }
  .annotationCustomModalParent.testViaUploadModal .customModalInner .prediction_model {
    border: 0;
    padding: 0;
    flex-direction: row !important;
    border: solid 2px transparent; }
    .annotationCustomModalParent.testViaUploadModal .customModalInner .prediction_model li {
      margin-bottom: 0; }
  .annotationCustomModalParent.testViaUploadModal .listItemTopbar,
  .annotationCustomModalParent.testViaUploadModal .listItemContent {
    align-items: flex-start; }
    .annotationCustomModalParent.testViaUploadModal .listItemTopbar .itemId,
    .annotationCustomModalParent.testViaUploadModal .listItemContent .itemId {
      width: 15%; }
    .annotationCustomModalParent.testViaUploadModal .listItemTopbar .itemImage,
    .annotationCustomModalParent.testViaUploadModal .listItemContent .itemImage {
      width: 23%;
      overflow: hidden; }
      .annotationCustomModalParent.testViaUploadModal .listItemTopbar .itemImage img,
      .annotationCustomModalParent.testViaUploadModal .listItemContent .itemImage img {
        max-height: 52px; }
        @media (max-width: 480px) {
          .annotationCustomModalParent.testViaUploadModal .listItemTopbar .itemImage img,
          .annotationCustomModalParent.testViaUploadModal .listItemContent .itemImage img {
            max-height: 32px; } }
    .annotationCustomModalParent.testViaUploadModal .listItemTopbar .itemclassName,
    .annotationCustomModalParent.testViaUploadModal .listItemContent .itemclassName {
      width: 25%;
      word-break: break-word; }
    .annotationCustomModalParent.testViaUploadModal .listItemTopbar .itemSimilarity,
    .annotationCustomModalParent.testViaUploadModal .listItemContent .itemSimilarity {
      width: 25%; }

.myfacialTestViaUpload #uploadModal.dataset-upload-first-view {
  border: 2px dashed #9B9B9B !important; }

.myfacialTestViaUpload .dataset-upload-placeholder {
  flex-direction: row; }

.myfacialTestViaUpload .note p {
  font-size: 18px;
  font-family: "Euclid Circular B";
  font-weight: 500;
  margin: 0 0 10px;
  color: #595959; }
  .myfacialTestViaUpload .note p strong {
    color: #2C5A99;
    border-bottom: solid 1px #2C5A99;
    font-family: "Euclid Circular B";
    font-weight: 500; }

.myfacialTestViaUpload .dataset_upload_warn {
  display: block;
  color: #787878;
  font-size: 14px;
  font-family: "Euclid Circular B";
  font-weight: 500; }
  .myfacialTestViaUpload .dataset_upload_warn strong {
    font-weight: 400;
    color: #0367A6; }

.myfacialTestViaUpload .testImagesButton {
  max-width: 160px;
  margin: 0 auto !important;
  width: 100%; }

.load-icon .annotateLoader {
  width: 50px;
  height: 50px; }

.darkLoader {
  border-radius: 25px;
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #585858; }
  .darkLoader .annotateLoader {
    position: static; }

.myimageTestviauploadModal .itemList .matchFoundResult ul,
.myimageTestviauploadModal .itemList .listItemContent .eachItem ul,
.myimageTestviauploadModal .itemList .listItemTopbar {
  justify-content: space-between;
  padding-left: 25px;
  padding-right: 25px; }

.myimageTestviauploadModal .itemList .listItemTopbar {
  padding-right: 45px; }

.myimageTestviauploadModal .itemList .matchFoundResult {
  padding-left: 15px;
  padding-right: 15px; }

.myimageTestviauploadModal .itemList .matchFoundResult .itemclassName,
.myimageTestviauploadModal .itemList .matchFoundResult .itemSimilarity,
.myimageTestviauploadModal .itemList .listItemTopbar .itemSimilarity,
.myimageTestviauploadModal .itemList .listItemContent .itemSimilarity,
.myimageTestviauploadModal .itemList .listItemTopbar .itemclassName,
.myimageTestviauploadModal .itemList .listItemContent .itemclassName {
  width: auto; }

.myimageTestviauploadModal .closeModal {
  top: 10px;
  right: 10px; }

.verified_warn .welcomeBtn {
  text-align: center; }

.optionsModal {
  position: fixed;
  z-index: 9999;
  width: 100%;
  height: 100vh;
  background-color: rgba(16, 18, 29, 0.8);
  top: 0;
  left: 0;
  display: none;
  align-items: center;
  justify-content: center; }
  .optionsModal .optionsModalInner {
    padding: 0;
    width: 500px;
    height: 148px;
    background-color: white;
    display: flex;
    flex-direction: row;
    margin: 0;
    position: relative; }
    .optionsModal .optionsModalInner ul {
      padding: 0;
      margin: 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: row; }
    .optionsModal .optionsModalInner li {
      list-style-type: none;
      background: #f9f9f9;
      display: flex;
      flex-direction: column;
      width: 50%;
      align-items: center;
      justify-content: center; }
      .optionsModal .optionsModalInner li input {
        width: 40px; }
      .optionsModal .optionsModalInner li img {
        display: inline-block;
        margin-left: 5px;
        width: 24px;
        -webkit-filter: invert(44%) sepia(80%) saturate(4482%) hue-rotate(188deg) brightness(101%) contrast(101%);
        filter: invert(44%) sepia(80%) saturate(4482%) hue-rotate(188deg) brightness(101%) contrast(101%); }
    .optionsModal .optionsModalInner li:first-of-type {
      border-right: 1px solid #dadada; }

#saveandclose-optionsModal {
  position: absolute;
  bottom: -60px;
  left: 0;
  right: 0;
  margin: auto;
  background: -webkit-gradient(linear, left top, left bottom, from(#138bfa), to(#138bfa));
  background: linear-gradient(to bottom, #138bfa 0%, #138bfa 100%);
  border: 0;
  color: white;
  height: 44px;
  padding: 5px 20px;
  border-radius: 26px;
  width: 160px; }

.optionsModal-visible {
  display: flex; }

.bigLoader-- {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 999;
  background: rgba(0, 0, 0, 0.7);
  top: 0;
  display: none;
  align-items: center;
  justify-content: center; }

.bigLoader--active {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; }

.testViaUploadModal .thumbnailWrapper .mCustomScrollbarHz .mCustomScrollBox {
  height: auto !important;
  width: 100%; }

.icons-inactive {
  opacity: 0.3; }

.deepDetect {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap; }
  .deepDetect label {
    position: static !important;
    padding: 0 !important;
    margin-left: 25px !important; }
  .deepDetect .deepDetectED {
    display: inline-block;
    width: 48px;
    height: 24px;
    background: #f6f7fb;
    border: 1px solid #d0d1d5;
    border-radius: 12px;
    z-index: 2;
    transition: all 0.2s ease-in;
    cursor: pointer;
    position: relative;
    margin-right: 60px; }
    .deepDetect .deepDetectED:before {
      content: '';
      display: block;
      height: 17px;
      width: 17px;
      background: url(../img/enable-check.svg) 0 0 no-repeat;
      border-radius: 50%;
      transform: translateY(0px);
      transition: all 0.2s ease-in;
      position: absolute;
      left: 3px;
      bottom: 3px; }
  .deepDetect .space {
    width: 100%;
    margin: 0 !important; }
  .deepDetect .changeStatusText {
    color: #9b9b9b;
    right: -60px;
    position: absolute; }
  .deepDetect .deepDetectED-disable {
    background: #d0d1d5; }
    .deepDetect .deepDetectED-disable:before {
      transform: translateX(23px);
      background: url(../img/disable-minus.svg) 0 0 no-repeat;
      right: 3px; }
    .deepDetect .deepDetectED-disable .changeStatusText {
      color: #ff4b4b; }

.objectDetection .eachTagsWrapper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  cursor: pointer;
  border-bottom: 1px solid #4f4f4f;
  padding: 15px 0 0 55px;
  position: relative; }
  .objectDetection .eachTagsWrapper:last-child {
    border-bottom: 0; }
  .objectDetection .eachTagsWrapper .seconds {
    /*background-color: #828282;*/
    font-size: 16px;
    font-weight: 600;
    color: #8C9196;
    /*border-radius: 6px;*/
    text-align: center; }
  .objectDetection .eachTagsWrapper .eachTag {
    color: #0A2E60;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    display: inline-flex;
    justify-content: center;
    align-items: center; }

.objectDetection .selected .seconds {
  color: #0367A6; }

.objectDetection .selected .eachTag {
  color: #0A2E60; }

.videoUploadPrediction .eachTagsWrapper {
  align-items: stretch; }

.linear-wipe {
  text-align: center;
  font-size: 20px;
  font-weight: 500;
  background: linear-gradient(to right, #fff 20%, #ff8100 40%, #db920d 60%, #fff 80%);
  background-size: 200% auto;
  color: #000;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 3s linear infinite; }

@keyframes shine {
  to {
    background-position: 200% center; } }

#training_data_data .overMe:hover {
  z-index: 9; }

.trainingArea .preceptionAreaTopInnerBar li {
  padding: 0 10px; }

.trainingArea .eachPreceptionAreaContent li {
  padding: 0 10px; }

.thumbnailsGrid.AnnotationAreaContent .cut-out {
  position: absolute;
  z-index: 9;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }
  .thumbnailsGrid.AnnotationAreaContent .cut-out img {
    width: 100%;
    height: 100%; }

.thumbnailsGrid.AnnotationAreaContent li:hover > .cut-out {
  display: block !important; }

.thumbnailsGrid.AnnotationAreaContent .brand-checkbox {
  font-family: 'DIN Pro';
  color: #fff;
  margin-top: 0px;
  float: left;
  font-size: 14px;
  position: absolute;
  top: 10px;
  right: 10px;
  left: initial;
  bottom: initial;
  z-index: 9;
  border-radius: 3px; }

.thumbnailsGrid.AnnotationAreaContent .brand-checkbox-input {
  display: none; }

.thumbnailsGrid.AnnotationAreaContent .brand-checkbox-icon {
  display: inline-block;
  position: relative;
  width: 24px;
  height: 24px;
  background: #fff;
  margin-top: 0;
  cursor: pointer;
  border: 2px solid #878787;
  border-radius: 4px;
  background-size: cover; }

.thumbnailsGrid.AnnotationAreaContent .brand-checkbox-icon:after {
  display: none; }

.thumbnailsGrid.AnnotationAreaContent .brand-checkbox-input:checked ~ .brand-checkbox-icon {
  opacity: 1;
  background: url(../img/ch-check-white.svg) center center no-repeat;
  background-color: #8020CF;
  border-color: #8020CF;
  background-size: 12px;
  border-radius: 4px; }

.thumbnailsGrid.AnnotationAreaContent a {
  width: 100%; }
  .thumbnailsGrid.AnnotationAreaContent a img {
    filter: brightness(0.8); }

.thumbnailsGrid.AnnotationAreaContent .itemNumber {
  top: initial;
  right: initial;
  left: 7px;
  bottom: 10px;
  z-index: 9; }

.thumbnailsGrid.AnnotationAreaContent .thumbnailType {
  z-index: 9; }

.thumbnailsList.AnnotationAreaContent .cut-out {
  display: none; }

.thumbnailsList.AnnotationAreaContent li:hover > .cut-out {
  display: none !important; }

.thumbnailsList.AnnotationAreaContent .brand-checkbox {
  position: static;
  float: none; }

.thumbnailsList.AnnotationAreaContent .deleteDataset,
.thumbnailsList.AnnotationAreaContent .annotateDataset {
  width: auto;
  display: inline-flex; }

.thumbnailsList.AnnotationAreaContent .deleteDataset {
  display: none; }

.thumbnailsList.AnnotationAreaContent .annotateDataset {
  margin-right: 10px;
  color: #360D57;
  border: solid 1px #360D57;
  font-size: 14px;
  font-weight: 600;
  min-width: 90px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  justify-content: center;
  align-items: center; }

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  height: 4px !important;
  margin: 6px auto !important; }

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  margin: 7px auto !important;
  height: 2px !important; }

.video-js {
  width: 100% !important;
  height: 97%;
  background: #000; }

.vjs-control-bar {
  top: 100% !important;
  z-index: 50 !important;
  background-color: #535353; }

.rotatePortrait {
  transform: rotate(-90deg);
  max-width: 300px;
  margin: 0 auto; }
  @media (max-width: 768px) {
    .rotatePortrait {
      min-height: 305px; } }

.rotatePortraitModal .thumbnailModal-inner {
  height: 327px;
  justify-content: space-around; }
  .rotatePortraitModal .thumbnailModal-inner img {
    transform: rotate(-90deg);
    max-height: 250px;
    max-width: 250px; }

.rotatePortraitModal .tagsUl .resultThumbnailImg {
  transform: rotate(-90deg); }

.myFacialRecognition .renamePerception {
  margin-right: 10px; }

.myFacialRecognition .shareEmail {
  margin-right: 10px; }

.testViaUploadModal.objectTestViaUpload .saveReport,
.testViaUploadModal.objectTestViaUpload .closeReport,
.testViaUploadModal.objectTestViaUpload .saveReportRed {
  width: 15px;
  height: 15px;
  display: inline-flex;
  margin: 0 5px;
  cursor: pointer;
  position: relative; }
  .testViaUploadModal.objectTestViaUpload .saveReport img,
  .testViaUploadModal.objectTestViaUpload .closeReport img,
  .testViaUploadModal.objectTestViaUpload .saveReportRed img {
    min-width: auto !important; }

.testViaUploadModal.objectTestViaUpload .itemList .listItemTopbar {
  padding-right: 20px; }

.testViaUploadModal.objectTestViaUpload .itemList .listItemTopbar li,
.testViaUploadModal.objectTestViaUpload .itemList .listItemContent li {
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  width: 100%; }

.testViaUploadModal.objectTestViaUpload .itemList .listItemTopbar .itemImage,
.testViaUploadModal.objectTestViaUpload .itemList .listItemContent .itemImage {
  width: 20%;
  text-align: center; }

.testViaUploadModal.objectTestViaUpload .itemList .listItemTopbar .itemId,
.testViaUploadModal.objectTestViaUpload .itemList .listItemContent .itemId {
  width: 10%;
  display: none; }

.testViaUploadModal.objectTestViaUpload .itemList .listItemTopbar .itemclassName,
.testViaUploadModal.objectTestViaUpload .itemList .listItemContent .itemclassName {
  width: 20%; }

.testViaUploadModal.objectTestViaUpload .itemList .listItemTopbar .itemSimilarity,
.testViaUploadModal.objectTestViaUpload .itemList .listItemContent .itemSimilarity {
  width: 15%; }

.testViaUploadModal.objectTestViaUpload .itemList .listItemTopbar .itemReport,
.testViaUploadModal.objectTestViaUpload .itemList .listItemContent .itemReport {
  width: 12%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  display: none; }

.testViaUploadModal.objectTestViaUpload .itemList .listItemTopbar .itemAnnotationCheck,
.testViaUploadModal.objectTestViaUpload .itemList .listItemContent .itemAnnotationCheck {
  width: 26%; }

.testViaUploadModal.objectTestViaUpload .itemList .listItemTopbar .itemAddClass,
.testViaUploadModal.objectTestViaUpload .itemList .listItemContent .itemAddClass {
  width: 15%;
  display: none; }

.testViaUploadModal.objectTestViaUpload .itemList .itemAnnotationCheck .checkbox {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 30%;
  cursor: pointer;
  width: 100%;
  margin-bottom: 10px; }
  .testViaUploadModal.objectTestViaUpload .itemList .itemAnnotationCheck .checkbox:last-child {
    margin-bottom: 0; }
  .testViaUploadModal.objectTestViaUpload .itemList .itemAnnotationCheck .checkbox input[type="checkbox"] {
    display: none; }
  .testViaUploadModal.objectTestViaUpload .itemList .itemAnnotationCheck .checkbox .checkboxSpan {
    width: 18px;
    height: 18px;
    display: inline-block;
    margin-right: 10px;
    background: #ffffff;
    border: 2px solid #8C9196;
    border-radius: 4px; }
  .testViaUploadModal.objectTestViaUpload .itemList .itemAnnotationCheck .checkbox.true input[type="checkbox"]:checked + .checkboxSpan,
  .testViaUploadModal.objectTestViaUpload .itemList .itemAnnotationCheck .checkbox.true input[type="radio"]:checked + .checkboxSpan {
    background: #00875A url(../img/ch-check-white.svg) center center no-repeat;
    border-color: #00875A; }
  .testViaUploadModal.objectTestViaUpload .itemList .itemAnnotationCheck .checkbox.false input[type="checkbox"]:checked + .checkboxSpan,
  .testViaUploadModal.objectTestViaUpload .itemList .itemAnnotationCheck .checkbox.false input[type="radio"]:checked + .checkboxSpan {
    background: #D72C0D url(../img/ch-check-white.svg) center center no-repeat;
    border-color: #D72C0D; }

.testViaUploadModal.objectTestViaUpload .itemList .addClassBtn {
  min-width: 92px;
  height: 30px;
  border: 1px solid #747474;
  background-color: #ffffff;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 600;
  color: #202223; }
  .testViaUploadModal.objectTestViaUpload .itemList .addClassBtn:hover, .testViaUploadModal.objectTestViaUpload .itemList .addClassBtn:focus {
    color: #202223; }

.testViaUploadModal.objectTestViaUpload .itemList .alignedLeftclassName .listItemTopbar .itemclassName,
.testViaUploadModal.objectTestViaUpload .itemList .alignedLeftclassName .listItemContent .itemclassName {
  width: 50%; }

.objectTestViaUpload .closeModal {
  top: 10px;
  right: 10px; }

.objectTestViaUpload .itemList h4 {
  display: flex;
  justify-content: space-between;
  align-items: center; }
  .objectTestViaUpload .itemList h4 a {
    color: #8020CF;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600; }
  .objectTestViaUpload .itemList h4 a:hover,
  .objectTestViaUpload .itemList h4 a:focus {
    color: #8020CF !important;
    text-decoration: none; }

.objectTestViaUpload .listItemContent .mCSB_inside > .mCSB_container {
  height: auto; }

.objectTestViaUpload .contentGroup {
  display: inline-flex;
  align-items: center; }
  .objectTestViaUpload .contentGroup #match_text {
    font-family: "Euclid Circular B";
    font-weight: 500;
    color: #8020CF;
    font-size: 24px; }
  .objectTestViaUpload .contentGroup.noMatchFound {
    position: static;
    margin-top: 100px; }

.objectTestViaUpload .noMatchFound_ p {
  font-size: 18px;
  color: #535353;
  font-weight: 600;
  text-align: center; }

.objectTestViaUpload .noMatchFound_ .noMatchFoundAction {
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
  padding: 0 50px; }

.objectTestViaUpload .noMatchFound_ .radioInline {
  display: inline-flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  margin: 0 20px;
  color: #202223; }
  @media (max-width: 1500px) {
    .objectTestViaUpload .noMatchFound_ .radioInline {
      margin: 0; } }
  .objectTestViaUpload .noMatchFound_ .radioInline input[type="radio"] {
    display: none; }
  .objectTestViaUpload .noMatchFound_ .radioInline span {
    width: 19px;
    height: 19px;
    border-radius: 20px;
    border: 2px solid #E0E0E0;
    background: #ffffff;
    margin-right: 10px;
    background-size: 10px;
    display: inline-block;
    position: relative; }
    .objectTestViaUpload .noMatchFound_ .radioInline span:before {
      width: 11px;
      height: 11px;
      border-radius: 20px;
      position: absolute;
      top: 2px;
      left: 2px;
      content: '';
      display: inline-block;
      background: transparent; }
  .objectTestViaUpload .noMatchFound_ .radioInline input[type="radio"]:checked + span {
    border-color: #8020CF; }
  .objectTestViaUpload .noMatchFound_ .radioInline input[type="radio"]:checked + span:before {
    background: #8020CF; }

.objectTestViaUpload .noMatchFound_ .selectClassNameList {
  padding: 0 50px;
  margin-top: 50px;
  text-align: left;
  display: none; }
  .objectTestViaUpload .noMatchFound_ .selectClassNameList h6 {
    color: #210835;
    font-size: 16px;
    font-weight: 600;
    padding-bottom: 10px;
    margin: 0 0 10px;
    border-bottom: 1px solid #E0E0E0; }
  .objectTestViaUpload .noMatchFound_ .selectClassNameList .mCustomScrollbar {
    height: 130px;
    overflow: hidden;
    margin-bottom: 50px; }
  .objectTestViaUpload .noMatchFound_ .selectClassNameList ul li {
    padding: 10px; }
    .objectTestViaUpload .noMatchFound_ .selectClassNameList ul li label {
      margin: 0;
      font-weight: 400;
      font-size: 14px;
      display: flex;
      align-items: center; }
      .objectTestViaUpload .noMatchFound_ .selectClassNameList ul li label input[type="checkbox"] {
        width: 18px;
        height: 18px;
        border: 2px solid #878787;
        border-radius: 4px;
        background: #ffffff;
        margin-right: 20px;
        outline: none;
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none; }
        .objectTestViaUpload .noMatchFound_ .selectClassNameList ul li label input[type="checkbox"]:checked {
          border-color: #8020CF;
          background: #8020CF url(../img/ch-check-white.svg) center center no-repeat; }
        .objectTestViaUpload .noMatchFound_ .selectClassNameList ul li label input[type="checkbox"]:focus {
          outline: none; }
  .objectTestViaUpload .noMatchFound_ .selectClassNameList .saveBtn {
    width: 100%;
    max-width: 400px;
    height: 44px;
    background: #8020CF;
    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.08), inset 0px -1px 0px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    color: #ffffff;
    font-weight: 500;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    border: none; }
    .objectTestViaUpload .noMatchFound_ .selectClassNameList .saveBtn:disabled {
      background: #F7F7F7;
      color: #B7B7B7; }

.tvuReportModalOverlay {
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 9999;
  width: 100%;
  height: 100%;
  visibility: hidden;
  opacity: 0;
  padding: 15px; }

.tvuReportModalOverlay.show {
  opacity: 1;
  visibility: visible; }

.tvuReportModal {
  width: 320px;
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 0px 4px 13px rgba(0, 0, 0, 0.27);
  padding: 15px;
  z-index: 99992;
  position: absolute;
  margin-top: 10px;
  transform: translateX(-100%);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden; }
  .tvuReportModal .form-control {
    background: #fffefe;
    border: 1px solid #bebebe;
    box-sizing: border-box;
    border-radius: 21px;
    margin-bottom: 5px;
    min-height: 40px;
    padding: 0 15px;
    display: flex;
    align-items: center; }
    .tvuReportModal .form-control:focus {
      border-color: #bebebe; }
  .tvuReportModal p {
    text-align: right;
    margin-bottom: 15px;
    color: #595959;
    font-size: 14px; }
  .tvuReportModal .reportTags {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    max-height: 100px;
    overflow-y: auto; }
  .tvuReportModal .reportTag {
    background: #138bfa;
    border-radius: 5px;
    color: #fff;
    margin-bottom: 10px;
    margin-right: 10px;
    padding: 1px 10px;
    font-size: 14px;
    text-transform: capitalize;
    letter-spacing: 0.5px; }
    .tvuReportModal .reportTag:focus {
      color: #fff !important; }
  .tvuReportModal .reportTag.selected {
    opacity: 0.7; }
  .tvuReportModal .buttonsWrpper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px; }
    .tvuReportModal .buttonsWrpper button {
      margin: 0 5px;
      box-shadow: none;
      height: 34px;
      width: 90px; }
  .tvuReportModal .orange-button:hover {
    border-color: #f7941d; }

.tvuReportModal.show {
  opacity: 1;
  visibility: visible; }

.missingResultModal {
  background-color: rgba(0, 0, 0, 0.2); }
  .missingResultModal .closeMissingModal {
    background: transparent;
    position: absolute;
    right: 20px;
    top: 20px;
    cursor: pointer;
    border: 0;
    padding: 0;
    z-index: 99;
    opacity: 0.7;
    width: 14px;
    height: 14px; }
  .missingResultModal .buttonsWrpper {
    display: flex;
    justify-content: center; }
  .missingResultModal .btnSave {
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90%;
    margin: 0 auto;
    font-size: 16px;
    border-radius: 5px; }
    .missingResultModal .btnSave:disabled {
      background: #F6F6F7;
      color: #8C9196 !important;
      pointer-events: none;
      opacity: 1;
      border: none; }
  .missingResultModal .modal-dialog {
    max-width: 630px; }
  .missingResultModal .modal-content {
    flex-direction: column !important;
    border-radius: 10px; }
  .missingResultModal .infoContent {
    font-size: 16px;
    font-family: "Euclid Circular B";
    font-weight: 400;
    color: #535353;
    margin: 0 0 30px; }
  .missingResultModal .classListArea {
    width: 100%;
    padding: 30px; }
    .missingResultModal .classListArea .head ul {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      font-size: 18px;
      font-family: "Euclid Circular B";
      font-weight: 500;
      color: #210835;
      margin: 0 0 10px;
      border-bottom: 1px solid #D8D8D8;
      padding-bottom: 10px; }
    .missingResultModal .classListArea .head .checkClassName {
      width: 20%;
      align-items: center; }
    .missingResultModal .classListArea .head .className {
      width: 80%;
      text-indent: -114px; }
    .missingResultModal .classListArea .classList > ul {
      height: 230px;
      margin-bottom: 0;
      padding-left: 10px; }
    .missingResultModal .classListArea .classList .eachItem > ul {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding: 10px 0; }
    .missingResultModal .classListArea .classList .eachItem li {
      display: inline-flex;
      align-items: center;
      min-height: 30px;
      color: #202223; }
    .missingResultModal .classListArea .classList .checkClassName {
      width: 8%; }
    .missingResultModal .classListArea .classList .className {
      width: 90%; }
    .missingResultModal .classListArea .classList #ObjClassName {
      width: 100%; }
    .missingResultModal .classListArea .mCSB_inside > .mCSB_container {
      margin-right: 20px !important;
      display: flex; }
  .missingResultModal .checkbox {
    margin: 0; }
    .missingResultModal .checkbox span {
      height: 18px;
      width: 18px;
      display: inline-block;
      position: relative;
      cursor: pointer;
      border-radius: 4px;
      border: 2px solid #878787; }
    .missingResultModal .checkbox input[type='checkbox'] {
      display: none; }
  .missingResultModal [type='checkbox']:checked + span {
    /*background: url(../img/checkbox-active.svg) 0 0 no-repeat;*/
    background: #8020CF url(../img/ch-check-white.svg) center center no-repeat;
    background-size: 10px;
    border: none; }

.retrainEnable,
.retrainBtn {
  width: 20px;
  height: 20px;
  background: transparent;
  border: 0;
  margin-left: 10px;
  padding: 0; }
  .retrainEnable img,
  .retrainBtn img {
    filter: invert(32%) sepia(6%) saturate(211%) hue-rotate(182deg) brightness(95%) contrast(80%); }

.retrain-disable {
  opacity: 0.5;
  cursor: not-allowed; }

.annotatedThumnailContainer .thumbnailsGrid .className {
  background-color: #138bfa;
  border-radius: 20px;
  padding: 5px 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #fff;
  width: 100%;
  max-width: 120px;
  margin: 0 auto;
  font-size: 12px;
  text-align: center;
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  opacity: 0;
  z-index: 9; }

.annotatedThumnailContainer .thumbnailsGrid li:hover .thumbnailType,
.annotatedThumnailContainer .thumbnailsGrid li:hover .itemNumber,
.annotatedThumnailContainer .thumbnailsGrid li:hover .annotedCompleted,
.annotatedThumnailContainer .thumbnailsGrid li:hover .annotedNotCompleted {
  opacity: 0.5; }

.annotatedThumnailContainer .thumbnailsGrid li:hover .className {
  opacity: 1; }

.annotatedThumnailContainer .thumbnailsList li:hover .thumbnailType,
.annotatedThumnailContainer .thumbnailsList li:hover .itemNumber,
.annotatedThumnailContainer .thumbnailsList li:hover .annotedCompleted,
.annotatedThumnailContainer .thumbnailsList li:hover .annotedNotCompleted {
  opacity: 1; }

.annotatedThumnailContainer .thumbnailsList li:hover .className {
  opacity: 0; }

.createDatasetInfo,
.datasetDetailInfo {
  position: fixed;
  top: 0;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 0 15px;
  font-size: 17px;
  font-weight: 300;
  opacity: 0;
  visibility: hidden;
  z-index: 9999; }
  .createDatasetInfo p,
  .datasetDetailInfo p {
    color: #58595b;
    margin: 15px 0;
    text-align: center;
    font-weight: 400;
    font-size: 18px; }
  .createDatasetInfo a,
  .datasetDetailInfo a {
    color: #fff;
    padding: 5px 30px;
    font-weight: 400;
    background: #f7941d;
    margin: 0 5px;
    font-family: "Roboto";
    border-radius: 30px; }
    .createDatasetInfo a:focus, .createDatasetInfo a:active, .createDatasetInfo a:hover,
    .datasetDetailInfo a:focus,
    .datasetDetailInfo a:active,
    .datasetDetailInfo a:hover {
      color: #fff !important; }
  .createDatasetInfo .createDatasetInfoInner,
  .createDatasetInfo .datasetDetailInfoInner,
  .datasetDetailInfo .createDatasetInfoInner,
  .datasetDetailInfo .datasetDetailInfoInner {
    background: #ffffff;
    border-radius: 20px;
    padding: 20px;
    width: 100%;
    max-width: 400px;
    min-height: 200px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center; }
    .createDatasetInfo .createDatasetInfoInner img,
    .createDatasetInfo .datasetDetailInfoInner img,
    .datasetDetailInfo .createDatasetInfoInner img,
    .datasetDetailInfo .datasetDetailInfoInner img {
      width: 45px;
      filter: invert(45%) sepia(95%) saturate(4753%) hue-rotate(196deg) brightness(104%) contrast(104%); }
    .createDatasetInfo .createDatasetInfoInner span,
    .createDatasetInfo .datasetDetailInfoInner span,
    .datasetDetailInfo .createDatasetInfoInner span,
    .datasetDetailInfo .datasetDetailInfoInner span {
      font-size: 12px; }

.createDatasetInfo-active,
.datasetDetailInfo-active {
  opacity: 1;
  visibility: visible;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in; }

.perceptionReportModal .modal-lg,
.perceptionReportDetailModal .modal-lg {
  max-width: 1100px; }

.perceptionReportModal .reportTable,
.perceptionReportDetailModal .reportTable {
  width: 100%;
  padding: 55px 20px; }
  .perceptionReportModal .reportTable .info,
  .perceptionReportDetailModal .reportTable .info {
    width: 16px;
    height: 16px;
    margin-left: 2px; }
  .perceptionReportModal .reportTable .tablehead,
  .perceptionReportDetailModal .reportTable .tablehead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f6f7fb;
    padding: 15px 0;
    margin: 0 0 5px;
    border-radius: 10px; }
    .perceptionReportModal .reportTable .tablehead li,
    .perceptionReportDetailModal .reportTable .tablehead li {
      padding: 0 15px;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 15%; }
    .perceptionReportModal .reportTable .tablehead .perceptionName,
    .perceptionReportModal .reportTable .tablehead .className,
    .perceptionReportDetailModal .reportTable .tablehead .perceptionName,
    .perceptionReportDetailModal .reportTable .tablehead .className {
      width: 18%; }
    .perceptionReportModal .reportTable .tablehead .download,
    .perceptionReportDetailModal .reportTable .tablehead .download {
      width: 10%; }
  .perceptionReportModal .reportTable .tableBody,
  .perceptionReportDetailModal .reportTable .tableBody {
    margin: 0;
    width: 100%;
    min-height: 320px;
    max-height: 400px;
    overflow: hidden;
    position: relative; }
    @media (min-width: 1400px) {
      .perceptionReportModal .reportTable .tableBody,
      .perceptionReportDetailModal .reportTable .tableBody {
        min-height: 400; } }
    .perceptionReportModal .reportTable .tableBody .eachTableRaw ul,
    .perceptionReportDetailModal .reportTable .tableBody .eachTableRaw ul {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 0;
      margin: 0;
      border-bottom: 1px solid #F6F6F7; }
      .perceptionReportModal .reportTable .tableBody .eachTableRaw ul li,
      .perceptionReportDetailModal .reportTable .tableBody .eachTableRaw ul li {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 15%;
        color: #58595b;
        word-break: break-word;
        padding: 0 15px; }
      .perceptionReportModal .reportTable .tableBody .eachTableRaw ul .perceptionName,
      .perceptionReportModal .reportTable .tableBody .eachTableRaw ul .className,
      .perceptionReportDetailModal .reportTable .tableBody .eachTableRaw ul .perceptionName,
      .perceptionReportDetailModal .reportTable .tableBody .eachTableRaw ul .className {
        width: 18%; }
      .perceptionReportModal .reportTable .tableBody .eachTableRaw ul .download,
      .perceptionReportDetailModal .reportTable .tableBody .eachTableRaw ul .download {
        width: 10%; }
    .perceptionReportModal .reportTable .tableBody .downloadbtn,
    .perceptionReportDetailModal .reportTable .tableBody .downloadbtn {
      padding: 0;
      width: 30px;
      height: 30px;
      background: url(../img/ch-download-gray.svg) center center no-repeat;
      border: 0; }
    .perceptionReportModal .reportTable .tableBody .missing,
    .perceptionReportDetailModal .reportTable .tableBody .missing {
      cursor: pointer;
      width: 22px;
      height: 22px;
      background: url(../img/report-missing-icon.svg) center center no-repeat; }

.perceptionReportModal .reportTable .tablehead .className {
  justify-content: flex-start; }

.perceptionReportModal .reportTable .tableBody .eachTableRaw {
  cursor: pointer; }
  .perceptionReportModal .reportTable .tableBody .eachTableRaw ul li {
    position: relative; }
  .perceptionReportModal .reportTable .tableBody .eachTableRaw ul .className {
    justify-content: flex-start; }

.perceptionReportModal .noReport {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: absolute;
  flex-direction: column;
  color: #58595b;
  font-size: 18px;
  text-align: center; }
  .perceptionReportModal .noReport img {
    width: 50px;
    margin-bottom: 20px; }
  .perceptionReportModal .noReport p {
    line-height: 30px; }

.perceptionReportDetailModal .backtoModal {
  position: absolute;
  top: 20px;
  left: 20px;
  background: transparent;
  border: 0;
  padding: 0;
  width: 22px; }

.perceptionReportDetailModal .popover {
  position: absolute;
  top: -10px;
  left: 90px;
  width: 200px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-in-out; }

.perceptionReportDetailModal .eachTableRaw li {
  position: relative; }
  .perceptionReportDetailModal .eachTableRaw li:hover .popover {
    visibility: visible;
    opacity: 1; }

.perceptionReportDetailModal .popover-body {
  color: #58595b; }

.perceptionReportDetailModal .noReport {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: absolute;
  flex-direction: column;
  color: #58595b;
  font-size: 18px;
  text-align: center; }
  .perceptionReportDetailModal .noReport img {
    width: 50px;
    margin-bottom: 20px; }
  .perceptionReportDetailModal .noReport p {
    line-height: 30px; }

.downloadDataset {
  border: 0;
  background-color: transparent;
  padding: 0;
  cursor: pointer; }

.downloadDatasetModal .modal-dialog {
  max-width: 600px; }

.downloadDatasetModal .modal-header {
  padding: 20px 25px; }

.downloadDatasetModal .modal-title {
  text-align: left;
  font-size: 20px; }

.downloadDatasetModal .modal-body {
  padding: 0 25px; }

.downloadDatasetModal .perceptionCreateWrapper p {
  font-weight: 400;
  font-size: 16px;
  color: #595959; }

.downloadDatasetModal .note {
  font-size: 16px;
  color: #4f4f4f;
  margin-bottom: 15px; }

.downloadDatasetModal .selectFileType {
  margin-bottom: 30px;
  margin-top: 20px;
  display: flex; }
  .downloadDatasetModal .selectFileType .radio {
    margin: 0;
    display: inline-flex;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    color: #202223; }
    .downloadDatasetModal .selectFileType .radio:first-child {
      margin-right: 55px; }
    .downloadDatasetModal .selectFileType .radio span {
      margin-right: 10px; }

.downloadDatasetModal .radio {
  display: block;
  margin-bottom: 20px;
  position: relative;
  color: #595959;
  line-height: initial;
  cursor: pointer; }
  .downloadDatasetModal .radio span {
    margin-right: 10px;
    width: 18px;
    height: 18px;
    border: 2px solid #9b9b9b;
    background-color: #ffffff;
    position: relative;
    cursor: pointer;
    border-radius: 100%; }
    .downloadDatasetModal .radio span:before {
      width: 10px;
      height: 10px;
      position: absolute;
      top: 2px;
      left: 2px;
      background-color: #8020CF;
      content: '';
      opacity: 0;
      border-radius: 100%; }

.downloadDatasetModal input[type='radio'] {
  display: none; }

.downloadDatasetModal input[type='radio']:checked + span {
  border-color: #8020CF; }

.downloadDatasetModal input[type='radio']:checked + span:before {
  opacity: 1; }

.downloadDatasetModal .downloadDatasetBtn {
  height: 44px;
  margin-left: auto;
  padding: 0 15px; }

.datasetExtractingModal {
  background-color: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  width: 300px;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 99999;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.25);
  display: none; }
  .datasetExtractingModal .demHeader {
    background-color: #595959;
    padding: 10px 20px;
    color: #ffffff;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between; }
  .datasetExtractingModal .toggleDemContainer {
    transition: all 0.2s ease-in;
    background-color: transparent;
    border: 0;
    padding: 0;
    width: 20px;
    height: 20px; }
  .datasetExtractingModal .toggleDemContainer.rotate {
    transform: rotate(180deg); }
  .datasetExtractingModal .closeDemModal {
    margin-left: 20px;
    background-color: transparent;
    border: 0;
    padding: 0;
    width: 14px;
    height: 20px; }
  .datasetExtractingModal .demContainer {
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between; }
    .datasetExtractingModal .demContainer .action {
      display: flex;
      justify-content: space-between;
      align-items: center; }
      .datasetExtractingModal .demContainer .action a {
        font-size: 12px;
        margin-left: 10px;
        text-decoration: underline; }
    .datasetExtractingModal .demContainer .label {
      margin: 0;
      max-width: 170px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap; }
  .datasetExtractingModal .percentCompleted {
    display: inline-flex;
    margin-left: 5px;
    visibility: hidden;
    opacity: 1;
    transition: all 0.2s ease-in; }
  .datasetExtractingModal .percentCompleted.show {
    visibility: visible;
    opacity: 1; }
  .datasetExtractingModal .extractingCompleted {
    display: none; }
  .datasetExtractingModal .extractingCompleted.show {
    display: inline-flex; }
  .datasetExtractingModal .extractingcanceld {
    display: none; }
  .datasetExtractingModal .extractingcanceld.show {
    display: inline-flex; }
  .datasetExtractingModal .progress {
    width: 40px;
    height: 40px;
    line-height: 40px;
    background: none;
    margin: 0 auto;
    box-shadow: none;
    position: relative; }
  .datasetExtractingModal .progress:after {
    content: '';
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 4px solid #e0e0e0;
    position: absolute;
    top: 0;
    left: 0; }
  .datasetExtractingModal .progress > span {
    width: 50%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    z-index: 1; }
  .datasetExtractingModal .progress .progress-left {
    left: 0; }
  .datasetExtractingModal .progress .progress-bar {
    width: 100%;
    height: 100%;
    background: none;
    border-width: 4px;
    border-style: solid;
    position: absolute;
    top: 0; }
  .datasetExtractingModal .progress .progress-left .progress-bar {
    left: 100%;
    border-top-right-radius: 80px;
    border-bottom-right-radius: 80px;
    border-left: 0;
    -webkit-transform-origin: center left;
    transform-origin: center left; }
  .datasetExtractingModal .progress .progress-right {
    right: 0; }
  .datasetExtractingModal .progress .progress-right .progress-bar {
    left: -100%;
    border-top-left-radius: 80px;
    border-bottom-left-radius: 80px;
    border-right: 0;
    -webkit-transform-origin: center right;
    transform-origin: center right; }
  .datasetExtractingModal .progress .progress-value {
    width: 90%;
    height: 90%;
    border-radius: 50%;
    background: #fff;
    font-size: 12px;
    color: #58595b;
    line-height: 40px;
    text-align: center;
    position: absolute;
    top: 5%;
    left: 5%; }
  .datasetExtractingModal .progress-bar {
    border-color: #138bfa;
    animation: loading-0 1.8s linear forwards; }
  .datasetExtractingModal .progress-bar.load0 {
    animation: loading-0 1.5s linear forwards 1.8s; }
  .datasetExtractingModal .progress-bar.load1 {
    animation: loading-1 1.5s linear forwards 1.8s; }
  .datasetExtractingModal .progress-bar.load2 {
    animation: loading-2 1.5s linear forwards 1.8s; }
  .datasetExtractingModal .progress-bar.load3 {
    animation: loading-3 1.5s linear forwards 1.8s; }
  .datasetExtractingModal .progress-bar.load4 {
    animation: loading-4 1.5s linear forwards 1.8s; }
  .datasetExtractingModal .progress-bar.load5 {
    animation: loading-5 1.5s linear forwards 1.8s; }

.datasetExtractingModalContainer .datasetExtractingModal:nth-child(2) {
  bottom: 140px; }

.datasetExtractingModalContainer .datasetExtractingModal:nth-child(3) {
  bottom: 260px; }

.datasetExtractingModalContainer .datasetExtractingModal:nth-child(4) {
  bottom: 380px; }

.datasetExtractingModalContainer .datasetExtractingModal:nth-child(5) {
  bottom: 500px; }

@keyframes loading-0 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); } }

@keyframes loading-1 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(36deg);
    transform: rotate(36deg); } }

@keyframes loading-2 {
  0% {
    -webkit-transform: rotate(36deg);
    transform: rotate(36deg); }
  100% {
    -webkit-transform: rotate(72deg);
    transform: rotate(72deg); } }

@keyframes loading-3 {
  0% {
    -webkit-transform: rotate(72deg);
    transform: rotate(72deg); }
  100% {
    -webkit-transform: rotate(108deg);
    transform: rotate(108deg); } }

@keyframes loading-4 {
  0% {
    -webkit-transform: rotate(108deg);
    transform: rotate(108deg); }
  100% {
    -webkit-transform: rotate(144deg);
    transform: rotate(144deg); } }

@keyframes loading-5 {
  0% {
    -webkit-transform: rotate(144deg);
    transform: rotate(144deg); }
  100% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg); } }

@media only screen and (max-width: 990px) {
  .progress {
    margin-bottom: 20px; } }

.renameZoneClassModal {
  padding: 0 !important; }
  .renameZoneClassModal .modal-header {
    text-align: left; }
  .renameZoneClassModal label {
    color: #210835;
    font-weight: 400;
    font-size: 14px;
    margin-bottom: 5px; }
  .renameZoneClassModal .form-control {
    background: #f7f7f7;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    height: 50px;
    padding-left: 20px;
    padding-right: 20px;
    width: 100% !important;
    box-shadow: none; }
    .renameZoneClassModal .form-control:focus {
      outline-color: #8020CF;
      box-shadow: none !important;
      color: #202223;
      outline-style: solid;
      outline-width: 1px;
      border-color: #8020CF;
      background: none; }
  .renameZoneClassModal .renameform {
    padding: 0 25px;
    width: 100%;
    margin: 0; }
  .renameZoneClassModal .cancelBtn {
    background: transparent !important;
    color: #303030;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer; }
    .renameZoneClassModal .cancelBtn:hover, .renameZoneClassModal .cancelBtn:focus {
      color: #303030; }
  .renameZoneClassModal .renameAnnotateBtn {
    background: #F2E9FA;
    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.08), inset 0px -1px 0px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    color: #303030;
    height: 36px;
    padding: 0 15px;
    border: none;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    align-items: center; }
    .renameZoneClassModal .renameAnnotateBtn:focus {
      outline: none; }
  .renameZoneClassModal .modalButtonsRight {
    margin-bottom: 0; }

.extracting .stickyMenu {
  display: none; }

.marked {
  padding-left: 30px;
  display: none; }
  .marked p {
    width: 100%;
    text-align: center;
    color: #535353;
    margin: 10px 0 45px;
    font-size: 18px;
    font-weight: 600;
    font-family: "Euclid Circular B"; }
  .marked .greenIcon {
    margin-right: 10px; }
  .marked .greenIcon,
  .marked .redIcon {
    width: 15px;
    height: 15px;
    cursor: pointer; }
  .marked .group {
    display: flex;
    justify-content: space-between;
    width: 80%;
    margin: 0 auto 50px; }
    .marked .group .radioInline {
      margin: 0;
      font-weight: 400;
      font-size: 14px;
      color: #535353;
      display: inline-flex; }
      .marked .group .radioInline input[type="radio"] {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        margin-right: 10px;
        border: 2px solid #E0E0E0;
        width: 18px;
        height: 18px;
        border-radius: 40px;
        position: relative; }
        .marked .group .radioInline input[type="radio"]:before {
          border-radius: 40px;
          width: 10px;
          height: 10px;
          background-color: #fff;
          position: absolute;
          top: 2px;
          left: 2px;
          content: ''; }
      .marked .group .radioInline input[type="radio"]:focus {
        outline: none;
        border: 2px solid #E0E0E0;
        background: transparent; }
      .marked .group .radioInline input[type="radio"]:checked {
        border-color: #8020CF; }
        .marked .group .radioInline input[type="radio"]:checked:before {
          background-color: #8020CF; }
  .marked .classNameList {
    display: none;
    flex-direction: column;
    width: 100%; }
    .marked .classNameList h5 {
      color: #210835;
      margin-bottom: 10px;
      font-size: 16px;
      font-weight: 600;
      padding-bottom: 10px;
      border-bottom: 1px solid #E0E0E0;
      text-align: left; }
    .marked .classNameList .mCustomScrollbar {
      max-height: 150px;
      overflow: hidden;
      margin-bottom: 20px; }
    .marked .classNameList .classList {
      flex-direction: column; }
      .marked .classNameList .classList li {
        width: 100%;
        display: flex;
        align-items: center;
        padding: 15px 15px 15px 20px; }
        .marked .classNameList .classList li label {
          margin: 0;
          font-weight: normal;
          display: flex;
          font-size: 14px;
          font-weight: 400;
          color: #535353; }
          .marked .classNameList .classList li label input[type="checkbox"] {
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            margin-right: 10px;
            border: 2px solid #E0E0E0;
            width: 18px;
            height: 18px;
            border-radius: 4px;
            position: relative; }
          .marked .classNameList .classList li label input[type="checkbox"]:focus {
            outline: none;
            border: 2px solid #E0E0E0;
            background: transparent; }
          .marked .classNameList .classList li label input[type="checkbox"]:checked {
            border-color: #8020CF;
            background: #8020CF url(../img/ch-check-white.svg) center center no-repeat;
            background-size: 10px; }
    .marked .classNameList .saveBtn {
      max-width: 400px;
      width: 100%;
      height: 44px;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      font-weight: 500;
      margin: 0 auto; }
      .marked .classNameList .saveBtn:disabled {
        background: #F7F7F7;
        color: #B7B7B7;
        pointer-events: none; }

.marked.show {
  display: inline-flex; }

.unmarked {
  opacity: 0.6; }

.jsonModal {
  background: rgba(0, 0, 0, 0.4); }
  .jsonModal .modal-content {
    flex-direction: column !important;
    background: #eee !important;
    border-radius: 10px; }
    @media (max-width: 1400px) {
      .jsonModal .modal-content {
        margin-top: 0; } }
  .jsonModal .modal-xl {
    max-width: 1110px; }
  .jsonModal .modalTopbar {
    background-color: #bbb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 8px 10px;
    border-radius: 10px 10px 0 0; }
  .jsonModal .ellips {
    width: 8px;
    height: 8px;
    position: relative;
    border: solid 2px #444;
    border-radius: 20px;
    margin-left: 20px; }
    .jsonModal .ellips:after, .jsonModal .ellips:before {
      position: absolute;
      width: 8px;
      height: 8px;
      border: solid 2px #444;
      border-radius: 20px;
      top: -2px;
      content: ''; }
    .jsonModal .ellips:before {
      left: -14px; }
    .jsonModal .ellips:after {
      right: -14px; }
  .jsonModal .modal-body {
    width: 100%;
    background: #eee; }
  .jsonModal .codeArea {
    width: 100%;
    min-height: 400px;
    max-height: 520px;
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    color: #595959;
    font-size: 16px; }
    .jsonModal .codeArea p {
      margin-bottom: 5px; }
    .jsonModal .codeArea pre {
      white-space: pre-wrap; }
  .jsonModal .mCSB_container {
    padding-right: 40px; }
  .jsonModal .mCustomScrollBox {
    width: 100%; }

.reportsContentArea {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column; }
  .reportsContentArea .reportTable {
    width: 100%;
    background: #ffffff;
    box-shadow: 2px 5px 20px rgba(65, 65, 65, 0.08);
    border-radius: 6px;
    margin-bottom: 10px; }
    .reportsContentArea .reportTable .info {
      width: 16px;
      height: 16px;
      margin-left: 2px; }
    .reportsContentArea .reportTable .tablehead {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 20px 15px 0;
      margin: 0;
      border-radius: 3px;
      border-bottom: solid 1px #F6F6F7; }
      .reportsContentArea .reportTable .tablehead li {
        padding: 0 20px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 15%;
        font-size: 14px;
        font-weight: 600;
        color: #303030;
        text-transform: uppercase; }
      .reportsContentArea .reportTable .tablehead .perceptionName,
      .reportsContentArea .reportTable .tablehead .className {
        width: 18%; }
      .reportsContentArea .reportTable .tablehead .download {
        width: 10%;
        justify-content: center; }
    .reportsContentArea .reportTable .tableBody {
      margin: 0;
      width: 100%;
      min-height: 80px;
      max-height: 400px;
      overflow: hidden;
      position: relative;
      /*.downloadbtn {
        padding: 0;
        width: 30px;
        height: 30px;
        background: url(../img/ch-download-gray.svg) center center no-repeat;
        border: 0;

        transition: all 0.3s ease-in-out;
      }

      .deleteBtn {
        padding: 0;
        width: 30px;
        height: 30px;
        background: url(/static/img/ch-delete-gray.svg) center center no-repeat;
        border: 0;
        transition: all 0.3s ease-in-out;
      }
      */ }
      .reportsContentArea .reportTable .tableBody .mCSB_container {
        padding-bottom: 50px; }
      .reportsContentArea .reportTable .tableBody .eachTableRaw {
        transition: all 0.2s ease-in; }
        .reportsContentArea .reportTable .tableBody .eachTableRaw ul {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 15px 0;
          margin: 0;
          border-bottom: 1px solid #F6F6F7; }
          .reportsContentArea .reportTable .tableBody .eachTableRaw ul li {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            width: 15%;
            font-size: 14px;
            font-weight: 600;
            color: #303030;
            word-break: break-word;
            padding: 0 20px; }
          .reportsContentArea .reportTable .tableBody .eachTableRaw ul .perceptionName {
            transition: all 0.2s ease-in;
            color: #0A2E60; }
          .reportsContentArea .reportTable .tableBody .eachTableRaw ul .perceptionName,
          .reportsContentArea .reportTable .tableBody .eachTableRaw ul .className {
            width: 18%; }
          .reportsContentArea .reportTable .tableBody .eachTableRaw ul .jobStatus {
            color: #535353; }
            .reportsContentArea .reportTable .tableBody .eachTableRaw ul .jobStatus .icon {
              margin-left: 10px;
              height: 10px; }
          .reportsContentArea .reportTable .tableBody .eachTableRaw ul .download {
            width: 10%;
            justify-content: center; }
            .reportsContentArea .reportTable .tableBody .eachTableRaw ul .download button {
              margin: 0 10px;
              padding: 0;
              border: 0;
              background: transparent;
              cursor: pointer; }
            .reportsContentArea .reportTable .tableBody .eachTableRaw ul .download .customTooltip {
              top: 25px;
              right: 0; }
          .reportsContentArea .reportTable .tableBody .eachTableRaw ul .rpDetail,
          .reportsContentArea .reportTable .tableBody .eachTableRaw ul ._rpDetail {
            cursor: pointer; }
        .reportsContentArea .reportTable .tableBody .eachTableRaw:hover {
          background: rgba(19, 139, 250, 0.08); }
      .reportsContentArea .reportTable .tableBody .selected {
        background: rgba(19, 139, 250, 0.08); }
      .reportsContentArea .reportTable .tableBody .generalUpload img {
        opacity: 0.5;
        cursor: not-allowed; }
      .reportsContentArea .reportTable .tableBody .missing {
        cursor: pointer;
        width: 22px;
        height: 22px;
        background: url(../img/report-missing-icon.svg) center center no-repeat; }
  .reportsContentArea .scoreArea {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; }
    @media (max-width: 967px) {
      .reportsContentArea .scoreArea {
        flex-direction: column; } }
  .reportsContentArea .f1scroeTable {
    background: #ffffff;
    box-shadow: 2px 5px 20px rgba(65, 65, 65, 0.08);
    border-radius: 6px;
    margin-bottom: 10px; }
    .reportsContentArea .f1scroeTable .tablehead {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 20px 15px 0;
      margin: 0;
      border-radius: 4px 4px 0 0;
      border-bottom: solid 1px #F6F6F7; }
      .reportsContentArea .f1scroeTable .tablehead li {
        padding: 0 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 20%;
        font-size: 14px;
        font-weight: 600;
        color: #303030;
        white-space: nowrap;
        text-transform: uppercase; }
      .reportsContentArea .f1scroeTable .tablehead .className {
        justify-content: flex-start; }
    .reportsContentArea .f1scroeTable .tableBody {
      margin: 0 0 10px;
      width: 100%;
      height: 240px;
      overflow: hidden;
      position: relative; }
      .reportsContentArea .f1scroeTable .tableBody .popover {
        width: 200px;
        left: 70px;
        top: -5px;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease-in-out; }
      .reportsContentArea .f1scroeTable .tableBody .popover-body {
        color: #58595b;
        line-height: 18px; }
      .reportsContentArea .f1scroeTable .tableBody .mCSB_container {
        padding-bottom: 80px; }
      .reportsContentArea .f1scroeTable .tableBody .eachTableRaw ul {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 0;
        margin: 0;
        border-bottom: 1px solid #F6F6F7; }
        .reportsContentArea .f1scroeTable .tableBody .eachTableRaw ul li {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 20%;
          color: #5071A6;
          word-break: break-word;
          padding: 0 20px;
          font-size: 14px;
          font-weight: 600;
          position: relative; }
          .reportsContentArea .f1scroeTable .tableBody .eachTableRaw ul li:hover .popover {
            visibility: visible;
            opacity: 1; }
        .reportsContentArea .f1scroeTable .tableBody .eachTableRaw ul .className {
          justify-content: flex-start;
          color: #0A2E60; }
          .reportsContentArea .f1scroeTable .tableBody .eachTableRaw ul .className span {
            width: 100%;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden; }
    .reportsContentArea .f1scroeTable .missing {
      cursor: pointer;
      width: 22px;
      height: 22px;
      background: url(../img/report-missing-icon.svg) center center no-repeat; }
  .reportsContentArea .progressArea {
    width: 100%;
    /*background: url(../img/dashed-border-bg.svg) right bottom no-repeat;
    background-size: 83%;*/
    height: 250px;
    overflow: hidden;
    position: relative;
    z-index: 1;
    padding: 0 20px; }
    .reportsContentArea .progressArea:before {
      width: 4px;
      height: 100%;
      background: #D8D8D8;
      position: absolute;
      left: 115px;
      bottom: 0;
      content: ''; }
    .reportsContentArea .progressArea:after {
      width: 100%;
      max-width: 1200px;
      height: 4px;
      background: #D8D8D8;
      position: absolute;
      left: 115px;
      bottom: 0;
      content: ''; }
  .reportsContentArea .f1scroe {
    background: #ffffff;
    box-shadow: 2px 5px 20px rgba(65, 65, 65, 0.08);
    border-radius: 6px;
    color: #58595b;
    position: relative;
    margin-bottom: 20px;
    /*.mCSB_container {
      padding-right: 20px;
    }*/ }
    .reportsContentArea .f1scroe .mCSB_scrollTools {
      right: -5px; }
    .reportsContentArea .f1scroe h6 {
      margin-bottom: 20px;
      padding: 15px 20px;
      border-bottom: solid 1px #F6F6F7;
      color: #0C0043;
      text-transform: uppercase;
      font-weight: 400;
      font-size: 13px; }
      .reportsContentArea .f1scroe h6 a {
        color: #8020CF;
        font-weight: 600; }
    .reportsContentArea .f1scroe .progressLavel {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      margin-bottom: 10px;
      max-width: 1285px;
      /*.progressBarWarning {
        background-color: rgba(255, 193, 7, 0.5);
      }

      .progressBarSuccess {
        background-color: rgba(40, 167, 69, 0.5);
      }*/ }
      .reportsContentArea .f1scroe .progressLavel label {
        margin-bottom: 0;
        font-size: 13px;
        text-transform: uppercase;
        font-weight: 600;
        white-space: nowrap;
        width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        height: 20px;
        margin-right: 20px;
        color: #2C5A99; }
      .reportsContentArea .f1scroe .progressLavel .progress {
        width: 100%;
        height: 20px;
        background: transparent; }
      .reportsContentArea .f1scroe .progressLavel .progress-bar {
        border-radius: 3px; }
    .reportsContentArea .f1scroe .progressRange {
      display: flex;
      justify-content: flex-start;
      margin-left: 200px;
      padding: 5px 15px 15px 0;
      width: 100%;
      max-width: 1000px; }
      .reportsContentArea .f1scroe .progressRange span {
        width: 36%;
        display: inline-flex;
        padding: 3px 0;
        justify-content: center;
        position: relative; }
        .reportsContentArea .f1scroe .progressRange span:before {
          display: inline-flex;
          border-radius: 6px;
          /*border: dashed 2px aliceblue;*/
          border: 2px dashed #D8D8D8;
          height: 196px;
          position: absolute;
          z-index: 0;
          bottom: 42px;
          margin: 0 auto;
          content: ''; }
      .reportsContentArea .f1scroe .progressRange span:first-child {
        width: 28%; }
      .reportsContentArea .f1scroe .progressRange span:nth-child(2) {
        width: 36%; }
      .reportsContentArea .f1scroe .progressRange span:last-child {
        width: 22%; }
    .reportsContentArea .f1scroe .verticalLines {
      width: 98%;
      height: 64.5%;
      position: absolute;
      z-index: 0;
      bottom: 55px;
      padding-left: 80px; }
      .reportsContentArea .f1scroe .verticalLines span {
        width: 2px;
        height: 100%;
        display: inline-flex;
        border-radius: 6px;
        border: dashed 2px aliceblue; }
        .reportsContentArea .f1scroe .verticalLines span:first-child {
          /*margin-left: 10%;*/ }
        .reportsContentArea .f1scroe .verticalLines span:nth-child(2) {
          margin-left: 65%; }
        .reportsContentArea .f1scroe .verticalLines span:nth-child(3) {
          margin-left: 17.5%; }
        .reportsContentArea .f1scroe .verticalLines span:last-child {
          margin-left: 5.5%; }
  .reportsContentArea .noReport {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    flex-direction: column;
    color: #58595b;
    font-size: 16px;
    text-align: center;
    font-weight: 600; }
    .reportsContentArea .noReport img {
      width: 40px; }
    .reportsContentArea .noReport p {
      color: #303030;
      line-height: 50px;
      font-size: 16px; }

.modal.editImageModal {
  z-index: 99999; }

.editImageModal {
  background: rgba(0, 0, 0, 0.2);
  display: flex !important;
  visibility: hidden;
  padding: 0 !important; }
  .editImageModal .closeModal {
    left: 15px;
    top: 15px;
    position: absolute; }
    .editImageModal .closeModal .customTooltip {
      top: 25px;
      left: 0; }
  .editImageModal .modal-content {
    margin-top: 0;
    height: 100%;
    padding-bottom: 0 !important; }
  .editImageModal .modal-lg {
    max-width: 100%;
    width: 100%;
    background: #fff; }
  .editImageModal .modal-body {
    display: flex;
    justify-content: flex-start;
    padding: 0;
    height: 100%; }
  .editImageModal .editImageArea {
    width: calc(95% - 255px);
    height: calc(98% - 10px);
    margin: 15px auto;
    display: flex;
    justify-content: center;
    align-items: center; }
    @media (max-width: 1366px) {
      .editImageModal .editImageArea {
        width: calc(95% - 180px); } }
    .editImageModal .editImageArea .editModalImage {
      max-width: 100%; }
  .editImageModal .editImageOptions {
    display: flex;
    width: 255px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    background-color: #FAFBFC; }
    @media (max-width: 1366px) {
      .editImageModal .editImageOptions {
        width: 180px; } }
    .editImageModal .editImageOptions .buttonGroup {
      padding: 10px 0; }
      @media (min-width: 1500px) {
        .editImageModal .editImageOptions .buttonGroup {
          padding: 15px 0; } }
    .editImageModal .editImageOptions .colorRangeFilter {
      padding: 10px 25px; }
      .editImageModal .editImageOptions .colorRangeFilter span {
        display: none; }
      @media (min-width: 1500px) {
        .editImageModal .editImageOptions .colorRangeFilter {
          padding: 15px 25px; } }
      .editImageModal .editImageOptions .colorRangeFilter label {
        color: #303030;
        width: 100%;
        margin-bottom: 10px;
        font-size: 14px;
        font-weight: 500; }
      .editImageModal .editImageOptions .colorRangeFilter .slider {
        border-radius: 6px;
        background: #e0e0e0;
        height: 4px;
        -webkit-appearance: none;
        margin-bottom: 22px; }
        .editImageModal .editImageOptions .colorRangeFilter .slider:focus {
          outline: none; }
        @media (max-width: 1400px) {
          .editImageModal .editImageOptions .colorRangeFilter .slider {
            margin-bottom: 16px; } }
      .editImageModal .editImageOptions .colorRangeFilter .slider::-webkit-slider-thumb,
      .editImageModal .editImageOptions .colorRangeFilter .slider::-moz-range-thumb {
        width: 15px;
        height: 15px;
        border-radius: 20px;
        cursor: pointer;
        background: #B57EE3;
        border: 0; }
    .editImageModal .editImageOptions .devider {
      width: 100%;
      height: 1px;
      margin: 2px auto;
      background: #e0e0e0; }
    .editImageModal .editImageOptions .editImageBtn {
      border: 0;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      position: relative;
      padding: 10px 20px;
      background-color: transparent;
      width: 100%; }
      .editImageModal .editImageOptions .editImageBtn .icon {
        position: relative;
        z-index: 2;
        width: 25px;
        display: flex;
        justify-content: center;
        align-items: center; }
      .editImageModal .editImageOptions .editImageBtn span {
        color: #303030;
        border-radius: 50px;
        padding-left: 15px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        white-space: nowrap; }
      .editImageModal .editImageOptions .editImageBtn.save {
        display: inline-flex;
        background: #F2E9FA;
        box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.08), inset 0px -1px 0px rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        color: #303030;
        width: auto;
        margin-left: 20px; }
  .editImageModal .cropper-bg {
    background: none; }

.editImageModal.show {
  visibility: visible; }

.closeCropper {
  width: 25px;
  height: 25px;
  background: #4f4f4f url(../img/close-white.png) no-repeat center center;
  background-size: 9px;
  z-index: 2;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 40px;
  border: solid 1px #ffffff;
  cursor: pointer;
  position: absolute;
  right: -12px;
  top: -13px; }

.cancelWarn_process {
  position: fixed;
  top: 0;
  transition: all 0.2s ease-in;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0 15px;
  font-size: 17px;
  font-weight: 300;
  opacity: 0;
  visibility: hidden;
  z-index: 9999; }
  .cancelWarn_process p {
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    color: #58595b; }

.cancelWarn_process-active {
  opacity: 1;
  visibility: visible; }

.cancelWarn_process_inner {
  background: #ffffff;
  border-radius: 10px;
  padding: 20px;
  width: 100%;
  max-width: 600px;
  height: 222px; }
  .cancelWarn_process_inner .cancel-warning-header {
    width: 100%;
    height: 36px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px; }
    .cancelWarn_process_inner .cancel-warning-header .warning-title {
      display: flex;
      align-items: center; }
      .cancelWarn_process_inner .cancel-warning-header .warning-title i {
        width: 28px;
        height: 29px; }
        .cancelWarn_process_inner .cancel-warning-header .warning-title i img {
          width: 21px; }
      .cancelWarn_process_inner .cancel-warning-header .warning-title h4 {
        font-family: "Euclid Circular B";
        font-weight: 500;
        font-size: 20px;
        line-height: 36px;
        color: #303030; }
    .cancelWarn_process_inner .cancel-warning-header span {
      cursor: pointer;
      opacity: 0.7; }
  .cancelWarn_process_inner p {
    font-weight: 400;
    font-size: 16px;
    line-height: 25px;
    color: #595959;
    text-align: left;
    margin-bottom: 60px; }

.cancelWarnOptions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: end;
  width: 100%; }
  .cancelWarnOptions .closeWarn_process {
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    color: #303030;
    margin-right: 15px; }
  .cancelWarnOptions .cancel-trueProcess {
    width: 146px;
    height: 36px;
    background: #BF2600;
    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.08), inset 0px -1px 0px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center; }

.tvuBtn {
  padding: 10px 20px; }
  .tvuBtn img {
    filter: invert(55%) sepia(81%) saturate(899%) hue-rotate(349deg) brightness(135%) contrast(94%); }

.objectPerceptionDetail .trainingContentArea .trainingArea .preceptionAreaTopName {
  width: 85%; }

.objectPerceptionDetail .trainingContentArea .trainingArea .detectionColor {
  width: 15%; }

.objectPerceptionDetail .trainingContentArea .trainingArea .preceptionAreaTopActions {
  width: 10%;
  justify-content: center; }

.objectPerceptionDetail .opduploadMedia .modal-dialog {
  margin: 0 auto;
  align-items: center; }

.exampleOutputModal {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1005;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.7);
  opacity: 0;
  visibility: hidden; }
  .exampleOutputModal .closeExModal {
    position: fixed;
    top: 0;
    right: 0;
    padding: 10px;
    z-index: 1;
    background: #353434;
    width: 33px;
    height: 33px;
    border: 0; }
    .exampleOutputModal .closeExModal img {
      opacity: 0.7; }
  .exampleOutputModal .exampleImageContainer {
    width: 100%;
    max-width: 800px;
    height: 550px;
    overflow: hidden;
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center; }
  .exampleOutputModal.show {
    opacity: 1;
    visibility: visible; }
  .exampleOutputModal .exampleImageName {
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    margin-top: 20px;
    position: relative;
    z-index: 2; }
  .exampleOutputModal .closemodalhiddenBtn {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 0;
    border: 0; }

.imgRenamePopup .modal-title {
  text-align: left !important; }

.imgRenamePopup .modal-dialog {
  max-width: 500px; }

.opduploadMedia {
  padding: 0 !important; }
  .opduploadMedia .modal-content {
    margin-top: 0;
    border-radius: 10px; }
  .opduploadMedia .modal-dialog {
    margin-top: 0.65rem; }
  .opduploadMedia .modal-body {
    padding: 30px; }
  .opduploadMedia .classHead {
    background: #f6f7fb;
    border-radius: 10px;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    color: #58595b;
    padding: 5px 10px 5px 30px;
    margin-bottom: 10px; }
    .opduploadMedia .classHead li {
      width: 100%; }
  .opduploadMedia .checkbox {
    margin: 0;
    padding: 5px 0;
    width: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: #58595b; }
    .opduploadMedia .checkbox input[type='checkbox'] {
      display: none; }
    .opduploadMedia .checkbox span {
      border: 1px solid #979797;
      box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.05);
      border-radius: 2px;
      width: 15px;
      height: 15px;
      display: inline-flex;
      background: #ffffff;
      margin-right: 30px; }
    .opduploadMedia .checkbox input[type='checkbox']:checked + span {
      background: #f7941d;
      border-color: #f7941d; }
  .opduploadMedia .classList {
    font-size: 14px;
    font-weight: 400;
    color: #58595b;
    width: 100%;
    height: 100px;
    overflow: hidden; }
    .opduploadMedia .classList .mCSB_inside > .mCSB_container {
      margin-right: 30px !important; }
    .opduploadMedia .classList .eachItem {
      display: flex;
      align-items: center;
      border-bottom: 1px solid #dcdcdc;
      padding-left: 30px; }

.vhidden {
  opacity: 0; }

.preceptionAreaTopInnerBar .fileName {
  text-indent: 0; }

.trainingAreaButtons #uploadModal {
  margin-bottom: 0 !important; }

.annotateOption {
  width: 27px;
  height: 27px;
  background: url(../img/option-vellips-darkgray.svg) center center no-repeat;
  position: relative;
  cursor: pointer;
  border-radius: 30px; }
  .annotateOption .optionItems {
    position: absolute;
    top: 35px;
    background: #ffffff;
    border-radius: 7px;
    box-shadow: 0px 4px 12px rgba(95, 95, 95, 0.25);
    padding: 0;
    margin: 0 auto;
    right: 0;
    width: 200px;
    visibility: hidden;
    opacity: 0;
    transition: all 0.2s ease-in;
    z-index: 2; }
    .annotateOption .optionItems:before {
      border-bottom: solid 10px #ffffff;
      border-left: solid 9px transparent;
      border-right: solid 9px transparent;
      position: absolute;
      right: 5px;
      top: -8px;
      content: '';
      display: none; }
    .annotateOption .optionItems.show {
      visibility: visible;
      opacity: 1; }
    .annotateOption .optionItems .hide {
      display: none; }
    .annotateOption .optionItems a {
      color: #595959;
      font-size: 16px;
      height: auto;
      line-height: inherit;
      font-weight: normal;
      border-radius: 0;
      padding: 10px 10px 10px 45px;
      text-align: left;
      display: flex;
      align-items: center;
      transition: all 0.2s ease-in;
      border: 0 !important; }
      .annotateOption .optionItems a:hover, .annotateOption .optionItems a:focus {
        background-color: #EBEFF2; }
    .annotateOption .optionItems .copy {
      background: url(../img/ch-copy-gray.svg) 15px center no-repeat; }
    .annotateOption .optionItems .move {
      background: url(../img/ch-move-gray.svg) 15px center no-repeat; }
    .annotateOption .optionItems .deleteAnnotation {
      background: url(../img/ch-delete-gray_.svg) 15px center no-repeat; }
    .annotateOption .optionItems .deleteImage {
      background: url(../img/ch-delete-image-gray.svg) 15px center no-repeat; }
      .annotateOption .optionItems .deleteImage.alertDesable {
        background: #EBEFF2 url(../img/ch-delete-image-gray.svg) 15px center no-repeat; }
      .annotateOption .optionItems .deleteImage .alertTooltip {
        top: 32px;
        left: 16px;
        white-space: normal;
        height: auto;
        padding: 6px 10px; }
    .annotateOption .optionItems .rename {
      background: url(../img/ch-rename-gray.svg) 15px center no-repeat; }
      .annotateOption .optionItems .rename.alertDesable {
        background: #EBEFF2 url(../img/ch-rename-gray.svg) 15px center no-repeat; }
      .annotateOption .optionItems .rename .alertTooltip {
        top: 32px;
        left: 16px;
        white-space: normal;
        height: auto;
        padding: 6px 10px; }
    .annotateOption .optionItems .generate2d {
      background: url(../img/ch-2d-generate-gray.svg) 15px center no-repeat; }
    .annotateOption .optionItems .augmentation {
      background: url(../img/ch-augmentation-gray.svg) 15px center no-repeat; }

.trainingContentArea .trainingMenu ul.optionItems {
  padding: 0;
  margin: 0 auto;
  right: 0;
  width: 210px;
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s ease-in;
  z-index: 2; }
  .trainingContentArea .trainingMenu ul.optionItems:before {
    border-bottom: solid 10px #ffffff;
    border-left: solid 9px transparent;
    border-right: solid 9px transparent;
    position: absolute;
    right: 5px;
    top: -8px;
    content: ''; }

.trainingContentArea .trainingMenu ul.optionItems.show {
  visibility: visible;
  opacity: 1; }

.trainingContentArea .trainingMenu ul.optionItems li {
  margin: 0; }
  .trainingContentArea .trainingMenu ul.optionItems li.hide {
    display: none; }

.annotationTrainingArea .trainingMenu ul.optionItems > li > a,
.trainingContentArea .trainingMenu ul.optionItems li a {
  color: #595959;
  font-size: 16px;
  height: auto;
  line-height: inherit;
  font-weight: normal;
  border-radius: 0;
  padding: 10px 10px 10px 45px;
  text-align: left;
  display: flex;
  align-items: center;
  transition: all 0.2s ease-in; }

.test-via-up img,
.test_via_btn img,
.testImagesButton img,
.createPerceptionBtn img {
  height: 14px; }

.customHoverTooltip {
  background: #ffffff;
  border: 1px solid #e6e6e6;
  box-sizing: border-box;
  box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.25);
  border-radius: 5px;
  font-size: 12px;
  position: absolute;
  /*width: 285px;*/
  height: 30px;
  white-space: nowrap;
  padding: 0 10px;
  color: #595959;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s ease-in;
  font-weight: normal;
  display: flex;
  align-items: center; }

.copyFiles,
.moveFiles,
.cancelFiles,
.deleteFiles,
.smartAnnotation {
  position: relative; }
  .copyFiles:hover,
  .moveFiles:hover,
  .cancelFiles:hover,
  .deleteFiles:hover,
  .smartAnnotation:hover {
    background: #4E4576;
    border-radius: 5px; }
  .copyFiles .customHoverTooltip,
  .moveFiles .customHoverTooltip,
  .cancelFiles .customHoverTooltip,
  .deleteFiles .customHoverTooltip,
  .smartAnnotation .customHoverTooltip {
    left: 0;
    bottom: 40px;
    width: auto;
    white-space: nowrap;
    pointer-events: none; }
  .copyFiles:hover .customHoverTooltip,
  .moveFiles:hover .customHoverTooltip,
  .cancelFiles:hover .customHoverTooltip,
  .deleteFiles:hover .customHoverTooltip,
  .smartAnnotation:hover .customHoverTooltip {
    visibility: visible;
    opacity: 1; }

.eoPercptionName {
  margin: 0;
  width: 100%;
  display: block;
  text-align: center;
  color: #595959;
  font-size: 16px;
  font-weight: 500;
  position: absolute;
  top: 5px; }

.copyDatasets,
.moveDatasets,
.copyImageDatasets,
.moveImageDatasets {
  display: inline-flex;
  position: relative;
  padding: 0 20px;
  background: #F7F7F7;
  border-radius: 5px;
  color: #B7B7B7;
  height: 36px;
  border: 0;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  pointer-events: none; }
  .copyDatasets.active,
  .moveDatasets.active,
  .copyImageDatasets.active,
  .moveImageDatasets.active {
    background: #8020CF;
    color: #ffffff;
    pointer-events: auto;
    cursor: pointer; }
  .copyDatasets .customHoverTooltip,
  .moveDatasets .customHoverTooltip,
  .copyImageDatasets .customHoverTooltip,
  .moveImageDatasets .customHoverTooltip {
    left: -30px;
    bottom: 50px; }
  .copyDatasets:hover .customHoverTooltip,
  .moveDatasets:hover .customHoverTooltip,
  .copyImageDatasets:hover .customHoverTooltip,
  .moveImageDatasets:hover .customHoverTooltip {
    visibility: visible;
    opacity: 1; }

.multiEmailInput .topSearch {
  width: 100%;
  height: 60px; }

.multiEmailInput .easy-autocomplete-container ul {
  background: #fbfbfb;
  box-shadow: 0px 4px 4px rgba(207, 205, 205, 0.25);
  border-radius: 0 0 4px 4px;
  border: 0 !important;
  padding: 10px 0;
  margin: 0; }

.multiEmailInput .easy-autocomplete-container {
  top: 55px; }

.multiEmailInput #topSearch {
  z-index: 9; }

.multiEmailInput .topSearch input {
  position: static; }

.multiEmailInput .easy-autocomplete-container ul li {
  background: transparent !important;
  display: flex;
  justify-content: flex-start;
  align-items: center; }
  .multiEmailInput .easy-autocomplete-container ul li b {
    font-weight: normal; }
  .multiEmailInput .easy-autocomplete-container ul li div {
    text-transform: lowercase;
    width: 90%; }
  .multiEmailInput .easy-autocomplete-container ul li:hover {
    background: #ebebeb !important; }

.multiEmailInput .easy-autocomplete-container ul li.group,
.multiEmailInput .easy-autocomplete-container ul li.group-user {
  display: flex;
  justify-content: flex-start;
  align-items: center; }
  .multiEmailInput .easy-autocomplete-container ul li.group .group-icon,
  .multiEmailInput .easy-autocomplete-container ul li.group .group-user,
  .multiEmailInput .easy-autocomplete-container ul li.group-user .group-icon,
  .multiEmailInput .easy-autocomplete-container ul li.group-user .group-user {
    width: 32px;
    height: 32px;
    margin-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 60px;
    font-size: 16px;
    color: #ffffff;
    text-transform: uppercase; }

.multiEmailInput .easy-autocomplete-container ul li.selected:after {
  display: none; }

.multiEmailInput .emailIds {
  background: #ffffff;
  border: 1px solid #c2c2c2;
  border-radius: 22px;
  font-size: 14px;
  color: #595959;
  margin-right: 10px;
  margin-bottom: 10px;
  display: inline-flex;
  padding: 3px 10px;
  align-items: center;
  margin: 5px 0 0 5px; }
  .multiEmailInput .emailIds .remove-email {
    margin-left: 10px; }

.copyDatasetsAlert {
  position: fixed;
  top: 0;
  transition: all 0.2s ease-in;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0 15px;
  font-size: 17px;
  font-weight: 300;
  opacity: 0;
  visibility: hidden;
  z-index: 9999; }
  .copyDatasetsAlert p {
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    color: #58595b; }
  .copyDatasetsAlert a {
    padding: 4px 30px;
    font-weight: 500;
    border-radius: 30px;
    margin: 0 5px; }
    .copyDatasetsAlert a:focus, .copyDatasetsAlert a:active, .copyDatasetsAlert a:hover {
      color: #fff; }
  .copyDatasetsAlert .copyDatasetsAlertInner {
    background: #ffffff;
    border-radius: 10px;
    padding: 20px;
    width: 100%;
    max-width: 400px;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; }
  .copyDatasetsAlert .copyDatasetsAlertOptions {
    display: flex;
    justify-content: center;
    width: 100%; }

.copyDatasetsAlert-active {
  opacity: 1;
  visibility: visible; }

@media (max-width: 967px) {
  .fancybox-image {
    padding: 0 10px !important; } }

.normalUser {
  position: relative;
  cursor: pointer; }
  .normalUser a {
    pointer-events: none; }
  .normalUser .upgradePlanTootlTip {
    background: #ffffff;
    border: 1px solid #e6e6e6;
    box-sizing: border-box;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
    border-radius: 13px;
    width: 320px;
    padding: 15px;
    font-size: 16px;
    color: #595959;
    position: absolute;
    top: 35px;
    left: 0px;
    right: 0;
    margin: 0 auto;
    transform: translateX(-47%);
    z-index: 2;
    visibility: hidden;
    opacity: 0;
    transition: all 0.2s ease-in; }
    .normalUser .upgradePlanTootlTip:before {
      border-bottom: solid 8px #ffffff;
      border-left: solid 8px transparent;
      border-right: solid 8px transparent;
      position: absolute;
      top: -8px;
      left: 0;
      right: 0;
      margin: 0 auto;
      content: '';
      width: 10px; }
    .normalUser .upgradePlanTootlTip .upgradeBtn {
      width: 120px;
      font-size: 16px;
      font-weight: 400;
      padding: 0;
      height: 35px;
      margin: 0 auto;
      line-height: 30px;
      border-radius: 20px;
      pointer-events: auto;
      box-shadow: none; }
      .normalUser .upgradePlanTootlTip .upgradeBtn:hover {
        border-color: #f7941d; }
  .normalUser:hover .upgradePlanTootlTip {
    visibility: visible !important;
    opacity: 1 !important; }

.customTooltip {
  color: #595959;
  background: #ffffff;
  border: 1px solid #e6e6e6;
  box-sizing: border-box;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
  border-radius: 5px;
  white-space: nowrap;
  padding: 3px 10px;
  transition: all 0.2s ease-in;
  font-size: 15px;
  font-weight: 400;
  position: absolute;
  z-index: 5;
  visibility: hidden;
  opacity: 0;
  pointer-events: none; }

.customTooltipHover {
  position: relative; }
  .customTooltipHover:hover .customTooltip {
    visibility: visible;
    opacity: 1; }

.shareWithPeople {
  position: relative;
  cursor: pointer; }
  .shareWithPeople .alertTooltip {
    top: 25px;
    right: 0;
    z-index: 910; }
  .shareWithPeople .customTooltip {
    top: 25px;
    right: 0;
    z-index: 910; }
  .shareWithPeople:hover .customTooltip {
    visibility: visible;
    opacity: 1; }
  .shareWithPeople:hover .alertTooltip {
    visibility: visible;
    opacity: 1; }

.shareEmail {
  position: relative;
  cursor: pointer; }
  .shareEmail .alertTooltip {
    top: 25px;
    right: 0; }
  .shareEmail:hover .customTooltip {
    visibility: visible;
    opacity: 1; }
  .shareEmail:hover .alertTooltip {
    visibility: visible;
    opacity: 1; }

.trainingRawData .shareWithPeople .alertTooltip {
  top: 25px;
  right: 0;
  bottom: auto;
  left: auto; }

.trainingRawData .shareWithPeople .customTooltip {
  top: 25px;
  right: 0;
  bottom: auto;
  left: auto; }

.veDropdown {
  border: 0;
  font-size: 14px;
  border-radius: 5px;
  position: relative;
  background: #F6F6F7 url(../img/trangle-down-arrow-gray.svg) 88% center no-repeat;
  background-size: 10px;
  padding: 5px 35px 5px 15px;
  color: #595959;
  font-family: "Euclid Circular B";
  font-weight: 600; }
  .veDropdown span {
    display: block;
    text-align: left;
    font-family: inherit;
    color: #303030;
    font-size: 14px;
    font-weight: 600; }
  .veDropdown a {
    display: flex;
    padding: 5px 15px;
    text-align: left;
    color: #535353;
    font-weight: 400;
    font-size: 14px; }
    .veDropdown a:hover {
      color: #210835; }
    .veDropdown a:focus {
      color: #595959 !important; }
    .veDropdown a img {
      width: 14px;
      margin-right: 5px; }
  .veDropdown ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin: 5px 0 0 0;
    background: #ffffff;
    padding-bottom: 5px;
    width: 100%;
    z-index: 1;
    border-radius: 0 0 6px 6px;
    box-shadow: 0px 4px 4px rgba(175, 174, 174, 0.25); }
    .veDropdown ul li:hover {
      background: #FAF5FF; }
    .veDropdown ul li {
      color: #535353; }
    .veDropdown ul li.selected {
      background: url(../img/ch-check-darkblue-small.svg) 90% center no-repeat;
      background-color: #FAF5FF; }
      .veDropdown ul li.selected:hover {
        background: #f5f5f5 url(../img/ch-check-darkblue-small.svg) 90% center no-repeat; }
      .veDropdown ul li.selected a {
        color: #0A2E60; }
      .veDropdown ul li.selected a:hover {
        color: #595959; }
    .veDropdown ul li.remove.selected {
      background-image: none; }
    .veDropdown ul .last {
      padding-top: 5px;
      margin-top: 5px;
      border-top: solid 1px #d6d6d6; }
  .veDropdown.show {
    background: #f2f2f2 url(../img/trangle-up-arrow-gray.svg) 90% center no-repeat;
    background-size: 10px; }
    .veDropdown.show ul {
      display: block; }

.shareWithmultiplePeopleModel .all-mail {
  width: 100%; }

.shareWithmultiplePeopleModel .multiEmailInput .easy-autocomplete-container {
  top: 50px; }

.shareWithmultiplePeopleModel .element_topSearch_cls {
  width: 100%;
  padding: 0; }

.shareWithmultiplePeopleModel .multiEmailInput .topSearch {
  width: 100%;
  justify-content: flex-start;
  align-items: flex-start;
  min-height: 40px;
  height: auto;
  background: #f2f0f0;
  border-radius: 6px;
  margin-bottom: 5px; }

.shareWithmultiplePeopleModel .topSearch .easy-autocomplete {
  height: 40px; }

.shareWithmultiplePeopleModel .veDropdown.action_role {
  height: 40px;
  margin-right: 10px;
  margin-left: 10px; }

.shareWithmultiplePeopleModel .group {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%; }

.shareWithmultiplePeopleModel .emailList {
  width: 60%; }

.shareWithmultiplePeopleModel .emailAutocomplete {
  width: 100%;
  border: 0;
  height: 42px; }

.shareWithmultiplePeopleModel .enter-mail-id {
  margin: 0 !important;
  font-size: 14px;
  color: #202223; }
  .shareWithmultiplePeopleModel .enter-mail-id ::placeholder {
    color: #9B9B9B; }
  .shareWithmultiplePeopleModel .enter-mail-id:focus {
    color: #202223; }

.shareWithmultiplePeopleModel .remove-email {
  width: 10px;
  height: 10px;
  background: url(../img/ch-close-tag-darkgray.svg) 0 0 no-repeat;
  display: inline-flex;
  cursor: pointer; }

.sharedWithPeopleThumbs {
  font-size: 11px;
  color: #595959;
  cursor: pointer; }
  .sharedWithPeopleThumbs span {
    width: 24px;
    height: 24px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border: solid 2px #ffffff;
    margin: 0;
    font-size: 10px;
    text-transform: uppercase;
    color: #ffffff;
    border-radius: 30px;
    position: relative; }
    .sharedWithPeopleThumbs span:nth-child(2), .sharedWithPeopleThumbs span:nth-child(3), .sharedWithPeopleThumbs span:nth-child(4) {
      margin-left: -10px; }
    .sharedWithPeopleThumbs span:first-child {
      background-color: #735FEC; }
    .sharedWithPeopleThumbs span:nth-child(2) {
      background-color: #4F97A3; }
    .sharedWithPeopleThumbs span:nth-child(3) {
      background-color: #735FEC; }
    .sharedWithPeopleThumbs span:nth-child(4) {
      background-color: #4F97A3;
      margin-right: 5px; }
  .sharedWithPeopleThumbs .alertTooltip,
  .sharedWithPeopleThumbs .customTooltip {
    color: #595959;
    background: #ffffff !important;
    background-color: white;
    border: 1px solid #e6e6e6;
    box-sizing: border-box;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    white-space: nowrap;
    padding: 3px 10px;
    transition: all 0.2s ease-in;
    font-size: 15px;
    font-weight: 400;
    position: absolute;
    z-index: 5;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    width: auto;
    height: auto;
    text-transform: capitalize;
    margin: 0 !important; }

.alertTooltip {
  background: #ffffff !important;
  border: 1px solid #e6e6e6;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
  border-radius: 5px;
  font-size: 15px;
  position: absolute;
  white-space: nowrap;
  height: 26px;
  padding: 0 10px;
  color: #595959;
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s ease-in;
  font-weight: normal;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  z-index: 99;
  pointer-events: none; }

.alertDesable {
  position: relative;
  cursor: default;
  background-color: #f7f7f7;
  border-color: #b7b7b7; }
  .alertDesable:hover {
    opacity: 1; }
  .alertDesable .alertTooltip {
    font-size: 15px; }
  .alertDesable .customTooltip {
    font-size: 15px;
    border-radius: 23px;
    height: 26px;
    display: flex;
    justify-content: flex-start;
    align-items: center; }
  .alertDesable .brand-checkbox-icon {
    background: #cbcbcb !important; }
  .alertDesable:hover, .alertDesable:focus {
    background-color: #f7f7f7;
    border-color: #b7b7b7; }
  .alertDesable:hover .alertTooltip {
    visibility: visible;
    opacity: 1; }

.orange-border-button.alertDesable,
.orange-button.alertDesable,
.darkOrangeBtn.alertDesable {
  background: #F7F7F7;
  border-color: #F7F7F7 !important;
  color: #B7B7B7 !important;
  outline: none; }
  .orange-border-button.alertDesable:focus,
  .orange-button.alertDesable:focus,
  .darkOrangeBtn.alertDesable:focus {
    background: #F7F7F7;
    border-color: #F7F7F7 !important;
    color: #B7B7B7 !important;
    outline: none; }
  .orange-border-button.alertDesable:hover, .orange-border-button.alertDesable:active, .orange-border-button.alertDesable:focus:hover,
  .orange-button.alertDesable:hover,
  .orange-button.alertDesable:active,
  .orange-button.alertDesable:focus:hover,
  .darkOrangeBtn.alertDesable:hover,
  .darkOrangeBtn.alertDesable:active,
  .darkOrangeBtn.alertDesable:focus:hover {
    background: #F7F7F7;
    border-color: #F7F7F7 !important;
    color: #B7B7B7 !important;
    outline: none; }
  .orange-border-button.alertDesable img,
  .orange-button.alertDesable img,
  .darkOrangeBtn.alertDesable img {
    filter: invert(56%) sepia(7%) saturate(252%) hue-rotate(169deg) brightness(101%) contrast(86%); }
  .orange-border-button.alertDesable .alertTooltip,
  .orange-button.alertDesable .alertTooltip,
  .darkOrangeBtn.alertDesable .alertTooltip {
    top: 40px;
    right: 20px; }

.annotateOption.alertDesable .alertTooltip {
  top: 30px;
  right: 0;
  height: auto;
  padding: 8px 15px;
  white-space: normal;
  width: 200px;
  border-radius: 10px; }

.annotateClassesPanel .annotateOption.alertDesable .alertTooltip {
  width: 170px; }

.shareWithPeople.alertDesable {
  background-color: transparent; }
  .shareWithPeople.alertDesable img {
    opacity: 0.5; }
  .shareWithPeople.alertDesable .customTooltip {
    bottom: 25px;
    left: 0;
    pointer-events: none; }
  .shareWithPeople.alertDesable .alertTooltip {
    bottom: 25px;
    left: auto;
    right: 0;
    background: #ffffff;
    border: 1px solid #e6e6e6;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    font-size: 15px;
    position: absolute;
    white-space: nowrap;
    height: 26px;
    padding: 0 10px;
    color: #595959;
    transition: all 0.2s ease-in;
    font-weight: normal;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    z-index: 99;
    margin: 0;
    width: auto;
    text-transform: none;
    pointer-events: none; }

.shareEmail.alertDesable {
  background-color: transparent; }
  .shareEmail.alertDesable .customTooltip {
    top: 25px;
    right: 10px;
    left: auto; }
  .shareEmail.alertDesable .alertTooltip {
    top: 25px;
    right: 10px;
    left: auto; }

.brand-checkbox.alertDesable .alertTooltip {
  top: 25px;
  right: 0;
  height: auto;
  padding: 5px 10px;
  width: 122px;
  white-space: normal;
  border-radius: 5px;
  line-height: 16px;
  font-size: 12px; }

.thumbnailsList .brand-checkbox.alertDesable {
  background-color: transparent; }
  .thumbnailsList .brand-checkbox.alertDesable .alertTooltip {
    top: 5px;
    right: auto;
    left: 60px;
    width: auto;
    white-space: nowrap;
    font-size: 15px; }

.videoScreen.alertDesable,
.alertdiasablearea.alertDesable {
  background: transparent;
  border: none; }
  .videoScreen.alertDesable:before,
  .alertdiasablearea.alertDesable:before {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 991;
    content: ''; }
  .videoScreen.alertDesable .alertTooltip,
  .alertdiasablearea.alertDesable .alertTooltip {
    top: 30px;
    right: 30px;
    z-index: 992; }

.annotateImageGalleryModal .options .option.alertDesable {
  background-color: #cbcbcb; }
  .annotateImageGalleryModal .options .option.alertDesable .icon img {
    filter: invert(65%) sepia(28%) saturate(0%) hue-rotate(348deg) brightness(101%) contrast(94%) !important; }
  .annotateImageGalleryModal .options .option.alertDesable .alertTooltip {
    right: 45px;
    top: 3px;
    border-radius: 5px;
    color: #595959;
    padding: 5px 10px; }
  .annotateImageGalleryModal .options .option.alertDesable:hover .optionName {
    display: none; }

.annotateImageGalleryModal .options .editImage.alertDesable .icon img {
  filter: invert(65%) sepia(28%) saturate(0%) hue-rotate(348deg) brightness(120%) contrast(94%) !important; }

.annotateImageGalleryModal.fullScreen .annotateClassesPanel {
  display: none; }

.annotateImageGalleryModal.fullScreen .annotateImageGallery {
  width: 100%; }

.annotateImageGalleryModal.fullScreen .topToolBar .optionCenter {
  transform: translateX(150%); }

.preceptionAreaTopActions .alertDesable {
  background: transparent;
  border: none;
  cursor: default; }
  .preceptionAreaTopActions .alertDesable img {
    opacity: 0.5; }
  .preceptionAreaTopActions .alertDesable .alertTooltip {
    right: 0px;
    top: 25px; }

.acTitle {
  font-size: 16px;
  color: #58595b;
  font-weight: 500;
  margin-bottom: 0;
  text-indent: 5px; }

.datasetsContentArea {
  display: flex;
  width: 100%;
  border-radius: 10px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
  height: auto;
  margin-top: 20px; }
  .datasetsContentArea .datasetsArea {
    width: 100%;
    background: #fff;
    border-radius: 10px;
    padding: 30px 25px 70px 25px;
    position: relative; }
    @media (max-width: 768px) {
      .datasetsContentArea .datasetsArea {
        padding: 1px; } }
    .datasetsContentArea .datasetsArea .datasetsAreaTopBar {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 44px; }
      @media (max-width: 967px) {
        .datasetsContentArea .datasetsArea .datasetsAreaTopBar {
          height: auto; } }
      .datasetsContentArea .datasetsArea .datasetsAreaTopBar h4 {
        font-size: 16px;
        color: #58595b;
        margin-bottom: 0;
        display: inline-block;
        line-height: 35px; }
        @media (min-width: 1600px) {
          .datasetsContentArea .datasetsArea .datasetsAreaTopBar h4 {
            font-size: 18px; } }
    .datasetsContentArea .datasetsArea .datasetsCount {
      color: #9b9b9b;
      font-size: 16px;
      font-weight: 500;
      margin: 0; }
      @media (max-width: 967px) {
        .datasetsContentArea .datasetsArea .datasetsCount {
          display: none; } }
    .datasetsContentArea .datasetsArea .datasetsWrapper {
      display: flex;
      justify-content: flex-start;
      margin: 10px 0 40px; }
      @media (max-width: 768px) {
        .datasetsContentArea .datasetsArea .datasetsWrapper {
          padding: 0 15px; } }
      .datasetsContentArea .datasetsArea .datasetsWrapper a {
        display: inline-flex;
        flex-direction: column;
        padding: 15px 20px;
        box-shadow: 2px 8px 24px rgba(0, 0, 0, 0.09);
        border-radius: 21px;
        background: #ffffff;
        margin-right: 30px;
        width: 100%;
        max-width: 250px; }
        .datasetsContentArea .datasetsArea .datasetsWrapper a:last-child {
          margin: 0; }
        @media (max-width: 768px) {
          .datasetsContentArea .datasetsArea .datasetsWrapper a {
            margin-right: 0;
            margin-bottom: 30px;
            max-width: 100%; } }
      .datasetsContentArea .datasetsArea .datasetsWrapper h5 {
        color: #595959;
        font-size: 17px;
        font-weight: 500;
        margin-bottom: 20px; }
      @media (max-width: 768px) {
        .datasetsContentArea .datasetsArea .datasetsWrapper {
          flex-direction: column; } }
    .datasetsContentArea .datasetsArea .datasetsTable h4 {
      color: #595959;
      font-size: 16px;
      font-weight: 500;
      margin-bottom: 20px; }
      @media (min-width: 1600px) {
        .datasetsContentArea .datasetsArea .datasetsTable h4 {
          font-size: 18px; } }
    @media (max-width: 768px) {
      .datasetsContentArea .datasetsArea .datasetsTable {
        padding: 0 15px; } }
    .datasetsContentArea .datasetsArea .datasetsTableContainer .thead {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-direction: row;
      padding: 10px 30px 10px 10px;
      background: #f6f7fb;
      border-radius: 10px;
      width: 100%;
      margin: 0 0 10px; }
      .datasetsContentArea .datasetsArea .datasetsTableContainer .thead li {
        display: inline-flex;
        justify-content: flex-start;
        align-items: center;
        color: #58595b;
        font-size: 16px;
        font-weight: 500;
        padding: 0 10px; }
    .datasetsContentArea .datasetsArea .datasetsTableContainer .tbody {
      width: 100%;
      padding: 0;
      min-height: 300px;
      max-height: 450px;
      list-style: none;
      overflow: hidden;
      margin: 0; }
      .datasetsContentArea .datasetsArea .datasetsTableContainer .tbody .eachDatasets {
        border-bottom: 1px solid #ededed;
        padding: 10px 0;
        font-size: 14px;
        color: #58595b; }
        .datasetsContentArea .datasetsArea .datasetsTableContainer .tbody .eachDatasets ul {
          padding: 0 10px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex-direction: row;
          list-style: none; }
          .datasetsContentArea .datasetsArea .datasetsTableContainer .tbody .eachDatasets ul li {
            display: inline-flex;
            justify-content: flex-start;
            align-items: center;
            padding: 0 10px; }
    .datasetsContentArea .datasetsArea .datasetsTableContainer .datasetsName {
      width: 70%; }
    .datasetsContentArea .datasetsArea .datasetsTableContainer .datasetsType {
      width: 30%; }

.pretrainedWrapper {
  display: flex;
  justify-content: flex-start;
  margin-top: 10px; }
  @media (max-width: 768px) {
    .pretrainedWrapper {
      margin-bottom: 40px; } }
  @media (max-width: 1200px) {
    .pretrainedWrapper {
      flex-wrap: wrap;
      justify-content: space-between; } }
  @media (max-width: 768px) {
    .pretrainedWrapper {
      flex-direction: column;
      padding: 0 10px; } }
  .pretrainedWrapper a, .pretrainedWrapper .public_modal_click {
    display: inline-flex;
    flex-direction: column;
    padding: 15px 20px;
    box-shadow: 2px 8px 24px rgba(0, 0, 0, 0.09);
    border-radius: 21px;
    background: #ffffff;
    margin-right: 30px;
    width: 23.5%;
    cursor: pointer; }
    .pretrainedWrapper a:last-child, .pretrainedWrapper .public_modal_click:last-child {
      margin: 0; }
    @media (max-width: 1200px) {
      .pretrainedWrapper a, .pretrainedWrapper .public_modal_click {
        width: 47%;
        margin-bottom: 30px;
        justify-content: space-between;
        margin-right: 0; } }
    @media (max-width: 768px) {
      .pretrainedWrapper a, .pretrainedWrapper .public_modal_click {
        margin-bottom: 30px;
        width: 100%; } }
  .pretrainedWrapper h5 {
    color: #595959;
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 20px; }
    @media (min-width: 1600px) {
      .pretrainedWrapper h5 {
        font-size: 17px; } }
  .pretrainedWrapper .trainedBy {
    color: #9b9b9b;
    font-size: 15px;
    font-weight: 500;
    margin: 0; }
    @media (min-width: 1600px) {
      .pretrainedWrapper .trainedBy {
        font-size: 16px; } }

.mainPreTrainedPreception .trainingArea {
  min-height: 670px; }
  @media (min-width: 1600px) {
    .mainPreTrainedPreception .trainingArea {
      min-height: 770px; } }

.modeDropdown {
  position: relative;
  min-width: 125px;
  z-index: 6; }
  @media (max-width: 480px) {
    .modeDropdown {
      font-size: 11px; } }
  .modeDropdown .mode {
    border: 1px solid #D8D8D8;
    border-radius: 5px;
    background: #ffffff url(../img/trangle-down-arrow-gray.svg) 94% center no-repeat;
    background-size: 14px;
    padding: 4px 20px 4px 10px;
    height: 30px;
    color: #787878;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 12px;
    font-family: "Euclid Circular B";
    font-weight: 500; }
    .modeDropdown .mode:focus {
      color: #52575c !important; }
    @media (max-width: 480px) {
      .modeDropdown .mode {
        font-size: 11px; } }
  .modeDropdown.up {
    z-index: 9; }
    .modeDropdown.up .mode {
      background: #ffffff url(../img/trangle-up-arrow-gray.svg) 94% center no-repeat;
      background-size: 14px; }
  .modeDropdown .dropdown {
    position: absolute !important;
    top: 35px;
    left: 0;
    width: 100%;
    background: #ffffff;
    box-shadow: 0px 0px 8px rgba(37, 40, 43, 0.12);
    border-radius: 8px;
    margin: 0;
    padding: 5px 0 !important;
    flex-direction: column !important;
    display: none !important; }
    .modeDropdown .dropdown li {
      width: 100%;
      padding: 0 !important; }
      .modeDropdown .dropdown li a {
        font-size: 13px;
        color: #52575c;
        display: flex;
        align-items: center;
        padding: 8px 12px;
        width: 100%;
        text-align: left;
        position: relative; }
        @media (max-width: 480px) {
          .modeDropdown .dropdown li a {
            padding: 5px 12px;
            font-size: 11px; } }
      .modeDropdown .dropdown li:hover a,
      .modeDropdown .dropdown li:hover a:focus,
      .modeDropdown .dropdown li.active a {
        background: rgba(19, 139, 250, 0.19);
        color: #138bfa !important; }
      .modeDropdown .dropdown li .info {
        width: 14px;
        height: 14px;
        margin-left: auto;
        margin-right: -5px;
        display: inline-flex;
        background: url(../img/ch-info-blue.svg) center center no-repeat;
        background-size: contain; }
      .modeDropdown .dropdown li .customTooltip {
        top: 30px;
        right: 10px; }
      .modeDropdown .dropdown li .info:hover + .customTooltip {
        visibility: visible;
        opacity: 1; }
    .modeDropdown .dropdown .devider {
      height: 20px;
      position: relative;
      pointer-events: none;
      display: flex;
      align-items: center; }
      .modeDropdown .dropdown .devider:before {
        width: 60px;
        height: 3px;
        border-radius: 10px;
        background: #138bfa;
        display: block;
        position: absolute;
        content: '';
        left: 10px; }
    .modeDropdown .dropdown.show {
      display: block !important;
      z-index: 2; }

.modeDropdown.alertDesable {
  background: transparent; }
  .modeDropdown.alertDesable .mode {
    background: #F1F1F1 url(../img/trangle-down-arrow-gray.svg) 94% center no-repeat;
    background-size: 14px;
    color: #8C9196; }
    .modeDropdown.alertDesable .mode:focus {
      color: #8C9196 !important; }
  .modeDropdown.alertDesable .alertTooltip {
    top: 35px;
    right: 0px; }

.videoPredicationModel {
  position: absolute;
  top: 15px;
  left: 15px;
  width: 98%;
  height: 100%;
  z-index: 9;
  box-shadow: 0px 4px 26px rgba(180, 180, 180, 0.25);
  border-radius: 6px;
  background: #ffffff;
  overflow: hidden;
  display: none; }
  .videoPredicationModel.show {
    display: block; }
  .videoPredicationModel .closePredicationModel {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    z-index: 91;
    background: transparent;
    border: 0; }
  .videoPredicationModel .predicationWrapper {
    display: flex;
    justify-content: space-between; }
  .videoPredicationModel .predicationVideoContainer,
  .videoPredicationModel .predicationImageContainer {
    background: #2d2d2d;
    width: 49.95%;
    height: 400px;
    overflow: hidden;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center; }
  .videoPredicationModel .predicationImageContainer .predicationImage {
    width: 100%;
    max-width: 500px;
    max-height: 340px;
    display: inline-flex;
    margin: 0 auto; }
  .videoPredicationModel .predicationVideoContainer .predicationVideo {
    width: 100%;
    max-width: 550px;
    max-height: 340px;
    display: inline-flex;
    margin: 0 auto; }
  .videoPredicationModel .predicationResult {
    padding: 15px; }
    .videoPredicationModel .predicationResult .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 16px;
      margin-bottom: 10px; }
      .videoPredicationModel .predicationResult .header .matchFound {
        color: #f7941d;
        font-weight: 500;
        font-size: 18px; }
      .videoPredicationModel .predicationResult .header a {
        color: #138bfa;
        font-weight: 500; }
    .videoPredicationModel .predicationResult .itemhead {
      background: #f6f7fb;
      border-radius: 9px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 16px;
      color: #595959;
      padding: 10px; }
      .videoPredicationModel .predicationResult .itemhead li {
        display: inline-flex; }
    .videoPredicationModel .predicationResult .itemList {
      max-height: 300px;
      overflow: hidden; }
      .videoPredicationModel .predicationResult .itemList .eachItemContainer ul {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #dcdcdc;
        padding: 10px; }
      .videoPredicationModel .predicationResult .itemList .eachItemContainer li {
        display: inline-flex; }
    .videoPredicationModel .predicationResult .time {
      width: 10%;
      justify-content: center; }
    .videoPredicationModel .predicationResult .image {
      width: 20%; }
      .videoPredicationModel .predicationResult .image img {
        max-height: 70px; }
    .videoPredicationModel .predicationResult .className {
      width: 60%; }
    .videoPredicationModel .predicationResult .json {
      width: 10%; }
      .videoPredicationModel .predicationResult .json a {
        text-decoration: underline;
        color: #f7941d; }
    .videoPredicationModel .predicationResult .timetags {
      background: #9b9b9b;
      border-radius: 5px;
      font-size: 14px;
      color: #fff;
      padding: 2px;
      width: 50px;
      display: inline-flex;
      justify-content: center;
      align-items: center; }
    .videoPredicationModel .predicationResult .orange {
      background: #f7941d;
      color: #ffffff; }
    .videoPredicationModel .predicationResult .classess {
      background: #f1f2f6;
      color: #595959;
      border-radius: 21px;
      padding: 5px 15px;
      font-size: 14px;
      display: inline-flex;
      align-items: center;
      margin-right: 20px;
      margin-bottom: 10px; }
      .videoPredicationModel .predicationResult .classess span {
        margin-right: 20px; }
    .videoPredicationModel .predicationResult .red {
      background: #eb5857;
      color: #ffffff; }
    .videoPredicationModel .predicationResult .icon {
      width: 15px;
      height: 15px;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      margin-left: 10px;
      background: #fff;
      border-radius: 20px; }
    .videoPredicationModel .predicationResult .icon.green {
      background: #49c02b; }
    .videoPredicationModel .predicationResult .icon.red {
      background: #eb5857; }

.canvasContainer {
  display: none; }

.videoUploadPrediction .note {
  margin-bottom: 5px;
  width: 100%; }

.videoUploadPrediction .note.show {
  display: flex; }

.videoUploadPrediction .mCSB_container {
  padding-bottom: 50px; }

.videoUploadPrediction .jsonResponse {
  width: auto;
  margin: 0;
  display: none; }

.videoUploadPrediction .wrapper {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
  background: #fff;
  padding: 0;
  height: 94%;
  max-width: 100%; }
  .videoUploadPrediction .wrapper .galleryAreaSection {
    padding: 0 10px 0;
    height: 60%; }

.videoUploadPrediction .galleryAreaSection {
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  max-width: 100%;
  height: 100%;
  background: #fff; }
  .videoUploadPrediction .galleryAreaSection canvas {
    max-height: 98%; }

.videoUploadPrediction .canvasContainer {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0 10px 10px;
  max-width: 100%;
  width: 100%;
  height: 40%;
  max-height: 40%;
  background: #fff;
  position: relative; }
  .videoUploadPrediction .canvasContainer #sampleImageCanvas {
    max-width: 95%;
    max-height: 95%; }
  .videoUploadPrediction .canvasContainer .canvasImage {
    max-width: 95%;
    max-height: 95%;
    position: absolute; }

.videoUploadPrediction .modal-dialog {
  max-width: 100%;
  margin: 0; }

.videoUploadPrediction .itemList .eachTagTopbar {
  display: flex; }

.videoUploadPrediction .itemList .listItemContent li {
  padding: 5px 0px; }

.videoUploadPrediction .itemList h4 {
  display: none; }

.videoUploadPrediction .itemList .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 16px;
  position: relative;
  margin-top: 10px;
  margin-bottom: 15px;
  padding: 0; }
  .videoUploadPrediction .itemList .header span {
    font-weight: 500;
    color: #f7941d; }
  .videoUploadPrediction .itemList .header a {
    color: #000336;
    font-family: "Euclid Circular B";
    font-weight: 500; }
    .videoUploadPrediction .itemList .header a:hover, .videoUploadPrediction .itemList .header a:focus {
      color: #000336 !important; }
  .videoUploadPrediction .itemList .header .outputResult {
    font-size: 20px; }
    .videoUploadPrediction .itemList .header .outputResult .externalLinkIcon {
      margin-left: 5px; }
  .videoUploadPrediction .itemList .header #missing_result_link {
    display: inline-flex !important; }
  .videoUploadPrediction .itemList .header .jsonResponse {
    display: inline-flex; }
  .videoUploadPrediction .itemList .header .outputResult {
    position: absolute;
    right: 0; }

.videoUploadPrediction .itemList .listItemArea {
  border: none;
  padding: 0;
  color: #0A2E60; }

.videoUploadPrediction .itemList .image,
.videoUploadPrediction .itemList .json {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 10px; }

.videoUploadPrediction .itemList .time,
.videoUploadPrediction .itemList .className,
.videoUploadPrediction .itemList .score {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 10px; }

.videoUploadPrediction .itemList .score {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 10px;
  font-family: "Euclid Circular B";
  font-weight: 500; }

.videoUploadPrediction .itemList .time {
  width: 16%; }

.videoUploadPrediction .itemList .image {
  width: 20%; }
  .videoUploadPrediction .itemList .image img {
    max-width: 86px;
    max-height: 58px; }

.videoUploadPrediction .itemList .className {
  width: 30%;
  flex-direction: column; }

.videoUploadPrediction .itemList .score {
  width: 20%; }

.videoUploadPrediction .itemList .json {
  width: 14%; }
  .videoUploadPrediction .itemList .json a {
    text-decoration: underline;
    color: #0A2E60;
    font-size: 16px; }

.videoUploadPrediction .itemList .listItemContent {
  height: 90%;
  max-height: 100%; }

.videoUploadPrediction .eachTagTopbar {
  padding: 9px 20px 9px 15px;
  background: #f6f7fb;
  color: #595959;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  border-radius: 9px;
  margin-bottom: 10px; }

.videoUploadPrediction .eachTag .icon {
  display: none; }

.videoUploadPrediction .red {
  background: #eb5857;
  color: #ffffff; }

.videoUploadPrediction .icon {
  width: 15px;
  height: 15px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-left: 10px;
  background: #fff;
  border-radius: 20px; }

.videoUploadPrediction .icon.green {
  background: #49c02b; }

.videoUploadPrediction .icon.red {
  background: #eb5857; }

.videoUploadPrediction .modal-content {
  justify-content: space-around;
  align-items: flex-start;
  height: 100%; }

.videoUploadPrediction .galleryAreaSection .thumbnailPreview {
  width: 100%;
  height: 100%;
  max-height: 100%;
  align-items: center;
  justify-content: flex-start;
  overflow: visible;
  flex-direction: column; }

.videoUploadPrediction .listItemContent .eachTagsWrapper {
  padding: 10px 0;
  border: solid 2px #fff;
  border-bottom: solid 2px #dcdcdc; }
  .videoUploadPrediction .listItemContent .eachTagsWrapper.hide {
    display: none; }

.videoUploadPrediction .listItemContent .seconds {
  position: static;
  padding: 4px 5px;
  margin: 0; }

.edge-text {
  color: #f7941d;
  font-weight: 500;
  margin: 0; }

.detectionColorDropdown {
  background: #ffffff url(../img/down-arrow-gray.svg) 27px center no-repeat;
  background-size: 18px;
  border: 1px solid #dbdde0;
  box-sizing: border-box;
  border-radius: 7px;
  width: 50px;
  height: 30px;
  padding: 0 8px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  cursor: pointer; }
  .detectionColorDropdown.open {
    background: #ffffff url(../img/up-arrow-gray.svg) 27px center no-repeat;
    background-size: 18px; }
  .detectionColorDropdown .colorThumb,
  .detectionColorDropdown .selectedcolor {
    width: 16px;
    height: 16px;
    border-radius: 5px;
    overflow: hidden; }
  .detectionColorDropdown .bgclor {
    display: inline-block;
    width: 100%;
    height: 100%; }
  .detectionColorDropdown .colorThumbList {
    position: absolute;
    top: 40px;
    right: 0;
    width: 156px;
    padding: 10px 10px 5px 10px;
    background: #ffffff;
    box-shadow: 0px 0px 8px rgba(37, 40, 43, 0.12);
    border-radius: 8px;
    display: none;
    z-index: 2;
    white-space: normal; }
    .detectionColorDropdown .colorThumbList .colorThumb,
    .detectionColorDropdown .colorThumbList .selectedcolor {
      margin: 4px;
      display: inline-block;
      position: relative; }

.itemLeft #match_text {
  display: inline-flex;
  color: #EC7A19; }

#match_text_video {
  font-size: 24px;
  font-weight: 500;
  color: #8020CF; }

.tvuReportModal .tagify__input {
  margin: 0;
  min-height: 30px;
  line-height: 30px;
  padding: 0;
  white-space: normal !important;
  word-break: break-all; }

.tvuReportModal .tagify__tag {
  font-size: 12px;
  background: rgba(247, 148, 29, 0.14);
  border-radius: 22px;
  overflow: hidden;
  color: #595959;
  padding: 0 0 0 5px;
  max-width: 100%;
  overflow: visible !important; }

.tvuReportModal .tagify.tagify--focus {
  border-color: #dcdcdc; }

.tvuReportModal .tagify__tag__removeBtn {
  color: #f7941d;
  margin-right: 5px !important; }
  .tvuReportModal .tagify__tag__removeBtn:hover {
    color: #ffffff; }

.tvuReportModal .tagify__tag > div > * {
  white-space: normal !important;
  word-break: break-all; }

.missingResultModal .addClassContainer {
  width: 100%;
  margin-bottom: 20px; }

.missingResultModal .addClassHeader {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #595959; }
  .missingResultModal .addClassHeader label {
    margin: 0;
    font-weight: 400; }
  .missingResultModal .addClassHeader small {
    font-size: 12px; }

.missingResultModal .tagify {
  width: 100%;
  display: inherit;
  align-items: center;
  border: 0; }

.missingResultModal .tagify.tagify--focus {
  border-color: #dcdcdc; }

.missingResultModal .tagify__input {
  margin: 0;
  min-height: 38px;
  line-height: 16px;
  font-size: 16px;
  border: 1px solid #dcdcdc;
  border-radius: 8px;
  padding: 10px; }

.missingResultModal .tagify__tag {
  font-size: 12px;
  background: rgba(247, 148, 29, 0.14);
  border-radius: 22px;
  overflow: hidden;
  color: #595959;
  padding: 0 0 0 5px; }
  .missingResultModal .tagify__tag:hover {
    background: rgba(247, 148, 29, 0.14); }

.missingResultModal .tagify__tag__removeBtn {
  color: #f7941d;
  margin-left: 2px;
  font-weight: bold; }
  .missingResultModal .tagify__tag__removeBtn:hover {
    color: #ffffff; }

.gsdBtn {
  height: 42px;
  padding: 0 15px; }
  .gsdBtn .alertTooltip {
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: 50px; }

#isUploaded3D {
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  color: #210835;
  margin-top: 15px;
  text-align: center; }

.generateSyntheticDataModal {
  background: rgba(0, 0, 0, 0.2);
  padding: 0 !important; }
  .generateSyntheticDataModal .form-control:focus {
    box-shadow: none; }
  .generateSyntheticDataModal .modal-dialog {
    width: 100%;
    max-width: 600px;
    align-items: center;
    margin-top: 0; }
  .generateSyntheticDataModal .modal-content {
    flex-direction: column !important;
    background: #ffffff !important;
    margin: 0; }
  .generateSyntheticDataModal .modal-header {
    width: 100%;
    padding: 20px;
    border-bottom: 1px solid #E5E5E5;
    justify-content: space-between;
    align-items: center; }
    .generateSyntheticDataModal .modal-header .closemodal {
      position: static; }
    .generateSyntheticDataModal .modal-header .back {
      background: transparent;
      border: none;
      padding: 0;
      opacity: 0.7;
      width: 10px; }
  .generateSyntheticDataModal .modal-title {
    color: #210835;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 600; }
  .generateSyntheticDataModal .modal-body {
    padding: 40px 30px 0 30px !important;
    width: 100%; }
    .generateSyntheticDataModal .modal-body label {
      width: 100%;
      color: #210835;
      font-size: 16px;
      font-weight: 500; }
  .generateSyntheticDataModal .infoContent {
    font-style: normal; }
    .generateSyntheticDataModal .infoContent .customTooltip {
      top: 25px;
      left: -15px; }
  .generateSyntheticDataModal select.form-control {
    appearance: none;
    -webkit-appearance: none;
    background: #fff url(../img/chevron-down-gray.svg) 95% center no-repeat;
    color: #595959;
    border-color: #d7d7d7;
    width: 260px; }
  .generateSyntheticDataModal .btnWrapper {
    margin: 20px 0 0;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0 30px !important; }
  .generateSyntheticDataModal .generateBtn {
    width: 90%;
    height: 44px;
    border-radius: 10px; }
    .generateSyntheticDataModal .generateBtn:disabled {
      background: #F7F7F7;
      color: #B7B7B7;
      opacity: 1;
      pointer-events: none; }
  .generateSyntheticDataModal .error {
    color: #4E4576;
    font-size: 12px;
    display: block;
    font-style: normal;
    font-weight: 500; }
  .generateSyntheticDataModal .inputGroup {
    display: flex;
    align-items: center;
    /*border: solid 1px #d7d7d7;
    padding: 5px;
    border-radius: 5px;*/ }
    .generateSyntheticDataModal .inputGroup input[type='number'] {
      width: 100%;
      border: 1px solid #E0E0E0;
      background-color: #F7F7F7;
      border-radius: 5px;
      padding: 4px 15px;
      height: 50px;
      font-weight: 600;
      font-size: 16px;
      line-height: 20px; }
    .generateSyntheticDataModal .inputGroup input[type='range'] {
      width: 85%;
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      border-radius: 5px;
      /*! background: #ccc; */
      outline: none;
      writing-mode: bt-lr;
      /* IE */
      -webkit-appearance: slider-horizontal;
      /* WebKit */
      display: none; }
    .generateSyntheticDataModal .inputGroup input[type='range']::-webkit-slider-runnable-track {
      height: 3px;
      background: #d7d7d7;
      border: 0;
      border-radius: 3px; }
    .generateSyntheticDataModal .inputGroup input[type='range']::-moz-range-track {
      background: #d7d7d7;
      border: 0;
      border-radius: 3px; }
    .generateSyntheticDataModal .inputGroup input::-moz-focus-inner,
    .generateSyntheticDataModal .inputGroup input::-webkit-focus-inner {
      border: 0; }
    .generateSyntheticDataModal .inputGroup input[type='range']::-webkit-slider-progress {
      background-color: #eb5857; }
    .generateSyntheticDataModal .inputGroup input[type='range']::-moz-range-progress {
      background-color: #eb5857; }
    .generateSyntheticDataModal .inputGroup input[type='range']::-webkit-slider-thumb {
      cursor: pointer;
      -webkit-appearance: none;
      margin-top: -6px;
      background: #ffffff;
      width: 16px;
      height: 16px;
      border-radius: 40px;
      border: 3px solid #eb5857; }
    .generateSyntheticDataModal .inputGroup input[type='range']::-moz-range-thumb {
      background: #ffffff;
      width: 16px;
      height: 16px;
      border-radius: 40px;
      border: 3px solid #eb5857; }
  .generateSyntheticDataModal .uploadedItem ul {
    max-width: 583px; }
  .generateSyntheticDataModal .addCadTheme {
    display: inline-flex;
    align-items: center; }
    .generateSyntheticDataModal .addCadTheme img {
      width: 21px;
      height: 21px;
      background-color: #ff8f00;
      border-radius: 100%;
      margin-right: 5px;
      padding: 4px;
      transform: rotate(45deg); }
  .generateSyntheticDataModal .customDropdown {
    width: 100%; }
    .generateSyntheticDataModal .customDropdown .itemBtn {
      background: #f7f7f7 url(../img/trangle-down-arrow-gray.svg) 96% center no-repeat;
      height: 50px;
      padding-left: 15px;
      font-size: 16px;
      font-weight: 600;
      color: #202223; }
      .generateSyntheticDataModal .customDropdown .itemBtn.up {
        border-color: #8020CF; }
    .generateSyntheticDataModal .customDropdown .dropdownItemList {
      max-height: 110px;
      top: 55px; }
  .generateSyntheticDataModal .chooseBackground {
    margin-bottom: 30px; }
  .generateSyntheticDataModal .dropdownGroup {
    width: 100%; }
  .generateSyntheticDataModal .overflowContainer.overflow {
    max-height: 330px;
    overflow-y: auto;
    padding-right: 20px; }
  .generateSyntheticDataModal .uploadedItemWrapper {
    display: none; }
    .generateSyntheticDataModal .uploadedItemWrapper.show {
      display: block; }
  .generateSyntheticDataModal .choochBackgroundLibrary {
    width: 100%;
    margin: 15px 0;
    display: flex;
    align-items: center; }
    .generateSyntheticDataModal .choochBackgroundLibrary .backgroundImageThumb {
      width: 83px;
      height: 83px;
      margin-right: 20px;
      overflow: hidden; }
      .generateSyntheticDataModal .choochBackgroundLibrary .backgroundImageThumb .chooch_theme_thumb,
      .generateSyntheticDataModal .choochBackgroundLibrary .backgroundImageThumb img {
        width: 100%;
        height: 100%;
        object-fit: cover; }
    .generateSyntheticDataModal .choochBackgroundLibrary .customDropdown .dropdownItemList li a {
      display: flex;
      align-items: center;
      padding-top: 4px;
      padding-bottom: 4px; }
      .generateSyntheticDataModal .choochBackgroundLibrary .customDropdown .dropdownItemList li a .imgIcon {
        width: 35px;
        height: 35px;
        background-color: #D9D9D9;
        margin-right: 20px; }
  .generateSyntheticDataModal .lightTheme {
    width: 80%; }
  .generateSyntheticDataModal .theme_detail_li {
    display: none; }
  .generateSyntheticDataModal .customizeGeneration {
    color: #8020CF;
    background: url(../img/arrow-right-sm-purple.svg.svg) right center no-repeat;
    font-size: 16px;
    font-weight: 500;
    padding-right: 20px;
    display: inline-block;
    margin-bottom: 30px; }

.choochBackgroundLibrary .backgroundImageThumb .chooch_theme_thumb,
.choochBackgroundLibrary .backgroundImageThumb img {
  width: 100%;
  height: 100%;
  object-fit: cover; }

.advancedSettingModal {
  background: rgba(0, 0, 0, 0.2);
  padding: 0 !important; }
  .advancedSettingModal .form-control:focus {
    box-shadow: none; }
  .advancedSettingModal .modal-dialog {
    width: 100%;
    max-width: 600px;
    margin-top: 0;
    align-items: center; }
  .advancedSettingModal .modal-content {
    flex-direction: column !important;
    background: #ffffff !important;
    margin: 0; }
  .advancedSettingModal .modal-header {
    width: 100%;
    padding: 20px;
    border-bottom: 1px solid #E5E5E5;
    justify-content: space-between;
    align-items: center; }
    .advancedSettingModal .modal-header .closemodal {
      position: static; }
    .advancedSettingModal .modal-header .back {
      background: transparent;
      border: none;
      padding: 0;
      opacity: 0.7;
      width: 10px; }
  .advancedSettingModal .modal-title {
    color: #210835;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 600; }
  .advancedSettingModal .modal-body {
    padding: 30px;
    width: 100%; }
    .advancedSettingModal .modal-body label {
      width: 100%;
      color: #210835;
      font-size: 16px;
      font-weight: 500;
      margin-bottom: 15px; }
  .advancedSettingModal .infoContent {
    font-style: normal;
    margin-left: 5px; }
    .advancedSettingModal .infoContent .customTooltip {
      top: 25px;
      left: -15px; }
  .advancedSettingModal .btnWrapper {
    margin: 20px 0;
    width: 100%;
    display: flex;
    justify-content: center; }
  .advancedSettingModal .saveBtn {
    width: 250px;
    height: 44px;
    background: #F2E9FA;
    /* button */
    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.08), inset 0px -1px 0px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    color: #303030;
    border: none; }
  .advancedSettingModal .radioBtnGroup {
    display: flex;
    justify-content: flex-start; }
    .advancedSettingModal .radioBtnGroup .radioBtn {
      display: inline-flex;
      align-items: center; }
      .advancedSettingModal .radioBtnGroup .radioBtn .btn {
        color: #202223;
        font-size: 14px;
        display: inline-flex;
        background: transparent;
        padding: 0; }
      .advancedSettingModal .radioBtnGroup .radioBtn input[type='radio'] {
        display: inline-block;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        width: 18px;
        height: 18px;
        border-radius: 20px;
        border: 2px solid #8C9196;
        position: relative;
        margin-right: 12px; }
        .advancedSettingModal .radioBtnGroup .radioBtn input[type='radio']:before {
          width: 10px;
          height: 10px;
          position: absolute;
          top: 2px;
          left: 2px;
          background-color: #fff;
          border-radius: 20px;
          content: ''; }
      .advancedSettingModal .radioBtnGroup .radioBtn input[type="radio"]:focus {
        outline: none;
        border: 2px solid #E0E0E0;
        background: transparent; }
      .advancedSettingModal .radioBtnGroup .radioBtn input[type='radio']:checked + .btn {
        background: transparent;
        color: #202223; }
      .advancedSettingModal .radioBtnGroup .radioBtn input[type='radio']:checked:before {
        background: #8020CF; }
      .advancedSettingModal .radioBtnGroup .radioBtn input[type='radio']:checked {
        border-color: #8020CF; }
    .advancedSettingModal .radioBtnGroup .radioBtn + .radioBtn {
      margin-left: 0; }
  .advancedSettingModal .distanceMode {
    margin-bottom: 30px; }
  .advancedSettingModal .resolutions {
    display: flex; }
    .advancedSettingModal .resolutions .group {
      display: inline-flex;
      align-items: center; }
    .advancedSettingModal .resolutions .heightGroup {
      margin-left: 30px; }
    .advancedSettingModal .resolutions label {
      margin: 0 10px 0 0;
      font-weight: normal; }
    .advancedSettingModal .resolutions .form-control {
      width: 70px;
      border-color: #E0E0E0;
      padding: 5px 10px;
      text-align: center;
      background: #F7F7F7;
      border-radius: 5px;
      font-weight: 400;
      font-size: 16px;
      line-height: 20px;
      color: #303030; }
      .advancedSettingModal .resolutions .form-control:focus {
        box-shadow: none;
        border-color: #b7b4b4; }

.add3dFiles {
  width: 179px;
  height: 36px;
  background: #352B63;
  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.08), inset 0px -1px 0px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  margin: 17px calc(50% - 179px/2); }

.online3dViewer {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100% !important;
  height: 100% !important; }
  .online3dViewer div {
    margin-bottom: 50px;
    color: #595959;
    font-size: 16px; }

.customDropdown {
  position: relative; }
  @media (max-width: 480px) {
    .customDropdown {
      font-size: 12px; } }
  .customDropdown .itemBtn {
    border: 1px solid #dbdde0;
    border-radius: 5px;
    /*background: $white url(../img/down-arrow-gray.svg) 96% center no-repeat;*/
    background: url(../img/trangle-down-arrow-gray.svg) 94% center no-repeat;
    width: 100%;
    padding: 0 35px 0 10px;
    height: 40px;
    cursor: pointer;
    color: #52575c;
    /*display: flex;
    justify-content: flex-start;
    align-items: center;*/
    display: inline-block;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-size: 14px; }
    .customDropdown .itemBtn:focus {
      color: #52575c !important; }
    @media (max-width: 480px) {
      .customDropdown .itemBtn {
        font-size: 12px; } }
    .customDropdown .itemBtn.up {
      /*background: $white url(../img/up-arrow-gray.svg) 96% center no-repeat;*/
      background: url(../img/trangle-up-arrow-gray.svg) 94% center no-repeat; }
  .customDropdown .dropdownItemList {
    position: absolute;
    top: 45px;
    left: 0;
    width: 100%;
    background: #ffffff;
    box-shadow: 0px 0px 8px rgba(37, 40, 43, 0.12);
    border-radius: 8px;
    margin: 0;
    padding: 5px 0 !important;
    flex-direction: column !important;
    display: none;
    max-height: 200px;
    overflow: hidden; }
    .customDropdown .dropdownItemList .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden {
      margin-right: 0; }
    .customDropdown .dropdownItemList .mCSB_inside > .mCSB_container {
      margin-right: 0; }
    .customDropdown .dropdownItemList li {
      width: 100%;
      padding: 0 !important; }
      .customDropdown .dropdownItemList li a {
        font-size: 13px;
        color: #52575c;
        display: block;
        padding: 8px 12px;
        width: 100%;
        text-align: left; }
        @media (max-width: 480px) {
          .customDropdown .dropdownItemList li a {
            padding: 5px 12px;
            font-size: 11px; } }
      .customDropdown .dropdownItemList li:hover a,
      .customDropdown .dropdownItemList li:hover a:focus {
        background: rgba(19, 139, 250, 0.19);
        color: #138bfa !important; }
      .customDropdown .dropdownItemList li.active a {
        background: rgba(19, 139, 250, 0.19);
        color: #138bfa !important; }
    .customDropdown .dropdownItemList.show {
      display: block !important;
      z-index: 2; }

.cvsDropdown {
  margin: 0 20px 0 auto;
  position: relative; }
  .cvsDropdown .itemBtn {
    color: #303030;
    font-size: 14px;
    font-family: "Euclid Circular B";
    font-weight: 600;
    border: 1px solid #EAEAEA;
    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05);
    border-radius: 20px !important;
    background: #ffffff url(../img/trangle-down-arrow-gray.svg) 92% center no-repeat;
    width: 100%;
    padding: 0 35px 0 15px;
    height: 40px;
    cursor: pointer;
    display: inline-block;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-size: 14px; }
    .cvsDropdown .itemBtn.up {
      background: #ffffff url(../img/trangle-up-arrow-gray.svg) 92% center no-repeat;
      border-color: #8020CF; }
    .cvsDropdown .itemBtn:focus {
      color: #303030 !important;
      border-color: #8020CF; }
  .cvsDropdown .dropdownItemList {
    position: absolute;
    top: 45px;
    left: 0;
    width: 100%;
    background: #ffffff;
    box-shadow: 0px 3px 5px rgba(44, 44, 44, 0.2), 0px 0px 1px rgba(44, 44, 44, 0.31);
    border-radius: 8px;
    margin: 0;
    padding: 5px 0 !important;
    flex-direction: column !important;
    display: none;
    max-height: 200px; }
    .cvsDropdown .dropdownItemList .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden {
      margin-right: 0; }
    .cvsDropdown .dropdownItemList .mCSB_inside > .mCSB_container {
      margin-right: 0; }
    .cvsDropdown .dropdownItemList li {
      width: 100%;
      padding: 0 !important; }
      .cvsDropdown .dropdownItemList li a {
        font-size: 14px;
        font-family: "Euclid Circular B";
        font-weight: 500;
        color: #535353;
        padding: 12px 15px;
        white-space: nowrap;
        display: block;
        width: 100%;
        text-align: left; }
        .cvsDropdown .dropdownItemList li a .icon {
          margin-left: 10px; }
      .cvsDropdown .dropdownItemList li:hover a,
      .cvsDropdown .dropdownItemList li:hover a:focus {
        background: #F9F2FF;
        color: #535353; }
      .cvsDropdown .dropdownItemList li.active {
        background: #ffffff;
        color: #535353; }
        .cvsDropdown .dropdownItemList li.active a {
          background: #ffffff;
          color: #535353 !important; }
      .cvsDropdown .dropdownItemList li:first-child {
        opacity: 0.6;
        pointer-events: none;
        background: #F9F2FF;
        color: #535353; }
        .cvsDropdown .dropdownItemList li:first-child a {
          background: #F9F2FF;
          color: #535353 !important; }
    .cvsDropdown .dropdownItemList.show {
      display: block;
      z-index: 2; }
  .cvsDropdown .customTooltipHover:hover a,
  .cvsDropdown .customTooltipHover:focus a {
    background: transparent !important;
    color: #B7B7B7 !important; }
  .cvsDropdown .customTooltipHover a {
    color: #B7B7B7 !important;
    pointer-events: none; }
    .cvsDropdown .customTooltipHover a img {
      opacity: 0.5; }
  .cvsDropdown .customTooltip {
    padding: 10px 17px;
    width: 368px;
    left: 20px;
    white-space: normal;
    font-size: 14px;
    line-height: 26px; }

.sortDropdown {
  border: 0;
  box-shadow: 0px 2px 5px rgba(40, 40, 40, 0.1);
  border-radius: 5px; }
  .sortDropdown .itemBtn {
    padding-left: 32px;
    padding-right: 10px;
    color: #360D57;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid #360D57;
    border-radius: 10px;
    background: url(../img/sort-down-arrow.svg) 10% center no-repeat;
    height: 36px; }
    .sortDropdown .itemBtn:focus {
      color: #360D57 !important; }
    .sortDropdown .itemBtn.up {
      background: url(../img/sort-down-arrow.svg) 10% center no-repeat; }
  .sortDropdown .dropdownItemList {
    width: 145px;
    right: 0;
    left: auto;
    max-height: inherit; }
    .sortDropdown .dropdownItemList li a {
      font-size: 14px;
      font-family: "Euclid Circular B";
      font-weight: 500;
      color: #595959;
      padding: 12px 15px; }
      .sortDropdown .dropdownItemList li a .icon {
        margin-left: 30px; }
    .sortDropdown .dropdownItemList li:hover a,
    .sortDropdown .dropdownItemList li:hover a:focus {
      background: #EBEFF2;
      color: #595959 !important; }
    .sortDropdown .dropdownItemList li.active {
      background: #EBEFF2;
      color: #595959; }
      .sortDropdown .dropdownItemList li.active a {
        background: #EBEFF2;
        color: #595959 !important; }

.cdMultiSelect .dropdownItemList li:hover {
  background: rgba(242, 153, 74, 0.2);
  color: #f2994a !important; }

.cdMultiSelect .dropdownItemList li.active {
  background: rgba(242, 153, 74, 0.2);
  color: #f2994a; }
  .cdMultiSelect .dropdownItemList li.active label {
    background: rgba(242, 153, 74, 0.2);
    color: #f2994a !important; }

.augmentationModal {
  background: rgba(0, 0, 0, 0.2);
  padding: 0 !important; }
  .augmentationModal .subtitle {
    color: #535353;
    font-size: 14px;
    margin-bottom: 10px; }
  .augmentationModal .info {
    display: inline-block;
    margin-left: 5px; }
    .augmentationModal .info img {
      width: 16px;
      height: 16px; }
    .augmentationModal .info .customTooltip {
      top: 25px;
      left: -50px;
      line-height: 1.5; }
  .augmentationModal .form-control {
    height: 50px;
    background: #F7F7F7; }
  .augmentationModal .form-control:focus {
    box-shadow: none; }
  .augmentationModal .modal-dialog {
    width: 100%;
    align-items: center;
    margin: 0 auto;
    max-width: 580px; }
  .augmentationModal .modal-content {
    flex-direction: column !important;
    background: #ffffff !important;
    margin-top: 0; }
  .augmentationModal .modal-header {
    width: 100%;
    border: 0;
    padding: 20px;
    justify-content: space-between;
    align-items: center; }
    .augmentationModal .modal-header .back {
      background: transparent;
      border: none;
      opacity: 0.7;
      width: 10px;
      padding: 0; }
    .augmentationModal .modal-header .closeModal {
      position: static; }
  .augmentationModal .modal-title {
    color: #210835;
    font-size: 18px; }
  .augmentationModal .modal-body {
    padding: 0 25px 0px;
    height: 100%;
    width: 100%; }
    .augmentationModal .modal-body label {
      width: 100%;
      color: #210835;
      font-weight: 500; }
  .augmentationModal .mCustomScrollbar {
    overflow: hidden;
    padding: 5px 10px 10px 0;
    height: 580px;
    margin-right: -20px; }
    .augmentationModal .mCustomScrollbar .mCSB_inside > .mCSB_container {
      padding-left: 5px; }
      @media (max-width: 1680px) {
        .augmentationModal .mCustomScrollbar .mCSB_inside > .mCSB_container {
          margin-right: 20px !important; } }
  .augmentationModal .customDropdown {
    width: 100%; }
    .augmentationModal .customDropdown .dropdownItemList {
      width: 98%;
      left: 2px; }
      .augmentationModal .customDropdown .dropdownItemList li a {
        font-size: 14px;
        padding: 8px 15px; }
    .augmentationModal .customDropdown .itemBtn {
      border-radius: 5px;
      padding-left: 20px;
      font-size: 16px;
      cursor: pointer;
      height: 50px;
      background: #FAFBFC url(../img/trangle-down-arrow-lightblue.svg) 96% center no-repeat;
      border-color: 1px solid #DFE1E6; }
    .augmentationModal .customDropdown .dropdownItemList {
      min-height: 50px;
      max-height: 120px;
      overflow: hidden;
      padding: 10px !important; }
      .augmentationModal .customDropdown .dropdownItemList li {
        margin-bottom: 5px;
        width: 100%;
        height: 40px;
        display: flex; }
        .augmentationModal .customDropdown .dropdownItemList li:hover {
          background: #F7F7F7; }
    .augmentationModal .customDropdown .mCSB_inside > .mCSB_container {
      margin-right: 15px !important; }
    .augmentationModal .customDropdown .checkbox {
      padding: 0;
      margin: 0;
      padding-left: 10px;
      display: flex;
      align-items: center;
      cursor: pointer;
      font-size: 14px;
      min-width: 100%;
      max-width: 100%; }
      .augmentationModal .customDropdown .checkbox:after {
        display: none; }
      .augmentationModal .customDropdown .checkbox span {
        width: 16px;
        height: 16px;
        margin-right: 10px;
        background: url(../img/checkbox-default.svg) 0 0 no-repeat;
        background-size: cover; }
      .augmentationModal .customDropdown .checkbox small {
        width: 90%;
        font-size: 14px; }
      .augmentationModal .customDropdown .checkbox input[type='checkbox'] {
        display: none; }
      .augmentationModal .customDropdown .checkbox input[type='checkbox']:checked + span {
        background: url(../img/checkbox-active.svg) 0 0 no-repeat;
        background-size: cover; }
  .augmentationModal h5.title {
    font-size: 16px;
    font-weight: 500;
    color: #210835;
    margin-bottom: 0; }
  .augmentationModal select.form-control {
    appearance: none;
    -webkit-appearance: none;
    background: #fff url(../img/chevron-down-gray.svg) 95% center no-repeat;
    color: #595959;
    border-color: #d7d7d7;
    width: 260px;
    height: 50px; }
  .augmentationModal .btnWrapper {
    margin: 10px 0 10px;
    width: 100%;
    display: flex;
    justify-content: center; }
  .augmentationModal .startAugmentationBtn {
    width: 90%;
    height: 50px; }
    .augmentationModal .startAugmentationBtn:disabled {
      border-color: #F6F6F7;
      background: #F6F6F7;
      color: #8C9196 !important;
      opacity: 1;
      box-shadow: 0px 2px 5px rgba(40, 40, 40, 0.1);
      pointer-events: none; }
  .augmentationModal .form-group {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    flex-wrap: wrap; }
    @media (max-width: 1400px) {
      .augmentationModal .form-group {
        margin-bottom: 10px; } }
    .augmentationModal .form-group label {
      /*min-width: 105px;
      max-width: 110px;*/
      width: auto;
      font-size: 16px;
      color: #210835;
      margin: 0;
      position: relative;
      /*&:after {
        content: ':';
        position: absolute;
        right: 0;
        top: -2px;
      }*/ }
    .augmentationModal .form-group .rotatingToggleBtn {
      min-width: auto;
      width: 40px;
      height: 20px;
      margin: 10px 0 0; }
      .augmentationModal .form-group .rotatingToggleBtn:after {
        display: none; }
    .augmentationModal .form-group .checkbox {
      display: inline-flex;
      align-items: center;
      cursor: pointer; }
      .augmentationModal .form-group .checkbox input[type='checkbox'] {
        border-radius: 4px;
        border: solid 2px #8C9196;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        width: 18px;
        height: 18px; }
      .augmentationModal .form-group .checkbox input[type='checkbox']:checked {
        background: #8020CF url(../img/ch-check-white.svg) center center no-repeat;
        background-size: 10px;
        border: none; }
      .augmentationModal .form-group .checkbox input[type='checkbox']:focus {
        outline: none;
        box-shadow: none; }
      .augmentationModal .form-group .checkbox span {
        margin-left: 10px;
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        color: #535353; }
  .augmentationModal .rangeAugmentation {
    margin: 5px 0 0;
    font-size: 14px;
    color: #595959;
    display: flex;
    justify-content: space-between;
    width: 98%; }
    .augmentationModal .rangeAugmentation span {
      display: inline-flex;
      justify-content: flex-start;
      width: 25%; }
      .augmentationModal .rangeAugmentation span:nth-child(2), .augmentationModal .rangeAugmentation span:nth-child(3) {
        justify-content: center; }
      .augmentationModal .rangeAugmentation span:last-child {
        justify-content: flex-end; }
  .augmentationModal .spacer {
    height: 5px;
    margin-bottom: 10px; }
    @media (max-width: 1400px) {
      .augmentationModal .spacer {
        height: 0; } }
  .augmentationModal .inputGroup {
    display: flex;
    align-items: center;
    /*border: solid 1px #d7d7d7;
    padding: 5px;
    border-radius: 5px;*/
    width: 100%;
    margin-top: 5px; }
    .augmentationModal .inputGroup input[type='number'] {
      width: 100%;
      border: solid 1px #d7d7d7;
      border-radius: 5px;
      padding: 4px 10px;
      text-align: left;
      height: 50px; }
    .augmentationModal .inputGroup input[type='range'] {
      margin-top: 10px;
      cursor: pointer;
      width: 98%;
      height: 50px;
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      border-radius: 5px;
      /*! background: #ccc; */
      outline: none;
      writing-mode: bt-lr;
      /* IE */
      -webkit-appearance: slider-horizontal;
      /* WebKit */ }
    .augmentationModal .inputGroup input[type='range']::-webkit-slider-runnable-track {
      height: 3px;
      background: #d7d7d7;
      border: 0;
      border-radius: 3px; }
    .augmentationModal .inputGroup input[type='range']::-moz-range-track {
      background: #d7d7d7;
      border: 0;
      border-radius: 3px; }
    .augmentationModal .inputGroup input::-moz-focus-inner {
      border: 0; }
    .augmentationModal .inputGroup input[type='range']::-moz-range-progress {
      background-color: #9ec9f3;
      border: 0; }
    .augmentationModal .inputGroup input[type='range']::-webkit-slider-thumb {
      cursor: pointer;
      -webkit-appearance: none;
      margin-top: -6px;
      /*background: $white;*/
      background: #138bfa;
      width: 10px;
      height: 10px;
      border-radius: 40px;
      border: 3px solid #eb5857; }
    .augmentationModal .inputGroup input[type='range']::-moz-range-thumb {
      /*background: $white;*/
      background: #138bfa;
      width: 10px;
      height: 10px;
      border-radius: 40px;
      border: 3px solid #138bfa; }
    .augmentationModal .inputGroup input#ilterations_slider_id[type='range']::-moz-range-thumb,
    .augmentationModal .inputGroup input#ilterations_slider_id[type='range']::-webkit-slider-thumb {
      width: 16px;
      height: 16px; }
  .augmentationModal .flexColumn {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center; }
  .augmentationModal .bdr0 {
    border: none; }
  .augmentationModal .pad0 {
    padding: 0; }

.rotatingToggleBtn {
  background: #9b9b9b;
  border-radius: 18px;
  width: 40px;
  height: 20px;
  cursor: pointer;
  position: relative;
  margin: 0; }
  .rotatingToggleBtn.active {
    background: #138bfa; }
  .rotatingToggleBtn .controlBtn {
    width: 100%;
    height: 100%;
    background: #9b9b9b;
    position: relative;
    display: flex;
    align-items: center;
    border-radius: 60px;
    transition: all 0.2s ease-in; }
    .rotatingToggleBtn .controlBtn:before {
      width: 16px;
      height: 16px;
      border-radius: 40px;
      background: #ffffff;
      /*border: solid 2px #9B9B9B;*/
      position: absolute;
      right: 2px;
      transition: all 0.2s ease-in;
      content: ''; }
  .rotatingToggleBtn input[type='checkbox'] {
    display: none; }
  .rotatingToggleBtn input[type='checkbox']:checked + .controlBtn {
    background-color: #138bfa; }
  .rotatingToggleBtn input[type='checkbox']:checked + .controlBtn:before {
    right: 22px;
    border-color: #138bfa; }

.smartAnnotationModal {
  background: rgba(0, 0, 0, 0.2);
  padding: 0 !important; }
  .smartAnnotationModal .form-control:focus {
    box-shadow: none; }
  .smartAnnotationModal .modal-dialog {
    width: 100%;
    align-items: center;
    max-width: 600px; }
  .smartAnnotationModal .modal-content {
    flex-direction: column !important;
    background: #ffffff !important;
    margin-top: 0; }
  .smartAnnotationModal .modal-header {
    width: 100%;
    border: 0;
    justify-content: space-between;
    align-items: center;
    padding-left: 20px;
    padding-right: 20px; }
    .smartAnnotationModal .modal-header .back {
      background: transparent;
      border: none;
      opacity: 0.7;
      width: 10px;
      padding: 0; }
    .smartAnnotationModal .modal-header .closemodal {
      position: static; }
  .smartAnnotationModal .modal-title {
    color: #0A2E60;
    font-size: 18px; }
  .smartAnnotationModal .modal-body {
    padding: 10px 30px;
    height: 100%;
    width: 100%; }
    .smartAnnotationModal .modal-body label,
    .smartAnnotationModal .modal-body .label {
      width: 100%;
      color: #595959; }
    .smartAnnotationModal .modal-body .label {
      display: flex; }
  .smartAnnotationModal .info {
    display: inline-block;
    width: 50px;
    margin-right: 10px;
    margin-top: 3px; }
  .smartAnnotationModal span.infoContent {
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: #535353; }
  .smartAnnotationModal .customTooltip {
    font-style: normal;
    top: 25px;
    left: -25px; }
  .smartAnnotationModal .group {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 20px; }
    .smartAnnotationModal .group label {
      width: 100%;
      margin-bottom: 5px;
      font-weight: 500;
      font-size: 16px;
      line-height: 20px;
      color: #210835; }
  .smartAnnotationModal .selectModelBtn {
    font-family: "Euclid Circular B";
    border: 1px solid #DFE1E6;
    border-radius: 5px;
    height: 50px;
    color: #4E4576;
    font-size: 14px;
    font-weight: 400;
    padding: 0 30px 0 20px;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: inline-block;
    line-height: 18px;
    text-align: left;
    background: #FAFBFC url(../img/arrow-small-right-light-gray.svg) 97% center no-repeat;
    cursor: pointer;
    margin-bottom: 20px; }
  .smartAnnotationModal .customDropdown {
    width: 100%; }
    .smartAnnotationModal .customDropdown .dropdownItemList li a {
      font-size: 14px;
      padding: 8px 15px; }
    .smartAnnotationModal .customDropdown .itemBtn {
      border-radius: 5px;
      padding-left: 35px;
      font-size: 16px;
      cursor: pointer;
      background: #FAFBFC url(../img/search-light-gray.svg) 10px center no-repeat;
      height: 50px; }
    .smartAnnotationModal .customDropdown .dropdownItemList {
      max-height: 350px;
      overflow: hidden;
      padding: 10px !important;
      top: 55px; }
      .smartAnnotationModal .customDropdown .dropdownItemList .deSelectAll_ {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        padding: 15px 0; }
        .smartAnnotationModal .customDropdown .dropdownItemList .deSelectAll_ a {
          color: #8020CF !important;
          font-size: 14px;
          font-weight: 600;
          background: transparent !important;
          width: auto !important; }
          .smartAnnotationModal .customDropdown .dropdownItemList .deSelectAll_ a:focus {
            color: #8020CF !important; }
    .smartAnnotationModal .customDropdown .mCSB_inside > .mCSB_container {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap; }
      .smartAnnotationModal .customDropdown .mCSB_inside > .mCSB_container .item {
        width: 40%;
        padding: 10px 0 !important; }
    .smartAnnotationModal .customDropdown .checkbox {
      padding-left: 10px;
      display: flex;
      align-items: center;
      cursor: pointer;
      color: #535353;
      font-weight: 400;
      font-size: 14px;
      line-height: 18px; }
      .smartAnnotationModal .customDropdown .checkbox span {
        width: 14px;
        height: 14px;
        margin-right: 10px;
        border: 2px solid #878787;
        border-radius: 4px;
        background-size: cover; }
      .smartAnnotationModal .customDropdown .checkbox input[type='checkbox'] {
        display: none; }
      .smartAnnotationModal .customDropdown .checkbox input[type='checkbox']:checked + span {
        background: #8020CF url(../img/ch-check-white.svg) center center no-repeat;
        border-color: #8020CF;
        background-size: 10px; }
  .smartAnnotationModal select.form-control {
    appearance: none;
    -webkit-appearance: none;
    background: #fff url(../img/chevron-down-gray.svg) 95% center no-repeat;
    color: #595959;
    border-color: #d7d7d7;
    width: 260px; }
  .smartAnnotationModal .btnWrapper {
    margin: 10px 0 0;
    padding: 0 30px;
    width: 100%;
    display: flex;
    justify-content: center; }
  .smartAnnotationModal .smartAnnotationStartBtn {
    width: 100%;
    height: 50px;
    border-radius: 5px; }
    .smartAnnotationModal .smartAnnotationStartBtn:disabled {
      border-color: #F6F6F7;
      background: #F6F6F7;
      color: #8C9196 !important;
      opacity: 1;
      pointer-events: none; }
  .smartAnnotationModal .error {
    color: #eb5857;
    font-size: 12px;
    display: block;
    text-align: right; }
  .smartAnnotationModal .inputGroup {
    display: flex;
    align-items: center;
    border: solid 1px #d7d7d7;
    padding: 5px;
    border-radius: 5px; }
    .smartAnnotationModal .inputGroup input[type='number'] {
      width: 80px;
      border: solid 1px #d7d7d7;
      border-radius: 5px;
      margin-right: 10px;
      padding: 4px 10px; }
    .smartAnnotationModal .inputGroup input[type='range'] {
      width: 77%;
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      border-radius: 5px;
      /*! background: #ccc; */
      outline: none;
      writing-mode: bt-lr;
      /* IE */
      -webkit-appearance: slider-horizontal;
      /* WebKit */ }
    .smartAnnotationModal .inputGroup input[type='range']::-webkit-slider-runnable-track {
      height: 3px;
      background: #d7d7d7;
      border: 0;
      border-radius: 3px; }
    .smartAnnotationModal .inputGroup input[type='range']::-moz-range-track {
      background: #d7d7d7;
      border: 0;
      border-radius: 3px; }
    .smartAnnotationModal .inputGroup input::-moz-focus-inner {
      border: 0; }
    .smartAnnotationModal .inputGroup input[type='range']::-moz-range-progress {
      background-color: #eb5857; }
    .smartAnnotationModal .inputGroup input[type='range']::-webkit-range-thumb,
    .smartAnnotationModal .inputGroup input[type='range']::-moz-range-thumb {
      background: #ffffff;
      width: 16px;
      height: 16px;
      border-radius: 40px;
      border: 3px solid #eb5857; }

.modal.objectModal {
  z-index: 1060; }

.annotateAreaTooltip,
.zoneAreaTooltip {
  pointer-events: none;
  position: absolute;
  font-size: 16px;
  text-align: center;
  background: white;
  padding: 2px 15px;
  z-index: 99999 !important;
  height: 30px;
  color: #595959;
  border-radius: 20px;
  box-shadow: 0 0 0 1px #eee;
  margin-left: -12.8%;
  margin-top: -30px;
  display: none;
  white-space: nowrap;
  transform: translateX(-50%); }
  .annotateAreaTooltip.active,
  .zoneAreaTooltip.active {
    display: inline-flex;
    justify-content: center;
    align-items: center; }

.zoneAreaTooltip {
  margin: 0;
  transform: none; }

.viewJobModal {
  padding: 0 !important; }
  .viewJobModal .modal-dialog {
    width: 100%;
    max-width: 1172px;
    margin-top: 0; }
  .viewJobModal .modal-content {
    flex-direction: column !important;
    background: #ffffff !important;
    border-radius: 6px;
    margin-top: 143px; }
  .viewJobModal .modal-header {
    width: 100%;
    border: 0; }
  .viewJobModal .modal-body {
    padding: 0;
    width: 100%; }
  .viewJobModal .jobTable .thead {
    font-size: 14px;
    font-weight: 600;
    color: #4E4576;
    text-transform: uppercase;
    padding: 10px 30px 10px 20px;
    margin-bottom: 0;
    border-bottom: solid 2px #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center; }
    .viewJobModal .jobTable .thead li {
      width: 15%;
      padding: 0 10px; }
      .viewJobModal .jobTable .thead li.jobTyle {
        width: 25%; }
      .viewJobModal .jobTable .thead li.uid {
        width: 30%; }
    .viewJobModal .jobTable .thead .cancel {
      width: 10%; }
  .viewJobModal .jobTable .tbody {
    font-size: 14px;
    font-weight: 400;
    color: #535353;
    margin: 0;
    overflow: hidden;
    min-height: 113px; }
    .viewJobModal .jobTable .tbody.mCustomScrollbar {
      height: 154px; }
    .viewJobModal .jobTable .tbody .mCSB_inside > .mCSB_container {
      margin-right: 20px !important; }
    .viewJobModal .jobTable .tbody ul {
      margin: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 25px 10px 25px 20px;
      border-bottom: solid 2px #EAEAEA; }
      .viewJobModal .jobTable .tbody ul li {
        width: 15%;
        padding: 0 10px;
        word-break: break-all;
        display: inline-flex; }
        .viewJobModal .jobTable .tbody ul li p {
          margin-bottom: 5px; }
      .viewJobModal .jobTable .tbody ul .jobTyle {
        color: #4E4576;
        width: 25%; }
      .viewJobModal .jobTable .tbody ul .status .icon {
        margin-right: 10px; }
      .viewJobModal .jobTable .tbody ul .uid {
        width: 30%; }
        .viewJobModal .jobTable .tbody ul .uid .uuidCode {
          display: inline-block;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          max-width: 280px; }
      .viewJobModal .jobTable .tbody ul .cancel {
        width: 10%;
        justify-content: center; }
        .viewJobModal .jobTable .tbody ul .cancel .cancelLink {
          font-weight: 600;
          color: #8020CF;
          font-size: 14px; }
    .viewJobModal .jobTable .tbody .jtTag {
      pointer-events: none;
      /*border-radius: 34px;
        padding: 0 15px 0 50px;
        height: 45px;*/
      display: inline-flex;
      justify-content: center;
      align-items: flex-start;
      flex-direction: column;
      /*white-space: nowrap;
        background-color: #f5f5f5;*/
      font-size: 16px;
      font-weight: 600;
      color: #4E4576; }
    .viewJobModal .jobTable .tbody .augmentation {
      /*background: rgba(19, 139, 250, 0.2) url(../img/ch-augmentation-blue.svg)
          15px center no-repeat;
        color: #138bfa;*/ }
    .viewJobModal .jobTable .tbody .syntheticDataGeneration2D {
      /*background: rgba(71, 66, 204, 0.1)
          url(../img/ch-synthetic-data-blue.svg) 15px center no-repeat;
        color: #4742cc;*/ }
    .viewJobModal .jobTable .tbody .syntheticDataGeneration3D {
      /*background: rgba(247, 148, 29, 0.14)
          url(../img/ch-3d-generate-orange.svg) 15px center no-repeat;
        color: #f7941d;*/ }
    .viewJobModal .jobTable .tbody .smartAnnotation {
      /*background: rgba(162, 19, 250, 0.1)
          url(../img/ch-smart-annotate-pink.svg) 15px center no-repeat;
        color: #a213fa;*/ }
    .viewJobModal .jobTable .tbody .syntheticDataGeneration {
      /*background: rgba(247, 148, 29, 0.14)
          url(../img/ch-3d-generate-orange.svg) 15px center no-repeat;
        color: #f7941d;*/ }
    .viewJobModal .jobTable .tbody .testOnModel {
      /*background: rgba(79, 151, 163, 0.1)
          url(../img/ch-test-on-model-green.svg) 15px center no-repeat;
        color: #45858f;*/ }
      .viewJobModal .jobTable .tbody .testOnModel a {
        text-decoration: underline;
        font-size: 10px;
        color: #45858f; }
    .viewJobModal .jobTable .tbody .f1Score {
      /*background: rgba(53, 171, 187, 0.1) url(../img/ch-f1score-green.svg)
          15px center no-repeat;
        color: #4383a7;*/ }

.annotationTrainingArea .actionbtns .btn {
  margin-left: 10px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0 15px;
  border-radius: 5px;
  height: 44px;
  transition: all 0.2s ease-in;
  border: none; }
  .annotationTrainingArea .actionbtns .btn:focus {
    box-shadow: none; }

.annotationTrainingArea .actionbtns .smartAnnotate {
  background: rgba(162, 19, 250, 0.23);
  color: #a213fa; }
  .annotationTrainingArea .actionbtns .smartAnnotate:hover {
    background: rgba(162, 19, 250, 0.43); }

.annotationTrainingArea .actionbtns .syntheticDatabtn,
.annotationTrainingArea .actionbtns .syntheticBtn {
  background: rgba(71, 66, 204, 0.2);
  color: #4742cc; }
  .annotationTrainingArea .actionbtns .syntheticDatabtn:hover,
  .annotationTrainingArea .actionbtns .syntheticBtn:hover {
    background: rgba(71, 66, 204, 0.4); }

.annotationTrainingArea .actionbtns .augmentationBtn {
  background: rgba(19, 139, 250, 0.2);
  color: #138bfa; }
  .annotationTrainingArea .actionbtns .augmentationBtn:hover {
    background: rgba(19, 139, 250, 0.4); }

.annotationTrainingArea .actionbtns .add_new_image {
  background: rgba(0, 145, 191, 0.13);
  color: #0091bf; }
  .annotationTrainingArea .actionbtns .add_new_image:hover {
    background: rgba(0, 145, 191, 0.3); }

.annotationTrainingArea .actionbtns .createModelbtn {
  background: rgba(247, 148, 29, 0.2);
  color: #f7941d; }
  .annotationTrainingArea .actionbtns .createModelbtn:hover {
    background: rgba(247, 148, 29, 0.4); }
  .annotationTrainingArea .actionbtns .createModelbtn img {
    width: 20px; }

.annotationTrainingArea .actionbtns .btn .gray {
  display: none; }

.annotationTrainingArea .actionbtns .btn.alertDesable {
  cursor: default;
  background: rgba(155, 155, 155, 0.2);
  color: rgba(89, 89, 89, 0.4); }
  .annotationTrainingArea .actionbtns .btn.alertDesable:hover {
    background: rgba(155, 155, 155, 0.2); }
  .annotationTrainingArea .actionbtns .btn.alertDesable img {
    display: none; }
  .annotationTrainingArea .actionbtns .btn.alertDesable .gray {
    display: inline-block; }

.annotationTrainingArea .actionbtns .alertTooltip {
  top: 50px;
  right: 0; }

.annotationFilterDropdown {
  z-index: 13;
  width: 158px;
  margin-right: 10px;
  margin-left: 10px; }
  .annotationFilterDropdown label {
    margin: 0;
    position: absolute;
    left: 12px;
    top: -8px;
    font-size: 11px;
    color: #595959;
    padding: 0 5px;
    background: #ffffff; }
  .annotationFilterDropdown .itemBtn {
    height: 44px;
    padding-left: 18px; }
    .annotationFilterDropdown .itemBtn a {
      display: flex;
      align-items: center;
      margin-top: 5px;
      pointer-events: none;
      color: #138bfa; }
    .annotationFilterDropdown .itemBtn img {
      margin: 0 !important; }
    .annotationFilterDropdown .itemBtn .icon {
      width: 25px;
      margin-right: 0;
      display: none; }
    .annotationFilterDropdown .itemBtn .hover {
      display: inline-flex; }
  .annotationFilterDropdown .dropdownItemList li a {
    font-size: 14px;
    color: #52575c;
    display: flex;
    align-items: center; }
    .annotationFilterDropdown .dropdownItemList li a img {
      margin: 0 !important; }
  .annotationFilterDropdown .dropdownItemList .icon {
    width: 30px;
    margin-right: 5px;
    display: inline-flex;
    justify-content: center; }
  .annotationFilterDropdown .dropdownItemList .hover {
    display: none; }
  .annotationFilterDropdown .dropdownItemList li:hover .icon {
    display: none; }
  .annotationFilterDropdown .dropdownItemList li:hover .hover {
    display: inline-flex; }
  .annotationFilterDropdown .dropdownItemList li.active .icon {
    display: none; }
  .annotationFilterDropdown .dropdownItemList li.active .hover {
    display: inline-flex; }

.generateSyntheticDataModal,
.syntheticDataModal {
  padding: 0 !important; }
  .generateSyntheticDataModal .back,
  .syntheticDataModal .back {
    background: transparent;
    border: none;
    padding: 0;
    opacity: 0.7;
    width: 10px; }
  .generateSyntheticDataModal .uploadedItem ul,
  .syntheticDataModal .uploadedItem ul {
    max-width: 583px;
    padding: 0;
    min-height: auto; }
  .generateSyntheticDataModal .addTheme,
  .syntheticDataModal .addTheme {
    display: inline-flex;
    align-items: center; }
    .generateSyntheticDataModal .addTheme img,
    .syntheticDataModal .addTheme img {
      width: 21px;
      height: 21px;
      background-color: #ff8f00;
      border-radius: 100%;
      margin-right: 5px;
      padding: 4px;
      transform: rotate(45deg); }
  .generateSyntheticDataModal .overflowContainer.overflow,
  .syntheticDataModal .overflowContainer.overflow {
    max-height: 330px;
    overflow-y: auto;
    padding-right: 20px; }
  .generateSyntheticDataModal .uploadedItemWrapper,
  .syntheticDataModal .uploadedItemWrapper {
    display: none;
    box-shadow: none; }
    .generateSyntheticDataModal .uploadedItemWrapper.show,
    .syntheticDataModal .uploadedItemWrapper.show {
      display: block; }
    .generateSyntheticDataModal .uploadedItemWrapper .uploadedItem,
    .syntheticDataModal .uploadedItemWrapper .uploadedItem {
      background-color: transparent;
      box-shadow: none; }
      .generateSyntheticDataModal .uploadedItemWrapper .uploadedItem li,
      .syntheticDataModal .uploadedItemWrapper .uploadedItem li {
        width: 83px;
        height: 83px;
        border-radius: 6px;
        box-shadow: none; }
        .generateSyntheticDataModal .uploadedItemWrapper .uploadedItem li .icon,
        .generateSyntheticDataModal .uploadedItemWrapper .uploadedItem li .itemName,
        .syntheticDataModal .uploadedItemWrapper .uploadedItem li .icon,
        .syntheticDataModal .uploadedItemWrapper .uploadedItem li .itemName {
          display: none; }
        .generateSyntheticDataModal .uploadedItemWrapper .uploadedItem li .remove,
        .syntheticDataModal .uploadedItemWrapper .uploadedItem li .remove {
          background: #F3F3F3 url(../img/ch-close-orange.svg) center center no-repeat;
          width: 25px;
          height: 25px;
          background-size: 16px; }
  .generateSyntheticDataModal .modal-dialog,
  .syntheticDataModal .modal-dialog {
    width: 100%;
    max-width: 600px; }
  .generateSyntheticDataModal .modal-content,
  .syntheticDataModal .modal-content {
    flex-direction: column !important;
    background: #ffffff !important; }
  .generateSyntheticDataModal .modal-header,
  .syntheticDataModal .modal-header {
    width: 100%;
    border: 0;
    padding: 20px;
    border-bottom: 1px solid #E5E5E5; }
    .generateSyntheticDataModal .modal-header .closeModal,
    .syntheticDataModal .modal-header .closeModal {
      position: static; }
  .generateSyntheticDataModal .modal-title,
  .syntheticDataModal .modal-title {
    font-size: 18px; }
  .generateSyntheticDataModal .modal-body,
  .syntheticDataModal .modal-body {
    padding: 10px 30px 10px 30px;
    height: 100%;
    width: 100%; }
    .generateSyntheticDataModal .modal-body label,
    .syntheticDataModal .modal-body label {
      font-family: "Euclid Circular B";
      font-size: 16px;
      font-weight: 500;
      width: 100%;
      color: #210835;
      margin-bottom: 5px; }
  .generateSyntheticDataModal .nav-pills,
  .syntheticDataModal .nav-pills {
    border: 0;
    display: flex;
    justify-content: space-around;
    margin-top: 10px; }
    .generateSyntheticDataModal .nav-pills .nav-link,
    .syntheticDataModal .nav-pills .nav-link {
      padding: 0 15px;
      color: #303030;
      display: inline-block;
      font-size: 18px;
      font-weight: 600;
      border-bottom: 2px solid #FFFF;
      border-radius: 0; }
      .generateSyntheticDataModal .nav-pills .nav-link:hover, .generateSyntheticDataModal .nav-pills .nav-link:focus, .generateSyntheticDataModal .nav-pills .nav-link:active,
      .syntheticDataModal .nav-pills .nav-link:hover,
      .syntheticDataModal .nav-pills .nav-link:focus,
      .syntheticDataModal .nav-pills .nav-link:active {
        color: #303030;
        background-color: transparent; }
    .generateSyntheticDataModal .nav-pills .nav-link.active,
    .syntheticDataModal .nav-pills .nav-link.active {
      color: #303030;
      border-bottom-color: #8020CF;
      background-color: transparent; }
  .generateSyntheticDataModal .subtitle,
  .syntheticDataModal .subtitle {
    margin: 35px 0;
    font-size: 14px;
    font-weight: 400;
    color: #535353;
    display: flex;
    align-items: flex-start;
    line-height: 18px; }
    .generateSyntheticDataModal .subtitle .icon,
    .syntheticDataModal .subtitle .icon {
      margin-top: 5px;
      margin-right: 10px;
      color: #4E4576; }
  .generateSyntheticDataModal .form-group,
  .syntheticDataModal .form-group {
    margin-bottom: 30px; }
  .generateSyntheticDataModal select.form-control,
  .syntheticDataModal select.form-control {
    appearance: none;
    -webkit-appearance: none;
    background: #fff url(../img/chevron-down-gray.svg) 95% center no-repeat;
    color: #595959;
    border-color: #d7d7d7;
    width: 260px; }
  .generateSyntheticDataModal .btnWrapper,
  .syntheticDataModal .btnWrapper {
    margin: 20px 0 0;
    width: 100%;
    display: flex;
    justify-content: center; }
  .generateSyntheticDataModal .uploadBtn,
  .generateSyntheticDataModal .generateBtn,
  .syntheticDataModal .uploadBtn,
  .syntheticDataModal .generateBtn {
    width: 100%;
    height: 50px;
    border-radius: 5px;
    font-size: 18px;
    font-family: "latomedium";
    position: relative; }
    .generateSyntheticDataModal .uploadBtn .customTooltip,
    .generateSyntheticDataModal .generateBtn .customTooltip,
    .syntheticDataModal .uploadBtn .customTooltip,
    .syntheticDataModal .generateBtn .customTooltip {
      box-shadow: 0px 3px 5px rgba(6, 0, 41, 0.2);
      border-radius: 6px;
      white-space: normal;
      padding: 15px;
      top: 50px;
      left: 40%;
      min-width: 300px;
      text-align: left;
      color: #595959;
      font-size: 15px;
      font-weight: 400; }
    .generateSyntheticDataModal .uploadBtn:disabled,
    .generateSyntheticDataModal .generateBtn:disabled,
    .syntheticDataModal .uploadBtn:disabled,
    .syntheticDataModal .generateBtn:disabled {
      background: #F6F6F7;
      border-color: #F6F6F7;
      color: #8C9196 !important;
      opacity: 1; }
      .generateSyntheticDataModal .uploadBtn:disabled:hover .customTooltip,
      .generateSyntheticDataModal .generateBtn:disabled:hover .customTooltip,
      .syntheticDataModal .uploadBtn:disabled:hover .customTooltip,
      .syntheticDataModal .generateBtn:disabled:hover .customTooltip {
        visibility: visible;
        opacity: 1; }
  .generateSyntheticDataModal .error,
  .syntheticDataModal .error {
    color: #4E4576;
    font-size: 12px;
    font-weight: 600;
    display: block;
    text-align: left;
    font-style: normal;
    margin-top: 5px; }
  .generateSyntheticDataModal .inputGroup,
  .syntheticDataModal .inputGroup {
    display: flex;
    align-items: center;
    /*border: solid 1px #d7d7d7;
    padding: 5px;
    border-radius: 5px;*/ }
    .generateSyntheticDataModal .inputGroup input,
    .syntheticDataModal .inputGroup input {
      height: 50px; }
    .generateSyntheticDataModal .inputGroup input[type='number'],
    .syntheticDataModal .inputGroup input[type='number'] {
      width: 100%;
      border: 1px solid #DFE1E6;
      border-radius: 5px;
      padding: 4px 15px;
      background-color: #FAFBFC;
      color: #4E4576; }
    .generateSyntheticDataModal .inputGroup input[type='range'],
    .syntheticDataModal .inputGroup input[type='range'] {
      width: 84%;
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      cursor: pointer;
      border-radius: 5px;
      /*! background: #ccc; */
      outline: none;
      writing-mode: bt-lr;
      /* IE */
      -webkit-appearance: slider-horizontal;
      /* WebKit */ }
    .generateSyntheticDataModal .inputGroup input[type='range']::-webkit-slider-runnable-track,
    .syntheticDataModal .inputGroup input[type='range']::-webkit-slider-runnable-track {
      height: 3px;
      background: #d7d7d7;
      border: 0;
      border-radius: 3px; }
    .generateSyntheticDataModal .inputGroup input[type='range']::-moz-range-track,
    .syntheticDataModal .inputGroup input[type='range']::-moz-range-track {
      background: #d7d7d7;
      border: 0;
      border-radius: 3px; }
    .generateSyntheticDataModal .inputGroup input::-moz-focus-inner,
    .generateSyntheticDataModal .inputGroup input::-webkit-focus-inner,
    .syntheticDataModal .inputGroup input::-moz-focus-inner,
    .syntheticDataModal .inputGroup input::-webkit-focus-inner {
      border: 0; }
    .generateSyntheticDataModal .inputGroup input[type='range']::-webkit-slider-progress,
    .syntheticDataModal .inputGroup input[type='range']::-webkit-slider-progress {
      background-color: #eb5857; }
    .generateSyntheticDataModal .inputGroup input[type='range']::-moz-range-progress,
    .syntheticDataModal .inputGroup input[type='range']::-moz-range-progress {
      background-color: #eb5857; }
    .generateSyntheticDataModal .inputGroup input[type='range']::-webkit-slider-thumb,
    .syntheticDataModal .inputGroup input[type='range']::-webkit-slider-thumb {
      cursor: pointer;
      -webkit-appearance: none;
      margin-top: -6px;
      background: #ffffff;
      width: 16px;
      height: 16px;
      border-radius: 40px;
      border: 3px solid #eb5857; }
    .generateSyntheticDataModal .inputGroup input[type='range']::-moz-range-thumb,
    .syntheticDataModal .inputGroup input[type='range']::-moz-range-thumb {
      background: #ffffff;
      width: 16px;
      height: 16px;
      border-radius: 40px;
      border: 3px solid #eb5857; }
  .generateSyntheticDataModal .customDropdown,
  .syntheticDataModal .customDropdown {
    width: 100%; }
    .generateSyntheticDataModal .customDropdown .itemBtn,
    .syntheticDataModal .customDropdown .itemBtn {
      height: 50px;
      border-color: #DFE1E6;
      padding-left: 15px;
      background: #FAFBFC url(../img/trangle-down-arrow-lightblue.svg) 97% center no-repeat; }
      .generateSyntheticDataModal .customDropdown .itemBtn.up,
      .syntheticDataModal .customDropdown .itemBtn.up {
        background: #FAFBFC url(../img/trangle-up-arrow-lightblue.svg) 97% center no-repeat; }
    .generateSyntheticDataModal .customDropdown .dropdownItemList,
    .syntheticDataModal .customDropdown .dropdownItemList {
      max-height: 125px;
      box-shadow: 0px 3px 5px rgba(6, 0, 41, 0.2);
      border-radius: 6px; }
      .generateSyntheticDataModal .customDropdown .dropdownItemList li.active a,
      .generateSyntheticDataModal .customDropdown .dropdownItemList li:hover a,
      .generateSyntheticDataModal .customDropdown .dropdownItemList li:hover a:focus,
      .syntheticDataModal .customDropdown .dropdownItemList li.active a,
      .syntheticDataModal .customDropdown .dropdownItemList li:hover a,
      .syntheticDataModal .customDropdown .dropdownItemList li:hover a:focus {
        background-color: #EEEEEE;
        color: #595959 !important; }
      .generateSyntheticDataModal .customDropdown .dropdownItemList li a,
      .syntheticDataModal .customDropdown .dropdownItemList li a {
        font-size: 14px;
        padding-left: 15px; }
  .generateSyntheticDataModal .choochBackgroundLibrary,
  .syntheticDataModal .choochBackgroundLibrary {
    width: 100%;
    margin: 15px 0;
    display: flex;
    align-items: center; }
    .generateSyntheticDataModal .choochBackgroundLibrary .backgroundImageThumb,
    .syntheticDataModal .choochBackgroundLibrary .backgroundImageThumb {
      width: 83px;
      height: 83px;
      margin-right: 20px; }
    .generateSyntheticDataModal .choochBackgroundLibrary .customDropdown .dropdownItemList li a,
    .syntheticDataModal .choochBackgroundLibrary .customDropdown .dropdownItemList li a {
      display: flex;
      align-items: center;
      padding-top: 4px;
      padding-bottom: 4px; }
      .generateSyntheticDataModal .choochBackgroundLibrary .customDropdown .dropdownItemList li a .imgIcon,
      .syntheticDataModal .choochBackgroundLibrary .customDropdown .dropdownItemList li a .imgIcon {
        width: 35px;
        height: 35px;
        background-color: #D9D9D9;
        margin-right: 20px; }
  .generateSyntheticDataModal .lightTheme,
  .syntheticDataModal .lightTheme {
    width: 80%; }
  .generateSyntheticDataModal .theme_detail_li,
  .syntheticDataModal .theme_detail_li {
    display: none; }
  .generateSyntheticDataModal .dropdownGroup,
  .syntheticDataModal .dropdownGroup {
    display: flex;
    position: relative;
    z-index: 4;
    flex-wrap: wrap; }
  .generateSyntheticDataModal .chooseBackground,
  .syntheticDataModal .chooseBackground {
    margin-bottom: 30px; }
  .generateSyntheticDataModal #pills-3d label,
  .syntheticDataModal #pills-3d label {
    font-size: 16px;
    color: #18B099;
    margin-bottom: 20px;
    font-size: 16px; }
  .generateSyntheticDataModal #pills-3d p,
  .syntheticDataModal #pills-3d p {
    color: #18B099;
    font-family: "Euclid Circular B";
    font-weight: 600;
    font-size: 16px;
    line-height: 20px; }
  .generateSyntheticDataModal .selectFrom3dFiles,
  .syntheticDataModal .selectFrom3dFiles {
    max-height: 210px;
    overflow: hidden;
    margin-bottom: 90px; }
    .generateSyntheticDataModal .selectFrom3dFiles dl,
    .syntheticDataModal .selectFrom3dFiles dl {
      display: flex;
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px solid #D8D8D8;
      margin-bottom: 0; }
      .generateSyntheticDataModal .selectFrom3dFiles dl:first-child,
      .syntheticDataModal .selectFrom3dFiles dl:first-child {
        padding-top: 0; }
      .generateSyntheticDataModal .selectFrom3dFiles dl dt,
      .syntheticDataModal .selectFrom3dFiles dl dt {
        margin-right: 17px;
        width: 85px;
        height: 85px;
        display: inline-flex; }
      .generateSyntheticDataModal .selectFrom3dFiles dl dd,
      .syntheticDataModal .selectFrom3dFiles dl dd {
        display: inline-flex;
        margin: 0;
        align-items: center;
        font-size: 14px;
        width: 80%; }
        .generateSyntheticDataModal .selectFrom3dFiles dl dd .fileName,
        .syntheticDataModal .selectFrom3dFiles dl dd .fileName {
          color: #595959;
          max-width: 250px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 16px; }
        .generateSyntheticDataModal .selectFrom3dFiles dl dd .preview,
        .syntheticDataModal .selectFrom3dFiles dl dd .preview {
          margin-left: auto;
          margin-right: 25px;
          color: #8020CF;
          font-weight: 600;
          font-size: 16px; }
        .generateSyntheticDataModal .selectFrom3dFiles dl dd .selectBtn,
        .syntheticDataModal .selectFrom3dFiles dl dd .selectBtn {
          min-width: 93px;
          height: 30px;
          font-size: 14px;
          font-weight: 500; }
          .generateSyntheticDataModal .selectFrom3dFiles dl dd .selectBtn .icon,
          .syntheticDataModal .selectFrom3dFiles dl dd .selectBtn .icon {
            margin-left: 10px; }
  .generateSyntheticDataModal .upload3dFiles,
  .syntheticDataModal .upload3dFiles {
    margin-bottom: 10px;
    max-height: 178px; }
    .generateSyntheticDataModal .upload3dFiles dl,
    .syntheticDataModal .upload3dFiles dl {
      border: none;
      padding: 2px 0; }

.uploadThemeModal {
  padding: 0 !important; }
  .uploadThemeModal .themeName {
    border-color: #d4cdcd;
    width: 225px; }
    .uploadThemeModal .themeName:focus {
      box-shadow: none;
      border-color: #d4cdcd; }
  .uploadThemeModal .modal-dialog {
    width: 100%;
    max-width: 650px; }
  .uploadThemeModal .modal-content {
    flex-direction: column !important;
    background: #ffffff !important;
    padding: 0; }
  .uploadThemeModal .modal-header {
    width: 100%;
    border: 0;
    padding: 15px 30px; }
  .uploadThemeModal .modal-body {
    padding: 10px 30px 0;
    height: 100%;
    width: 100%; }
    .uploadThemeModal .modal-body label {
      width: 100%;
      color: #58595b;
      margin-bottom: 10px; }
  .uploadThemeModal .modal-title {
    text-transform: capitalize;
    color: #595959;
    font-size: 18px;
    text-align: left; }
  .uploadThemeModal .nav-pills {
    border: 0; }
    .uploadThemeModal .nav-pills .nav-link {
      padding: 3px 15px;
      color: #aaa;
      display: inline-block;
      font-size: 16px; }
      .uploadThemeModal .nav-pills .nav-link:hover, .uploadThemeModal .nav-pills .nav-link:focus, .uploadThemeModal .nav-pills .nav-link:active {
        color: #138bfa; }
    .uploadThemeModal .nav-pills .nav-link.active {
      color: #138bfa;
      background: rgba(19, 139, 250, 0.14);
      border-radius: 20px;
      font-weight: 500; }
  .uploadThemeModal .btnWrapper {
    margin: 20px 0;
    width: 100%;
    display: flex;
    justify-content: center; }
  .uploadThemeModal .uploadBtn {
    width: 120px;
    height: 42px; }

.generateModal {
  padding: 0 !important; }
  .generateModal .modal-dialog {
    width: 100%;
    max-width: 650px; }
  .generateModal .modal-content {
    flex-direction: column !important;
    background: #ffffff !important;
    min-height: 465px; }
  .generateModal .modal-header {
    width: 100%;
    border: 0;
    padding: 15px 30px; }
  .generateModal .modal-body {
    padding: 0 30px 0;
    height: 100%;
    width: 100%; }
    .generateModal .modal-body label {
      width: 100%;
      color: #595959;
      margin-bottom: 10px; }
  .generateModal .modal-title {
    text-transform: capitalize;
    color: #595959;
    font-size: 18px;
    text-align: left;
    font-weight: 500; }
  .generateModal select.form-control {
    appearance: none;
    -webkit-appearance: none;
    background: #fff url(../img/chevron-down-gray.svg) 95% center no-repeat;
    color: #595959;
    border-color: #d7d7d7;
    width: 260px; }
  .generateModal .btnWrapper {
    margin: 20px 0;
    width: 100%;
    display: flex;
    justify-content: center; }
  .generateModal .generateBtn {
    width: 120px;
    height: 42px; }
  .generateModal .error {
    color: #eb5857;
    font-size: 12px;
    display: block;
    text-align: right; }
  .generateModal .inputGroup {
    display: flex;
    align-items: center;
    border: solid 1px #d7d7d7;
    padding: 5px;
    border-radius: 5px; }
    .generateModal .inputGroup input[type='number'] {
      width: 80px;
      border: solid 1px #d7d7d7;
      border-radius: 5px;
      margin-right: 10px;
      padding: 4px 10px; }
    .generateModal .inputGroup input[type='range'] {
      width: 84%;
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      border-radius: 5px;
      /*! background: #ccc; */
      outline: none;
      writing-mode: bt-lr;
      /* IE */
      -webkit-appearance: slider-horizontal;
      /* WebKit */ }
    .generateModal .inputGroup input[type='range']::-webkit-slider-runnable-track {
      height: 3px;
      background: #d7d7d7;
      border: 0;
      border-radius: 3px; }
    .generateModal .inputGroup input[type='range']::-moz-range-track {
      background: #d7d7d7;
      border: 0;
      border-radius: 3px; }
    .generateModal .inputGroup input::-moz-focus-inner,
    .generateModal .inputGroup input::-webkit-focus-inner {
      border: 0; }
    .generateModal .inputGroup input[type='range']::-webkit-slider-progress {
      background-color: #eb5857; }
    .generateModal .inputGroup input[type='range']::-moz-range-progress {
      background-color: #eb5857; }
    .generateModal .inputGroup input[type='range']::-webkit-slider-thumb {
      cursor: pointer;
      -webkit-appearance: none;
      margin-top: -6px;
      background: #ffffff;
      width: 16px;
      height: 16px;
      border-radius: 40px;
      border: 3px solid #eb5857; }
    .generateModal .inputGroup input[type='range']::-moz-range-thumb {
      background: #ffffff;
      width: 16px;
      height: 16px;
      border-radius: 40px;
      border: 3px solid #eb5857; }
  .generateModal .customDropdown {
    width: 180px; }
    .generateModal .customDropdown .dropdownItemList li a {
      font-size: 14px; }
  .generateModal .chooseBackgroundGroup {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 20px; }
    .generateModal .chooseBackgroundGroup label {
      width: auto;
      margin: 0 15px 0 0; }
  .generateModal .lightThemeGroup .customDropdown {
    width: 260px; }
  .generateModal .uploadedItem ul {
    max-width: 583px; }

.customToggleBtn {
  position: relative;
  margin: 0;
  font-size: 14px;
  color: #595959;
  display: inline-flex;
  align-items: center;
  white-space: nowrap; }
  .customToggleBtn.active {
    background: #138bfa; }
  .customToggleBtn .controlBtn {
    cursor: pointer;
    border-radius: 18px;
    width: 38px;
    height: 19px;
    border-radius: 40px;
    background: #9b9b9b;
    position: relative;
    display: flex;
    align-items: center;
    border-radius: 40px;
    transition: all 0.2s ease-in;
    display: flex; }
    .customToggleBtn .controlBtn:before {
      width: 13px;
      height: 13px;
      border-radius: 40px;
      background: #ffffff;
      position: absolute;
      left: 3px;
      top: auto;
      transition: all 0.2s ease-in;
      content: ''; }
  .customToggleBtn .labelText {
    margin-left: 5px;
    margin-top: 1px; }
  .customToggleBtn input[type='checkbox'] {
    display: none; }
  .customToggleBtn input[type='checkbox']:checked + .controlBtn {
    background-color: #8020CF; }
  .customToggleBtn input[type='checkbox']:checked + .controlBtn:before {
    left: 22px;
    border-color: #8020CF; }

.togglebtnWrapper {
  display: inline-flex;
  justify-content: space-between;
  align-items: center; }
  .togglebtnWrapper .infoicon {
    margin-right: 10px; }
  .togglebtnWrapper label.optional {
    font-weight: 500;
    font-size: 16px;
    color: #210835; }
  .togglebtnWrapper .labelText {
    margin-right: 10px;
    font-size: 14px;
    color: #8020CF;
    white-space: nowrap;
    font-weight: 500; }
  .togglebtnWrapper.alertDesable {
    background: transparent; }
    .togglebtnWrapper.alertDesable .customToggleBtn {
      pointer-events: none; }
  .togglebtnWrapper .alertTooltip {
    top: 30px; }

.customDropdown .dropdownBtn {
  border: 1px solid #dbdde0;
  border-radius: 30px;
  background: #ffffff url(../img/down-arrow-gray.svg) 95% center no-repeat;
  background-size: auto;
  background-size: 20px;
  padding: 0 40px 0 20px;
  padding-left: 20px;
  color: #52575c;
  cursor: pointer;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center; }

.customDropdown .dropdownMenu {
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
  background: #ffffff;
  -webkit-box-shadow: 0px 0px 8px rgba(37, 40, 43, 0.12);
  box-shadow: 0px 0px 8px rgba(37, 40, 43, 0.12);
  border-radius: 8px;
  margin: 0;
  padding: 0;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  display: none; }
  .customDropdown .dropdownMenu li {
    width: 100%;
    padding: 0;
    cursor: pointer; }
    .customDropdown .dropdownMenu li a {
      font-size: 14px;
      color: #52575c;
      display: block;
      padding: 10px 20px;
      width: 100%;
      text-align: left;
      margin: 0; }
    .customDropdown .dropdownMenu li:hover a,
    .customDropdown .dropdownMenu li:hover a:focus {
      background: #F2E9FA; }
    .customDropdown .dropdownMenu li:hover p {
      background: #F2E9FA; }
    .customDropdown .dropdownMenu li p {
      padding: 10px 20px;
      font-size: 14px;
      color: #8020CF;
      margin: 0; }
  .customDropdown .dropdownMenu .historyBox {
    position: absolute;
    top: 0;
    left: 305px;
    width: 400px;
    background: #ffffff;
    -webkit-box-shadow: 0px 0px 8px rgba(37, 40, 43, 0.12);
    box-shadow: 0px 0px 8px rgba(37, 40, 43, 0.12);
    border-radius: 8px;
    margin: 0;
    padding: 10px 0 10px 10px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    font-size: 14px;
    color: #52575c;
    display: none; }
    .customDropdown .dropdownMenu .historyBox:hover p {
      background: #ffffff !important; }
    .customDropdown .dropdownMenu .historyBox .history {
      min-height: 400px;
      max-height: 450px;
      overflow: hidden;
      font-size: 14px;
      color: #58595B;
      margin: 0; }
      .customDropdown .dropdownMenu .historyBox .history p {
        margin-bottom: 0 !important;
        position: relative;
        padding: 0 !important;
        color: #535353 !important; }
        .customDropdown .dropdownMenu .historyBox .history p:before {
          position: absolute;
          left: 0; }
      .customDropdown .dropdownMenu .historyBox .history li {
        margin-bottom: 15px;
        border-bottom: 1px solid #EDEDED;
        padding-bottom: 5px; }
    .customDropdown .dropdownMenu .historyBox .head {
      color: #535353;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
      font-weight: normal;
      font-size: 14px; }
      .customDropdown .dropdownMenu .historyBox .head .version {
        font-weight: 600; }
      .customDropdown .dropdownMenu .historyBox .head .date {
        font-weight: 400;
        color: #4E4576; }

.customDropdown.open .dropdownMenu {
  display: block;
  z-index: 2; }

.customDropdown.open .dropdownBtn {
  background: #ffffff url(../img/up-arrow-gray.svg) 95% center no-repeat;
  background-size: auto;
  background-size: 20px; }

.keyboardShortscutPanel {
  position: fixed;
  right: 0;
  top: 52px;
  background: #ffffff;
  padding: 30px 15px;
  z-index: 992;
  transform: translateX(265px);
  width: 265px;
  height: 100%;
  transition: all 0.2s ease-in; }
  .keyboardShortscutPanel.show {
    transform: translateX(0); }
  .keyboardShortscutPanel .eachkey {
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    color: #595959;
    font-size: 12px; }
    @media (max-width: 1400px) {
      .keyboardShortscutPanel .eachkey {
        margin-bottom: 20px; } }
    .keyboardShortscutPanel .eachkey span {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      font-size: 12px;
      min-width: 24px;
      height: 24px;
      border-radius: 2px;
      font-weight: 500; }
    .keyboardShortscutPanel .eachkey .key {
      background: #deefff;
      padding: 0 10px;
      font-weight: 400; }
  .keyboardShortscutPanel label {
    margin: 0;
    width: 115px;
    margin-right: 10px; }
  .keyboardShortscutPanel .nestedAnnotation .info {
    position: relative; }
    .keyboardShortscutPanel .nestedAnnotation .info .customTooltip {
      right: 0;
      bottom: 25px;
      white-space: normal;
      min-width: 200px;
      font-size: 15px;
      height: auto;
      padding: 10px;
      border-radius: 5px;
      font-weight: 400; }

.trainingDataModalThemeModal .actionBar .cancel,
.trainingDataModalThemeModal .actionBar .cancel_myfiles {
  margin-right: 30px;
  margin-left: 0 !important; }

.trainingDataModalThemeModal .actionBar .addMyFiles,
.trainingDataModalThemeModal .actionBar .addRawData,
.trainingDataModalThemeModal .actionBar .addDataset,
.trainingDataModalThemeModal .actionBar .addCadDataset,
.trainingDataModalThemeModal .actionBar .addCadRawData,
.trainingDataModalThemeModal .actionBar .addCadMyFiles {
  margin-left: 0;
  font-size: 16px;
  font-weight: 500;
  color: #f7941d;
  position: relative;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center; }
  .trainingDataModalThemeModal .actionBar .addMyFiles:active, .trainingDataModalThemeModal .actionBar .addMyFiles:focus,
  .trainingDataModalThemeModal .actionBar .addRawData:active,
  .trainingDataModalThemeModal .actionBar .addRawData:focus,
  .trainingDataModalThemeModal .actionBar .addDataset:active,
  .trainingDataModalThemeModal .actionBar .addDataset:focus,
  .trainingDataModalThemeModal .actionBar .addCadDataset:active,
  .trainingDataModalThemeModal .actionBar .addCadDataset:focus,
  .trainingDataModalThemeModal .actionBar .addCadRawData:active,
  .trainingDataModalThemeModal .actionBar .addCadRawData:focus,
  .trainingDataModalThemeModal .actionBar .addCadMyFiles:active,
  .trainingDataModalThemeModal .actionBar .addCadMyFiles:focus {
    color: #f7941d !important; }
  @media (max-width: 480px) {
    .trainingDataModalThemeModal .actionBar .addMyFiles,
    .trainingDataModalThemeModal .actionBar .addRawData,
    .trainingDataModalThemeModal .actionBar .addDataset,
    .trainingDataModalThemeModal .actionBar .addCadDataset,
    .trainingDataModalThemeModal .actionBar .addCadRawData,
    .trainingDataModalThemeModal .actionBar .addCadMyFiles {
      margin-left: 10px; } }

.trainingDataModalThemeModal .folderContainer .myfilesData {
  background: transparent;
  padding: 0;
  width: 100%;
  margin: 0;
  border: none;
  box-shadow: none;
  height: 490px;
  max-height: 490px; }
  @media (max-width: 1400px) {
    .trainingDataModalThemeModal .folderContainer .myfilesData {
      height: 420px;
      max-height: 420px; } }

#uploadThemeMyDriveModal .folderContainer li a,
#CaduploadThemeMyDriveModal .folderContainer li a {
  margin-right: 0; }

.annotateImageGalleryModal .cadViewArea {
  padding: 30px 80px 30px;
  background: #ffffff; }

.annotateImageGalleryModal .online3dViewer {
  background: #d7d7d7;
  z-index: 91;
  border-radius: 4px; }

.annotateImageGalleryModal .cadClassessPanel .view_log_class {
  color: #8020CF !important; }

.annotateImageGalleryModal .cadClassessPanel h3 {
  margin-bottom: 30px; }

.annotateImageGalleryModal .cadClassessPanel h4 {
  font-size: 16px;
  color: #4E4576;
  font-size: 16px;
  font-weight: 500; }

.annotateImageGalleryModal .cadClassessPanel p {
  font-weight: 400;
  color: #535353;
  margin-bottom: 20px; }

.annotateImageGalleryModal .cadClassessPanel .annotedClasess {
  height: 62%; }
  @media (min-width: 1680px) {
    .annotateImageGalleryModal .cadClassessPanel .annotedClasess {
      height: 65%; } }
  @media (max-width: 1400px) {
    .annotateImageGalleryModal .cadClassessPanel .annotedClasess {
      height: 56%; } }

.annotateImageGalleryModal .relatedcadFIles {
  position: absolute;
  left: 0;
  bottom: 15px;
  width: 100%;
  background: #ffffff;
  border-radius: 6px; }
  .annotateImageGalleryModal .relatedcadFIles h3 {
    border-bottom: 1px solid #D8D8D8;
    color: #4E4576;
    padding: 10px 15px 10px;
    margin-bottom: 0;
    font-size: 14px; }
  .annotateImageGalleryModal .relatedcadFIles .fileList {
    padding: 10px 5px 15px 15px;
    margin: 0;
    height: 120px;
    overflow: hidden; }
    .annotateImageGalleryModal .relatedcadFIles .fileList li {
      font-weight: 500;
      font-size: 14px;
      color: #4E4576;
      margin-bottom: 5px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis; }

.annotateImageGalleryModal .cadBtnWrapper {
  display: flex;
  margin: 20px 0 0;
  width: 100%; }
  .annotateImageGalleryModal .cadBtnWrapper .gsdbtn {
    margin-left: auto; }
  .annotateImageGalleryModal .cadBtnWrapper .empty {
    width: 222px;
    margin-right: auto; }
  .annotateImageGalleryModal .cadBtnWrapper .cad-control {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    margin-right: auto; }
    .annotateImageGalleryModal .cadBtnWrapper .cad-control .zoomIn,
    .annotateImageGalleryModal .cadBtnWrapper .cad-control .zoomOut,
    .annotateImageGalleryModal .cadBtnWrapper .cad-control .zoomZero {
      display: inline-flex;
      width: 20px;
      height: 20px;
      cursor: pointer;
      font-size: 0;
      margin: 0 15px; }
    .annotateImageGalleryModal .cadBtnWrapper .cad-control .zoomIn {
      background: url(../img/ch-zoom-in-gray.svg) center center no-repeat; }
    .annotateImageGalleryModal .cadBtnWrapper .cad-control .zoomOut {
      background: url(../img/ch-zoom-out-gray.svg) center center no-repeat; }
    .annotateImageGalleryModal .cadBtnWrapper .cad-control .zoomZero {
      background: url(../img/ch-zoom-reset-gray.svg) center center no-repeat; }

.filterSection {
  display: flex;
  position: relative; }
  .filterSection .downloadBtn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    /*background-color: rgba(196, 196, 196, 0.31);*/
    background-color: rgba(155, 155, 155, 0.13);
    width: 44px;
    height: 44px;
    transition: all 0.2s ease-in;
    cursor: pointer;
    margin-right: 10px; }
    .filterSection .downloadBtn img {
      filter: invert(0%) sepia(7%) saturate(0%) hue-rotate(74deg) brightness(60%) contrast(100%); }
    .filterSection .downloadBtn .customTooltip {
      top: 50px;
      left: 0; }
    .filterSection .downloadBtn.alertDesable {
      cursor: default;
      background: rgba(155, 155, 155, 0.2);
      color: rgba(89, 89, 89, 0.4); }
      .filterSection .downloadBtn.alertDesable img {
        opacity: 0.5; }
  .filterSection .customDropdown .dropdownItemList {
    top: 48px; }
  .filterSection .filtersDropdownBtn {
    margin-left: 10px; }
  .filterSection .filterBTn {
    border: 1px solid #360D57;
    filter: drop-shadow(0px 2px 5px rgba(40, 40, 40, 0.1));
    border-radius: 10px;
    height: 44px;
    width: 100px;
    border: 0;
    color: #360D57;
    font-size: 14px;
    cursor: pointer; }
    .filterSection .filterBTn .icon {
      margin-right: 10px;
      width: 20px; }
    .filterSection .filterBTn.active {
      background: white;
      box-shadow: 0px 4px 29px rgba(158, 158, 158, 0.25); }
  .filterSection .filterDropdownModal {
    box-shadow: 0px 4px 29px rgba(158, 158, 158, 0.25);
    border-radius: 5px;
    background: #ffffff;
    padding: 15px 15px 10px;
    position: absolute;
    width: 432px;
    height: auto;
    top: 55px;
    left: 0;
    z-index: 93;
    display: none; }
    .filterSection .filterDropdownModal.expand {
      height: 200px; }
  .filterSection .imageTypeFilters {
    margin-left: 10px; }
  .filterSection .annotateBy {
    width: 220px; }
    .filterSection .annotateBy .toplabel {
      margin: 0;
      position: absolute;
      left: 12px;
      top: -8px;
      font-size: 11px;
      color: #595959;
      padding: 0 5px;
      background: #ffffff; }
    .filterSection .annotateBy .itemBtn {
      height: 44px;
      padding-left: 18px; }
    .filterSection .annotateBy .dropdownItemList {
      padding: 15px;
      max-height: 120px; }
      .filterSection .annotateBy .dropdownItemList label {
        display: flex;
        align-items: center;
        width: 100%;
        font-size: 14px;
        color: #52575c;
        font-weight: normal;
        padding: 5px 15px;
        margin: 0;
        cursor: pointer; }
      .filterSection .annotateBy .dropdownItemList li:hover {
        background: rgba(242, 153, 74, 0.2);
        color: #f2994a; }
        .filterSection .annotateBy .dropdownItemList li:hover label {
          color: #f2994a; }
      .filterSection .annotateBy .dropdownItemList .checkbox {
        margin: 0; }
        .filterSection .annotateBy .dropdownItemList .checkbox span {
          height: 14px;
          width: 14px;
          border: 1px solid #9b9b9b;
          display: inline-block;
          position: relative;
          border-radius: 3px;
          cursor: pointer;
          background-color: #fff;
          margin-right: 5px; }
        .filterSection .annotateBy .dropdownItemList .checkbox input[type='checkbox'] {
          display: none; }
      .filterSection .annotateBy .dropdownItemList [type='checkbox']:checked + span:before {
        content: '';
        position: absolute;
        top: -1px;
        left: -1px;
        background-color: orange;
        width: 14px;
        height: 14px;
        border-radius: 3px; }
  .filterSection .dropdownGroup {
    display: flex;
    justify-content: space-between; }
  .filterSection .filter .itemBtn {
    height: 36px;
    background: #fff url(../img/ch-filter-purple-icon.svg) 10px center no-repeat;
    background-size: 15px;
    font-weight: 500;
    color: #360D57;
    border-radius: 10px;
    padding: 0 15px 0 35px;
    display: inline-flex;
    align-items: center;
    border: 1px solid #360D57;
    filter: drop-shadow(0px 2px 5px rgba(40, 40, 40, 0.1)); }
    .filterSection .filter .itemBtn:focus {
      color: #360D57 !important; }
    .filterSection .filter .itemBtn.up {
      background: #F9F2FF url(../img/ch-filter-purple-icon.svg) 10px center no-repeat;
      background-size: 15px; }
    .filterSection .filter .itemBtn .checkedItemCount {
      width: 21px;
      height: 21px;
      background-color: #360D57;
      color: #ffffff;
      display: none;
      justify-content: center;
      align-items: center;
      margin-left: 10px;
      font-size: 14px;
      font-weight: 500;
      border-radius: 40px; }
  .filterSection .filter .dropdownItemList {
    border-radius: 5px;
    top: 40px; }

.radioBtn {
  margin: 0; }
  .radioBtn .btn {
    color: #595959;
    font-size: 14px;
    padding: 5px 10px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px; }
  .radioBtn input[type='radio'] {
    display: none; }
  .radioBtn input[type='radio']:checked + .btn {
    background: rgba(19, 139, 250, 0.19);
    color: #138bfa; }

.dmRange {
  position: relative;
  width: 99%;
  height: 1px;
  margin-left: 2px;
  margin-top: 10px; }
  .dmRange .rangeBar {
    width: 100%;
    background-color: #9b9b9b;
    display: block;
    height: 2px; }

.dmRange input {
  width: 100%;
  position: absolute;
  top: 2px;
  height: 0;
  -webkit-appearance: none; }

.dmRange-labels {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  /*.active.selected:before {
    display: none;
  }*/ }
  .dmRange-labels li {
    position: relative;
    color: #c4c4c4;
    font-size: 12px;
    cursor: pointer; }
    .dmRange-labels li:before {
      position: absolute !important;
      top: -23px;
      left: 0;
      right: 0;
      content: '';
      margin: 0 auto;
      width: 10px;
      height: 10px;
      background: #c4c4c4;
      border-radius: 50%; }
    .dmRange-labels li:first-child:before {
      margin-left: 0 !important; }
    .dmRange-labels li:last-child:before {
      margin-right: 0 !important; }
  .dmRange-labels .active {
    color: #138bfa; }
  .dmRange-labels .selected:before {
    background: #138bfa; }
  .dmRange-labels .selected {
    color: #138bfa;
    font-weight: 500; }

.downloadPushNotification {
  width: 485px;
  height: 80px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 20px 20px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  border: 1px solid #DEE2E6;
  background-color: #FFFAE6;
  color: #303030;
  font-size: 14px;
  line-height: 20px;
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s ease-in;
  padding: 10px 15px 10px 15px;
  z-index: 91;
  margin-bottom: 0;
  position: relative; }
  .downloadPushNotification.pushNotificationActive {
    visibility: visible;
    opacity: 1;
    margin-bottom: 10px; }
  .downloadPushNotification .icon {
    width: 56px;
    height: 56px;
    background: #F5F5F5;
    border-radius: 8px;
    display: inline-flex;
    justify-content: center;
    align-items: center; }
  .downloadPushNotification.datasetDownload .icon {
    background: url(../img/ch-progressing-download.svg) center center no-repeat; }
  .downloadPushNotification.trainingProcessStarted:before {
    display: none; }
  .downloadPushNotification.trainingProcessStarted .icon {
    background: #F5F5F5 url(../img/ch-training-process.svg) center center no-repeat; }
  .downloadPushNotification.trainingProcessCompleted:before {
    display: none; }
  .downloadPushNotification.trainingProcessCompleted .icon {
    background: #F5F5F5 url(../img/ch-training-completed.svg) center center no-repeat; }
  .downloadPushNotification.pushNotificationInfo {
    border-color: #138bfa; }
    .downloadPushNotification.pushNotificationInfo .icon {
      background: url(../img/ch-datasets-blue.svg) center center no-repeat; }
    .downloadPushNotification.pushNotificationInfo:before {
      background: rgba(19, 139, 250, 0.4); }
  .downloadPushNotification.pushNotificationSuccess {
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 20px 20px rgba(0, 0, 0, 0.08);
    font-weight: 600;
    width: 360px;
    height: 56px; }
    .downloadPushNotification.pushNotificationSuccess .icon {
      background: url(../img/ch-icon-download-success.svg) center center no-repeat; }
    .downloadPushNotification.pushNotificationSuccess:before {
      background: rgba(73, 192, 43, 0.4); }
    .downloadPushNotification.pushNotificationSuccess .closeNotification {
      width: 40px;
      height: 30px; }
      .downloadPushNotification.pushNotificationSuccess .closeNotification img {
        content: url(../img/ch-icon-close-success.svg); }
  .downloadPushNotification.pushNotificationDanger {
    border: solid 1px #eb5857; }
    .downloadPushNotification.pushNotificationDanger .icon {
      background: url(../img/ch-datasets-red.svg) center center no-repeat; }
    .downloadPushNotification.pushNotificationDanger:before {
      background: rgba(235, 88, 87, 0.4); }
  .downloadPushNotification.newSharedModel .icon {
    background: url(../img/ch-datasets-blue.svg) center center no-repeat; }
  .downloadPushNotification.newSharedDataset .icon {
    background: url(../img/ch-datasets-blue.svg) center center no-repeat; }
  .downloadPushNotification.newSharedDevice .icon {
    background: url(../img/ch-device-green.svg) center center no-repeat; }
  .downloadPushNotification.smartAnnotationCompelte .icon {
    background: url(../img/ch-smart-annotate-pink.svg) center center no-repeat; }
  .downloadPushNotification.dataGenerate3dComplete .icon {
    background: url(../img/ch-synthetic-data-blue.svg) center center no-repeat; }
  .downloadPushNotification.dataGenerate2dComplete .icon {
    background: url(../img/ch-synthetic-data-blue.svg) center center no-repeat; }
  .downloadPushNotification.dataAugmentationComplete .icon {
    background: url(../img/ch-augmentation-blue.svg) center center no-repeat; }
  .downloadPushNotification.videoAnnotationComplete .icon {
    background: url(../img/video-red.svg) center center no-repeat; }
  .downloadPushNotification.modelTrainingCompleteFace .icon {
    background: url(../img/ch-face-model-orange.svg) center center no-repeat; }
  .downloadPushNotification.modelTrainingCompleteObject .icon {
    background: url(../img/ch-object-model-blue.svg) center center no-repeat; }
  .downloadPushNotification.modelTrainingCompleteImage .icon {
    background: url(../img/ch-image-model-green.svg) center center no-repeat; }
  .downloadPushNotification.success {
    min-height: 32px;
    border-radius: 4px;
    flex-direction: row-reverse;
    justify-content: flex-end; }
    .downloadPushNotification.success:before {
      border-radius: 4px 0 0 4px; }
    .downloadPushNotification.success:before {
      height: 62px; }
    .downloadPushNotification.success .icon {
      background: url(../img/icon-sucess.svg) center center no-repeat;
      margin-right: 0;
      height: 42px;
      width: 42px; }
    .downloadPushNotification.success .notification {
      color: #20B526;
      width: auto;
      margin-left: 20px; }
    .downloadPushNotification.success .closeNotification {
      width: 35px;
      height: 35px;
      top: 15px; }
  .downloadPushNotification.SuccessIcon .icon {
    background: url(../img/check-icon-circle-green.svg) center center no-repeat; }
  .downloadPushNotification .notification {
    width: 360px;
    color: #303030;
    font-size: 14px;
    word-break: break-word;
    /*white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;*/ }
    .downloadPushNotification .notification a {
      font-weight: 500;
      color: #DB5315; }
  .downloadPushNotification span:first-letter {
    text-transform: uppercase; }
  .downloadPushNotification .closeNotification {
    margin-left: auto;
    width: 25px;
    height: 25px;
    padding: 6.2px;
    border-radius: 30px;
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 10px; }

.actionsDropdown {
  position: relative;
  z-index: 1002;
  border-radius: 5px; }
  .actionsDropdown .alertTooltip {
    top: 50px; }
  .actionsDropdown .actionBtn {
    background: rgba(155, 155, 155, 0.13) url(../img/down-arrow-gray.svg) 10px center no-repeat;
    border-radius: 5px;
    height: 44px;
    width: 100;
    border: 0;
    color: #595959;
    font-size: 14px;
    padding-left: 25px;
    background-size: 22px;
    cursor: pointer; }
    .actionsDropdown .actionBtn.active {
      background: white url(../img/up-arrow-gray.svg) 10px center no-repeat;
      background-size: 22px;
      box-shadow: 0px 4px 29px rgba(158, 158, 158, 0.25); }
  .actionsDropdown.alertDesable {
    background-color: rgba(155, 155, 155, 0.1); }
    .actionsDropdown.alertDesable .actionBtn {
      background: rgba(155, 155, 155, 0.2) url(../img/down-arrow-gray.svg) 10px center no-repeat;
      opacity: 0.5; }
  .actionsDropdown .actionItemList {
    position: absolute;
    top: 55px;
    left: 0;
    padding: 10px 0;
    width: 190px;
    background: #ffffff;
    box-shadow: 0px 4px 29px rgba(158, 158, 158, 0.25);
    border-radius: 5px;
    display: none;
    box-shadow: 0px 4px 29px rgba(158, 158, 158, 0.25);
    margin: 0; }
    .actionsDropdown .actionItemList li a {
      padding: 10px 10px 10px 45px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      color: #595959;
      font-size: 14px;
      transition: all 0.2s ease-in; }
    .actionsDropdown .actionItemList li:hover a {
      /*background-color: rgba(19, 139, 250, 0.21);*/
      background-color: rgba(19, 139, 250, 0.1);
      color: #138bfa; }
    .actionsDropdown .actionItemList .shareDataset a {
      background: url(../img/ch-share-dark-gray.svg) 15px center no-repeat; }
      .actionsDropdown .actionItemList .shareDataset a:hover {
        background: rgba(19, 139, 250, 0.1) url(../img/ch-share-blue.svg) 15px center no-repeat; }
    .actionsDropdown .actionItemList .shareDataset.active a {
      background: url(../img/ch-share-blue.svg) 15px center no-repeat;
      background-color: rgba(19, 139, 250, 0.21);
      color: #138bfa; }
    .actionsDropdown .actionItemList .shareDataset.alertDesable {
      background: transparent; }
      .actionsDropdown .actionItemList .shareDataset.alertDesable a {
        background: url(../img/ch-share-dark-gray.svg) 15px center no-repeat;
        cursor: default;
        color: #595959;
        opacity: 0.5; }
        .actionsDropdown .actionItemList .shareDataset.alertDesable a:hover, .actionsDropdown .actionItemList .shareDataset.alertDesable a:focus {
          cursor: default;
          color: #595959; }
    .actionsDropdown .actionItemList .shareDataset .alertTooltip {
      left: 40px;
      top: 40px; }
    .actionsDropdown .actionItemList .downloadDataset a {
      background: url(../img/ch-download-dark-gray.svg) 15px center no-repeat; }
      .actionsDropdown .actionItemList .downloadDataset a:hover {
        background: rgba(19, 139, 250, 0.1) url(../img/ch-download-blue.svg) 15px center no-repeat; }
    .actionsDropdown .actionItemList .downloadDataset.active a {
      background: url(../img/ch-download-blue.svg) 15px center no-repeat;
      background-color: rgba(19, 139, 250, 0.21);
      color: #138bfa; }
    .actionsDropdown .actionItemList .downloadDataset.alertDesable {
      background: transparent; }
      .actionsDropdown .actionItemList .downloadDataset.alertDesable a {
        background: url(../img/ch-download-dark-gray.svg) 15px center no-repeat;
        cursor: default;
        color: #595959;
        opacity: 0.5; }
        .actionsDropdown .actionItemList .downloadDataset.alertDesable a:hover, .actionsDropdown .actionItemList .downloadDataset.alertDesable a:focus {
          cursor: default;
          color: #595959; }
    .actionsDropdown .actionItemList .downloadDataset .alertTooltip {
      left: 40px;
      top: 40px; }
    .actionsDropdown .actionItemList .renameDataset a {
      background: url(../img/ch-rename-dark-gray.svg) 15px center no-repeat; }
      .actionsDropdown .actionItemList .renameDataset a:hover {
        background: rgba(19, 139, 250, 0.1) url(../img/ch-rename-blue.svg) 15px center no-repeat; }
    .actionsDropdown .actionItemList .renameDataset.active a {
      background: url(../img/ch-rename-blue.svg) 15px center no-repeat;
      background-color: rgba(19, 139, 250, 0.21);
      color: #138bfa; }
    .actionsDropdown .actionItemList .renameDataset.alertDesable {
      background: transparent; }
      .actionsDropdown .actionItemList .renameDataset.alertDesable a {
        background: url(../img/ch-rename-dark-gray.svg) 15px center no-repeat;
        cursor: default;
        color: #595959;
        opacity: 0.5; }
        .actionsDropdown .actionItemList .renameDataset.alertDesable a:hover, .actionsDropdown .actionItemList .renameDataset.alertDesable a:focus {
          cursor: default;
          color: #595959; }
    .actionsDropdown .actionItemList .renameDataset .alertTooltip {
      left: 40px;
      top: 40px; }
    .actionsDropdown .actionItemList .deleteDataset a {
      background: url(../img/ch-delete-dark-gray.svg) 15px center no-repeat; }
      .actionsDropdown .actionItemList .deleteDataset a:hover {
        background: rgba(19, 139, 250, 0.1) url(../img/ch-delete-blue.svg) 15px center no-repeat; }
    .actionsDropdown .actionItemList .deleteDataset.active a {
      background: url(../img/ch-delete-blue.svg) 15px center no-repeat;
      background-color: rgba(19, 139, 250, 0.21);
      color: #138bfa; }
    .actionsDropdown .actionItemList .createModel a {
      background: url(../img/ch-create-model-dark-gray.svg) 15px center no-repeat;
      background-size: 19px; }
      .actionsDropdown .actionItemList .createModel a:hover {
        background: rgba(19, 139, 250, 0.1) url(../img/ch-create-model-blue.svg) 15px center no-repeat;
        background-size: 19px; }
    .actionsDropdown .actionItemList .createModel.active a {
      background: url(../img/ch-create-model-blue.svg) 15px center no-repeat;
      background-color: rgba(19, 139, 250, 0.21);
      color: #138bfa;
      background-size: 19px; }
    .actionsDropdown .actionItemList .createModel.alertDesable {
      background: transparent; }
      .actionsDropdown .actionItemList .createModel.alertDesable a {
        background: url(../img/ch-create-model-dark-gray.svg) 15px center no-repeat;
        background-size: 19px;
        cursor: default;
        color: #595959;
        opacity: 0.5; }
        .actionsDropdown .actionItemList .createModel.alertDesable a:hover, .actionsDropdown .actionItemList .createModel.alertDesable a:focus {
          cursor: default;
          color: #595959; }
    .actionsDropdown .actionItemList .createModel .alertTooltip {
      left: 40px;
      top: 40px; }

.pushnotificationContainer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1002;
  width: 520px;
  height: auto;
  max-height: 93%;
  padding-right: 20px;
  padding-top: 70px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-start; }
  .pushnotificationContainer .csNotification,
  .pushnotificationContainer .notification_ {
    box-shadow: 2px 5px 10px rgba(65, 65, 65, 0.6);
    border-radius: 6px;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    min-width: 420px;
    margin-bottom: 12px;
    visibility: hidden;
    opacity: 0;
    transition: all 0.2s ease-in;
    position: absolute;
    flex-wrap: wrap; }
    .pushnotificationContainer .csNotification.notificationActive,
    .pushnotificationContainer .notification_.notificationActive {
      visibility: visible;
      opacity: 1;
      position: static; }
    .pushnotificationContainer .csNotification .group,
    .pushnotificationContainer .notification_ .group {
      display: flex;
      align-items: center;
      width: 100%; }
    .pushnotificationContainer .csNotification .icon,
    .pushnotificationContainer .notification_ .icon {
      width: 20px;
      height: 20px;
      margin-right: 12px; }
    .pushnotificationContainer .csNotification .note,
    .pushnotificationContainer .notification_ .note {
      font-size: 14px;
      font-weight: 600;
      width: 85%; }
    .pushnotificationContainer .csNotification a,
    .pushnotificationContainer .notification_ a {
      margin-left: 10px;
      color: #303030;
      text-decoration: underline;
      margin: 0 10px 0 5px; }
    .pushnotificationContainer .csNotification .extraNote,
    .pushnotificationContainer .notification_ .extraNote {
      font-size: 14px;
      font-weight: 400;
      color: #303030;
      width: 100%;
      margin: 5px 0 0;
      padding-left: 35px; }
    .pushnotificationContainer .csNotification.warnNotification,
    .pushnotificationContainer .notification_.warnNotification {
      background: #FFEBCE; }
      .pushnotificationContainer .csNotification.warnNotification .icon,
      .pushnotificationContainer .notification_.warnNotification .icon {
        background: url(../img/ch-loader-orange.svg) center center no-repeat; }
      .pushnotificationContainer .csNotification.warnNotification .note,
      .pushnotificationContainer .notification_.warnNotification .note {
        color: #DB5315; }
      .pushnotificationContainer .csNotification.warnNotification .closeNotification,
      .pushnotificationContainer .notification_.warnNotification .closeNotification {
        background: url(../img/ch-close-darkorange.svg) center center no-repeat; }
    .pushnotificationContainer .csNotification.uploadingProcess,
    .pushnotificationContainer .notification_.uploadingProcess {
      background: #fffae6;
      width: 390px; }
      .pushnotificationContainer .csNotification.uploadingProcess .note,
      .pushnotificationContainer .notification_.uploadingProcess .note {
        color: #303030;
        font-weight: 500; }
    .pushnotificationContainer .csNotification.successNotification, .pushnotificationContainer .csNotification.cloudSync, .pushnotificationContainer .csNotification.newRuleCreated,
    .pushnotificationContainer .notification_.successNotification,
    .pushnotificationContainer .notification_.cloudSync,
    .pushnotificationContainer .notification_.newRuleCreated {
      background: #E6F2ED; }
      .pushnotificationContainer .csNotification.successNotification .icon, .pushnotificationContainer .csNotification.cloudSync .icon, .pushnotificationContainer .csNotification.newRuleCreated .icon,
      .pushnotificationContainer .notification_.successNotification .icon,
      .pushnotificationContainer .notification_.cloudSync .icon,
      .pushnotificationContainer .notification_.newRuleCreated .icon {
        background: url(../img/check-icon-circle-green.svg) center center no-repeat;
        background-size: contain; }
      .pushnotificationContainer .csNotification.successNotification .note, .pushnotificationContainer .csNotification.cloudSync .note, .pushnotificationContainer .csNotification.newRuleCreated .note,
      .pushnotificationContainer .notification_.successNotification .note,
      .pushnotificationContainer .notification_.cloudSync .note,
      .pushnotificationContainer .notification_.newRuleCreated .note {
        color: #006C04; }
      .pushnotificationContainer .csNotification.successNotification .closeNotification, .pushnotificationContainer .csNotification.cloudSync .closeNotification, .pushnotificationContainer .csNotification.newRuleCreated .closeNotification,
      .pushnotificationContainer .notification_.successNotification .closeNotification,
      .pushnotificationContainer .notification_.cloudSync .closeNotification,
      .pushnotificationContainer .notification_.newRuleCreated .closeNotification {
        background: url(../img/close-green.svg) center center no-repeat; }
    .pushnotificationContainer .csNotification.errorNotification,
    .pushnotificationContainer .notification_.errorNotification {
      background: #FFEBE6; }
      .pushnotificationContainer .csNotification.errorNotification .icon,
      .pushnotificationContainer .notification_.errorNotification .icon {
        background: url(../img/ch-error-red.svg) center center no-repeat; }
      .pushnotificationContainer .csNotification.errorNotification .note,
      .pushnotificationContainer .notification_.errorNotification .note {
        color: #DB5315; }
      .pushnotificationContainer .csNotification.errorNotification .closeNotification,
      .pushnotificationContainer .notification_.errorNotification .closeNotification {
        background: url(../img/close-red.svg) center center no-repeat; }
    .pushnotificationContainer .csNotification .closeNotification,
    .pushnotificationContainer .notification_ .closeNotification {
      border: 0;
      cursor: pointer;
      padding: 0;
      background: transparent;
      margin-left: auto;
      width: 20px;
      height: 20px; }
    .pushnotificationContainer .csNotification.cloudSync, .pushnotificationContainer .csNotification.newRuleCreated,
    .pushnotificationContainer .notification_.cloudSync,
    .pushnotificationContainer .notification_.newRuleCreated {
      min-width: 360px;
      max-width: 360px; }
      .pushnotificationContainer .csNotification.cloudSync .note, .pushnotificationContainer .csNotification.newRuleCreated .note,
      .pushnotificationContainer .notification_.cloudSync .note,
      .pushnotificationContainer .notification_.newRuleCreated .note {
        color: #303030;
        font-weight: 500; }
      .pushnotificationContainer .csNotification.cloudSync .extraNote, .pushnotificationContainer .csNotification.newRuleCreated .extraNote,
      .pushnotificationContainer .notification_.cloudSync .extraNote,
      .pushnotificationContainer .notification_.newRuleCreated .extraNote {
        margin-top: 11px; }
        .pushnotificationContainer .csNotification.cloudSync .extraNote strong, .pushnotificationContainer .csNotification.newRuleCreated .extraNote strong,
        .pushnotificationContainer .notification_.cloudSync .extraNote strong,
        .pushnotificationContainer .notification_.newRuleCreated .extraNote strong {
          font-weight: 600; }
    .pushnotificationContainer .csNotification.newRuleCreated strong,
    .pushnotificationContainer .notification_.newRuleCreated strong {
      color: #B300AE; }
    .pushnotificationContainer .csNotification.thumnailUpdated,
    .pushnotificationContainer .notification_.thumnailUpdated {
      min-width: 360px;
      max-width: 360px;
      margin: 40px auto 0;
      position: static; }
      .pushnotificationContainer .csNotification.thumnailUpdated .note,
      .pushnotificationContainer .notification_.thumnailUpdated .note {
        color: #303030;
        font-weight: 500; }

.objTrainModel .processHighlightBar,
.createPerceptionModal_ .processHighlightBar,
.createPerceptionParametersModal .processHighlightBar {
  max-width: 500px;
  margin: 20px auto 40px; }
  .objTrainModel .processHighlightBar .stepNames,
  .createPerceptionModal_ .processHighlightBar .stepNames,
  .createPerceptionParametersModal .processHighlightBar .stepNames {
    width: 100%; }
  .objTrainModel .processHighlightBar ul li,
  .createPerceptionModal_ .processHighlightBar ul li,
  .createPerceptionParametersModal .processHighlightBar ul li {
    width: 25% !important; }
  .objTrainModel .processHighlightBar ul li:first-child + div + li,
  .createPerceptionModal_ .processHighlightBar ul li:first-child + div + li,
  .createPerceptionParametersModal .processHighlightBar ul li:first-child + div + li {
    width: 50% !important; }

.objTrainModel .modal-dialog,
.createPerceptionModal_ .modal-dialog,
.createPerceptionParametersModal .modal-dialog {
  max-width: 785px !important; }

.objTrainModel .modal-body,
.createPerceptionModal_ .modal-body,
.createPerceptionParametersModal .modal-body {
  padding: 0 !important; }

.objTrainModel .modal-content,
.createPerceptionModal_ .modal-content,
.createPerceptionParametersModal .modal-content {
  padding-bottom: 0 !important; }

.objTrainModel .perceptionCreateWrapper,
.createPerceptionModal_ .perceptionCreateWrapper,
.createPerceptionParametersModal .perceptionCreateWrapper {
  max-width: 500px;
  margin: 0 auto 0;
  min-height: 500px; }
  .objTrainModel .perceptionCreateWrapper label,
  .createPerceptionModal_ .perceptionCreateWrapper label,
  .createPerceptionParametersModal .perceptionCreateWrapper label {
    color: #535353;
    font-size: 14px;
    font-weight: 400; }
    .objTrainModel .perceptionCreateWrapper label .customTooltipHover img,
    .createPerceptionModal_ .perceptionCreateWrapper label .customTooltipHover img,
    .createPerceptionParametersModal .perceptionCreateWrapper label .customTooltipHover img {
      width: 15px;
      height: 15px; }
  .objTrainModel .perceptionCreateWrapper .form-group,
  .createPerceptionModal_ .perceptionCreateWrapper .form-group,
  .createPerceptionParametersModal .perceptionCreateWrapper .form-group {
    margin-bottom: 40px; }
  .objTrainModel .perceptionCreateWrapper #id_dataset,
  .createPerceptionModal_ .perceptionCreateWrapper #id_dataset,
  .createPerceptionParametersModal .perceptionCreateWrapper #id_dataset {
    height: 260px;
    max-height: 260px; }
  .objTrainModel .perceptionCreateWrapper #id_dataset_version,
  .createPerceptionModal_ .perceptionCreateWrapper #id_dataset_version,
  .createPerceptionParametersModal .perceptionCreateWrapper #id_dataset_version {
    height: 180px;
    max-height: 180px; }

.objTrainModel .segmentationModelType,
.createPerceptionModal_ .segmentationModelType,
.createPerceptionParametersModal .segmentationModelType {
  display: none;
  margin-bottom: 40px; }
  .objTrainModel .segmentationModelType .btnGroup,
  .createPerceptionModal_ .segmentationModelType .btnGroup,
  .createPerceptionParametersModal .segmentationModelType .btnGroup {
    display: flex;
    justify-content: space-between; }
  .objTrainModel .segmentationModelType h5,
  .createPerceptionModal_ .segmentationModelType h5,
  .createPerceptionParametersModal .segmentationModelType h5 {
    margin-bottom: 15px;
    color: #595959;
    font-weight: 600;
    font-size: 16px; }
  .objTrainModel .segmentationModelType .info,
  .createPerceptionModal_ .segmentationModelType .info,
  .createPerceptionParametersModal .segmentationModelType .info {
    margin-left: 5px; }
  .objTrainModel .segmentationModelType .customTooltip,
  .createPerceptionModal_ .segmentationModelType .customTooltip,
  .createPerceptionParametersModal .segmentationModelType .customTooltip {
    white-space: normal;
    width: 516px;
    white-space: normal;
    line-height: 24px;
    font-size: 15px;
    font-family: "Euclid Circular B";
    font-weight: 400;
    padding: 20px;
    border-radius: 5px;
    top: -350px;
    left: 25px;
    background: #ffffff;
    border: 1px solid #F2F1F1;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); }
    @media (max-width: 480px) {
      .objTrainModel .segmentationModelType .customTooltip,
      .createPerceptionModal_ .segmentationModelType .customTooltip,
      .createPerceptionParametersModal .segmentationModelType .customTooltip {
        left: -200px; } }
    .objTrainModel .segmentationModelType .customTooltip strong,
    .createPerceptionModal_ .segmentationModelType .customTooltip strong,
    .createPerceptionParametersModal .segmentationModelType .customTooltip strong {
      font-size: 16px;
      font-weight: 600;
      display: block; }
  .objTrainModel .segmentationModelType hr,
  .createPerceptionModal_ .segmentationModelType hr,
  .createPerceptionParametersModal .segmentationModelType hr {
    border: none; }
  .objTrainModel .segmentationModelType .btns,
  .createPerceptionModal_ .segmentationModelType .btns,
  .createPerceptionParametersModal .segmentationModelType .btns {
    background: transparent;
    border: 0;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: 400;
    color: #202223;
    cursor: pointer;
    position: relative;
    margin-right: 27px;
    padding-left: 30px; }
    .objTrainModel .segmentationModelType .btns:last-child,
    .createPerceptionModal_ .segmentationModelType .btns:last-child,
    .createPerceptionParametersModal .segmentationModelType .btns:last-child {
      margin-right: 0; }
    .objTrainModel .segmentationModelType .btns:before,
    .createPerceptionModal_ .segmentationModelType .btns:before,
    .createPerceptionParametersModal .segmentationModelType .btns:before {
      position: absolute;
      left: 0;
      width: 18px;
      height: 18px;
      border: 2px solid #8C9196;
      border-radius: 100px;
      background-color: #ffffff;
      content: ''; }
    .objTrainModel .segmentationModelType .btns:after,
    .createPerceptionModal_ .segmentationModelType .btns:after,
    .createPerceptionParametersModal .segmentationModelType .btns:after {
      position: absolute;
      left: 4px;
      width: 10px;
      height: 10px;
      border-radius: 100px;
      background: #ffffff;
      content: ''; }
    .objTrainModel .segmentationModelType .btns.active:before,
    .createPerceptionModal_ .segmentationModelType .btns.active:before,
    .createPerceptionParametersModal .segmentationModelType .btns.active:before {
      border-color: #8020CF; }
    .objTrainModel .segmentationModelType .btns.active:after,
    .createPerceptionModal_ .segmentationModelType .btns.active:after,
    .createPerceptionParametersModal .segmentationModelType .btns.active:after {
      background-color: #8020CF; }

.objTrainModel .epochsTestSize,
.createPerceptionModal_ .epochsTestSize,
.createPerceptionParametersModal .epochsTestSize {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; }
  .objTrainModel .epochsTestSize .form-group,
  .createPerceptionModal_ .epochsTestSize .form-group,
  .createPerceptionParametersModal .epochsTestSize .form-group {
    width: 45%; }
    .objTrainModel .epochsTestSize .form-group .customTooltip,
    .createPerceptionModal_ .epochsTestSize .form-group .customTooltip,
    .createPerceptionParametersModal .epochsTestSize .form-group .customTooltip {
      white-space: normal;
      left: -60px;
      width: 230px; }

.objTrainModel .hyperparametersBox,
.createPerceptionModal_ .hyperparametersBox,
.createPerceptionParametersModal .hyperparametersBox {
  width: 100%;
  margin-bottom: 10px; }
  .objTrainModel .hyperparametersBox .hyperparametersHeader,
  .createPerceptionModal_ .hyperparametersBox .hyperparametersHeader,
  .createPerceptionParametersModal .hyperparametersBox .hyperparametersHeader {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #D8D8D8;
    color: #210835;
    font-size: 16px;
    font-weight: 500;
    padding-bottom: 5px;
    cursor: pointer;
    background: url(../img/down-arrow-light-gray.svg) 98% center no-repeat; }
    .objTrainModel .hyperparametersBox .hyperparametersHeader.open,
    .createPerceptionModal_ .hyperparametersBox .hyperparametersHeader.open,
    .createPerceptionParametersModal .hyperparametersBox .hyperparametersHeader.open {
      background: url(../img/up-arrow-light-gray.svg) 98% center no-repeat; }
  .objTrainModel .hyperparametersBox .hyperparametersContent,
  .createPerceptionModal_ .hyperparametersBox .hyperparametersContent,
  .createPerceptionParametersModal .hyperparametersBox .hyperparametersContent {
    padding: 0 10px 0 0;
    display: none; }
    .objTrainModel .hyperparametersBox .hyperparametersContent.open,
    .createPerceptionModal_ .hyperparametersBox .hyperparametersContent.open,
    .createPerceptionParametersModal .hyperparametersBox .hyperparametersContent.open {
      display: block; }
    .objTrainModel .hyperparametersBox .hyperparametersContent::-webkit-scrollbar,
    .createPerceptionModal_ .hyperparametersBox .hyperparametersContent::-webkit-scrollbar,
    .createPerceptionParametersModal .hyperparametersBox .hyperparametersContent::-webkit-scrollbar {
      display: none; }
    .objTrainModel .hyperparametersBox .hyperparametersContent.active,
    .createPerceptionModal_ .hyperparametersBox .hyperparametersContent.active,
    .createPerceptionParametersModal .hyperparametersBox .hyperparametersContent.active {
      display: block; }
    .objTrainModel .hyperparametersBox .hyperparametersContent p,
    .createPerceptionModal_ .hyperparametersBox .hyperparametersContent p,
    .createPerceptionParametersModal .hyperparametersBox .hyperparametersContent p {
      font-weight: 400;
      font-size: 16px;
      line-height: 20px;
      color: #535353;
      margin-bottom: 10px !important;
      margin-top: 30px; }
    .objTrainModel .hyperparametersBox .hyperparametersContent .hyperparameterInputs,
    .createPerceptionModal_ .hyperparametersBox .hyperparametersContent .hyperparameterInputs,
    .createPerceptionParametersModal .hyperparametersBox .hyperparametersContent .hyperparameterInputs {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between; }
      .objTrainModel .hyperparametersBox .hyperparametersContent .hyperparameterInputs .form-group,
      .createPerceptionModal_ .hyperparametersBox .hyperparametersContent .hyperparameterInputs .form-group,
      .createPerceptionParametersModal .hyperparametersBox .hyperparametersContent .hyperparameterInputs .form-group {
        width: 45%;
        margin-bottom: 20px; }
        .objTrainModel .hyperparametersBox .hyperparametersContent .hyperparameterInputs .form-group input[type="number"],
        .objTrainModel .hyperparametersBox .hyperparametersContent .hyperparameterInputs .form-group input[type="text"],
        .createPerceptionModal_ .hyperparametersBox .hyperparametersContent .hyperparameterInputs .form-group input[type="number"],
        .createPerceptionModal_ .hyperparametersBox .hyperparametersContent .hyperparameterInputs .form-group input[type="text"],
        .createPerceptionParametersModal .hyperparametersBox .hyperparametersContent .hyperparameterInputs .form-group input[type="number"],
        .createPerceptionParametersModal .hyperparametersBox .hyperparametersContent .hyperparameterInputs .form-group input[type="text"] {
          height: 44px; }
        .objTrainModel .hyperparametersBox .hyperparametersContent .hyperparameterInputs .form-group:nth-child(2n) .customTooltip,
        .createPerceptionModal_ .hyperparametersBox .hyperparametersContent .hyperparameterInputs .form-group:nth-child(2n) .customTooltip,
        .createPerceptionParametersModal .hyperparametersBox .hyperparametersContent .hyperparameterInputs .form-group:nth-child(2n) .customTooltip {
          top: 25px;
          right: 0;
          left: auto; }
        .objTrainModel .hyperparametersBox .hyperparametersContent .hyperparameterInputs .form-group label,
        .createPerceptionModal_ .hyperparametersBox .hyperparametersContent .hyperparameterInputs .form-group label,
        .createPerceptionParametersModal .hyperparametersBox .hyperparametersContent .hyperparameterInputs .form-group label {
          color: #535353 !important;
          font-weight: 500 !important; }

.createPerceptionParametersModal .btnWrapper {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: center;
  box-shadow: 3px 0px 5px 1px rgba(193, 193, 193, 0.25);
  padding: 20px; }
  .createPerceptionParametersModal .btnWrapper .perceptionCreateBtn {
    height: 44px;
    width: 100%;
    border-radius: 10px;
    max-width: 250px;
    font-size: 14px;
    font-weight: 500;
    border: none; }

.createPerceptionParametersModal input[type="number"] {
  max-width: 220px; }

.oddCreatePerceptionModal .perceptionCreateBtn {
  height: 42px;
  width: 100%;
  max-width: 160px;
  margin: 0 auto; }

.actionAndInfoGroup {
  position: relative;
  z-index: 15;
  float: right;
  margin-top: 8px; }
  .actionAndInfoGroup .filterSection {
    padding: 0 10px;
    width: 100%;
    justify-content: space-between; }

.autoSegmentation {
  font-size: 16px;
  color: #595959;
  display: inline-flex;
  align-items: center; }
  .autoSegmentation .customTooltip {
    top: 25px;
    left: -10px; }
  .autoSegmentation .info {
    margin-left: 10px;
    margin-right: 20px; }

.annotateImageZoneModal .annotateClassesPanel .optionItems {
  width: 165px; }

.annotateImageZoneModal .annotateClassesPanel .btnWrapper button {
  width: auto;
  padding-left: 15px;
  padding-right: 15px; }

.annotateImageZoneModal .imageViewArea .toolbar {
  position: static !important; }

.annotateOption .optionItems .deleteZone {
  background: url(../img/ch-delete-dark-gray.svg) 5px center no-repeat; }

.annotateOption .optionItems .renameZone {
  background: url(../img/ch-rename-dark-gray.svg) 5px center no-repeat; }

#importModel .form-control,
.tvuUploadMedia .createDataset .form-control {
  margin-bottom: 0; }

#importModel .error,
.tvuUploadMedia .createDataset .error {
  color: #eb5857;
  font-size: 12px;
  display: block;
  margin: 0; }

#pills-2d .background_image_ul .mCSB_scrollTools.mCSB_scrollTools_horizontal {
  display: none !important; }

#trainingAddClassModal {
  /*form {
    h5, h6 {
      font-family: $euclidFont;
      font-size: 16px;
      line-height: 20px;
      position: absolute;
      left: 36px;
    }
    h5 {
      top: 238px;
      color: #210835;
      font-weight: 500;
    }
    h6 {
      color: #B7B7B7;
      font-weight: 600;
      top: 263px;
    }
  }*/ }
  #trainingAddClassModal .modal-dialog {
    min-width: 630px !important;
    height: 100% !important; }
  #trainingAddClassModal .modal-content {
    height: 474px;
    padding: 0 35px 35px 35px; }
    #trainingAddClassModal .modal-content button.closeModal {
      position: absolute; }
  #trainingAddClassModal .model-title {
    font-family: "Euclid Circular B";
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    color: #210835; }
  #trainingAddClassModal .modal-body {
    width: 100%;
    flex: initial !important;
    padding: 0; }
    #trainingAddClassModal .modal-body h5 {
      font-size: 16px;
      font-style: normal;
      font-weight: 500;
      line-height: 20px;
      color: #210835; }
    #trainingAddClassModal .modal-body form {
      margin-bottom: 30px; }
      #trainingAddClassModal .modal-body form .form-group {
        display: flex;
        justify-content: space-between;
        align-items: flex-end; }
  #trainingAddClassModal .label {
    font-family: "Euclid Circular B";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #4E4576;
    width: 100%;
    margin-bottom: 15px; }
  #trainingAddClassModal .form-control {
    border: none; }
  #trainingAddClassModal .form-group .addTrClassBtn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 5px 12px;
    width: 120px;
    height: 50px;
    background: #F2E9FA;
    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.08), inset 0px -1px 0px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    color: #303030;
    font-weight: 500;
    font-size: 14px;
    line-height: 18px; }
    #trainingAddClassModal .form-group .addTrClassBtn:disabled {
      background: #F7F7F7;
      border-radius: 10px;
      color: #B7B7B7 !important; }
  #trainingAddClassModal .form-group .inputGroup {
    width: 76%; }
    #trainingAddClassModal .form-group .inputGroup input {
      background: #F7F7F7;
      border: 1px solid #EAEAEA;
      border-radius: 5px;
      height: 50px; }
    #trainingAddClassModal .form-group .inputGroup label {
      font-family: "Euclid Circular B";
      font-style: normal;
      font-weight: 500;
      font-size: 16px;
      line-height: 20px;
      width: 98px;
      height: 20px;
      color: #210835; }
  #trainingAddClassModal .trainingAddClassBtn {
    border-radius: 10px;
    color: #FFFFFF;
    text-align: center;
    font-family: "Euclid Circular B";
    transition: all 0.2s ease-in;
    cursor: pointer;
    font-weight: 500;
    width: 250px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-appearance: none !important;
    padding: 5px 12px;
    background: #8020CF;
    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.08), inset 0px -1px 0px rgba(0, 0, 0, 0.2);
    margin-top: auto;
    margin-left: auto; }
    #trainingAddClassModal .trainingAddClassBtn:disabled {
      background: #F7F7F7;
      border-radius: 10px;
      color: #B7B7B7 !important;
      border: none; }
  #trainingAddClassModal .classes {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 110px;
    overflow-y: auto;
    align-items: flex-start;
    align-content: flex-start; }
    #trainingAddClassModal .classes h6 {
      color: #B7B7B7;
      font-size: 16px;
      font-weight: 600; }
    #trainingAddClassModal .classes .classTag {
      align-items: center;
      height: 30px;
      border-radius: 6px;
      margin-right: 8px;
      margin-bottom: 8px;
      font-size: 14px;
      font-weight: 600;
      display: flex;
      flex-direction: row;
      padding: 5px 30px 5px 12px;
      background: #210835;
      color: #F2E9FA;
      max-width: 560px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      position: relative;
      display: inline-block; }
      #trainingAddClassModal .classes .classTag br {
        display: none; }
      #trainingAddClassModal .classes .classTag .closeTag {
        width: 12px;
        height: 12px;
        background: url(../img/close-tag-white.svg) center center no-repeat;
        margin-left: 10px;
        border: none;
        position: absolute;
        right: 10px;
        top: 9px; }
      #trainingAddClassModal .classes .classTag:last-child {
        margin-right: 0; }

.objectEditModal .modal-dialog {
  margin: 0 auto;
  max-width: 920px;
  align-items: center; }

.objectEditModal .modal-content {
  margin: 0; }

.objectEditModal .modal-body {
  padding: 0 20px;
  margin: 0 20px;
  max-height: 550px;
  overflow-y: auto;
  overflow-x: hidden; }
  @media (min-width: 1500px) {
    .objectEditModal .modal-body {
      max-height: 700px; } }

.objectEditModal .form-group {
  margin-bottom: 20px; }
  .objectEditModal .form-group .togglebtnWrapper {
    display: flex;
    border-bottom: 1px solid #D8D8D8; }

.objectEditModal .form-control {
  background: #F7F7F7;
  border: 1px solid #EAEAEA;
  border-radius: 5px;
  height: 50px;
  padding-left: 20px;
  padding-right: 20px;
  width: 100%;
  font-size: 14px;
  color: #222222; }
  .objectEditModal .form-control:focus {
    box-shadow: 0 0 0 1px #EAEAEA !important;
    border-color: #EAEAEA; }

.objectEditModal p.label {
  margin-bottom: 5px;
  color: #210835;
  font-size: 16px;
  font-weight: 500; }

.objectEditModal .info .customTooltip {
  left: 0;
  top: 25px;
  min-width: 300px;
  padding: 10px;
  white-space: normal;
  padding: 10px; }

.objectEditModal textarea.form-control {
  height: 80px;
  resize: none;
  border: none; }

.objectEditModal .textarea {
  padding: 10px 10px 10px 0;
  border: 1px solid rgba(0, 0, 0, 0.32);
  border-radius: 26px; }

.objectEditModal .editModelFormWrapper {
  display: flex;
  justify-content: space-between; }
  .objectEditModal .editModelFormWrapper .max-NMS, .objectEditModal .editModelFormWrapper .minConfTreshold {
    width: 47%;
    padding-bottom: 25px; }

.objectEditModal .classSettingDropdown,
.objectEditModal .hyperparamsDropdown {
  width: 20px;
  height: 20px;
  cursor: pointer;
  display: none;
  justify-content: center;
  align-items: center; }
  .objectEditModal .classSettingDropdown.up,
  .objectEditModal .hyperparamsDropdown.up {
    transform: rotate(180deg); }

.objectEditModal .classSetting,
.objectEditModal .editModelHyperparameters {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #D8D8D8;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  color: #210835;
  padding-bottom: 5px; }

.objectEditModal .text-center {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0 auto;
  padding-top: 20px;
  background: #ffffff;
  position: sticky;
  bottom: 0; }
  .objectEditModal .text-center button.editImportBtn {
    width: 145px;
    height: 36px;
    background: #8020CF;
    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.08), inset 0px -1px 0px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    margin: 0 20px; }
  .objectEditModal .text-center button.resetImportBtn {
    width: 145px;
    height: 36px;
    border: 1px solid #360D57;
    filter: drop-shadow(0px 2px 5px rgba(40, 40, 40, 0.1));
    border-radius: 10px;
    margin: 0 20px; }

.objectEditModal .fieldsGroup {
  padding-bottom: 50px; }

.objectEditModal .editModelValueBoxes {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  width: 100%;
  gap: 25px;
  margin-bottom: 35px; }
  .objectEditModal .editModelValueBoxes .editValueBox {
    width: 239px; }
    .objectEditModal .editModelValueBoxes .editValueBox .customTooltip {
      top: 25px;
      left: 0;
      width: auto;
      padding: 3px 10px; }
    .objectEditModal .editModelValueBoxes .editValueBox label {
      height: 24px;
      font-weight: 500;
      font-size: 16px;
      line-height: 20px;
      color: #210835;
      padding-bottom: 0;
      display: flex;
      align-items: center; }
      .objectEditModal .editModelValueBoxes .editValueBox label img {
        margin-left: 5px; }
    .objectEditModal .editModelValueBoxes .editValueBox input {
      width: 239px;
      height: 38px;
      background: #F7F7F7;
      border: 1px solid #EAEAEA;
      border-radius: 5px; }

.objectEditModal .searchValueWrapper {
  width: 100%; }
  .objectEditModal .searchValueWrapper .searchValue input {
    width: 239px;
    height: 38px;
    background: url("../img/Search.svg") #FFFFFF 10px center no-repeat;
    border: 1px solid #E5E5E5;
    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.08), inset 0px -1px 0px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    padding-left: 35px; }

.objectEditModal .hyper-values span {
  width: 100%;
  padding: 15px 0; }

.objectEditModal .cct-values .overflow {
  width: 100%;
  gap: 25px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  max-height: 200px;
  overflow-y: auto; }

.objectEditModal .filedsGroup {
  display: flex;
  justify-content: space-between;
  overflow: scroll; }
  @media (max-width: 768px) {
    .objectEditModal .filedsGroup {
      flex-direction: column; } }
  .objectEditModal .filedsGroup .group {
    display: inline-flex;
    flex-direction: column;
    width: 35%; }
    @media (max-width: 768px) {
      .objectEditModal .filedsGroup .group {
        width: 100%; } }
    .objectEditModal .filedsGroup .group:first-child {
      width: 60%; }
      @media (max-width: 768px) {
        .objectEditModal .filedsGroup .group:first-child {
          width: 100%;
          margin-bottom: 10px; } }
    .objectEditModal .filedsGroup .group .form-group {
      width: 48%; }
  .objectEditModal .filedsGroup .classGroup {
    display: inline-flex;
    justify-content: flex-start;
    flex-direction: column;
    width: 32%;
    margin-right: 15px; }
    .objectEditModal .filedsGroup .classGroup:first-child .info .customTooltip {
      right: auto;
      left: 0; }
    .objectEditModal .filedsGroup .classGroup:nth-child(3n) {
      margin-right: 0; }
      .objectEditModal .filedsGroup .classGroup:nth-child(3n) .info .customTooltip {
        right: -60px;
        left: auto; }
    .objectEditModal .filedsGroup .classGroup label {
      margin: 0 0 2px;
      color: #595959;
      font-size: 14px;
      font-weight: 600;
      text-transform: capitalize;
      display: inline-flex;
      align-items: center;
      justify-content: flex-start; }
    .objectEditModal .filedsGroup .classGroup .form-control {
      height: 36px;
      background: #F7F7F7;
      border: 1px solid #EAEAEA;
      border-radius: 5px;
      text-overflow: ellipsis; }
  .objectEditModal .filedsGroup .classSetting p.label {
    margin-bottom: 15px;
    border-bottom: 1px solid #D8D8D8;
    background: url(../img/down-arrow-light-gray.svg) 99% center no-repeat;
    cursor: pointer; }
    .objectEditModal .filedsGroup .classSetting p.label.up {
      background: url(../img/up-arrow-light-gray.svg) 99% center no-repeat; }
  .objectEditModal .filedsGroup .hyperparameters p.label {
    margin-bottom: 15px;
    border-bottom: 1px solid #D8D8D8;
    background: url(../img/down-arrow-light-gray.svg) 99% center no-repeat;
    cursor: pointer; }
    .objectEditModal .filedsGroup .hyperparameters p.label.up {
      background: url(../img/up-arrow-light-gray.svg) 99% center no-repeat; }
  .objectEditModal .filedsGroup .hyperparameters .info {
    margin-left: 5px; }
  .objectEditModal .filedsGroup .btnSave {
    width: 100%;
    height: 44px;
    max-width: 135px;
    margin: 0 auto; }
  .objectEditModal .filedsGroup .togglebtnWrapper {
    width: 100%;
    display: flex;
    border-bottom: 1px solid #D8D8D8;
    padding: 5px 0; }
    .objectEditModal .filedsGroup .togglebtnWrapper .optional {
      font-weight: 500;
      font-size: 16px;
      color: #210835; }
      .objectEditModal .filedsGroup .togglebtnWrapper .optional .infoIcon {
        margin-left: 10px;
        margin-right: 5px; }
    .objectEditModal .filedsGroup .togglebtnWrapper .customToggleBtn {
      margin-left: auto; }
      .objectEditModal .filedsGroup .togglebtnWrapper .customToggleBtn input[type="checkbox"]:checked + .controlBtn {
        background-color: #8020CF; }
  .objectEditModal .filedsGroup .searchClass {
    background: #FFFFFF;
    border: 1px solid #E5E5E5;
    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.08), inset 0px -1px 0px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    width: 222px;
    height: 36px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 2;
    color: #595959;
    font-size: 14px;
    margin: 10px 0 10px; }
    .objectEditModal .filedsGroup .searchClass .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden {
      margin-right: 0;
      padding-top: 3px; }
    .objectEditModal .filedsGroup .searchClass .searchClassBtn {
      width: 30px;
      height: 28px;
      background: url(../img/ch-search-gray.svg) center center no-repeat;
      border: 0;
      display: inline-flex; }
    .objectEditModal .filedsGroup .searchClass .searchClassInput {
      border: 0;
      box-shadow: none;
      color: #000;
      height: 26px;
      width: 85%;
      padding: 0 10px 0 0;
      display: inline-flex;
      font-size: 14px; }
      .objectEditModal .filedsGroup .searchClass .searchClassInput:focus {
        outline: none; }
    .objectEditModal .filedsGroup .searchClass .easy-autocomplete-container {
      width: 170px !important;
      right: 0;
      left: auto;
      top: 40px; }
    .objectEditModal .filedsGroup .searchClass .easy-autocomplete-container ul li.selected {
      background: rgba(19, 139, 250, 0.19) !important;
      color: #138bfa !important; }
    .objectEditModal .filedsGroup .searchClass .easy-autocomplete-container ul li:after {
      display: none; }
    .objectEditModal .filedsGroup .searchClass #eac-container-topSearch {
      top: 50px;
      left: auto;
      right: 0; }
    .objectEditModal .filedsGroup .searchClass .easy-autocomplete-container ul {
      border-radius: 5px;
      padding: 10px 0; }
  .objectEditModal .filedsGroup .accordion {
    display: none;
    padding-bottom: 50px; }
  .objectEditModal .filedsGroup .clearfix {
    width: 100%; }
  .objectEditModal .filedsGroup .sublabel {
    width: 100%;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 10px;
    color: #535353; }

.objectEditModal .upload_model_modal .info,
.objectEditModal .objectEditModal .info,
.objectEditModal .importUploadModel .info,
.objectEditModal .tvuUploadMedia .info {
  margin-left: 5px;
  display: inline-block; }
  .objectEditModal .upload_model_modal .info .infoIcon,
  .objectEditModal .objectEditModal .info .infoIcon,
  .objectEditModal .importUploadModel .info .infoIcon,
  .objectEditModal .tvuUploadMedia .info .infoIcon {
    width: 16px;
    height: 16px; }
  .objectEditModal .upload_model_modal .info .customTooltip,
  .objectEditModal .objectEditModal .info .customTooltip,
  .objectEditModal .importUploadModel .info .customTooltip,
  .objectEditModal .tvuUploadMedia .info .customTooltip {
    top: 24px;
    left: -10px;
    text-transform: none;
    white-space: normal;
    min-width: 360px;
    border: 1px solid #F2F1F1;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    padding: 10px 15px;
    font-size: 15px;
    color: #595959;
    padding: 20px; }

.objectEditModal .objectEditModal .form-control:disabled {
  background-color: #ffffff;
  opacity: 0.5; }

.objectEditModal .objectEditModal .perceptionCreateBtn {
  display: inline-block;
  margin: 0 5px;
  max-width: 150px;
  height: 40px;
  font-size: 14px;
  font-family: "Euclid Circular B";
  font-weight: 500;
  border-radius: 10px; }
  .objectEditModal .objectEditModal .perceptionCreateBtn:disabled {
    background: #F7F7F7;
    color: #B7B7B7; }

.objectEditModal .objectEditModal .resetImportBtn {
  border: 1px solid #747474;
  background: #ffffff;
  color: #202223;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500; }

@media (max-width: 768px) {
  .objectEditModal .upload_model_modal .info .customTooltip {
    left: -140px; } }

@media (max-width: 768px) {
  .objectEditModal .importUploadModel .info .customTooltip {
    left: auto;
    right: -50px; } }

.objectEditModal .resetModelSetting .modalHeader {
  padding: 20px 30px;
  position: relative;
  width: 100%;
  text-align: left;
  font-size: 20px;
  color: #303030;
  font-weight: 500;
  display: flex;
  align-items: center;
  margin-top: 0; }

.objectEditModal .resetModelSetting .tagDeleteWarn_files_inner {
  height: auto;
  min-height: auto !important; }
  .objectEditModal .resetModelSetting .tagDeleteWarn_files_inner p strong {
    font-weight: 500; }

.objectEditModal .resetModelSetting .tagDeleteWarn_files_inner {
  max-width: 500px;
  padding: 20px 20px 20px 30px; }
  .objectEditModal .resetModelSetting .tagDeleteWarn_files_inner p {
    font-size: 16px;
    font-weight: 400;
    color: #595959;
    text-align: left;
    width: 100%; }

.objectEditModal .resetModelSetting .modalHeader {
  position: relative;
  width: 100%;
  text-align: left;
  font-size: 20px;
  font-weight: 500;
  display: flex;
  justify-content: space-between; }
  .objectEditModal .resetModelSetting .modalHeader h5 {
    background: url(../img/info-solid-red.svg) left center no-repeat;
    padding-left: 30px; }
  .objectEditModal .resetModelSetting .modalHeader .closeModal {
    position: static; }

.objectEditModal .resetModelSetting .deleteWarnOptions {
  justify-content: flex-end; }
  .objectEditModal .resetModelSetting .deleteWarnOptions a {
    padding: 5px 15px;
    font-weight: 500;
    border-radius: 6px;
    margin: 0 5px;
    font-size: 14px; }
    .objectEditModal .resetModelSetting .deleteWarnOptions a:focus, .objectEditModal .resetModelSetting .deleteWarnOptions a:hover {
      text-decoration: none; }
  .objectEditModal .resetModelSetting .deleteWarnOptions .delete-falseFiles {
    background: transparent;
    color: #303030 !important;
    border: none; }
    .objectEditModal .resetModelSetting .deleteWarnOptions .delete-falseFiles:hover, .objectEditModal .resetModelSetting .deleteWarnOptions .delete-falseFiles:focus {
      background: transparent;
      color: #303030 !important; }
  .objectEditModal .resetModelSetting .deleteWarnOptions a.delete-trueFiles {
    background: #BF2600;
    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.08), inset 0px -1px 0px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    color: #fff !important; }
    .objectEditModal .resetModelSetting .deleteWarnOptions a.delete-trueFiles:hover, .objectEditModal .resetModelSetting .deleteWarnOptions a.delete-trueFiles:focus {
      background: #BF2600;
      color: #fff !important; }

.objectEditModal .trainNewVersionBtn {
  width: 150px;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #EBEFF2;
  box-shadow: 0px 2px 5px rgba(40, 40, 40, 0.1);
  border-radius: 5px;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #2C5A99;
  border: none; }
  .objectEditModal .trainNewVersionBtn:hover {
    opacity: 0.9; }

.objectEditModal .uploadThemeMyFilesModal .folderContainer .eachFolder a,
.objectEditModal .uploadThemeRawDataModal .folderContainer .eachFolder a,
.objectEditModal .uploadThemeDatasetModal .folderContainer .eachFolder a {
  margin-right: 0; }

.objectEditModal .uploadThemeMyFilesModal .folderContainer .checkbox,
.objectEditModal .uploadThemeRawDataModal .folderContainer .checkbox,
.objectEditModal .uploadThemeDatasetModal .folderContainer .checkbox {
  display: none; }

.modelclassLengthAlertModal {
  position: fixed;
  top: 0;
  transition: all 0.2s ease-in;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0 15px;
  font-size: 18px;
  opacity: 0;
  visibility: hidden;
  z-index: 9999; }
  .modelclassLengthAlertModal h5 {
    font-size: 22px;
    font-weight: 600;
    color: #303030;
    margin-bottom: 30px;
    margin-right: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 98%; }
    .modelclassLengthAlertModal h5 img {
      width: 20px; }
      .modelclassLengthAlertModal h5 img.close-modal-icon {
        margin-left: auto;
        cursor: pointer; }
  .modelclassLengthAlertModal p {
    font-size: 18px;
    font-weight: 500;
    color: #333333; }
    .modelclassLengthAlertModal p span {
      color: #8020cf;
      font-weight: 600; }
  .modelclassLengthAlertModal a {
    padding: 4px 30px;
    font-weight: 400;
    border-radius: 30px;
    margin-left: auto; }
    .modelclassLengthAlertModal a:focus, .modelclassLengthAlertModal a:active, .modelclassLengthAlertModal a:hover {
      color: #fff; }
  .modelclassLengthAlertModal .innerContainer {
    background: #ffffff;
    border-radius: 10px;
    padding: 20px;
    width: 100%;
    max-width: 600px;
    height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; }
  .modelclassLengthAlertModal.alertModal {
    opacity: 1;
    visibility: visible; }
  .modelclassLengthAlertModal .buttonsWrpper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 20px; }
    .modelclassLengthAlertModal .buttonsWrpper a[class*='-button'] {
      min-width: 155px;
      font-size: 16px; }

#modelDetails .tmct .customTooltip,
#modelDetails .tnms .customTooltip,
#modelDetails .tmap .customTooltip {
  left: 0;
  top: 25px;
  min-width: 300px;
  padding: 10px;
  white-space: normal;
  padding: 10px; }

.modelDetailsContent {
  width: 100%;
  font-family: "Euclid Circular B";
  font-weight: 600;
  line-height: 24px;
  padding-bottom: 20px; }
  .modelDetailsContent .boxHeader {
    height: 24px;
    font-family: "Euclid Circular B";
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    color: #210835;
    margin-bottom: 15px; }
  .modelDetailsContent .infoLine {
    font-size: 16px;
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    font-family: "Euclid Circular B";
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0px;
    text-align: left;
    color: #535353; }
    .modelDetailsContent .infoLine.perspective .customTooltip {
      width: 250px;
      white-space: normal; }
  .modelDetailsContent .w-50 + .w-50 .infoLine:nth-child(2) .customTooltip {
    width: 250px;
    white-space: normal; }
  .modelDetailsContent .traininglogBtn {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 5px 12px;
    gap: 5px;
    height: 36px;
    border: 1px solid #360D57;
    border-radius: 10px;
    background: #ffffff;
    font-size: 14px; }
    .modelDetailsContent .traininglogBtn:hover {
      background: #ffffff; }
  .modelDetailsContent h3 {
    margin: 20px 0 10px 0;
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 24px;
    color: #210835; }
  .modelDetailsContent .overviewBox {
    box-sizing: border-box;
    width: 49.5%;
    height: 365px;
    background: #FAFAFA;
    border: 1px solid #EAE9FF;
    box-shadow: 2px 5px 5px rgba(185, 184, 184, 0.08);
    border-radius: 10px;
    padding: 30px 0 0 40px; }
  .modelDetailsContent .validationBox {
    box-sizing: border-box;
    width: 49.5%;
    height: 365px;
    padding: 30px 0 0 40px;
    background: #FAFAFA;
    border: 1px solid #EAE9FF;
    box-shadow: 2px 5px 5px rgba(185, 184, 184, 0.08);
    border-radius: 10px; }
  .modelDetailsContent .mapScore {
    margin-top: 34px; }
    .modelDetailsContent .mapScore .infoLine {
      color: #4E4576;
      font-family: "Euclid Circular B";
      font-size: 18px;
      font-weight: 500;
      line-height: 20px;
      letter-spacing: 0px;
      text-align: left; }
      .modelDetailsContent .mapScore .infoLine .infoValue {
        color: #303030; }
  .modelDetailsContent .infoValue {
    font-family: "Euclid Circular B";
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: 0px;
    text-align: left;
    color: #303030; }
  .modelDetailsContent .learning {
    background: #FAFAFA;
    border: 1px solid #EAE9FF;
    box-shadow: 2px 5px 5px rgba(185, 184, 184, 0.08);
    border-radius: 10px;
    width: 30%;
    height: 300px;
    padding: 20px; }
  .modelDetailsContent .loss {
    background: #FAFAFA;
    border: 1px solid #EAE9FF;
    box-shadow: 2px 5px 5px rgba(185, 184, 184, 0.08);
    border-radius: 10px;
    width: 28%;
    height: 300px;
    padding: 20px; }
  .modelDetailsContent .augmentation {
    background: #FAFAFA;
    border: 1px solid #EAE9FF;
    box-shadow: 2px 5px 5px rgba(185, 184, 184, 0.08);
    border-radius: 10px;
    width: 40%;
    height: 300px;
    padding: 20px; }

.versionText {
  width: 78px;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px;
  border: 1px solid #718BB4;
  border-radius: 5px;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #0A2E60;
  margin-right: 10px; }

.modelDetailTabs {
  width: 100%;
  border-bottom: 1px solid #E0E0E0;
  display: flex;
  margin: 10px 0 20px; }
  .modelDetailTabs .modelDetailTab {
    width: 200px;
    text-align: center;
    font-family: "Euclid Circular B";
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #303030;
    padding: 10px;
    left: 0;
    right: 0;
    top: calc(50% - 20px/2);
    font-style: normal; }
    .modelDetailTabs .modelDetailTab:hover {
      cursor: pointer; }
  .modelDetailTabs .activeTab {
    border-radius: 10px 10px 0px 0px;
    border-bottom: 4px solid #5A1691; }

.moveDataModal .checkbox,
.copyDataModal .checkbox {
  position: static;
  margin-right: 10px; }

.moveDataModal .folderContainer ul,
.moveDataModal .folderDataContainer ul,
.copyDataModal .folderContainer ul,
.copyDataModal .folderDataContainer ul {
  padding-bottom: 180px; }

.moveDataModal .folderContainer li,
.moveDataModal .folderDataContainer li,
.copyDataModal .folderContainer li,
.copyDataModal .folderDataContainer li {
  padding-left: 10px;
  padding-right: 10px; }
  .moveDataModal .folderContainer li a,
  .moveDataModal .folderDataContainer li a,
  .copyDataModal .folderContainer li a,
  .copyDataModal .folderDataContainer li a {
    margin-right: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    white-space: nowrap;
    max-width: 58%;
    background: none;
    color: #595959;
    margin-left: 0;
    padding: 10px 0 10px 15px; }
    .moveDataModal .folderContainer li a:hover, .moveDataModal .folderContainer li a:focus,
    .moveDataModal .folderDataContainer li a:hover,
    .moveDataModal .folderDataContainer li a:focus,
    .copyDataModal .folderContainer li a:hover,
    .copyDataModal .folderContainer li a:focus,
    .copyDataModal .folderDataContainer li a:hover,
    .copyDataModal .folderDataContainer li a:focus {
      color: #595959 !important; }
  .moveDataModal .folderContainer li .version,
  .moveDataModal .folderDataContainer li .version,
  .copyDataModal .folderContainer li .version,
  .copyDataModal .folderDataContainer li .version {
    font-size: 16px;
    font-weight: 600;
    color: #4E4576;
    margin-left: 5px; }
  .moveDataModal .folderContainer li .versionDropdown,
  .moveDataModal .folderDataContainer li .versionDropdown,
  .copyDataModal .folderContainer li .versionDropdown,
  .copyDataModal .folderDataContainer li .versionDropdown {
    margin-left: auto; }
    .moveDataModal .folderContainer li .versionDropdown.relative,
    .moveDataModal .folderDataContainer li .versionDropdown.relative,
    .copyDataModal .folderContainer li .versionDropdown.relative,
    .copyDataModal .folderDataContainer li .versionDropdown.relative {
      z-index: 91; }
    .moveDataModal .folderContainer li .versionDropdown .itemBtn,
    .moveDataModal .folderDataContainer li .versionDropdown .itemBtn,
    .copyDataModal .folderContainer li .versionDropdown .itemBtn,
    .copyDataModal .folderDataContainer li .versionDropdown .itemBtn {
      border-color: #AAAAAA;
      color: #210835;
      font-weight: 600;
      background: url(../img/trangle-down-arrow-gray.svg) 80% center no-repeat;
      text-align: center;
      border-radius: 10px;
      width: auto;
      height: 36px; }
      .moveDataModal .folderContainer li .versionDropdown .itemBtn.up,
      .moveDataModal .folderDataContainer li .versionDropdown .itemBtn.up,
      .copyDataModal .folderContainer li .versionDropdown .itemBtn.up,
      .copyDataModal .folderDataContainer li .versionDropdown .itemBtn.up {
        background: url(../img/trangle-up-arrow-gray.svg) 80% center no-repeat; }
      .moveDataModal .folderContainer li .versionDropdown .itemBtn:focus,
      .moveDataModal .folderDataContainer li .versionDropdown .itemBtn:focus,
      .copyDataModal .folderContainer li .versionDropdown .itemBtn:focus,
      .copyDataModal .folderDataContainer li .versionDropdown .itemBtn:focus {
        color: #210835 !important;
        border-color: #8020CF; }
    .moveDataModal .folderContainer li .versionDropdown .dropdownItemList,
    .moveDataModal .folderDataContainer li .versionDropdown .dropdownItemList,
    .copyDataModal .folderContainer li .versionDropdown .dropdownItemList,
    .copyDataModal .folderDataContainer li .versionDropdown .dropdownItemList {
      width: 200px;
      padding: 0 !important;
      box-shadow: 0px 3px 5px rgba(44, 44, 44, 0.2), 0px 0px 1px rgba(44, 44, 44, 0.31);
      position: absolute;
      right: 0;
      left: auto;
      display: none;
      overflow: hidden; }
      .moveDataModal .folderContainer li .versionDropdown .dropdownItemList:after,
      .moveDataModal .folderDataContainer li .versionDropdown .dropdownItemList:after,
      .copyDataModal .folderContainer li .versionDropdown .dropdownItemList:after,
      .copyDataModal .folderDataContainer li .versionDropdown .dropdownItemList:after {
        display: none; }
      .moveDataModal .folderContainer li .versionDropdown .dropdownItemList.show,
      .moveDataModal .folderDataContainer li .versionDropdown .dropdownItemList.show,
      .copyDataModal .folderContainer li .versionDropdown .dropdownItemList.show,
      .copyDataModal .folderDataContainer li .versionDropdown .dropdownItemList.show {
        display: block; }
      .moveDataModal .folderContainer li .versionDropdown .dropdownItemList li,
      .moveDataModal .folderDataContainer li .versionDropdown .dropdownItemList li,
      .copyDataModal .folderContainer li .versionDropdown .dropdownItemList li,
      .copyDataModal .folderDataContainer li .versionDropdown .dropdownItemList li {
        border-bottom: 1px solid #E7E7E7;
        margin: 0;
        height: auto; }
        .moveDataModal .folderContainer li .versionDropdown .dropdownItemList li:last-child,
        .moveDataModal .folderDataContainer li .versionDropdown .dropdownItemList li:last-child,
        .copyDataModal .folderContainer li .versionDropdown .dropdownItemList li:last-child,
        .copyDataModal .folderDataContainer li .versionDropdown .dropdownItemList li:last-child {
          border-bottom: none; }
        .moveDataModal .folderContainer li .versionDropdown .dropdownItemList li a,
        .moveDataModal .folderDataContainer li .versionDropdown .dropdownItemList li a,
        .copyDataModal .folderContainer li .versionDropdown .dropdownItemList li a,
        .copyDataModal .folderDataContainer li .versionDropdown .dropdownItemList li a {
          padding: 15px;
          color: #303030;
          font-size: 16px;
          font-weight: 500;
          height: auto;
          width: 100%;
          max-width: 100%; }
          .moveDataModal .folderContainer li .versionDropdown .dropdownItemList li a p,
          .moveDataModal .folderDataContainer li .versionDropdown .dropdownItemList li a p,
          .copyDataModal .folderContainer li .versionDropdown .dropdownItemList li a p,
          .copyDataModal .folderDataContainer li .versionDropdown .dropdownItemList li a p {
            margin: 0;
            color: #535353;
            font-size: 14px; }
        .moveDataModal .folderContainer li .versionDropdown .dropdownItemList li:hover a, .moveDataModal .folderContainer li .versionDropdown .dropdownItemList li:focus a,
        .moveDataModal .folderDataContainer li .versionDropdown .dropdownItemList li:hover a,
        .moveDataModal .folderDataContainer li .versionDropdown .dropdownItemList li:focus a,
        .copyDataModal .folderContainer li .versionDropdown .dropdownItemList li:hover a,
        .copyDataModal .folderContainer li .versionDropdown .dropdownItemList li:focus a,
        .copyDataModal .folderDataContainer li .versionDropdown .dropdownItemList li:hover a,
        .copyDataModal .folderDataContainer li .versionDropdown .dropdownItemList li:focus a {
          background-color: #FAF5FF;
          color: #595959 !important; }
        .moveDataModal .folderContainer li .versionDropdown .dropdownItemList li.active a,
        .moveDataModal .folderDataContainer li .versionDropdown .dropdownItemList li.active a,
        .copyDataModal .folderContainer li .versionDropdown .dropdownItemList li.active a,
        .copyDataModal .folderDataContainer li .versionDropdown .dropdownItemList li.active a {
          background-color: #FAF5FF;
          color: #595959 !important; }

.moveDataModal .selectAll,
.moveDataModal .selectAllCopy,
.moveDataModal .selectAllDataset,
.copyDataModal .selectAll,
.copyDataModal .selectAllCopy,
.copyDataModal .selectAllDataset {
  background: transparent;
  border: none;
  margin-left: auto;
  margin-right: 10px; }

.moveDataModal .alertSelectedImage,
.copyDataModal .alertSelectedImage {
  margin-right: auto;
  margin-left: 50px;
  margin-bottom: 0;
  font-size: 16px;
  font-weight: 600;
  color: #8020CF;
  display: none; }

.trainingDataModal #my_files_data_tab_id {
  display: none; }

.tvuUploadMedia .togglebtnWrapper {
  display: flex;
  padding-bottom: 5px;
  border-bottom: 1px solid #D8D8D8; }
  .tvuUploadMedia .togglebtnWrapper .labelText {
    color: #303030;
    font-size: 16px;
    margin-left: 0; }

.table-pagination {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 100px; }
  .table-pagination a {
    color: #303030;
    float: left;
    padding: 6px 14px;
    text-decoration: none;
    border-radius: 5px;
    font-size: 14px; }
    .table-pagination a:hover {
      color: #8020CF !important; }
    .table-pagination a.active {
      background-color: #352B63 !important;
      color: white !important; }
    .table-pagination a:hover:not(.active) {
      background-color: transparent !important; }
    .table-pagination a img {
      height: 16px; }
  .table-pagination .first-page, .table-pagination .last-page {
    background: #FFFFFF;
    color: #595959;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.08), inset 0px -1px 0px rgba(0, 0, 0, 0.2);
    margin: 0 10px;
    padding: 10px !important; }
  .table-pagination .first-page {
    box-shadow: none; }
  .table-pagination .disabled {
    background: #F7F7F7 !important;
    pointer-events: none !important; }
  .table-pagination .itemBtn {
    background: #ffffff url(../img/trangle-down-arrow-lightblue.svg) 70% center no-repeat !important;
    height: 41px !important;
    border: 1px solid #EAEAEA !important;
    border-radius: 4px !important;
    width: 60px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #303030; }
    .table-pagination .itemBtn.up {
      background: #ffffff url(../img/trangle-up-arrow-lightblue.svg) 70% center no-repeat !important; }
  .table-pagination .dropdownItemList {
    width: 60px !important;
    top: 42px !important;
    left: 1 !important;
    border-radius: 6px !important;
    max-height: 120px !important;
    text-indent: 4px; }
    .table-pagination .dropdownItemList li:hover a {
      background-color: #F7F7F7 !important;
      color: #595959 !important; }

.annotatingLoader {
  background: rgba(89, 89, 89, 0.64);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1006;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  flex-direction: column;
  color: #3FECFF;
  text-indent: -160px;
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s ease-in; }
  .annotatingLoader.annotatingLoader-load {
    visibility: visible;
    opacity: 1; }
  .annotatingLoader .lds-default {
    display: inline-block;
    position: relative;
    width: 64px;
    height: 64px;
    transform: translateX(-80px);
    margin-bottom: 10px; }
  .annotatingLoader .lds-default div {
    position: absolute;
    width: 5px;
    height: 5px;
    background: #3FECFF;
    border-radius: 50%;
    animation: lds-default 1.2s linear infinite; }
  .annotatingLoader .lds-default div:nth-child(1) {
    animation-delay: 0s;
    top: 29px;
    left: 53px; }
  .annotatingLoader .lds-default div:nth-child(2) {
    animation-delay: -0.1s;
    top: 18px;
    left: 50px; }
  .annotatingLoader .lds-default div:nth-child(3) {
    animation-delay: -0.2s;
    top: 9px;
    left: 41px; }
  .annotatingLoader .lds-default div:nth-child(4) {
    animation-delay: -0.3s;
    top: 6px;
    left: 29px; }
  .annotatingLoader .lds-default div:nth-child(5) {
    animation-delay: -0.4s;
    top: 9px;
    left: 18px; }
  .annotatingLoader .lds-default div:nth-child(6) {
    animation-delay: -0.5s;
    top: 18px;
    left: 9px; }
  .annotatingLoader .lds-default div:nth-child(7) {
    animation-delay: -0.6s;
    top: 29px;
    left: 6px; }
  .annotatingLoader .lds-default div:nth-child(8) {
    animation-delay: -0.7s;
    top: 41px;
    left: 9px; }
  .annotatingLoader .lds-default div:nth-child(9) {
    animation-delay: -0.8s;
    top: 50px;
    left: 18px; }
  .annotatingLoader .lds-default div:nth-child(10) {
    animation-delay: -0.9s;
    top: 53px;
    left: 29px; }
  .annotatingLoader .lds-default div:nth-child(11) {
    animation-delay: -1s;
    top: 50px;
    left: 41px; }
  .annotatingLoader .lds-default div:nth-child(12) {
    animation-delay: -1.1s;
    top: 41px;
    left: 50px; }

@keyframes lds-default {
  0%, 20%, 80%, 100% {
    transform: scale(1); }
  50% {
    transform: scale(1.5); } }

.videoUploadPrediction .noMatchFound_ {
  display: none !important; }

.switch-toggle {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
  margin-bottom: 0 !important;
  margin-left: 10px; }
  .switch-toggle input {
    opacity: 0;
    width: 0;
    height: 0; }
  .switch-toggle input:checked + .slider {
    background-color: #8020CF; }
  .switch-toggle input:checked + .slider:before {
    transform: translateX(20px); }

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 34px; }
  .slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .4s;
    border-radius: 50%; }

.add-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  display: none; }
  .add-content .add-new {
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 5px;
    color: #0052CC; }

.add-line {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 10px; }
  .add-line img {
    cursor: pointer; }

.day-dropdown, .hour-dropdown {
  position: relative;
  display: inline-block;
  width: 200px; }
  .day-dropdown .dropbtn, .hour-dropdown .dropbtn {
    background-color: #F7F7F7;
    color: #303030;
    padding: 5px 10px;
    font-size: 16px;
    border: none;
    width: 100%;
    border: 1px solid #E0E0E0;
    cursor: pointer;
    border-radius: 6px;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
  .day-dropdown .dropdown-content, .hour-dropdown .dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    max-height: 200px;
    overflow-y: scroll;
    width: 100%;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    z-index: 1;
    padding: 10px; }
    .day-dropdown .dropdown-content ::-webkit-scrollbar, .hour-dropdown .dropdown-content ::-webkit-scrollbar {
      display: none; }
    .day-dropdown .dropdown-content label, .hour-dropdown .dropdown-content label {
      display: block;
      padding: 4px;
      cursor: pointer; }
    .day-dropdown .dropdown-content input, .hour-dropdown .dropdown-content input {
      margin-right: 8px; }
  .day-dropdown .show, .hour-dropdown .show {
    display: block !important; }

.apply-to-all-checkbox {
  display: none; }

.supportContentArea {
  margin-top: 20px; }
  .supportContentArea .col-lg-8 {
    padding-right: 10px; }
  .supportContentArea .col-lg-4 {
    padding-left: 10px; }
  .supportContentArea .contactWrapper,
  .supportContentArea .faqContent,
  .supportContentArea .followUs,
  .supportContentArea .howToVideo {
    border-radius: 10px;
    background: #FFFFFF;
    /*box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);*/
    border-radius: 10px;
    padding: 20px; }
  .supportContentArea .followUs {
    padding: 15px 20px;
    border-radius: 5px; }
  .supportContentArea .faqContent .faqQuestions {
    min-height: 600px; }
    .supportContentArea .faqContent .faqQuestions .eachFaq h3 {
      font-weight: bold;
      font-size: 14px;
      line-height: 16px;
      color: #58595B;
      background: #F6F7FB;
      border-radius: 10px;
      display: block;
      padding: 10px 40px 10px 15px;
      position: relative;
      cursor: pointer; }
      .supportContentArea .faqContent .faqQuestions .eachFaq h3 .icon {
        position: absolute;
        width: 40px;
        height: 40px;
        background: url(../img/down-arrow-gray.svg) center center no-repeat;
        right: 0;
        top: -2px;
        z-index: 2;
        transition: all 0.2s ease-in;
        transform: rotate(-90deg); }
    .supportContentArea .faqContent .faqQuestions .eachFaq p {
      font-weight: normal;
      font-size: 14px;
      line-height: 20px;
      color: #58595B;
      padding: 15px;
      background-color: #fff; }
    .supportContentArea .faqContent .faqQuestions .eachFaq .faqAns {
      font-weight: normal;
      font-size: 14px;
      line-height: 20px;
      color: #58595B;
      padding: 15px;
      background-color: #fff;
      display: none; }
      .supportContentArea .faqContent .faqQuestions .eachFaq .faqAns a {
        color: #007bff;
        text-decoration: underline; }
        .supportContentArea .faqContent .faqQuestions .eachFaq .faqAns a:hover, .supportContentArea .faqContent .faqQuestions .eachFaq .faqAns a:focus {
          color: #007bff; }
    .supportContentArea .faqContent .faqQuestions .eachFaq.selected h3 .icon {
      background: url(../img/down-arrow-gray.svg) center center no-repeat;
      transform: rotate(0deg); }
  .supportContentArea .contactInformation {
    border-radius: 10px;
    background: #FFFFFF;
    border-radius: 5px;
    padding: 15px 20px;
    color: #58595B; }
    .supportContentArea .contactInformation a {
      color: #58595B; }
      .supportContentArea .contactInformation a:hover {
        color: #f7941d; }
    .supportContentArea .contactInformation p {
      margin: 0; }
    .supportContentArea .contactInformation .email {
      margin-bottom: 15px;
      padding-left: 35px;
      background: url(../img/email-envelope.svg) center left no-repeat; }
      .supportContentArea .contactInformation .email a:hover {
        color: #595959; }
    .supportContentArea .contactInformation .location {
      padding-left: 35px;
      background: url(../img/location-pin.svg) center left no-repeat; }
  .supportContentArea .contactWrapper p {
    margin: 0; }
  .supportContentArea .card {
    background: #DFE7FE;
    box-shadow: 0px 4px 19px rgba(176, 175, 175, 0.15);
    border-radius: 5px;
    padding: 20px;
    border: 0;
    margin-bottom: 20px; }
    .supportContentArea .card a {
      display: flex;
      justify-content: flex-end;
      align-items: flex-end;
      flex-wrap: wrap;
      color: #595959;
      font-size: 18px;
      font-weight: 500; }
      .supportContentArea .card a img {
        max-height: 145px; }
    .supportContentArea .card p {
      text-align: left;
      margin-bottom: 0;
      width: 100%;
      height: 48px;
      margin-top: -20px;
      display: flex;
      align-items: flex-end; }
      @media (max-width: 1500px) {
        .supportContentArea .card p {
          margin-top: 10px;
          font-size: 16px; } }
  .supportContentArea .cardSeeAll {
    padding: 20px 20px 15px;
    background: #ffffff;
    box-shadow: 0px 4px 19px rgba(176, 175, 175, 0.15);
    border-radius: 5px;
    color: #595959;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px; }
    .supportContentArea .cardSeeAll .infoGroup {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      width: 100%; }
    .supportContentArea .cardSeeAll .img {
      width: 140px;
      height: 180px;
      display: inline-flex;
      margin-right: 15px; }
      .supportContentArea .cardSeeAll .img img {
        max-width: 140px;
        max-height: 180px;
        width: 100%; }
    .supportContentArea .cardSeeAll h4 {
      font-size: 16px;
      line-height: 21px;
      color: #58595B;
      margin-bottom: 20px; }
    .supportContentArea .cardSeeAll h5 {
      margin: 0 0 10px 0;
      font-size: 16px; }
    .supportContentArea .cardSeeAll p {
      font-size: 14px;
      margin-bottom: 0;
      line-height: 26px; }
    .supportContentArea .cardSeeAll .info {
      width: 70%; }
    .supportContentArea .cardSeeAll a {
      color: #138bfa;
      margin-left: auto;
      font-size: 14px;
      display: inline-flex;
      margin-top: -10px;
      padding-right: 25px;
      background: url(../img/ch-arrow-blue.svg) right center no-repeat; }
  .supportContentArea .popularArticles {
    padding-top: 15px;
    padding-bottom: 25px; }
    .supportContentArea .popularArticles h4 {
      margin-bottom: 15px; }
    .supportContentArea .popularArticles .info {
      width: 100%; }
    .supportContentArea .popularArticles .seeAll {
      margin-top: 0; }
    .supportContentArea .popularArticles a {
      background: none;
      text-decoration: underline;
      padding-right: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: block; }
    .supportContentArea .popularArticles p {
      font-size: 16px; }
      .supportContentArea .popularArticles p:first-child {
        margin-bottom: 10px; }
      .supportContentArea .popularArticles p a {
        font-size: 14px;
        margin-top: 2px; }

.faqContent,
.contactInformation,
.contactWrapper,
.followUs,
.howToVideo {
  margin-bottom: 20px; }
  .faqContent h4,
  .contactInformation h4,
  .contactWrapper h4,
  .followUs h4,
  .howToVideo h4 {
    font-size: 18px;
    line-height: 21px;
    color: #58595B;
    margin-bottom: 17px; }
    .faqContent h4 img,
    .contactInformation h4 img,
    .contactWrapper h4 img,
    .followUs h4 img,
    .howToVideo h4 img {
      margin-right: 10px; }

.contactInformation h4,
.contactWrapper h4,
.followUs h4,
.howToVideo h4 {
  font-size: 16px; }
  .contactInformation h4 img,
  .contactWrapper h4 img,
  .followUs h4 img,
  .howToVideo h4 img {
    display: none; }

.supportForm {
  padding-top: 10px; }
  .supportForm input[type="text"],
  .supportForm input[type="email"],
  .supportForm textarea {
    background: #FFFFFF;
    border: 1px solid #9B9B9B;
    box-sizing: border-box;
    border-radius: 26px;
    height: 52px;
    padding: 10px 30px;
    width: 100%; }
  .supportForm div.input {
    margin: 0 !important; }
  .supportForm .hs_firstname {
    margin-right: 15px !important; }
  .supportForm .hs-firstname, .supportForm .hs_lastname {
    width: 47% !important; }
  .supportForm textarea {
    height: auto; }
  .supportForm label {
    font-size: 14px;
    line-height: 16px;
    color: #9B9B9B;
    padding: 0 5px;
    background-color: #fff;
    position: absolute;
    margin: 0;
    left: 26px;
    top: -8px; }
  .supportForm .hs-main-font-element,
  .supportForm .hs-error-msg {
    position: static;
    color: red;
    font-size: 12px;
    text-align: center;
    width: 100%; }
  .supportForm .hs-form-field {
    position: relative;
    width: 100%; }
  .supportForm input[type="submit"] {
    width: 100%;
    background: #0084FF;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.19788);
    border-radius: 26px;
    padding: 10px 20px; }
  .supportForm .hs-input {
    width: 100% !important; }
  .supportForm fieldset {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    margin-bottom: 20px !important; }
  .supportForm .hs-fieldtype-textarea .hs-error-msgs {
    position: absolute;
    bottom: -28px;
    width: 100%;
    text-align: center; }
  .supportForm .hs_error_rollup {
    margin-top: 30px; }

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .supportForm fieldset {
    display: block; } }

.followUs ul {
  padding-left: 0;
  margin: 0; }
  .followUs ul li {
    margin: 0 5px;
    transition: all 0.2s ease-in;
    font-family: "Roboto";
    width: initial;
    list-style: none;
    display: inline-block;
    margin-right: 20px; }
    .followUs ul li p {
      color: #b3b5b8;
      margin-bottom: 0;
      margin-top: 5px; }
    .followUs ul li:hover {
      opacity: 0.6; }

.howToVideo {
  min-height: 162px; }
  .howToVideo a {
    float: right;
    color: #8020CF;
    font-size: 14px;
    font-family: "Euclid Circular B";
    line-height: 30px;
    font-weight: 500;
    text-decoration: underline; }
    .howToVideo a:hover {
      color: #8020CF; }
  .howToVideo .sampleVideo {
    margin-right: 10px;
    width: 140px;
    position: relative; }
    .howToVideo .sampleVideo a {
      display: flex;
      justify-content: center;
      align-items: center; }
  .howToVideo .vidoeContent {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start; }
  .howToVideo .howChoochWorks {
    line-height: 20px;
    font-family: "Euclid Circular B";
    font-weight: 400;
    font-size: 13px;
    color: #535353; }
    .howToVideo .howChoochWorks span {
      color: #535353;
      display: block;
      font-family: "Euclid Circular B";
      font-weight: 500;
      margin-top: 5px;
      line-height: 24px; }

@media (max-width: 967px) {
  .supportForm fieldset {
    max-width: 100% !important; }
  .supportForm .hs-firstname, .supportForm .hs_lastname {
    width: 48.5% !important; }
  .supportWrapper {
    padding-top: 20px; }
  .supportContentArea .faqContent .faqQuestions {
    max-height: none;
    min-height: auto; } }

@media (max-width: 480px) {
  .supportForm .hs-firstname {
    margin-bottom: 20px; }
  .supportForm .hs-firstname, .supportForm .hs_lastname {
    width: 100% !important; } }

.support-header {
  font-family: "Euclid Circular B";
  font-weight: 500;
  font-size: 20px;
  line-height: 36px;
  color: #000000;
  margin-bottom: 15px; }

.support-subheader {
  font-family: "Euclid Circular B";
  font-weight: 500;
  font-size: 18px;
  line-height: 20px;
  color: #535353;
  margin-bottom: 5px; }

.support-card {
  width: 273px;
  height: 200px;
  background: #FFFFFF;
  border: 1px solid #E0E0E0;
  border-radius: 6px;
  padding: 25px 30px;
  margin-right: 25px;
  margin-bottom: 25px;
  font-family: "Euclid Circular B";
  display: flex;
  flex-direction: column; }
  .support-card .support-card-header {
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    color: #210835;
    margin-bottom: 15px; }
  .support-card .support-card-content {
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: #303030; }
  .support-card .support-card-link {
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    color: #8020CF;
    margin-top: auto;
    cursor: pointer;
    position: relative; }
    .support-card .support-card-link img {
      position: absolute;
      top: 0; }

.contact-area {
  border-top: 1px solid #E0E0E0;
  border-bottom: 1px solid #E0E0E0;
  padding: 30px 0;
  width: 100%;
  height: 195px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: "Euclid Circular B";
  margin: 25px 0; }
  .contact-area .contact-area-header {
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    color: #210835;
    margin-bottom: 10px; }
  .contact-area .contact-area-content {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #4E4576; }
  .contact-area .contact-area-btn {
    width: 99px;
    height: 36px;
    background: #8020CF;
    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.08), inset 0px -1px 0px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    border: none;
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    color: #FFFFFF;
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center; }

.contact-info-area {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  font-family: "Euclid Circular B";
  margin-bottom: 50px; }
  .contact-info-area .contact-info-area-header {
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    color: #210835;
    margin-bottom: 20px; }
  .contact-info-area .contact-info-area-text {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #4E4576;
    margin: 17px 0 !important; }
  .contact-info-area .twitter-btn {
    width: 117px;
    height: 36px;
    background: #1DA1F2;
    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.08), inset 0px -1px 0px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    border: none;
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #FFFFFF !important;
    margin-right: 16px;
    justify-content: space-evenly; }
  .contact-info-area .linkedin-btn {
    width: 117px;
    height: 36px;
    background: #0072B1;
    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.08), inset 0px -1px 0px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    border: none;
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #FFFFFF !important;
    justify-content: space-evenly; }

.dashboardWrapper .dashboardContentArea {
  padding: 10px 0 0 0; }
  .dashboardWrapper .dashboardContentArea .col-lg-8 {
    padding-right: 15px; }
  .dashboardWrapper .dashboardContentArea .col-lg-4 {
    padding-left: 15px; }
  .dashboardWrapper .dashboardContentArea .latesAction,
  .dashboardWrapper .dashboardContentArea .apiKey,
  .dashboardWrapper .dashboardContentArea .apiDocumentations,
  .dashboardWrapper .dashboardContentArea .ftpHost,
  .dashboardWrapper .dashboardContentArea .howToVideo,
  .dashboardWrapper .dashboardContentArea .currentPlan {
    margin-bottom: 10px;
    border-radius: 10px;
    background: #FFFFFF;
    border-radius: 5px;
    padding: 15px;
    min-height: 162px;
    font-family: "Euclid Circular B"; }
    .dashboardWrapper .dashboardContentArea .latesAction h4,
    .dashboardWrapper .dashboardContentArea .apiKey h4,
    .dashboardWrapper .dashboardContentArea .apiDocumentations h4,
    .dashboardWrapper .dashboardContentArea .ftpHost h4,
    .dashboardWrapper .dashboardContentArea .howToVideo h4,
    .dashboardWrapper .dashboardContentArea .currentPlan h4 {
      font-size: 16px;
      font-weight: 500;
      line-height: 30px;
      color: #303030; }
      .dashboardWrapper .dashboardContentArea .latesAction h4 img,
      .dashboardWrapper .dashboardContentArea .apiKey h4 img,
      .dashboardWrapper .dashboardContentArea .apiDocumentations h4 img,
      .dashboardWrapper .dashboardContentArea .ftpHost h4 img,
      .dashboardWrapper .dashboardContentArea .howToVideo h4 img,
      .dashboardWrapper .dashboardContentArea .currentPlan h4 img {
        margin-right: 10px;
        display: none; }
  .dashboardWrapper .dashboardContentArea .howToVideo {
    padding: 15px 20px 25px;
    padding-top: 15px;
    padding-bottom: 25px;
    box-shadow: 2px 5px 5px rgba(22, 22, 22, 0.08); }
    .dashboardWrapper .dashboardContentArea .howToVideo h4 {
      margin-bottom: 10px;
      font-weight: 600; }
  .dashboardWrapper .dashboardContentArea .deviceEdge {
    min-height: 315px;
    padding-top: 15px;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0; }
    .dashboardWrapper .dashboardContentArea .deviceEdge h4 {
      margin-left: 15px; }
  .dashboardWrapper .dashboardContentArea .apiDocumentations {
    padding-top: 15px;
    padding-bottom: 30px; }
  .dashboardWrapper .dashboardContentArea .choochAiPlatformGuide {
    margin-bottom: 10px;
    background: #FFFFFF;
    border-radius: 6px;
    padding: 20px;
    box-shadow: 2px 5px 5px rgba(22, 22, 22, 0.08);
    transition: all 0.2s ease-in;
    overflow: hidden;
    border-radius: 6px;
    position: relative;
    padding: 0;
    background: #ffffff; }
    .dashboardWrapper .dashboardContentArea .choochAiPlatformGuide:hover {
      /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ff00f8+0,22fcdb+100 */
      background: #ff00f8;
      /* Old browsers */
      background: -moz-linear-gradient(left, #ff00f8 0%, #22fcdb 100%);
      /* FF3.6-15 */
      background: -webkit-linear-gradient(left, #ff00f8 0%, #22fcdb 100%);
      /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(to right, #ff00f8 0%, #22fcdb 100%);
      /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff00f8', endColorstr='#22fcdb',GradientType=1 );
      /* IE6-9 */ }
    .dashboardWrapper .dashboardContentArea .choochAiPlatformGuide:before {
      background: #fff;
      position: absolute;
      left: 2px;
      top: 2px;
      bottom: 0;
      right: 0;
      content: '';
      margin: 1px 2px 3px 1px;
      border-radius: 6px; }
    .dashboardWrapper .dashboardContentArea .choochAiPlatformGuide a {
      position: relative;
      padding: 20px;
      font-size: 16px;
      font-family: "Euclid Circular B";
      font-weight: 600;
      color: #303030;
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer; }
      .dashboardWrapper .dashboardContentArea .choochAiPlatformGuide a:hover, .dashboardWrapper .dashboardContentArea .choochAiPlatformGuide a:focus {
        color: #303030 !important; }
  .dashboardWrapper .dashboardContentArea .latesAction h4 a {
    float: right;
    font-size: 14px;
    color: #F7941D; }
  .dashboardWrapper .dashboardContentArea .apiKey {
    min-height: auto;
    padding-top: 15px;
    padding-bottom: 15px;
    box-shadow: 2px 5px 5px rgba(22, 22, 22, 0.08); }
    .dashboardWrapper .dashboardContentArea .apiKey h4 {
      color: #535353; }
      .dashboardWrapper .dashboardContentArea .apiKey h4 img {
        transform: scaleX(-1) rotate(-324deg);
        width: 49px; }
    .dashboardWrapper .dashboardContentArea .apiKey .keyWrapper {
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative; }
      .dashboardWrapper .dashboardContentArea .apiKey .keyWrapper input[name="apiKey"] {
        background: #FAFBFC;
        border-radius: 6px;
        border: 0;
        width: calc(100% - 175px);
        padding: 10px 20px;
        color: #303030;
        border: 1px solid #E5E5E5; }
      .dashboardWrapper .dashboardContentArea .apiKey .keyWrapper .btnCopy {
        background: transparent;
        border: 0;
        cursor: pointer;
        font-size: 14px;
        color: #595959;
        font-weight: 500;
        font-family: "Euclid Circular B";
        padding: 0; }
        .dashboardWrapper .dashboardContentArea .apiKey .keyWrapper .btnCopy img {
          margin-right: 5px; }
  .dashboardWrapper .dashboardContentArea .ftpHost .keyWrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative; }
    .dashboardWrapper .dashboardContentArea .ftpHost .keyWrapper input[name="apiKey"] {
      background: #F6F7FB;
      border-radius: 10px;
      border: 0;
      /*width: calc(100% - 50px);*/
      width: calc(100%);
      padding: 13px 20px;
      color: #58595B;
      cursor: default; }
    .dashboardWrapper .dashboardContentArea .ftpHost .keyWrapper .btnCopy {
      background: transparent;
      border: 0;
      cursor: pointer; }
  .dashboardWrapper .dashboardContentArea .deviceEdge a {
    width: 100%;
    cursor: pointer;
    margin-bottom: 10px;
    display: block; }
  .dashboardWrapper .dashboardContentArea .deviceEdge .keyWrapper {
    max-height: 168px;
    overflow: hidden;
    flex-direction: column; }
    .dashboardWrapper .dashboardContentArea .deviceEdge .keyWrapper input[name="apiKey"] {
      cursor: pointer; }
  .dashboardWrapper .dashboardContentArea .deviceEdge .mCustomScrollBox {
    width: 100%; }
  .dashboardWrapper .dashboardContentArea .deviceEdge .edgeDeviceName {
    border-bottom: solid 0px #E5E5E5;
    border-width: 0.5px;
    width: calc(100%);
    padding: 10px 15px;
    color: #58595B; }
  .dashboardWrapper .dashboardContentArea .apiDocumentations {
    padding-top: 15px;
    padding-bottom: 45px; }
    .dashboardWrapper .dashboardContentArea .apiDocumentations ul {
      list-style: none;
      margin: 0; }
      .dashboardWrapper .dashboardContentArea .apiDocumentations ul li {
        margin-bottom: 15px; }
        .dashboardWrapper .dashboardContentArea .apiDocumentations ul li:last-child {
          margin-bottom: 0; }
        .dashboardWrapper .dashboardContentArea .apiDocumentations ul li a {
          display: inline-flex;
          justify-content: flex-start;
          align-items: center;
          color: #58595B;
          transition: all 0.2s ease-in;
          font-size: 14px; }
          .dashboardWrapper .dashboardContentArea .apiDocumentations ul li a:hover, .dashboardWrapper .dashboardContentArea .apiDocumentations ul li a:active {
            color: #F7941D; }
          @media (min-width: 1500px) {
            .dashboardWrapper .dashboardContentArea .apiDocumentations ul li a {
              white-space: nowrap; } }
  .dashboardWrapper .dashboardContentArea .latesActionContentArea li {
    color: #58595B;
    padding: 0 10px; }
  .dashboardWrapper .dashboardContentArea .latesActionContentArea .latesActionContent {
    width: 100%;
    padding-top: 10px;
    overflow: hidden;
    height: 585px;
    margin: 0; }
    @media (min-width: 1400px) {
      .dashboardWrapper .dashboardContentArea .latesActionContentArea .latesActionContent {
        height: 600px; } }
    @media (min-width: 1680px) {
      .dashboardWrapper .dashboardContentArea .latesActionContentArea .latesActionContent {
        height: 610px; } }
    .dashboardWrapper .dashboardContentArea .latesActionContentArea .latesActionContent ul {
      padding: 0 5px;
      display: flex;
      flex-direction: row;
      width: 100%; }
  .dashboardWrapper .dashboardContentArea .latesActionContentArea .latesActionTopImage {
    width: 25%;
    display: flex;
    align-items: center;
    justify-content: center; }
    .dashboardWrapper .dashboardContentArea .latesActionContentArea .latesActionTopImage a {
      position: relative;
      width: 100%;
      word-break: break-word;
      text-align: center; }
    .dashboardWrapper .dashboardContentArea .latesActionContentArea .latesActionTopImage img {
      max-height: 75px; }
    .dashboardWrapper .dashboardContentArea .latesActionContentArea .latesActionTopImage .iconCheck {
      width: 25px; }
    .dashboardWrapper .dashboardContentArea .latesActionContentArea .latesActionTopImage .videoPlaybuttonImg {
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      margin: 0 auto;
      width: 100%;
      height: 100%;
      background: url(../img/play-button.svg) center center no-repeat;
      background-size: 35px; }
      @media (max-width: 480px) {
        .dashboardWrapper .dashboardContentArea .latesActionContentArea .latesActionTopImage .videoPlaybuttonImg {
          background-size: 30px; } }
  .dashboardWrapper .dashboardContentArea .latesActionContentArea .latesActionTopName {
    width: 60%;
    display: flex;
    align-items: center;
    justify-content: flex-start; }
    .dashboardWrapper .dashboardContentArea .latesActionContentArea .latesActionTopName a {
      width: 100%;
      word-break: break-word;
      color: #58595B; }
  .dashboardWrapper .dashboardContentArea .latesActionContentArea .latesActionTopDate {
    width: 15%;
    display: flex;
    align-items: center;
    justify-content: flex-start; }
  .dashboardWrapper .dashboardContentArea .latesActionContentArea .latesActionTopActions {
    width: 15%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; }
    .dashboardWrapper .dashboardContentArea .latesActionContentArea .latesActionTopActions .dropdown-item {
      width: auto;
      padding: 0;
      display: inline-block;
      margin-left: 10px; }
    .dashboardWrapper .dashboardContentArea .latesActionContentArea .latesActionTopActions .folderDropdown {
      left: auto !important;
      right: 15px; }
  .dashboardWrapper .dashboardContentArea .latesActionContentArea .latesActionTopInnerBar {
    padding: 5px 25px 5px 5px;
    background: #F6F7FB;
    border-radius: 10px;
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: row;
    margin: 0; }
    .dashboardWrapper .dashboardContentArea .latesActionContentArea .latesActionTopInnerBar li {
      font-weight: 500;
      padding: 0 10px; }
    .dashboardWrapper .dashboardContentArea .latesActionContentArea .latesActionTopInnerBar .latesActionTopName {
      text-align: center; }
  .dashboardWrapper .dashboardContentArea .latesActionContentArea .eachLatestActionContent {
    border-bottom: 1px solid #EDEDED;
    padding: 10px 0;
    font-size: 14px;
    color: #58595B;
    justify-content: center;
    align-items: center;
    display: flex;
    min-height: 75px; }
    .dashboardWrapper .dashboardContentArea .latesActionContentArea .eachLatestActionContent:last-child {
      margin-bottom: 5em; }
  .dashboardWrapper .dashboardContentArea .currentPlan {
    min-height: unset; }
    .dashboardWrapper .dashboardContentArea .currentPlan h4 {
      display: flex;
      align-items: center; }
    .dashboardWrapper .dashboardContentArea .currentPlan .cplans {
      margin: 0;
      color: #4F4F4F;
      font-weight: normal;
      display: flex;
      justify-content: space-between;
      align-items: center; }
      @media (max-width: 1366px) {
        .dashboardWrapper .dashboardContentArea .currentPlan .cplans {
          flex-direction: column; } }
    .dashboardWrapper .dashboardContentArea .currentPlan a {
      font-weight: normal; }
    .dashboardWrapper .dashboardContentArea .currentPlan .freeLink {
      color: #f7941d;
      margin-left: 5px; }
    .dashboardWrapper .dashboardContentArea .currentPlan .upgradeButton {
      font-size: 16px;
      color: #f7941d;
      padding: 5px 15px;
      display: inline-flex;
      margin-left: auto;
      background: rgba(247, 148, 29, 0.14);
      border-radius: 6px;
      transition: all 0.2s ease-in; }
      .dashboardWrapper .dashboardContentArea .currentPlan .upgradeButton:hover {
        background: rgba(247, 148, 29, 0.24); }
      @media (max-width: 1366px) {
        .dashboardWrapper .dashboardContentArea .currentPlan .upgradeButton {
          font-size: 14px;
          padding: 5px 10px; } }

.dashboardWrapper .folderOptions {
  position: static; }

.dashboardWrapper .userWrapper {
  background: #ffffff;
  border-radius: 5px;
  padding: 15px;
  margin-top: 0;
  margin-bottom: 20px; }
  .dashboardWrapper .userWrapper .userInfoCard {
    box-shadow: 0px 4px 19px rgba(176, 175, 175, 0.15);
    border-radius: 5px;
    margin-right: 5px;
    margin-bottom: 10px;
    padding: 10px 15px;
    width: 13.8%; }
    .dashboardWrapper .userWrapper .userInfoCard:first-child {
      font-size: 16px;
      color: #58595B; }
    .dashboardWrapper .userWrapper .userInfoCard:last-child {
      margin-right: 0; }
    @media (min-width: 1400px) {
      .dashboardWrapper .userWrapper .userInfoCard {
        margin-bottom: 10px;
        width: 24%; } }
    @media (min-width: 1680px) {
      .dashboardWrapper .userWrapper .userInfoCard {
        margin-bottom: 0;
        width: 13.8%; } }

@media screen and (max-width: 1279px) {
  .dashboardWrapper .ipfullWidth {
    flex-direction: column; }
    .dashboardWrapper .ipfullWidth .col-lg-8,
    .dashboardWrapper .ipfullWidth .col-lg-4 {
      width: 100%;
      max-width: 100%; } }

.tooltipClipboard {
  display: inline-block; }
  .tooltipClipboard .tooltiptext {
    white-space: nowrap;
    visibility: hidden;
    background-color: #fff;
    color: #58595B;
    text-align: center;
    border-radius: 10px;
    padding: 10px;
    position: absolute;
    z-index: 1;
    bottom: 4px;
    right: 75px;
    margin-left: -75px;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 14px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.197662); }
    @media (max-width: 480px) {
      .tooltipClipboard .tooltiptext {
        font-size: 10px; } }
    .tooltipClipboard .tooltiptext:after {
      content: "";
      position: absolute;
      top: 28%;
      right: 0;
      margin-right: -9px;
      background: url(../img/triangle-up.png) 0 0 no-repeat;
      background-size: contain;
      width: 20px;
      height: 20px;
      transform: rotate(90deg);
      /*border-width: 5px;
          border-style: solid;
          border-color: #555 transparent transparent transparent;*/ }
  .tooltipClipboard:hover .tooltiptext {
    visibility: visible;
    opacity: 1; }

.mobileLogo {
  display: none; }

.mobileTransparentDiv {
  display: none;
  width: 46px;
  height: 46px; }

.btnSubmitRaw {
  padding: 5px 20px;
  margin-left: 10px;
  height: 42px;
  float: right;
  margin-top: -5px;
  font-size: 16px; }

.btnSubmitRaw.blue-border-button:hover, .btnSubmitRaw.blue-border-button:active, .btnSubmitRaw.blue-border-button:focus {
  background: #138bfa;
  /* Old browsers */
  background: -moz-linear-gradient(top, #138bfa 0%, #138bfa 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #138bfa 0%, #138bfa 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #138bfa 0%, #138bfa 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#138bfa', endColorstr='#138bfa',GradientType=0 );
  /* IE6-9 */
  color: white !important; }

.latesActionContentArea .nothingToSeeHere {
  height: 495px; }
  @media (min-width: 1400px) {
    .latesActionContentArea .nothingToSeeHere {
      height: 510px; } }
  @media (min-width: 1680px) {
    .latesActionContentArea .nothingToSeeHere {
      height: 540px; } }

.userContentArea {
  display: flex;
  width: 100%;
  border-radius: 10px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
  height: auto;
  margin-top: 20px; }
  .userContentArea .userArea {
    width: 100%;
    background: #fff;
    border-radius: 10px;
    padding: 30px 25px 70px 25px;
    position: relative; }
    @media (max-width: 967px) {
      .userContentArea .userArea {
        padding: 1px; } }
  .userContentArea .userAreaTopBar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 44px; }
    @media (max-width: 967px) {
      .userContentArea .userAreaTopBar {
        height: auto; } }
  .userContentArea .userAreaCount h4 {
    font-size: 16px;
    margin: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center; }
    .userContentArea .userAreaCount h4 b {
      color: #58595B;
      font-weight: 500; }
    @media (min-width: 1600px) {
      .userContentArea .userAreaCount h4 {
        font-size: 18px; } }
  @media (max-width: 967px) {
    .userContentArea .userAreaCount {
      display: none; } }

.deviceEdge {
  position: relative; }
  .deviceEdge .customDropdown {
    position: absolute;
    top: 10px;
    right: 5px;
    color: #0367A6; }
    .deviceEdge .customDropdown a {
      margin: 0 !important; }
    .deviceEdge .customDropdown .dropdownBtn {
      background: #ffffff url(../img/chevron-down-light-blue.svg) 95% center no-repeat;
      height: 36px;
      padding-left: 10px;
      padding-right: 30px;
      cursor: pointer;
      border: 0;
      font-size: 14px;
      color: #0367A6; }
    .deviceEdge .customDropdown li:hover a,
    .deviceEdge .customDropdown li:hover a:focus {
      background: rgba(19, 139, 250, 0.19);
      color: #138BFA !important; }

@media screen and (min-width: 967px) {
  .modelBoxWapper .col-lg-6:first-child {
    padding-right: 10px; }
  .modelBoxWapper .col-lg-6:last-child {
    padding-left: 10px; } }

.modelBox {
  background: #ffffff;
  box-shadow: 0px 2px 4px rgba(10, 46, 96, 0.1);
  border-radius: 6px;
  padding: 15px 20px;
  margin-bottom: 20px;
  color: #595959; }
  .modelBox.publicModel .icon {
    background: rgba(247, 148, 29, 0.14); }
  .modelBox.datasets .icon {
    background: rgba(19, 139, 250, 0.15); }
  .modelBox.analytics .icon {
    background: rgba(79, 151, 163, 0.14); }
  .modelBox .content {
    height: 55px; }
  .modelBox .icon {
    width: 35px;
    height: 35px;
    border-radius: 6px;
    display: inline-flex;
    justify-content: center;
    align-items: center; }

@media screen and (min-width: 967px) {
  .modelBoxWapper .col-lg-6:first-child {
    padding-right: 10px; }
  .modelBoxWapper .col-lg-6:last-child {
    padding-left: 10px; } }

.latesUpdate {
  background: #ffffff;
  box-shadow: 2px 5px 5px rgba(22, 22, 22, 0.08);
  border-radius: 6px;
  padding: 10px 0 5px 0;
  color: #595959;
  font-family: "Euclid Circular B";
  margin-bottom: 13px; }
  .latesUpdate .view-all {
    float: right;
    color: #8020CF !important;
    font-size: 14px;
    font-family: "Euclid Circular B";
    line-height: 30px;
    font-weight: 500;
    text-decoration: underline !important; }
    .latesUpdate .view-all:hover {
      color: #8020CF; }
  .latesUpdate h4 {
    font-size: 16px;
    font-weight: 600;
    line-height: 29px;
    color: #303030;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
    border-bottom: solid 1px #e5e5e5; }
  .latesUpdate .mCustomScrollbar {
    height: 230px;
    margin: 0;
    overflow: hidden; }
  .latesUpdate ul li {
    border-bottom: solid 0px #E5E5E5;
    border-width: 0.5px;
    font-size: 14px;
    font-weight: 400;
    color: #535353; }
    .latesUpdate ul li .icon {
      margin-right: 15px;
      position: absolute;
      display: none;
      left: 0; }
    .latesUpdate ul li a {
      color: #535353;
      position: relative;
      padding: 15px 0 15px 20px;
      display: flex;
      align-items: center;
      transition: all 0.2s ease-in;
      pointer-events: none; }
      .latesUpdate ul li a:focus {
        color: #535353; }
  .latesUpdate .nothingToSeeHere {
    height: 444px; }
    @media (max-width: 967px) {
      .latesUpdate .nothingToSeeHere {
        height: auto; } }
    .latesUpdate .nothingToSeeHere h5 {
      font-size: 18px; }
    .latesUpdate .nothingToSeeHere p {
      font-size: 16px; }

.datasetBox {
  background: #ffffff;
  box-shadow: 0px 4px 19px rgba(176, 175, 175, 0.15);
  border-radius: 5px;
  padding: 24px 20px;
  color: #595959;
  margin-bottom: 20px; }
  .datasetBox dl {
    margin-bottom: 30px;
    overflow: hidden; }
    .datasetBox dl:last-child {
      margin-bottom: 0; }
    .datasetBox dl dt {
      float: left;
      width: 46px;
      height: 42px;
      border-radius: 3px;
      overflow: hidden;
      text-align: center;
      line-height: 42px;
      display: inline-flex;
      justify-content: center;
      align-items: center; }
    .datasetBox dl.objectDataset dt {
      background: rgba(19, 139, 250, 0.12); }
    .datasetBox dl.imageDataset dt {
      background: rgba(73, 192, 43, 0.13); }
    .datasetBox dl.faceDataset dt {
      background: rgba(247, 148, 29, 0.13); }
    .datasetBox dl dd {
      margin-bottom: 0;
      margin-left: 65px; }
      .datasetBox dl dd h5 {
        margin-bottom: 5px;
        font-size: 14px; }
      .datasetBox dl dd span {
        color: #9B9B9B;
        font-size: 14px; }

.analytics {
  background: #ffffff;
  box-shadow: 0px 4px 19px rgba(176, 175, 175, 0.15);
  border-radius: 5px;
  padding: 15px 20px;
  color: #595959;
  margin-bottom: 20px; }
  .analytics h4 {
    font-size: 18px;
    line-height: 30px;
    color: #58595B;
    margin-bottom: 0; }
  .analytics p.text-center {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 10px; }
  .analytics .graph {
    height: 165px; }
  .analytics .nodataPlaceholder {
    margin-bottom: 14px;
    margin-top: 20px; }
    .analytics .nodataPlaceholder .bubble {
      font-size: 16px;
      max-width: 300px;
      height: 160px;
      background-size: contain; }
      .analytics .nodataPlaceholder .bubble .icon {
        width: 45px;
        height: 45px;
        background-size: contain; }
      .analytics .nodataPlaceholder .bubble p {
        margin-top: 10px; }

.currentPlan h4 {
  margin-bottom: 0 !important; }

.col-lg-6.latesUpdateCol {
  padding-right: 5px; }
  @media (max-width: 1200px) {
    .col-lg-6.latesUpdateCol {
      padding-right: 15px; } }

.welcomePlatform {
  margin-bottom: 30px; }
  .welcomePlatform h1 {
    font-family: "Euclid Circular B";
    color: #303030;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 15px;
    margin-top: 15px; }
  .welcomePlatform .boxWrapper {
    display: flex;
    justify-content: space-between;
    margin-left: -5px;
    margin-right: -5px; }
  .welcomePlatform .modelBox {
    display: inline-flex;
    width: 19%;
    flex-wrap: wrap;
    margin: 0 5px;
    border: solid 1px transparent;
    position: relative;
    counter-reset: section;
    font-family: "Euclid Circular B"; }
    .welcomePlatform .modelBox label {
      position: absolute;
      top: -28px;
      right: -1px;
      font-size: 14px;
      font-weight: 600;
      color: #ffffff;
      margin: 0;
      display: inline-block;
      padding: 3px 10px;
      background: #0367A6;
      border-radius: 6px 6px 0px 0px; }
    .welcomePlatform .modelBox h5 {
      color: #303030;
      font-size: 14px;
      margin-bottom: 10px;
      padding-left: 20px;
      position: relative;
      font-weight: 600; }
      .welcomePlatform .modelBox h5 i {
        font-style: normal;
        position: absolute;
        left: 0; }
    .welcomePlatform .modelBox .content {
      min-height: 130px;
      height: auto;
      font-size: 13px;
      color: #535353;
      font-weight: 400;
      font-family: "Euclid Circular B"; }
    .welcomePlatform .modelBox .btns {
      width: 100%;
      height: 36px;
      font-size: 14px;
      font-weight: 600;
      border-radius: 20px;
      white-space: nowrap;
      max-width: 230px;
      margin: 0 auto; }
    .welcomePlatform .modelBox.new {
      border-color: #0367A6;
      border-radius: 5px 0 5px 5px; }
    .welcomePlatform .modelBox:first-child {
      background: url(../img/create-dataset-card-background.svg), linear-gradient(90.01deg, #8020CF -0.45%, #472CE6 99.99%); }
      .welcomePlatform .modelBox:first-child .content {
        color: #EBEFF2;
        font-weight: 500 !important; }
      .welcomePlatform .modelBox:first-child h5 {
        color: #FFFFFF; }
      .welcomePlatform .modelBox:first-child a {
        max-width: 140px;
        color: #303030;
        margin: 0 auto;
        border-radius: 20px;
        background: linear-gradient(267.94deg, #48FDE1 -23.98%, #60EFFF 96.66%); }

.getStartHomeModal {
  padding: 0 !important; }
  .getStartHomeModal .modal-dialog {
    max-width: 580px;
    align-items: center; }
  .getStartHomeModal .modal-content {
    background-color: #ffffff !important;
    flex-direction: column !important;
    padding-bottom: 0;
    border-radius: 10px;
    margin-top: 0; }
  .getStartHomeModal .modal-header {
    width: 100%;
    border: none; }
  .getStartHomeModal .modal-title {
    text-align: center;
    width: 100%;
    font-size: 18px;
    color: #595959; }
  .getStartHomeModal .modal-body,
  .getStartHomeModal .modal-footer {
    width: 100%;
    border: none; }
  .getStartHomeModal .modal-footer {
    padding: 0 30px 20px 30px; }
  .getStartHomeModal .modal-body {
    padding-top: 40px;
    padding-left: 50px;
    padding-right: 50px; }
    .getStartHomeModal .modal-body p {
      color: #595959;
      font-size: 16px; }
  .getStartHomeModal .getStartBtn {
    min-width: 90px;
    padding: 0 15px;
    height: 40px;
    border-radius: 5px;
    font-size: 14px; }
  .getStartHomeModal .laterBtn {
    min-width: 60px;
    padding: 0 15px;
    height: 40px;
    border-radius: 5px;
    font-size: 14px;
    background: #ffffff;
    color: #8020CF;
    border: solid 1px #8020CF;
    margin-right: 10px !important; }

.interfaceEngineModal {
  padding: 0 !important; }
  .interfaceEngineModal .modal-dialog {
    max-width: 624px;
    align-items: center; }
  .interfaceEngineModal .modal-content {
    background-color: #ffffff !important;
    flex-direction: column !important;
    padding-bottom: 0;
    border-radius: 10px;
    margin-top: 0; }
  .interfaceEngineModal .modal-header {
    padding: 20px 30px;
    width: 100%;
    border: none;
    display: flex;
    align-items: center; }
    .interfaceEngineModal .modal-header .closeModal_ {
      background: transparent;
      position: static;
      cursor: pointer;
      border: 0;
      padding: 0;
      z-index: 99;
      width: 15px;
      height: 15px;
      opacity: 0.7; }
  .interfaceEngineModal .modal-title {
    text-align: center;
    width: 100%;
    font-size: 16px;
    color: #210835;
    font-weight: 600; }
  .interfaceEngineModal .modal-body {
    width: 100%;
    border: none;
    padding: 30px; }
  .interfaceEngineModal .overflowContainer {
    height: 500px;
    overflow: hidden; }
    .interfaceEngineModal .overflowContainer ul li {
      font-size: 14px;
      margin-bottom: 50px; }
      .interfaceEngineModal .overflowContainer ul li .title {
        color: #535353;
        font-weight: 500;
        margin-bottom: 5px; }
      .interfaceEngineModal .overflowContainer ul li .date {
        color: #595959;
        font-weight: 400;
        margin-bottom: 5px; }
      .interfaceEngineModal .overflowContainer ul li .versionHistory {
        color: #8020CF;
        font-weight: 600; }
        .interfaceEngineModal .overflowContainer ul li .versionHistory .icon {
          margin-left: 10px; }
        .interfaceEngineModal .overflowContainer ul li .versionHistory .version {
          display: none; }

.latestUpdatesModal {
  padding: 0 !important; }
  .latestUpdatesModal .modal-dialog {
    max-width: 624px;
    align-items: center; }
  .latestUpdatesModal .modal-content {
    background-color: #ffffff !important;
    flex-direction: column !important;
    padding-bottom: 0;
    border-radius: 10px;
    margin-top: 0; }
  .latestUpdatesModal .modal-header {
    padding: 20px 30px;
    width: 100%;
    border: none;
    display: flex;
    align-items: center; }
    .latestUpdatesModal .modal-header .closeModal_ {
      background: transparent;
      position: static;
      cursor: pointer;
      border: 0;
      padding: 0;
      z-index: 99;
      width: 15px;
      height: 15px;
      opacity: 0.7; }
  .latestUpdatesModal .modal-title {
    text-align: center;
    width: 100%;
    font-size: 16px;
    color: #210835;
    font-weight: 600; }
  .latestUpdatesModal .modal-body {
    width: 100%;
    border: none;
    padding: 30px; }
  .latestUpdatesModal .overflowContainer {
    height: 500px;
    overflow: hidden; }
    .latestUpdatesModal .overflowContainer ul li {
      padding: 15px 0;
      font-size: 14px; }

.ciVersionHistoryModal {
  padding: 0 !important; }
  .ciVersionHistoryModal .modal-dialog {
    max-width: 624px;
    align-items: center; }
  .ciVersionHistoryModal .modal-content {
    background-color: #ffffff !important;
    flex-direction: column !important;
    padding-bottom: 0;
    border-radius: 10px;
    margin-top: 0; }
  .ciVersionHistoryModal .modal-header {
    padding: 20px 30px;
    width: 100%;
    border: none;
    display: flex;
    align-items: center; }
    .ciVersionHistoryModal .modal-header .backBtn_ {
      padding: 0;
      border: none;
      background: transparent;
      display: inline-flex;
      margin-right: 10px;
      opacity: 0.7;
      height: 14px; }
    .ciVersionHistoryModal .modal-header .closeModal_ {
      background: transparent;
      position: static;
      cursor: pointer;
      border: 0;
      padding: 0;
      z-index: 99;
      width: 15px;
      height: 15px;
      opacity: 0.7; }
  .ciVersionHistoryModal .modal-title {
    text-align: center;
    width: 100%;
    font-size: 16px;
    color: #210835;
    font-weight: 600; }
  .ciVersionHistoryModal .modal-body {
    width: 100%;
    border: none;
    padding: 30px; }
  .ciVersionHistoryModal .overflowContainer {
    height: 500px;
    overflow: hidden; }
  .ciVersionHistoryModal .history h6 {
    font-size: 16px;
    font-weight: 500;
    color: #4E4576;
    margin-bottom: 20px; }
  .ciVersionHistoryModal .history .versionTitle {
    font-size: 14px;
    font-weight: 600;
    color: #535353;
    margin-bottom: 10px;
    display: flex; }
    .ciVersionHistoryModal .history .versionTitle .date {
      margin-left: auto;
      font-size: 14px;
      font-weight: 400;
      color: #4E4576; }
  .ciVersionHistoryModal .history ul {
    margin-bottom: 30px; }
    .ciVersionHistoryModal .history ul li {
      list-style: disc inside;
      font-size: 14px;
      font-weight: 400;
      color: #535353; }
  .ciVersionHistoryModal .vFive,
  .ciVersionHistoryModal .vFour,
  .ciVersionHistoryModal .vThree,
  .ciVersionHistoryModal .vTwo {
    display: none; }

@media screen and (min-width: 968px) and (max-width: 1500px) {
  .welcomePlatform .modelBox .content {
    min-height: 150px; }
  .modelBox {
    display: inline-flex;
    width: 19%;
    flex-wrap: wrap;
    margin: 0 5px;
    border: solid 1px transparent;
    position: relative; }
    .modelBox label {
      position: absolute;
      top: -28px;
      right: -1px;
      font-size: 14px;
      font-weight: 600;
      color: #ffffff;
      margin: 0;
      display: inline-block;
      padding: 3px 10px;
      background: #0367A6;
      border-radius: 6px 6px 0px 0px; }
    .modelBox h5 {
      color: #0A2E60;
      font-size: 14px;
      margin-bottom: 10px;
      font-weight: 600; }
    .modelBox .content {
      min-height: 150px;
      font-size: 13px;
      color: #595959;
      font-weight: 500; }
    .modelBox .btns {
      width: 100%;
      height: 36px;
      font-size: 14px;
      font-weight: 600; }
    .modelBox .darkOrangeBtn {
      color: #ffffff; }
    .modelBox .lightOrangeBtn {
      color: #DB5315; }
    .modelBox.new {
      border-color: #0367A6;
      border-radius: 5px 0 5px 5px; } }

@media screen and (max-width: 1300px) {
  .welcomePlatform .modelBox {
    padding: 15px 15px; }
    .welcomePlatform .modelBox:first-child a {
      font-size: 13px;
      max-width: 100%; }
    .welcomePlatform .modelBox h5 {
      min-height: 34px; }
  .welcomePlatform .btns {
    font-size: 13px; } }

.choochPlatform {
  padding: 20px 10px 10px 10px;
  background-color: #ffffff;
  border-radius: 6px;
  margin-bottom: 10px;
  background: #ffffff;
  display: flex;
  justify-content: space-between;
  height: 404px;
  background-image: url(../img/purple-lines.svg);
  background-position: center center;
  background-size: cover; }
  .choochPlatform .wrapper-card {
    width: calc(calc(100% - 80px) / 3);
    height: 378px;
    border-radius: 6px;
    border: 1px solid #EAEAEA;
    background: rgba(242, 233, 250, 0.3);
    padding: 15px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; }
    .choochPlatform .wrapper-card h5 {
      color: #4E4576;
      font-size: 16px;
      font-weight: 600;
      line-height: 20px; }
    .choochPlatform .wrapper-card .item-card {
      width: 100%;
      height: 80px;
      border-radius: 6px;
      background: #FFF;
      box-shadow: 2px 5px 5px 0px rgba(22, 22, 22, 0.08);
      margin-top: 15px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 17px; }
      .choochPlatform .wrapper-card .item-card img {
        margin-left: 25px; }
  .choochPlatform h1 {
    color: #303030;
    font-size: 18px;
    font-family: "Euclid Circular B";
    font-weight: 500;
    margin-bottom: 10px; }
  .choochPlatform h2 {
    color: #535353;
    font-size: 16px;
    font-family: "Euclid Circular B";
    font-weight: 500;
    margin-bottom: 10px;
    position: relative;
    display: flex; }
  .choochPlatform .lock {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url(../img/lock.svg) center center no-repeat;
    background-size: 12px;
    filter: drop-shadow(0px 2px 5px rgba(40, 40, 40, 0.1));
    border-radius: 5px;
    z-index: 2; }
    .choochPlatform .lock .customTooltip {
      box-shadow: 0px 4px 21px rgba(120, 114, 114, 0.25);
      border-radius: 5px;
      padding: 15px;
      width: 190px;
      border: none;
      line-height: 20px;
      left: 0;
      top: 27px;
      white-space: normal;
      text-align: left;
      pointer-events: auto;
      cursor: default;
      font-size: 14px;
      color: #595959; }
      .choochPlatform .lock .customTooltip a {
        color: #0367A6;
        text-decoration: underline; }
        .choochPlatform .lock .customTooltip a:hover, .choochPlatform .lock .customTooltip a:focus {
          color: #0367A6;
          text-decoration: underline !important; }
      .choochPlatform .lock .customTooltip p {
        margin: 0; }
      .choochPlatform .lock .customTooltip h5 {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 10px;
        color: #8020CF; }
    .choochPlatform .lock:hover .customTooltip {
      visibility: visible;
      opacity: 1; }
  .choochPlatform .cards {
    position: relative; }
    .choochPlatform .cards .customTooltip {
      box-shadow: 0px 4px 21px rgba(120, 114, 114, 0.25);
      border-radius: 5px;
      padding: 15px;
      width: 200px;
      border: none;
      left: 20%;
      top: 45px;
      white-space: normal;
      text-align: left;
      pointer-events: auto;
      cursor: default;
      font-size: 14px;
      color: #595959;
      font-weight: 400; }
      .choochPlatform .cards .customTooltip p {
        margin: 0; }
    .choochPlatform .cards:hover .customTooltip {
      visibility: visible;
      opacity: 1; }
  .choochPlatform .datasetsWrapper {
    padding: 15px 10px;
    border-width: 3px 1px 1px 1px;
    border-style: solid;
    border-color: #F6F6F7;
    border-radius: 6px;
    margin-bottom: 10px; }
    .choochPlatform .datasetsWrapper h2 {
      font-weight: 500;
      color: #535353; }
    .choochPlatform .datasetsWrapper .icon {
      background-color: #FF00F8; }
    .choochPlatform .datasetsWrapper .cardWrapper {
      justify-content: flex-start;
      align-content: center;
      flex-wrap: wrap; }
      .choochPlatform .datasetsWrapper .cardWrapper h2 {
        font-weight: 500;
        color: #535353; }
      .choochPlatform .datasetsWrapper .cardWrapper .cards {
        width: calc(94% / 5);
        margin-bottom: 15px; }
        @media (max-width: 1500px) {
          .choochPlatform .datasetsWrapper .cardWrapper .cards {
            width: 22%;
            margin-bottom: 10px; } }
        .choochPlatform .datasetsWrapper .cardWrapper .cards span {
          font-family: "Euclid Circular B";
          font-weight: 400;
          color: #535353; }
  .choochPlatform .modelsWrapper {
    padding: 15px 10px;
    border-width: 3px 1px 1px 1px;
    border-style: solid;
    border-color: #F6F6F7;
    border-radius: 6px;
    margin-bottom: 10px; }
    .choochPlatform .modelsWrapper h2 {
      font-weight: 500;
      color: #535353; }
    .choochPlatform .modelsWrapper .icon {
      background-color: #22FCDB; }
    .choochPlatform .modelsWrapper .cardWrapper .cards {
      width: calc(96% / 5);
      position: relative; }
      @media (max-width: 1500px) {
        .choochPlatform .modelsWrapper .cardWrapper .cards {
          width: calc(100% / 5); } }
      .choochPlatform .modelsWrapper .cardWrapper .cards span {
        font-family: "Euclid Circular B";
        font-weight: 400;
        color: #535353; }
      .choochPlatform .modelsWrapper .cardWrapper .cards .new-card {
        color: #C424FA;
        font-weight: 700;
        position: absolute;
        right: 0;
        top: -22px; }
  .choochPlatform .trainingsWrapper {
    padding: 15px 10px;
    border-width: 3px 1px 1px 1px;
    border-style: solid;
    border-color: rgba(32, 181, 38, 0.3);
    border-radius: 6px; }
    .choochPlatform .trainingsWrapper .cardWrapper .cards {
      width: 31.8%; }
      @media (max-width: 1500px) {
        .choochPlatform .trainingsWrapper .cardWrapper .cards {
          width: 47%; }
          .choochPlatform .trainingsWrapper .cardWrapper .cards:last-child {
            width: 100%; } }
  .choochPlatform .othersWrapper {
    padding: 15px 10px;
    border-width: 3px 1px 1px 1px;
    border-style: solid;
    border-color: #F6F6F7;
    border-radius: 6px; }
    .choochPlatform .othersWrapper .lock {
      margin-left: 10px; }
    .choochPlatform .othersWrapper.enterprise .icon {
      background-color: #3FECFF; }
    .choochPlatform .othersWrapper.nonEnterprise .icon {
      background-color: #F7F7F7; }
    .choochPlatform .othersWrapper .cardWrapper {
      justify-content: flex-start;
      align-content: center;
      flex-wrap: wrap; }
      .choochPlatform .othersWrapper .cardWrapper .cards {
        width: calc(94% / 5);
        margin-bottom: 15px; }
        @media (max-width: 1500px) {
          .choochPlatform .othersWrapper .cardWrapper .cards {
            width: 22%;
            margin-bottom: 10px; } }
        .choochPlatform .othersWrapper .cardWrapper .cards span {
          font-family: "Euclid Circular B";
          font-weight: 400;
          color: #535353; }
    .choochPlatform .othersWrapper.nonEnterprise .cards {
      pointer-events: none; }
  .choochPlatform .cardWrapper {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap; }
    .choochPlatform .cardWrapper .cards {
      display: inline-flex;
      justify-content: flex-start;
      align-items: center;
      flex-direction: row;
      box-shadow: 0px 2px 5px rgba(40, 40, 40, 0.1);
      border-radius: 6px;
      background-color: #ffffff;
      margin: 0 4px;
      padding: 0 10px;
      font-size: 14px;
      font-weight: 400;
      position: relative;
      width: calc(96% / 5);
      min-height: 62px;
      cursor: pointer; }
      @media (max-width: 1500px) {
        .choochPlatform .cardWrapper .cards {
          width: 22%;
          margin-bottom: 10px; } }
      .choochPlatform .cardWrapper .cards .icon {
        width: 32px;
        height: 32px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        margin-right: 8px;
        border-radius: 5px; }
      .choochPlatform .cardWrapper .cards .title {
        display: inline-flex;
        color: #595959;
        font-size: 14px;
        word-break: break-word;
        white-space: no-wrap; }

@media screen and (min-width: 968px) and (max-width: 1500px) {
  .dashboardWrapper .dashboardContentArea .apiDocumentations {
    min-height: 275px; } }

@media (max-width: 1200px) {
  .dashboardWrapper .dashboardContentArea .apiDocumentations ul li {
    margin-bottom: 11px; }
  .deviceEdge .customDropdown {
    position: relative;
    margin-top: -20px;
    margin-bottom: 15px;
    top: 0;
    right: auto;
    left: 0; }
    .deviceEdge .customDropdown .dropdownBtn {
      padding-left: 0; } }

@media (max-width: 967px) {
  .dashboardWrapper .dashboardContentArea .latesActionContentArea .latesActionContent ul {
    padding-left: 0; }
  .dashboardWrapper .dashboardContentArea .latesActionContentArea .latesActionTopImage {
    padding-left: 0; }
  .dashboardWrapper .dashboardContentArea .latesActionContentArea .latesActionTopInnerBar,
  .dashboardWrapper .dashboardContentArea .latesActionContentArea .latesActionTopDate {
    display: none; }
  .dashboardWrapper .dashboardContentArea .latesActionContentArea .latesActionTopName {
    width: 55%; }
  .dashboardWrapper .dashboardContentArea .latesActionContentArea .latesActionTopActions {
    width: 100px; }
    .dashboardWrapper .dashboardContentArea .latesActionContentArea .latesActionTopActions .folderDropdown {
      right: -2px; }
  .dashboardWrapper .dashboardContentArea .ftpHost {
    margin-bottom: 20px; }
  .dashboardWrapper .dashboardContentArea .dashboardCopyright {
    margin-top: 20px; }
  .howToVideo .vidoeContent {
    justify-content: flex-start; }
  .topBarProfileMenu {
    min-width: 200px;
    left: auto;
    right: 0; }
    .topBarProfileMenu:before {
      right: 8px;
      left: auto; }
  .mobileMenuButton {
    display: flex;
    justify-content: center;
    align-items: center;
    transform: rotate(-45deg);
    z-index: 992;
    left: 15px;
    cursor: pointer;
    transition: all 0.2s ease-in; }
  .mobileMenuButton.active {
    transform: rotate(90deg); } }
  @media only screen and (max-width: 967px) and (min-device-width: 370px) and (max-device-width: 900px) and (orientation: landscape) {
    .mobileMenuButton.active {
      transform: rotate(90deg) translateY(-90px); } }

@media (max-width: 967px) {
  .navigationSide {
    position: fixed;
    bottom: 100px;
    z-index: 992;
    display: none; } }
  @media only screen and (max-width: 967px) and (min-device-width: 370px) and (max-device-width: 900px) and (orientation: landscape) {
    .navigationSide {
      bottom: 3px;
      z-index: 99999; } }

@media (max-width: 967px) {
  .mobileTransparentDiv {
    display: none; }
  .topBarProfile p {
    font-weight: 500;
    font-size: 14px; }
  .globalNotification {
    right: auto !important; }
    .globalNotification .notificationDropdown {
      right: -207px !important; }
      .globalNotification .notificationDropdown .iconArrow {
        justify-content: flex-start !important;
        margin-left: 8px !important; }
  .howToVideo .vidoeContent {
    width: 100%;
    flex-wrap: wrap; }
    .howToVideo .vidoeContent .sampleVideo,
    .howToVideo .vidoeContent .howChoochWorks {
      width: 100%;
      margin: 0; }
    .howToVideo .vidoeContent .sampleVideo > img {
      width: 100%; }
    .howToVideo .vidoeContent .howChoochWorks {
      padding-top: 10px; }
  .dashboardCopyright {
    padding: 0 18%; }
  .dashboardWrapper .dashboardContentArea .latesActionContentArea .latesActionTopImage {
    width: 23%; } }

@media (max-width: 480px) {
  .dashboardWrapper .dashboardContentArea .latesActionContentArea .latesActionTopName {
    width: 52%; }
  .dashboardWrapper .dashboardContentArea .latesActionContentArea .latesActionTopActions {
    width: 72px; }
    .dashboardWrapper .dashboardContentArea .latesActionContentArea .latesActionTopActions .folderOptions .arrow {
      right: 22px;
      left: auto; }
    .dashboardWrapper .dashboardContentArea .latesActionContentArea .latesActionTopActions .folderDropdown {
      right: -40px; }
  .btnSubmitRaw {
    width: auto; } }

@media screen and (max-width: 400px) {
  .dashboardWrapper .dashboardContentArea .latesActionContentArea .latesActionTopActions {
    width: 72px; }
    .dashboardWrapper .dashboardContentArea .latesActionContentArea .latesActionTopActions .folderOptions .arrow {
      right: 20px;
      left: auto; }
    .dashboardWrapper .dashboardContentArea .latesActionContentArea .latesActionTopActions .folderDropdown {
      right: -48px; } }

ul {
  padding: 0;
  margin: 0 0 0 0; }

.searchResultWrapper {
  padding-top: 20px; }
  .searchResultWrapper .modal-header {
    padding-top: 5px;
    padding-bottom: 5px; }
  .searchResultWrapper .videoThumbWrapper .videoPlaybuttonImg {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    background: url(../img/play-button.svg) center center no-repeat;
    background-size: 48px;
    z-index: 9; }
  .searchResultWrapper .searchResultContentArea {
    position: relative;
    display: flex;
    width: 100%;
    float: left;
    border-radius: 10px;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
    height: auto;
    background-color: #ffffff;
    flex-wrap: wrap;
    padding: 30px; }
    .searchResultWrapper .searchResultContentArea .fileAreaButtons {
      margin-top: -20px; }
    .searchResultWrapper .searchResultContentArea .searchResultTopBar {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 44px; }
    .searchResultWrapper .searchResultContentArea .galleryArea {
      min-height: 496px;
      height: auto;
      overflow: hidden;
      padding-bottom: 50px; }
    .searchResultWrapper .searchResultContentArea .searchResultFileCount h4 {
      font-size: 18px; }
      .searchResultWrapper .searchResultContentArea .searchResultFileCount h4 b {
        color: #58595B; }
    .searchResultWrapper .searchResultContentArea .searchResultFileCount span {
      color: #9B9B9B;
      margin-left: 8px; }
    .searchResultWrapper .searchResultContentArea .searchResultButtons {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center; }
      .searchResultWrapper .searchResultContentArea .searchResultButtons img {
        margin-left: 25px; }
      .searchResultWrapper .searchResultContentArea .searchResultButtons .sortByList.active,
      .searchResultWrapper .searchResultContentArea .searchResultButtons .sortByGrid.active {
        pointer-events: none; }
    .searchResultWrapper .searchResultContentArea .galleryArea,
    .searchResultWrapper .searchResultContentArea .eachGalleryItem {
      margin: 0px !important; }
    .searchResultWrapper .searchResultContentArea .sortByList li {
      list-style-type: none;
      font-size: 14px;
      color: #58595B; }
    .searchResultWrapper .searchResultContentArea .sortByList .videoPlaybuttonImg {
      background-size: 35px; }
    .searchResultWrapper .searchResultContentArea .sortByList .galleryAreaTopInnerBar {
      padding: 10px 5px;
      background: #F6F7FB;
      border-radius: 10px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-direction: row;
      margin: 0; }
      .searchResultWrapper .searchResultContentArea .sortByList .galleryAreaTopInnerBar li {
        font-weight: 500; }
    .searchResultWrapper .searchResultContentArea .sortByList .galleryAreaTopCheckbox {
      width: 3%;
      display: flex;
      align-items: center;
      justify-content: center;
      /* Style the artificial checkbox */
      /* Style its checked state...with a ticked icon */ }
      .searchResultWrapper .searchResultContentArea .sortByList .galleryAreaTopCheckbox label input {
        display: none;
        /* Hide the default checkbox */ }
      .searchResultWrapper .searchResultContentArea .sortByList .galleryAreaTopCheckbox label span {
        height: 20px;
        width: 20px;
        display: inline-block;
        position: relative;
        border-radius: 3px;
        cursor: pointer;
        background: #fff url(../img/checkbox-default.svg) 0 0 no-repeat;
        background-size: cover; }
      .searchResultWrapper .searchResultContentArea .sortByList .galleryAreaTopCheckbox label {
        margin: 0; }
      .searchResultWrapper .searchResultContentArea .sortByList .galleryAreaTopCheckbox [type=checkbox]:checked + span {
        background: #fff url(../img/checkbox-active.svg) 0 0 no-repeat;
        background-size: cover; }
    .searchResultWrapper .searchResultContentArea .sortByList .galleryAreaTopImage {
      width: 17%;
      padding: 0 10px;
      display: flex;
      align-items: center;
      justify-content: center; }
      @media (min-width: 1680px) {
        .searchResultWrapper .searchResultContentArea .sortByList .galleryAreaTopImage {
          width: 9%; } }
    .searchResultWrapper .searchResultContentArea .sortByList .galleryAreaTopName {
      width: 47%;
      display: flex;
      align-items: center;
      justify-content: flex-start; }
      @media (min-width: 1680px) {
        .searchResultWrapper .searchResultContentArea .sortByList .galleryAreaTopName {
          width: 40%; } }
    .searchResultWrapper .searchResultContentArea .sortByList .galleryAreaTopFolder {
      width: 10%;
      display: flex;
      align-items: center;
      justify-content: center; }
    .searchResultWrapper .searchResultContentArea .sortByList .galleryAreaTopDate {
      width: 15%;
      display: flex;
      align-items: center;
      justify-content: center; }
    .searchResultWrapper .searchResultContentArea .sortByList .galleryAreaTopActions {
      width: 10%;
      display: flex;
      align-items: center;
      justify-content: center; }
    .searchResultWrapper .searchResultContentArea .sortByList .galleryAreaContent {
      float: left;
      width: 100%;
      padding: 0; }
      .searchResultWrapper .searchResultContentArea .sortByList .galleryAreaContent ul {
        display: flex;
        flex-direction: row;
        width: 100%;
        justify-content: space-between;
        height: 70px; }
      .searchResultWrapper .searchResultContentArea .sortByList .galleryAreaContent .tagsUl {
        flex-wrap: wrap; }
    .searchResultWrapper .searchResultContentArea .sortByList .eachgalleryAreaContent {
      border-bottom: 1px solid #EDEDED;
      padding: 10px 5px;
      font-size: 14px;
      color: #58595B; }
      .searchResultWrapper .searchResultContentArea .sortByList .eachgalleryAreaContent:last-of-type {
        border: none; }
    .searchResultWrapper .searchResultContentArea .sortByList .galleryAreaCheckbox {
      width: 3%;
      display: flex;
      align-items: center;
      justify-content: center;
      /* Style the artificial checkbox */
      /* Style its checked state...with a ticked icon */ }
      .searchResultWrapper .searchResultContentArea .sortByList .galleryAreaCheckbox label input {
        display: none;
        /* Hide the default checkbox */ }
      .searchResultWrapper .searchResultContentArea .sortByList .galleryAreaCheckbox label span {
        height: 20px;
        width: 20px;
        display: inline-block;
        position: relative;
        border-radius: 3px;
        cursor: pointer;
        background: #fff url(../img/checkbox-default.svg) 0 0 no-repeat;
        background-size: cover; }
      .searchResultWrapper .searchResultContentArea .sortByList .galleryAreaCheckbox label {
        margin: 0; }
      .searchResultWrapper .searchResultContentArea .sortByList .galleryAreaCheckbox [type=checkbox]:checked + span {
        background: #fff url(../img/checkbox-active.svg) 0 0 no-repeat;
        background-size: cover; }
    .searchResultWrapper .searchResultContentArea .sortByList .galleryAreaImage {
      width: 17%;
      padding: 0 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      overflow: hidden;
      position: relative; }
      @media (min-width: 1680px) {
        .searchResultWrapper .searchResultContentArea .sortByList .galleryAreaImage {
          width: 9%; } }
      .searchResultWrapper .searchResultContentArea .sortByList .galleryAreaImage .galleryThumbnailWrapper {
        display: flex; }
      .searchResultWrapper .searchResultContentArea .sortByList .galleryAreaImage img {
        max-width: 100px;
        max-height: 66px; }
    .searchResultWrapper .searchResultContentArea .sortByList .galleryAreaImage.folder {
      padding: 0; }
      .searchResultWrapper .searchResultContentArea .sortByList .galleryAreaImage.folder a.folder {
        padding: 0 15px; }
    .searchResultWrapper .searchResultContentArea .sortByList .galleryAreaName {
      width: 47%;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding: 0 5px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis; }
      @media (min-width: 1680px) {
        .searchResultWrapper .searchResultContentArea .sortByList .galleryAreaName {
          width: 40%; } }
      .searchResultWrapper .searchResultContentArea .sortByList .galleryAreaName a {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        max-width: 100%;
        color: #58595B; }
        .searchResultWrapper .searchResultContentArea .sortByList .galleryAreaName a:hover, .searchResultWrapper .searchResultContentArea .sortByList .galleryAreaName a:active, .searchResultWrapper .searchResultContentArea .sortByList .galleryAreaName a:focus {
          opacity: 0.8;
          color: #58595B !important;
          transition: all 0.2s ease-in; }
    .searchResultWrapper .searchResultContentArea .sortByList .galleryAreaFolder {
      width: 10%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 5px; }
      .searchResultWrapper .searchResultContentArea .sortByList .galleryAreaFolder a {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        width: 100%;
        text-align: center;
        color: #58595B; }
        .searchResultWrapper .searchResultContentArea .sortByList .galleryAreaFolder a:hover, .searchResultWrapper .searchResultContentArea .sortByList .galleryAreaFolder a:active, .searchResultWrapper .searchResultContentArea .sortByList .galleryAreaFolder a:focus {
          opacity: 0.8;
          color: #58595B !important;
          transition: all 0.2s ease-in; }
    .searchResultWrapper .searchResultContentArea .sortByList .galleryAreaDate {
      width: 15%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 5px; }
      .searchResultWrapper .searchResultContentArea .sortByList .galleryAreaDate a {
        color: #58595B; }
    .searchResultWrapper .searchResultContentArea .sortByList .galleryAreaActions {
      width: 10%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 5px;
      top: 0;
      visibility: visible;
      margin: 0; }
      .searchResultWrapper .searchResultContentArea .sortByList .galleryAreaActions a {
        margin: 0 5px;
        padding: 0;
        width: 18px;
        display: inline-flex; }
      .searchResultWrapper .searchResultContentArea .sortByList .galleryAreaActions .delete_folder img {
        height: 19px; }
      .searchResultWrapper .searchResultContentArea .sortByList .galleryAreaActions .actions {
        display: flex; }
      .searchResultWrapper .searchResultContentArea .sortByList .galleryAreaActions .customTooltip {
        top: 25px;
        right: 0; }
    .searchResultWrapper .searchResultContentArea .sortByGrid li {
      list-style-type: none;
      font-size: 14px;
      color: #58595B; }
    .searchResultWrapper .searchResultContentArea .sortByGrid .galleryAreaTopInnerBar {
      padding: 10px 5px;
      background: #F6F7FB;
      border-radius: 10px;
      width: 100%;
      display: flex;
      align-items: center;
      flex-direction: row;
      margin: 0; }
      .searchResultWrapper .searchResultContentArea .sortByGrid .galleryAreaTopInnerBar li {
        font-weight: 500; }
    .searchResultWrapper .searchResultContentArea .sortByGrid .galleryAreaTopCheckbox {
      width: 3%;
      display: flex;
      align-items: center;
      justify-content: center;
      /* Style the artificial checkbox */
      /* Style its checked state...with a ticked icon */ }
      .searchResultWrapper .searchResultContentArea .sortByGrid .galleryAreaTopCheckbox label input {
        display: none;
        /* Hide the default checkbox */ }
      .searchResultWrapper .searchResultContentArea .sortByGrid .galleryAreaTopCheckbox label span {
        height: 20px;
        width: 20px;
        display: inline-block;
        position: relative;
        border-radius: 3px;
        cursor: pointer;
        background: url(../img/checkbox-default.svg) 0 0 no-repeat;
        background-size: cover; }
      .searchResultWrapper .searchResultContentArea .sortByGrid .galleryAreaTopCheckbox label {
        margin: 0; }
      .searchResultWrapper .searchResultContentArea .sortByGrid .galleryAreaTopCheckbox [type=checkbox]:checked + span {
        background: url(../img/checkbox-active.svg) 0 0 no-repeat;
        background-size: cover; }
    .searchResultWrapper .searchResultContentArea .sortByGrid .galleryAreaTopImage {
      display: none; }
    .searchResultWrapper .searchResultContentArea .sortByGrid .galleryAreaTopName {
      display: none; }
    .searchResultWrapper .searchResultContentArea .sortByGrid .galleryAreaTopFolder {
      display: none; }
    .searchResultWrapper .searchResultContentArea .sortByGrid .galleryAreaTopDate {
      display: none; }
    .searchResultWrapper .searchResultContentArea .sortByGrid .galleryAreaTopActions {
      display: none; }
    .searchResultWrapper .searchResultContentArea .sortByGrid .galleryAreaContent {
      display: flex;
      flex-wrap: wrap;
      padding: 0;
      min-height: 496px;
      width: 100%;
      overflow: hidden; }
      .searchResultWrapper .searchResultContentArea .sortByGrid .galleryAreaContent > ul {
        padding: 0 10px 0 0;
        display: flex;
        flex-direction: column;
        width: 100%; }
    .searchResultWrapper .searchResultContentArea .sortByGrid .eachgalleryAreaContent {
      padding: 10px 5px;
      font-size: 14px;
      color: #58595B;
      width: calc(100% / 6);
      position: relative; }
      .searchResultWrapper .searchResultContentArea .sortByGrid .eachgalleryAreaContent .galleryAreaTopCheckbox {
        position: absolute;
        top: 88px;
        left: 14px;
        z-index: 10; }
    .searchResultWrapper .searchResultContentArea .sortByGrid .folderContent {
      /*ul {
                border: solid 1px #ebebeb;
                border-radius: 6px;
              }*/ }
      .searchResultWrapper .searchResultContentArea .sortByGrid .folderContent .galleryAreaImage.folder {
        background-color: #efefef;
        border: solid 1px #ebebeb; }
    .searchResultWrapper .searchResultContentArea .sortByGrid .galleryAreaCheckbox {
      display: flex;
      align-items: center;
      justify-content: center;
      /* Style the artificial checkbox */
      /* Style its checked state...with a ticked icon */ }
      .searchResultWrapper .searchResultContentArea .sortByGrid .galleryAreaCheckbox label input {
        display: none;
        /* Hide the default checkbox */ }
      .searchResultWrapper .searchResultContentArea .sortByGrid .galleryAreaCheckbox label span {
        height: 24px;
        width: 24px;
        display: inline-block;
        position: relative;
        border-radius: 3px;
        cursor: pointer;
        background: #fff url(../img/checkbox-default.svg) 0 0 no-repeat;
        background-size: cover; }
      .searchResultWrapper .searchResultContentArea .sortByGrid .galleryAreaCheckbox label {
        margin: 0; }
      .searchResultWrapper .searchResultContentArea .sortByGrid .galleryAreaCheckbox [type=checkbox]:checked + span {
        background: #fff url(../img/checkbox-active.svg) 0 0 no-repeat;
        background-size: cover; }
    .searchResultWrapper .searchResultContentArea .sortByGrid .galleryAreaImage {
      overflow: hidden;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 10px;
      height: 117px;
      cursor: pointer;
      position: relative; }
      .searchResultWrapper .searchResultContentArea .sortByGrid .galleryAreaImage .galleryThumbnailWrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%; }
      .searchResultWrapper .searchResultContentArea .sortByGrid .galleryAreaImage img {
        width: 100%; }
    .searchResultWrapper .searchResultContentArea .sortByGrid .galleryAreaName {
      display: block;
      align-items: center;
      justify-content: flex-start;
      padding: 0 5px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      background-color: transparent !important; }
      .searchResultWrapper .searchResultContentArea .sortByGrid .galleryAreaName a {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        max-width: 100%;
        color: #58595B;
        text-align: left; }
        .searchResultWrapper .searchResultContentArea .sortByGrid .galleryAreaName a:hover, .searchResultWrapper .searchResultContentArea .sortByGrid .galleryAreaName a:active, .searchResultWrapper .searchResultContentArea .sortByGrid .galleryAreaName a:focus {
          opacity: 0.8;
          color: #58595B !important;
          transition: all 0.2s ease-in; }
    .searchResultWrapper .searchResultContentArea .sortByGrid .galleryAreaFolder {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding: 0 5px; }
      .searchResultWrapper .searchResultContentArea .sortByGrid .galleryAreaFolder a {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        width: 100%;
        text-align: left;
        color: #f7941d;
        font-weight: 600; }
        .searchResultWrapper .searchResultContentArea .sortByGrid .galleryAreaFolder a:hover, .searchResultWrapper .searchResultContentArea .sortByGrid .galleryAreaFolder a:active, .searchResultWrapper .searchResultContentArea .sortByGrid .galleryAreaFolder a:focus {
          opacity: 0.8;
          color: #58595B !important;
          transition: all 0.2s ease-in; }
    .searchResultWrapper .searchResultContentArea .sortByGrid .galleryAreaDate {
      color: #9B9B9B;
      display: flex;
      align-items: left;
      justify-content: flex-start;
      padding: 0 5px;
      height: 20px; }
      .searchResultWrapper .searchResultContentArea .sortByGrid .galleryAreaDate a {
        color: #58595B; }
    .searchResultWrapper .searchResultContentArea .sortByGrid .galleryAreaActions {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      top: 0;
      visibility: visible;
      margin: 14px 0 0 0;
      padding: 0; }
      .searchResultWrapper .searchResultContentArea .sortByGrid .galleryAreaActions a {
        margin: 0 5px;
        padding: 0;
        width: 18px;
        display: flex; }
      .searchResultWrapper .searchResultContentArea .sortByGrid .galleryAreaActions .delete_folder img {
        height: 19px; }
      .searchResultWrapper .searchResultContentArea .sortByGrid .galleryAreaActions .rename_file img,
      .searchResultWrapper .searchResultContentArea .sortByGrid .galleryAreaActions .delete_file img {
        height: 18px; }
      .searchResultWrapper .searchResultContentArea .sortByGrid .galleryAreaActions .actions {
        display: flex; }
      .searchResultWrapper .searchResultContentArea .sortByGrid .galleryAreaActions .customTooltip {
        bottom: 25px;
        left: 0; }
    .searchResultWrapper .searchResultContentArea .galleryAreaBottomBar {
      height: 50px;
      bottom: 15px;
      left: 0;
      right: 0;
      position: sticky;
      z-index: 9999;
      margin: 0;
      width: 100%;
      border-radius: 0;
      background: #fff; }
      .searchResultWrapper .searchResultContentArea .galleryAreaBottomBar .selectedFileOptions {
        justify-content: flex-start !important; }
      .searchResultWrapper .searchResultContentArea .galleryAreaBottomBar .actions {
        display: none; }

.galleryArea.sortByGrid {
  display: none; }

.galleryFileName {
  position: static;
  opacity: 1; }

.dropdown-item:focus,
.dropdown-item:hover {
  background-color: transparent !important; }

.modalImgTitle {
  color: #4A4A4A;
  font-size: 18px;
  margin: 0;
  padding: 0px 0px 20px 0;
  font-weight: normal;
  text-align: left;
  min-height: 40px;
  word-break: break-all; }

.modalImgWrapper {
  width: 730px;
  height: 420px;
  align-items: left;
  justify-content: center; }
  .modalImgWrapper img {
    max-height: 340px; }
  .modalImgWrapper .modalImage {
    display: flex;
    height: 90%;
    align-items: center;
    justify-content: center; }

.searchResultWrapper .modal-lg {
  max-width: 1065px; }

.searchResultWrapper .tagsWrapper {
  width: 345px;
  min-height: 325px;
  max-height: 345px;
  height: auto;
  border-top: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 41px 0 0 12px; }
  .searchResultWrapper .tagsWrapper .tags li span {
    padding-left: 10px; }

.searchResultWrapper .modal-content {
  margin-top: 40px;
  padding: 15px; }

.searchResultWrapper .tagsWrapper .tab-content {
  border: 1px solid #D8D8D8;
  border-radius: 0px 6px 6px 6px;
  margin-top: -2px;
  padding-bottom: 10px;
  overflow: hidden; }

.searchResultWrapper .tagsUl li.clearfix {
  cursor: default; }

.galleryAreaContent .eachgalleryAreaContent.nonSelected {
  opacity: 0.7; }

.galleryAreaContent .eachgalleryAreaContent.selected {
  opacity: 1; }

.galleryAreaContent .folders > li {
  margin: 0; }

.galleryAreaContent .eachgalleryAreaContent.openModal {
  opacity: 1; }

.searchResultNavigation {
  display: none;
  position: relative; }

@media (max-width: 967px) {
  .searchResultNavigation {
    display: block; }
  .modalImgWrapper img {
    max-height: 265px; }
  .modalImgWrapper .modalImage {
    height: auto; }
  .modalImgWrapper {
    width: 100%;
    height: auto; }
  .modalImgTitle {
    padding-right: 50px; }
  .searchResultWrapper {
    padding-top: 20px; }
    .searchResultWrapper .galleryAreaTopImage,
    .searchResultWrapper .galleryAreaTopName,
    .searchResultWrapper .galleryAreaTopFolder,
    .searchResultWrapper .galleryAreaTopDate,
    .searchResultWrapper .galleryAreaTopActions {
      font-size: 0 !important; }
    .searchResultWrapper .galleryAreaTopFolder,
    .searchResultWrapper .galleryAreaFolder,
    .searchResultWrapper .galleryAreaTopDate,
    .searchResultWrapper .galleryAreaDate {
      display: none !important; }
    .searchResultWrapper .galleryAreaActions .folderOptions .folderDropdown {
      left: auto !important;
      right: 60px;
      transform: none !important;
      top: -5px !important;
      min-width: 215px;
      border-radius: 10px !important; }
      .searchResultWrapper .galleryAreaActions .folderOptions .folderDropdown a {
        margin: 0 10px; }
      .searchResultWrapper .galleryAreaActions .folderOptions .folderDropdown .arrow {
        left: auto;
        right: -11px;
        top: 30%;
        transform: rotate(90deg); }
    .searchResultWrapper .galleryAreaActions .folderOptions .dropdown-item {
      display: inline-block; }
  .searchResultWrapper .searchResultContentArea .sortByList .galleryAreaTopCheckbox {
    width: 35px; }
  .searchResultWrapper .searchResultContentArea .sortByList .galleryAreaName {
    width: 60%; }
  .searchResultWrapper .searchResultContentArea .sortByList .galleryAreaActions .actions {
    display: none; }
  .searchResultWrapper .searchResultContentArea .sortByList .galleryAreaActions .folderOptions {
    position: static; }
  .searchResultWrapper .searchResultContentArea .sortByList .galleryAreaImage {
    padding: 0;
    width: 25%; }
  .searchResultWrapper .searchResultContentArea .sortByGrid .galleryAreaContent {
    height: auto; }
  .searchResultWrapper .searchResultContentArea .sortByGrid .galleryAreaTopCheckbox {
    width: 35px; }
  .searchResultWrapper .searchResultContentArea .sortByGrid .eachgalleryAreaContent {
    width: calc(100%); }
  .searchResultWrapper .searchResultContentArea .sortByGrid .folderOptions {
    display: none; }
  .searchResultWrapper .tagsWrapper {
    padding-left: 0;
    width: 100%; }
  .searchResultWrapper .myModal .modal-content {
    height: 80%;
    overflow-y: auto;
    flex-direction: row !important;
    display: block; }
  .searchResultNavigation {
    left: 15px; } }

@media (max-width: 767px) {
  .searchResultWrapper .searchResultContentArea {
    padding: 10px; }
    .searchResultWrapper .searchResultContentArea .searchResultButtons {
      display: none; }
    .searchResultWrapper .searchResultContentArea .galleryAreaBottomBar {
      height: auto;
      text-align: center;
      width: calc(100% - 20px); }
  .searchResultWrapper .galleryAreaActions .folderOptions .folderDropdown {
    right: 45px; } }

.searchResultContentArea .folderContent a.folder {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%; }

.searchResultContentArea .folderContent img.folder {
  width: auto !important; }

.searchResultContentArea .brand-checkbox-icon {
  width: 20px;
  height: 20px;
  border: none; }
  .searchResultContentArea .brand-checkbox-icon:after {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    top: -1px;
    left: -1px;
    background: url(../img/checkbox-default.svg) 0 0 no-repeat;
    background-size: cover; }

.searchResultContentArea .brand-checkbox-input:checked ~ .brand-checkbox-icon:after {
  background: url(../img/checkbox-active.svg) 0 0 no-repeat;
  background-size: cover; }

.searchResultData {
  font-size: 18px;
  font-weight: 500;
  color: #58595b;
  margin-bottom: 20px;
  display: flex;
  align-items: center; }
  .searchResultData span {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: rgba(19, 139, 250, 0.14);
    border-radius: 15px;
    color: #58595b;
    padding: 2px 15px;
    font-weight: 500;
    margin-left: 10px; }

/*
 * The MIT License
 * Copyright (c) 2012 Matias Meno <m@tias.me>
 */
@keyframes cssProgressActiveRight {
  0% {
    background-position: 0 0; }
  100% {
    background-position: -35px -35px; } }

@-webkit-keyframes passing-through {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px); }
  30%,
  70% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px); } }

@-moz-keyframes passing-through {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px); }
  30%,
  70% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px); } }

@keyframes passing-through {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px); }
  30%,
  70% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px); } }

@-webkit-keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px); }
  30% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px); } }

@-moz-keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px); }
  30% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px); } }

@keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px); }
  30% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px); } }

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(0.1);
    -moz-transform: scale(0.1);
    -ms-transform: scale(0.1);
    -o-transform: scale(0.1);
    transform: scale(0.1); }
  10% {
    -webkit-transform: scale(0.3);
    -moz-transform: scale(0.3);
    -ms-transform: scale(0.3);
    -o-transform: scale(0.3);
    transform: scale(0.3); }
  20% {
    -webkit-transform: scale(0.1);
    -moz-transform: scale(0.1);
    -ms-transform: scale(0.1);
    -o-transform: scale(0.1);
    transform: scale(0.1); } }

@-moz-keyframes pulse {
  0% {
    -webkit-transform: scale(0.1);
    -moz-transform: scale(0.1);
    -ms-transform: scale(0.1);
    -o-transform: scale(0.1);
    transform: scale(0.1); }
  10% {
    -webkit-transform: scale(0.3);
    -moz-transform: scale(0.3);
    -ms-transform: scale(0.3);
    -o-transform: scale(0.3);
    transform: scale(0.3); }
  20% {
    -webkit-transform: scale(0.1);
    -moz-transform: scale(0.1);
    -ms-transform: scale(0.1);
    -o-transform: scale(0.1);
    transform: scale(0.1); } }

@keyframes pulse {
  0% {
    -webkit-transform: scale(0.1);
    -moz-transform: scale(0.1);
    -ms-transform: scale(0.1);
    -o-transform: scale(0.1);
    transform: scale(0.1); }
  10% {
    -webkit-transform: scale(0.3);
    -moz-transform: scale(0.3);
    -ms-transform: scale(0.3);
    -o-transform: scale(0.3);
    transform: scale(0.3); }
  20% {
    -webkit-transform: scale(0.1);
    -moz-transform: scale(0.1);
    -ms-transform: scale(0.1);
    -o-transform: scale(0.1);
    transform: scale(0.1); } }

.dropzone,
.dropzone * {
  box-sizing: border-box; }

.dropzone--active {
  display: flex !important;
  height: 100%;
  position: fixed;
  width: 100%;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  top: 0;
  left: 0;
  background: rgba(238, 238, 238, 0.94); }

.dz-complete {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  /*background: #46aaff;*/
  border: 0;
  border-bottom-left-radius: 8px;
  color: white;
  font-weight: bold;
  letter-spacing: 0.6px;
  width: 100%;
  border-bottom-right-radius: 8px;
  font-size: 16px; }
  @media (max-width: 1023px) {
    .dz-complete {
      bottom: initial; } }
  .dz-complete .dz-remove {
    display: none !important; }
  .dz-complete .dz-success-mark {
    opacity: 1 !important; }

.dropzone {
  margin: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer; }
  .dropzone .dz-message {
    padding-left: 20px; }

.dropzone-scale {
  position: fixed !important;
  left: 0;
  opacity: 1 !important;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100% !important;
  width: 100% !important;
  top: 0;
  z-index: 9999;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  background: rgba(255, 255, 255, 0.8);
  z-index: 9999 !important; }
  .dropzone-scale .dropzone {
    height: auto !important;
    width: 650px !important;
    max-height: 455px;
    padding: 20px;
    margin: 0;
    border: 2px dashed #0087F7;
    background: white !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    overflow: auto; }
    .dropzone-scale .dropzone.dz-clickable {
      cursor: pointer; }
      .dropzone-scale .dropzone.dz-clickable * {
        cursor: default; }
      .dropzone-scale .dropzone.dz-clickable .dz-message,
      .dropzone-scale .dropzone.dz-clickable .dz-message * {
        cursor: pointer; }
    @media (max-width: 1023px) {
      .dropzone-scale .dropzone {
        width: 100% !important;
        max-width: 650px !important; } }
    .dropzone-scale .dropzone.dz-started {
      height: 180px !important; }
      .dropzone-scale .dropzone.dz-started .dz-message {
        display: none; }
    .dropzone-scale .dropzone.dz-drag-hover {
      border-style: solid; }
      .dropzone-scale .dropzone.dz-drag-hover .dz-message {
        opacity: 0.5; }
    .dropzone-scale .dropzone .dz-message {
      text-align: center;
      font-size: 24px;
      font-weight: 500;
      color: #4a4a4a;
      position: relative;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      max-height: 300px;
      position: relative;
      left: 0;
      right: 0;
      top: 20px; }
      .dropzone-scale .dropzone .dz-message:before {
        content: "";
        background: url(../img/upload.svg) no-repeat;
        width: 45px;
        height: 45px;
        background-size: 45px !important;
        position: absolute;
        top: 70px;
        left: 0;
        right: 0;
        margin: auto; }
    .dropzone-scale .dropzone .dz-preview {
      position: relative;
      width: 100%;
      margin: 0;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-start;
      min-height: 50px;
      border-bottom: 1px solid #e6e6e6;
      box-shadow: none;
      border-radius: 0; }
      @media (max-width: 1023px) {
        .dropzone-scale .dropzone .dz-preview {
          min-height: initial;
          flex-direction: column;
          justify-content: center;
          min-height: 180px !important; } }
      .dropzone-scale .dropzone .dz-preview:hover {
        z-index: 1000; }
        .dropzone-scale .dropzone .dz-preview:hover .dz-details {
          opacity: 1; }
      .dropzone-scale .dropzone .dz-preview.dz-file-preview .dz-image {
        border-radius: 8px;
        background: #999;
        background: linear-gradient(to bottom, #eee, #ddd); }
      .dropzone-scale .dropzone .dz-preview.dz-file-preview .dz-details {
        opacity: 1; }
      .dropzone-scale .dropzone .dz-preview.dz-image-preview {
        background: white; }
        .dropzone-scale .dropzone .dz-preview.dz-image-preview .dz-details {
          -webkit-transition: opacity 0.2s linear;
          -moz-transition: opacity 0.2s linear;
          -ms-transition: opacity 0.2s linear;
          -o-transition: opacity 0.2s linear;
          transition: opacity 0.2s linear; }
      .dropzone-scale .dropzone .dz-preview .dz-remove {
        font-size: 12px;
        text-align: center;
        display: block;
        cursor: pointer;
        border: none;
        color: #535353;
        position: absolute;
        right: 0;
        z-index: 999;
        margin-bottom: 8px;
        font-family: "latoregular";
        font-style: normal;
        font-weight: 600;
        line-height: 16px; }
        .dropzone-scale .dropzone .dz-preview .dz-remove:hover {
          text-decoration: underline !important;
          color: #535353; }
      .dropzone-scale .dropzone .dz-preview:hover .dz-details {
        opacity: 1; }
      .dropzone-scale .dropzone .dz-preview .dz-details {
        z-index: 20;
        opacity: 1;
        font-size: 13px;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        margin-left: 60px;
        /*position: absolute;
                top: 0;
                left: 0;
                text-align: center;
                color: rgba(0, 0, 0, 0.9);
                text-align: center;
                min-width: 100%;
                max-width: 100%;
                $width: 120px;
                height: 100%;
                display: flex;
                align-items: flex-start;
                flex-direction: column;
                justify-content: space-between;
                padding: 10px 0;*/
        /*@media (max-width: 1023px) {
                    flex-direction: column;
                    position: initial;
                }*/ }
        .dropzone-scale .dropzone .dz-preview .dz-details .dz-size {
          margin-bottom: 1em;
          font-size: 14px;
          font-weight: 400;
          color: gray; }
        .dropzone-scale .dropzone .dz-preview .dz-details .dz-filename {
          color: gray;
          white-space: nowrap;
          font-size: 14px;
          max-width: 295px;
          text-overflow: ellipsis;
          overflow: hidden;
          display: inline-block; }
          .dropzone-scale .dropzone .dz-preview .dz-details .dz-filename:not(:hover) {
            /*span {
                		border: 1px solid transparent;
                	}*/
            overflow: hidden;
            text-overflow: ellipsis; }
        .dropzone-scale .dropzone .dz-preview .dz-details .dz-filename span,
        .dropzone-scale .dropzone .dz-preview .dz-details .dz-size span {
          background-color: rgba(255, 255, 255, 0.4);
          padding: 0 0.4em;
          border-radius: 3px; }
      .dropzone-scale .dropzone .dz-preview:hover .dz-image {
        opacity: 0.8; }
      .dropzone-scale .dropzone .dz-preview .dz-image {
        overflow: hidden;
        width: 50px;
        height: 50px;
        position: relative;
        /*display: inline-flex;*/
        z-index: 10;
        box-shadow: 1px 3px 6px #b9b9b9;
        position: absolute;
        left: 0;
        top: 0;
        display: none; }
        @media (max-width: 1023px) {
          .dropzone-scale .dropzone .dz-preview .dz-image {
            overflow: initial; } }
        .dropzone-scale .dropzone .dz-preview .dz-image img {
          display: block;
          min-height: 50px;
          min-width: 50px; }
      .dropzone-scale .dropzone .dz-preview.dz-success .dz-success-mark {
        opacity: 1;
        /*@include prefix((animation: passing-through 3s cubic-bezier(0.770, 0.000, 0.175, 1.000)));*/ }
      .dropzone-scale .dropzone .dz-preview.dz-error .dz-error-mark {
        opacity: 1;
        /*@include prefix((animation: slide-in 3s cubic-bezier(0.770, 0.000, 0.175, 1.000)));*/ }
      @media (max-width: 1023px) {
        .dropzone-scale .dropzone .dz-preview .dz-error-mark {
          flex-direction: column;
          align-items: center; }
          .dropzone-scale .dropzone .dz-preview .dz-error-mark img {
            margin: 0; } }
      .dropzone-scale .dropzone .dz-preview .dz-success-mark,
      .dropzone-scale .dropzone .dz-preview .dz-error-mark {
        /*$image-height: 54px;
                $image-width: 54px;*/
        pointer-events: none;
        z-index: 500;
        /*position: absolute;
                display: block;
                left: 0;
                right: 0;
                margin: auto;
                top: 0;
                background: rgba(255, 255, 255, 0.6);*/
        opacity: 0;
        width: 16px;
        height: 16px;
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        margin-left: 5px;
        margin-bottom: 5px; }
        .dropzone-scale .dropzone .dz-preview .dz-success-mark svg,
        .dropzone-scale .dropzone .dz-preview .dz-error-mark svg {
          display: block;
          /*width: $image-width;
                	height: $image-height;*/ }
      .dropzone-scale .dropzone .dz-preview.dz-processing .dz-progress {
        opacity: 1;
        -webkit-transition: all 0.2s linear;
        -moz-transition: all 0.2s linear;
        -ms-transition: all 0.2s linear;
        -o-transition: all 0.2s linear;
        transition: all 0.2s linear; }
      .dropzone-scale .dropzone .dz-preview.dz-complete .dz-progress {
        opacity: 0;
        -webkit-transition: opacity 0.4s ease-in;
        -moz-transition: opacity 0.4s ease-in;
        -ms-transition: opacity 0.4s ease-in;
        -o-transition: opacity 0.4s ease-in;
        transition: opacity 0.4s ease-in; }
      .dropzone-scale .dropzone .dz-preview:not(.dz-processing) .dz-progress {
        -webkit-animation: cssProgressActiveRight 2s linear infinite;
        -moz-animation: cssProgressActiveRight 2s linear infinite;
        -ms-animation: cssProgressActiveRight 2s linear infinite;
        -o-animation: cssProgressActiveRight 2s linear infinite;
        animation: cssProgressActiveRight 2s linear infinite;
        background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.125) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.125) 50%, rgba(255, 255, 255, 0.125) 75%, transparent 75%, transparent);
        background-size: 35px 35px;
        background-color: #a6a6a6; }
      .dropzone-scale .dropzone .dz-preview .dz-progress {
        opacity: 1;
        z-index: 1000;
        pointer-events: none;
        /*position: absolute;
                height: 8px;
                left: 55%;
                top: 55%;
                margin-top: -8px;
                margin-left: -170px;
                */
        width: 100%;
        height: 6px;
        background: rgba(255, 255, 255, 0.9);
        -webkit-transform: scale(1);
        border-radius: 3px;
        overflow: hidden; }
        .dropzone-scale .dropzone .dz-preview .dz-progress .dz-upload {
          background: #0087F7;
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          width: 0;
          -webkit-transition: width 300ms ease-in-out;
          -moz-transition: width 300ms ease-in-out;
          -ms-transition: width 300ms ease-in-out;
          -o-transition: width 300ms ease-in-out;
          transition: width 300ms ease-in-out; }
      .dropzone-scale .dropzone .dz-preview.dz-error .dz-error-message {
        display: block; }
      .dropzone-scale .dropzone .dz-preview.dz-error:hover .dz-error-message {
        opacity: 1;
        pointer-events: auto; }
      .dropzone-scale .dropzone .dz-preview .dz-error-message {
        color: #d75a4a;
        pointer-events: none;
        z-index: 1000;
        display: block;
        display: none;
        opacity: 0;
        -webkit-transition: opacity 0.3s ease;
        -moz-transition: opacity 0.3s ease;
        -ms-transition: opacity 0.3s ease;
        -o-transition: opacity 0.3s ease;
        transition: opacity 0.3s ease;
        font-size: 12px;
        padding: 0.2em 0; }

.dz-error {
  background: white !important; }
  .dz-error .dz-success-mark {
    display: none !important; }
  .dz-error .dz-error-message {
    opacity: 1 !important;
    width: 100% !important;
    max-width: 400px;
    text-align: left; }

#uploadModal {
  position: relative;
  width: 160px;
  height: 44px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.19788);
  border-radius: 10px;
  font-weight: bold;
  font-size: 16px;
  z-index: 99;
  margin-bottom: 20px !important; }
  #uploadModal .uploadmodal-plus {
    margin-right: 15px;
    position: absolute;
    left: 25px;
    top: 12px; }

#closeDropzone {
  top: -40px;
  position: absolute;
  display: none;
  align-items: center;
  justify-content: center;
  right: 0;
  left: initial;
  border-top: 1px solid gray;
  border-left: 1px solid gray;
  border-right: 1px solid gray;
  width: 40px;
  height: 40px;
  display: none;
  background: white; }
  #closeDropzone img {
    width: 25px;
    margin: 0; }

.closeDZ-active {
  display: flex !important; }

.uploadModalWrapper {
  position: relative;
  width: 100%;
  max-width: 650px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center; }
  .uploadModalWrapper .uploadError {
    width: 101%;
    height: 101%;
    background-color: #FFEFED;
    border-radius: 10px;
    padding: 10px 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    margin: -2px auto auto -2px;
    display: none;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column; }
    .uploadModalWrapper .uploadError .errorMessage {
      font-size: 20px;
      font-weight: 500;
      padding: 5px 0 5px 70px;
      color: #D72C0D;
      background: url(../img/not-allowed.svg) left center no-repeat; }
    .uploadModalWrapper .uploadError a {
      display: inline-block;
      color: #0367A6;
      font-size: 16px; }
  .uploadModalWrapper .addMoreFiles {
    border: none;
    background: transparent;
    padding: 0;
    white-space: nowrap;
    color: #8020CF;
    text-decoration: none;
    z-index: 2;
    font-weight: 600;
    font-size: 14px;
    width: 100%;
    text-align: right; }
    .uploadModalWrapper .addMoreFiles:hover {
      text-decoration: none; }

.uploadMore {
  display: flex;
  width: 100%;
  justify-content: space-between;
  flex-direction: column;
  align-items: center; }
  .uploadMore .dataset_upload_warn {
    color: #8020CF;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    text-align: right;
    width: 100%; }
  .uploadMore .dataset_upload_complete {
    color: #00875A !important;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    visibility: visible;
    position: relative;
    top: -5px; }

#uploadModal.upload-modal-hidden {
  position: absolute;
  opacity: 0;
  right: 0;
  width: 232px; }

#uploadModal.upload-modal-hidden-2 {
  position: absolute;
  opacity: 0;
  right: 0;
  width: 218px;
  height: 48px; }
  @media (max-width: 1023px) {
    #uploadModal.upload-modal-hidden-2 {
      bottom: 2px;
      left: 0;
      margin: auto; } }

#uploadModal.upload-modal-hidden-3 {
  position: absolute;
  opacity: 0;
  right: 0;
  width: 197; }

.dz-message-hover {
  padding-left: 0 !important;
  font-weight: 400;
  font-size: 15px;
  border: 2px dashed white;
  opacity: 0.8;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30px; }

.dz-message-hover-2 {
  font-weight: 400;
  font-size: 16px;
  border: 2px dashed white;
  opacity: 0.8;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30px; }

.dz-message-hover-3 {
  font-weight: 400;
  font-size: 16px;
  border: 2px dashed white;
  opacity: 0.8;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30px; }

.dropzone-scale-dataset {
  position: relative !important;
  left: 0;
  opacity: 1 !important;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100% !important;
  width: 100% !important;
  max-height: 300px !important;
  top: 0;
  z-index: 9999;
  padding: 0;
  margin: 0;
  background: rgba(255, 255, 255, 0.8);
  z-index: 9999 !important;
  box-shadow: none !important; }
  .dropzone-scale-dataset .uploadModalWrapper {
    height: 200px !important; }
  .dropzone-scale-dataset .dropzone {
    height: auto !important;
    width: 102% !important;
    max-height: 250px;
    padding: 15px 20px 20px;
    margin: 0;
    margin-left: -2px;
    margin-right: -2px;
    opacity: 1;
    border: 2px dashed #9B9B9B;
    background: white !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    overflow: auto;
    border-radius: 10px; }
    .dropzone-scale-dataset .dropzone.dz-clickable {
      cursor: pointer; }
      .dropzone-scale-dataset .dropzone.dz-clickable * {
        cursor: default; }
      .dropzone-scale-dataset .dropzone.dz-clickable .dz-message,
      .dropzone-scale-dataset .dropzone.dz-clickable .dz-message * {
        cursor: pointer; }
    @media (max-width: 1023px) {
      .dropzone-scale-dataset .dropzone {
        width: 100% !important;
        max-width: 650px !important; } }
    .dropzone-scale-dataset .dropzone.dz-started {
      height: 200px !important; }
      .dropzone-scale-dataset .dropzone.dz-started .dz-message {
        display: none; }
    .dropzone-scale-dataset .dropzone.dz-drag-hover {
      border-style: solid; }
      .dropzone-scale-dataset .dropzone.dz-drag-hover .dz-message {
        opacity: 0.5; }
    .dropzone-scale-dataset .dropzone .dz-message {
      text-align: center;
      font-size: 24px;
      font-weight: 500;
      color: #4a4a4a;
      position: relative;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      max-height: 300px;
      position: relative;
      left: 0;
      right: 0;
      top: 20px; }
      .dropzone-scale-dataset .dropzone .dz-message:before {
        content: "";
        background: url(../img/upload.svg) no-repeat;
        width: 45px;
        height: 45px;
        background-size: 45px !important;
        position: absolute;
        top: 70px;
        left: 0;
        right: 0;
        margin: auto; }
    .dropzone-scale-dataset .dropzone .dz-preview {
      position: relative;
      width: 100%;
      margin: 0;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-start;
      min-height: 50px;
      box-shadow: none;
      border-radius: 0; }
      @media (max-width: 1023px) {
        .dropzone-scale-dataset .dropzone .dz-preview {
          flex-direction: column;
          justify-content: center;
          margin-bottom: 10px; } }
      .dropzone-scale-dataset .dropzone .dz-preview:hover {
        z-index: 1000; }
        .dropzone-scale-dataset .dropzone .dz-preview:hover .dz-details {
          opacity: 1; }
      .dropzone-scale-dataset .dropzone .dz-preview.dz-file-preview .dz-image {
        border-radius: 8px;
        background: #999;
        background: linear-gradient(to bottom, #eee, #ddd); }
      .dropzone-scale-dataset .dropzone .dz-preview.dz-file-preview .dz-details {
        opacity: 1; }
      .dropzone-scale-dataset .dropzone .dz-preview.dz-image-preview {
        /*background: white;*/ }
        .dropzone-scale-dataset .dropzone .dz-preview.dz-image-preview .dz-details {
          -webkit-transition: opacity 0.2s linear;
          -moz-transition: opacity 0.2s linear;
          -ms-transition: opacity 0.2s linear;
          -o-transition: opacity 0.2s linear;
          transition: opacity 0.2s linear; }
      .dropzone-scale-dataset .dropzone .dz-preview .dz-remove {
        font-size: 12px;
        text-align: center;
        display: block;
        cursor: pointer;
        border: none;
        color: #535353;
        position: absolute;
        right: 0;
        margin-bottom: 8px;
        z-index: 999;
        font-weight: 500; }
        .dropzone-scale-dataset .dropzone .dz-preview .dz-remove:hover {
          color: #535353; }
      .dropzone-scale-dataset .dropzone .dz-preview:hover .dz-details {
        opacity: 1; }
      .dropzone-scale-dataset .dropzone .dz-preview .dz-details {
        z-index: 20;
        opacity: 1;
        font-size: 13px;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        /*position: absolute;
                top: 0;
                left: 0;
                text-align: center;
                color: rgba(0, 0, 0, 0.9);
                text-align: center;
                min-width: 100%;
                max-width: 100%;
                $width: 120px;
                height: 100%;
                display: flex;
                align-items: flex-start;
                flex-direction: column;
                justify-content: space-between;
                padding: 10px 0;*/
        /*@media (max-width: 1023px) {
                    flex-direction: column;
                    position: initial;
                }*/ }
        .dropzone-scale-dataset .dropzone .dz-preview .dz-details .dz-size {
          margin-bottom: 1em;
          font-size: 14px;
          font-weight: 400;
          color: gray;
          display: none; }
        .dropzone-scale-dataset .dropzone .dz-preview .dz-details .dz-filename {
          color: #006644;
          white-space: nowrap;
          font-size: 12px;
          max-width: 295px;
          text-overflow: ellipsis;
          overflow: hidden;
          margin-bottom: 5px;
          display: inline-block; }
          .dropzone-scale-dataset .dropzone .dz-preview .dz-details .dz-filename:not(:hover) {
            /*span {
                		border: 1px solid transparent;
                	}*/
            overflow: hidden;
            text-overflow: ellipsis; }
        .dropzone-scale-dataset .dropzone .dz-preview .dz-details .dz-filename span,
        .dropzone-scale-dataset .dropzone .dz-preview .dz-details .dz-size span {
          background-color: rgba(255, 255, 255, 0.4);
          /*padding: 0 0.4em;
              		border-radius: 3px;*/ }
      .dropzone-scale-dataset .dropzone .dz-preview:hover .dz-image {
        opacity: 0.8; }
      .dropzone-scale-dataset .dropzone .dz-preview .dz-image {
        overflow: hidden;
        width: 50px;
        height: 50px;
        position: relative;
        /*display: inline-flex;*/
        z-index: 10;
        box-shadow: 1px 3px 6px #b9b9b9;
        position: absolute;
        left: 0;
        top: 0;
        display: none; }
        @media (max-width: 1023px) {
          .dropzone-scale-dataset .dropzone .dz-preview .dz-image {
            overflow: initial; } }
        .dropzone-scale-dataset .dropzone .dz-preview .dz-image img {
          display: block;
          min-height: 50px;
          min-width: 50px; }
      .dropzone-scale-dataset .dropzone .dz-preview.dz-success .dz-success-mark {
        opacity: 1;
        /*@include prefix((animation: passing-through 3s cubic-bezier(0.770, 0.000, 0.175, 1.000)));*/ }
      .dropzone-scale-dataset .dropzone .dz-preview.dz-error .dz-error-mark {
        opacity: 1;
        /*@include prefix((animation: slide-in 3s cubic-bezier(0.770, 0.000, 0.175, 1.000)));*/ }
      @media (max-width: 1023px) {
        .dropzone-scale-dataset .dropzone .dz-preview .dz-error-mark {
          flex-direction: column;
          align-items: center; }
          .dropzone-scale-dataset .dropzone .dz-preview .dz-error-mark img {
            margin: 0; } }
      .dropzone-scale-dataset .dropzone .dz-preview .dz-success-mark,
      .dropzone-scale-dataset .dropzone .dz-preview .dz-error-mark {
        /*$image-height: 54px;
                $image-width: 54px;*/
        pointer-events: none;
        z-index: 500;
        /*position: absolute;
                display: block;
                left: 0;
                right: 0;
                margin: auto;
                top: 0;
                background: rgba(255, 255, 255, 0.6);*/
        opacity: 0;
        width: 16px;
        height: 16px;
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        margin-left: 5px;
        margin-bottom: 5px; }
        .dropzone-scale-dataset .dropzone .dz-preview .dz-success-mark svg,
        .dropzone-scale-dataset .dropzone .dz-preview .dz-error-mark svg {
          display: block;
          /*width: $image-width;
                	height: $image-height;*/ }
      .dropzone-scale-dataset .dropzone .dz-preview.dz-processing .dz-progress {
        opacity: 1;
        -webkit-transition: all 0.2s linear;
        -moz-transition: all 0.2s linear;
        -ms-transition: all 0.2s linear;
        -o-transition: all 0.2s linear;
        transition: all 0.2s linear; }
      .dropzone-scale-dataset .dropzone .dz-preview.dz-complete .dz-progress {
        opacity: 0;
        -webkit-transition: opacity 0.4s ease-in;
        -moz-transition: opacity 0.4s ease-in;
        -ms-transition: opacity 0.4s ease-in;
        -o-transition: opacity 0.4s ease-in;
        transition: opacity 0.4s ease-in; }
      .dropzone-scale-dataset .dropzone .dz-preview:not(.dz-processing) .dz-progress {
        background-size: 35px 35px;
        background-color: #36B37E;
        -webkit-transition: width 300ms ease-in-out;
        -moz-transition: width 300ms ease-in-out;
        -ms-transition: width 300ms ease-in-out;
        -o-transition: width 300ms ease-in-out;
        transition: width 300ms ease-in-out; }
      .dropzone-scale-dataset .dropzone .dz-preview .dz-progress {
        opacity: 1;
        z-index: 1000;
        pointer-events: none;
        /*position: absolute;
                height: 8px;
                left: 55%;
                top: 55%;
                margin-top: -8px;
                margin-left: -170px;*/
        width: 100%;
        height: 6px;
        background: rgba(255, 255, 255, 0.9);
        -webkit-transform: scale(1);
        border-radius: 3px;
        overflow: hidden;
        /*@media (max-width: 1023px) {
                    top: 50%;
                }

                @media (max-width: 967px) {
                    width: 200px;
                    margin: 0 auto;
                    left: 0;
                    right: 0;
                }
*/ }
        .dropzone-scale-dataset .dropzone .dz-preview .dz-progress .dz-upload {
          background: #66D19E;
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          width: 0;
          -webkit-transition: width 300ms ease-in-out;
          -moz-transition: width 300ms ease-in-out;
          -ms-transition: width 300ms ease-in-out;
          -o-transition: width 300ms ease-in-out;
          transition: width 300ms ease-in-out; }
      .dropzone-scale-dataset .dropzone .dz-preview.dz-error .dz-error-message {
        display: block; }
      .dropzone-scale-dataset .dropzone .dz-preview.dz-error:hover .dz-error-message {
        opacity: 1;
        pointer-events: auto; }
      .dropzone-scale-dataset .dropzone .dz-preview .dz-error-message {
        color: #d75a4a;
        pointer-events: none;
        z-index: 1000;
        display: block;
        display: none;
        opacity: 0;
        -webkit-transition: opacity 0.3s ease;
        -moz-transition: opacity 0.3s ease;
        -ms-transition: opacity 0.3s ease;
        -o-transition: opacity 0.3s ease;
        transition: opacity 0.3s ease;
        font-size: 12px;
        padding: 0.2em 0; }

#uploadModal.dataset-upload-first-view {
  border: 2px dashed #9b9b9b;
  width: 100%;
  min-height: 200px;
  box-shadow: none;
  max-width: 600px;
  margin: 0 auto; }
  #uploadModal.dataset-upload-first-view .uploadModalWrapper {
    position: initial; }
  #uploadModal.dataset-upload-first-view .dropzone {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0; }

.importUploadModel #upload_my_local .dz-image {
  display: none !important; }

.importUploadModel #upload_my_local .dz-details {
  margin-left: 0 !important; }

.disableDropzone {
  opacity: 0.5;
  pointer-events: none; }
  .disableDropzone .note a,
  .disableDropzone .note strong,
  .disableDropzone .dataset_upload_warn strong {
    color: #535353 !important; }

.uploadDatasetModal .dropzone-scale-dataset .dropzone .dz-error {
  height: 52px; }

.uploadDatasetModal .dropzone-scale-dataset .dropzone .dz-error .dz-remove {
  top: 0;
  margin-bottom: 0; }

.stripeWrapper {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  padding: 50px 0 80px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: #595959; }

.stripeInner {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center; }

.stripeTitles {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-bottom: 25px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column; }
  .stripeTitles h1 {
    color: white; }
  .stripeTitles strong {
    color: #f7941d;
    font-weight: 600; }

.stripeOptions {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-bottom: 25px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column; }
  .stripeOptions div {
    margin: 0 5px;
    width: 180px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 3px;
    cursor: pointer; }
  .stripeOptions input[type=radio] {
    margin-right: 8px; }
  .stripeOptions .card_option {
    padding: 10px;
    background: #76b77b;
    color: white; }
  .stripeOptions .paypal_option {
    background: #3686ff;
    padding: 10px;
    color: white; }

.stripeForm {
  background: #fff;
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center; }
  .stripeForm .form-row {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center; }
  .stripeForm #card-element {
    width: 100%; }

.stripeCardType {
  color: #444;
  font-weight: 400;
  font-size: 18px; }

.stripeHeader {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 100%;
  padding: 15px 5px; }
  .stripeHeader h1 {
    font-size: 30px;
    font-weight: 400; }

.stripeLogo {
  width: 50px; }

#card-errors {
  margin-top: 20px; }

@media (min-width: 1200px) {
  .stripeTitles {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row; }
  .stripeOptions {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row; } }

@media (max-width: 767px) {
  .stripeOptions .card_option {
    margin-bottom: 15px; } }

.edgeInstallationWrapper {
  width: 100%;
  height: 100%;
  padding: 35px 15px;
  margin-top: 80px;
  box-sizing: border-box;
  position: relative;
  background: url(../img/bg-img.jpg) 0 0 no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  float: left; }

.installationInfoBox {
  width: 100%;
  max-width: 1190px;
  margin: 0 auto;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 24px;
  z-index: 2;
  box-shadow: 0 0 5px #ddd; }
  .installationInfoBox .navController {
    width: 100%;
    justify-content: center;
    align-items: center;
    display: flex; }
    .installationInfoBox .navController .next,
    .installationInfoBox .navController .prev {
      filter: invert(84%) sepia(43%) saturate(7392%) hue-rotate(749deg) brightness(260%) contrast(94%);
      width: 37px;
      height: 37px;
      margin: 0 30px;
      display: inline-flex;
      text-decoration: none; }
    .installationInfoBox .navController .next {
      background: url(../img/next-arrow-circle-white.svg) 0 0 no-repeat;
      background-size: contain; }
    .installationInfoBox .navController .prev {
      background: url(../img/prev-arrow-circle-white.svg) 0 0 no-repeat;
      background-size: contain; }
  .installationInfoBox .title {
    font-size: 24px;
    color: #f7941d;
    margin: 0 0 20px;
    font-weight: 500; }
  .installationInfoBox .subtitle {
    color: #138bfa;
    font-size: 21px;
    margin: 0 0 10px;
    font-weight: 500; }
  .installationInfoBox .step0 ul {
    list-style: none; }
    .installationInfoBox .step0 ul li {
      font-size: 16px;
      color: #4F4F4F;
      margin-bottom: 5px;
      word-break: break-word;
      position: relative;
      padding-left: 20px; }
      .installationInfoBox .step0 ul li i {
        position: absolute;
        left: 0;
        top: 0;
        font-style: normal; }
  .installationInfoBox p {
    font-size: 16px;
    color: #4F4F4F;
    margin-bottom: 5px;
    word-break: break-word; }
    .installationInfoBox p a {
      color: #f7941d;
      text-decoration: underline; }

.hardware .stepsContainer {
  width: 100%;
  min-height: 540px;
  display: none;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap; }
  @media (max-width: 1200px) {
    .hardware .stepsContainer {
      flex-direction: column;
      min-height: none; } }

.hardware .stepsContainer.active {
  display: flex; }

.hardware .hardwareImg {
  max-width: 600px;
  display: flex;
  overflow: hidden; }
  .hardware .hardwareImg img {
    border: 4px solid #4F4F4F;
    border-radius: 6px; }
  .hardware .hardwareImg .img2 {
    margin-left: 15px; }

.hardware .multiImg .img1 {
  max-width: 40%; }

.hardware .multiImg .img2 {
  max-width: 55%; }

.hardware .hardwareInstallationInfo {
  padding-left: 30px;
  width: 100%;
  max-width: 472px; }
  @media (max-width: 1200px) {
    .hardware .hardwareInstallationInfo {
      padding: 0;
      padding-top: 30px;
      padding-bottom: 30px; } }

.hardware .steps {
  padding-left: 60px;
  position: relative; }
  @media (max-width: 480px) {
    .hardware .steps {
      padding-left: 0; } }

.hardware label {
  color: #138bfa;
  margin: 0 5px 0 0;
  font-weight: 500;
  position: absolute;
  left: 0;
  top: 0; }
  @media (max-width: 480px) {
    .hardware label {
      position: static;
      width: 100%; } }

.hardware .stepper {
  width: 100%;
  margin: 20px 0; }
  .hardware .stepper ul {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between; }
  .hardware .stepper li {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    position: relative;
    background-color: #F2F2F2;
    color: #828282;
    border-radius: 100%; }
    .hardware .stepper li:after {
      width: 100%;
      height: 4px;
      background-color: #F2F2F2;
      position: absolute;
      top: 18px;
      left: 100%;
      content: ''; }
    .hardware .stepper li:last-child:after {
      display: none; }
  .hardware .stepper li.active {
    background-color: #138bfa;
    color: #ffffff; }
    .hardware .stepper li.active:after {
      background-color: #138bfa; }

.software {
  padding-top: 20px; }
  .software .title {
    text-align: left; }
  .software .stepsContainer {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: none;
    min-height: 540px; }
    @media (max-width: 1200px) {
      .software .stepsContainer {
        min-height: none; } }
  .software .stepsContainer.active {
    display: flex; }
  .software .softwareImg {
    height: 265px;
    display: flex;
    justify-content: center;
    align-items: center; }
    .software .softwareImg img {
      border: 4px solid #4F4F4F;
      border-radius: 6px; }
    .software .softwareImg .img2 {
      margin-left: 15px; }
    @media (max-width: 480px) {
      .software .softwareImg {
        height: auto; } }
  @media (max-width: 480px) {
    .software .multiImg {
      flex-direction: column; } }
  @media (max-width: 480px) {
    .software .multiImg .img2 {
      margin: 10px 0 0; } }
  .software .softwareInstallationInfo {
    width: 100%;
    text-align: center; }
  .software .steps {
    position: relative;
    max-width: 747px;
    margin: 20px auto;
    text-align: left;
    padding-left: 65px; }
    @media (max-width: 480px) {
      .software .steps {
        padding-left: 0; } }
  .software label {
    color: #138bfa;
    margin: 0 5px 0 0;
    font-weight: 500;
    position: absolute;
    left: 0;
    top: 0; }
    @media (max-width: 480px) {
      .software label {
        position: static;
        width: 100%; } }
  .software .spacer {
    height: 265px;
    display: flex;
    width: 100%; }
    @media (max-width: 480px) {
      .software .spacer {
        height: 100px; } }
  .software .stepper {
    width: 100%;
    max-width: 747px;
    margin: 30px auto; }
    .software .stepper ul {
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: row;
      justify-content: space-between; }
    .software .stepper li {
      width: 28px;
      height: 28px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      position: relative;
      background-color: #F2F2F2;
      color: #828282;
      border-radius: 100%; }
      .software .stepper li:after {
        width: 100%;
        height: 4px;
        background-color: #F2F2F2;
        position: absolute;
        top: 13px;
        left: 100%;
        content: ''; }
        @media (max-width: 480px) {
          .software .stepper li:after {
            top: 8px; } }
      .software .stepper li:last-child:after {
        display: none; }
      @media (max-width: 480px) {
        .software .stepper li {
          width: 20px;
          height: 20px;
          font-size: 10px; } }
    .software .stepper li.active {
      background-color: #138bfa;
      color: #ffffff; }
      .software .stepper li.active:after {
        background-color: #138bfa; }

.deviceList .modal-content {
  margin-top: 0; }

.noDeviceContent {
  font-family: "Euclid Circular B";
  max-width: 570px;
  padding: 30px 20px 20px;
  position: relative;
  background: #FFFFFF;
  box-shadow: 2px 5px 5px rgba(22, 22, 22, 0.08);
  border-radius: 4.96188px;
  display: flex;
  flex-wrap: wrap; }
  .noDeviceContent .d-flex.justify-content-between {
    width: 100%; }
  .noDeviceContent .setupGuideDropdown .dropdownBtn {
    box-shadow: none !important;
    background: #ffffff url(../img/trangle-down-arrow-darktblue.svg) 90% center no-repeat; }
  .noDeviceContent .setupGuideDropdown.open {
    background: #ffffff url(../img/trangle-up-arrow-darktblue.svg) 90% center no-repeat; }
  .noDeviceContent h5 {
    font-weight: 500;
    font-size: 20px;
    line-height: 36px;
    color: #4E4576;
    display: flex;
    align-items: center;
    white-space: nowrap; }
    .noDeviceContent h5 img[alt="plus"] {
      width: 20px;
      height: 20px;
      margin-right: 10px; }
  .noDeviceContent .info {
    margin-top: 30px;
    margin-bottom: 50px;
    color: #4E4576;
    font-weight: 400;
    font-size: 16px; }
  .noDeviceContent .createDeviceBtn {
    font-size: 14px;
    font-weight: 600;
    margin-left: auto; }
    .noDeviceContent .createDeviceBtn .icon {
      margin-right: 5px; }
  .noDeviceContent ul {
    color: #595959;
    padding-left: 20px; }
    .noDeviceContent ul li {
      font-size: 14px;
      font-weight: 400;
      padding-left: 5px; }

.nameGroup {
  min-width: 180px;
  height: 73px;
  background: #FFFFFF;
  box-shadow: 2px 5px 5px rgba(22, 22, 22, 0.08);
  border-radius: 10px;
  padding: 12px 30px;
  text-align: center;
  margin-right: 18px; }
  .nameGroup:first-child {
    min-width: 270px; }
    .nameGroup:first-child h3, .nameGroup:first-child h5 {
      text-align: left; }
  .nameGroup h3 {
    font-family: "Euclid Circular B";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: #535353;
    margin-bottom: 10px; }
  .nameGroup h5 {
    font-family: "Euclid Circular B";
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #303030;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    margin-bottom: 0; }

.edgeContentArea {
  margin-top: 20px;
  width: 100%;
  height: auto; }
  .edgeContentArea .edgeAreaTopBar {
    width: 100%;
    height: 44px;
    display: flex;
    justify-content: space-between;
    align-items: center; }
    @media (max-width: 967px) {
      .edgeContentArea .edgeAreaTopBar {
        height: auto;
        flex-direction: column; } }
    .edgeContentArea .edgeAreaTopBar .edgeTitleArea h4 {
      font-size: 18px;
      margin: 0;
      color: #58595B;
      font-weight: 500;
      display: flex; }
      @media (max-width: 480px) {
        .edgeContentArea .edgeAreaTopBar .edgeTitleArea h4 {
          flex-direction: column; } }
    .edgeContentArea .edgeAreaTopBar .edgeTitleArea b {
      color: #58595B;
      font-weight: 500;
      margin-right: 5px; }
    .edgeContentArea .edgeAreaTopBar .edgeTitleArea span {
      color: #9B9B9B;
      max-width: 250px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: inline-block; }
    .edgeContentArea .edgeAreaTopBar .edgeTitleArea span + b {
      margin-left: 30px; }
    @media (max-width: 967px) {
      .edgeContentArea .edgeAreaTopBar .edgeTitleArea {
        margin-bottom: 10px; } }
    .edgeContentArea .edgeAreaTopBar .edgeTitleArea .usgLink {
      margin: 5px 0 0 0 !important;
      font-size: 18px; }
    .edgeContentArea .edgeAreaTopBar .edgeTitleArea .verisonActions {
      margin-left: 15px;
      margin-top: -7px; }
      .edgeContentArea .edgeAreaTopBar .edgeTitleArea .verisonActions button {
        background: rgba(155, 155, 155, 0.13);
        border-radius: 23px;
        color: #9B9B9B;
        font-size: 16px;
        font-weight: 400;
        height: 32px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        padding: 0 15px;
        border: 0;
        margin-right: 10px;
        transition: all 0.2s ease-in; }
        .edgeContentArea .edgeAreaTopBar .edgeTitleArea .verisonActions button:last-child {
          margin-right: 0; }
        .edgeContentArea .edgeAreaTopBar .edgeTitleArea .verisonActions button:hover, .edgeContentArea .edgeAreaTopBar .edgeTitleArea .verisonActions button:focus {
          background: rgba(247, 148, 29, 0.13);
          color: #f7941d; }
        .edgeContentArea .edgeAreaTopBar .edgeTitleArea .verisonActions button.active {
          background: rgba(247, 148, 29, 0.13);
          color: #f7941d;
          font-weight: 500; }
  .edgeContentArea .edgeAreaButtons {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2; }
    .edgeContentArea .edgeAreaButtons .createDeviceBtn {
      padding: 10px;
      margin-right: 15px; }
    .edgeContentArea .edgeAreaButtons .addDeviceBtn {
      background: linear-gradient(90deg, #8020CF 0%, #492DE6 100%);
      box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.08), inset 0px -1px 0px rgba(0, 0, 0, 0.2);
      border-radius: 10px;
      color: #ffffff;
      height: 36px !important;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      padding: 0 15px;
      min-height: 36px;
      border: none;
      transition: all 0.2s ease-in; }
      .edgeContentArea .edgeAreaButtons .addDeviceBtn:hover {
        color: #ffffff; }
      .edgeContentArea .edgeAreaButtons .addDeviceBtn.alertDesable {
        background: #f1f1f1;
        color: #8C9196 !important;
        opacity: 1; }
        .edgeContentArea .edgeAreaButtons .addDeviceBtn.alertDesable img {
          opacity: 0.5;
          filter: invert(56%) sepia(7%) saturate(252%) hue-rotate(169deg) brightness(101%) contrast(86%); }
    .edgeContentArea .edgeAreaButtons .reportHistoryBtn {
      padding: 9px 30px;
      margin-left: 15px; }
    .edgeContentArea .edgeAreaButtons .analyticsSettingsBtn {
      padding: 9px 30px;
      margin-left: 15px; }
    .edgeContentArea .edgeAreaButtons .ddiBtn {
      padding: 9px 30px; }
    .edgeContentArea .edgeAreaButtons .perceptionGroupsBtn,
    .edgeContentArea .edgeAreaButtons .createGroupBtn,
    .edgeContentArea .edgeAreaButtons .reportBtn,
    .edgeContentArea .edgeAreaButtons .addCameraBtn,
    .edgeContentArea .edgeAreaButtons .addpercaptionBtn {
      padding: 9px 30px; }
      @media (max-width: 480px) {
        .edgeContentArea .edgeAreaButtons .perceptionGroupsBtn,
        .edgeContentArea .edgeAreaButtons .createGroupBtn,
        .edgeContentArea .edgeAreaButtons .reportBtn,
        .edgeContentArea .edgeAreaButtons .addCameraBtn,
        .edgeContentArea .edgeAreaButtons .addpercaptionBtn {
          padding: 7px 20px;
          font-size: 14px; } }
    .edgeContentArea .edgeAreaButtons .reportBtn {
      margin-right: 15px; }
    .edgeContentArea .edgeAreaButtons .addpercaptionBtn {
      margin-right: 15px; }
    .edgeContentArea .edgeAreaButtons .addCameraBtn .plusIcon {
      margin-right: 10px; }
    .edgeContentArea .edgeAreaButtons .customDropdown {
      margin-right: 15px; }
      .edgeContentArea .edgeAreaButtons .customDropdown .dropdownBtn {
        height: 46px; }
      .edgeContentArea .edgeAreaButtons .customDropdown .dropdownMenu {
        top: 40px; }
    .edgeContentArea .edgeAreaButtons .disabled,
    .edgeContentArea .edgeAreaButtons .disable {
      background: #f7f7f7;
      border-color: #f7f7f7;
      color: #b7b7b7;
      opacity: 1;
      pointer-events: auto;
      cursor: default;
      position: relative; }
      .edgeContentArea .edgeAreaButtons .disabled .customTooltip,
      .edgeContentArea .edgeAreaButtons .disable .customTooltip {
        top: 50px;
        right: 0; }
      .edgeContentArea .edgeAreaButtons .disabled:hover .customTooltip,
      .edgeContentArea .edgeAreaButtons .disable:hover .customTooltip {
        visibility: visible;
        opacity: 1; }
    .edgeContentArea .edgeAreaButtons .help {
      margin-left: 10px;
      border: none;
      background: none;
      box-shadow: none;
      padding: 0; }
  .edgeContentArea .checkbox {
    margin: 0; }
    .edgeContentArea .checkbox input {
      display: none; }
    .edgeContentArea .checkbox span {
      height: 20px;
      width: 20px;
      border: 1px solid #828282;
      display: inline-block;
      position: relative;
      border-radius: 3px;
      cursor: pointer;
      background-color: #ffffff; }
      .edgeContentArea .checkbox span:before {
        width: 20px;
        height: 20px;
        background-color: #f7941d;
        background-size: 14px 14px;
        border-radius: 3px;
        border: 1px solid #f7941d; }
    .edgeContentArea .checkbox [type=checkbox]:checked + span:before {
      content: '';
      position: absolute;
      top: -1px;
      left: -1px; }
  .edgeContentArea .perceptionClassToggle {
    display: inline-block;
    width: 44px;
    height: 16px;
    background: #138bfa;
    border-radius: 12px;
    z-index: 2;
    transition: all 0.2s ease-in;
    cursor: pointer;
    position: relative; }
    .edgeContentArea .perceptionClassToggle:before {
      content: "";
      display: block;
      height: 20px;
      width: 20px;
      background-color: #e0e0e0;
      border: 2px solid #138bfa;
      border-radius: 50%;
      transition: all 0.2s ease-in;
      position: absolute;
      left: 0;
      top: -2px; }
  .edgeContentArea .perceptionClassToggle-disabled {
    background: #E0E0E0; }
    .edgeContentArea .perceptionClassToggle-disabled:before {
      right: 0;
      left: auto;
      background-color: #bdbdbd;
      border-color: #E0E0E0; }
  .edgeContentArea .deviceArea {
    width: 100%;
    margin-top: 20px;
    background: #ffffff; }
    @media (max-width: 1023px) {
      .edgeContentArea .deviceArea {
        overflow: hidden; } }
    .edgeContentArea .deviceArea .deviceAreaTopbar {
      padding: 20px 30px 20px 10px;
      width: 100%;
      margin: 0;
      white-space: nowrap;
      text-transform: uppercase;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #EDEDED;
      border-radius: 6px 0 0 6px; }
      .edgeContentArea .deviceArea .deviceAreaTopbar li {
        font-weight: 600;
        list-style-type: none;
        font-size: 14px;
        color: #4E4576 !important;
        padding: 0 10px;
        display: flex;
        align-items: center; }
        .edgeContentArea .deviceArea .deviceAreaTopbar li a {
          color: #4E4576 !important; }
      .edgeContentArea .deviceArea .deviceAreaTopbar .deviceId {
        line-height: inherit; }
        .edgeContentArea .deviceArea .deviceAreaTopbar .deviceId a {
          color: #4E4576 !important; }
    .edgeContentArea .deviceArea .deviceAreaContent {
      margin: 0;
      min-height: 600px;
      max-height: 600px;
      overflow: hidden; }
      @media (min-width: 1680px) {
        .edgeContentArea .deviceArea .deviceAreaContent {
          max-height: 700px; } }
      @media (max-width: 480px) {
        .edgeContentArea .deviceArea .deviceAreaContent {
          min-height: 250px;
          max-height: 250px; } }
      .edgeContentArea .deviceArea .deviceAreaContent .mCSB_inside > .mCSB_container {
        margin-right: 20px !important;
        padding-bottom: 40px; }
      .edgeContentArea .deviceArea .deviceAreaContent .eachDeviceContent {
        padding: 20px 0;
        border-bottom: 1px solid #EDEDED; }
        .edgeContentArea .deviceArea .deviceAreaContent .eachDeviceContent ul {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 10px;
          width: 100%; }
          .edgeContentArea .deviceArea .deviceAreaContent .eachDeviceContent ul .deviceClassName {
            font-weight: 600; }
        .edgeContentArea .deviceArea .deviceAreaContent .eachDeviceContent:last-child {
          margin-bottom: 80px; }
        .edgeContentArea .deviceArea .deviceAreaContent .eachDeviceContent:first-child {
          margin-bottom: 0; }
        .edgeContentArea .deviceArea .deviceAreaContent .eachDeviceContent ul.frequency-dropdown {
          width: 180px; }
      .edgeContentArea .deviceArea .deviceAreaContent li {
        font-family: "Euclid Circular B";
        font-weight: 400;
        list-style-type: none;
        font-size: 14px;
        color: #535353;
        padding: 0 10px;
        word-break: break-word;
        display: flex;
        align-items: center;
        word-break: break-word; }
        .edgeContentArea .deviceArea .deviceAreaContent li a {
          color: #535353;
          word-break: break-all; }
        .edgeContentArea .deviceArea .deviceAreaContent li.asettings a {
          font-weight: 500;
          white-space: nowrap; }
        .edgeContentArea .deviceArea .deviceAreaContent li p {
          margin-bottom: 0; }
      .edgeContentArea .deviceArea .deviceAreaContent .deviceName {
        font-style: normal;
        font-weight: 600;
        font-size: 14px;
        line-height: 16px; }
        .edgeContentArea .deviceArea .deviceAreaContent .deviceName a {
          color: #210835 !important; }
        .edgeContentArea .deviceArea .deviceAreaContent .deviceName .customTooltip {
          top: 25px; }
      .edgeContentArea .deviceArea .deviceAreaContent .deviceName a,
      .edgeContentArea .deviceArea .deviceAreaContent .deviceType a,
      .edgeContentArea .deviceArea .deviceAreaContent .workingHours a {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; }
      .edgeContentArea .deviceArea .deviceAreaContent .deviceListId #deviceIdText,
      .edgeContentArea .deviceArea .deviceAreaContent .DeviceID #deviceIdText {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; }
    .edgeContentArea .deviceArea .disabled {
      opacity: 0.5; }
    .edgeContentArea .deviceArea .deviceId {
      width: 20%; }
    .edgeContentArea .deviceArea .deviceName {
      width: 14%; }
    .edgeContentArea .deviceArea .deviceType {
      width: 11%; }
    .edgeContentArea .deviceArea .workingHours {
      width: 15%; }
    .edgeContentArea .deviceArea .deviceDescription {
      width: 15%; }
    .edgeContentArea .deviceArea .deviceLocation {
      width: 11%; }
    .edgeContentArea .deviceArea .deviceOwner {
      width: 6%;
      position: relative; }
      .edgeContentArea .deviceArea .deviceOwner .email {
        max-width: 100px;
        display: inline-block;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden; }
        @media (min-width: 1400px) {
          .edgeContentArea .deviceArea .deviceOwner .email {
            max-width: 160px; } }
        .edgeContentArea .deviceArea .deviceOwner .email .customTooltip {
          top: 25px;
          left: 10px;
          pointer-events: auto; }
        .edgeContentArea .deviceArea .deviceOwner .email:hover .customTooltip {
          visibility: visible;
          opacity: 1; }
      .edgeContentArea .deviceArea .deviceOwner .sharedWithPeopleThumbs {
        cursor: default; }
    .edgeContentArea .deviceArea .deviceAlertEmail {
      width: 12%; }
      .edgeContentArea .deviceArea .deviceAlertEmail a {
        color: #138bfa !important;
        text-decoration: underline; }
      .edgeContentArea .deviceArea .deviceAlertEmail a.alertDesable {
        text-decoration: none;
        background: transparent;
        color: #9b9b9b !important; }
    .edgeContentArea .deviceArea .deviceAlertFrequency {
      width: 15%; }
    .edgeContentArea .deviceArea .deviceSharedWith {
      width: 10%; }
    .edgeContentArea .deviceArea .deviceAction {
      width: 0; }
      .edgeContentArea .deviceArea .deviceAction a:last-child {
        margin: 0; }
      .edgeContentArea .deviceArea .deviceAction .customTooltip {
        top: 25px;
        right: 0; }
    .edgeContentArea .deviceArea .actions a:last-child {
      margin: 0; }
    .edgeContentArea .deviceArea .actions .analyticsSettings img {
      width: 20px; }
    .edgeContentArea .deviceArea .actions .customTooltip {
      top: 25px;
      right: 0; }
  .edgeContentArea .edgeAreaBottomBar {
    height: 50px;
    bottom: 0;
    left: 0;
    right: 0;
    position: sticky;
    z-index: 1000;
    margin: 0;
    width: 100%;
    border-radius: 0;
    background: #FBFAFA;
    display: flex;
    align-items: center;
    justify-content: space-between; }
    .edgeContentArea .edgeAreaBottomBar .label {
      font-style: normal;
      font-weight: 500;
      font-size: 12px;
      line-height: 14px;
      color: #9B9B9B;
      margin-left: 10px;
      width: 55px; }
    .edgeContentArea .edgeAreaBottomBar .selectedOptions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 100%;
      padding: 0 15px;
      width: 100%; }
    .edgeContentArea .edgeAreaBottomBar .footerActions {
      display: flex;
      padding-top: 5px; }
      .edgeContentArea .edgeAreaBottomBar .footerActions .actions {
        display: none;
        width: auto;
        line-height: 36px; }
      .edgeContentArea .edgeAreaBottomBar .footerActions .selectedCount {
        font-size: 12px;
        color: #333333;
        margin: 0; }
      .edgeContentArea .edgeAreaBottomBar .footerActions .selectedCount.actions {
        line-height: 41px;
        margin: 0; }
        @media (max-width: 967px) {
          .edgeContentArea .edgeAreaBottomBar .footerActions .selectedCount.actions {
            line-height: 22px; } }
      .edgeContentArea .edgeAreaBottomBar .footerActions .deletePerception,
      .edgeContentArea .edgeAreaBottomBar .footerActions span.or {
        line-height: 40px;
        color: #969696;
        font-size: 12px;
        margin-left: 20px; }
    .edgeContentArea .edgeAreaBottomBar .deletePerception img {
      width: 14px;
      margin-top: -4px;
      margin-right: 5px; }
    .edgeContentArea .edgeAreaBottomBar .changeStatusText {
      float: right;
      line-height: 26px !important; }
    .edgeContentArea .edgeAreaBottomBar .btnWrapper {
      text-align: center; }
  .edgeContentArea .copyDeviceId, .edgeContentArea .deviceName, .edgeContentArea .deviceType {
    margin-left: 5px; }
    .edgeContentArea .copyDeviceId .tooltiptext, .edgeContentArea .deviceName .tooltiptext, .edgeContentArea .deviceType .tooltiptext {
      left: 5px;
      bottom: 5px;
      right: auto; }
      .edgeContentArea .copyDeviceId .tooltiptext:after, .edgeContentArea .deviceName .tooltiptext:after, .edgeContentArea .deviceType .tooltiptext:after {
        left: 0;
        right: auto;
        transform: rotate(-90deg);
        margin-left: -9px;
        margin-right: 0; }

.sync-status {
  color: black;
  font-weight: 600;
  font-size: 14px;
  background-color: #FFFFFF;
  border: 1px solid #EAEAEA;
  margin-left: auto;
  border-radius: 10px;
  font-family: "Euclid Circular B";
  padding: 0 15px;
  width: 150px;
  height: 36px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  display: none; }
  .sync-status.completed {
    color: green; }
  .sync-status.pending {
    color: #FF8B00; }
  .sync-status.error {
    color: red; }

.sync-btn {
  color: #303030;
  font-weight: 600;
  font-size: 14px;
  background-color: #FFFFFF;
  border: 1px solid #8020CF;
  margin-left: auto;
  border-radius: 10px;
  font-family: "Euclid Circular B";
  padding: 0 15px;
  width: 120px;
  height: 36px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  display: none; }

.cameraContentArea li {
  width: 10%; }

.cameraContentArea .eachDeviceContent {
  width: 100%; }

.cameraContentArea .streamIp {
  width: 15%; }

.cameraContentArea .streamId {
  width: 10%; }

.cameraContentArea .streamName {
  width: 15%; }
  .cameraContentArea .streamName a {
    color: #210835 !important;
    font-weight: 600 !important; }

.cameraContentArea .addModels {
  width: 20%; }

.cameraContentArea .viewLog {
  color: #8020CF !important;
  font-weight: 600; }

.cameraContentArea .asettings {
  width: 15%; }

.cameraContentArea .actions {
  width: 10%;
  justify-content: center; }

.cameraContentArea .deviceArea .deviceAreaContent {
  max-height: 600px;
  overflow: hidden; }
  @media (min-width: 1680px) {
    .cameraContentArea .deviceArea .deviceAreaContent {
      max-height: 660px; } }
  .cameraContentArea .deviceArea .deviceAreaContent .streamName a {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    word-break: break-word; }
  .cameraContentArea .deviceArea .deviceAreaContent .addModels p {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    word-break: break-word; }

.cameraContentArea .deviceArea .deviceClassName {
  width: 25%; }

.cameraContentArea .deviceArea .devicepercId {
  width: 10%; }

.cameraContentArea .deviceArea .deviceAlertSensitivity {
  width: 30%; }

.cameraContentArea .deviceArea .deviceAlertEmail {
  width: 20%; }
  .cameraContentArea .deviceArea .deviceAlertEmail a {
    color: #138bfa !important;
    text-decoration: underline; }

.cameraContentArea .deviceArea .deviceAlertSensitivity a {
  color: #138bfa !important;
  text-decoration: underline; }

.cameraContentArea .deviceArea .deviceAlertSensitivity .selectedClass {
  color: #595959 !important;
  display: inline-block;
  max-width: 350px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  text-decoration: underline;
  margin: 0; }
  @media (min-width: 1680px) {
    .cameraContentArea .deviceArea .deviceAlertSensitivity .selectedClass {
      max-width: 480px; } }

.cameraContentArea .deviceArea .deviceMode {
  width: 15%;
  text-transform: capitalize; }

.cameraContentArea .deviceArea .deviceAction {
  width: 5%;
  justify-content: flex-end;
  gap: 5px;
  padding: 0 !important; }

.breadCrumb + .edgeContentArea {
  margin-top: 0; }

.perceptionGroupList .perceptionGroupArea {
  width: 100%;
  margin-top: 15px; }

.perceptionGroupList .perceptionGroupTopbar {
  background-color: #F6F7FB;
  padding: 10px;
  border-radius: 10px;
  width: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center; }
  .perceptionGroupList .perceptionGroupTopbar li {
    font-weight: 500;
    list-style-type: none;
    font-size: 14px;
    color: #58595B;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center; }
  .perceptionGroupList .perceptionGroupTopbar .perceptionGroupCheckbox {
    width: 3%; }
  .perceptionGroupList .perceptionGroupTopbar .perceptionGroupId {
    width: 20%; }
  .perceptionGroupList .perceptionGroupTopbar .perceptionGroupName {
    width: 67%;
    word-break: break-word;
    justify-content: flex-start; }
    .perceptionGroupList .perceptionGroupTopbar .perceptionGroupName a {
      color: #58595B; }
  .perceptionGroupList .perceptionGroupTopbar .perceptionGroupAction {
    width: 10%;
    position: relative; }

.perceptionGroupList .perceptionGroupContent {
  margin: 0;
  min-height: 400px; }
  .perceptionGroupList .perceptionGroupContent .eachPerceptionGroupContent {
    padding: 10px 0;
    border-bottom: 1px solid #EDEDED;
    min-height: 110px; }
    .perceptionGroupList .perceptionGroupContent .eachPerceptionGroupContent ul {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 5px 10px;
      width: 100%; }
  .perceptionGroupList .perceptionGroupContent li {
    font-weight: 400;
    list-style-type: none;
    font-size: 14px;
    color: #58595B;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center; }
  .perceptionGroupList .perceptionGroupContent a {
    color: #58595B; }
  .perceptionGroupList .perceptionGroupContent .perceptionGroupCheckbox {
    width: 3%; }
  .perceptionGroupList .perceptionGroupContent .perceptionGroupId {
    width: 20%; }
  .perceptionGroupList .perceptionGroupContent .perceptionGroupName {
    width: 67%;
    word-break: break-word;
    justify-content: flex-start; }
  .perceptionGroupList .perceptionGroupContent .perceptionGroupAction {
    width: 10%; }

.perceptionGroupListDetail {
  padding-top: 40px; }
  .perceptionGroupListDetail .perceptionGroupArea {
    width: 100%;
    margin-top: 15px; }
  .perceptionGroupListDetail .perceptionGroupTopbar {
    background-color: #F6F7FB;
    padding: 10px;
    border-radius: 10px;
    width: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center; }
    .perceptionGroupListDetail .perceptionGroupTopbar li {
      font-weight: 500;
      list-style-type: none;
      font-size: 14px;
      color: #58595B;
      padding: 0 10px;
      text-align: center; }
    .perceptionGroupListDetail .perceptionGroupTopbar .info img {
      filter: invert(34%) sepia(9%) saturate(173%) hue-rotate(182deg) brightness(92%) contrast(0);
      width: 16px; }
    .perceptionGroupListDetail .perceptionGroupTopbar .perceptionGroupCheckbox {
      width: 3%; }
    .perceptionGroupListDetail .perceptionGroupTopbar .perceptionGroupId {
      width: 6%; }
    .perceptionGroupListDetail .perceptionGroupTopbar .perceptionGroupName {
      width: 15%;
      word-break: break-word; }
      .perceptionGroupListDetail .perceptionGroupTopbar .perceptionGroupName a {
        color: #58595B; }
    .perceptionGroupListDetail .perceptionGroupTopbar .perceptionGroupDuration {
      width: 12%; }
    .perceptionGroupListDetail .perceptionGroupTopbar .perceptionGroupRepeat {
      width: 10%;
      text-indent: 15px; }
    .perceptionGroupListDetail .perceptionGroupTopbar .perceptionGroupTrack {
      width: 10%;
      text-indent: 15px; }
    .perceptionGroupListDetail .perceptionGroupTopbar .perceptionGroupUniqueCount {
      width: 14%;
      text-indent: 15px; }
    .perceptionGroupListDetail .perceptionGroupTopbar .perceptionGroupEmail {
      width: 13%; }
    .perceptionGroupListDetail .perceptionGroupTopbar .perceptionGroupStatus {
      width: 10%; }
    .perceptionGroupListDetail .perceptionGroupTopbar .perceptionGroupAction {
      width: 8%;
      position: relative; }
  .perceptionGroupListDetail .perceptionGroupContent {
    margin: 0;
    min-height: 400px; }
    .perceptionGroupListDetail .perceptionGroupContent .bootstrap-tagsinput {
      border: 0;
      box-shadow: none;
      margin-bottom: 5px;
      max-width: 100%;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      padding: 0; }
    .perceptionGroupListDetail .perceptionGroupContent .label-info {
      border: 1px solid #BDBDBD;
      padding: 5px 25px 5px 10px;
      border-radius: 20px;
      color: #58595B;
      margin-bottom: 5px;
      margin-right: 0;
      width: 100%;
      position: relative;
      display: flex;
      justify-content: space-between; }
    .perceptionGroupListDetail .perceptionGroupContent .tag_email {
      border: 1px solid #BDBDBD;
      padding: 5px 10px;
      border-radius: 20px;
      color: #58595B;
      width: 100%; }
    .perceptionGroupListDetail .perceptionGroupContent .inner-tag {
      max-width: 130px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis; }
      @media (max-width: 1400px) {
        .perceptionGroupListDetail .perceptionGroupContent .inner-tag {
          max-width: 80px; } }
    .perceptionGroupListDetail .perceptionGroupContent .tag-remove {
      position: absolute;
      right: 0px;
      top: 0px;
      width: 25px;
      height: 34px;
      opacity: 0.6;
      margin-left: 0 !important;
      display: flex;
      justify-content: center;
      align-items: center; }
      .perceptionGroupListDetail .perceptionGroupContent .tag-remove:before, .perceptionGroupListDetail .perceptionGroupContent .tag-remove:after {
        position: absolute;
        left: 8px;
        content: ' ' !important;
        height: 12px;
        width: 1.5px;
        background-color: #333;
        padding: 0 !important; }
      .perceptionGroupListDetail .perceptionGroupContent .tag-remove:before {
        transform: rotate(45deg); }
      .perceptionGroupListDetail .perceptionGroupContent .tag-remove:after {
        transform: rotate(-45deg); }
    .perceptionGroupListDetail .perceptionGroupContent #edit_email {
      border: 1px solid #BDBDBD;
      padding: 5px 10px;
      border-radius: 20px;
      color: #58595B;
      width: 100%; }
    .perceptionGroupListDetail .perceptionGroupContent .eachPerceptionGroupContent {
      padding: 10px 0;
      border-bottom: 1px solid #EDEDED;
      min-height: 110px; }
      .perceptionGroupListDetail .perceptionGroupContent .eachPerceptionGroupContent ul {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 5px 10px;
        width: 100%; }
    .perceptionGroupListDetail .perceptionGroupContent li {
      font-weight: 400;
      list-style-type: none;
      font-size: 14px;
      color: #58595B;
      padding: 0 10px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center; }
      .perceptionGroupListDetail .perceptionGroupContent li .radioWrapper {
        flex-direction: column; }
      .perceptionGroupListDetail .perceptionGroupContent li .repeatYes {
        margin: 0 0 10px; }
      .perceptionGroupListDetail .perceptionGroupContent li .radioBox {
        text-indent: 0; }
    .perceptionGroupListDetail .perceptionGroupContent a {
      color: #58595B; }
    .perceptionGroupListDetail .perceptionGroupContent .cName {
      border: 1px solid #BDBDBD;
      padding: 5px 10px;
      border-radius: 20px;
      width: 100%;
      max-width: 175px;
      text-align: center;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap; }
    .perceptionGroupListDetail .perceptionGroupContent .itemDuration {
      border: 1px solid #BDBDBD;
      padding: 5px 10px;
      border-radius: 20px;
      width: 100%;
      max-width: 70px;
      text-align: center;
      margin-right: 5px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap; }
    .perceptionGroupListDetail .perceptionGroupContent .perceptionGroupCheckbox {
      width: 3%; }
    .perceptionGroupListDetail .perceptionGroupContent .perceptionGroupId {
      width: 6%; }
    .perceptionGroupListDetail .perceptionGroupContent .perceptionGroupName {
      width: 15%;
      word-break: break-word;
      justify-content: center; }
    .perceptionGroupListDetail .perceptionGroupContent .perceptionGroupDuration {
      width: 12%; }
    .perceptionGroupListDetail .perceptionGroupContent .perceptionGroupRepeat {
      width: 10%; }
    .perceptionGroupListDetail .perceptionGroupContent .perceptionGroupTrack {
      width: 10%;
      text-indent: 15px; }
    .perceptionGroupListDetail .perceptionGroupContent .perceptionGroupUniqueCount {
      width: 14%; }
    .perceptionGroupListDetail .perceptionGroupContent .perceptionGroupEmail {
      width: 13%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      flex-direction: column; }
    .perceptionGroupListDetail .perceptionGroupContent .perceptionGroupStatus {
      width: 10%; }
    .perceptionGroupListDetail .perceptionGroupContent .perceptionGroupAction {
      width: 8%; }
      .perceptionGroupListDetail .perceptionGroupContent .perceptionGroupAction a {
        margin: 0 5px; }
  .perceptionGroupListDetail .createTagBtn {
    border: 1px solid #BDBDBD;
    padding: 5px 10px;
    border-radius: 20px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center; }
    .perceptionGroupListDetail .createTagBtn .iconPlus {
      display: inline-block;
      width: 12px;
      height: 12px;
      margin-right: 5px; }
  .perceptionGroupListDetail .tagify__tag {
    --tag-bg: #fff;
    border: 1px solid #BDBDBD;
    padding: 8px 5px 8px 10px;
    border-radius: 20px;
    margin: 0 0 5px;
    overflow: hidden;
    color: #58595B; }
    .perceptionGroupListDetail .tagify__tag div {
      padding: 0;
      margin: 0 10px 0 0; }
  .perceptionGroupListDetail .tagify__tag > div {
    color: #58595B; }
  .perceptionGroupListDetail .tagify__tag__removeBtn {
    font-size: 20px; }
  .perceptionGroupListDetail .tagify__tag {
    width: 100%;
    justify-content: space-between; }
  .perceptionGroupListDetail .tagify {
    border: 0; }
  .perceptionGroupListDetail .tagify__input {
    padding: 0;
    margin: 0;
    display: none; }
  .perceptionGroupListDetail .tagify__tag--editable {
    border: 1px solid #BDBDBD;
    padding: 10px;
    border-radius: 20px;
    box-shadow: none;
    width: 100%;
    max-width: 100%;
    outline: none; }
  .perceptionGroupListDetail .tagify__tag-text {
    max-width: 130px; }
    @media (max-width: 1400px) {
      .perceptionGroupListDetail .tagify__tag-text {
        max-width: 80px; } }
  .perceptionGroupListDetail .customInput {
    border: 1px solid #BDBDBD;
    padding: 5px 10px;
    border-radius: 20px;
    color: #58595B;
    margin-bottom: 5px;
    max-width: 130px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden; }
    @media (max-width: 1400px) {
      .perceptionGroupListDetail .customInput {
        max-width: 80px; } }
  .perceptionGroupListDetail .tagify.customInput {
    border: 0;
    padding: 0;
    max-width: 130px;
    width: 100%; }
    @media (max-width: 1400px) {
      .perceptionGroupListDetail .tagify.customInput {
        max-width: 80px; } }

.tagify__tag > div:before {
  box-shadow: none !important; }

.tagify__tag > div:hover:before {
  background-color: #e9f5f5; }

.createDeviceModal {
  padding-right: 0 !important; }
  .createDeviceModal .modal-dialog {
    max-width: 595px; }
  .createDeviceModal .modal-header {
    padding-left: 30px; }
  .createDeviceModal .modal-title {
    color: #210835;
    font-weight: 600;
    font-size: 16px; }
  .createDeviceModal .modal-body {
    margin: 0 30px;
    padding: 0;
    max-height: 700px;
    width: 95%; }
    @media (max-width: 480px) {
      .createDeviceModal .modal-body {
        margin: 0 auto;
        width: 100%;
        padding: 0 20px; } }
  .createDeviceModal form {
    margin: 0; }
  .createDeviceModal p {
    margin-bottom: 5px; }
  .createDeviceModal strong {
    color: #58595B;
    font-weight: 500;
    font-size: 14px; }
  .createDeviceModal input[type="text"] {
    height: 52px;
    padding-left: 20px;
    padding-right: 20px;
    width: 100% !important;
    margin-bottom: 20px;
    background: #F7F7F7;
    border: 1px solid #E0E0E0;
    border-radius: 5px;
    font-size: 14PX;
    font-weight: 500;
    color: #210835; }
    .createDeviceModal input[type="text"]:focus {
      outline: none;
      box-shadow: none !important;
      border: 1px solid #8020CF;
      color: #210835; }
    .createDeviceModal input[type="text"]:placeholder {
      color: #210835; }
  .createDeviceModal select.perceptionGroup {
    appearance: none;
    -webkit-appearance: none;
    background: #fff url(../img/chevron-down-gray.svg) 95% center no-repeat;
    color: #58595B;
    height: 52px !important; }
  .createDeviceModal .description {
    height: 100px;
    resize: none;
    background: #F7F7F7;
    border: 1px solid #E0E0E0;
    border-radius: 5px;
    width: 100%;
    padding: 10px 25px;
    line-height: normal;
    color: #210835; }
    .createDeviceModal .description:focus {
      outline: none;
      box-shadow: none !important;
      border: 1px solid #8020CF;
      background: #F7F7F7 !important;
      color: #210835; }
  .createDeviceModal .descriptionTextarea {
    border-radius: 5px; }
  .createDeviceModal .customGrayDropdown .itemBtn {
    padding-left: 20px;
    color: #210835; }
  .createDeviceModal .customGrayDropdown .icon {
    margin-left: 5px; }
  .createDeviceModal .customGrayDropdown .customTooltip {
    top: 25px;
    left: -50px;
    font-style: normal;
    font-weight: 400; }
  .createDeviceModal .customGrayDropdown .dropdownItemList {
    background: #FAFBFC; }
    .createDeviceModal .customGrayDropdown .dropdownItemList li a {
      padding-left: 20px; }
    .createDeviceModal .customGrayDropdown .dropdownItemList .mCSB_container {
      min-height: 80px; }
  .createDeviceModal .addDeviceSubmitBtn {
    min-height: 44px; }

.createGroupModal .closeModal {
  top: 15px;
  right: 15px; }

.createGroupModal .modal-dialog {
  max-width: 650px; }

.createGroupModal .modal-title {
  border-radius: 50px;
  font-size: 21px; }

.createGroupModal .modal-body {
  margin: 10px 30px;
  padding: 0; }
  @media (max-width: 480px) {
    .createGroupModal .modal-body {
      margin: 0 auto;
      width: 100%;
      padding: 0 20px; } }

.createGroupModal form {
  margin: 0; }
  .createGroupModal form label {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #210835; }

.createGroupModal .form-control {
  height: 52px;
  padding-left: 25px;
  padding-right: 25px;
  width: 100% !important;
  margin-bottom: 30px;
  background: #F7F7F7;
  border: 1px solid #E0E0E0;
  border-radius: 5px; }
  .createGroupModal .form-control:focus {
    border-color: #E0E0E0;
    box-shadow: none; }

.createGroupModal .form-group {
  position: relative; }

.createGroupModal .cgBtn,
.createGroupModal .saveBtn {
  width: 100%;
  margin: 0 auto;
  height: 42px; }

.createGroupModal label {
  color: #595959;
  font-size: 18px; }

.createGroupModal .selectperception {
  border: dashed 1.5px #ccc;
  width: 100%;
  height: 180px;
  background-color: #ffffff;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer; }
  .createGroupModal .selectperception .note {
    padding-left: 10px; }
  .createGroupModal .selectperception p {
    margin: 0;
    font-size: 18px;
    color: #999999; }

.createGroupModal .perceptionList {
  border: none;
  padding: 0;
  position: absolute;
  top: 35px;
  bottom: 5px;
  left: 10px;
  width: 98%;
  background: #fff; }
  .createGroupModal .perceptionList ul {
    width: 100%;
    height: 138px;
    overflow: hidden;
    margin: 0; }
  .createGroupModal .perceptionList .remove {
    display: inline-block;
    width: 10px;
    cursor: pointer; }
    .createGroupModal .perceptionList .remove img {
      filter: invert(62%) sepia(48%) saturate(5254%) hue-rotate(326deg) brightness(97%) contrast(90%); }
  .createGroupModal .perceptionList li {
    font-size: 16px;
    color: #58595B;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center; }
    .createGroupModal .perceptionList li label {
      margin: 0;
      font-size: 14px;
      color: #58595B; }
    .createGroupModal .perceptionList li .label {
      width: 100%;
      max-width: 480px; }
  .createGroupModal .perceptionList .mCustomScrollBox {
    width: 100%; }
  .createGroupModal .perceptionList .mCSB_container {
    margin-right: 20px !important; }

.createDeviceModal .selectperception {
  border: dashed 2px #ccc;
  width: 100%;
  height: 160px;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer; }
  .createDeviceModal .selectperception .note {
    padding-left: 10px; }
  .createDeviceModal .selectperception p {
    margin: 0;
    font-size: 16px;
    color: #999999; }

.createDeviceModal .form-group {
  position: relative; }
  .createDeviceModal .form-group label {
    color: #58595B; }
  .createDeviceModal .form-group .radio {
    /*color: rgba(88, 89, 91, 0.6);*/
    color: #595959; }
  .createDeviceModal .form-group .selected {
    /*color: rgba(88, 89, 91, 1);*/
    color: #595959; }
  .createDeviceModal .form-group .sdtLabel {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #210835; }
    .createDeviceModal .form-group .sdtLabel small {
      font-size: 12px; }
    @media screen and (max-width: 1400px) {
      .createDeviceModal .form-group .sdtLabel {
        margin-bottom: .2rem; } }
  .createDeviceModal .form-group .mqttBrokerLabel {
    margin: 0;
    pointer-events: none; }
    .createDeviceModal .form-group .mqttBrokerLabel small {
      margin-right: auto;
      margin-left: 5px; }
    .createDeviceModal .form-group .mqttBrokerLabel a {
      font-weight: 400;
      text-decoration: underline; }
      .createDeviceModal .form-group .mqttBrokerLabel a:focus {
        color: #f7941d !important; }

.createDeviceModal .added-mqtt-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px; }
  .createDeviceModal .added-mqtt-item input {
    width: 80% !important;
    margin-bottom: 0 !important; }
  .createDeviceModal .added-mqtt-item img {
    cursor: pointer;
    margin-left: auto; }

.createDeviceModal .radioBtnGroup {
  padding: 15px 0; }

.createDeviceModal .perceptionList {
  border: solid 1px #ccc;
  padding: 20px 0 20px 20px;
  border-radius: 3px;
  position: absolute;
  top: 32px;
  width: 100%;
  background: #fff; }
  .createDeviceModal .perceptionList ul {
    width: 100%;
    height: 118px;
    overflow: hidden;
    margin: 0; }
  .createDeviceModal .perceptionList .remove {
    display: inline-block;
    width: 10px;
    cursor: pointer; }
    .createDeviceModal .perceptionList .remove img {
      filter: invert(62%) sepia(48%) saturate(5254%) hue-rotate(326deg) brightness(97%) contrast(90%); }
  .createDeviceModal .perceptionList li {
    font-size: 16px;
    color: #58595B;
    padding: 10px;
    border-bottom: solid 1px #BDBDBD;
    display: flex;
    justify-content: space-between;
    align-items: center; }
    .createDeviceModal .perceptionList li label {
      margin: 0;
      font-size: 14px;
      color: #58595B; }
  .createDeviceModal .perceptionList .mCustomScrollBox {
    width: 100%; }
  .createDeviceModal .perceptionList .mCSB_container {
    margin-right: 30px !important; }

.perceptionsDataModal .closeModal {
  top: 15px;
  right: 15px; }

.perceptionsDataModal .modal-dialog {
  max-width: 1200px; }

.perceptionsDataModal .modal-title {
  text-align: center;
  font-size: 21px; }

.perceptionsDataModal .modal-body {
  height: 556px; }
  @media (max-width: 967px) {
    .perceptionsDataModal .modal-body {
      width: 100%; } }
  @media (max-width: 1400px) {
    .perceptionsDataModal .modal-body {
      height: 490px; } }

.perceptionsDataModal .back {
  position: absolute;
  left: 15px;
  top: 15px;
  background-color: transparent;
  border: 0;
  z-index: 2;
  padding: 0; }

.perceptionsDataModal .folderContainer ul {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  height: 460px;
  max-height: 460px;
  overflow-y: auto;
  align-content: flex-start;
  margin: 0; }
  @media (max-width: 1400px) {
    .perceptionsDataModal .folderContainer ul {
      height: 410px;
      max-height: 410px; } }

.perceptionsDataModal .folderContainer li {
  display: inline-flex;
  max-width: 350px;
  width: 100%;
  background-color: #F6F6F6;
  padding: 0;
  line-height: 20px;
  box-shadow: 0 0 2px rgba(205, 205, 205, 0.5);
  border-radius: 8px;
  margin: 10px 19px;
  position: relative;
  height: auto; }
  @media (max-width: 480px) {
    .perceptionsDataModal .folderContainer li {
      margin: 10px;
      max-width: 88%; } }
  .perceptionsDataModal .folderContainer li .iconFolder {
    float: left;
    margin-right: 10px;
    width: 29px;
    height: 21px;
    background: url(../img/icon-fill-folder.svg) 0 0 no-repeat; }
  .perceptionsDataModal .folderContainer li a {
    color: #595959;
    font-size: 16px;
    line-height: 24px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    width: 100%;
    padding: 10px 15px; }
    .perceptionsDataModal .folderContainer li a:focus, .perceptionsDataModal .folderContainer li a:active {
      color: #595959 !important; }
  .perceptionsDataModal .folderContainer li.imageChatModel {
    pointer-events: none; }
    .perceptionsDataModal .folderContainer li.imageChatModel a {
      padding-right: 0; }
    .perceptionsDataModal .folderContainer li.imageChatModel i {
      color: #4E4576;
      text-transform: uppercase; }

.perceptionsDataModal .folderContainer .disable {
  opacity: 0.7;
  pointer-events: none; }

.perceptionsDataModal .folderContainer .checkbox {
  position: absolute;
  right: 15px;
  top: 14px;
  z-index: 2;
  margin: 0; }
  .perceptionsDataModal .folderContainer .checkbox input[type='checkbox'] {
    display: none; }
  .perceptionsDataModal .folderContainer .checkbox span {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: solid 1px #565B5F;
    position: relative;
    border-radius: 3px;
    overflow: hidden;
    background-color: #fff; }
    .perceptionsDataModal .folderContainer .checkbox span:before {
      width: 16px;
      height: 16px;
      position: absolute;
      left: -1px;
      top: -1px;
      content: ''; }
  .perceptionsDataModal .folderContainer .checkbox input[type='checkbox']:checked + span {
    border-color: #f7941d; }
  .perceptionsDataModal .folderContainer .checkbox input[type='checkbox']:checked + span:before {
    background: #f7941d; }

.perceptionsDataModal .folderContainer .actionBar {
  background-color: #ECECEC;
  border-radius: 8px;
  padding: 8px 20px;
  justify-content: flex-start;
  align-items: center;
  width: calc(100% - 50px);
  margin: 0 auto;
  display: none; }
  @media (max-width: 480px) {
    .perceptionsDataModal .folderContainer .actionBar {
      width: calc(100% - 0px); } }
  .perceptionsDataModal .folderContainer .actionBar .selectedDataset {
    font-size: 16px;
    color: #595959;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    height: 30px; }
  .perceptionsDataModal .folderContainer .actionBar .cancel,
  .perceptionsDataModal .folderContainer .actionBar .add {
    margin-left: 30px;
    font-size: 16px;
    font-weight: 500;
    color: #f7941d;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center; }
    .perceptionsDataModal .folderContainer .actionBar .cancel:active, .perceptionsDataModal .folderContainer .actionBar .cancel:focus,
    .perceptionsDataModal .folderContainer .actionBar .add:active,
    .perceptionsDataModal .folderContainer .actionBar .add:focus {
      color: #f7941d !important; }
    @media (max-width: 480px) {
      .perceptionsDataModal .folderContainer .actionBar .cancel,
      .perceptionsDataModal .folderContainer .actionBar .add {
        margin-left: 10px; } }
  .perceptionsDataModal .folderContainer .actionBar .iconPlus,
  .perceptionsDataModal .folderContainer .actionBar .iconMinus {
    width: 30px;
    height: 30px;
    border-radius: 100%;
    float: left;
    margin-right: 5px; }

.perceptionsInnerModal .closeModal {
  top: 15px;
  right: 15px; }

.perceptionsInnerModal .modal-dialog {
  max-width: 1200px; }

.perceptionsInnerModal .modal-title {
  font-size: 21px;
  text-align: center; }

.perceptionsInnerModal .modal-body {
  height: 556px; }
  .perceptionsInnerModal .modal-body #modelTypeName {
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    color: #535353;
    padding: 0 30px; }
  @media (max-width: 967px) {
    .perceptionsInnerModal .modal-body {
      width: 100%; } }
  @media (max-width: 1400px) {
    .perceptionsInnerModal .modal-body {
      height: 490px; } }

.perceptionsInnerModal .back {
  position: absolute;
  left: 15px;
  top: 15px;
  background-color: transparent;
  border: 0;
  z-index: 2;
  padding: 0; }

.perceptionsInnerModal .actionBar {
  border-radius: 8px;
  padding: 8px 30px;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 20px;
  display: none; }
  .perceptionsInnerModal .actionBar .selectedDataset {
    font-size: 16px;
    color: #595959;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    height: 30px; }
  .perceptionsInnerModal .actionBar .cancel,
  .perceptionsInnerModal .actionBar .add {
    margin-left: 10px;
    font-size: 16px;
    font-weight: 500;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    float: right; }

.perceptionsInnerModal .folderContainer ul {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  height: 460px;
  max-height: 460px;
  overflow-y: auto;
  align-content: flex-start;
  margin: 0 0 25px; }
  @media (max-width: 1400px) {
    .perceptionsInnerModal .folderContainer ul {
      height: 410px;
      max-height: 410px; } }

.perceptionsInnerModal .folderContainer li {
  display: inline-flex;
  max-width: 30%;
  width: 100%;
  background-color: #F6F6F6;
  padding: 0;
  line-height: 20px;
  box-shadow: 0 0 2px rgba(205, 205, 205, 0.5);
  border-radius: 10px;
  margin: 0 0 25px 25px;
  position: relative;
  height: auto;
  box-shadow: 0px 2px 8px rgba(205, 205, 205, 0.5); }
  @media (max-width: 480px) {
    .perceptionsInnerModal .folderContainer li {
      margin: 10px 0 10px 10px;
      max-width: 95%; } }
  .perceptionsInnerModal .folderContainer li .iconFolder {
    float: left;
    margin-right: 10px;
    width: 29px;
    height: 21px;
    background: url(../img/icon-fill-folder.svg) 0 0 no-repeat; }
  .perceptionsInnerModal .folderContainer li a {
    color: #595959;
    font-size: 16px;
    line-height: 24px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    width: 100%;
    padding: 10px 35px 10px 15px;
    z-index: 0; }
    .perceptionsInnerModal .folderContainer li a:focus, .perceptionsInnerModal .folderContainer li a:active {
      color: #595959 !important; }

.perceptionsInnerModal .folderContainer .unselected {
  opacity: 0.5; }

.perceptionsInnerModal .folderContainer .disable {
  opacity: 0.7;
  pointer-events: none; }

.perceptionsInnerModal .folderContainer .checkbox {
  position: absolute;
  right: 15px;
  top: 16px;
  z-index: 2;
  margin: 0;
  cursor: pointer; }
  .perceptionsInnerModal .folderContainer .checkbox input[type='checkbox'] {
    display: none; }
  .perceptionsInnerModal .folderContainer .checkbox span {
    display: inline-block;
    width: 14px;
    height: 14px;
    position: relative;
    background: url(../img/checkbox-default.svg) 0 0 no-repeat;
    background-size: cover; }
  .perceptionsInnerModal .folderContainer .checkbox input[type='checkbox']:checked + span {
    background: url(../img/checkbox-active.svg) 0 0 no-repeat;
    background-size: cover; }

.perceptionsInnerModal .modelId {
  display: inline-flex;
  margin: -10px 10px -10px -15px;
  padding: 10px;
  width: 60px;
  justify-content: center;
  align-items: center;
  background: #e7e7e7;
  border-radius: 10px 0 0 10px; }

.perceptionGroupList {
  padding-top: 40px; }
  @media (max-width: 967px) {
    .perceptionGroupList {
      padding-top: 20px; } }

.editReportModal .modal-content {
  background-color: #ffffff !important;
  flex-direction: column !important;
  border-radius: 10px;
  margin-top: 0; }

.editReportModal .editReportForm {
  padding: 50px 30px 30px;
  width: 100%; }

.editReportModal label {
  color: #58595B;
  font-weight: 500;
  display: block; }

.editReportModal label.className {
  font-size: 21px; }

.editReportModal .info {
  margin-left: 5px; }

.editReportModal .info img {
  filter: invert(34%) sepia(9%) saturate(173%) hue-rotate(182deg) brightness(92%) contrast(0);
  width: 16px; }

.editReportModal .form-control {
  background: #FFF;
  border: 1px solid #9B9B9B;
  border-radius: 26px;
  height: 52px;
  padding-left: 20px;
  padding-right: 20px;
  width: 100% !important;
  margin-bottom: 30px; }
  .editReportModal .form-control:focus {
    border-color: #9B9B9B; }

.editReportModal .btnApply {
  height: 42px;
  padding: 5px 20px;
  width: 160px;
  margin: 0 auto; }

.radioWrapper {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  height: 30px; }

label.radioBox {
  display: inline-flex;
  font-weight: normal; }

.radioBox {
  position: relative;
  margin: 0;
  padding-left: 25px;
  line-height: initial; }
  .radioBox input[type="radio"] {
    display: none; }
  .radioBox span {
    position: absolute;
    left: 0;
    top: 2px;
    width: 14px;
    height: 14px;
    border-radius: 20px;
    border: solid 1px #f7941d;
    background-color: #ffffff;
    overflow: hidden; }
    .radioBox span:before {
      width: 8px;
      height: 8px;
      position: absolute;
      left: 2px;
      top: 2px;
      background-color: #ffffff;
      content: '';
      border-radius: 20px; }
  .radioBox input[type="radio"]:checked + span:before {
    background-color: #f7941d; }

.repeatYes {
  margin-right: 40px; }

.reportModal .modal-dialog {
  max-width: 1100px; }

.reportModal .modal-content {
  background-color: #ffffff !important;
  flex-direction: column !important;
  border-radius: 10px;
  margin-top: 0; }

.reportModal .report {
  padding: 20px 30px;
  background-color: #ffffff;
  border-radius: 10px;
  width: 100%; }
  .reportModal .report .actionTopBar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    margin-top: 35px; }
    .reportModal .report .actionTopBar .email,
    .reportModal .report .actionTopBar .reportRange {
      display: flex;
      justify-content: center;
      align-items: center; }
    .reportModal .report .actionTopBar label {
      margin: 0 10px 0 0;
      white-space: nowrap;
      color: #58595B; }
    .reportModal .report .actionTopBar .form-control {
      border-radius: 10px; }
      .reportModal .report .actionTopBar .form-control:focus {
        border-color: #ced4da;
        box-shadow: none; }
    .reportModal .report .actionTopBar select.form-control {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      -o-appearance: none;
      background: #ffffff url(../img/chevron-down-gray.svg) 90% center no-repeat;
      width: 150px;
      padding-right: 30px; }
      .reportModal .report .actionTopBar select.form-control:focus {
        color: #58595B; }
  .reportModal .report .topHeader {
    padding: 10px 10px 10px 10px;
    background-color: #F6F7FB;
    border-radius: 10px;
    font-weight: 500;
    font-size: 16px;
    color: #58595B;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row; }
    .reportModal .report .topHeader li {
      padding: 0 10px;
      text-align: center; }
    .reportModal .report .topHeader .deviceName {
      width: 20%; }
    .reportModal .report .topHeader .track {
      width: 20%; }
    .reportModal .report .topHeader .event {
      width: 20%; }
    .reportModal .report .topHeader .dateTime {
      width: 20%; }
    .reportModal .report .topHeader .imgUrl {
      width: 20%; }
  .reportModal .report .reportList {
    color: #58595B;
    margin: 0;
    height: 400px;
    overflow: hidden;
    padding: 10px 0 0; }
    .reportModal .report .reportList .eachContent {
      margin: 0;
      padding: 20px 0;
      border-bottom: solid 1px #dcdcdc; }
      .reportModal .report .reportList .eachContent ul {
        margin: 0;
        padding: 0 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row; }
    .reportModal .report .reportList li {
      padding: 0 10px;
      text-align: center; }
    .reportModal .report .reportList .deviceName {
      width: 20%; }
    .reportModal .report .reportList .track {
      width: 20%; }
    .reportModal .report .reportList .event {
      width: 20%; }
    .reportModal .report .reportList .dateTime {
      width: 20%; }
    .reportModal .report .reportList .imgUrl {
      width: 20%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap; }
      .reportModal .report .reportList .imgUrl a {
        color: #58595B; }

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0; }

/* Firefox */
input[type=number] {
  -moz-appearance: textfield; }

.trackPopup {
  position: absolute;
  width: 70px;
  height: 90px;
  background-color: #fff;
  border-radius: 14px;
  box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.25);
  display: flex;
  justify-content: center;
  visibility: hidden;
  opacity: 0; }
  .trackPopup button {
    border: 0; }
  .trackPopup .trackBtnOk {
    font-size: 10px;
    width: 40px;
    padding: 2px 4px;
    position: absolute;
    bottom: 5px;
    margin: 0 auto; }
  .trackPopup .trackBtn {
    position: absolute;
    width: 15px;
    height: 15px;
    display: block;
    padding: 0; }
    .trackPopup .trackBtn:hover img {
      filter: invert(69%) sepia(23%) saturate(4107%) hue-rotate(346deg) brightness(120%) contrast(95%); }
  .trackPopup .trackBtn.active img {
    filter: invert(69%) sepia(23%) saturate(4107%) hue-rotate(346deg) brightness(120%) contrast(95%); }
  .trackPopup .trackTop {
    top: 8px;
    margin: 0 auto; }
  .trackPopup .trackRight {
    right: 8px;
    top: 25px;
    transform: rotate(90deg); }
  .trackPopup .trackBottom {
    bottom: 35px;
    margin: 0 auto;
    transform: rotate(-180deg); }
  .trackPopup .trackLeft {
    left: 8px;
    top: 25px;
    transform: rotate(-90deg); }

.trackPopup.show {
  opacity: 1;
  visibility: visible; }

.addCemeraModal .modal-dialog {
  max-width: 593px; }

.addCemeraModal select#streamType {
  background: #FFF;
  border: 1px solid #9B9B9B;
  border-radius: 26px;
  height: 52px;
  padding-left: 25px;
  padding-right: 25px;
  width: 100% !important;
  margin-bottom: 30px; }

.addCemeraModal select#streamType {
  appearance: none;
  -webkit-appearance: none;
  background: #fff url(../img/chevron-down-gray.svg) 95% center no-repeat;
  color: #58595B; }
  .addCemeraModal select#streamType option {
    padding: 0 30px; }

.editCemeraModal {
  padding-right: 0 !important; }
  .editCemeraModal .modal-dialog {
    max-width: 593px; }
  .editCemeraModal .modal-content {
    padding-bottom: 0 !important; }
  .editCemeraModal .modal-title {
    font-size: 16px;
    font-weight: 600; }
  .editCemeraModal .modal-body {
    margin: 10px 30px 20px;
    padding: 0; }
    @media (max-width: 480px) {
      .editCemeraModal .modal-body {
        margin: 0 auto;
        width: 100%;
        padding: 0 20px; } }
  .editCemeraModal form {
    margin: 0; }
    .editCemeraModal form label {
      font-weight: 500;
      font-size: 16px;
      line-height: 20px;
      color: #210835; }
  .editCemeraModal .form-control {
    height: 50px;
    padding-left: 20px;
    padding-right: 20px;
    width: 100% !important;
    margin-bottom: 30px;
    background: #F7F7F7;
    border: 1px solid #E0E0E0;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 600;
    color: #210835; }
    .editCemeraModal .form-control:focus {
      border-color: #E0E0E0;
      box-shadow: none;
      background: #F7F7F7; }
  .editCemeraModal .form-group {
    position: relative; }
  .editCemeraModal .cgBtn,
  .editCemeraModal .saveBtn {
    width: 100%;
    margin: 0 auto;
    height: 42px; }
  .editCemeraModal label {
    color: #999999;
    font-size: 18px; }
  .editCemeraModal .selectperception {
    border: dashed 1.5px #ccc;
    width: 100%;
    height: 180px;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer; }
    .editCemeraModal .selectperception .note {
      padding-left: 10px; }
    .editCemeraModal .selectperception p {
      margin: 0;
      font-size: 18px;
      color: #999999; }
  .editCemeraModal .perceptionList {
    border: solid 1px #ccc;
    padding: 20px 0 20px 20px;
    border-radius: 3px;
    position: absolute;
    top: 35px;
    width: 100%;
    background: #fff; }
    .editCemeraModal .perceptionList ul {
      width: 100%;
      height: 138px;
      overflow: hidden;
      margin: 0; }
    .editCemeraModal .perceptionList .remove {
      display: inline-block;
      width: 10px;
      cursor: pointer; }
      .editCemeraModal .perceptionList .remove img {
        filter: invert(62%) sepia(48%) saturate(5254%) hue-rotate(326deg) brightness(97%) contrast(90%); }
    .editCemeraModal .perceptionList li {
      font-size: 16px;
      color: #58595B;
      padding: 10px;
      border-bottom: solid 1px #BDBDBD;
      display: flex;
      justify-content: space-between;
      align-items: center; }
      .editCemeraModal .perceptionList li label {
        margin: 0;
        font-size: 14px;
        color: #58595B; }
    .editCemeraModal .perceptionList .mCustomScrollBox {
      width: 100%; }
    .editCemeraModal .perceptionList .mCSB_container {
      margin-right: 30px !important; }

.setHoursModal .modal-content {
  min-height: 600px !important; }
  .setHoursModal .modal-content .modal-body {
    min-height: 600px !important;
    display: flex;
    flex-direction: column; }
  .setHoursModal .modal-content .modal-footer {
    width: 100%;
    position: relative;
    border-top: 1px solid #eee;
    padding: 15px;
    background: #fff; }
    .setHoursModal .modal-content .modal-footer .purpleBtn {
      width: 50%;
      margin-right: auto;
      margin-left: auto; }

.addPerceptionModal, .setHoursModal {
  padding-right: 0 !important; }
  .addPerceptionModal .closeModal, .setHoursModal .closeModal {
    top: 15px;
    right: 15px; }
  .addPerceptionModal .modal-dialog, .setHoursModal .modal-dialog {
    max-width: 650px; }
  .addPerceptionModal .modal-title, .setHoursModal .modal-title {
    font-size: 16px; }
  .addPerceptionModal .modal-body, .setHoursModal .modal-body {
    margin: 0 30px;
    padding: 0; }
    @media (max-width: 480px) {
      .addPerceptionModal .modal-body, .setHoursModal .modal-body {
        margin: 0 auto;
        width: 100%;
        padding: 0 20px; } }
  .addPerceptionModal .purple-text, .setHoursModal .purple-text {
    padding: 0 10px;
    color: #8020CF;
    cursor: pointer;
    font-weight: 500;
    margin-bottom: 0 !important; }
  .addPerceptionModal form, .setHoursModal form {
    margin: 0; }
  .addPerceptionModal .form-control, .setHoursModal .form-control {
    background: #FFF;
    border: 1px solid #9B9B9B;
    border-radius: 26px;
    height: 52px;
    padding-left: 25px;
    padding-right: 25px;
    width: 100% !important;
    margin-bottom: 30px; }
    .addPerceptionModal .form-control:focus, .setHoursModal .form-control:focus {
      border-color: #9B9B9B;
      box-shadow: none; }
  .addPerceptionModal .form-group, .setHoursModal .form-group {
    position: relative; }
  .addPerceptionModal .cgBtn,
  .addPerceptionModal .saveBtn, .setHoursModal .cgBtn,
  .setHoursModal .saveBtn {
    width: 100%;
    margin: 0 auto;
    height: 42px; }
    .addPerceptionModal .cgBtn:disabled,
    .addPerceptionModal .saveBtn:disabled, .setHoursModal .cgBtn:disabled,
    .setHoursModal .saveBtn:disabled {
      opacity: 1;
      background: #F7F7F7;
      color: #B7B7B7 !important; }
  .addPerceptionModal label, .setHoursModal label {
    color: #303030;
    font-size: 14px;
    font-weight: 600; }
  .addPerceptionModal .selectperception, .setHoursModal .selectperception {
    border: dashed 1.5px #ccc;
    width: 100%;
    height: 180px;
    background-color: #ffffff;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer; }
    .addPerceptionModal .selectperception .note, .setHoursModal .selectperception .note {
      padding-left: 10px; }
    .addPerceptionModal .selectperception p, .setHoursModal .selectperception p {
      margin: 0;
      font-size: 16px;
      font-weight: 600;
      color: #4E4576; }
  .addPerceptionModal .cameraList, .setHoursModal .cameraList {
    border: solid 1px #ccc;
    padding: 10px 0 10px 20px;
    border-radius: 10px;
    width: 100%;
    background: #fff;
    /*li {
			font-size: 16px;
			color: #58595B;
			padding: 10px;
			display: flex;
			justify-content: space-between;
			align-items: center;

			label {
				margin: 0;
				font-size: 14px;
				color: #58595B;
			}

			.label {
				width: 100%;
				max-width: 480px;
			}
		}*/ }
    .addPerceptionModal .cameraList ul, .setHoursModal .cameraList ul {
      width: 100%;
      height: 138px;
      overflow: hidden;
      margin: 0; }
    .addPerceptionModal .cameraList .remove, .setHoursModal .cameraList .remove {
      display: inline-block;
      width: 10px;
      cursor: pointer; }
      .addPerceptionModal .cameraList .remove img, .setHoursModal .cameraList .remove img {
        filter: invert(62%) sepia(48%) saturate(5254%) hue-rotate(326deg) brightness(97%) contrast(90%); }
    .addPerceptionModal .cameraList .mCustomScrollBox, .setHoursModal .cameraList .mCustomScrollBox {
      width: 100%; }
    .addPerceptionModal .cameraList .mCSB_container, .setHoursModal .cameraList .mCSB_container {
      margin-right: 30px !important; }
    .addPerceptionModal .cameraList .checkbox-item, .setHoursModal .cameraList .checkbox-item {
      display: block;
      position: relative;
      padding: 0 0 0 35px !important;
      width: 100%;
      margin-bottom: 15px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 400;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none; }
      .addPerceptionModal .cameraList .checkbox-item input, .setHoursModal .cameraList .checkbox-item input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0; }
        .addPerceptionModal .cameraList .checkbox-item input:checked ~ .checkmark, .setHoursModal .cameraList .checkbox-item input:checked ~ .checkmark {
          background-color: #8020CF; }
          .addPerceptionModal .cameraList .checkbox-item input:checked ~ .checkmark:after, .setHoursModal .cameraList .checkbox-item input:checked ~ .checkmark:after {
            display: block; }
      .addPerceptionModal .cameraList .checkbox-item .checkmark, .setHoursModal .cameraList .checkbox-item .checkmark {
        position: absolute;
        top: 3px;
        left: 10px;
        height: 16px;
        width: 16px;
        background-color: #eee;
        border-radius: 4px; }
        .addPerceptionModal .cameraList .checkbox-item .checkmark:after, .setHoursModal .cameraList .checkbox-item .checkmark:after {
          content: "";
          position: absolute;
          display: none;
          left: 6px;
          top: 3px;
          width: 5px;
          height: 10px;
          border: solid white;
          border-width: 0 2px 2px 0;
          -webkit-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
          transform: rotate(45deg); }
  .addPerceptionModal .perceptionList, .setHoursModal .perceptionList {
    border: none;
    padding: 0;
    border-radius: 3px;
    position: absolute;
    top: 35px;
    bottom: 5px;
    left: 10px;
    width: 98%;
    background: #fff; }
    .addPerceptionModal .perceptionList ul, .setHoursModal .perceptionList ul {
      width: 100%;
      height: 138px;
      overflow: hidden;
      margin: 0; }
    .addPerceptionModal .perceptionList .remove, .setHoursModal .perceptionList .remove {
      display: inline-block;
      width: 10px;
      cursor: pointer; }
      .addPerceptionModal .perceptionList .remove img, .setHoursModal .perceptionList .remove img {
        filter: invert(62%) sepia(48%) saturate(5254%) hue-rotate(326deg) brightness(97%) contrast(90%); }
    .addPerceptionModal .perceptionList li, .setHoursModal .perceptionList li {
      font-size: 16px;
      color: #58595B;
      padding: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center; }
      .addPerceptionModal .perceptionList li label, .setHoursModal .perceptionList li label {
        margin: 0;
        font-size: 14px;
        color: #58595B; }
    .addPerceptionModal .perceptionList .mCustomScrollBox, .setHoursModal .perceptionList .mCustomScrollBox {
      width: 100%; }
    .addPerceptionModal .perceptionList .mCSB_container, .setHoursModal .perceptionList .mCSB_container {
      margin-right: 30px !important; }
  .addPerceptionModal .checkbox, .setHoursModal .checkbox {
    position: relative;
    cursor: pointer;
    margin: 0; }
    .addPerceptionModal .checkbox input[type='checkbox'], .setHoursModal .checkbox input[type='checkbox'] {
      display: none; }
    .addPerceptionModal .checkbox span, .setHoursModal .checkbox span {
      position: relative;
      width: 16px;
      height: 16px;
      display: block;
      background: url(../img/checkbox-default.svg) 0 0 no-repeat; }
    .addPerceptionModal .checkbox input[type='checkbox']:checked + span, .setHoursModal .checkbox input[type='checkbox']:checked + span {
      background: url(../img/checkbox-active.svg) 0 0 no-repeat; }
  .addPerceptionModal .streamSelectionDropdown, .setHoursModal .streamSelectionDropdown {
    width: 100%; }
    .addPerceptionModal .streamSelectionDropdown .itemBtn, .setHoursModal .streamSelectionDropdown .itemBtn {
      border-color: #e0e0e0;
      background: #f7f7f7 url(../img/trangle-down-arrow-lightblue.svg) 97% center no-repeat; }
      .addPerceptionModal .streamSelectionDropdown .itemBtn.up, .setHoursModal .streamSelectionDropdown .itemBtn.up {
        background: #f7f7f7 url(../img/trangle-up-arrow-lightblue.svg) 97% center no-repeat; }
      .addPerceptionModal .streamSelectionDropdown .itemBtn:focus, .setHoursModal .streamSelectionDropdown .itemBtn:focus {
        outline-color: #8020CF !important;
        color: #202223 !important;
        outline-style: solid !important;
        outline-width: 1px !important; }
    .addPerceptionModal .streamSelectionDropdown .itemBtn, .setHoursModal .streamSelectionDropdown .itemBtn {
      height: 50px;
      font-size: 16px;
      max-width: 100%;
      display: block;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      color: #210835;
      font-family: "latomedium";
      font-weight: 400;
      cursor: pointer;
      box-sizing: border-box;
      padding-left: 40px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis; }
      .addPerceptionModal .streamSelectionDropdown .itemBtn:before, .setHoursModal .streamSelectionDropdown .itemBtn:before {
        width: 40px;
        height: 50px;
        background: url(../img/Search.svg) 14px center no-repeat !important;
        position: absolute;
        top: 2px;
        left: 0;
        content: '';
        z-index: 1; }
      .addPerceptionModal .streamSelectionDropdown .itemBtn .searchStreamSelection, .setHoursModal .streamSelectionDropdown .itemBtn .searchStreamSelection {
        padding: 0 !important;
        color: #210835;
        border: none !important; }
        .addPerceptionModal .streamSelectionDropdown .itemBtn .searchStreamSelection:focus, .setHoursModal .streamSelectionDropdown .itemBtn .searchStreamSelection:focus {
          outline: none;
          border: none; }
    .addPerceptionModal .streamSelectionDropdown .dropdownItemList, .setHoursModal .streamSelectionDropdown .dropdownItemList {
      top: 55px;
      border-radius: 0 0 6px 6px;
      background-color: #FFFFFF;
      max-width: 100%;
      max-height: 200px;
      border: 1px solid #EAEAEA;
      box-shadow: 0px 3px 5px rgba(6, 0, 41, 0.2);
      border-radius: 6px; }
      .addPerceptionModal .streamSelectionDropdown .dropdownItemList li, .setHoursModal .streamSelectionDropdown .dropdownItemList li {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 14px;
        color: #303030;
        font-family: "latomedium";
        font-weight: 400;
        cursor: pointer;
        box-sizing: border-box; }
        .addPerceptionModal .streamSelectionDropdown .dropdownItemList li label, .setHoursModal .streamSelectionDropdown .dropdownItemList li label {
          font-size: 14px;
          font-weight: 400;
          color: #303030;
          padding: 10px 12px;
          text-decoration: none !important; }
        .addPerceptionModal .streamSelectionDropdown .dropdownItemList li:hover a,
        .addPerceptionModal .streamSelectionDropdown .dropdownItemList li:hover a:focus, .addPerceptionModal .streamSelectionDropdown .dropdownItemList li.active,
        .addPerceptionModal .streamSelectionDropdown .dropdownItemList li.active a, .setHoursModal .streamSelectionDropdown .dropdownItemList li:hover a,
        .setHoursModal .streamSelectionDropdown .dropdownItemList li:hover a:focus, .setHoursModal .streamSelectionDropdown .dropdownItemList li.active,
        .setHoursModal .streamSelectionDropdown .dropdownItemList li.active a {
          background: #EAEAEA;
          color: #303030 !important; }
    .addPerceptionModal .streamSelectionDropdown input[type="text"], .setHoursModal .streamSelectionDropdown input[type="text"] {
      background: #F7F7F7;
      border: 1px solid #E0E0E0;
      border-radius: 5px;
      color: #4E4576;
      font-size: 14px;
      font-weight: 400;
      height: 50px;
      padding: 0 20px;
      width: 100%; }
  .addPerceptionModal .main-body, .setHoursModal .main-body {
    height: 550px;
    margin-top: 10px; }
    .addPerceptionModal .main-body .model-type, .setHoursModal .main-body .model-type {
      width: 38%;
      margin-bottom: 50px; }
      .addPerceptionModal .main-body .model-type .model-type-list .model-type-item, .setHoursModal .main-body .model-type .model-type-list .model-type-item {
        width: 100%;
        height: 50px;
        background-color: #FFFFFF;
        border: 1px solid #E0E0E0;
        display: flex;
        align-items: center;
        padding: 0 10px;
        color: #210835;
        font-size: 14px;
        font-weight: 400;
        line-height: 18px;
        cursor: pointer; }
        .addPerceptionModal .main-body .model-type .model-type-list .model-type-item.active, .setHoursModal .main-body .model-type .model-type-list .model-type-item.active {
          background-color: #F2E9FA;
          font-weight: 600; }
        .addPerceptionModal .main-body .model-type .model-type-list .model-type-item:nth-child(1), .setHoursModal .main-body .model-type .model-type-list .model-type-item:nth-child(1) {
          border-top-left-radius: 10px;
          border-top-right-radius: 10px;
          border-bottom: none; }
        .addPerceptionModal .main-body .model-type .model-type-list .model-type-item:nth-child(2), .setHoursModal .main-body .model-type .model-type-list .model-type-item:nth-child(2) {
          border-bottom: none; }
        .addPerceptionModal .main-body .model-type .model-type-list .model-type-item:nth-child(3), .setHoursModal .main-body .model-type .model-type-list .model-type-item:nth-child(3) {
          border-bottom: none; }
        .addPerceptionModal .main-body .model-type .model-type-list .model-type-item:nth-child(5), .setHoursModal .main-body .model-type .model-type-list .model-type-item:nth-child(5) {
          border-bottom-left-radius: 10px;
          border-bottom-right-radius: 10px;
          border-top: none;
          box-shadow: 0px 2px 4px rgba(10, 46, 96, 0.1); }
    .addPerceptionModal .main-body .model-select, .setHoursModal .main-body .model-select {
      width: 60%;
      margin-left: auto; }
      .addPerceptionModal .main-body .model-select .itemBtn:before, .setHoursModal .main-body .model-select .itemBtn:before {
        width: 40px;
        height: 50px;
        background: url(../img/Search.svg) 14px center no-repeat !important;
        position: absolute;
        top: -5px;
        left: -10px;
        content: '';
        z-index: 1; }
      .addPerceptionModal .main-body .model-select input[type='text'].searchClass, .setHoursModal .main-body .model-select input[type='text'].searchClass {
        position: absolute;
        top: 0;
        left: 0;
        border: none;
        cursor: pointer;
        color: #595959;
        font-size: 14px;
        font-weight: 400;
        height: 38px;
        padding-left: 25px;
        padding-right: 30px;
        background: transparent;
        max-width: 100%;
        width: 100%;
        border-radius: 5px; }
        .addPerceptionModal .main-body .model-select input[type='text'].searchClass:focus, .setHoursModal .main-body .model-select input[type='text'].searchClass:focus {
          outline-width: 1px;
          box-shadow: none;
          cursor: auto; }
      .addPerceptionModal .main-body .model-select .checkbox-item, .setHoursModal .main-body .model-select .checkbox-item {
        display: block;
        position: relative;
        padding-left: 35px;
        margin-bottom: 15px;
        cursor: pointer;
        font-size: 14px;
        font-weight: 400;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none; }
        .addPerceptionModal .main-body .model-select .checkbox-item input, .setHoursModal .main-body .model-select .checkbox-item input {
          position: absolute;
          opacity: 0;
          cursor: pointer;
          height: 0;
          width: 0; }
          .addPerceptionModal .main-body .model-select .checkbox-item input:checked ~ .checkmark, .setHoursModal .main-body .model-select .checkbox-item input:checked ~ .checkmark {
            background-color: #8020CF; }
            .addPerceptionModal .main-body .model-select .checkbox-item input:checked ~ .checkmark:after, .setHoursModal .main-body .model-select .checkbox-item input:checked ~ .checkmark:after {
              display: block; }
        .addPerceptionModal .main-body .model-select .checkbox-item .checkmark, .setHoursModal .main-body .model-select .checkbox-item .checkmark {
          position: absolute;
          top: 3px;
          left: 10px;
          height: 16px;
          width: 16px;
          background-color: #eee;
          border-radius: 4px; }
          .addPerceptionModal .main-body .model-select .checkbox-item .checkmark:after, .setHoursModal .main-body .model-select .checkbox-item .checkmark:after {
            content: "";
            position: absolute;
            display: none;
            left: 6px;
            top: 3px;
            width: 5px;
            height: 10px;
            border: solid white;
            border-width: 0 3px 3px 0;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg); }
    .addPerceptionModal .main-body .selected-models-list, .setHoursModal .main-body .selected-models-list {
      width: 100%;
      height: 150px;
      padding: 10px;
      border: 2px dashed #B7B7B7;
      overflow-y: scroll;
      margin-bottom: 10px;
      position: inherit !important; }
      .addPerceptionModal .main-body .selected-models-list .customTooltipHover, .setHoursModal .main-body .selected-models-list .customTooltipHover {
        position: inherit; }
      .addPerceptionModal .main-body .selected-models-list::-webkit-scrollbar, .setHoursModal .main-body .selected-models-list::-webkit-scrollbar {
        display: none; }
      .addPerceptionModal .main-body .selected-models-list .selected-model-item, .setHoursModal .main-body .selected-models-list .selected-model-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 15px;
        font-size: 14px;
        line-height: 13px; }
        .addPerceptionModal .main-body .selected-models-list .selected-model-item img, .setHoursModal .main-body .selected-models-list .selected-model-item img {
          cursor: pointer; }

.deviceTypeList {
  height: 120px;
  padding: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.32);
  border-bottom: 1px solid rgba(0, 0, 0, 0.32); }
  .deviceTypeList .label {
    display: block; }
  .deviceTypeList li {
    display: block;
    /*border-bottom: solid 1px #DCDCDC;*/
    /*padding-left: 10px;*/ }
    .deviceTypeList li label {
      display: block;
      margin: 0;
      color: #58595B;
      padding: 6px 0; }
  .deviceTypeList .mCSB_inside > .mCSB_container {
    margin-right: 30px !important; }
  .deviceTypeList .radio {
    position: relative;
    padding-left: 40px;
    cursor: pointer;
    font-weight: 400;
    font-size: 14px; }
    .deviceTypeList .radio input[type='radio'] {
      display: none; }
    .deviceTypeList .radio span {
      width: 13px;
      height: 13px;
      position: absolute;
      left: 0;
      top: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      /*box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.05);*/
      background: url(../img/checkbox-default.svg) 0 0 no-repeat;
      background-size: cover; }
    .deviceTypeList .radio input[type='radio']:checked + span {
      background: url(../img/checkbox-active.svg) 0 0 no-repeat;
      background-size: cover; }

@media screen and (max-width: 1400px) {
  .createDeviceModal .modal-dialog {
    margin: 0.75rem auto; } }

@media (max-width: 1400px) {
  .createDeviceModal .modal-body {
    overflow: hidden;
    max-height: 540px; } }

.createDeviceModal .mCSB_container {
  padding-right: 20px; }

.createDeviceModal .modal-body.mCustomScrollbar {
  margin-right: 15px; }

.createDeviceModal .hint {
  margin: 0 0 0 20px;
  display: block;
  color: #979797;
  font-size: 12px; }

.createDeviceModal .nav-tabs {
  border: none;
  margin-bottom: -1px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.32); }

.createDeviceModal .nav-tabs .nav-link {
  color: #58595B;
  font-weight: 500;
  font-size: 12px;
  padding: 0;
  border: 0;
  border-bottom: solid 1px transparent;
  font-weight: 400;
  transition: all 0.2s ease-in;
  width: 100px;
  margin-right: 20px;
  height: 36px;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center; }

.createDeviceModal .nav-tabs .nav-link.active,
.createDeviceModal .nav-tabs .nav-link:focus {
  font-size: 14px;
  border-bottom: solid 1px #4f4f4f;
  color: #58595B !important;
  font-weight: 500; }

.deviceRenamePopup {
  padding-right: 0 !important; }
  .deviceRenamePopup .hint {
    margin: -30px 0 20px 25px;
    display: block;
    color: #979797;
    font-size: 12px; }
  .deviceRenamePopup .modal-dialog {
    max-width: 595px; }
  .deviceRenamePopup .label {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #210835; }
  .deviceRenamePopup .added-mqtt-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px; }
    .deviceRenamePopup .added-mqtt-item input {
      width: 80% !important;
      margin-bottom: 0 !important; }
    .deviceRenamePopup .added-mqtt-item img {
      cursor: pointer;
      margin-left: auto; }
  .deviceRenamePopup .folderNameCreateWrapper {
    margin-top: 0;
    margin-bottom: 0; }
    .deviceRenamePopup .folderNameCreateWrapper input[type="text"] {
      margin-bottom: 20px; }
    .deviceRenamePopup .folderNameCreateWrapper textarea {
      height: 80px; }
      @media (min-width: 1500px) {
        .deviceRenamePopup .folderNameCreateWrapper textarea {
          height: 100px; } }
  .deviceRenamePopup #rename_form {
    margin: 0; }
  .deviceRenamePopup .mqttBrokerLabel {
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none; }
    .deviceRenamePopup .mqttBrokerLabel small {
      margin-right: auto;
      margin-left: 5px; }
  .deviceRenamePopup .form-group {
    position: relative; }
  .deviceRenamePopup .imgNameCreateBtn {
    width: 100%; }

.versionLink {
  font-weight: normal;
  text-decoration: underline;
  color: #4f4f4f; }
  .versionLink:hover, .versionLink:focus {
    color: #4f4f4f !important; }

.locationDropdown .dropdown-toggle {
  background: #ffffff url(../img/down-arrow-gray.svg) 92% center no-repeat;
  background-size: 20px;
  border-radius: 10px;
  border: solid 1px #DBDDE0;
  border-radius: 30px;
  padding: 10px 40px 10px 20px;
  color: #58595B;
  cursor: pointer; }
  .locationDropdown .dropdown-toggle:after {
    display: none; }

.locationDropdown .locationLst {
  min-height: 60px;
  max-height: 130px;
  overflow: hidden;
  margin: 0; }

.locationDropdown .filterBtns {
  margin-top: 10px;
  padding: 10px 10px 5px;
  border-top: solid 1px #EDEDED;
  display: flex;
  justify-content: center; }
  .locationDropdown .filterBtns button {
    font-size: 12px;
    margin: 0 4px;
    padding: 2px 10px;
    box-shadow: none; }

.locationDropdown .checkbox {
  margin: 0;
  padding: 4px 10px 4px 30px;
  width: 100%;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  display: block;
  color: #58595B;
  position: relative; }
  .locationDropdown .checkbox input[type="checkbox"] {
    display: none; }
  .locationDropdown .checkbox span {
    width: 12px;
    height: 12px;
    display: inline-flex;
    position: absolute;
    top: 10px;
    left: 10px;
    background: url(../img/checkbox-default.svg) 0 0 no-repeat;
    background-size: cover;
    border: none; }
    .locationDropdown .checkbox span:before {
      display: none; }
  .locationDropdown .checkbox input[type="checkbox"]:checked + span {
    background: url(../img/checkbox-active.svg) 0 0 no-repeat;
    background-size: cover; }

.locationDropdown.open .dropdown-toggle {
  background: #ffffff url(../img/up-arrow-gray.svg) 92% center no-repeat;
  background-size: 20px; }

.alphabetFilter {
  border: solid 1px #DBDDE0;
  border-radius: 10px;
  display: flex;
  margin-left: 15px;
  position: relative;
  overflow: hidden; }
  .alphabetFilter button {
    padding: 10px 15px;
    background: #ffffff;
    display: flex;
    justify: center;
    align-items: center;
    border: 0;
    color: #58595B;
    transition: all 0.2s ease-in; }
    .alphabetFilter button:hover {
      background: #f7941d;
      color: #ffffff; }
    .alphabetFilter button.active {
      background: #f7941d;
      color: #ffffff; }
  .alphabetFilter .devider {
    width: 1px;
    background: #DBDDE0;
    height: 44px; }

.copyDeviceId, .deviceName, .deviceType {
  position: relative;
  width: 20px; }
  .copyDeviceId img, .deviceName img, .deviceType img {
    height: 15px;
    width: 15px;
    max-width: 15px !important; }
  .copyDeviceId .tooltiptext, .deviceName .tooltiptext, .deviceType .tooltiptext {
    white-space: nowrap;
    visibility: hidden;
    background-color: #fff;
    color: #58595B;
    text-align: center;
    border-radius: 30px;
    padding: 5px 10px;
    position: absolute;
    z-index: 1;
    bottom: -8px;
    right: 30px;
    margin-left: 0;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 12px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.197662); }
    .copyDeviceId .tooltiptext:after, .deviceName .tooltiptext:after, .deviceType .tooltiptext:after {
      content: "";
      position: absolute;
      top: 28%;
      right: 0;
      margin-right: -9px;
      background: url(../img/triangle-up.png) 0 0 no-repeat;
      background-size: contain;
      width: 20px;
      height: 20px;
      transform: rotate(90deg);
      display: none;
      /*border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;*/ }
  .copyDeviceId:hover .tooltiptext, .deviceName:hover .tooltiptext, .deviceType:hover .tooltiptext {
    visibility: visible;
    opacity: 1; }

.copyDeviceId {
  margin-left: 0;
  margin-right: 5px; }

.tableFilterBtn {
  border: 0;
  padding: 0;
  color: #4E4576;
  cursor: pointer;
  padding: 0 25px 0 0 !important;
  width: auto !important;
  position: relative;
  white-space: nowrap;
  display: inline-block; }
  .tableFilterBtn:hover, .tableFilterBtn:focus {
    color: #4E4576 !important; }
  .tableFilterBtn:after {
    width: 25px;
    height: 20px;
    position: absolute;
    top: 0;
    right: 0;
    content: '';
    background: url(../img/down-arrow-light-gray.svg) right center no-repeat;
    background-size: 12px; }
  .tableFilterBtn.up:after {
    background: url(../img/up-arrow-light-gray.svg) right center no-repeat;
    background-size: 12px !important; }

/*.innerContainer {
	position: relative;
	z-index: 1;
	@media (max-width: 1200px) {
		overflow-x: scroll;
		padding-bottom: 20px;
	}

	.hzScrollContainer {
		width: 100%;
		@media (max-width: 1200px){
			width: 1200px;
		}
	}
}*/
.deviceAction .alertDesable,
.actions .alertDesable {
  background: transparent;
  border: none;
  cursor: default; }
  .deviceAction .alertDesable img,
  .actions .alertDesable img {
    opacity: 0.5; }
  .deviceAction .alertDesable .alertTooltip,
  .actions .alertDesable .alertTooltip {
    right: 10px;
    top: 25px;
    pointer-events: none; }

.analyticsSettingsBtn.alertDesable,
.addCameraBtn.alertDesable,
.createDeviceBtn.alertDesable {
  background: #CBCBCB;
  color: #ffffff !important;
  box-shadow: none; }
  .analyticsSettingsBtn.alertDesable .alertTooltip,
  .addCameraBtn.alertDesable .alertTooltip,
  .createDeviceBtn.alertDesable .alertTooltip {
    top: 45px;
    right: 0px;
    left: auto; }

.addpercaptionBtn.alertDesable,
.addCameraBtn.alertDesable {
  color: #b7b7b7 !important;
  background: #f6f6f6;
  box-shadow: none;
  opacity: 1; }
  .addpercaptionBtn.alertDesable img,
  .addCameraBtn.alertDesable img {
    filter: invert(100%) sepia(42%) saturate(44%) hue-rotate(257deg) brightness(0) contrast(0); }
  .addpercaptionBtn.alertDesable .alertTooltip,
  .addCameraBtn.alertDesable .alertTooltip {
    top: 45px;
    left: 0;
    right: auto; }

.deviceAreaContent .mCSB_container {
  min-height: 100px; }

.devicecopyId .deviceId {
  padding-right: 20px !important;
  position: relative;
  flex-wrap: wrap; }

.devicecopyId .copyDeviceId {
  position: absolute;
  right: 0;
  bottom: 5px; }

.mqttBroker,
.mqttBrokeredit {
  padding-right: 0 !important; }
  .mqttBroker input.error,
  .mqttBroker .enableTLSDropdown.error,
  .mqttBrokeredit input.error,
  .mqttBrokeredit .enableTLSDropdown.error {
    border-color: #EB5857; }
  .mqttBroker .modal-dialog,
  .mqttBrokeredit .modal-dialog {
    max-width: 595px; }
  .mqttBroker .modal-body,
  .mqttBrokeredit .modal-body {
    margin: 0 30px;
    padding: 0; }
  .mqttBroker .modal-title,
  .mqttBrokeredit .modal-title {
    text-align: center; }
  .mqttBroker .backtoModal,
  .mqttBrokeredit .backtoModal {
    background: transparent;
    position: absolute;
    border: 0;
    width: 20px;
    height: 20px;
    display: inline-flex;
    padding: 0;
    top: 15px;
    left: 20px;
    opacity: 0.7;
    height: 14px; }
  .mqttBroker .brokerForm label,
  .mqttBrokeredit .brokerForm label {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #210835; }
  .mqttBroker .brokerForm .cb-container,
  .mqttBrokeredit .brokerForm .cb-container {
    padding-left: 30px;
    font-size: 14px;
    font-weight: 400; }
  .mqttBroker .brokerForm .form-control,
  .mqttBrokeredit .brokerForm .form-control {
    height: 52px;
    padding-left: 20px;
    padding-right: 20px;
    width: 100% !important;
    margin-bottom: 20px;
    background: #F7F7F7;
    border: 1px solid #E0E0E0;
    border-radius: 5px; }
  .mqttBroker .enableTLSDropdown,
  .mqttBrokeredit .enableTLSDropdown {
    appearance: none;
    -webkit-appearance: none;
    background: #fff url(../img/chevron-down-gray.svg) 98% center no-repeat;
    color: #58595B;
    height: auto !important; }
  .mqttBroker .mqttBrokerLabel,
  .mqttBrokeredit .mqttBrokerLabel {
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center; }
    .mqttBroker .mqttBrokerLabel small,
    .mqttBrokeredit .mqttBrokerLabel small {
      margin-right: auto;
      margin-left: 5px; }
    .mqttBroker .mqttBrokerLabel a,
    .mqttBrokeredit .mqttBrokerLabel a {
      font-weight: 400;
      text-decoration: underline; }
      .mqttBroker .mqttBrokerLabel a:focus,
      .mqttBrokeredit .mqttBrokerLabel a:focus {
        color: #f7941d !important; }
  .mqttBroker .cb-container,
  .mqttBrokeredit .cb-container {
    padding-left: 30px; }
    .mqttBroker .cb-container .checkmark,
    .mqttBrokeredit .cb-container .checkmark {
      width: 20px;
      height: 20px; }
      .mqttBroker .cb-container .checkmark:after,
      .mqttBrokeredit .cb-container .checkmark:after {
        top: 2px;
        left: 2px;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: #8020CF;
        border: 2px solid white; }

.testWrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px; }
  .testWrapper .testMessage {
    margin-left: 15px;
    display: flex;
    flex-wrap: wrap;
    width: 66%; }
  .testWrapper .success,
  .testWrapper .error {
    font-size: 14px;
    font-style: italic; }
  .testWrapper .success {
    color: #49C02B; }
  .testWrapper .error {
    color: #EB5857; }
  .testWrapper .mqtttestbtn {
    width: 100px; }

.mqtttestbtn {
  background: rgba(19, 139, 250, 0.14);
  border-radius: 15px;
  height: 30px;
  border: 0;
  color: #138bfa;
  display: flex;
  justify-content: center;
  align-items: center; }
  .mqtttestbtn img {
    margin-left: 5px; }

.chooseOption {
  pointer-events: auto; }
  .chooseOption label {
    font-weight: normal;
    position: relative;
    top: 0;
    left: 0;
    padding-left: 20px;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    color: #4F4F4F;
    font-size: 14px;
    margin: 0;
    cursor: pointer; }
    .chooseOption label span {
      position: absolute;
      left: 0;
      width: 14px;
      height: 14px;
      border: solid 1px #f7941d;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 20px; }
      .chooseOption label span:before {
        width: 8px;
        height: 8px;
        display: block;
        border-radius: 20px;
        background: #f7941d;
        position: absolute;
        content: '';
        opacity: 0; }
    .chooseOption label input {
      display: none; }
    .chooseOption label input[type="radio"]:checked + span:before {
      opacity: 1; }
  .chooseOption label.yes {
    margin-right: 20px; }

.winewBtn {
  font-size: 14px;
  color: #138bfa;
  background: rgba(19, 139, 250, 0.14);
  border-radius: 9px;
  border: 0;
  height: 29px;
  padding: 0 10px;
  cursor: pointer; }

.versionHistoryModal .mCSB_inside > .mCSB_container {
  margin-right: 30px !important; }

.versionHistoryModal .modal-header {
  padding: 20px 30px 0; }

.versionHistoryModal .modal-body {
  padding: 20px 20px 20px 30px; }

.versionHistoryModal .modal-title {
  text-align: left;
  border-bottom: 1px solid #EDEDED;
  color: #595959;
  text-transform: capitalize;
  padding-bottom: 10px; }

.versionHistoryModal .history {
  min-height: 400px;
  max-height: 450px;
  overflow: hidden;
  font-size: 14px;
  color: #58595B;
  margin: 0; }
  .versionHistoryModal .history p {
    margin-bottom: 10px;
    position: relative;
    padding-left: 15px; }
    .versionHistoryModal .history p:before {
      content: '-';
      position: absolute;
      left: 0; }
  .versionHistoryModal .history li {
    margin-bottom: 15px;
    border-bottom: 1px solid #EDEDED;
    padding-bottom: 5px; }

.versionHistoryModal .head {
  color: #138bfa;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  font-weight: normal;
  font-size: 14px; }
  .versionHistoryModal .head .version {
    font-weight: 500; }
  .versionHistoryModal .head .date {
    font-weight: 400;
    color: rgba(19, 139, 250, 0.6); }

.deviceAlertSensitivityModal .modal-dialog {
  max-width: 510px; }

.deviceAlertSensitivityModal .modal-body {
  width: 100%;
  padding: 15px 15px 15px 30px; }

.deviceAlertSensitivityModal .btnWrapper {
  display: flex;
  justify-content: center;
  margin-top: 20px; }

.deviceAlertSensitivityModal .saveAlertBtn {
  width: 135px;
  height: 44px; }

.deviceAlertSensitivityModal .modal-header {
  padding-left: 30px;
  padding-top: 25px; }

.deviceAlertSensitivityModal .modal-title {
  color: #58595B;
  text-align: left;
  text-transform: capitalize; }

.deviceAlertSensitivityModal .overflowContainer {
  min-height: 300px;
  max-height: 400px;
  overflow: hidden; }

.deviceAlertSensitivityModal .timer {
  width: 90px;
  height: 34px;
  color: #9B9B9B;
  text-align: center;
  border-radius: 5px;
  border: 1px solid #9B9B9B; }

.deviceAlertSensitivityModal .group {
  display: none;
  margin-top: 10px;
  margin-bottom: 20px; }

.deviceAlertSensitivityModal .mCSB_container {
  padding: 1px 1px 120px 1px; }

.deviceAlertSensitivityModal .info {
  margin-left: 5px;
  width: 20px;
  height: 20px;
  display: inline-block; }
  .deviceAlertSensitivityModal .info .customTooltip {
    top: 25px;
    left: -20px;
    text-transform: none; }

.deviceAlertSensitivityModal .form-group {
  position: relative; }

.deviceAlertSensitivityModal .alert {
  border-color: #EB5857;
  color: #EB5857;
  padding: 0; }

.deviceAlertSensitivityModal .error {
  color: #EB5857;
  font-size: 12px;
  font-style: italic;
  display: none;
  position: absolute;
  right: 0;
  top: 0; }

.deviceAlertSensitivityModal .checkbox {
  width: 100%;
  margin: 0;
  font-weight: normal;
  font-size: 15px;
  color: #595959;
  cursor: pointer;
  display: flex;
  justify-content: flex-start;
  align-items: center; }
  .deviceAlertSensitivityModal .checkbox input[type='checkbox'] {
    display: none; }
  .deviceAlertSensitivityModal .checkbox .checkboxSpan {
    /*border: 2px solid #797878;*/
    border: none;
    width: 16px;
    height: 15px;
    border-radius: 3px;
    margin-right: 10px;
    background: #ffffff;
    margin-top: -2px;
    background: url(../img/checkbox-default.svg) 0 0 no-repeat; }
  .deviceAlertSensitivityModal .checkbox input[type='checkbox']:checked + .checkboxSpan {
    background: url(../img/checkbox-active.svg) 0 0 no-repeat;
    border: 0; }

.deviceAlertSensitivityModal .customDropdown {
  width: 90px;
  margin-top: 5px; }
  .deviceAlertSensitivityModal .customDropdown .itemBtn {
    padding-left: 15px;
    height: 32px;
    background-size: 20px;
    background-position: 90% center; }
  .deviceAlertSensitivityModal .customDropdown .dropdownItemList {
    max-height: 120px;
    padding: 5px 8px 5px 5px !important; }
    .deviceAlertSensitivityModal .customDropdown .dropdownItemList li a {
      padding: 4px 10px; }
      .deviceAlertSensitivityModal .customDropdown .dropdownItemList li a:hover, .deviceAlertSensitivityModal .customDropdown .dropdownItemList li a:focus {
        background: rgba(19, 139, 250, 0.1);
        color: #138bfa !important; }
    .deviceAlertSensitivityModal .customDropdown .dropdownItemList .mCSB_container {
      padding: 1px; }

.deviceAlertSensitivityModal .dropdownBtn {
  background: transparent;
  border-radius: 5px;
  width: 76px;
  height: 35px;
  font-size: 14px;
  font-weight: 400;
  color: #595959;
  padding: 10px;
  border: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s ease-in; }
  .deviceAlertSensitivityModal .dropdownBtn.active, .deviceAlertSensitivityModal .dropdownBtn:hover {
    background: rgba(19, 139, 250, 0.13);
    color: #138bfa; }

.deviceAlertSensitivityModal .minutes {
  margin-left: 10px; }

.deviceAlertSensitivityModal .secondsDropdown,
.deviceAlertSensitivityModal .minutesDropdown {
  margin-top: 10px;
  display: inline-block;
  font-size: 13px;
  color: #595959; }
  .deviceAlertSensitivityModal .secondsDropdown.active,
  .deviceAlertSensitivityModal .minutesDropdown.active {
    display: inline-block; }

.deviceAlertSensitivityModal .colon {
  display: inline-flex;
  margin: 0 10px;
  height: 32px;
  align-items: center; }

.btnAlertEmail {
  background: rgba(19, 139, 250, 0.13);
  border-radius: 5px;
  width: 142px;
  height: 45px;
  font-size: 16px;
  font-weight: 500;
  color: #138bfa;
  padding: 10px;
  border: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center; }
  .btnAlertEmail .icon {
    margin-right: 10px; }

.alertsEmailModal .modal-header {
  padding-left: 30px; }

.alertsEmailModal .modal-title {
  color: #58595B;
  text-align: left;
  text-transform: capitalize; }

input[type="time"]::-webkit-calendar-picker-indicator {
  background: none; }

input[type="time"]::-moz-calendar-picker-indicator {
  background: none; }

input[type="time"] {
  -webkit-appearance: none;
  clip-path: inset(0 0 0 0);
  outline: none;
  outline: 0; }

.alertsEmailModal .all-mail {
  max-height: 300px; }

.alertsEmailModal .cancel-email {
  width: 15px !important;
  height: 15px !important; }

.alertsEmailModal .infoContent {
  width: 92%; }

.alertsEmailModal .eachEmail {
  margin-bottom: 25px; }

.afDropdown .mode {
  font-size: 14px;
  color: #4F4F4F;
  padding-bottom: 3px;
  background-position: 95% center;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 160px;
  display: inline-block; }

.afDropdown.up .mode {
  background-position: 95% center; }

.afDropdown li:hover {
  transition: all 0.2s ease-in; }
  .afDropdown li:hover:hover {
    background: rgba(19, 139, 250, 0.1); }
    .afDropdown li:hover:hover .checkbox {
      color: #138bfa; }
    .afDropdown li:hover:hover .checkboxSpan {
      background: url(../img/checkbox-blue-border.svg) 0 0 no-repeat; }

.afDropdown li.active {
  background-color: rgba(19, 139, 250, 0.04); }
  .afDropdown li.active label {
    color: #138bfa; }

.afDropdown .checkbox {
  width: 100%;
  margin: 0;
  font-weight: normal;
  font-size: 14px;
  color: #4F4F4F;
  padding: 10px;
  cursor: pointer;
  display: flex;
  justify-content: flex-start;
  align-items: center; }
  .afDropdown .checkbox input[type='checkbox'] {
    display: none; }
  .afDropdown .checkbox .checkboxSpan {
    /*border: 2px solid #797878;*/
    border: none;
    width: 16px;
    height: 15px;
    border-radius: 3px;
    margin-right: 10px;
    background: #ffffff;
    margin-top: -2px;
    background: url(../img/checkbox-default.svg) 0 0 no-repeat; }
    .afDropdown .checkbox .checkboxSpan:before {
      display: none; }
  .afDropdown .checkbox input[type='checkbox']:checked + .checkboxSpan {
    background: url(../img/checkbox-active.svg) 0 0 no-repeat;
    border: 0; }

.selectClassSearch {
  background: #FFFFFF;
  border: 1px solid #D8D8D8;
  border-radius: 5px;
  width: 170px;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2; }
  .selectClassSearch .classSearchBtn {
    width: 40px;
    height: 28px;
    background: url(../img/Search.svg) center center no-repeat;
    border: 0;
    display: inline-flex; }
  .selectClassSearch .searchClass {
    border: 0;
    box-shadow: none;
    color: #000;
    height: 26px;
    width: 100%;
    padding: 0 10px 0 0;
    display: inline-flex;
    font-size: 12px; }
    .selectClassSearch .searchClass:focus {
      outline: none !important;
      box-shadow: none !important;
      color: #202223; }
  .selectClassSearch .easy-autocomplete {
    width: 88% !important; }
  .selectClassSearch .easy-autocomplete-container {
    width: 170px !important;
    right: 0;
    left: auto;
    top: 40px; }
  .selectClassSearch .easy-autocomplete-container ul li.selected {
    background: #FAF5FF !important;
    color: #58595b !important; }
  .selectClassSearch .easy-autocomplete-container ul li:after {
    display: none; }
  .selectClassSearch #eac-container-topSearch {
    top: 50px;
    left: auto;
    right: 0; }
  .selectClassSearch .easy-autocomplete-container ul {
    border-radius: 5px;
    padding: 10px 0; }

.deviceAlertSensitivityModal .selectClassSearch {
  margin-left: auto;
  margin-right: 50px;
  margin-top: -58px;
  margin-bottom: 20px; }

.frequencyDisable .mode {
  opacity: 0.5;
  pointer-events: none; }

.frequencyDisable .customTooltip {
  top: 35px;
  left: 10px; }

.frequencyDisable:hover .customTooltip {
  opacity: 1;
  visibility: visible; }

.deviceList .shareWithPeople .customTooltip {
  top: 25px;
  right: 0;
  left: auto;
  bottom: auto; }

.deviceList .dotsDropdownBtn .dotsDropdownActionItemList {
  min-width: 182px;
  padding: 10px 0;
  box-shadow: 0px 3px 5px rgba(6, 0, 41, 0.2);
  border-radius: 6px;
  background: #F7F7F7; }
  .deviceList .dotsDropdownBtn .dotsDropdownActionItemList div:hover {
    background-color: #FAF5FF; }
  .deviceList .dotsDropdownBtn .dotsDropdownActionItemList .icon {
    margin-right: 10px;
    width: 18px; }
  .deviceList .dotsDropdownBtn .dotsDropdownActionItemList div {
    color: #535353;
    font-size: 14px;
    font-weight: 400;
    padding: 10px 20px;
    display: flex;
    align-items: center; }
  .deviceList .dotsDropdownBtn .dotsDropdownActionItemList .alertDesable {
    cursor: default;
    color: #b7b7b7; }
    .deviceList .dotsDropdownBtn .dotsDropdownActionItemList .alertDesable:hover {
      background-color: transparent; }
    .deviceList .dotsDropdownBtn .dotsDropdownActionItemList .alertDesable .alertTooltip {
      top: 35px; }

.deviceDetail .dotsDropdownBtn .dotsDropdownActionItemList {
  min-width: 182px;
  padding: 10px 0;
  box-shadow: 0px 3px 5px rgba(6, 0, 41, 0.2);
  border-radius: 6px;
  background: #F7F7F7; }
  .deviceDetail .dotsDropdownBtn .dotsDropdownActionItemList div:hover {
    background-color: #FAF5FF; }
  .deviceDetail .dotsDropdownBtn .dotsDropdownActionItemList .icon {
    margin-right: 10px; }
  .deviceDetail .dotsDropdownBtn .dotsDropdownActionItemList div {
    color: #535353;
    font-size: 14px;
    font-weight: 400;
    padding: 10px 20px;
    display: flex;
    align-items: center; }
  .deviceDetail .dotsDropdownBtn .dotsDropdownActionItemList .alertDesable {
    cursor: default;
    color: #b7b7b7; }
    .deviceDetail .dotsDropdownBtn .dotsDropdownActionItemList .alertDesable:hover {
      background-color: transparent; }
    .deviceDetail .dotsDropdownBtn .dotsDropdownActionItemList .alertDesable .alertTooltip {
      top: 35px; }

.imageChatAlert,
.customObjectNodelsAlert {
  padding: 23px 24px 19px;
  background: #FBF8FF;
  box-shadow: 2px 5px 5px rgba(22, 22, 22, 0.08);
  border-radius: 5px;
  margin: 15px 0;
  position: relative; }
  .imageChatAlert p,
  .customObjectNodelsAlert p {
    font-size: 16px;
    font-weight: 500;
    color: #595959;
    margin-bottom: 10px; }
    .imageChatAlert p:last-child,
    .customObjectNodelsAlert p:last-child {
      margin-bottom: 0; }
  .imageChatAlert .closeAlertModal,
  .customObjectNodelsAlert .closeAlertModal {
    position: absolute;
    top: 0;
    right: 0;
    width: 26px;
    height: 26px;
    background: transparent url(../img/ch-close-gray.svg) center center no-repeat;
    background-size: 12px;
    opacity: 0.6;
    border: none;
    box-shadow: none; }

.accordion__item {
  margin: 5px auto; }

.accordion__item .accordion__title {
  position: relative;
  display: block;
  padding: 15px 25px;
  font-size: 16px;
  text-decoration: none;
  background-color: #FFFFFF;
  color: #535353;
  border: 1px solid #E0E0E0;
  border-radius: 5px;
  -webkit-transition: background-color 0.2s;
  transition: background-color 0.2s;
  cursor: pointer; }

.accordion__item .accordion-active {
  border-radius: 0px;
  border-top: 1px solid #8020CF;
  border-right: 1px solid #8020CF;
  border-left: 1px solid #8020CF;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px; }

.accordion__item .accordion__title .accordion__arrow {
  position: absolute;
  top: 13px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  text-align: center;
  color: #fff;
  line-height: 30px;
  font-size: 20px;
  font-weight: 700;
  margin-right: 5px;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out; }

.accordion__item .accordion__rotate {
  transform: rotate(180deg); }

.accordion__item .accordion__content {
  padding: 10px 30px;
  margin-bottom: 2px;
  font-size: 14px;
  display: none;
  background-color: #FFFFFF;
  border-bottom: 1px solid #8020CF;
  border-right: 1px solid #8020CF;
  border-left: 1px solid #8020CF;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px; }

.accordion__item .accordion__arrow-item img {
  width: 10px; }

.groupListWrapper {
  padding-top: 40px; }
  .groupListWrapper .infoIcon {
    display: inline-block;
    margin-left: 5px;
    width: 20px;
    filter: invert(44%) sepia(80%) saturate(4482%) hue-rotate(188deg) brightness(101%) contrast(101%); }

.groupTabs .groupContentArea:before {
  width: 100%;
  height: 80px;
  background: #f2f2f2;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  content: '';
  border-radius: 10px 10px 0 0; }
  @media (max-width: 480px) {
    .groupTabs .groupContentArea:before {
      height: 118px; } }

.groupTabs .groupArea {
  margin-top: 0 !important; }

.groupContentArea {
  width: 100%;
  height: auto;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
  padding: 20px 25px 70px 25px;
  position: relative; }
  .groupContentArea .groupAreaTopBar {
    width: 100%;
    height: 44px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative; }
    @media (max-width: 967px) {
      .groupContentArea .groupAreaTopBar {
        height: auto; } }
    .groupContentArea .groupAreaTopBar .groupTitleArea {
      position: relative; }
      .groupContentArea .groupAreaTopBar .groupTitleArea h4 {
        font-size: 18px;
        margin: 0;
        color: #58595B;
        font-weight: 500;
        display: flex;
        text-transform: capitalize; }
        .groupContentArea .groupAreaTopBar .groupTitleArea h4 span:first-child {
          margin-right: 20px; }
      .groupContentArea .groupAreaTopBar .groupTitleArea b {
        color: #58595B;
        font-weight: 500;
        margin-right: 5px; }
      .groupContentArea .groupAreaTopBar .groupTitleArea span {
        color: #9B9B9B;
        max-width: 250px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
        margin-right: 30px; }
  .groupContentArea .groupAreaButtons {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 4; }
    .groupContentArea .groupAreaButtons .createGroupBtn {
      padding: 9px 30px;
      margin-left: 15px; }
    .groupContentArea .groupAreaButtons .sharePeople {
      margin-left: 15px; }
  .groupContentArea .groupArea {
    width: 100%;
    position: relative;
    z-index: 2;
    margin-top: 15px; }
    .groupContentArea .groupArea nav {
      margin-top: -24px; }
      @media (max-width: 480px) {
        .groupContentArea .groupArea nav {
          margin-top: 10px; } }
    .groupContentArea .groupArea .nav-tabs {
      border: none; }
      .groupContentArea .groupArea .nav-tabs .nav-link {
        border: none;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        font-size: 17px;
        font-weight: 500;
        padding-left: 25px;
        padding-right: 25px;
        color: #595959; }
        @media (max-width: 480px) {
          .groupContentArea .groupArea .nav-tabs .nav-link {
            padding-left: 18px;
            padding-right: 18px; } }
      .groupContentArea .groupArea .nav-tabs .nav-link.active {
        color: #f7941d !important; }
    .groupContentArea .groupArea .tab-content {
      padding-top: 20px; }
    .groupContentArea .groupArea .groupAreaTopbar {
      background-color: #F6F7FB;
      padding: 10px 30px 10px 10px;
      border-radius: 10px;
      width: 100%;
      margin: 0 0 10px;
      display: flex;
      align-items: center; }
      .groupContentArea .groupArea .groupAreaTopbar li {
        font-weight: 500;
        list-style-type: none;
        font-size: 16px;
        color: #58595B;
        padding: 0 10px;
        display: flex;
        align-items: center; }
      .groupContentArea .groupArea .groupAreaTopbar .groupId {
        width: 20%; }
      .groupContentArea .groupArea .groupAreaTopbar .groupName {
        width: 30%; }
      .groupContentArea .groupArea .groupAreaTopbar .groupModelNo {
        width: 20%; }
      .groupContentArea .groupArea .groupAreaTopbar .groupRole {
        width: 20%; }
      .groupContentArea .groupArea .groupAreaTopbar .groupAction {
        width: 10%; }
      .groupContentArea .groupArea .groupAreaTopbar .groupModelName {
        width: 90%;
        justify-content: flex-start; }
    .groupContentArea .groupArea #myGroups .groupAreaTopbar li {
      width: 30%;
      justify-content: flex-start; }
      .groupContentArea .groupArea #myGroups .groupAreaTopbar li:last-child {
        width: 10%;
        justify-content: center; }
    .groupContentArea .groupArea #myGroups .groupAction a {
      margin: 0 8px; }
    .groupContentArea .groupArea #myGroups .groupAreaContent .eachGroupContent li {
      width: 30%;
      justify-content: flex-start; }
      .groupContentArea .groupArea #myGroups .groupAreaContent .eachGroupContent li a {
        justify-content: flex-start; }
      .groupContentArea .groupArea #myGroups .groupAreaContent .eachGroupContent li:last-child {
        width: 10%;
        justify-content: center; }
        .groupContentArea .groupArea #myGroups .groupAreaContent .eachGroupContent li:last-child a {
          justify-content: center;
          width: auto; }
    .groupContentArea .groupArea .groupAreaContent {
      margin: 0;
      min-height: 400px;
      max-height: 400px;
      overflow: hidden; }
      @media (max-width: 480px) {
        .groupContentArea .groupArea .groupAreaContent {
          min-height: 250px;
          max-height: 250px; } }
      .groupContentArea .groupArea .groupAreaContent .mCSB_inside > .mCSB_container {
        margin-right: 20px !important; }
      .groupContentArea .groupArea .groupAreaContent .eachGroupContent {
        padding: 10px 0;
        border-bottom: 1px solid #EDEDED; }
        .groupContentArea .groupArea .groupAreaContent .eachGroupContent ul {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          padding: 5px 10px;
          width: 100%; }
      .groupContentArea .groupArea .groupAreaContent li {
        font-weight: 400;
        list-style-type: none;
        font-size: 15px;
        color: #58595B;
        padding: 0 10px;
        word-break: break-word;
        display: flex;
        align-items: center; }
        .groupContentArea .groupArea .groupAreaContent li a {
          color: #58595B;
          width: 100%;
          display: flex; }
      .groupContentArea .groupArea .groupAreaContent .groupId {
        width: 20%; }
      .groupContentArea .groupArea .groupAreaContent .groupName {
        width: 30%; }
      .groupContentArea .groupArea .groupAreaContent .groupModelNo {
        width: 20%; }
      .groupContentArea .groupArea .groupAreaContent .groupRole {
        width: 20%; }
      .groupContentArea .groupArea .groupAreaContent .groupAction {
        width: 10%;
        color: #58595B; }
        .groupContentArea .groupArea .groupAreaContent .groupAction a {
          width: auto; }
      .groupContentArea .groupArea .groupAreaContent .groupModelName {
        width: 90%;
        justify-content: flex-start; }
  .groupContentArea .groupemails {
    display: inline-block;
    max-width: 950px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #58595B;
    margin-top: 5px;
    font-weight: 500; }
    .groupContentArea .groupemails b {
      float: left; }
  .groupContentArea .email {
    display: inline-block;
    border: solid 1px #EDEDED;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 12px;
    margin: 0 10px 0 0 !important; }

.odpCreateGroupModal .closeModal {
  top: 32px;
  right: 30px; }

.odpCreateGroupModal .modal-title {
  background-color: #138bfa;
  color: #ffffff;
  font-weight: 500;
  text-transform: uppercase;
  border-radius: 50px;
  font-size: 21px;
  padding: 10px;
  position: relative; }

.odpCreateGroupModal .modal-content {
  flex-direction: column !important;
  margin-top: 0; }

.odpCreateGroupModal .modal-body {
  padding: 0 30px; }

.odpCreateGroupModal .modal-body,
.odpCreateGroupModal .modal-footer {
  width: 100%; }

.odpCreateGroupModal .modal-footer {
  border: 0;
  display: flex;
  justify-content: center;
  padding-bottom: 0; }

.odpCreateGroupModal .form-control {
  border-radius: 30px;
  border: 1px solid #9B9B9B;
  height: 42px;
  padding-left: 20px;
  padding-right: 20px;
  width: 100%; }
  .odpCreateGroupModal .form-control:focus {
    border-color: #9B9B9B; }

.odpCreateGroupModal .createGroupBtn {
  height: 40px;
  padding-left: 20px;
  padding-right: 20px; }

.odpCreateGroupModal .saveBtn {
  width: 130px;
  height: 40px; }

.odpCreateGroupModal .label {
  width: 100%;
  color: #595959; }

.odpCreateGroupModal .modelHead {
  background: #F6F7FB;
  border-radius: 10px;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  color: #58595B;
  padding: 5px 10px 5px 30px;
  margin-bottom: 10px; }
  .odpCreateGroupModal .modelHead li {
    width: 100%; }

.odpCreateGroupModal .checkbox {
  margin: 0;
  padding: 5px 0;
  width: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  color: #58595B; }
  .odpCreateGroupModal .checkbox input[type="checkbox"] {
    display: none; }
  .odpCreateGroupModal .checkbox span {
    border: 1px solid #979797;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.05);
    border-radius: 3px;
    width: 15px;
    height: 15px;
    display: inline-flex;
    background: #ffffff;
    margin-right: 30px; }
  .odpCreateGroupModal .checkbox input[type="checkbox"]:checked + span {
    background: #f7941d;
    border-color: #f7941d; }

.odpCreateGroupModal .radio-inline {
  margin: 0;
  width: auto;
  cursor: pointer;
  clear: none;
  display: inline-flex;
  align-items: center;
  color: #979797;
  font-size: 14px; }
  .odpCreateGroupModal .radio-inline input[type="radio"] {
    display: none; }
  .odpCreateGroupModal .radio-inline span {
    border: 1px solid #979797;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.05);
    width: 14px;
    height: 14px;
    border-radius: 30px;
    display: inline-flex;
    background: #ffffff;
    margin-right: 5px; }
  .odpCreateGroupModal .radio-inline input[type="radio"]:checked + span {
    background: #f7941d;
    border-color: #f7941d;
    box-shadow: 0 0 0 2px #fff inset; }
  .odpCreateGroupModal .radio-inline.active {
    color: #4f4f4f; }
  .odpCreateGroupModal .radio-inline:last-child {
    margin-left: 20px; }

.odpCreateGroupModal .modelList {
  font-size: 14px;
  font-weight: 400;
  color: #58595B;
  width: 100%;
  height: 100px;
  overflow: hidden; }
  .odpCreateGroupModal .modelList .mCSB_inside > .mCSB_container {
    margin-right: 30px !important; }
  .odpCreateGroupModal .modelList .eachItem {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #DCDCDC;
    padding-left: 30px; }

.odpCreateGroupModal .multiEmailInput .to-input {
  display: none; }

.odpCreateGroupModal .enter-mail-id {
  border-radius: 30px;
  border: 1px solid #9B9B9B;
  height: 42px;
  width: 100%;
  padding-left: 20px;
  padding-right: 20px; }
  .odpCreateGroupModal .enter-mail-id:focus {
    border-color: #9B9B9B;
    color: #202223; }

.odpCreateGroupModal .email-ids {
  padding: 5px 10px;
  border-radius: 20px;
  border: 1px solid #BDBDBD;
  color: #595959;
  margin: 0 10px 10px 0;
  font-size: 12px;
  display: inline-flex;
  justify-content: space-between;
  align-items: center; }

.odpCreateGroupModal .cancel-email {
  cursor: pointer;
  width: 8px;
  height: 8px;
  background: url(../img/icon-close.svg) center center no-repeat;
  background-size: 10px;
  font-size: 0;
  color: #979797;
  position: absolute;
  right: 5px; }

.odpCreateGroupModal .all-mail {
  margin-top: 10px;
  max-height: 110px;
  overflow-y: auto; }

.myGroupModal .closeModal {
  top: 32px;
  right: 30px; }

.myGroupModal .modal-title {
  background-color: #138bfa;
  color: #ffffff;
  font-weight: 500;
  text-transform: uppercase;
  border-radius: 50px;
  font-size: 21px;
  padding: 10px;
  position: relative; }

.myGroupModal .modal-content {
  flex-direction: column !important;
  margin-top: 0; }

.myGroupModal .modal-body {
  padding: 0 30px; }

.myGroupModal .modal-body,
.myGroupModal .modal-footer {
  width: 100%; }

.myGroupModal .modal-footer {
  border: 0;
  display: flex;
  justify-content: center;
  padding-bottom: 0; }

.myGroupModal .checkbox {
  margin: 0;
  padding: 5px 0;
  width: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  color: #58595B; }
  .myGroupModal .checkbox input[type="checkbox"] {
    display: none; }
  .myGroupModal .checkbox span {
    border: 1px solid #979797;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.05);
    border-radius: 3px;
    width: 15px;
    height: 15px;
    display: inline-flex;
    background: #ffffff;
    margin-right: 30px; }
  .myGroupModal .checkbox input[type="checkbox"]:checked + span {
    background: #f7941d;
    border-color: #f7941d; }

.myGroupModal .createGroupBtn {
  height: 40px;
  padding-left: 20px;
  padding-right: 20px; }

.myGroupModal .label {
  width: 100%;
  color: #595959; }

.myGroupModal .groupHead {
  background: #F6F7FB;
  border-radius: 10px;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  color: #58595B;
  padding: 5px 10px 5px 30px;
  margin-bottom: 10px; }
  .myGroupModal .groupHead li {
    width: 100%; }

.myGroupModal .groupList {
  min-height: 100px;
  max-height: 200px;
  overflow: hidden;
  font-size: 14px;
  font-weight: 400;
  color: #58595B;
  width: 100%; }
  .myGroupModal .groupList .mCSB_inside > .mCSB_container {
    margin-right: 30px !important; }
  .myGroupModal .groupList .eachItem {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #DCDCDC;
    padding-left: 30px; }

.shareWithPeopleModel {
  /*.mailContent {
    min-height: 150px;
  }*/ }
  .shareWithPeopleModel .swpLabel {
    display: flex;
    align-items: center;
    color: #210835;
    font-size: 16px;
    font-weight: 600;
    font-family: "latomedium";
    text-transform: none; }
    .shareWithPeopleModel .swpLabel img {
      width: 24px; }
  .shareWithPeopleModel .invalidEmailError {
    display: none;
    width: 100%;
    color: #EB5857;
    font-size: 12px;
    line-height: 16px; }
  .shareWithPeopleModel .swpCount {
    width: 100%;
    display: block;
    margin-top: 20px;
    font-size: 14px;
    color: #8C9196;
    font-weight: 500; }
  .shareWithPeopleModel .shareButtonIcon {
    width: 20px;
    height: 16px;
    display: inline-flex;
    background: url(../img/ch-share-with-people-black.svg) 0 0 no-repeat;
    background-size: cover; }
  .shareWithPeopleModel .infromUser {
    display: inline-block; }
    .shareWithPeopleModel .infromUser .checkbox {
      width: 100%;
      margin: 0;
      color: #303030;
      font-size: 14px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      cursor: pointer;
      font-weight: 400; }
      .shareWithPeopleModel .infromUser .checkbox input[type='checkbox'] {
        display: none; }
      .shareWithPeopleModel .infromUser .checkbox span {
        width: 18px;
        height: 18px;
        margin-right: 10px;
        display: inline-flex;
        border: 2px solid #878787;
        background: white;
        border-radius: 4px; }
      .shareWithPeopleModel .infromUser .checkbox input[type='checkbox']:checked + span {
        background: #8020CF url(../img/ch-check-white.svg) center center no-repeat;
        background-size: 12px;
        width: 18px;
        height: 18px;
        border-color: #8020CF; }
  .shareWithPeopleModel .modal-dialog {
    max-width: 524px !important; }
  .shareWithPeopleModel .modal-content {
    flex-direction: column !important;
    margin-top: 0;
    min-height: 300px;
    border-radius: 5px; }
  .shareWithPeopleModel .modal-body {
    padding: 0 25px; }
  .shareWithPeopleModel .modal-header {
    padding-top: 20px;
    text-transform: unset; }
  .shareWithPeopleModel .modal-title {
    display: flex;
    align-items: center;
    color: #210835;
    font-size: 16px;
    font-weight: 600;
    font-family: "latomedium";
    text-transform: none; }
  .shareWithPeopleModel .modal-body,
  .shareWithPeopleModel .modal-footer {
    width: 100%; }
  .shareWithPeopleModel .modal-footer {
    border: 0;
    display: flex;
    justify-content: center;
    padding-bottom: 0; }
  .shareWithPeopleModel .form-control {
    background: #F7F7F7 !important;
    border: 1px solid #EAEAEA;
    border-radius: 5px;
    height: 36px;
    padding-left: 10px;
    padding-right: 10px;
    width: 70%; }
    .shareWithPeopleModel .form-control:focus {
      border-color: #EAEAEA; }
  .shareWithPeopleModel .shareBtn,
  .shareWithPeopleModel .shareGroupBtn,
  .shareWithPeopleModel .doneBtn,
  .shareWithPeopleModel .shareBtnAction {
    height: 40px;
    width: 130px; }
  .shareWithPeopleModel .shareBtnAction {
    width: auto;
    color: #303030;
    font-size: 14px;
    font-weight: 500;
    background: #F2E9FA;
    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.08), inset 0px -1px 0px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0 15px;
    border: none;
    height: 40px; }
    .shareWithPeopleModel .shareBtnAction .icon {
      margin-right: 5px; }
    .shareWithPeopleModel .shareBtnAction:disabled {
      background: #F7F7F7;
      color: #B7B7B7;
      box-shadow: none; }
      .shareWithPeopleModel .shareBtnAction:disabled .icon {
        opacity: 0.3; }
  .shareWithPeopleModel .cancelBtn {
    margin-left: auto;
    margin-right: 5px;
    background: transparent;
    border: none;
    color: #303030;
    font-size: 14px;
    font-weight: 500; }
  .shareWithPeopleModel .multiEmailInput {
    position: relative; }
    .shareWithPeopleModel .multiEmailInput .to-input {
      display: none; }
  .shareWithPeopleModel .error {
    display: none;
    font-size: 14px;
    font-style: italic;
    margin-top: -10px;
    color: #EB5857;
    width: 100%;
    margin: 0; }
    .shareWithPeopleModel .error.show {
      display: block; }
  .shareWithPeopleModel .sharedwithPeople .error {
    top: 110px; }
  .shareWithPeopleModel .enter-mail-id {
    border-radius: 5px;
    border: 1px solid #EAEAEA;
    height: 40px;
    width: 100%;
    padding-left: 15px;
    padding-right: 20px;
    background: #f7f7f7;
    margin-top: 15px;
    box-shadow: none; }
    .shareWithPeopleModel .enter-mail-id:focus {
      border-color: #f2f0f0;
      color: #6c757d; }
  .shareWithPeopleModel .eachEmail {
    height: 43px;
    display: flex;
    justify-content: flex-start;
    align-items: center; }
    .shareWithPeopleModel .eachEmail:first-child {
      margin-top: 10px; }
  .shareWithPeopleModel .emailInfo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 12px;
    position: relative;
    width: 100%; }
    .shareWithPeopleModel .emailInfo .cancel-email {
      opacity: 0; }
    .shareWithPeopleModel .emailInfo .veDropdown {
      width: 90px; }
      .shareWithPeopleModel .emailInfo .veDropdown span {
        font-weight: 400; }
      .shareWithPeopleModel .emailInfo .veDropdown ul {
        background: #f2f2f2; }
        .shareWithPeopleModel .emailInfo .veDropdown ul .remove {
          border-top: 1px solid #E0E0E0;
          margin-top: 5px; }
        .shareWithPeopleModel .emailInfo .veDropdown ul .cancel-email {
          font-size: 14px;
          background: none;
          width: auto;
          height: auto;
          position: static;
          color: #535353;
          display: block; }
  .shareWithPeopleModel .infoContent {
    display: flex;
    justify-content: flex-start;
    width: 77%;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
    padding-right: 20px; }
  .shareWithPeopleModel .email-ids {
    color: #595959;
    font-size: 14px;
    display: inline-flex;
    justify-content: space-between;
    align-items: center; }
  .shareWithPeopleModel .emailer-name {
    width: 100%;
    color: #595959;
    font-size: 16px; }
  .shareWithPeopleModel .emailer-shortName {
    width: 24px;
    height: 24px;
    text-transform: uppercase;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #735FEC;
    border-radius: 100px;
    font-size: 10px; }
  .shareWithPeopleModel .cancel-email {
    cursor: pointer;
    width: 8px;
    height: 8px;
    background: url(../img/icon-close.svg) center center no-repeat;
    background-size: 10px;
    font-size: 0;
    color: #979797;
    position: absolute;
    right: 5px; }
  .shareWithPeopleModel .all-mail {
    min-height: 150px;
    max-height: 200px;
    overflow-y: auto; }
  .shareWithPeopleModel .all-mail:empty {
    display: none; }

.alertEmailModel .infoContent {
  width: 100%; }

.sharePeople {
  padding: 10px 15px;
  border-radius: 6px;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease-in;
  border: 0;
  background: #ababab; }
  .sharePeople img {
    filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(322deg) brightness(200%) contrast(100%);
    transition: all 0.2s ease-in; }
  .sharePeople:hover, .sharePeople:focus {
    color: #979797 !important;
    background: #D0C9C9; }
    .sharePeople:hover img, .sharePeople:focus img {
      filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(322deg) brightness(101%) contrast(100%); }

.btnCircle {
  width: 46px;
  height: 46px;
  border-radius: 100%;
  border: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0; }
  .btnCircle img {
    margin: 0 !important; }

.useSettingArea {
  width: 100%;
  min-height: 85vh;
  padding: 30px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
  background: #ffffff;
  border-radius: 10px;
  margin-top: 20px;
  /*display: flex;
  justify-content: flex-start;
  align-items: flex-start;*/
  min-height: 550px; }
  @media (min-width: 1600px) {
    .useSettingArea {
      min-height: 700px; } }
  @media screen and (max-width: 767px) {
    .useSettingArea {
      flex-direction: column;
      padding: 20px; } }
  .useSettingArea .tabview {
    height: 100%; }
    .useSettingArea .tabview #payment {
      padding: 10px !important; }
  .useSettingArea .tab {
    overflow: hidden;
    border-right: 1px solid #E0E0E0;
    background-color: transparent !important;
    width: 20%; }
    .useSettingArea .tab .tablinks {
      background-color: transparent !important;
      border: none;
      outline: none;
      cursor: pointer;
      padding: 20px;
      transition: 0.3s;
      font-size: 17px;
      font-family: "Euclid Circular B";
      font-style: normal;
      font-weight: 400;
      font-size: 18px;
      line-height: 20px;
      color: #535353;
      text-align: left; }
      .useSettingArea .tab .tablinks:hover {
        cursor: pointer; }
      .useSettingArea .tab .tablinks.active {
        color: #8020CF !important;
        font-weight: 600 !important; }
  .useSettingArea .payment-tab {
    overflow: hidden;
    border-bottom: 1px solid #E0E0E0;
    background-color: transparent !important;
    width: 100%; }
    .useSettingArea .payment-tab .tablinksPayment {
      background-color: transparent !important;
      border: none;
      border-bottom: 4px solid transparent;
      outline: none;
      cursor: pointer;
      padding: 0 20px 10px 20px;
      transition: 0.3s;
      font-size: 17px;
      font-family: "Euclid Circular B";
      font-style: normal;
      font-weight: 400;
      font-size: 18px;
      line-height: 20px;
      color: #535353;
      text-align: left; }
      .useSettingArea .payment-tab .tablinksPayment:hover {
        cursor: pointer; }
      .useSettingArea .payment-tab .tablinksPayment.active {
        color: #535353 !important;
        border-bottom: 4px solid #8020CF;
        font-weight: 600 !important; }
  .useSettingArea .tabcontentPayment {
    padding: 20px !important; }
    .useSettingArea .tabcontentPayment .payment-content-row {
      padding: 25px 0;
      border-bottom: 1px solid #E0E0E0; }
      .useSettingArea .tabcontentPayment .payment-content-row p {
        margin-bottom: 0 !important; }
      .useSettingArea .tabcontentPayment .payment-content-row .main-payment-content {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #303030;
        font-size: 18px;
        font-weight: 600;
        line-height: 125%;
        margin-bottom: 14px; }
        .useSettingArea .tabcontentPayment .payment-content-row .main-payment-content span {
          color: #8020CF; }
        .useSettingArea .tabcontentPayment .payment-content-row .main-payment-content button {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 30px;
          padding: 0 15px;
          border-radius: 20px;
          border: 1px solid #360D57;
          box-shadow: 0px 2px 5px 0px rgba(40, 40, 40, 0.1);
          background-color: transparent;
          color: #360D57;
          font-size: 14px;
          font-weight: 600;
          line-height: 16px; }
        .useSettingArea .tabcontentPayment .payment-content-row .main-payment-content .cancel_plan {
          border-color: #DE350B !important;
          color: #DE350B !important; }
        .useSettingArea .tabcontentPayment .payment-content-row .main-payment-content .upgrade_status {
          background: linear-gradient(90deg, #8020CF 0%, #FF00F8 100%) !important;
          color: #FFFFFF !important;
          border: none !important; }
      .useSettingArea .tabcontentPayment .payment-content-row .sub-payment-content {
        color: #535353;
        font-size: 16px;
        font-weight: 400;
        line-height: 20px;
        display: flex;
        align-items: center; }
        .useSettingArea .tabcontentPayment .payment-content-row .sub-payment-content .card-num {
          font-weight: 600; }
        .useSettingArea .tabcontentPayment .payment-content-row .sub-payment-content img {
          margin-right: 10px; }
      .useSettingArea .tabcontentPayment .payment-content-row .payment-card-info .input-title {
        color: #303030;
        font-size: 16px;
        font-weight: 600;
        margin-right: 20px;
        width: 240px; }
      .useSettingArea .tabcontentPayment .payment-content-row .payment-card-info .input-explanation {
        color: #535353;
        font-size: 12px;
        font-weight: 400;
        margin-right: 20px;
        margin-top: 7px; }
      .useSettingArea .tabcontentPayment .payment-content-row .payment-card-info .card-number-input {
        display: flex;
        width: 336px;
        padding: 12px 16px;
        align-items: center;
        border-radius: 8px;
        border: 1px solid #CFCFCF;
        background: #FFF;
        margin-bottom: 24px; }
      .useSettingArea .tabcontentPayment .payment-content-row .payment-card-info .card-owner-input {
        display: flex;
        width: 336px;
        padding: 12px 16px;
        align-items: center;
        border-radius: 8px;
        border: 1px solid #CFCFCF;
        background: #FFF;
        margin-bottom: 24px; }
      .useSettingArea .tabcontentPayment .payment-content-row .payment-card-info .expiry-date-divider {
        margin-bottom: 24px;
        margin-left: 8px;
        margin-right: 8px; }
      .useSettingArea .tabcontentPayment .payment-content-row .payment-card-info .card-expiry-date-input {
        display: flex;
        width: 56px;
        padding: 12px 16px;
        align-items: center;
        border-radius: 8px;
        border: 1px solid #CFCFCF;
        background: #FFF;
        margin-bottom: 24px; }
      .useSettingArea .tabcontentPayment .payment-content-row .payment-card-info .card-cvv-title {
        color: #303030;
        font-size: 16px;
        font-weight: 600;
        margin-right: 16px;
        margin-left: 30px;
        width: 90px; }
      .useSettingArea .tabcontentPayment .payment-content-row .payment-card-info .card-cvv-explanation {
        color: #535353;
        font-size: 12px;
        font-weight: 400;
        margin-right: 16px;
        margin-left: 30px;
        margin-top: 7px;
        width: 90px; }
      .useSettingArea .tabcontentPayment .payment-content-row .payment-card-info .card-cvv-input {
        display: flex;
        width: 64px;
        padding: 12px 16px;
        align-items: center;
        border-radius: 8px;
        border: 1px solid #CFCFCF;
        background: #FFF;
        margin-bottom: 24px; }
    .useSettingArea .tabcontentPayment .payment-history-table {
      width: 100%; }
      .useSettingArea .tabcontentPayment .payment-history-table tr {
        border-bottom: 1px solid #E0E0E0; }
      .useSettingArea .tabcontentPayment .payment-history-table th {
        color: #303030;
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
        letter-spacing: 0.34px;
        text-transform: uppercase;
        padding: 16px 0;
        width: 20%; }
      .useSettingArea .tabcontentPayment .payment-history-table td {
        color: #535353;
        font-size: 14px;
        font-weight: 400;
        line-height: 140%;
        padding: 16px 0;
        width: 20%; }
        .useSettingArea .tabcontentPayment .payment-history-table td img {
          margin-right: 10px; }
    .useSettingArea .tabcontentPayment .no-payment {
      color: #4E147E;
      font-size: 18px;
      font-style: italic;
      font-weight: 600;
      line-height: 20px; }
  .useSettingArea .tabcontent,
  .useSettingArea .tabcontentPayment {
    display: none;
    padding: 10px 60px;
    width: 100%; }
    .useSettingArea .tabcontent h5,
    .useSettingArea .tabcontentPayment h5 {
      font-family: "Euclid Circular B";
      font-style: normal;
      font-weight: 500;
      font-size: 20px;
      line-height: 36px;
      color: #303030;
      margin-bottom: 30px; }
    .useSettingArea .tabcontent h4,
    .useSettingArea .tabcontentPayment h4 {
      font-family: 'Euclid Circular B';
      font-family: "Euclid Circular B";
      font-weight: 500;
      font-size: 20px;
      line-height: 36px;
      color: #303030; }
      .useSettingArea .tabcontent h4 span,
      .useSettingArea .tabcontentPayment h4 span {
        color: #8020CF; }
    .useSettingArea .tabcontent .form-group,
    .useSettingArea .tabcontentPayment .form-group {
      margin-bottom: 20px;
      position: relative; }
      .useSettingArea .tabcontent .form-group .pwVisibility,
      .useSettingArea .tabcontent .form-group .pwVisibilityConfirm,
      .useSettingArea .tabcontent .form-group .pwVisibilityCurrent,
      .useSettingArea .tabcontentPayment .form-group .pwVisibility,
      .useSettingArea .tabcontentPayment .form-group .pwVisibilityConfirm,
      .useSettingArea .tabcontentPayment .form-group .pwVisibilityCurrent {
        position: absolute;
        top: 35px !important;
        right: 15px;
        width: 20px;
        height: 20px;
        cursor: pointer;
        pointer-events: all;
        background: url("../img/icon-eye-closed.svg");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain; }
    .useSettingArea .tabcontent label,
    .useSettingArea .tabcontentPayment label {
      margin-bottom: 5px;
      font-family: "Euclid Circular B";
      font-weight: 500;
      font-size: 14px;
      line-height: 20px;
      color: #210835; }
    .useSettingArea .tabcontent .form-control,
    .useSettingArea .tabcontentPayment .form-control {
      border: 1px solid #E0E0E0 !important;
      height: 36px;
      border-radius: 5px;
      padding: 10px 20px;
      font-size: 14px;
      text-align: left;
      background-color: #F7F7F7 !important;
      color: #303030 !important; }
      .useSettingArea .tabcontent .form-control:focus,
      .useSettingArea .tabcontentPayment .form-control:focus {
        box-shadow: none; }
    .useSettingArea .tabcontent #pswd_info,
    .useSettingArea .tabcontentPayment #pswd_info {
      max-width: 380px;
      width: 100%;
      margin-top: 60px;
      display: block !important;
      clear: both; }
      .useSettingArea .tabcontent #pswd_info h4,
      .useSettingArea .tabcontentPayment #pswd_info h4 {
        font-size: 16px;
        color: #595959;
        font-weight: normal; }
      .useSettingArea .tabcontent #pswd_info ul li,
      .useSettingArea .tabcontentPayment #pswd_info ul li {
        font-size: 16px;
        color: #595959;
        margin-bottom: 5px; }
      .useSettingArea .tabcontent #pswd_info strong,
      .useSettingArea .tabcontentPayment #pswd_info strong {
        font-weight: 500; }
    .useSettingArea .tabcontent .account-info-box,
    .useSettingArea .tabcontentPayment .account-info-box {
      width: 230px;
      height: 194px;
      background: #FFFFFF;
      box-shadow: 2px 5px 5px rgba(22, 22, 22, 0.08);
      border-radius: 6px;
      margin-right: 30px;
      margin-bottom: 30px;
      padding: 25px 20px; }
      .useSettingArea .tabcontent .account-info-box img,
      .useSettingArea .tabcontentPayment .account-info-box img {
        height: 40px; }
      .useSettingArea .tabcontent .account-info-box .box-title,
      .useSettingArea .tabcontentPayment .account-info-box .box-title {
        font-family: "Euclid Circular B";
        font-style: normal;
        font-weight: 600;
        font-size: 18px;
        line-height: 20px;
        color: #535353;
        margin: 13px 0 !important; }
      .useSettingArea .tabcontent .account-info-box .count,
      .useSettingArea .tabcontentPayment .account-info-box .count {
        font-family: "Euclid Circular B";
        font-style: normal;
        font-weight: 600;
        font-size: 18px;
        line-height: 20px;
        color: #210835; }
      .useSettingArea .tabcontent .account-info-box.api-usage-details,
      .useSettingArea .tabcontentPayment .account-info-box.api-usage-details {
        width: 490px !important; }
        .useSettingArea .tabcontent .account-info-box.api-usage-details .api-usage-details-link,
        .useSettingArea .tabcontentPayment .account-info-box.api-usage-details .api-usage-details-link {
          color: #8020CF;
          font-size: 14px;
          font-weight: 600;
          line-height: 20px;
          text-decoration-line: underline;
          cursor: pointer; }
        .useSettingArea .tabcontent .account-info-box.api-usage-details .api-usage-info,
        .useSettingArea .tabcontentPayment .account-info-box.api-usage-details .api-usage-info {
          margin-right: 60px;
          margin-top: 30px; }
          .useSettingArea .tabcontent .account-info-box.api-usage-details .api-usage-info div,
          .useSettingArea .tabcontentPayment .account-info-box.api-usage-details .api-usage-info div {
            color: #535353;
            font-size: 14px;
            font-weight: 400;
            line-height: 20px; }
          .useSettingArea .tabcontent .account-info-box.api-usage-details .api-usage-info p,
          .useSettingArea .tabcontentPayment .account-info-box.api-usage-details .api-usage-info p {
            color: #210835;
            font-size: 18px;
            font-weight: 600;
            line-height: 20px; }
          .useSettingArea .tabcontent .account-info-box.api-usage-details .api-usage-info .remaining,
          .useSettingArea .tabcontentPayment .account-info-box.api-usage-details .api-usage-info .remaining {
            color: #00875A !important; }

.planInfo {
  background: #ffffff;
  box-sizing: border-box;
  box-shadow: 0px 4px 19px rgba(176, 175, 175, 0.15);
  border-radius: 13px;
  margin-right: 30px;
  max-width: 320px;
  width: 100%;
  padding: 30px 20px;
  box-sizing: border-box; }
  .planInfo h4 {
    font-size: 18px;
    display: flex;
    margin-bottom: 20px;
    margin-top: 0;
    color: #595959; }
    .planInfo h4 a {
      margin-left: auto;
      font-weight: 400;
      color: #138bfa;
      font-size: 14px; }
  @media screen and (max-width: 767px) {
    .planInfo {
      max-width: 100%;
      margin: 0 0 20px; } }
  .planInfo strong {
    width: 100%;
    text-align: center;
    font-weight: 500;
    color: #4F4F4F;
    display: block;
    margin-bottom: 20px; }
  .planInfo p {
    color: #9b9b9b;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 25px;
    text-transform: uppercase;
    flex-wrap: wrap; }
    .planInfo p.last-child {
      margin-bottom: 0; }
    .planInfo p strong {
      width: auto;
      display: block;
      margin: 10px 0 0;
      width: 100%;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      text-align: left;
      font-weight: normal;
      text-transform: none; }
  .planInfo .upgradeButton {
    height: 34px;
    width: 160px;
    margin: 0 auto;
    margin-bottom: 30px;
    font-size: 14px; }
  .planInfo hr {
    margin-left: -20px;
    margin-right: -20px; }
  .planInfo .devider {
    margin-top: 30px;
    margin-bottom: 30px; }
  .planInfo .logoutLink {
    display: flex;
    justify-content: flex-end;
    margin: 0; }
  .planInfo .saveUserDetail {
    display: none; }
  .planInfo .userDetail p:last-child {
    margin: 0; }

.settings {
  width: 100%;
  max-width: 360px; }
  @media screen and (max-width: 767px) {
    .settings {
      max-width: 100%; } }
  .settings .nav-item a {
    color: #979797;
    font-size: 18px;
    font-weight: 500;
    padding: 0 30px 0 0;
    height: 40px;
    display: flex;
    justify-content: flex-start;
    align-items: center; }
    .settings .nav-item a.active {
      color: #f7941d;
      font-size: 21px; }
    .settings .nav-item a:hover, .settings .nav-item a:focus {
      color: #f7941d !important; }
  .settings ul.nav {
    border-bottom: 1px solid #D5D1D1;
    margin-bottom: 50px; }
  .settings .tabPanInner {
    display: flex;
    justify-content: flex-start;
    align-items: center; }
    @media (max-width: 768px) {
      .settings .tabPanInner {
        flex-direction: column; } }
  .settings .fyp {
    display: flex;
    justify-content: space-between;
    align-items: center; }
    .settings .fyp a {
      color: #F7941D; }
  .settings .accountInfo {
    padding: 20px 20px;
    background: #ffffff;
    box-shadow: 0px 4px 19px rgba(176, 175, 175, 0.15);
    border-radius: 13px; }
    .settings .accountInfo h4 {
      font-size: 18px;
      display: flex;
      margin-bottom: 20px;
      margin-top: 0;
      color: #595959; }
      .settings .accountInfo h4 a {
        margin-left: auto;
        font-weight: 400;
        color: #138bfa;
        font-size: 14px; }
    .settings .accountInfo p {
      color: #9b9b9b;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 0;
      text-transform: uppercase;
      flex-wrap: wrap;
      font-size: 14px; }
      .settings .accountInfo p strong {
        display: block;
        margin: 5px 0 0;
        width: 100%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        text-align: left;
        font-weight: normal;
        text-transform: none;
        color: #4F4F4F; }
  .settings .securityInfo {
    padding: 20px 20px;
    background: #ffffff;
    box-shadow: 0px 4px 19px rgba(176, 175, 175, 0.15);
    margin-bottom: 20px;
    border-radius: 13px; }
    .settings .securityInfo h4 {
      font-size: 18px;
      display: flex;
      margin-bottom: 20px;
      margin-top: 0;
      color: #595959; }
      .settings .securityInfo h4 a {
        margin-left: auto;
        font-weight: 400;
        color: #138bfa;
        font-size: 14px; }
    .settings .securityInfo p {
      color: #9b9b9b;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 0;
      text-transform: uppercase;
      flex-wrap: wrap;
      font-size: 14px; }
      .settings .securityInfo p strong {
        display: block;
        margin: 5px 0 0;
        width: 100%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        text-align: left;
        font-weight: normal;
        text-transform: none;
        color: #4F4F4F; }
    .settings .securityInfo .note {
      margin-top: -10px;
      text-transform: none;
      display: block; }
      .settings .securityInfo .note a {
        color: #138bfa; }

.userSettingForm {
  max-width: 380px;
  width: 100%;
  margin: 0; }
  .userSettingForm .btnUpdate {
    cursor: pointer;
    float: right; }
    .userSettingForm .btnUpdate:disabled {
      color: #B7B7B7 !important;
      background: #F7F7F7;
      box-shadow: none;
      pointer-events: none; }
  .userSettingForm #pswd_info {
    clear: both;
    padding: 20px 10px; }
    .userSettingForm #pswd_info h4 {
      color: #4A4A4A;
      font-size: 20px; }
    .userSettingForm #pswd_info ul {
      list-style: none;
      margin: 0;
      padding: 0;
      color: #4A4A4A; }

.updatePasswordModal .modal-dialog {
  max-width: 630px; }

.updatePasswordModal .modal-content {
  height: 315px; }

.updatePasswordModal .updateForm {
  width: 100%;
  margin: 0 auto;
  max-width: 413px; }

.updatePasswordModal label {
  font-weight: 500;
  font-size: 14px;
  display: block;
  margin-bottom: 4px;
  color: #210835; }

.updatePasswordModal p {
  color: #535353;
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 15px; }

.updatePasswordModal .form-control {
  margin: 0 auto;
  border: 1px solid #E0E0E0;
  height: 36px;
  border-radius: 10px;
  padding: 10px 15px;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.6);
  text-align: left;
  background-color: #F7F7F7;
  width: 100% .updatePasswordModal .form-control; }
  .updatePasswordModal .form-control :focus {
    box-shadow: none;
    border-color: #8020CF; }

.updatePasswordModal .btnUpdate {
  width: 160px;
  height: 36px;
  font-size: 14px;
  margin: 0 auto;
  font-weight: 500; }

.updatePasswordModal .form-group {
  position: relative;
  margin: 0 0 63px;
  display: flex;
  justify-content: center; }
  .updatePasswordModal .form-group:last-child {
    height: auto; }

.updatePasswordModal .login-pw-toggle-hidden,
.updatePasswordModal .login-pw-toggle-visible {
  right: 12px;
  top: 9px; }

input:-webkit-autofill {
  -webkit-box-shadow: inset 0 0 0px 9999px #F7F7F7; }

.changePasswordModal .changePasswordsForm {
  padding: 20px 20px 10px;
  width: 100%;
  margin: 0; }

.changePasswordModal #renew_password_form {
  width: 100%;
  margin-bottom: 0; }
  .changePasswordModal #renew_password_form .form-group {
    position: relative;
    height: 80px;
    margin: 0; }
  .changePasswordModal #renew_password_form input[type="password"],
  .changePasswordModal #renew_password_form input[type="text"] {
    width: 100%;
    height: 52px;
    background: #fff;
    padding: 0 20px;
    border: 0;
    font-weight: 400;
    font-family: "Roboto";
    border-radius: 30px;
    border: 1px solid #9B9B9B;
    border-radius: 26px; }
    .changePasswordModal #renew_password_form input[type="password"]::-webkit-input-placeholder,
    .changePasswordModal #renew_password_form input[type="text"]::-webkit-input-placeholder {
      /* Chrome/Opera/Safari */
      color: rgba(0, 0, 0, 0.6);
      transition: 0.2s ease-in all; }
    .changePasswordModal #renew_password_form input[type="password"]::-moz-placeholder,
    .changePasswordModal #renew_password_form input[type="text"]::-moz-placeholder {
      /* Firefox 19+ */
      transition: 0.2s ease-in all;
      color: #000; }
    .changePasswordModal #renew_password_form input[type="password"]:-ms-input-placeholder,
    .changePasswordModal #renew_password_form input[type="text"]:-ms-input-placeholder {
      /* IE 10+ */
      transition: 0.2s ease-in all;
      color: rgba(0, 0, 0, 0.6); }
    .changePasswordModal #renew_password_form input[type="password"]:-moz-placeholder,
    .changePasswordModal #renew_password_form input[type="text"]:-moz-placeholder {
      /* Firefox 18- */
      transition: 0.2s ease-in all;
      color: rgba(0, 0, 0, 0.6); }
  .changePasswordModal #renew_password_form input[type="submit"] {
    font-size: 16px;
    width: 180px;
    height: 44px; }

.changePasswordModal #pswd_info {
  max-width: 380px;
  width: 100%;
  margin-left: 30px;
  margin-bottom: 30px;
  display: none; }
  @media (max-width: 768px) {
    .changePasswordModal #pswd_info {
      margin: 50px 0 0; } }
  .changePasswordModal #pswd_info h4 {
    font-size: 16px;
    color: #595959;
    font-weight: normal; }
  .changePasswordModal #pswd_info ul li {
    font-size: 16px;
    color: #595959;
    margin-bottom: 5px; }
  .changePasswordModal #pswd_info strong {
    font-weight: 500; }

.changePasswordModal .passwordNote {
  margin: -10px 0 20px;
  font-size: 12px;
  color: #595959;
  padding: 0 10px; }

.twoFectorAuthentication {
  padding: 0 20px;
  background: transparent;
  margin-bottom: 20px;
  margin-left: 30px;
  width: 50%;
  font-size: 14px;
  color: #595959; }
  .twoFectorAuthentication h4 {
    font-size: 18px;
    display: flex;
    margin-bottom: 10px;
    margin-top: 0;
    color: #595959; }
  .twoFectorAuthentication p {
    font-size: 14px;
    color: #58595B; }
    .twoFectorAuthentication p .number {
      font-weight: normal;
      color: #000; }
  .twoFectorAuthentication .updatePhoneNumber {
    color: #8020cf;
    cursor: pointer;
    text-align: right;
    font-weight: 600;
    margin-bottom: 5px !important; }
  .twoFectorAuthentication .group {
    display: flex;
    justify-content: flex-start; }
    .twoFectorAuthentication .group .status {
      line-height: 24px;
      height: 21px; }
    .twoFectorAuthentication .group a {
      color: #138bfa;
      text-decoration: underline;
      text-underline-position: under;
      font-size: 14px;
      margin-left: 20px; }
      .twoFectorAuthentication .group a:focus {
        text-decoration: underline; }
  .twoFectorAuthentication .customToggleBtn {
    margin-right: 10px; }
    .twoFectorAuthentication .customToggleBtn .controlBtn {
      width: 40px;
      height: 21px; }
      .twoFectorAuthentication .customToggleBtn .controlBtn:before {
        width: 15px;
        height: 15px; }
  .twoFectorAuthentication .customToggleBtn input[type="checkbox"]:checked + .controlBtn {
    background-color: #8020CF; }

.getStartModal {
  padding: 0 !important; }
  .getStartModal .modal-dialog {
    max-width: 630px;
    align-items: center; }
  .getStartModal .modal-content {
    flex-direction: column !important;
    padding-bottom: 0 !important;
    border-radius: 10px;
    margin-top: 0; }
  .getStartModal .modal-title {
    text-align: center; }
  .getStartModal .modal-body,
  .getStartModal .modal-footer {
    width: 100%;
    border: none; }
  .getStartModal .modal-footer {
    padding-top: 0;
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 25px; }
  .getStartModal .modal-body {
    padding-top: 20px;
    padding-left: 50px;
    padding-right: 50px; }
    .getStartModal .modal-body h5 {
      color: #535353;
      font-size: 16px;
      margin-bottom: 40px; }
    .getStartModal .modal-body dl {
      margin-bottom: 30px; }
      .getStartModal .modal-body dl dt {
        float: left;
        width: 40px; }
        .getStartModal .modal-body dl dt i {
          width: 30px;
          height: 30px;
          background-color: #F6F6F6;
          border-radius: 30px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 18px;
          color: #8020CF;
          font-style: normal; }
      .getStartModal .modal-body dl dd {
        margin-left: 50px;
        font-size: 14px;
        color: #535353; }
        .getStartModal .modal-body dl dd strong {
          color: #535353;
          display: block;
          margin-bottom: 5px;
          font-weight: normal;
          font-weight: 500; }
  .getStartModal .getStartBtn {
    padding: 0 15px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500; }

.authenticationModal {
  padding: 0 !important; }
  .authenticationModal .modal-dialog {
    max-width: 630px;
    align-items: center; }
  .authenticationModal .modal-content {
    flex-direction: column !important;
    padding-bottom: 0 !important;
    border-radius: 10px;
    margin-top: 0; }
  .authenticationModal .modal-title {
    text-align: center; }
  .authenticationModal .modal-body,
  .authenticationModal .modal-footer {
    width: 100%;
    border: none; }
  .authenticationModal .modal-footer {
    padding-top: 0;
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 25px; }
  .authenticationModal .modal-body {
    padding-top: 20px;
    padding-left: 50px;
    padding-right: 50px;
    min-height: 300px; }
    .authenticationModal .modal-body h5 {
      color: #535353;
      font-size: 14px;
      margin-bottom: 28px; }
  .authenticationModal .sendCodeBtn {
    min-width: 90px;
    padding: 0 15px;
    height: 40px;
    border-radius: 10px;
    font-size: 14px;
    border: none;
    background-color: #8020CF;
    color: #ffffff;
    float: right; }
  .authenticationModal .sendCodeBtn:disabled,
  .authenticationModal .sendCodeBtn[disabled] {
    background-color: #F7F7F7;
    color: #B7B7B7;
    pointer-events: none; }
  .authenticationModal .enterDetail h5 {
    color: #535353;
    font-size: 16px;
    margin-bottom: 10px; }
  .authenticationModal .enterDetail p {
    color: #535353;
    margin-bottom: 0;
    font-size: 14px; }
    .authenticationModal .enterDetail p strong {
      font-weight: 600;
      color: #303030; }
  .authenticationModal .controlGroup {
    margin-top: 20px;
    height: 50px;
    border-radius: 5px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap; }
    .authenticationModal .controlGroup .countryDropdown {
      position: relative; }
      .authenticationModal .controlGroup .countryDropdown .dropdownBtn {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        background: #F2F1F1;
        border-radius: 5px 0 0 5px;
        height: 48px;
        border: none;
        padding: 0 10px;
        font-size: 12px;
        color: #9B9B9B; }
        .authenticationModal .controlGroup .countryDropdown .dropdownBtn .arrow {
          width: 12px;
          margin-left: 10px; }
    .authenticationModal .controlGroup .enterPhoneNumber {
      height: 48px;
      width: 100%;
      background-color: #F7F7F7;
      color: #535353;
      font-size: 14px;
      padding: 0 10px 0 120px;
      border: solid 1px #E0E0E0;
      border-radius: 5px; }
      .authenticationModal .controlGroup .enterPhoneNumber:focus {
        box-shadow: none; }
    .authenticationModal .controlGroup .errorMessage {
      color: #EB5857;
      font-size: 14px;
      margin-top: 5px; }
    .authenticationModal .controlGroup .country-input {
      border: none;
      background: url(../img/Search.svg) 10px center no-repeat;
      font-size: 14px;
      font-weight: 400;
      color: #535353; }
      .authenticationModal .controlGroup .country-input:focus {
        outline: none; }

.enterCodeModal {
  padding: 0 !important; }
  .enterCodeModal .modal-dialog {
    max-width: 630px;
    align-items: center; }
  .enterCodeModal .modal-content {
    flex-direction: column !important;
    padding-bottom: 0 !important;
    border-radius: 10px;
    margin-top: 0; }
  .enterCodeModal .modal-title {
    text-align: center; }
  .enterCodeModal .modal-body,
  .enterCodeModal .modal-footer {
    width: 100%;
    border: none; }
  .enterCodeModal .modal-footer {
    padding-top: 25px;
    padding-right: 50px;
    padding-left: 50px;
    padding-bottom: 25px; }
  .enterCodeModal .modal-body {
    padding-top: 20px;
    padding-left: 50px;
    padding-right: 50px; }
    .enterCodeModal .modal-body h5 {
      color: #535353;
      font-size: 14px;
      margin-bottom: 28px; }
  .enterCodeModal .confirmCodeBtn {
    min-width: 90px;
    padding: 0 15px;
    height: 40px;
    border-radius: 10px;
    font-size: 14px;
    border: none;
    background-color: #8020CF;
    color: #ffffff;
    float: right; }
  .enterCodeModal .confirmCodeBtn:disabled,
  .enterCodeModal .confirmCodeBtn[disabled] {
    background-color: #F7F7F7;
    color: #B7B7B7;
    pointer-events: none; }
  .enterCodeModal .enterDetail h5 {
    color: #535353;
    font-size: 16px;
    margin-bottom: 5px; }
  .enterCodeModal .enterDetail p {
    color: #535353;
    margin-bottom: 0;
    font-size: 14px; }
    .enterCodeModal .enterDetail p strong {
      font-weight: normal;
      color: #303030; }
    .enterCodeModal .enterDetail p .number {
      color: #000; }
  .enterCodeModal .enterDetail .resendCode {
    display: inline-flex;
    color: #8020CF;
    font-size: 14px;
    cursor: pointer;
    font-weight: 600;
    display: flex;
    align-items: center; }
    .enterCodeModal .enterDetail .resendCode .icon {
      margin-right: 5px; }
    .enterCodeModal .enterDetail .resendCode .customTooltip {
      top: 20px;
      left: 0;
      white-space: normal;
      min-width: 400px;
      padding: 10px 15px;
      font-weight: 400;
      font-style: normal;
      font-size: 14px;
      box-shadow: 0px 3px 5px rgba(6, 0, 41, 0.2);
      border-radius: 6px;
      border: none; }
  .enterCodeModal .enterDetail .enterCode {
    margin-top: 20px;
    border: none !important;
    border-radius: 5px;
    margin-bottom: 10px; }
    .enterCodeModal .enterDetail .enterCode label {
      display: block;
      margin-bottom: 5px;
      font-weight: 600;
      font-size: 14px;
      color: #535353; }
    .enterCodeModal .enterDetail .enterCode .errorMessage {
      color: #EB5857;
      font-size: 14px;
      margin-top: 0;
      display: none; }
    .enterCodeModal .enterDetail .enterCode .enterCodeInput {
      color: #535353;
      font-size: 14px;
      height: 50px;
      width: 100%;
      background: #F7F7F7;
      border: 1px solid #E0E0E0;
      border-radius: 5px;
      box-shadow: none;
      padding: 10px 20px; }
      .enterCodeModal .enterDetail .enterCode .enterCodeInput.notValidCode ~ .errorMessage {
        display: block; }
    .enterCodeModal .enterDetail .enterCode .wrongInput {
      border-color: red !important; }

.allSetModal {
  padding: 0 !important; }
  .allSetModal .modal-dialog {
    max-width: 630px;
    align-items: center; }
  .allSetModal .modal-content {
    flex-direction: column !important;
    padding-bottom: 0 !important;
    border-radius: 10px;
    margin-top: 0; }
  .allSetModal .modal-title {
    text-align: center; }
  .allSetModal .modal-body,
  .allSetModal .modal-footer {
    width: 100%;
    border: none; }
  .allSetModal .modal-footer {
    justify-content: flex-end;
    padding-top: 0;
    padding-right: 50px;
    padding-left: 50px;
    padding-bottom: 25px; }
  .allSetModal .modal-body {
    padding-top: 20px;
    padding-left: 50px;
    padding-right: 50px;
    min-height: 280px; }
    .allSetModal .modal-body h5 {
      color: #535353;
      font-size: 16px;
      margin-bottom: 28px; }
  .allSetModal .doneBtn {
    padding: 0 20px;
    height: 40px;
    border-radius: 5px;
    font-size: 14px;
    border: none;
    background-color: #f7941d;
    color: #ffffff; }
  .allSetModal .backupBtn {
    padding: 0 15px;
    height: 40px;
    border-radius: 10px;
    border: none !important;
    font-size: 14px;
    background-color: #8020CF;
    color: white;
    font-weight: 500; }
  .allSetModal .enterDetail h5 {
    color: #535353;
    font-size: 16px;
    margin-bottom: 10px;
    display: flex;
    align-items: center; }
    .allSetModal .enterDetail h5 .icon {
      margin-left: 10px; }
  .allSetModal .enterDetail p {
    color: #535353;
    margin-bottom: 0;
    font-size: 14px; }
    .allSetModal .enterDetail p strong {
      font-weight: normal;
      color: #303030; }
    .allSetModal .enterDetail p .code {
      color: #000; }

.codeBackUpModal {
  padding: 0 !important; }
  .codeBackUpModal .modal-dialog {
    max-width: 630px;
    align-items: center; }
  .codeBackUpModal .modal-content {
    background-color: #ffffff !important;
    flex-direction: column !important;
    padding-bottom: 0 !important;
    border-radius: 10px;
    margin-top: 0; }
  .codeBackUpModal .modal-header {
    width: 100%;
    border: none; }
  .codeBackUpModal .modal-title {
    text-align: center;
    width: 100%;
    font-size: 16px;
    font-weight: 600;
    color: #210835; }
  .codeBackUpModal .modal-body,
  .codeBackUpModal .modal-footer {
    width: 100%;
    border: none; }
  .codeBackUpModal .modal-footer {
    padding-top: 0;
    padding-right: 50px;
    padding-left: 50px;
    padding-bottom: 25px; }
  .codeBackUpModal .modal-body {
    padding-top: 40px;
    padding-left: 50px;
    padding-right: 50px;
    min-height: 300px; }
    .codeBackUpModal .modal-body h5 {
      color: #595959;
      font-size: 18px;
      margin-bottom: 28px; }
  .codeBackUpModal .codeCopied {
    text-align: center !important;
    color: #00875A !important;
    display: none;
    margin-bottom: 10px !important;
    font-weight: 600 !important;
    text-align: center; }
    .codeBackUpModal .codeCopied .icon {
      margin-left: 10px;
      width: 12px;
      opacity: 0.8;
      margin-bottom: 5px; }
  .codeBackUpModal .doneBtn {
    padding: 0 15px;
    height: 36px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    border: none !important;
    background-color: #8020CF;
    color: white; }
  .codeBackUpModal .copyCodeBtn {
    min-width: 175px;
    padding: 0 15px;
    height: 36px;
    border-radius: 10px;
    font-size: 14px;
    border: 1px solid #360D57;
    background-color: transparent;
    color: #360D57;
    font-weight: 500; }
  .codeBackUpModal .backupBtn {
    min-width: 90px;
    padding: 0 15px;
    height: 40px;
    border-radius: 10px;
    border: none !important;
    font-size: 14px;
    background-color: #8020CF;
    color: white;
    margin-left: 100px !important; }
  .codeBackUpModal .verifyBtn {
    min-width: 90px;
    padding: 0 15px;
    height: 40px;
    border-radius: 10px;
    font-size: 14px;
    border: none;
    background-color: #8020CF;
    color: #ffffff;
    float: right; }
  .codeBackUpModal .verifyBtn:disabled,
  .codeBackUpModal .verifyBtn[disabled] {
    background-color: #f7f7f7;
    color: #B7B7B7;
    pointer-events: none; }
  .codeBackUpModal .enterDetail h5 {
    color: #303030;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 5px; }
  .codeBackUpModal .enterDetail p {
    color: #535353;
    margin-bottom: 0;
    font-size: 14px; }
    .codeBackUpModal .enterDetail p strong {
      font-weight: 600;
      color: #595959; }
    .codeBackUpModal .enterDetail p .code {
      font-size: 16px;
      color: #000; }
  .codeBackUpModal .enterDetail .enterCode {
    margin-top: 10px;
    border: solid 1px #D9D9D9;
    height: 70px;
    padding: 10px;
    box-shadow: 2px 6px 24px rgba(0, 0, 0, 0.08);
    border-radius: 5px;
    margin-bottom: 25px;
    position: relative; }
    .codeBackUpModal .enterDetail .enterCode label {
      display: block;
      margin-bottom: 0;
      font-weight: normal;
      font-size: 14px;
      color: #9B9B9B;
      position: absolute;
      top: 25px;
      z-index: 0;
      width: 95%;
      transition: all 0.2s ease-in; }
    .codeBackUpModal .enterDetail .enterCode .errorMessage {
      color: #EB5857;
      font-size: 14px;
      margin-top: 12px;
      margin-left: -10px;
      display: none; }
    .codeBackUpModal .enterDetail .enterCode .enterRecoveryCodeInput {
      color: #58595B;
      font-size: 14px;
      width: 100%;
      border: none;
      box-shadow: none;
      height: 48px;
      z-index: 2;
      position: relative;
      background-color: transparent; }
      .codeBackUpModal .enterDetail .enterCode .enterRecoveryCodeInput:focus {
        outline: none !important; }
      .codeBackUpModal .enterDetail .enterCode .enterRecoveryCodeInput.notValidCode ~ .errorMessage {
        display: block; }
  .codeBackUpModal .generateNewCode {
    display: inline-block;
    color: #535353;
    font-weight: 600;
    cursor: pointer; }

.twoFector .codeBackUpModal .modal-body {
  min-height: 150px; }

.twoFector .codeBackUpModal .modal-footer {
  padding-bottom: 30px; }

.updatePhoneNumberModal {
  padding: 0 !important; }
  .updatePhoneNumberModal .modal-dialog {
    max-width: 630px;
    align-items: center; }
  .updatePhoneNumberModal .modal-content {
    flex-direction: column !important;
    padding-bottom: 0 !important;
    border-radius: 10px;
    margin-top: 0;
    margin-bottom: 0; }
  .updatePhoneNumberModal .modal-title {
    text-align: center; }
  .updatePhoneNumberModal .modal-body,
  .updatePhoneNumberModal .modal-footer {
    width: 100%;
    border: none; }
  .updatePhoneNumberModal .modal-footer {
    padding-top: 0;
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 25px; }
  .updatePhoneNumberModal .modal-body {
    padding-top: 20px;
    padding-left: 50px;
    padding-right: 50px;
    min-height: 300px; }
    .updatePhoneNumberModal .modal-body h5 {
      color: #535353;
      font-size: 16px;
      margin-bottom: 28px; }
  .updatePhoneNumberModal .updateBtn {
    padding: 0 15px;
    height: 36px;
    border-radius: 10px;
    font-size: 14px;
    border: none;
    background-color: #8020CF;
    color: #ffffff; }
  .updatePhoneNumberModal .updateBtn:disabled,
  .updatePhoneNumberModal .updateBtn[disabled] {
    background-color: #F7F7F7;
    color: #B7B7B7;
    pointer-events: none; }
  .updatePhoneNumberModal .enterDetail h5 {
    color: #535353;
    font-size: 16px;
    margin-bottom: 0; }
  .updatePhoneNumberModal .enterDetail p {
    color: #535353;
    margin-bottom: 20px;
    font-size: 14px; }
    .updatePhoneNumberModal .enterDetail p strong {
      font-weight: 600;
      color: #535353; }
  .updatePhoneNumberModal .controlGroup {
    margin-top: 10px;
    height: 50px;
    border-radius: 5px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap; }
    .updatePhoneNumberModal .controlGroup .countryDropdown {
      position: relative; }
      .updatePhoneNumberModal .controlGroup .countryDropdown .dropdownBtn {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        background: #F2F1F1;
        border-radius: 5px 0 0 5px;
        height: 48px;
        border: none;
        padding: 0 10px;
        font-size: 12px;
        color: #9B9B9B; }
        .updatePhoneNumberModal .controlGroup .countryDropdown .dropdownBtn .arrow {
          width: 12px;
          margin-left: 10px; }
    .updatePhoneNumberModal .controlGroup .enterPhoneNumber {
      height: 48px;
      width: 100%;
      background-color: #F7F7F7;
      color: #535353;
      font-size: 14px;
      padding: 0 10px 0 120px;
      border: solid 1px #E0E0E0;
      border-radius: 5px; }
      .updatePhoneNumberModal .controlGroup .enterPhoneNumber:focus {
        box-shadow: none; }
    .updatePhoneNumberModal .controlGroup .errorMessage {
      color: #EB5857;
      font-size: 14px;
      margin-top: 5px; }
    .updatePhoneNumberModal .controlGroup .country-input {
      border: none;
      background: url(../img/Search.svg) 10px center no-repeat;
      font-size: 14px;
      font-weight: 400;
      color: #535353; }
      .updatePhoneNumberModal .controlGroup .country-input:focus {
        outline: none; }

.sucessModal {
  padding: 0 !important; }
  .sucessModal .modal-dialog {
    max-width: 600px;
    align-items: center; }
  .sucessModal .modal-content {
    flex-direction: column !important;
    padding-bottom: 0 !important;
    border-radius: 10px;
    margin-top: 0; }
  .sucessModal .modal-title {
    text-align: left;
    font-size: 20px;
    font-weight: 500;
    color: #303030;
    display: flex;
    align-items: center; }
    .sucessModal .modal-title .icon {
      display: inline-block;
      margin-right: 10px; }
  .sucessModal .modal-body,
  .sucessModal .modal-footer {
    width: 100%;
    border: none; }
  .sucessModal .modal-footer {
    justify-content: flex-end;
    padding-top: 0;
    padding-top: 20px;
    padding-bottom: 20px; }
    .sucessModal .modal-footer .laterBtn {
      background: transparent;
      border: none;
      color: #303030;
      font-size: 14px;
      font-weight: 500;
      margin-right: 5px; }
  .sucessModal .modal-body {
    padding: 20px 25px;
    display: flex;
    justify-content: flex-start;
    align-items: center; }
    .sucessModal .modal-body .sucessMessage {
      color: #595959;
      font-size: 16px;
      font-weight: 400; }
  .sucessModal .enableAuthenticationBtn {
    min-width: 90px;
    padding: 0 15px;
    height: 36px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    border: none; }

.errorModal {
  padding: 0 !important; }
  .errorModal .modal-dialog {
    max-width: 580px;
    align-items: center; }
  .errorModal .modal-content {
    flex-direction: column !important;
    padding-bottom: 0;
    border-radius: 10px;
    margin-top: 0; }
  .errorModal .modal-title {
    text-align: center; }
  .errorModal .modal-body,
  .errorModal .modal-footer {
    width: 100%;
    border: none; }
  .errorModal .modal-footer {
    justify-content: center;
    padding-top: 0;
    padding-bottom: 40px; }
  .errorModal .modal-body {
    padding-top: 20px;
    padding-left: 50px;
    padding-right: 50px;
    min-height: 150px;
    display: flex;
    justify-content: center;
    align-items: center; }
    .errorModal .modal-body .errorMessage {
      color: #EB5857; }
      .errorModal .modal-body .errorMessage .icon {
        margin-right: 10px;
        font-size: 18px; }
  .errorModal .trayAgainBtn {
    min-width: 90px;
    padding: 0 15px;
    height: 40px;
    border-radius: 5px;
    font-size: 14px;
    border: none;
    background-color: #f7941d;
    color: #ffffff;
    margin-left: 5px; }
  .errorModal .cancelBtn {
    min-width: 90px;
    padding: 0 15px;
    height: 38px;
    border-radius: 5px;
    font-size: 14px;
    border: none;
    background-color: #ffffff;
    color: #595959;
    border: 1px solid #747474;
    margin-right: 5px; }

.disableFAmodel {
  padding: 0 !important; }
  .disableFAmodel .modal-dialog {
    max-width: 580px;
    align-items: center; }
  .disableFAmodel .modal-content {
    flex-direction: column !important;
    padding-bottom: 0;
    border-radius: 10px;
    margin-top: 0; }
  .disableFAmodel .modal-title {
    text-align: center; }
  .disableFAmodel .modal-body,
  .disableFAmodel .modal-footer {
    width: 100%;
    border: none; }
  .disableFAmodel .modal-footer {
    justify-content: center;
    padding-top: 0;
    padding-bottom: 40px; }
  .disableFAmodel .modal-body {
    padding-top: 20px;
    padding-left: 30px;
    padding-right: 30px;
    min-height: 120px;
    color: #595959;
    font-size: 18px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center; }
  .disableFAmodel .noBtn {
    min-width: 90px;
    padding: 0 15px;
    height: 40px;
    border-radius: 5px;
    font-size: 14px;
    border: none;
    background-color: #8020CF;
    color: #ffffff;
    margin-left: 5px; }
  .disableFAmodel .yesBtn {
    min-width: 90px;
    padding: 0 15px;
    height: 38px;
    border-radius: 5px;
    font-size: 14px;
    border: none;
    background-color: #ffffff;
    color: #595959;
    border: 1px solid #8020CF;
    margin-right: 5px; }

.attemptModal {
  padding: 0 !important; }
  .attemptModal .modal-dialog {
    max-width: 580px;
    align-items: center; }
  .attemptModal .modal-content {
    background-color: #ffffff !important;
    flex-direction: column !important;
    padding-bottom: 0;
    border-radius: 10px;
    margin-top: 0; }
  .attemptModal .modal-header {
    width: 100%;
    border: none; }
  .attemptModal .modal-title {
    text-align: center;
    width: 100%;
    font-size: 18px;
    color: #595959; }
  .attemptModal .modal-body,
  .attemptModal .modal-footer {
    width: 100%;
    border: none; }
  .attemptModal .modal-footer {
    justify-content: center;
    padding-top: 0;
    padding-bottom: 40px; }
  .attemptModal .modal-body {
    padding-top: 20px;
    padding-left: 35px;
    padding-right: 35px;
    min-height: 120px;
    display: flex;
    justify-content: center;
    align-items: center; }
    .attemptModal .modal-body .errorMessage {
      color: #EB5857; }
      .attemptModal .modal-body .errorMessage .icon {
        margin-right: 10px;
        font-size: 18px; }
  .attemptModal .okBtn {
    min-width: 90px;
    padding: 0 15px;
    height: 38px;
    border-radius: 5px;
    font-size: 14px;
    border: none;
    background-color: #f7941d;
    color: #ffffff;
    margin-right: 5px; }

.user-type-card {
  width: 100%;
  height: 109px;
  border-radius: 10px;
  border: 1px solid #F7F7F7;
  background: #F9F2FF;
  box-shadow: 1px 1px 3px 0px rgba(22, 22, 22, 0.08);
  padding: 9px;
  margin-top: 10px; }
  .user-type-card .card-content {
    border-radius: 10px;
    background: #FFF;
    width: 100%;
    height: 91px;
    padding: 20px 27px;
    display: flex;
    align-items: center;
    justify-content: space-between; }
    .user-type-card .card-content .icon-square {
      width: 53.196px;
      height: 53.196px;
      margin-right: 15px;
      background-color: #F9F2FF;
      border-radius: 15px;
      display: flex;
      align-items: center;
      justify-content: center; }
    .user-type-card .card-content .plan-name {
      color: #4E4576;
      font-size: 20px;
      font-weight: 600;
      line-height: 25.859px; }
    .user-type-card .card-content .plan-description {
      color: #535353;
      font-size: 16px;
      font-weight: 400;
      line-height: 125%; }
    .user-type-card .card-content .price {
      color: #210835;
      font-size: 35px;
      font-weight: 600;
      line-height: 57.819px;
      margin-right: 15px; }
    .user-type-card .card-content .buy-btn {
      width: 97px;
      height: 39px;
      border-radius: 84.1px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: linear-gradient(90deg, #8020CF 0%, #FF00F8 100%);
      color: #FFF;
      font-size: 16px;
      font-weight: 600;
      line-height: 17.521px;
      border: none !important; }
    .user-type-card .card-content .contact-btn {
      width: 116px;
      height: 39px;
      border-radius: 84.1px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: white;
      color: #303030;
      font-size: 16px;
      font-weight: 600;
      line-height: 17.521px;
      border: 1.5px solid #FF00F8 !important; }

.account-breadcrumb {
  display: flex;
  align-items: center;
  margin-bottom: 20px; }
  .account-breadcrumb .account-breadcrumb-main {
    color: #535353;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    cursor: pointer;
    margin-right: 15px; }
  .account-breadcrumb .account-breadcrumb-sub {
    color: #303030;
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    margin-left: 15px; }

.api-usage-info-card {
  border-radius: 10px;
  background: #FFF;
  box-shadow: 2px 5px 5px 0px rgba(22, 22, 22, 0.08);
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding: 10px 30px; }
  .api-usage-info-card .name {
    color: #535353;
    font-size: 18px;
    font-weight: 600;
    line-height: 20px;
    margin-left: 20px; }
    .api-usage-info-card .name span {
      font-size: 16px;
      font-style: italic;
      font-weight: 600; }
  .api-usage-info-card .myProgress {
    width: 460px;
    background-color: #ddd;
    border-radius: 48px;
    position: relative;
    margin-right: 10px; }
    .api-usage-info-card .myProgress .myBar {
      width: 0%;
      height: 30px;
      background-color: #8020CF;
      border-radius: 48px; }
    .api-usage-info-card .myProgress .myCount {
      position: absolute;
      color: white;
      font-size: 14px;
      font-weight: 600;
      line-height: 16px;
      left: 220px;
      top: 8px; }
  .api-usage-info-card .explanation-text {
    color: #303030;
    font-size: 14px;
    font-weight: 400;
    margin-top: 12px; }
    .api-usage-info-card .explanation-text span {
      font-weight: 600; }
  .api-usage-info-card .upgradeButton {
    width: 100px;
    height: 36px;
    display: flex;
    align-items: center;
    border: none;
    justify-content: center;
    background: linear-gradient(90deg, #8020CF 0%, #FF00F8 100%);
    border-radius: 35px;
    color: #FFFFFF; }

.api-request-credits {
  background-color: #F7F7F7;
  border-radius: 10px;
  padding: 5px; }
  .api-request-credits .api-request-credits-header {
    border-radius: 10px;
    background: #F7F7F7;
    padding: 17px 35px;
    display: flex;
    align-items: center;
    justify-content: space-between; }
    .api-request-credits .api-request-credits-header .header {
      color: #4E4576;
      font-size: 14px;
      font-weight: 600;
      line-height: 16px; }
  .api-request-credits .api-request-credits-row {
    border-radius: 6px;
    background: #FFF;
    padding: 17px 35px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1px; }
    .api-request-credits .api-request-credits-row .detail {
      color: #535353;
      font-size: 14px;
      font-weight: 600;
      line-height: 20px;
      width: max-content;
      max-width: 75%;
      display: flex;
      align-items: center; }
      .api-request-credits .api-request-credits-row .detail .detail-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%; }
    .api-request-credits .api-request-credits-row .customTooltip {
      left: -80px;
      top: -35px; }
    .api-request-credits .api-request-credits-row .credit {
      color: #210835;
      font-size: 16px;
      font-weight: 600;
      line-height: 20px; }

.testedCardLayout {
  display: flex;
  justify-content: flex-start; }

.cardList {
  display: flex;
  justify-content: space-between;
  gap: 20px; }

.testedCard {
  position: relative;
  width: 277px;
  height: 277px;
  background: #D9D9D9;
  border-radius: 5px;
  overflow: hidden; }

.cardTextArea {
  position: relative;
  width: 277px;
  height: 104px;
  left: 0;
  top: -104px;
  background: rgba(0, 0, 0, 0.65);
  border-radius: 5px;
  padding: 15px 10px; }

.testedFileMessage {
  width: 600px;
  height: 20px;
  font-family: "Euclid Circular B";
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 18px; }
  .testedFileMessage span {
    color: #535353;
    font-family: "Euclid Circular B";
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0;
    text-align: left; }

.testedCardText {
  font-family: "Euclid Circular B";
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #FFFFFF;
  margin-bottom: 30px; }

.objectDetectionPerceptions .statusclass {
  font-family: "Euclid Circular B";
  font-weight: 400;
  color: #00875A;
  display: inline-flex;
  font-size: 13px;
  margin: 0; }

.objectDetectionPerceptions .statusWfc,
.objectDetectionPerceptions .statusWfi {
  color: #f7941d; }

.objectDetectionPerceptions .cardContentArea .cardArea .eachPreceptionAreaContent {
  width: calc(25.3% - 25px);
  height: 335px; }
  @media (max-width: 1500px) {
    .objectDetectionPerceptions .cardContentArea .cardArea .eachPreceptionAreaContent {
      width: calc(33.3% - 25px); } }
  @media (max-width: 1200px) {
    .objectDetectionPerceptions .cardContentArea .cardArea .eachPreceptionAreaContent {
      width: 48.8%; } }
  @media (max-width: 767px) {
    .objectDetectionPerceptions .cardContentArea .cardArea .eachPreceptionAreaContent {
      width: 100%;
      max-width: 100%;
      height: auto; } }

.objectDetectionPerceptions .cardContentArea .cardArea ul li.cdiWrapper {
  justify-content: space-between; }

.objectDetectionPerceptions .cardContentArea .preceptionAreaTopTraininglog {
  flex-direction: row; }
  .objectDetectionPerceptions .cardContentArea .preceptionAreaTopTraininglog a {
    text-decoration: underline;
    font-size: 12px; }
    .objectDetectionPerceptions .cardContentArea .preceptionAreaTopTraininglog a:focus {
      color: #f7941d !important;
      text-decoration: underline; }

.objectDetectionPerceptions .cardContentArea .preceptionAreaTopMode {
  width: auto;
  margin-right: -10px; }
  @media (max-width: 480px) {
    .objectDetectionPerceptions .cardContentArea .preceptionAreaTopMode {
      margin-right: 0; } }

.objectDetectionPerceptions .cardContentArea .preceptionAreaTopStatus {
  margin-left: 10px; }

.objectDetectionPerceptions .cardContentArea .preceptionAreaTopTraininglog {
  margin-bottom: 10px;
  height: 40px; }

.card3 .cardArea .eachPreceptionAreaContent:nth-child(3n) {
  margin-right: 0; }

.card4 .cardArea .eachPreceptionAreaContent:nth-child(4n) {
  margin-right: 0; }

@media (max-width: 1500px) {
  .card4 .cardArea .eachPreceptionAreaContent:nth-child(3n) {
    margin-right: 0; }
  .card4 .cardArea .eachPreceptionAreaContent:nth-child(4n) {
    margin-right: 25px; } }

@media (max-width: 1200px) {
  .card4 .cardArea .eachPreceptionAreaContent {
    margin-right: 0; }
    .card4 .cardArea .eachPreceptionAreaContent:nth-child(3n), .card4 .cardArea .eachPreceptionAreaContent:nth-child(4n) {
      margin-right: 0; } }

.userAccountInformation .userArea {
  min-height: 550px; }
  @media (min-width: 1600px) {
    .userAccountInformation .userArea {
      min-height: 700px; } }

.userWrapper {
  display: flex;
  justify-content: flex-start;
  margin-top: 10px;
  flex-wrap: wrap; }
  @media (max-width: 768px) {
    .userWrapper {
      padding: 0 10px; } }
  @media (max-width: 480px) {
    .userWrapper {
      justify-content: space-between; } }
  .userWrapper .userInfoCard {
    display: inline-flex;
    flex-direction: column;
    padding: 45px 20px 15px 20px;
    box-shadow: 0px 4px 19px rgba(176, 175, 175, 0.15);
    border-radius: 5px;
    background: #ffffff;
    margin-right: 25px;
    /*width: calc(25.3% - 25px);*/
    margin-bottom: 25px;
    width: 200px; }
    @media (max-width: 1200px) {
      .userWrapper .userInfoCard {
        /*width: 48.8%;*/
        margin-bottom: 30px;
        /*justify-content: space-between;*/
        margin-right: 18px;
        margin-bottom: 20px; }
        .userWrapper .userInfoCard:nth-child(4) {
          margin-right: 0; } }
    @media (max-width: 768px) {
      .userWrapper .userInfoCard {
        margin-bottom: 30px;
        width: 31%; }
        .userWrapper .userInfoCard:nth-child(3n) {
          margin-right: 0; }
        .userWrapper .userInfoCard:nth-child(4) {
          margin-right: 18px; } }
    @media (max-width: 480px) {
      .userWrapper .userInfoCard {
        margin-right: 0;
        width: 48%; }
        .userWrapper .userInfoCard:nth-child(4) {
          margin-right: 0; } }
  .userWrapper h5 {
    color: #595959;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 5px; }
  .userWrapper .subTitle {
    color: #595959;
    font-size: 16px;
    font-weight: 400;
    margin: 0; }

.obmcArea .cardArea .cdiWrapper {
  font-size: 16px; }
  @media (max-width: 1200px) {
    .obmcArea .cardArea .cdiWrapper {
      font-size: 14px; } }

.obmcArea .cardArea .preceptionAreaTopName a {
  font-size: 16px;
  max-width: 100%; }
  @media (max-width: 1200px) {
    .obmcArea .cardArea .preceptionAreaTopName a {
      font-size: 14px; } }

.datasetcardContentArea .detectionImage {
  border-bottom: solid 3px #138bfa; }
  .datasetcardContentArea .detectionImage label {
    background: #badeff;
    margin: 0;
    font-size: 13px;
    border-radius: 0 8px 0 0;
    font-weight: 500;
    color: #138bfa;
    padding: 4px 10px;
    position: absolute;
    bottom: 0;
    left: 0; }

@media (max-width: 1500px) {
  .datasetcardContentArea .cardArea .eachPreceptionAreaContent {
    width: calc(33.3% - 25px); } }

@media (max-width: 1200px) {
  .datasetcardContentArea .cardArea .eachPreceptionAreaContent {
    width: 48.8%;
    margin-right: 0; } }

@media (max-width: 767px) {
  .datasetcardContentArea .cardArea .eachPreceptionAreaContent {
    width: 100%;
    max-width: 100%;
    height: auto; } }

.datasetcardContentArea .preceptionAreaTopName a {
  color: #138bfa; }

.datasetcardContentArea .cardArea .eachPreceptionAreaContent .cdiWrapper {
  justify-content: flex-start; }
  .datasetcardContentArea .cardArea .eachPreceptionAreaContent .cdiWrapper .id {
    border-right: solid 1px #a39e9e;
    justify-content: flex-start;
    width: 24%;
    margin-right: 15px; }

.imagecardContentArea .cardArea .eachPreceptionAreaContent {
  height: 310px; }
  @media (max-width: 1500px) {
    .imagecardContentArea .cardArea .eachPreceptionAreaContent {
      width: calc(33.3% - 25px); } }
  @media (max-width: 1200px) {
    .imagecardContentArea .cardArea .eachPreceptionAreaContent {
      width: 48.8%;
      margin-right: 0; } }
  @media (max-width: 767px) {
    .imagecardContentArea .cardArea .eachPreceptionAreaContent {
      width: 100%;
      max-width: 100%;
      height: auto; } }

.imagecardContentArea .cardArea .cdiWrapper .id {
  border-right: solid 1px #a39e9e; }

.imagecardContentArea .cardArea .cdiWrapper .trainingMode {
  margin-right: auto;
  margin-left: 5px; }
  @media (min-width: 1680px) {
    .imagecardContentArea .cardArea .cdiWrapper .trainingMode {
      margin-left: 10px; } }
  .imagecardContentArea .cardArea .cdiWrapper .trainingMode a {
    color: #595959; }

.imagecardContentArea .preceptionAreaTopTraining {
  margin-bottom: 10px; }

.facecardContentArea .cardArea .eachPreceptionAreaContent {
  height: 310px; }
  @media (max-width: 1500px) {
    .facecardContentArea .cardArea .eachPreceptionAreaContent {
      width: calc(33.3% - 25px); } }
  @media (max-width: 1200px) {
    .facecardContentArea .cardArea .eachPreceptionAreaContent {
      width: 48.8%;
      margin-right: 0; } }
  @media (max-width: 767px) {
    .facecardContentArea .cardArea .eachPreceptionAreaContent {
      width: 100%;
      max-width: 100%;
      height: auto; } }

.facecardContentArea .cardArea .cdiWrapper .id {
  border-right: solid 1px #a39e9e; }

.facecardContentArea .cardArea .cdiWrapper .trainingMode {
  margin-right: auto;
  margin-left: 5px; }
  @media (min-width: 1680px) {
    .facecardContentArea .cardArea .cdiWrapper .trainingMode {
      margin-left: 10px; } }
  .facecardContentArea .cardArea .cdiWrapper .trainingMode a {
    color: #595959; }

.facecardContentArea .preceptionAreaTopTraining {
  margin-bottom: 10px; }

.imageClassificationCardArea .cardArea .eachPreceptionAreaContent {
  height: auto; }

.cardLayout {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  margin-left: 0;
  margin-right: -40px;
  margin-bottom: 0;
  color: #787878;
  /*.loaderGif {
    position: absolute;
    top: 2px;
  }*/ }
  .cardLayout .mCustomScrollBox {
    width: 100%; }
  @media (max-width: 767px) {
    .cardLayout {
      margin-top: 10px; } }
  .cardLayout li[class*='col-'] {
    margin-bottom: 15px;
    padding: 0;
    margin-right: 10px;
    background: #FFFFFF;
    box-shadow: 2px 5px 5px rgba(22, 22, 22, 0.08);
    border-radius: 8px; }
    @media (max-width: 1200px) {
      .cardLayout li[class*='col-'] {
        padding: 0 10px; } }
  .cardLayout li:nth-child(4n) .cardActionsDropdown .actionItemList li .alertTooltip {
    left: auto;
    right: 0; }
  @media (max-width: 1500px) {
    .cardLayout li:nth-child(3n) .cardActionsDropdown .actionItemList li .alertTooltip {
      left: auto;
      right: 0; } }
  .cardLayout .col-lg-3-5 {
    flex: 0 0 19%;
    max-width: 19%; }
    @media (max-width: 1600px) {
      .cardLayout .col-lg-3-5 {
        flex: 0 0 24%;
        max-width: 24%; } }
    @media (max-width: 1200px) {
      .cardLayout .col-lg-3-5 {
        flex: 0 0 50%;
        max-width: 50%; } }
    @media (max-width: 767px) {
      .cardLayout .col-lg-3-5 {
        flex: 0 0 100%;
        max-width: 100%; } }
  .cardLayout .col-lg-3 {
    flex: 0 0 24%;
    max-width: 24%; }
    @media (max-width: 1600px) {
      .cardLayout .col-lg-3 {
        flex: 0 0 32%;
        max-width: 32%; } }
    @media (max-width: 1200px) {
      .cardLayout .col-lg-3 {
        flex: 0 0 50%;
        max-width: 50%; } }
    @media (max-width: 767px) {
      .cardLayout .col-lg-3 {
        flex: 0 0 100%;
        max-width: 100%; } }
  .cardLayout .col-lg-2 {
    flex: 0 0 19.2%;
    max-width: 19.2%; }
    @media screen and (max-width: 1500px) {
      .cardLayout .col-lg-2 {
        flex: 0 0 19.2%;
        max-width: 19.2%; } }
    @media screen and (max-width: 1367px) {
      .cardLayout .col-lg-2 {
        flex: 0 0 24%;
        max-width: 24%; } }
  .cardLayout .innerCardContainer {
    background: #ffffff;
    border-radius: 8px;
    min-height: 220px;
    height: auto; }
  .cardLayout .detectionImage {
    width: 100%;
    height: 135px;
    max-height: 135px;
    overflow: hidden;
    position: relative; }
    @media (max-width: 1400px) {
      .cardLayout .detectionImage {
        height: 160px;
        max-height: 160px; } }
    .cardLayout .detectionImage .image-waiting-text {
      position: absolute;
      top: 30%;
      color: white;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      z-index: 0;
      pointer-events: none; }
      .cardLayout .detectionImage .image-waiting-text img {
        width: auto;
        height: auto; }
    .cardLayout .detectionImage a {
      width: 100%;
      height: 100%;
      display: flex;
      position: relative; }
    .cardLayout .detectionImage img {
      width: 100%;
      height: 100%;
      object-fit: cover; }
    .cardLayout .detectionImage .modelLikes {
      display: inline-flex;
      padding: 10px; }
  .cardLayout .imgWrapper {
    overflow: hidden;
    border-radius: 8px 8px 0 0; }
  .cardLayout .contentWrapper {
    padding: 10px 0;
    position: relative;
    display: flex;
    align-items: flex-start;
    flex-direction: column; }
    @media (max-width: 480px) {
      .cardLayout .contentWrapper {
        padding: 10px 10px 20px; } }
  .cardLayout .modelName {
    font-weight: 600;
    font-size: 16px;
    color: #595959;
    width: 100%;
    margin-bottom: 5px;
    line-height: 20px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    padding: 0 10px; }
    .cardLayout .modelName a {
      color: #303030 !important;
      font-weight: 600;
      max-width: 100%;
      display: inline-block;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden; }
    .cardLayout .modelName .max45 {
      max-width: 45%; }
      @media (max-width: 1400px) {
        .cardLayout .modelName .max45 {
          max-width: 40%; } }
  .cardLayout .groupWrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 10px;
    min-height: 24px; }
  .cardLayout .datasetName {
    margin: 0;
    width: 70%;
    height: 30px;
    font-size: 14px;
    font-family: "Euclid Circular B";
    font-weight: 400;
    color: #535353;
    display: flex;
    align-items: center;
    white-space: nowrap; }
    .cardLayout .datasetName span {
      display: inline-block;
      max-width: 180px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      color: #595959;
      font-family: "latosemibold"; }
      @media (max-width: 1680px) {
        .cardLayout .datasetName span {
          max-width: 160px; } }
      @media (max-width: 1500px) {
        .cardLayout .datasetName span {
          max-width: 180px; } }
      .cardLayout .datasetName span.type-format {
        text-transform: capitalize; }
  .cardLayout .imageChatName span {
    color: #8020CF; }
  .cardLayout .lessPhotoCount,
  .cardLayout .statusComplete,
  .cardLayout .statusInvalid {
    margin-left: 10px;
    display: inline-flex;
    align-items: center; }
    .cardLayout .lessPhotoCount img,
    .cardLayout .statusComplete img,
    .cardLayout .statusInvalid img {
      max-width: 14px;
      max-height: 12px; }
  .cardLayout .statusComplete .loaderGif {
    max-height: 20px;
    max-width: 20px; }
  .cardLayout .cdiWrapper {
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    width: 100%;
    height: 30px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap; }
    @media (min-width: 1400px) {
      .cardLayout .cdiWrapper {
        font-size: 14px; } }
    .cardLayout .cdiWrapper .classes,
    .cardLayout .cdiWrapper .date,
    .cardLayout .cdiWrapper .id,
    .cardLayout .cdiWrapper .owner {
      display: inline-flex;
      line-height: 15px;
      align-items: center; }
    .cardLayout .cdiWrapper .date,
    .cardLayout .cdiWrapper .id {
      justify-content: center; }
    .cardLayout .cdiWrapper .id span {
      margin-right: 2px; }
    .cardLayout .cdiWrapper .empty {
      display: none; }
    .cardLayout .cdiWrapper .owner {
      justify-content: flex-end; }
      .cardLayout .cdiWrapper .owner .onwerName {
        margin-right: 5px;
        font-weight: 500; }
    .cardLayout .cdiWrapper .group {
      white-space: nowrap;
      display: inline-flex;
      align-items: center;
      font-weight: 500;
      font-size: 12px; }
    .cardLayout .cdiWrapper .devider {
      width: 4px;
      height: 4px;
      border-radius: 8px;
      margin: 2px 6px 0;
      background: #787878;
      display: inline-flex; }
    .cardLayout .cdiWrapper.flexStart {
      justify-content: flex-start; }
      .cardLayout .cdiWrapper.flexStart .mlr15 {
        margin: 0 15px; }
        @media (max-width: 1400px) {
          .cardLayout .cdiWrapper.flexStart .mlr15 {
            margin: 0 10px; } }
  .cardLayout .owner .group {
    white-space: nowrap;
    display: inline-flex;
    align-items: center; }
  .cardLayout .owner .devider {
    width: 4px;
    height: 4px;
    border-radius: 8px;
    margin: 2px 6px 0;
    background: #787878;
    display: inline-flex; }
  .cardLayout .owner .customTooltip {
    right: 0;
    left: auto;
    max-width: 380px;
    min-width: auto; }
  .cardLayout .reviews {
    display: none !important;
    color: #f7941d;
    margin-bottom: 18px;
    font-size: 12px; }
    .cardLayout .reviews .ratting {
      margin-right: 10px;
      margin-right: 5px; }
      .cardLayout .reviews .ratting .star {
        width: 12px;
        height: 12px;
        display: inline-block;
        background: url(../img/ch-star-orange.svg) 0 0 no-repeat;
        margin-right: 2px; }
      .cardLayout .reviews .ratting .starBorder {
        width: 12px;
        height: 12px;
        display: inline-block;
        background: url(../img/ch-star-orange-border.svg) 0 0 no-repeat;
        margin-right: 2px; }
  .cardLayout .trainingLog {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap; }
    .cardLayout .trainingLog a {
      text-decoration: underline;
      font-size: 12px;
      line-height: 20px;
      margin-left: 10px; }
    .cardLayout .trainingLog .note {
      font-size: 14px;
      margin-left: 0;
      color: #EC7A19; }
  .cardLayout .statusGroup {
    display: inline-flex;
    align-items: center; }
  .cardLayout .trainingStatus {
    font-size: 14px; }
    .cardLayout .trainingStatus p {
      margin: 0; }
  .cardLayout .trainingMode a {
    color: #595959; }
  .cardLayout .owner {
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 12px;
    position: relative;
    padding: 0 10px;
    margin-top: 10px; }
    .cardLayout .owner .sharedWith {
      margin-right: auto; }
    .cardLayout .owner .onwerName {
      margin-right: 5px;
      margin-left: auto; }
    .cardLayout .owner .email {
      width: 100%;
      display: inline-block;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden; }
      @media (max-width: 480px) {
        .cardLayout .owner .email {
          max-width: 150px; } }
      .cardLayout .owner .email .customTooltip {
        bottom: 22px;
        right: 0px;
        pointer-events: auto;
        z-index: 910; }
      .cardLayout .owner .email:hover .customTooltip {
        visibility: visible;
        opacity: 1; }
    .cardLayout .owner.flexStart {
      justify-content: flex-start;
      width: auto; }
  .cardLayout .preceptionAreaAccuracy {
    font-size: 12px;
    color: #595959;
    font-weight: "latomedium";
    font-weight: 500; }
    @media (min-width: 1400px) {
      .cardLayout .preceptionAreaAccuracy {
        font-size: 14px; } }
    .cardLayout .preceptionAreaAccuracy .vAccuracy {
      color: #0367A6; }
  .cardLayout .detectionColor {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center; }
    .cardLayout .detectionColor label {
      margin: 0;
      font-size: 12px;
      color: #787878;
      font-weight: 400; }
      @media (min-width: 1400px) {
        .cardLayout .detectionColor label {
          font-size: 14px; } }
  .cardLayout .deepTrainStatus {
    color: #00875A;
    font-weight: 600;
    font-size: 13px;
    line-height: 20px;
    padding: 0 10px; }
  .cardLayout .status {
    margin-bottom: 15px;
    font-size: 14px; }
  .cardLayout .bottomWrapper {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px; }
    .cardLayout .bottomWrapper .id {
      font-size: 12px;
      color: #787878; }
      @media (min-width: 1400px) {
        .cardLayout .bottomWrapper .id {
          font-size: 14px; } }
  .cardLayout .actions {
    position: absolute;
    right: 15px;
    top: 10px; }
    .cardLayout .actions a {
      margin: 0 0 0 15px; }
      .cardLayout .actions a:first-child {
        margin-left: 0; }
    .cardLayout .actions a img {
      height: 18px; }
    .cardLayout .actions .alertTooltip,
    .cardLayout .actions .customTooltip {
      top: 25px;
      right: 0;
      pointer-events: none; }
    .cardLayout .actions .alertDesable {
      background: transparent;
      border-color: transparent; }
      .cardLayout .actions .alertDesable:hover, .cardLayout .actions .alertDesable:focus {
        background: transparent;
        border-color: transparent; }
  .cardLayout .mb0 {
    margin-bottom: 0; }

.gridLayout.active {
  display: flex; }

.gridLayout .mCSB_container {
  display: flex;
  flex-wrap: wrap; }

.gridLayout .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden,
.gridLayout .mCSB_inside > .mCSB_container {
  margin-right: 0; }

.gridLayout .mCSB_scrollTools {
  opacity: 0; }

.gridLayout .mCustomScrollBox:hover > .mCSB_scrollTools {
  opacity: 0; }

.gridLayout .modelLikes {
  display: none;
  cursor: pointer; }

.ListLayout {
  margin-right: 0;
  margin-left: 0;
  background: #ffffff;
  border-radius: 0 0 6px 6px;
  margin-top: 0;
  height: 635px;
  padding: 0 0 50px;
  overflow: hidden;
  display: none; }
  @media screen and (max-width: 1700px) {
    .ListLayout {
      height: 670px; } }
  .ListLayout .displayFlex {
    display: flex !important; }
  .ListLayout.active {
    display: flex !important; }
  .ListLayout .mCSB_scrollTools {
    opacity: 0.75; }
  .ListLayout .mCSB_container {
    min-height: 550px;
    padding-top: 10px; }
  .ListLayout li[class*="col-"] {
    margin: 0;
    border-bottom: solid 1px #F6F6F7;
    padding: 10px 15px;
    box-shadow: none; }
  .ListLayout .eachCardlayout {
    max-width: 100%;
    flex: 0 0 100%; }
    .ListLayout .eachCardlayout .cardActionsDropdown .actionItemList {
      bottom: 30px;
      top: auto; }
    .ListLayout .eachCardlayout.down .cardActionsDropdown .actionItemList {
      top: 25px;
      bottom: auto; }
  .ListLayout .detectionImage {
    width: 50px;
    height: 50px;
    max-height: 50px;
    min-width: 50px;
    min-height: 50px;
    border-radius: 8px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: #f5f5f5; }
  .ListLayout .innerCardContainer {
    min-height: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    box-shadow: none;
    border-radius: 0; }
  .ListLayout .imgWrapper {
    border-radius: 0;
    margin-right: 10px;
    width: 50px; }
  .ListLayout .imgWrapper,
  .ListLayout .contentWrapper {
    display: inline-flex; }
  .ListLayout .contentWrapper {
    flex-direction: row;
    width: 97%;
    padding: 0;
    align-items: center; }
    .ListLayout .contentWrapper li {
      font-size: 14px; }
  .ListLayout .modelName {
    height: auto !important;
    margin-bottom: 0 !important;
    border: 0;
    width: 30%; }
  .ListLayout .cdiWrapper {
    width: 70%;
    font-size: 14px;
    color: #5071A6;
    font-weight: 600; }
    .ListLayout .cdiWrapper .classes,
    .ListLayout .cdiWrapper .id,
    .ListLayout .cdiWrapper .modelLikes {
      font-size: 12px;
      font-weight: 500;
      display: inline-flex;
      width: 28.5%;
      justify-content: center;
      padding-right: 10px; }
    .ListLayout .cdiWrapper .classesList, .ListLayout .cdiWrapper .idList {
      font-size: 14px;
      font-weight: 500;
      display: inline-flex;
      width: 28.5%;
      justify-content: center;
      color: #535353; }
    .ListLayout .cdiWrapper .modelLikes {
      position: static; }
    .ListLayout .cdiWrapper .id span {
      display: none; }
    .ListLayout .cdiWrapper .date {
      justify-content: center; }
    .ListLayout .cdiWrapper .group {
      width: 85%;
      justify-content: space-between; }
    .ListLayout .cdiWrapper .devider {
      display: none; }
    .ListLayout .cdiWrapper .modelLikes {
      font-weight: 600;
      color: #0A2E60;
      font-size: 14px; }
      .ListLayout .cdiWrapper .modelLikes .likeCount {
        margin-left: 5px; }
    .ListLayout .cdiWrapper.flexStart {
      justify-content: flex-start; }
  .ListLayout .owner {
    margin-top: 0; }
    .ListLayout .owner .email {
      max-width: 160px; }

.ListlayoutTopbar {
  margin-bottom: 0;
  border-radius: 6px 6px 0 0;
  padding: 15px 30px 15px 15px;
  background: #ffffff;
  border-bottom: solid 1px #F6F6F7;
  display: none; }
  .ListlayoutTopbar .tableFilterBtn {
    color: #4E4576; }
    .ListlayoutTopbar .tableFilterBtn:hover, .ListlayoutTopbar .tableFilterBtn:focus {
      color: #4E4576 !important; }
  .ListlayoutTopbar .contentWrapper {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    color: #535353;
    font-size: 14px;
    font-weight: 600; }
  .ListlayoutTopbar .modelName {
    width: 35%; }
  .ListlayoutTopbar .cdiWrapper {
    width: 70%;
    display: inline-flex;
    /*.copyUID {
      width: 20%;
      text-align: right;
    }*/ }
    .ListlayoutTopbar .cdiWrapper .classes,
    .ListlayoutTopbar .cdiWrapper .id,
    .ListlayoutTopbar .cdiWrapper .like {
      width: 28.5%;
      text-align: center; }
    .ListlayoutTopbar .cdiWrapper .group {
      width: 85%;
      display: inline-flex;
      justify-content: space-between; }

.smallCardLayout .cardActionsDropdown .actionItemList li .alertTooltip {
  min-width: auto;
  border-radius: 10px; }

.smallCardLayout li:nth-child(4n) .cardActionsDropdown .actionItemList li .alertTooltip {
  left: 10px;
  right: auto; }

@media (max-width: 1500px) {
  .smallCardLayout li:nth-child(3n) .cardActionsDropdown .actionItemList li .alertTooltip {
    left: 10px;
    right: auto; } }

.objectDetectionPerceptions .cardLayout .contentWrapper {
  padding-bottom: 15px; }

.objectDetectionPerceptions .cardLayout .detectionImage a {
  align-items: center; }

.objectDetectionPerceptions .cardLayout .detectionImage label {
  background: #ffffff;
  margin: 0;
  font-size: 13px;
  border-radius: 0 8px 0 0;
  font-weight: 500;
  color: #f7941d;
  padding: 4px 10px;
  position: absolute;
  bottom: 0;
  left: 0; }

.objectDetectionPerceptions .listLayout .contentWrapper {
  padding-bottom: 0; }

.objectDetectionPerceptions .invalidMFE {
  position: relative;
  color: #D72C0D; }
  .objectDetectionPerceptions .invalidMFE .customTooltip {
    top: 25px;
    left: 70%;
    white-space: normal;
    min-width: 240px;
    font-size: 11px;
    border-radius: 8px;
    text-align: center;
    padding: 8px 5px;
    text-align: left; }
  .objectDetectionPerceptions .invalidMFE:hover .customTooltip {
    visibility: visible;
    opacity: 1; }

.myimageClassification .cardLayout .contentWrapper {
  padding-bottom: 15px; }

.myimageClassification .cardLayout .detectionImage a {
  align-items: center; }

.myFacialRecognition .cardLayout .contentWrapper {
  padding-bottom: 15px; }

.myFacialRecognition .cardLayout .detectionImage a {
  align-items: center; }

.imageClassificationDetailWrapper .cardLayout .detectionImage a {
  align-items: center; }

.imageClassificationDetailWrapper .cardLayout .modelName a {
  max-width: 70%; }

.imageClassificationDetailWrapper .cardLayout .actions .alertTooltip {
  width: 160px;
  word-break: break-word;
  white-space: normal;
  padding: 5px 10px;
  height: auto; }

.imageClassificationDetailWrapper .train_status_deep {
  display: inline-flex;
  align-items: center;
  color: #535353;
  font-weight: 400;
  font-size: 13px;
  line-height: 20px; }
  .imageClassificationDetailWrapper .train_status_deep span {
    font-weight: 600;
    color: #6726DA; }

.trainingFacialListWrapper .cardLayout .detectionImage a {
  align-items: center;
  cursor: pointer; }

.trainingFacialListWrapper .cardLayout .modelName a {
  max-width: 70%; }

.trainingFacialListWrapper .cardLayout .actions .alertTooltip {
  min-width: 160px;
  word-break: break-word;
  white-space: normal;
  padding: 5px 15px;
  height: auto; }

.trainingFacialListWrapper .cardLayout .lessPhotoCount {
  margin-left: 0; }

.trainingFacialListWrapper .cardLayout li:nth-child(4n) .cardActionsDropdown .actionItemList li .alertTooltip {
  top: 30px;
  left: 10px; }

.trainingFacialListWrapper .cardLayout li:nth-child(6n) .cardActionsDropdown .actionItemList li .alertTooltip {
  right: 10px;
  left: auto; }

@media (max-width: 1500px) {
  .trainingFacialListWrapper .cardLayout li:nth-child(3n) .cardActionsDropdown .actionItemList li .alertTooltip {
    left: 10px; }
  .trainingFacialListWrapper .cardLayout li:nth-child(4n) .cardActionsDropdown .actionItemList li .alertTooltip {
    right: 10px;
    left: auto; }
  .trainingFacialListWrapper .cardLayout li:nth-child(6n) .cardActionsDropdown .actionItemList li .alertTooltip {
    left: 10px; } }

.perceptionsDetailListWrapper .cardLayout .detectionImage a {
  align-items: center; }

.trainingObjectListWrapper .cardLayout .detectionImage a {
  align-items: center; }

.trainingObjectListWrapper .detectionImage {
  border-bottom: solid 3px #138bfa; }
  .trainingObjectListWrapper .detectionImage label {
    background: #badeff;
    margin: 0;
    font-size: 13px;
    border-radius: 0 8px 0 0;
    font-weight: 500;
    color: #138bfa;
    padding: 4px 10px;
    position: absolute;
    bottom: 0;
    left: 0; }

.trainingObjectListWrapper .cardActionsDropdown .alertDesable a {
  pointer-events: none; }

.imageDetailTrainingArea .status {
  color: #00875A;
  width: 100%;
  margin: 0;
  padding: 0 10px;
  font-family: "Euclid Circular B";
  font-weight: 600;
  font-size: 13px;
  line-height: 20px; }

.imageDetailTrainingArea .lessPhotoCount {
  font-family: "Euclid Circular B";
  font-weight: 600;
  font-size: 13px;
  color: #f7941d; }

.smCardlayout {
  min-height: 450px;
  align-content: flex-start; }
  .smCardlayout .innerCardContainer {
    min-height: auto;
    display: flex;
    border-radius: 5px;
    box-shadow: 2px 5px 20px rgba(65, 65, 65, 0.08); }
  .smCardlayout .detectionImage {
    width: 100px;
    height: 70px;
    max-height: 70px; }
    .smCardlayout .detectionImage img {
      height: 100%; }
  .smCardlayout .imgWrapper {
    display: inline-flex;
    border-radius: 5px 0 0 5px; }
  .smCardlayout .contentWrapper {
    display: inline-flex;
    justify-content: center;
    width: 72%;
    padding: 0 15px; }
  .smCardlayout .modelName {
    margin: 0;
    padding: 0;
    border: none;
    color: #303030;
    font-weight: 400;
    font-size: 14px;
    word-wrap: anywhere;
    word-break: break-all; }

.customPagination {
  margin-top: 20px; }
  .customPagination ul {
    margin: 0;
    display: flex; }
    .customPagination ul li {
      display: inline-flex;
      margin: 0 2px; }
      .customPagination ul li a, .customPagination ul li .current, .customPagination ul li .ellipse {
        min-width: 32px;
        height: 32px;
        color: #0A2E60;
        border-radius: 3px;
        font-size: 14px;
        padding: 0 5px;
        transition: all 0.2s ease-in;
        box-shadow: none;
        border: none;
        background: transparent;
        display: flex;
        justify-content: center;
        align-items: center; }
        .customPagination ul li a:hover, .customPagination ul li a:focus, .customPagination ul li .current:hover, .customPagination ul li .current:focus, .customPagination ul li .ellipse:hover, .customPagination ul li .ellipse:focus {
          color: #ffffff !important;
          box-shadow: none;
          background-color: #0A2E60; }
      .customPagination ul li.active a, .customPagination ul li.active .current, .customPagination ul li.active .ellipse {
        background: #0A2E60;
        color: #ffffff;
        box-shadow: none; }
    .customPagination ul .disabled .prev {
      background: url(../img/arrow-small-left-dark-blue.svg) center center no-repeat !important;
      font-size: 0;
      border: none; }
    .customPagination ul .disabled .next {
      background: url(../img/arrow-small-right-dark-blue.svg) center center no-repeat !important;
      font-size: 0;
      border: none; }
    .customPagination ul .next,
    .customPagination ul .prev {
      font-size: 0;
      transition: all 0.2s ease-in; }
      .customPagination ul .next:hover, .customPagination ul .next:focus,
      .customPagination ul .prev:hover,
      .customPagination ul .prev:focus {
        font-size: 0;
        background-color: transparent; }
    .customPagination ul .next {
      background: url(../img/arrow-small-right-dark-blue.svg) center center no-repeat !important; }
    .customPagination ul .prev {
      background: url(../img/arrow-small-left-dark-blue.svg) center center no-repeat !important; }
    .customPagination ul .ellipse {
      font-size: 16px;
      color: #0A2E60; }

.customPagination.flexEnd ul {
  justify-content: flex-end; }

.objectPerceptionDetail .idBar .devider {
  width: 1px;
  height: 18px;
  background-color: #9B9B9B;
  display: inline-flex; }

.objectPerceptionDetail .idBar .idGroup,
.objectPerceptionDetail .idBar .devider {
  margin-right: 20px; }

@media (min-width: 1200px) {
  .preTrainedPreception .cardLayout .cdiWrapper.flexStart {
    justify-content: space-between; } }

@media (min-width: 1400px) {
  .preTrainedPreception .listLayout .cdiWrapper.flexStart {
    justify-content: flex-start; } }

.userCircle {
  display: inline-block;
  border-radius: 50%; }
  .userCircle .circleInner {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    text-decoration: none;
    height: 22px;
    width: 22px;
    font-size: 12px; }
  .userCircle .darkOrange {
    color: #4E147E; }
  .userCircle .white {
    color: white; }

.orange {
  background-color: #F2E9FA; }

.purple {
  background-color: #735FEC; }

.green {
  background-color: #4F97A3; }

.cardActionsDropdown {
  position: relative;
  z-index: 98;
  border-radius: 5px; }
  .cardActionsDropdown .alertTooltip {
    top: 50px; }
  .cardActionsDropdown .actionBtn {
    /*background: rgba(0, 0, 0, 0.55) url(../img/down-arrow-white.svg) center center no-repeat;*/
    background: url(../img/option-ellips.svg) right center no-repeat;
    border-radius: 30px;
    height: 25px;
    width: 25px;
    border: 0;
    color: #D8D8D8;
    font-size: 16px;
    padding: 0;
    /*background-size: 20px;*/
    cursor: pointer; }
    .cardActionsDropdown .actionBtn.active {
      /*background: rgba(0, 0, 0, 0.55) url(../img/up-arrow-white.svg) center center no-repeat;*/
      /*background-size: 20px;*/ }
  .cardActionsDropdown.alertDesable {
    /*background-color: rgba(155, 155, 155, 0.1);*/ }
    .cardActionsDropdown.alertDesable .actionBtn {
      /*background: rgba(0, 0, 0, 0.55) url(../img/down-arrow-white.svg) center center no-repeat;
      background-size: 20px;*/
      opacity: 0.5; }
  .cardActionsDropdown .actionItemList {
    position: absolute;
    top: 25px;
    right: 0;
    padding: 10px 0;
    min-width: 130px;
    background: #ffffff;
    border-radius: 6px;
    display: none;
    box-shadow: 0px 3px 5px rgba(6, 0, 41, 0.2);
    margin: 0;
    text-align: left;
    width: 213px; }
    .cardActionsDropdown .actionItemList li a {
      padding: 8px 15px 8px 45px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      color: #535353;
      font-size: 14px;
      transition: all 0.2s ease-in;
      margin: 0;
      white-space: nowrap;
      font-family: "Euclid Circular B";
      font-weight: 500; }
    .cardActionsDropdown .actionItemList li:hover {
      /*background-color: rgba(19, 139, 250, 0.1);
        color: $blue;*/
      background-color: #EBEFF2;
      color: #535353; }
    .cardActionsDropdown .actionItemList li.alertDesable {
      background: transparent; }
      .cardActionsDropdown .actionItemList li.alertDesable a {
        cursor: default;
        color: #535353;
        opacity: 0.5; }
        .cardActionsDropdown .actionItemList li.alertDesable a:hover, .cardActionsDropdown .actionItemList li.alertDesable a:focus {
          cursor: default;
          color: #535353; }
    .cardActionsDropdown .actionItemList li .alertTooltip {
      right: 0;
      top: 30px;
      min-width: max-content;
      padding: 5px 10px; }
    .cardActionsDropdown .actionItemList .shareDataset a,
    .cardActionsDropdown .actionItemList .shareEmailModel a {
      background: url(../img/ch-share-dark-gray.svg) 15px center no-repeat; }
      .cardActionsDropdown .actionItemList .shareDataset a:hover,
      .cardActionsDropdown .actionItemList .shareEmailModel a:hover {
        background: url(../img/ch-share-dark-gray.svg) 15px center no-repeat; }
    .cardActionsDropdown .actionItemList .shareDataset.active a,
    .cardActionsDropdown .actionItemList .shareEmailModel.active a {
      background: url(../img/ch-share-dark-gray.svg) 15px center no-repeat;
      /*background-color: rgba(19, 139, 250, 0.21);
          color: $blue;*/ }
    .cardActionsDropdown .actionItemList .shareDataset.alertDesable a,
    .cardActionsDropdown .actionItemList .shareEmailModel.alertDesable a {
      background: url(../img/ch-share-dark-gray.svg) 15px center no-repeat; }
    .cardActionsDropdown .actionItemList .copyDataset a {
      background: url(../img/ch-copy-dark-gray.svg) 15px center no-repeat;
      background-size: 18px; }
      .cardActionsDropdown .actionItemList .copyDataset a:hover {
        background: url(../img/ch-copy-dark-gray.svg) 15px center no-repeat;
        background-size: 18px; }
    .cardActionsDropdown .actionItemList .copyDataset.active a {
      background: url(../img/ch-copy-dark-gray.svg) 15px center no-repeat;
      background-size: 18px;
      /*background-color: rgba(19, 139, 250, 0.21);
          color: $blue;*/ }
    .cardActionsDropdown .actionItemList .copyDataset.alertDesable a {
      background: url(../img/ch-copy-gray.svg) 15px center no-repeat;
      background-size: 18px; }
    .cardActionsDropdown .actionItemList .copyuidModel a {
      background: url(../img/copy-clipboard-gray.svg) 15px center no-repeat;
      background-size: 18px; }
      .cardActionsDropdown .actionItemList .copyuidModel a:hover {
        background: url(../img/copy-clipboard-gray.svg) 15px center no-repeat;
        background-size: 18px; }
    .cardActionsDropdown .actionItemList .copyuidModel.active a {
      background: url(../img/copy-clipboard-blue.svg) 15px center no-repeat;
      background-size: 18px;
      /*background-color: rgba(19, 139, 250, 0.21);
          color: $blue;*/ }
    .cardActionsDropdown .actionItemList .copyuidModel.alertDesable a {
      background: url(../img/copy-clipboard-gray.svg) 15px center no-repeat;
      background-size: 18px; }
    .cardActionsDropdown .actionItemList .apiScriptModel a {
      background: url(../img/ch-apiscript-gray.svg) 15px center no-repeat;
      background-size: 18px; }
      .cardActionsDropdown .actionItemList .apiScriptModel a:hover {
        background: url(../img/ch-apiscript-gray.svg) 15px center no-repeat;
        background-size: 18px; }
    .cardActionsDropdown .actionItemList .apiScriptModel.active a {
      background: url(../img/ch-apiscript-gray.svg) 15px center no-repeat;
      background-size: 18px;
      /*background-color: rgba(19, 139, 250, 0.21);
          color: $blue;*/ }
    .cardActionsDropdown .actionItemList .apiScriptModel.alertDesable a {
      background: url(../img/ch-apiscript-gray.svg) 15px center no-repeat;
      background-size: 18px; }
    .cardActionsDropdown .actionItemList .downloadDataset a,
    .cardActionsDropdown .actionItemList .downloadModel a {
      background: url(../img/ch-download-dark-gray.svg) 15px center no-repeat; }
      .cardActionsDropdown .actionItemList .downloadDataset a:hover,
      .cardActionsDropdown .actionItemList .downloadModel a:hover {
        background: url(../img/ch-download-dark-gray.svg) 15px center no-repeat; }
    .cardActionsDropdown .actionItemList .downloadDataset.active a,
    .cardActionsDropdown .actionItemList .downloadModel.active a {
      background: url(../img/ch-download-dark-gray.svg) 15px center no-repeat;
      /*background-color: rgba(19, 139, 250, 0.21);
          color: $blue;*/ }
    .cardActionsDropdown .actionItemList .downloadDataset.alertDesable a,
    .cardActionsDropdown .actionItemList .downloadModel.alertDesable a {
      background: url(../img/ch-download-dark-gray.svg) 15px center no-repeat; }
    .cardActionsDropdown .actionItemList .renameDataset a,
    .cardActionsDropdown .actionItemList .renameModel a {
      background: url(../img/ch-rename-dark-gray.svg) 15px center no-repeat; }
      .cardActionsDropdown .actionItemList .renameDataset a:hover,
      .cardActionsDropdown .actionItemList .renameModel a:hover {
        background: url(../img/ch-rename-dark-gray.svg) 15px center no-repeat; }
    .cardActionsDropdown .actionItemList .renameDataset.active a,
    .cardActionsDropdown .actionItemList .renameModel.active a {
      background: url(../img/ch-rename-dark-gray.svg) 15px center no-repeat;
      /*background-color: rgba(19, 139, 250, 0.21);
          color: $blue;*/ }
    .cardActionsDropdown .actionItemList .renameDataset.alertDesable a,
    .cardActionsDropdown .actionItemList .renameModel.alertDesable a {
      background: url(../img/ch-rename-dark-gray.svg) 15px center no-repeat; }
    .cardActionsDropdown .actionItemList .deleteDataset a,
    .cardActionsDropdown .actionItemList .deleteModel a {
      background: url(../img/ch-delete-dark-gray.svg) 15px center no-repeat; }
      .cardActionsDropdown .actionItemList .deleteDataset a:hover,
      .cardActionsDropdown .actionItemList .deleteModel a:hover {
        background: url(../img/ch-delete-dark-gray.svg) 15px center no-repeat; }
    .cardActionsDropdown .actionItemList .deleteDataset.active a,
    .cardActionsDropdown .actionItemList .deleteModel.active a {
      background: url(../img/ch-delete-dark-gray.svg) 15px center no-repeat;
      /*background-color: rgba(19, 139, 250, 0.21);
          color: $blue;*/ }
    .cardActionsDropdown .actionItemList .deleteDataset.alertDesable a,
    .cardActionsDropdown .actionItemList .deleteModel.alertDesable a {
      background: url(../img/ch-delete-dark-gray.svg) 15px center no-repeat; }
    .cardActionsDropdown .actionItemList .createModel a {
      background: url(../img/ch-create-model-dark-gray.svg) 15px center no-repeat;
      background-size: 19px; }
      .cardActionsDropdown .actionItemList .createModel a:hover {
        background: url(../img/ch-create-model-dark-gray.svg) 15px center no-repeat;
        background-size: 19px; }
    .cardActionsDropdown .actionItemList .createModel.active a {
      background: url(../img/ch-create-model-dark-gray.svg) 15px 7px no-repeat;
      background-size: 19px;
      /*background-color: rgba(19, 139, 250, 0.21);
          color: $blue;*/ }
    .cardActionsDropdown .actionItemList .createModel.alertDesable a {
      background: url(../img/ch-create-model-dark-gray.svg) 15px center no-repeat;
      background-size: 19px; }
    .cardActionsDropdown .actionItemList .viewLogModel a {
      background: url(../img/view-log.svg) 15px center no-repeat;
      background-size: 18px; }
      .cardActionsDropdown .actionItemList .viewLogModel a:hover {
        background: url(../img/view-log.svg) 15px center no-repeat;
        background-size: 18px; }
    .cardActionsDropdown .actionItemList .viewLogModel.active a {
      background: url(../img/view-log.svg) 15px 7px no-repeat;
      background-size: 18px;
      /*background-color: rgba(19, 139, 250, 0.21);
          color: $blue;*/ }
    .cardActionsDropdown .actionItemList .viewLogModel.alertDesable a {
      background: url(../img/view-log.svg) 15px center no-repeat;
      background-size: 18px; }
    .cardActionsDropdown .actionItemList .changeThumbnailModel a {
      background: url(../img/ch-change-thumbnail.svg) 15px center no-repeat;
      background-size: 18px; }
      .cardActionsDropdown .actionItemList .changeThumbnailModel a:hover {
        background: url(../img/ch-change-thumbnail.svg) 15px center no-repeat;
        background-size: 18px; }
    .cardActionsDropdown .actionItemList .changeThumbnailModel.active a {
      background: url(../img/ch-change-thumbnail.svg) 15px 7px no-repeat;
      background-size: 18px;
      /*background-color: rgba(19, 139, 250, 0.21);
          color: $blue;*/ }
    .cardActionsDropdown .actionItemList .changeThumbnailModel.alertDesable a {
      background: url(../img/ch-change-thumbnail.svg) 15px center no-repeat;
      background-size: 18px; }

.imageClassificationDetailWrapper .cardActionsDropdown .actionBtn,
.trainingFacialListWrapper .cardActionsDropdown .actionBtn {
  width: 25px;
  height: 25px;
  background-size: 18px; }

.preTrainedPreception .cardLayout .modelName {
  height: 50px;
  justify-content: space-between;
  border-bottom: solid 0px #D8D8D8;
  border-width: 0.5px;
  font-family: "Euclid Circular B";
  font-weight: 600; }
  .preTrainedPreception .cardLayout .modelName a {
    font-size: 16px;
    white-space: normal;
    overflow: visible;
    text-overflow: unset; }
    .preTrainedPreception .cardLayout .modelName a:first-child {
      max-width: 87%;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      display: -webkit-box;
      overflow: hidden;
      word-break: break-word; }

.preTrainedPreception .cardLayout .copyUID {
  font-size: 12px;
  font-weight: 400;
  padding-left: 20px;
  height: 20px;
  color: #787878;
  background: url(../img/ch-copy-dark-gray.svg) left center no-repeat;
  background-size: 14px; }
  .preTrainedPreception .cardLayout .copyUID .customTooltip {
    top: 25px;
    right: 0; }

.preTrainedPreception .ListLayout .copyUID {
  font-size: 14px;
  color: #535353; }

.preTrainedPreception .ListLayout .modelName {
  border: none; }

.preTrainedPreception .ListLayout .detectionImage .modelLikes {
  display: none; }

.pmObjectModels .cardLayout .modelName {
  height: 40px;
  margin-bottom: 5px; }

.pmObjectModels .cardLayout .eachCardlayout:nth-child(7) .devider,
.pmObjectModels .cardLayout .eachCardlayout:nth-child(9) .devider {
  margin: 0 5px; }

.pmObjectModels .ListLayout .modelName {
  height: auto;
  margin-bottom: 0; }

.customModels .cardLayout .modalName {
  margin-bottom: 5px; }

.customModels .cardLayout hr {
  height: 1;
  width: 100%;
  display: block;
  background-color: #D8D8D8;
  border: none;
  margin: 10px 0; }

.customModels .ListlayoutTopbar {
  border-bottom: solid 2px #F6F6F7;
  padding: 20px 15px 20px 15px; }
  .customModels .ListlayoutTopbar li {
    padding: 0 10px;
    text-align: left; }
  .customModels .ListlayoutTopbar .innerContainer {
    width: 100%;
    padding: 0; }
  .customModels .ListlayoutTopbar .modelName {
    width: 30%;
    padding-left: 0; }
  .customModels .ListlayoutTopbar .datasetName {
    width: 20%; }
  .customModels .ListlayoutTopbar .addedModel {
    width: 20%; }
  .customModels .ListlayoutTopbar .denseMode {
    width: 15%; }
  .customModels .ListlayoutTopbar .trainingMode {
    width: 12%; }
  .customModels .ListlayoutTopbar .modelDate {
    width: 10%; }
  .customModels .ListlayoutTopbar .modelId {
    width: 10%; }
  .customModels .ListlayoutTopbar .owner {
    width: 20%; }
  .customModels .ListlayoutTopbar .sharedWith {
    width: 10%;
    text-align: center; }
  .customModels .ListlayoutTopbar .actions {
    width: 5%; }

.customModels .listLayout .eachcardLayout {
  border-bottom: solid 2px #F6F6F7;
  padding-right: 0; }
  .customModels .listLayout .eachcardLayout.relative {
    position: relative;
    z-index: 99; }

.customModels .listLayout .preceptionAreaTopStatus {
  width: auto; }

.customModels .listLayout .modelName {
  width: 30%;
  flex-wrap: nowrap;
  align-items: center; }
  .customModels .listLayout .modelName .model_name_value {
    width: 100%; }
  .customModels .listLayout .modelName .statusGroup {
    display: inline-flex; }
  .customModels .listLayout .modelName .trainingStatus {
    display: block;
    width: 100%; }
  .customModels .listLayout .modelName .detectionImage {
    margin-right: 10px; }
    .customModels .listLayout .modelName .detectionImage label {
      display: none; }

.customModels .listLayout .datasetName {
  width: 20%; }
  .customModels .listLayout .datasetName .imageChatName {
    display: flex; }
    .customModels .listLayout .datasetName .imageChatName span {
      position: relative;
      display: inline-flex;
      color: #8020CF;
      font-weight: 400;
      overflow: visible; }
      .customModels .listLayout .datasetName .imageChatName span .tm {
        top: 4px; }

.customModels .listLayout .addedModel {
  width: 20%; }

.customModels .listLayout .denseMode {
  width: 15%; }
  .customModels .listLayout .denseMode .modeDropdown {
    width: 125px;
    min-width: unset; }

.customModels .listLayout .trainingMode {
  width: 12%; }

.customModels .listLayout .modelDate {
  width: 10%; }

.customModels .listLayout .modelId {
  width: 10%; }

.customModels .listLayout .owner {
  width: 20%; }

.customModels .listLayout .sharedWith {
  width: 10%;
  text-align: center; }

.customModels .listLayout .actions {
  width: 5%;
  position: static;
  text-align: center; }

.customModels .listLayout .cardActionsDropdown .actionBtn {
  background: url(../img/option-vellips-darkgray.svg) center center no-repeat; }

.customModels .listLayout .contentWrapper {
  width: 100%; }
  .customModels .listLayout .contentWrapper li {
    padding: 0 10px; }
  .customModels .listLayout .contentWrapper .modelName {
    padding-left: 0; }
    .customModels .listLayout .contentWrapper .modelName .group {
      width: 80%; }

.customModels .listLayout .datasetName {
  font-family: "Euclid Circular B";
  font-weight: 400;
  font-size: 13px;
  color: #535353;
  flex-direction: column;
  align-items: flex-start;
  height: auto; }
  .customModels .listLayout .datasetName span {
    display: block;
    font-family: "Euclid Circular B";
    font-weight: 600;
    font-size: 14px;
    color: #535353; }

.customModels .listLayout .modelDate {
  font-family: "Euclid Circular B";
  font-weight: 400;
  font-size: 14px;
  color: #535353; }

.customModels .listLayout .modelId {
  font-family: "Euclid Circular B";
  font-weight: 400;
  font-size: 14px;
  color: #535353; }

.customModels .listLayout .owner {
  font-family: "Euclid Circular B";
  font-weight: 500;
  font-size: 14px;
  color: #535353; }

.customModels .listLayout .trainingLog {
  width: 100%;
  min-height: unset;
  flex-wrap: wrap; }
  .customModels .listLayout .trainingLog .note {
    margin-left: 0;
    width: 85%; }

.customModels .listLayout .statusclass {
  width: auto;
  display: inline-flex; }

.customModels .listLayout .trainingMode a {
  display: block; }

.customModels .gridLayout .trainingLog {
  width: 70%; }

.customModels #imageModels .ListlayoutTopbar .modelName {
  width: 35%; }

.customModels #imageModels .ListlayoutTopbar .modelDate {
  width: 20%; }

.customModels #imageModels .ListlayoutTopbar .modelId {
  width: 15%; }

.customModels #imageModels .ListlayoutTopbar .owner {
  width: 25%; }

.customModels #imageModels .ListlayoutTopbar .sharedWith {
  width: 15%; }

.customModels #imageModels .ListlayoutTopbar .actions {
  width: 5%; }

.customModels #imageModels .listLayout .modelName {
  width: 35%; }

.customModels #imageModels .listLayout .modelDate {
  width: 20%; }

.customModels #imageModels .listLayout .modelId {
  width: 15%; }

.customModels #imageModels .listLayout .owner {
  width: 25%; }

.customModels #imageModels .listLayout .sharedWith {
  width: 15%; }

.customModels #imageModels .listLayout .actions {
  width: 5%; }

.customModels #faceModels .ListlayoutTopbar .modelName {
  width: 35%; }

.customModels #faceModels .ListlayoutTopbar .trainingMode {
  width: 15%; }

.customModels #faceModels .ListlayoutTopbar .modelDate {
  width: 15%; }

.customModels #faceModels .ListlayoutTopbar .modelId {
  width: 15%; }

.customModels #faceModels .ListlayoutTopbar .owner {
  width: 25%; }

.customModels #faceModels .ListlayoutTopbar .sharedWith {
  width: 20%;
  text-align: center; }

.customModels #faceModels .ListlayoutTopbar .actions {
  width: 5%; }

.customModels #faceModels .listLayout .modelName {
  width: 35%; }

.customModels #faceModels .listLayout .modelDate {
  width: 15%; }

.customModels #faceModels .listLayout .trainingMode {
  width: 15%; }

.customModels #faceModels .listLayout .modelId {
  width: 15%; }

.customModels #faceModels .listLayout .owner {
  width: 25%; }

.customModels #faceModels .listLayout .sharedWith {
  width: 20%; }

.customModels #faceModels .listLayout .actions {
  width: 5%; }

.customModels #modelGroups .ListlayoutTopbar .modelName {
  width: 15%; }

.customModels #modelGroups .ListlayoutTopbar .trainingMode {
  width: 35%; }

.customModels #modelGroups .ListlayoutTopbar .modelDate {
  width: 15%; }

.customModels #modelGroups .ListlayoutTopbar .owner {
  width: 15%; }

.customModels #modelGroups .ListlayoutTopbar .sharedWith {
  width: 15%; }

.customModels #modelGroups .ListlayoutTopbar .actions {
  width: 5%; }

.customModels #modelGroups .listLayout .modelName {
  width: 15%; }

.customModels #modelGroups .listLayout .trainingMode {
  width: 35%; }
  .customModels #modelGroups .listLayout .trainingMode span {
    color: #0052CC;
    font-weight: 500; }

.customModels #modelGroups .listLayout .modelDate {
  width: 15%; }

.customModels #modelGroups .listLayout .owner {
  width: 15%;
  padding: 0 !important; }

.customModels #modelGroups .listLayout .sharedWith {
  width: 15%; }

.customModels #modelGroups .listLayout .actions {
  width: 5%; }

.customModels #modelGroups .listLayout .contentWrapper li {
  padding: 0 !important; }

.trainingModelsCard {
  background: #ffffff;
  box-shadow: 0px 3.30792px 21.5015px rgba(180, 180, 180, 0.25);
  border-radius: 5px;
  padding: 25px 30px;
  margin-top: 28px;
  width: 100%;
  max-width: 601px;
  display: none; }
  .trainingModelsCard .cardTitle {
    color: #4E4576;
    margin-bottom: 25px;
    font-size: 20px;
    font-family: "Euclid Circular B";
    font-weight: 500; }
    .trainingModelsCard .cardTitle .icon {
      margin-right: 10px; }
    .trainingModelsCard .cardTitle sup.tm {
      top: -12px; }
  .trainingModelsCard .cardSubtitle {
    font-family: "Euclid Circular B";
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 600;
    color: #535353; }
  .trainingModelsCard p {
    font-size: 14px;
    font-family: "Euclid Circular B";
    font-weight: 400;
    color: #595959; }
    .trainingModelsCard p strong {
      font-family: "Euclid Circular B";
      font-weight: 700;
      color: #8020CF; }
  .trainingModelsCard .buttonBar {
    display: flex;
    justify-content: flex-end;
    align-items: center; }
  .trainingModelsCard button {
    font-family: "latobold";
    min-width: 144px; }
    .trainingModelsCard button .icon {
      margin-right: 10px; }
  .trainingModelsCard .importModelsBtn {
    margin-left: 20px; }
    .trainingModelsCard .importModelsBtn .alertTooltip {
      top: 40px;
      right: 0;
      left: auto; }

.createDatasetModelsCard {
  background: #ffffff;
  box-shadow: 0px 3.30792px 21.5015px rgba(180, 180, 180, 0.25);
  border-radius: 5px;
  padding: 25px 30px;
  margin-top: 28px;
  width: 100%;
  max-width: 580px;
  display: none; }
  .createDatasetModelsCard .cardTitle {
    color: #4E4576;
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 500;
    display: flex;
    align-items: center; }
    .createDatasetModelsCard .cardTitle .icon {
      margin-right: 10px; }
  .createDatasetModelsCard .cardSubtitle {
    margin-bottom: 15px;
    font-size: 14px;
    font-weight: 500;
    color: #4E4576; }
  .createDatasetModelsCard h4 {
    margin-bottom: 10px;
    color: #535353;
    font-size: 16px;
    font-weight: 600; }
  .createDatasetModelsCard p {
    font-size: 14px;
    font-weight: 500;
    color: #595959;
    margin-bottom: 30px; }
    .createDatasetModelsCard p strong {
      font-weight: 700;
      color: #2C5A99; }
  .createDatasetModelsCard .buttonBar {
    display: flex;
    justify-content: flex-end;
    align-items: center; }
  .createDatasetModelsCard .importDatasetBtn {
    margin-left: 10px; }
  .createDatasetModelsCard button .icon {
    margin-right: 10px; }
  .createDatasetModelsCard .createDatasetBtn {
    margin-left: 12px; }

.scrollToTop {
  width: 50px;
  height: 50px;
  border: none;
  display: inline-block;
  /* Grays/G50 */
  background: #F6F6F7 url(../img/arrow-up-darkblue.svg) center center no-repeat;
  border-radius: 56px;
  position: fixed;
  right: 25px;
  bottom: 100px;
  box-shadow: 0px 4px 7px -1px rgba(0, 0, 0, 0.11), 0px 2px 4px -1px rgba(0, 0, 0, 0.07);
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s ease-in; }
  .scrollToTop.show {
    visibility: visible;
    opacity: 1; }

.modelLikes {
  position: absolute;
  top: 10px;
  right: 10px;
  height: 28px;
  border-radius: 5px;
  background: #ffffff;
  padding: 0 !important;
  display: inline-flex;
  justify-content: center;
  align-items: center; }
  .modelLikes .likeBtn {
    background: url(../img/thumb-like-border.svg) center center no-repeat;
    box-shadow: none;
    border: none;
    width: 32px;
    height: 28px;
    padding-right: 0 !important; }
    .modelLikes .likeBtn.liked {
      background: url(../img/thumb-like-solid.svg) center center no-repeat; }
  .modelLikes .likeCount:empty {
    display: none; }
  .modelLikes .likeCount {
    font-size: 14px;
    color: #525151;
    font-weight: 500;
    cursor: pointer;
    padding: 4px 8px 4px 0; }

.dataset .ListlayoutTopbar {
  border-bottom: solid 2px #F6F6F7;
  padding: 20px 15px 20px 15px; }
  .dataset .ListlayoutTopbar li {
    padding: 0 10px;
    text-align: left; }
  .dataset .ListlayoutTopbar .innerContainer {
    width: 100%;
    padding: 0; }
  .dataset .ListlayoutTopbar .datasetName {
    width: 20%;
    padding-left: 0; }
  .dataset .ListlayoutTopbar .datasetStatus {
    width: 20%; }
  .dataset .ListlayoutTopbar .annotationType {
    width: 14.5%;
    text-align: center; }
  .dataset .ListlayoutTopbar .datasetDate {
    width: 14.5%;
    text-align: center; }
  .dataset .ListlayoutTopbar .owner {
    width: 14.5%; }
  .dataset .ListlayoutTopbar .sharedWith {
    width: 14.5%;
    text-align: center; }
  .dataset .ListlayoutTopbar .actions {
    width: 2%; }

.dataset .listLayout {
  padding-top: 5px; }
  .dataset .listLayout .mCSB_container {
    padding-top: 5px; }
  .dataset .listLayout li {
    color: #595959; }
  .dataset .listLayout .eachcardLayout {
    border-bottom: solid 2px #F6F6F7;
    padding-right: 0; }
    .dataset .listLayout .eachcardLayout.relative {
      position: relative;
      z-index: 991; }
  .dataset .listLayout .innerCardContainer {
    min-height: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    box-shadow: none;
    border-radius: 0; }
  .dataset .listLayout .contentWrapper {
    width: 100%; }
    .dataset .listLayout .contentWrapper li {
      padding: 0 10px;
      display: inline-flex; }
  .dataset .listLayout .datasetName {
    width: 20%;
    padding-left: 0 !important;
    flex-wrap: nowrap;
    align-items: center;
    height: auto; }
    .dataset .listLayout .datasetName .dataset_name_value {
      font-size: 16px;
      font-weight: 500;
      color: #210835;
      max-width: 85%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: inline-block; }
    .dataset .listLayout .datasetName .detectionImage {
      margin-right: 10px;
      border: none;
      background-color: #f5f5f5; }
    .dataset .listLayout .datasetName .group {
      width: 80%;
      display: inline-flex;
      align-items: center; }
      .dataset .listLayout .datasetName .group .iconSucess,
      .dataset .listLayout .datasetName .group .iconWaiting {
        margin-left: 10px; }
  .dataset .listLayout .datasetStatus {
    width: 20%; }
    .dataset .listLayout .datasetStatus .statusSuccess {
      color: #00875A;
      font-style: normal;
      font-weight: 500;
      font-size: 14px;
      line-height: 16px; }
    .dataset .listLayout .datasetStatus .statusWaiting {
      color: #535353;
      font-style: normal;
      font-weight: 300;
      font-size: 14px;
      line-height: 16px; }
  .dataset .listLayout .annotationType {
    width: 14.5%;
    justify-content: center; }
  .dataset .listLayout .datasetDate {
    width: 14.5%;
    justify-content: center;
    color: #535353; }
  .dataset .listLayout .owner {
    width: 14.5%;
    color: #535353; }
  .dataset .listLayout .sharedWith {
    width: 14.5%;
    justify-content: center; }
  .dataset .listLayout .actions {
    width: 2%;
    position: static;
    justify-content: center; }
  .dataset .listLayout .cardActionsDropdown .actionBtn {
    background: url(../img/option-vellips-darkgray.svg) center center no-repeat; }
  .dataset .listLayout .cardActionsDropdown .actionItemList li {
    width: 100%;
    padding: 0;
    padding-right: 20px;
    padding-left: 5px;
    height: 40px; }
    .dataset .listLayout .cardActionsDropdown .actionItemList li a {
      font-family: "Euclid Circular B";
      width: 100%; }
  .dataset .listLayout .sharedWithPeopleThumbs {
    font-size: 14px;
    font-weight: 600;
    color: #5071A6; }
    .dataset .listLayout .sharedWithPeopleThumbs span:nth-child(4) {
      margin-right: 0; }

.dataset .create_datasetBtn {
  font-size: 16px;
  width: 156px;
  height: 44px; }

.dataset .nothingToSeeHere {
  background: #ffffff;
  padding: 100px 0; }

.mainPreTrainedPreception .ListLayout .mCSB_container {
  padding-bottom: 50px; }

.usageInformation .contentAreaTopBar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  color: #595959; }

.usageInformation h4 {
  margin: 0;
  color: #595959;
  font-size: 16px; }

.usageInformation .ui-datepicker-calendar {
  display: none; }

.usageInformation .date-picker {
  width: 145px;
  height: 30px;
  border: 1px solid #ECE9F1;
  border-radius: 4px;
  color: #11263C;
  font-size: 14px;
  padding-left: 10px;
  background: url(../img/ch-calendar-gray.svg) 90% center no-repeat; }

.apiCategory {
  background: #ffffff;
  box-shadow: 0px 4px 19px rgba(176, 175, 175, 0.25);
  border-radius: 13px;
  padding: 25px 25px 10px 25px;
  margin-bottom: 20px; }
  .apiCategory ul {
    margin: 0;
    height: 456px; }
    @media (min-width: 1400px) and (max-width: 1500px) {
      .apiCategory ul {
        height: 330px;
        overflow: hidden;
        padding-bottom: 20px;
        margin-right: -20px; }
        .apiCategory ul .mCSB_inside > .mCSB_container {
          margin-right: 30px; } }
    .apiCategory ul li {
      display: flex;
      justify-content: space-between;
      color: #595959;
      border-bottom: 1px solid #E3E5E6;
      font-size: 14px;
      font-weight: 400;
      padding: 14px 0; }
      .apiCategory ul li strong {
        font-weight: 400; }
      .apiCategory ul li.header {
        border-bottom: 2px solid #E3E5E6;
        color: #919699; }
        .apiCategory ul li.header strong {
          font-weight: 500; }
      .apiCategory ul li.footer {
        font-size: 16px;
        font-weight: 500;
        border: none; }
        .apiCategory ul li.footer strong {
          font-weight: 500; }

.overallApiUsage {
  background: #ffffff;
  box-shadow: 0px 4px 19px rgba(176, 175, 175, 0.25);
  border-radius: 13px;
  padding: 25px 25px 10px 25px;
  margin-bottom: 20px; }

.ui-datepicker {
  background: #ffffff;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0px 4px 13px #CECBCB;
  width: 270px; }

.ui-datepicker-calendar {
  display: none; }

.ui-datepicker-header {
  flex-wrap: wrap;
  margin-bottom: 15px;
  position: relative;
  align-items: center; }

.ui-datepicker-header,
.ui-datepicker-title {
  display: flex;
  justify-content: center; }

.ui-datepicker-prev {
  left: 0; }
  .ui-datepicker-prev span {
    background: url(../img/ch-prev-arrow-gray.svg) center center no-repeat; }

.ui-datepicker-next {
  right: 0; }
  .ui-datepicker-next span {
    background: url(../img/ch-next-arrow-gray.svg) center center no-repeat; }

.ui-datepicker-prev,
.ui-datepicker-next {
  position: absolute; }
  .ui-datepicker-prev span,
  .ui-datepicker-next span {
    font-size: 0;
    width: 20px;
    height: 20px;
    display: inline-flex; }

.ui-datepicker-month,
.ui-datepicker-year {
  border: 1px solid #ECE9F1;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  background: #ffffff url(../img/down-arrow-gray.svg) 90% center no-repeat;
  background-size: 20px;
  width: 80px;
  height: 30px;
  margin: 0 10px;
  border-radius: 5px;
  font-size: 14px;
  padding: 0 0 0 5px; }

.ui-datepicker-buttonpane {
  display: flex;
  justify-content: center; }
  .ui-datepicker-buttonpane button {
    margin: 0 10px;
    border: 0;
    background: transparent;
    border-radius: 5px;
    font-size: 16px;
    color: #595959;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 80px; }
  .ui-datepicker-buttonpane .ui-datepicker-close {
    background: rgba(19, 139, 250, 0.13);
    color: #138BFA;
    padding: 5px 10px;
    border: 0;
    font-weight: 500; }

.storage,
.trainingTime {
  background: #ffffff;
  box-shadow: 0px 4px 19px rgba(176, 175, 175, 0.25);
  border-radius: 13px;
  padding: 25px 25px 20px 25px;
  margin-bottom: 20px; }
  .storage h5,
  .trainingTime h5 {
    margin-bottom: 20px;
    color: #919699;
    font-size: 14px;
    padding: 10px 0;
    border-bottom: 2px solid #E3E5E6; }
  .storage .group,
  .trainingTime .group {
    display: flex;
    justify-content: space-between;
    align-items: center; }
  .storage .progressBar,
  .trainingTime .progressBar {
    width: 78%;
    margin: 0 auto; }
    @media (min-width: 1680px) {
      .storage .progressBar,
      .trainingTime .progressBar {
        width: 84%; } }
    .storage .progressBar label,
    .trainingTime .progressBar label {
      margin: 0;
      font-size: 14px;
      color: #AEAEAE; }
  .storage .progressTrack,
  .trainingTime .progressTrack {
    height: 10px;
    border-radius: 13px;
    background: #F1F1F1;
    overflow: hidden;
    margin: 5px 0; }
    .storage .progressTrack .progress,
    .trainingTime .progressTrack .progress {
      height: 10px;
      border-radius: 13px; }
    .storage .progressTrack .orange,
    .trainingTime .progressTrack .orange {
      /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fcae73+0,f79042+100 */
      background: #fcae73;
      /* Old browsers */
      background: -moz-linear-gradient(left, #fcae73 0%, #f79042 100%);
      /* FF3.6-15 */
      background: -webkit-linear-gradient(left, #fcae73 0%, #f79042 100%);
      /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(to right, #fcae73 0%, #f79042 100%);
      /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcae73', endColorstr='#f79042',GradientType=1 );
      /* IE6-9 */ }
    .storage .progressTrack .purple,
    .trainingTime .progressTrack .purple {
      /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b1a7f1+0,8679d4+100 */
      background: #b1a7f1;
      /* Old browsers */
      background: -moz-linear-gradient(left, #b1a7f1 0%, #8679d4 100%);
      /* FF3.6-15 */
      background: -webkit-linear-gradient(left, #b1a7f1 0%, #8679d4 100%);
      /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(to right, #b1a7f1 0%, #8679d4 100%);
      /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b1a7f1', endColorstr='#8679d4',GradientType=1 );
      /* IE6-9 */ }
  .storage .storageInGb,
  .trainingTime .storageInGb {
    color: #696969; }
    .storage .storageInGb big,
    .trainingTime .storageInGb big {
      font-size: 24px;
      line-height: 24px; }
    .storage .storageInGb small,
    .trainingTime .storageInGb small {
      font-size: 18px; }
  .storage dl,
  .trainingTime dl {
    display: flex; }
    .storage dl dt,
    .trainingTime dl dt {
      width: 67px;
      height: 69px;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      border-radius: 3px; }
    .storage dl dd,
    .trainingTime dl dd {
      display: inline-flex;
      margin-left: 10px;
      flex-wrap: wrap; }
      .storage dl dd label,
      .trainingTime dl dd label {
        width: 100%;
        color: #AEAEAE;
        font-size: 14px;
        margin: 10px 0 0; }
      .storage dl dd big, .storage dl dd small,
      .trainingTime dl dd big,
      .trainingTime dl dd small {
        color: #696969;
        font-weight: 500; }
      .storage dl dd big,
      .trainingTime dl dd big {
        font-size: 18px; }
      .storage dl dd small,
      .trainingTime dl dd small {
        font-size: 14px;
        line-height: 16px;
        margin-left: 1px; }
      .storage dl dd .time,
      .trainingTime dl dd .time {
        width: 100%;
        display: flex;
        align-items: flex-end;
        line-height: 20px; }
  .storage .modelTraining dt,
  .trainingTime .modelTraining dt {
    background: rgba(19, 139, 250, 0.12); }
  .storage .dataGeneration dt,
  .trainingTime .dataGeneration dt {
    background: rgba(162, 19, 250, 0.1); }
  .storage .videoAnnotation dt,
  .trainingTime .videoAnnotation dt {
    background: rgba(71, 66, 204, 0.12); }

.storage dl {
  width: 47%; }

.storage .files .icon {
  background: rgba(247, 148, 29, 0.14); }

.storage .models .icon {
  background: rgba(235, 88, 87, 0.14); }

.billing {
  background: #ffffff;
  box-shadow: 0px 4px 19px rgba(176, 175, 175, 0.25);
  border-radius: 13px;
  padding: 25px 25px 20px 25px; }
  .billing h5 {
    color: #595959;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 10px; }
  .billing .container {
    padding: 0 10px; }
  .billing .plan,
  .billing .cost {
    display: inline-flex;
    flex-direction: column; }
    .billing .plan label,
    .billing .cost label {
      color: #9B9B9B;
      font-size: 12px; }
    .billing .plan p,
    .billing .cost p {
      margin: 0;
      font-size: 14px;
      color: #595959; }
  .billing .plan {
    width: 40%; }
  .billing .enterpriseLicense {
    background: #F1F3F4;
    border-radius: 3px;
    padding: 15px;
    margin: 20px 0; }
    .billing .enterpriseLicense h4 {
      color: #595959;
      font-size: 14px;
      font-weight: 400;
      margin-bottom: 10px; }
    .billing .enterpriseLicense p {
      color: #9B9B9B;
      font-size: 12px;
      margin: 0; }
      .billing .enterpriseLicense p a {
        color: #138bfa;
        font-weight: 500; }
  .billing .planBenefits label {
    color: #9B9B9B;
    font-weight: 500;
    font-size: 12px; }
  .billing .planBenefits ul li {
    font-size: 12px;
    color: #595959;
    padding-left: 30px;
    line-height: 24px;
    background: url(../img/tick.svg) 5px center no-repeat; }

.paymentMethod {
  background: #ffffff;
  box-shadow: 0px 4px 19px rgba(176, 175, 175, 0.25);
  border-radius: 13px;
  padding: 25px 25px 20px 25px; }
  .paymentMethod h5 {
    color: #595959;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 10px; }
  .paymentMethod .stripe {
    border: 1px solid #D9D9D9;
    border-radius: 3px;
    padding: 15px 10px 10px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px; }
    .paymentMethod .stripe .stripeIcon {
      width: 80px;
      height: 50px;
      display: inline-flex;
      align-items: center;
      padding: 0 10px; }
    .paymentMethod .stripe .group {
      width: 80%; }
    .paymentMethod .stripe .topLink {
      display: flex;
      font-size: 12px;
      color: #AEAEAE;
      margin-bottom: 10px; }
      .paymentMethod .stripe .topLink a {
        margin-left: auto;
        color: #49C02B; }
    .paymentMethod .stripe .detailEntryArea {
      background: #F5F5F5;
      border-radius: 5px;
      height: 32px;
      width: 100%;
      overflow: hidden;
      padding-left: 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      display: flex; }
      .paymentMethod .stripe .detailEntryArea:before {
        position: absolute;
        left: 10px;
        content: '';
        width: 24px;
        height: 16px;
        background: #FFFFFF url(../img/card.svg) center center no-repeat;
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-radius: 3px; }
      .paymentMethod .stripe .detailEntryArea input {
        height: 26px;
        border: 0;
        background: transparent;
        padding: 2px 5px;
        font-size: 14px;
        color: #595959;
        display: inline-flex;
        align-items: center; }
      .paymentMethod .stripe .detailEntryArea .cardNumber {
        width: 200px; }
      .paymentMethod .stripe .detailEntryArea .expireDateAndMonth {
        width: 60px; }
      .paymentMethod .stripe .detailEntryArea .cvv {
        width: 40px; }
  .paymentMethod .paypal {
    border: 1px solid #D9D9D9;
    border-radius: 3px;
    padding: 15px 10px 15px 10px;
    display: flex;
    justify-content: space-between; }
    .paymentMethod .paypal .paypalIcon {
      width: 80px;
      height: 50px;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      padding: 0 10px; }
    .paymentMethod .paypal .group {
      width: 80%; }
    .paymentMethod .paypal .topLink {
      display: flex;
      font-size: 12px;
      color: #AEAEAE;
      margin-bottom: 10px; }
      .paymentMethod .paypal .topLink a {
        margin-left: auto;
        color: #138bfa; }
    .paymentMethod .paypal .noInfo {
      margin-bottom: 0; }

.paymentHistory {
  background: #ffffff;
  box-shadow: 0px 4px 19px rgba(176, 175, 175, 0.25);
  border-radius: 13px;
  padding: 25px 25px 20px 25px; }
  .paymentHistory a {
    color: #138bfa;
    font-size: 13px; }
  .paymentHistory h5 {
    color: #595959;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 10px; }
  .paymentHistory .table {
    margin: 10px 0 0; }
    .paymentHistory .table .thead {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #E7E7E7; }
      .paymentHistory .table .thead li {
        width: 25%;
        padding: 5px;
        font-size: 14px;
        color: #9B9B9B; }
      .paymentHistory .table .thead .description {
        width: 25%; }
      .paymentHistory .table .thead .pdf {
        width: 15%; }
    .paymentHistory .table .tbody .trow ul {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #E7E7E7; }
      .paymentHistory .table .tbody .trow ul li {
        width: 25%;
        padding: 10px 5px;
        color: #595959;
        font-size: 13px; }
        .paymentHistory .table .tbody .trow ul li a {
          color: #138bfa; }
      .paymentHistory .table .tbody .trow ul .description {
        width: 25%; }
      .paymentHistory .table .tbody .trow ul .pdf {
        width: 15%; }

.apiDatepicker .ui-datepicker {
  margin-top: 5px; }

.apiDatepicker_ .ui-datepicker,
.apiDatepicker_hide .ui-datepicker {
  margin-top: 5px;
  left: auto !important;
  right: 5%; }

.reportHistoryContentArea {
  background: #ffffff;
  box-shadow: 0px 4px 26px rgba(180, 180, 180, 0.25);
  border-radius: 6px;
  padding: 30px 25px;
  min-height: 740px; }
  @media (min-width: 1600px) {
    .reportHistoryContentArea {
      min-height: 840px; } }
  @media (max-width: 480px) {
    .reportHistoryContentArea {
      padding: 20px; } }
  .reportHistoryContentArea .title {
    color: #595959;
    font-weight: 500;
    font-size: 18px;
    margin-bottom: 20px; }
  .reportHistoryContentArea nav {
    display: flex;
    justify-content: center; }
  .reportHistoryContentArea .nav-tabs .nav-link {
    border: solid 2px transparent;
    border-left: 0;
    border-right: 0;
    color: #9B9B9B;
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    border-radius: 0;
    text-transform: uppercase;
    padding: .5rem 3rem; }
  .reportHistoryContentArea .nav-tabs .nav-link:focus,
  .reportHistoryContentArea .nav-tabs .nav-link:hover {
    border-color: transparent; }
  .reportHistoryContentArea .nav-tabs .nav-item.show .nav-link,
  .reportHistoryContentArea .nav-tabs .nav-link.active {
    border: transparent;
    border-bottom: solid 2px #138bfa;
    color: #138bfa;
    line-height: 26px;
    font-weight: 500;
    margin-bottom: -0.5px; }
  .reportHistoryContentArea .tab-content {
    padding: 20px 0 0;
    position: relative; }
    .reportHistoryContentArea .tab-content .fromUrlLoader {
      height: 78%;
      z-index: 9 !important; }
  .reportHistoryContentArea h5 {
    font-size: 18px;
    color: #f7941d;
    margin-bottom: 25px;
    margin-top: 0; }
  .reportHistoryContentArea .classInfoWrapper {
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap; }
    .reportHistoryContentArea .classInfoWrapper .info {
      min-width: 220px;
      margin-right: 25px;
      background: #FFFFFF;
      box-shadow: 0px 4px 21px rgba(120, 114, 114, 0.25);
      border-radius: 5px;
      padding: 14px 20px;
      margin-bottom: 20px;
      display: inline-flex;
      flex-direction: column; }
      @media (max-width: 480px) {
        .reportHistoryContentArea .classInfoWrapper .info {
          width: 100%;
          margin-right: 0; } }
      @media (min-width: 1680px) {
        .reportHistoryContentArea .classInfoWrapper .info {
          margin-right: 45px; } }
      .reportHistoryContentArea .classInfoWrapper .info .infoTitle {
        color: #8F8F8F;
        font-size: 16px;
        display: block;
        margin-bottom: 10px; }
      .reportHistoryContentArea .classInfoWrapper .info big {
        color: #595959;
        font-size: 16px;
        font-weight: 500; }
      .reportHistoryContentArea .classInfoWrapper .info:last-child {
        margin-right: 0; }
      .reportHistoryContentArea .classInfoWrapper .info .group {
        margin-top: -5px; }
        .reportHistoryContentArea .classInfoWrapper .info .group label {
          font-size: 12px;
          color: #9B9B9B;
          margin-bottom: 0;
          font-weight: 500; }
        .reportHistoryContentArea .classInfoWrapper .info .group .time {
          color: #138bfa;
          font-size: 14px; }
      .reportHistoryContentArea .classInfoWrapper .info .mdpsTime,
      .reportHistoryContentArea .classInfoWrapper .info .mdpeTime,
      .reportHistoryContentArea .classInfoWrapper .info .ldpsTime,
      .reportHistoryContentArea .classInfoWrapper .info .ldpeTime {
        display: inline-flex;
        flex-direction: column; }
      .reportHistoryContentArea .classInfoWrapper .info .mdpsTime,
      .reportHistoryContentArea .classInfoWrapper .info .ldpsTime {
        margin-right: 20px; }
  .reportHistoryContentArea hr {
    box-shadow: 0px 0px 10px #D7D7D7;
    margin-right: -25px;
    margin-left: -25px;
    height: 0.5px;
    background-color: rgba(196, 196, 196, 0.1); }

.dataFilterArea {
  background: #ffffff;
  box-shadow: 0px 4px 26px rgba(180, 180, 180, 0.25);
  border-radius: 6px;
  padding: 15px 25px;
  margin-top: 20px;
  margin-bottom: 10px;
  position: relative; }
  .dataFilterArea .group {
    display: flex;
    margin-bottom: 5px;
    align-items: center; }
  .dataFilterArea .title {
    color: #595959;
    font-weight: 500;
    font-size: 18px;
    margin-bottom: 0; }
  .dataFilterArea .dropdownLabel {
    color: #f7941d;
    font-size: 14px;
    margin-bottom: 0;
    font-weight: 500; }
  .dataFilterArea .refreshDataBtn {
    color: #138bfa;
    font-size: 16px;
    font-weight: 500px;
    height: 45px;
    padding: 0 15px 0 40px;
    background: rgba(19, 139, 250, 0.13) url(../img/ch-refresh-blue.svg) 15px center no-repeat;
    border-radius: 5px;
    border: 0;
    margin: 0 0 0 10px;
    transition: all 0.2s ease-in;
    display: inline-flex;
    justify-content: center;
    align-items: center; }
    .dataFilterArea .refreshDataBtn:hover {
      background: rgba(19, 139, 250, 0.23) url(../img/ch-refresh-blue.svg) 15px center no-repeat; }
  .dataFilterArea .refreshDataTime {
    margin-left: 15px;
    color: #9B9B9B;
    text-align: center;
    font-size: 12px;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    flex-direction: column; }
    .dataFilterArea .refreshDataTime label {
      font-size: 12px;
      display: block;
      margin-bottom: 0;
      width: 100%; }
    .dataFilterArea .refreshDataTime strong {
      font-size: 14px;
      color: #138bfa;
      margin-right: 5px;
      line-height: 14px; }
  .dataFilterArea .clearFilter {
    font-size: 12px;
    font-weight: 500;
    text-decoration: underline;
    color: #4f4f4f;
    margin-left: 15px; }
  .dataFilterArea .downloadFullReport {
    margin-left: auto;
    height: 45px;
    padding-right: 15px;
    font-size: 16px; }
  .dataFilterArea .applyFilterBtn {
    height: 45px;
    border: 0;
    padding: 0 10px;
    color: #ffffff;
    background: #9B9B9B;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 500;
    pointer-events: none;
    width: 120px; }
    @media (min-width: 1500px) {
      .dataFilterArea .applyFilterBtn {
        width: 160px; } }
    .dataFilterArea .applyFilterBtn.enable {
      background: #f7941d;
      pointer-events: all; }

.dropdownWrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  position: relative; }
  @media (max-width: 967px) {
    .dropdownWrapper {
      flex-wrap: wrap; } }
  .dropdownWrapper .customDropdown {
    max-width: 12%;
    width: 100%;
    margin-right: 15px; }
    @media (min-width: 1500px) {
      .dropdownWrapper .customDropdown {
        max-width: 14%; } }
    @media (max-width: 967px) {
      .dropdownWrapper .customDropdown {
        max-width: 23%;
        margin-bottom: 20px;
        margin-right: 0; } }
    @media (max-width: 480px) {
      .dropdownWrapper .customDropdown {
        max-width: 100%; } }
    .dropdownWrapper .customDropdown .itemBtn {
      padding-left: 15px;
      font-size: 16px;
      height: 45px; }
    .dropdownWrapper .customDropdown .dropdownItemList {
      top: 55px;
      width: 235px; }
    .dropdownWrapper .customDropdown .checkbox {
      width: 100%;
      margin: 0;
      font-weight: normal;
      font-size: 14px;
      color: #4F4F4F;
      padding: 8px 15px;
      cursor: pointer;
      display: flex;
      justify-content: flex-start;
      align-items: center; }
      .dropdownWrapper .customDropdown .checkbox input[type='checkbox'] {
        display: none; }
      .dropdownWrapper .customDropdown .checkbox .checkboxSpan {
        /*border: 2px solid #797878;*/
        border: none;
        width: 16px;
        height: 15px;
        border-radius: 3px;
        margin-right: 10px;
        background: #ffffff;
        margin-top: -2px;
        background: url(../img/checkbox-default.svg) 0 0 no-repeat; }
        .dropdownWrapper .customDropdown .checkbox .checkboxSpan:before {
          display: none; }
      .dropdownWrapper .customDropdown .checkbox input[type='checkbox']:checked + .checkboxSpan {
        background: url(../img/checkbox-active.svg) 0 0 no-repeat;
        border: 0; }
    .dropdownWrapper .customDropdown li {
      transition: all 0.2s ease-in;
      margin-bottom: 1px; }
      .dropdownWrapper .customDropdown li:hover {
        background: rgba(19, 139, 250, 0.1); }
        .dropdownWrapper .customDropdown li:hover .checkbox {
          color: #138bfa; }
        .dropdownWrapper .customDropdown li:hover .checkboxSpan {
          background: url(../img/checkbox-blue-border.svg) 0 0 no-repeat; }
      .dropdownWrapper .customDropdown li.active {
        background: rgba(19, 139, 250, 0.1); }
        .dropdownWrapper .customDropdown li.active .checkbox {
          color: #138bfa; }
      .dropdownWrapper .customDropdown li.selectAll {
        display: flex;
        justify-content: space-between; }
        .dropdownWrapper .customDropdown li.selectAll a {
          font-size: 14px;
          text-decoration: underline;
          /*color: #595959;*/
          color: #138bfa; }
          .dropdownWrapper .customDropdown li.selectAll a:hover, .dropdownWrapper .customDropdown li.selectAll a:focus {
            text-decoration: underline; }
          .dropdownWrapper .customDropdown li.selectAll a:last-child {
            padding-right: 0;
            text-indent: 10px; }
        .dropdownWrapper .customDropdown li.selectAll .selected {
          color: #138bfa; }
      .dropdownWrapper .customDropdown li:first-child:hover,
      .dropdownWrapper .customDropdown li:first-child a {
        background: transparent !important;
        color: #138bfa; }
    .dropdownWrapper .customDropdown .group {
      margin-bottom: 10px; }
      .dropdownWrapper .customDropdown .group.active {
        background: transparent !important; }
      .dropdownWrapper .customDropdown .group ul {
        width: 100%; }
      .dropdownWrapper .customDropdown .group:hover {
        background: none; }
        .dropdownWrapper .customDropdown .group:hover .checkbox {
          color: #4F4F4F; }
      .dropdownWrapper .customDropdown .group .groupTitle {
        padding-left: 15px !important;
        color: #138bfa;
        margin-bottom: 5px; }
        .dropdownWrapper .customDropdown .group .groupTitle:hover {
          background: none; }
      .dropdownWrapper .customDropdown .group li:hover .checkbox {
        color: #138bfa; }
      .dropdownWrapper .customDropdown .group li.active {
        background: rgba(19, 139, 250, 0.1); }
        .dropdownWrapper .customDropdown .group li.active .checkbox {
          color: #138bfa; }
  .dropdownWrapper .chooseDate {
    max-width: 380px;
    margin-right: 10px;
    /*&.dateSelect {
			.datetimes {
				padding-top: 18px;
				word-spacing: 5px;
			}
		}*/ }
    .dropdownWrapper .chooseDate .sdl,
    .dropdownWrapper .chooseDate .edl {
      font-size: 14px;
      top: 3px; }
    .dropdownWrapper .chooseDate .sdl {
      left: 10px; }
    .dropdownWrapper .chooseDate .edl {
      left: 182px; }
    .dropdownWrapper .chooseDate .datetimes {
      border: 1px solid #DBDDE0;
      border-radius: 5px;
      background: #ffffff url(../img/down-arrow-gray.svg) 98% center no-repeat;
      width: 100%;
      padding: 18px 35px 0 10px;
      height: 45px;
      color: #595959;
      font-size: 16px;
      transition: all 0.2s ease-in;
      word-spacing: 5px; }
      .dropdownWrapper .chooseDate .datetimes.up {
        background: #ffffff url(../img/up-arrow-gray.svg) 98% center no-repeat; }
    @media (max-width: 967px) {
      .dropdownWrapper .chooseDate {
        max-width: 100%; } }
    .dropdownWrapper .chooseDate label {
      position: absolute;
      margin-bottom: 0;
      color: #9B9B9B;
      font-size: 16px;
      font-weight: 400; }
  .dropdownWrapper .endDate {
    margin-right: 0; }

.reportHistoryGraph {
  width: 100%;
  background-color: #fafafa;
  margin-bottom: 50px; }

.detectionSummary {
  margin-bottom: 50px; }
  .detectionSummary .summaryTopBar {
    display: flex;
    align-items: center;
    margin-bottom: 20px; }
    .detectionSummary .summaryTopBar .title {
      margin-bottom: 0;
      color: #f7941d; }
    .detectionSummary .summaryTopBar .downloadFullReport {
      margin-left: auto; }
  .detectionSummary .summaryTable {
    border: solid 1px #D4D4D4;
    text-align: center; }
    .detectionSummary .summaryTable th, .detectionSummary .summaryTable td {
      padding: 10px;
      border: solid 1px #D4D4D4;
      color: #595959;
      font-size: 16px; }
      @media (max-width: 967px) {
        .detectionSummary .summaryTable th, .detectionSummary .summaryTable td {
          font-size: 12px; } }
      @media (max-width: 480px) {
        .detectionSummary .summaryTable th, .detectionSummary .summaryTable td {
          font-size: 10px;
          padding: 5px 10px; } }
    .detectionSummary .summaryTable td {
      padding: 15px; }
      @media (max-width: 480px) {
        .detectionSummary .summaryTable td {
          padding: 5px 10px; } }

.detectionFramees .detectionFrameesTopBar {
  display: flex;
  align-items: center;
  margin-bottom: 20px; }
  .detectionFramees .detectionFrameesTopBar .title {
    margin-bottom: 0;
    color: #f7941d; }
  .detectionFramees .detectionFrameesTopBar .downloadImage {
    margin-left: auto; }

.detectionFramees .framees {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 0;
  margin-right: -45px;
  overflow: hidden; }
  .detectionFramees .framees .openCarouselModal {
    cursor: pointer; }
  .detectionFramees .framees li {
    width: 30%;
    margin-bottom: 30px;
    margin-right: 2.3%; }
    @media (max-width: 967px) {
      .detectionFramees .framees li {
        margin-bottom: 20px; } }
    .detectionFramees .framees li .img {
      width: 100%;
      height: 200px;
      margin-bottom: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #f5f5f5;
      overflow: hidden;
      border-radius: 5px; }
      .detectionFramees .framees li .img img {
        max-height: 200px; }
      @media (max-width: 480px) {
        .detectionFramees .framees li .img {
          width: 165px;
          height: 165px; } }
    .detectionFramees .framees li p {
      color: #595959;
      font-size: 14px;
      text-align: right;
      margin-bottom: 0; }
      @media (max-width: 480px) {
        .detectionFramees .framees li p {
          font-size: 12px; } }
    @media (max-width: 480px) {
      .detectionFramees .framees li {
        margin-right: 15px;
        margin-bottom: 20px;
        width: 42%; }
        .detectionFramees .framees li:nth-child(2n) {
          margin-right: 0; } }
    @media (min-width: 1400px) {
      .detectionFramees .framees li {
        width: 17.4%; } }
    @media (min-width: 1680px) {
      .detectionFramees .framees li {
        width: 11.9%; } }

.classDetectionInformation h5 {
  font-size: 18px;
  color: #f7941d;
  margin-top: 0;
  margin-bottom: 25px; }

.classDetectionInformation .cdinformationGraph {
  min-height: 300px;
  margin: 0 auto;
  position: relative; }

.classDetectionInformation .cdiTopBar {
  display: flex;
  justify-content: space-between;
  align-items: center; }
  .classDetectionInformation .cdiTopBar h5 {
    text-indent: 30px;
    margin-bottom: 0; }
  .classDetectionInformation .cdiTopBar .graphActions {
    margin-left: auto; }
    .classDetectionInformation .cdiTopBar .graphActions .btnGroup {
      display: flex;
      justify-content: center; }
    .classDetectionInformation .cdiTopBar .graphActions .btn {
      background: #F2F2F2;
      border: 0;
      box-shadow: none;
      color: #595959;
      font-size: 16px;
      height: 46px;
      padding: 0 30px; }
      .classDetectionInformation .cdiTopBar .graphActions .btn.active {
        color: #138bfa;
        background: rgba(19, 139, 250, 0.13); }
    .classDetectionInformation .cdiTopBar .graphActions .detectionsBtn {
      border-radius: 5px 0 0 5px; }
    .classDetectionInformation .cdiTopBar .graphActions .demographicsBtn {
      border-radius: 0 5px 5px 0; }
    .classDetectionInformation .cdiTopBar .graphActions .checkbox {
      width: 100%;
      margin: 0;
      font-weight: normal;
      font-size: 14px;
      color: #595959;
      cursor: pointer;
      margin-bottom: 0;
      margin-top: 10px;
      display: none;
      justify-content: flex-start;
      align-items: center; }
      .classDetectionInformation .cdiTopBar .graphActions .checkbox input[type='checkbox'] {
        display: none; }
      .classDetectionInformation .cdiTopBar .graphActions .checkbox .checkboxSpan {
        border: none;
        width: 17px;
        height: 16px;
        border-radius: 3px;
        margin-right: 5px;
        background: #ffffff;
        margin-top: -2px;
        background: url(../img/checkbox-default.svg) 0 0 no-repeat; }
        .classDetectionInformation .cdiTopBar .graphActions .checkbox .checkboxSpan:before {
          display: none; }
      .classDetectionInformation .cdiTopBar .graphActions .checkbox input[type='checkbox']:checked + .checkboxSpan {
        background: url(../img/checkbox-active.svg) 0 0 no-repeat;
        border: 0; }

.classDetectionInformation .detectionDropdownWrapper {
  margin-top: 30px;
  padding-left: 95px;
  display: none;
  justify-content: flex-start;
  align-items: center; }
  .classDetectionInformation .detectionDropdownWrapper .customDropdown {
    width: 185px;
    margin-right: 15px; }
    .classDetectionInformation .detectionDropdownWrapper .customDropdown:last-child {
      margin-right: 0; }
    .classDetectionInformation .detectionDropdownWrapper .customDropdown li.selectAll {
      display: flex;
      justify-content: space-between; }
      .classDetectionInformation .detectionDropdownWrapper .customDropdown li.selectAll a {
        font-size: 14px;
        text-decoration: underline;
        /*color: #595959;*/
        color: #138bfa; }
        .classDetectionInformation .detectionDropdownWrapper .customDropdown li.selectAll a:first-child {
          padding-right: 0; }
        .classDetectionInformation .detectionDropdownWrapper .customDropdown li.selectAll a:last-child {
          padding-right: 0;
          padding-left: 0; }
      .classDetectionInformation .detectionDropdownWrapper .customDropdown li.selectAll .selected {
        color: #138bfa; }
    .classDetectionInformation .detectionDropdownWrapper .customDropdown li:first-child:hover,
    .classDetectionInformation .detectionDropdownWrapper .customDropdown li:first-child a {
      background: transparent !important;
      color: #138bfa; }

.cameraSpecificDetections {
  margin-top: 40px; }
  .cameraSpecificDetections h5 {
    font-size: 18px;
    color: #f7941d;
    margin-bottom: 25px;
    margin-top: 0; }
  .cameraSpecificDetections .csDetectionGraph {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 20px; }
    .cameraSpecificDetections .csDetectionGraph .piechart {
      width: 25%;
      max-height: 400px;
      text-align: center;
      margin-bottom: 40px; }
      .cameraSpecificDetections .csDetectionGraph .piechart .chartjs-render-monitor {
        margin-bottom: 20px; }
  .cameraSpecificDetections .classSpecificationWrapper {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap; }
    .cameraSpecificDetections .classSpecificationWrapper .info {
      width: 220px;
      margin-left: 20px;
      background: #FFFFFF;
      box-shadow: 0px 4px 21px rgba(120, 114, 114, 0.25);
      border-radius: 5px;
      padding: 14px 20px;
      margin-bottom: 20px; }
      @media (max-width: 480px) {
        .cameraSpecificDetections .classSpecificationWrapper .info {
          width: 100%;
          margin-left: 0; } }
      @media (min-width: 1680px) {
        .cameraSpecificDetections .classSpecificationWrapper .info {
          margin-left: 30px; } }
      .cameraSpecificDetections .classSpecificationWrapper .info span {
        color: #8F8F8F;
        font-size: 16px;
        display: block;
        margin-bottom: 10px; }
      .cameraSpecificDetections .classSpecificationWrapper .info big {
        color: #595959;
        font-size: 16px;
        font-weight: 500; }
  .cameraSpecificDetections .classesBoxWrapper {
    display: flex;
    justify-content: center;
    align-items: center; }
    .cameraSpecificDetections .classesBoxWrapper .chassesBox {
      background-color: #ffffff;
      box-shadow: 0px 4px 21px rgba(120, 114, 114, 0.25);
      border-radius: 5px;
      padding: 20px 15px;
      margin-right: 50px;
      margin-bottom: 50px;
      width: 100%;
      max-width: 330px; }
      .cameraSpecificDetections .classesBoxWrapper .chassesBox:last-child {
        margin-right: 0; }
      .cameraSpecificDetections .classesBoxWrapper .chassesBox h6 {
        color: #595959;
        font-weight: 500;
        font-size: 18px;
        margin-bottom: 20px;
        display: none; }
      .cameraSpecificDetections .classesBoxWrapper .chassesBox ul {
        min-height: 145px;
        max-height: 145px;
        overflow: hidden;
        margin-bottom: 0; }
        .cameraSpecificDetections .classesBoxWrapper .chassesBox ul li {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          white-space: nowrap;
          margin-bottom: 10px; }
        .cameraSpecificDetections .classesBoxWrapper .chassesBox ul label {
          font-size: 14px;
          font-weight: 500;
          color: #9B9B9B;
          margin: 0;
          display: flex;
          justify-content: flex-start;
          align-items: center; }
          .cameraSpecificDetections .classesBoxWrapper .chassesBox ul label .colorThumb {
            width: 17px;
            height: 17px;
            margin-right: 10px; }
        .cameraSpecificDetections .classesBoxWrapper .chassesBox ul strong {
          color: #595959;
          font-size: 14px;
          font-weight: 700;
          margin-left: 4px; }

.timeAnalytics {
  position: relative; }
  .timeAnalytics h5 {
    font-size: 18px;
    color: #f7941d;
    margin-bottom: 25px;
    margin-top: 0; }
  .timeAnalytics h6 {
    font-size: 16px;
    color: #595959;
    margin-bottom: 0;
    margin-top: 15px; }
  .timeAnalytics .timeAnalyticsDropdown {
    width: 215px; }
  .timeAnalytics .customDropdown .itemBtn {
    font-size: 16px;
    height: 45px; }
  .timeAnalytics .customDropdown .dropdownItemList {
    top: 50px; }
  .timeAnalytics .adtbClass {
    width: 50%;
    position: relative; }
    .timeAnalytics .adtbClass:before {
      width: 2px;
      height: 113%;
      top: -30px;
      position: absolute;
      right: 0;
      content: '';
      background-color: rgba(196, 196, 196, 0.31);
      box-shadow: 0px 0px 10px #D7D7D7; }

.graphLabes {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 30px;
  margin-bottom: 50px; }
  .graphLabes label {
    font-size: 16px;
    color: #595959;
    display: inline-block;
    position: relative;
    margin: 0 10px 10px;
    /*white-space: nowrap;
		text-overflow: ellipsis;
		max-width: 200px;
		overflow: hidden;*/
    padding-left: 25px; }
    .graphLabes label .colorThumb {
      width: 17px;
      height: 17px;
      margin-right: 10px;
      display: inline-block;
      position: absolute;
      left: 0;
      top: 4px; }

.downloadImage,
.downloadFullReport {
  background: rgba(19, 139, 250, 0.13) url(../img/ch-download-blue.svg) 12px center no-repeat;
  border-radius: 5px;
  height: 45px;
  padding: 0 20px 0 40px;
  color: #138bfa;
  transition: all 0.2s ease-in;
  display: inline-flex;
  justify-content: center;
  align-items: center; }
  .downloadImage:hover,
  .downloadFullReport:hover {
    color: #138bfa;
    background: rgba(19, 139, 250, 0.23) url(../img/ch-download-blue.svg) 12px center no-repeat; }

.downloadImage {
  display: none; }
  .downloadImage.show {
    display: inline-flex; }

.showAlert {
  font-weight: normal;
  font-size: 16px;
  font-weight: 400;
  color: #4F4F4F;
  cursor: pointer;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 0; }
  .showAlert input[type='checkbox'] {
    display: none; }
  .showAlert .labelSpan {
    border: none;
    width: 16px;
    height: 15px;
    border-radius: 3px;
    margin-right: 5px;
    background: #ffffff;
    margin-top: -2px;
    background: url(../img/checkbox-default.svg) 0 0 no-repeat; }
    .showAlert .labelSpan:before {
      display: none; }
  .showAlert input[type='checkbox']:checked ~ .labelSpan {
    background: url(../img/checkbox-active.svg) 0 0 no-repeat;
    border: 0; }
  .showAlert.disabled {
    opacity: 0.5;
    pointer-events: none; }

#table-view .showAlert,
#image-view .showAlert {
  margin-bottom: 15px; }

.nodataPlaceholder {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px; }
  .nodataPlaceholder .bubble {
    max-width: 460px;
    width: 100%;
    height: 310px;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    background: url(../img/ch-bubble.svg) center center no-repeat;
    font-size: 18px;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center; }
    .nodataPlaceholder .bubble .icon {
      width: 75px;
      height: 72px;
      background: url(../img/ch-analytics-white.svg) 0 0 no-repeat; }
      @media (max-width: 480px) {
        .nodataPlaceholder .bubble .icon {
          width: 35px;
          height: 32px;
          background-size: contain; } }
    .nodataPlaceholder .bubble p {
      margin: 20px 0 0;
      font-weight: 500; }
      @media (max-width: 480px) {
        .nodataPlaceholder .bubble p {
          margin-top: 10px; } }
    @media (max-width: 1200px) {
      .nodataPlaceholder .bubble {
        background-size: 80%;
        font-size: 14px; } }
    @media (max-width: 480px) {
      .nodataPlaceholder .bubble {
        background-size: 55%;
        font-size: 10px; } }

.imageGalleryModal {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(89, 89, 89, 0.76);
  z-index: 1040;
  display: none; }
  .imageGalleryModal .closeImageGallery {
    width: 25px;
    height: 25px;
    background: url(../img/ch-close-white.svg) center center no-repeat;
    background-size: 20px;
    margin: 0 10px 0 auto;
    border: 0; }
  .imageGalleryModal .imageGalleryTopbar {
    z-index: 1082;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 52px;
    background: #585858;
    color: #E8E8E8;
    display: flex;
    align-items: center;
    justify-content: center; }
    .imageGalleryModal .imageGalleryTopbar .downloadImage {
      margin-right: auto;
      font-size: 14px;
      font-weight: 500;
      margin-left: 15px;
      background: #F7941D url(../img/ch-download-white.svg) 12px center no-repeat;
      color: #ffffff;
      height: 40px;
      background-size: 18px; }
      .imageGalleryModal .imageGalleryTopbar .downloadImage:hover {
        color: #ffffff;
        background: #F7941D url(../img/ch-download-white.svg) 12px center no-repeat;
        opacity: 0.9;
        background-size: 18px; }
    .imageGalleryModal .imageGalleryTopbar .imageController {
      margin-left: auto;
      margin-right: -30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #E8E8E8; }
      .imageGalleryModal .imageGalleryTopbar .imageController .prevImage,
      .imageGalleryModal .imageGalleryTopbar .imageController .nextImage {
        z-index: 1083;
        opacity: 1 !important;
        font-size: 16px;
        color: #E8E8E8; }
        .imageGalleryModal .imageGalleryTopbar .imageController .prevImage img,
        .imageGalleryModal .imageGalleryTopbar .imageController .nextImage img {
          width: 10px;
          margin: 0 10px; }
        @media (max-width: 480px) {
          .imageGalleryModal .imageGalleryTopbar .imageController .prevImage,
          .imageGalleryModal .imageGalleryTopbar .imageController .nextImage {
            font-size: 14px; } }
      .imageGalleryModal .imageGalleryTopbar .imageController .imageCounter {
        padding: 0 30px; }
  .imageGalleryModal .imageView {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 50px; }
    .imageGalleryModal .imageView .img {
      max-height: 98%; }

.imageCarouselModal {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(89, 89, 89, 0.76);
  z-index: 1040;
  display: none; }
  .imageCarouselModal .closeImageCarousel {
    width: 25px;
    height: 25px;
    background: url(../img/ch-close-white.svg) center center no-repeat;
    background-size: 20px;
    margin: 0 10px 0 auto;
    border: 0; }
  .imageCarouselModal .imageCarouselTopbar {
    z-index: 1082;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 52px;
    background: #434242;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #E8E8E8; }
    .imageCarouselModal .imageCarouselTopbar .downloadImage {
      margin-right: auto;
      font-size: 14px;
      font-weight: 500;
      margin-left: 15px;
      background: #F7941D url(../img/ch-download-white.svg) 12px center no-repeat;
      color: #ffffff;
      height: 40px;
      background-size: 18px;
      display: inline-flex; }
      .imageCarouselModal .imageCarouselTopbar .downloadImage:hover {
        color: #ffffff;
        background: #F7941D url(../img/ch-download-white.svg) 12px center no-repeat;
        opacity: 0.9;
        background-size: 18px; }
    .imageCarouselModal .imageCarouselTopbar h5 {
      font-weight: 400;
      margin: 0;
      font-size: 16px;
      width: 100%;
      text-align: center; }
      @media (max-width: 480px) {
        .imageCarouselModal .imageCarouselTopbar h5 {
          font-size: 14px; } }
    .imageCarouselModal .imageCarouselTopbar .imageController {
      margin-left: auto;
      margin-right: -30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #E8E8E8; }
      .imageCarouselModal .imageCarouselTopbar .imageController .prevImage,
      .imageCarouselModal .imageCarouselTopbar .imageController .nextImage {
        z-index: 1083;
        opacity: 1 !important;
        font-size: 16px;
        color: #E8E8E8; }
        .imageCarouselModal .imageCarouselTopbar .imageController .prevImage img,
        .imageCarouselModal .imageCarouselTopbar .imageController .nextImage img {
          width: 10px;
          margin: 0 10px; }
        @media (max-width: 480px) {
          .imageCarouselModal .imageCarouselTopbar .imageController .prevImage,
          .imageCarouselModal .imageCarouselTopbar .imageController .nextImage {
            font-size: 14px; } }
      .imageCarouselModal .imageCarouselTopbar .imageController .imageCounter {
        padding: 0 30px; }
  .imageCarouselModal .carousel {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    max-width: 1000px;
    height: 100%;
    margin: 0 auto; }
    @media (max-width: 1500px) {
      .imageCarouselModal .carousel {
        max-width: 700px; } }
    @media (max-width: 967px) {
      .imageCarouselModal .carousel {
        max-width: 600px; } }
    @media (max-width: 480px) {
      .imageCarouselModal .carousel {
        max-width: 300px; } }
  .imageCarouselModal .carouselInner {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center; }
  .imageCarouselModal .carousel-inner img {
    max-height: 768px; }
  .imageCarouselModal .carousel-inner canvas,
  .imageCarouselModal .carousel-inner .img-size {
    max-width: 100%;
    max-height: 565px; }
    @media (max-width: 1500px) {
      .imageCarouselModal .carousel-inner canvas,
      .imageCarouselModal .carousel-inner .img-size {
        max-height: 400px; } }
    @media (max-width: 480px) {
      .imageCarouselModal .carousel-inner canvas,
      .imageCarouselModal .carousel-inner .img-size {
        max-height: 300px; } }
  .imageCarouselModal .carousel-control-prev,
  .imageCarouselModal .carousel-control-next {
    width: 50px;
    z-index: 1083;
    opacity: 1 !important;
    font-size: 16px;
    bottom: 150px; }
    .imageCarouselModal .carousel-control-prev img,
    .imageCarouselModal .carousel-control-next img {
      width: 18px; }
    @media (max-width: 480px) {
      .imageCarouselModal .carousel-control-prev,
      .imageCarouselModal .carousel-control-next {
        font-size: 14px;
        bottom: 100px; } }
  .imageCarouselModal .carousel-control-prev {
    left: -6%; }
    @media (max-width: 1500px) {
      .imageCarouselModal .carousel-control-prev {
        left: -10%; } }
    @media (max-width: 480px) {
      .imageCarouselModal .carousel-control-prev {
        left: -15%; } }
  .imageCarouselModal .carousel-control-next {
    right: -6%; }
    @media (max-width: 1500px) {
      .imageCarouselModal .carousel-control-next {
        right: -10%; } }
    @media (max-width: 480px) {
      .imageCarouselModal .carousel-control-next {
        right: -15%; } }
  .imageCarouselModal .carousel-indicators {
    margin: 0 auto;
    max-width: 1000px;
    width: 100%;
    overflow: hidden;
    position: static;
    padding: 30px;
    background: #252525;
    justify-content: flex-start; }
    @media (max-width: 1500px) {
      .imageCarouselModal .carousel-indicators {
        max-width: 700px;
        padding: 20px; } }
    @media (max-width: 967px) {
      .imageCarouselModal .carousel-indicators {
        max-width: 600px; } }
    @media (max-width: 480px) {
      .imageCarouselModal .carousel-indicators {
        max-width: 300px;
        padding: 10px; } }
    .imageCarouselModal .carousel-indicators .active {
      background-color: transparent; }
    .imageCarouselModal .carousel-indicators li {
      width: 130px;
      height: 90px;
      margin-left: 0;
      margin-right: 30px;
      text-indent: 0;
      display: inline-flex;
      cursor: pointer; }
      @media (max-width: 1500px) {
        .imageCarouselModal .carousel-indicators li {
          width: 100px;
          height: 70px;
          margin-right: 25px; } }
      @media (max-width: 967px) {
        .imageCarouselModal .carousel-indicators li {
          width: 90px;
          height: 60px;
          margin-right: 20px; } }
      @media (max-width: 480px) {
        .imageCarouselModal .carousel-indicators li {
          margin-right: 10px; } }
      .imageCarouselModal .carousel-indicators li:last-child {
        margin-right: 0; }
      .imageCarouselModal .carousel-indicators li img,
      .imageCarouselModal .carousel-indicators li canvas {
        opacity: 0.5; }
      .imageCarouselModal .carousel-indicators li.active img,
      .imageCarouselModal .carousel-indicators li.active canvas {
        opacity: 1; }

.timeAnalyticsGraph {
  margin: 20px 0 0;
  position: relative; }
  .timeAnalyticsGraph canvas.chartjs-render-monitor {
    max-width: 90%;
    max-height: 350px; }

.disable_filter {
  overflow: hidden;
  pointer-events: none; }
  .disable_filter:before {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #ffffff;
    opacity: 0.5;
    display: block;
    z-index: 2;
    content: ''; }

.createPresetArea {
  background: #ffffff;
  box-shadow: 0px 4px 26px rgba(180, 180, 180, 0.25);
  border-radius: 6px;
  padding: 20px 25px;
  margin-bottom: 10px;
  position: relative; }
  .createPresetArea .title {
    color: #595959;
    font-weight: 500;
    font-size: 18px;
    margin-bottom: 20px; }
    .createPresetArea .title .info {
      margin-left: 5px; }
      .createPresetArea .title .info .customTooltip {
        top: 25px;
        left: 0; }
  .createPresetArea .seeAllPreset {
    position: absolute;
    right: 30px;
    top: 20px;
    text-decoration: underline;
    color: #0A2E60;
    font-weight: 500; }

.createPresetContainer ul {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
  flex-wrap: wrap;
  margin-bottom: 0; }
  .createPresetContainer ul .eachPreset {
    background: #ffffff;
    border-radius: 5px;
    width: 100%;
    max-width: 192px;
    height: 65px;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    margin-right: 20px;
    position: relative;
    cursor: pointer;
    border: solid 1px #ffffff;
    box-shadow: 0px 3.30792px 21.5015px rgba(180, 180, 180, 0.25); }
    .createPresetContainer ul .eachPreset .presetInfo {
      font-size: 12px;
      color: #595959;
      padding: 5px 30px 5px 15px;
      font-weight: 500;
      width: 100%;
      height: 100%;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      display: -webkit-box;
      overflow: hidden;
      word-break: break-word; }
    .createPresetContainer ul .eachPreset:hover {
      color: #0A2E60; }
    .createPresetContainer ul .eachPreset.selected {
      box-shadow: 0px 0px 4px rgba(41, 121, 255, 0.48), 0px 0px 10px rgba(41, 121, 255, 0.24);
      outline: 2px solid #0A2E60;
      border-radius: 5px; }
    .createPresetContainer ul .eachPreset.selected:first-child {
      box-shadow: 0px 3.30792px 21.5015px rgba(180, 180, 180, 0.25);
      outline: none; }
    @media (max-width: 1500px) {
      .createPresetContainer ul .eachPreset {
        margin-bottom: 15px; } }

.createPresetContainer .presetActionsDropdown {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 5px;
  height: 16px;
  z-index: 0; }
  .createPresetContainer .presetActionsDropdown .actionbttn {
    width: 10px;
    height: 16px;
    background: url(../img/ch-ellips-gray.svg) center center no-repeat;
    border-radius: 3px;
    border: 0;
    padding: 0; }
  .createPresetContainer .presetActionsDropdown .itemList {
    position: absolute;
    top: 25px;
    right: 0;
    padding: 10px;
    background: #ffffff;
    box-shadow: 0px 4px 29px rgba(158, 158, 158, 0.25);
    border-radius: 7px;
    display: none;
    min-width: 150px; }
    .createPresetContainer .presetActionsDropdown .itemList li:hover a {
      color: #138bfa; }
    .createPresetContainer .presetActionsDropdown .itemList .deletePreset a {
      background: url(../img/ch-delete-dark-gray.svg) 5px center no-repeat; }
    .createPresetContainer .presetActionsDropdown .itemList .deletePreset:hover a {
      background: url(../img/ch-delete-blue.svg) 5px center no-repeat; }
    .createPresetContainer .presetActionsDropdown .itemList .editPreset {
      background: url(../img/ch-rename-dark-gray.svg) 5px center no-repeat; }
      .createPresetContainer .presetActionsDropdown .itemList .editPreset:hover a {
        background: url(../img/ch-rename-blue.svg) 5px center no-repeat; }
    .createPresetContainer .presetActionsDropdown .itemList a {
      color: #595959;
      white-space: nowrap;
      font-size: 14px;
      padding: 6px 10px 6px 30px;
      display: flex;
      justify-content: flex-start;
      align-items: center; }

.createPresetContainer .createPresetBtn {
  border: 0;
  padding-left: 50px;
  background: #ffffff url(../img/ch-plus-orange.svg) 10px center no-repeat;
  background-size: 25px;
  text-align: left;
  font-size: 16px;
  width: 100%;
  height: 100%; }

.createPresetModal .modal-dialog {
  width: 100%; }

.createPresetModal .modal-content {
  flex-direction: column !important;
  background: #ffffff !important; }

.createPresetModal .modal-header {
  width: 100%;
  border: 0;
  padding-left: 25px;
  padding-right: 25px;
  justify-content: center; }

.createPresetModal .closeModal {
  opacity: 0.6;
  top: 20px;
  width: 14px;
  height: 14px;
  right: 30px; }

.createPresetModal .modal-title {
  color: #595959;
  font-size: 16px;
  text-transform: uppercase; }

.createPresetModal .modal-body {
  padding: 5px 25px;
  height: 100%;
  width: 100%; }

.createPresetModal .modal-footer {
  padding: 0 25px 30px;
  width: 100%;
  border: 0;
  justify-content: center; }

.createPresetModal .creatBtn {
  border-radius: 6px;
  width: 100%;
  height: 60px;
  font-size: 18px;
  font-weight: 500;
  border: 0; }
  .createPresetModal .creatBtn.disable {
    opacity: 1;
    background: #9B9B9B; }

.createPresetModal .date {
  position: absolute;
  right: 25px; }

.createPresetModal .presetNameGroup {
  margin-bottom: 25px; }

.createPresetModal .form-control {
  height: 60px;
  border-radius: 6px;
  background: #F2F2F2;
  color: #9B9B9B;
  padding-left: 20px;
  padding-right: 20px;
  border: 0;
  font-size: 14px;
  font-weight: 500; }
  .createPresetModal .form-control:focus {
    color: #595959;
    border-color: #F2F2F2;
    background: #F2F2F2; }

.createPresetModal .customDropdown .itemBtn {
  height: 60px;
  background-color: #F2F2F2;
  background-position: 98% center;
  padding: 0 30px 0 20px;
  border: 0;
  font-size: 14px;
  font-weight: 500;
  color: #9B9B9B; }

.createPresetModal .customDropdown .dropdownItemList {
  top: 65px; }
  .createPresetModal .customDropdown .dropdownItemList li.selectAll {
    display: flex;
    justify-content: space-between; }
    .createPresetModal .customDropdown .dropdownItemList li.selectAll a {
      font-size: 14px;
      text-decoration: underline;
      color: #138bfa; }
      .createPresetModal .customDropdown .dropdownItemList li.selectAll a:last-child {
        text-align: right;
        padding-right: 20px; }
    .createPresetModal .customDropdown .dropdownItemList li.selectAll .selected {
      color: #138bfa; }
  .createPresetModal .customDropdown .dropdownItemList li:first-child:hover,
  .createPresetModal .customDropdown .dropdownItemList li:first-child a {
    background: transparent !important;
    color: #138bfa; }
  .createPresetModal .customDropdown .dropdownItemList .groupTitle {
    padding: 5px 12px !important;
    pointer-events: none; }

.modal.editPresetModal {
  z-index: 1060;
  background: rgba(0, 0, 0, 0.2); }

.allPresetModal .modal-dialog {
  width: 100%;
  max-width: 1300px; }

.allPresetModal .modal-content {
  flex-direction: column !important;
  background: #ffffff !important; }

.allPresetModal .modal-header {
  width: 100%;
  border: 0;
  padding-left: 25px;
  padding-right: 25px;
  justify-content: center; }

.allPresetModal .closeModal {
  opacity: 0.6;
  top: 20px;
  width: 14px;
  height: 14px;
  right: 30px; }

.allPresetModal .modal-title {
  color: #595959;
  font-size: 16px;
  text-transform: uppercase; }

.allPresetModal .modal-body {
  height: 100%;
  width: 100%; }

.allPresetModal .modal-footer {
  padding: 0 25px 30px;
  width: 100%;
  border: 0;
  justify-content: center; }

.allPresetModal .selectBtn {
  border-radius: 6px;
  width: 100%;
  max-width: 390px;
  height: 52px;
  font-size: 18px;
  font-weight: 500;
  border: 0; }
  .allPresetModal .selectBtn.disable {
    opacity: 1;
    background: #9B9B9B; }

.allPresetModal .createPresetContainer h5 {
  font-size: 16px;
  font-weight: 500;
  color: #595959;
  margin-bottom: 10px;
  padding: 0 16px; }

.allPresetModal .createPresetContainer .mCustomScrollbar {
  height: 592px; }

.allPresetModal .createPresetContainer .mCSB_container {
  padding: 10px 10px 80px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start; }

.allPresetModal .createPresetContainer .mCustomScrollBox {
  width: 100%; }

.allPresetModal .createPresetContainer ul .eachPreset {
  margin-bottom: 20px;
  margin-left: 8px;
  margin-right: 8px; }
  .allPresetModal .createPresetContainer ul .eachPreset:first-child {
    border: solid 2px #ffffff; }
  .allPresetModal .createPresetContainer ul .eachPreset.selected:first-child {
    box-shadow: 0px 0px 4px rgba(41, 121, 255, 0.48), 0px 0px 10px rgba(41, 121, 255, 0.24);
    outline: 2px solid #0A2E60;
    border-radius: 5px; }

.deletePresetModal {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: rgba(89, 89, 89, 0.64);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9910;
  opacity: 0;
  visibility: hidden; }
  .deletePresetModal.deletePresetModal-active {
    opacity: 1;
    visibility: visible; }
  .deletePresetModal h5 {
    text-align: center;
    color: #595959;
    font-size: 18px;
    font-weight: 500;
    text-transform: uppercase; }
  .deletePresetModal .closeModal {
    opacity: 0.6;
    right: 20px;
    top: 30px; }
  .deletePresetModal .innerContainer {
    width: 100%;
    max-width: 580px;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 10px;
    padding: 30px; }
  .deletePresetModal .note {
    max-width: 280px;
    width: 100%;
    text-align: center;
    margin: 40px auto 30px;
    font-size: 18px; }
  .deletePresetModal .deleteOptions {
    display: flex;
    justify-content: center;
    flex-direction: row; }
    .deletePresetModal .deleteOptions a {
      margin: 0 10px;
      width: 155px;
      height: 44px;
      border-radius: 6px;
      border: solid 1px #f7941d;
      display: inline-flex;
      justify-content: center;
      align-items: center; }
    .deletePresetModal .deleteOptions .delete-preset {
      background: #ffffff;
      color: #595959 !important; }

.selectedPreset {
  font-size: 14px; }
  .selectedPreset label {
    color: #9B9B9B; }
  .selectedPreset .selectedPresetInfo {
    color: #595959;
    font-weight: 500;
    margin-left: 5px; }

.disableLink {
  pointer-events: none;
  opacity: 0.5; }

.analyticsContentArea {
  background: #ffffff;
  border-radius: 6px;
  padding: 10px;
  min-height: 700px; }
  @media (min-width: 1600px) {
    .analyticsContentArea {
      min-height: 800px; } }
  .analyticsContentArea .nav-tabs {
    width: 100%; }
    .analyticsContentArea .nav-tabs .info {
      margin-left: 10px;
      display: inline-block; }
      .analyticsContentArea .nav-tabs .info .customTooltip {
        top: 25px;
        left: 0;
        line-height: 20px; }
  .analyticsContentArea .nav-tabs .nav-link {
    border: solid 2px transparent;
    border-left: 0;
    border-right: 0;
    color: #303030;
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 170px; }
    .analyticsContentArea .nav-tabs .nav-link .info {
      opacity: 0.5;
      pointer-events: none; }
  .analyticsContentArea .nav-tabs .nav-link:focus,
  .analyticsContentArea .nav-tabs .nav-link:hover {
    border-color: transparent; }
  .analyticsContentArea .nav-tabs .nav-item.show .nav-link,
  .analyticsContentArea .nav-tabs .nav-link.active {
    border: transparent;
    border-bottom: solid 5px #5A1691;
    color: #303030;
    line-height: 26px;
    font-weight: 600;
    margin-bottom: -0.5px; }
    .analyticsContentArea .nav-tabs .nav-item.show .nav-link .info,
    .analyticsContentArea .nav-tabs .nav-link.active .info {
      opacity: 1;
      pointer-events: auto;
      margin-top: 1px; }
    .analyticsContentArea .nav-tabs .nav-item.show .nav-link .infoDarkGray,
    .analyticsContentArea .nav-tabs .nav-link.active .infoDarkGray {
      background: url(../img/ch-info-dark-purple.svg) 0 0 no-repeat;
      background-size: 16px; }
  .analyticsContentArea .tab-content {
    padding: 20px 0 0;
    position: relative; }
  .analyticsContentArea .cardContainer {
    /*display: grid;
		justify-content: flex-start;
		flex-wrap: wrap;*/
    display: grid;
    grid-template-columns: auto auto auto;
    grid-row-gap: 20px;
    grid-column-gap: 5px;
    grid-template-columns: repeat(1, 1fr);
    justify-items: stretch;
    align-items: stretch;
    position: relative;
    /*@media (min-width: 1600px) {
	    grid-template-columns: repeat(2, 1fr);
	  }*/
    /*@media screen and (min-width: 1820px) {
	    grid-template-columns: repeat(3, 1fr);
	  }*/ }
    @media (min-width: 1025px) {
      .analyticsContentArea .cardContainer {
        grid-template-columns: repeat(2, 1fr); } }
    .analyticsContentArea .cardContainer .tscard {
      background: #ffffff;
      border: 1px solid #F2E9FA;
      box-shadow: 1px 1px 3px rgba(22, 22, 22, 0.08);
      border-radius: 5px;
      display: inline-flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      /*margin-right: 25px;
			margin-bottom: 30px;*/
      width: 96%;
      padding: 10px 10px 15px;
      color: #595959;
      position: relative; }
      .analyticsContentArea .cardContainer .tscard:before {
        height: 1px;
        background: #E0E0E0;
        position: absolute;
        left: 0;
        right: 0;
        content: '';
        top: 44px; }
      .analyticsContentArea .cardContainer .tscard .cardTop {
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-bottom: 20px;
        min-height: 52px; }
        .analyticsContentArea .cardContainer .tscard .cardTop .group {
          width: 80%;
          display: flex;
          flex-wrap: wrap; }
        .analyticsContentArea .cardContainer .tscard .cardTop .ruleClassName {
          font-size: 16px;
          font-weight: 500;
          color: #303030;
          display: block;
          margin-bottom: 20px;
          width: 100%; }
        .analyticsContentArea .cardContainer .tscard .cardTop h4 {
          margin: 0;
          font-size: 14px;
          color: #AAAAAA;
          display: inline-block;
          width: 100%; }
          .analyticsContentArea .cardContainer .tscard .cardTop h4 span {
            font-weight: normal;
            color: #535353; }
        .analyticsContentArea .cardContainer .tscard .cardTop .customTooltip {
          top: 25px;
          right: 0; }
        .analyticsContentArea .cardContainer .tscard .cardTop .actions a:last-child {
          margin-left: 10px;
          margin-right: 10px; }
      .analyticsContentArea .cardContainer .tscard .dropdowns {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-bottom: 20px; }
        .analyticsContentArea .cardContainer .tscard .dropdowns .colon {
          display: inline-flex;
          margin: 0 5px;
          height: 32px;
          align-items: center; }
      .analyticsContentArea .cardContainer .tscard .minutesDropdown,
      .analyticsContentArea .cardContainer .tscard .secondsDropdown {
        display: inline-block;
        font-size: 13px;
        color: #595959; }
        .analyticsContentArea .cardContainer .tscard .minutesDropdown .customDropdown .itemBtn,
        .analyticsContentArea .cardContainer .tscard .secondsDropdown .customDropdown .itemBtn {
          width: 90px;
          background-color: #F7F7F7; }
      .analyticsContentArea .cardContainer .tscard .logic .customDropdown .itemBtn {
        width: 112px;
        padding-left: 10px;
        padding-right: 25px; }
      .analyticsContentArea .cardContainer .tscard .customDropdown .itemBtn {
        padding-left: 15px;
        height: 36px;
        background-size: 12px;
        background-position: 90% center; }
      .analyticsContentArea .cardContainer .tscard .customDropdown .dropdownItemList {
        top: 40px;
        background-color: #F7F7F7; }
        .analyticsContentArea .cardContainer .tscard .customDropdown .dropdownItemList li a {
          padding-left: 15px; }
          .analyticsContentArea .cardContainer .tscard .customDropdown .dropdownItemList li a:hover {
            background-color: #F9F2FF !important;
            color: #52575c !important; }
        .analyticsContentArea .cardContainer .tscard .customDropdown .dropdownItemList li.selected a {
          background: #F9F2FF; }
        .analyticsContentArea .cardContainer .tscard .customDropdown .dropdownItemList li.active a {
          color: #52575c !important; }
      .analyticsContentArea .cardContainer .tscard .alertPeriod {
        width: 100%; }
        .analyticsContentArea .cardContainer .tscard .alertPeriod label {
          width: 100%;
          font-size: 14px;
          display: flex;
          align-items: center;
          font-weight: 400;
          color: #210835;
          margin-bottom: 5px; }
          .analyticsContentArea .cardContainer .tscard .alertPeriod label .info {
            width: 16px;
            height: 16px;
            margin-left: 5px;
            display: inline-block; }
        .analyticsContentArea .cardContainer .tscard .alertPeriod .customTooltip {
          top: 25px;
          left: 0; }
      .analyticsContentArea .cardContainer .tscard .selectZone,
      .analyticsContentArea .cardContainer .tscard .ccThreshold {
        margin-bottom: 20px; }
        .analyticsContentArea .cardContainer .tscard .selectZone .customDropdown .itemBtn,
        .analyticsContentArea .cardContainer .tscard .ccThreshold .customDropdown .itemBtn {
          width: 100%;
          background-position: 96% center;
          background-color: #F7F7F7; }
        .analyticsContentArea .cardContainer .tscard .selectZone .customDropdown .dropdownItemList,
        .analyticsContentArea .cardContainer .tscard .ccThreshold .customDropdown .dropdownItemList {
          top: 40px;
          background-color: #F7F7F7; }
          .analyticsContentArea .cardContainer .tscard .selectZone .customDropdown .dropdownItemList li a:hover,
          .analyticsContentArea .cardContainer .tscard .ccThreshold .customDropdown .dropdownItemList li a:hover {
            background-color: #F9F2FF !important;
            color: #52575c !important; }
          .analyticsContentArea .cardContainer .tscard .selectZone .customDropdown .dropdownItemList li.selected a,
          .analyticsContentArea .cardContainer .tscard .ccThreshold .customDropdown .dropdownItemList li.selected a {
            background: #F9F2FF; }
          .analyticsContentArea .cardContainer .tscard .selectZone .customDropdown .dropdownItemList li.active a,
          .analyticsContentArea .cardContainer .tscard .ccThreshold .customDropdown .dropdownItemList li.active a {
            color: #52575c !important; }
        .analyticsContentArea .cardContainer .tscard .selectZone .info,
        .analyticsContentArea .cardContainer .tscard .ccThreshold .info {
          width: 16px;
          height: 16px;
          margin-left: 5px;
          display: inline-block; }
          .analyticsContentArea .cardContainer .tscard .selectZone .info .customtooltip,
          .analyticsContentArea .cardContainer .tscard .ccThreshold .info .customtooltip {
            top: 25px;
            left: 0; }
      .analyticsContentArea .cardContainer .tscard .ccThreshold {
        margin-bottom: 0; }
        .analyticsContentArea .cardContainer .tscard .ccThreshold .customDropdown {
          background-color: #F7F7F7; }
          .analyticsContentArea .cardContainer .tscard .ccThreshold .customDropdown .arrow {
            margin-right: 10px;
            width: 7px;
            background: url(../img/arrow.svg) 0 0 no-repeat;
            display: inline-block;
            line-height: 8px; }
          .analyticsContentArea .cardContainer .tscard .ccThreshold .customDropdown .dropdownItemList .arrow {
            margin-right: 15px; }
      .analyticsContentArea .cardContainer .tscard .ruleZone .info .customtooltip {
        width: 220px;
        height: auto;
        white-space: normal;
        border-radius: 10px; }
      .analyticsContentArea .cardContainer .tscard .countInput {
        padding: 0 10px;
        height: 36px;
        border: 1px solid #dbdde0;
        border-radius: 5px;
        background-color: #F7F7F7 !important;
        color: #52575c;
        width: 82px; }
      .analyticsContentArea .cardContainer .tscard .presenceSection {
        width: 210px; }
        @media (max-width: 768px) {
          .analyticsContentArea .cardContainer .tscard .presenceSection {
            width: 100%;
            margin-bottom: 20px; } }
      .analyticsContentArea .cardContainer .tscard .countSection {
        border-left: solid 1px transparent;
        padding-left: 15px;
        margin-left: 15px;
        width: 230px; }
        @media (max-width: 768px) {
          .analyticsContentArea .cardContainer .tscard .countSection {
            width: 100%;
            margin-bottom: 20px;
            border: 0;
            margin: 0;
            padding: 0; } }
    .analyticsContentArea .cardContainer .groupCard {
      background: #ffffff;
      box-shadow: 0px 2px 5px rgba(40, 40, 40, 0.1);
      border-radius: 4px;
      display: inline-flex;
      flex-wrap: wrap;
      margin-right: 30px;
      margin-bottom: 30px;
      width: 250px;
      padding: 15px;
      color: #595959; }
      .analyticsContentArea .cardContainer .groupCard .actions {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        margin-bottom: 10px; }
        .analyticsContentArea .cardContainer .groupCard .actions a {
          margin-right: 15px;
          width: 18px;
          height: 18px; }
          .analyticsContentArea .cardContainer .groupCard .actions a:last-child {
            margin-right: 0; }
        .analyticsContentArea .cardContainer .groupCard .actions .customTooltip {
          top: 25px;
          right: 0; }
      .analyticsContentArea .cardContainer .groupCard h4 {
        margin: -28px 0 0 0;
        font-size: 16px;
        font-weight: bold;
        color: #595959;
        width: 72%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden; }
      .analyticsContentArea .cardContainer .groupCard p {
        width: 100%;
        color: #58595B;
        margin-bottom: 15px;
        font-size: 14px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        border-top: 1px solid #E0E0E0;
        padding-top: 10px; }
        .analyticsContentArea .cardContainer .groupCard p strong {
          margin-right: 5px; }
        .analyticsContentArea .cardContainer .groupCard p span {
          display: inline-block;
          width: 168px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden; }
        .analyticsContentArea .cardContainer .groupCard p:last-child {
          margin-bottom: 0; }
    .analyticsContentArea .cardContainer .classGroupCard {
      background: #ffffff;
      box-shadow: 2px 8px 24px rgba(0, 0, 0, 0.09);
      border-radius: 13px;
      display: inline-flex;
      flex-wrap: wrap;
      margin-right: 30px;
      margin-bottom: 30px;
      width: 250px;
      padding: 15px;
      color: #595959; }
      .analyticsContentArea .cardContainer .classGroupCard .actions {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        margin-bottom: 10px; }
        .analyticsContentArea .cardContainer .classGroupCard .actions a {
          margin-right: 15px; }
          .analyticsContentArea .cardContainer .classGroupCard .actions a:last-child {
            margin-right: 0; }
        .analyticsContentArea .cardContainer .classGroupCard .actions .customTooltip {
          top: 25px;
          right: 0; }
      .analyticsContentArea .cardContainer .classGroupCard h4 {
        margin: 0 0 15px 0;
        font-size: 16px;
        font-weight: bold;
        color: #595959;
        width: 100%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden; }
      .analyticsContentArea .cardContainer .classGroupCard p {
        width: 100%;
        color: #58595B;
        margin-bottom: 15px;
        font-size: 14px;
        display: flex;
        justify-content: flex-start;
        align-items: center; }
        .analyticsContentArea .cardContainer .classGroupCard p strong {
          margin-right: 5px; }
        .analyticsContentArea .cardContainer .classGroupCard p span {
          display: inline-block;
          width: 168px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden; }
        .analyticsContentArea .cardContainer .classGroupCard p:last-child {
          margin-bottom: 0; }
    .analyticsContentArea .cardContainer .nothingToSeeHere {
      position: absolute;
      text-align: center; }
  .analyticsContentArea .buttonWrpper {
    margin-bottom: 20px;
    display: flex;
    position: relative;
    z-index: 1; }
    .analyticsContentArea .buttonWrpper .btnDisable {
      pointer-events: none;
      background: rgba(155, 155, 155, 0.2);
      color: rgba(89, 89, 89, 0.4); }
      .analyticsContentArea .buttonWrpper .btnDisable img {
        filter: invert(0%) sepia(1%) saturate(2%) hue-rotate(53deg) brightness(106%) contrast(100%); }
    .analyticsContentArea .buttonWrpper .btnDisable_ {
      background: rgba(155, 155, 155, 0.2);
      color: rgba(89, 89, 89, 0.4) !important; }
      .analyticsContentArea .buttonWrpper .btnDisable_ img {
        filter: invert(0%) sepia(1%) saturate(2%) hue-rotate(53deg) brightness(106%) contrast(100%); }
      .analyticsContentArea .buttonWrpper .btnDisable_:hover {
        background: rgba(155, 155, 155, 0.2);
        color: rgba(89, 89, 89, 0.4) !important; }
    .analyticsContentArea .buttonWrpper .btnDisable_ {
      position: relative; }
      .analyticsContentArea .buttonWrpper .btnDisable_ .customTooltip {
        top: 48px;
        left: 70%; }
      .analyticsContentArea .buttonWrpper .btnDisable_ .info .customTooltip {
        top: 25px;
        left: 0; }
      .analyticsContentArea .buttonWrpper .btnDisable_:hover .customTooltip {
        opacity: 1;
        visibility: visible; }
    .analyticsContentArea .buttonWrpper .selectClassSearch {
      margin-left: 16px;
      width: 258px;
      height: 36px;
      margin-bottom: 0px;
      box-shadow: 0px 2px 5px rgba(40, 40, 40, 0.1) !important;
      border-radius: 4px !important;
      border: none !important; }
      .analyticsContentArea .buttonWrpper .selectClassSearch input:focus {
        outline: none !important;
        box-shadow: none !important;
        color: #202223; }
      .analyticsContentArea .buttonWrpper .selectClassSearch .searchClass {
        font-size: 14px;
        font-weight: 400;
        font-family: "latoregular"; }
    .analyticsContentArea .buttonWrpper .perceptionSearch {
      box-shadow: none !important; }
  .analyticsContentArea .drawBtn {
    background-color: white !important;
    border: 1px solid #360D57 !important;
    color: #360D57 !important;
    width: auto;
    height: 36px;
    font-size: 16px;
    padding: 0 15px;
    border-radius: 10px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease-in; }
    .analyticsContentArea .drawBtn:hover {
      opacity: 0.9; }
    .analyticsContentArea .drawBtn.disabled {
      background-color: #F6F6F7;
      color: #8C9196; }
  .analyticsContentArea .addRuleBtn,
  .analyticsContentArea .addClassBtn,
  .analyticsContentArea .createGroupBtn,
  .analyticsContentArea .frameBtn,
  .analyticsContentArea .createZoneBtn {
    background-color: #8020CF;
    border-radius: 10px;
    border: 0;
    width: auto;
    height: 36px;
    font-size: 16px;
    color: #ffffff !important;
    padding: 0 15px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease-in; }
    .analyticsContentArea .addRuleBtn .iconPlus,
    .analyticsContentArea .addClassBtn .iconPlus,
    .analyticsContentArea .createGroupBtn .iconPlus,
    .analyticsContentArea .frameBtn .iconPlus,
    .analyticsContentArea .createZoneBtn .iconPlus {
      margin-right: 8px; }
    .analyticsContentArea .addRuleBtn:hover,
    .analyticsContentArea .addClassBtn:hover,
    .analyticsContentArea .createGroupBtn:hover,
    .analyticsContentArea .frameBtn:hover,
    .analyticsContentArea .createZoneBtn:hover {
      opacity: 0.9;
      color: #ffffff !important; }
    .analyticsContentArea .addRuleBtn.disabled,
    .analyticsContentArea .addClassBtn.disabled,
    .analyticsContentArea .createGroupBtn.disabled,
    .analyticsContentArea .frameBtn.disabled,
    .analyticsContentArea .createZoneBtn.disabled {
      background-color: #F6F6F7;
      color: #8C9196; }
  .analyticsContentArea .deleteClassBtn {
    padding: 0 15px;
    margin-left: auto;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease-in; }
    .analyticsContentArea .deleteClassBtn .customTooltip {
      top: 40px;
      right: 0px; }
  .analyticsContentArea .fetchFrame .icon {
    margin-right: 5px;
    width: 15px; }
  .analyticsContentArea .fetchFrame .info {
    margin-left: 5px;
    width: 17px; }
  .analyticsContentArea .fetchFrame .customTooltip {
    top: 25px;
    left: 0; }
  .analyticsContentArea .nav-pills .nav-item:nth-child(1) .nav-link {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border-right: 0 !important; }
  .analyticsContentArea .nav-pills .nav-item:nth-child(2) .nav-link {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px; }
  .analyticsContentArea .nav-pills .nav-link {
    height: 30px;
    padding: 0 20px;
    border-radius: 0;
    color: #B7B7B7;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #EAEAEA;
    background: transparent;
    transition: all 0.2s ease-in; }
    .analyticsContentArea .nav-pills .nav-link .info {
      margin-left: 10px;
      display: inline-block; }
      .analyticsContentArea .nav-pills .nav-link .info .customTooltip {
        left: 0;
        top: 25px; }
  .analyticsContentArea .nav-pills .nav-link.active,
  .analyticsContentArea .nav-pills .show > .nav-link {
    background: transparent !important;
    color: #159A86;
    font-weight: 600; }
    .analyticsContentArea .nav-pills .nav-link.active .infoDarkGray,
    .analyticsContentArea .nav-pills .show > .nav-link .infoDarkGray {
      background: url(../img/ch-info-dark-purple.svg) 0 0 no-repeat;
      background-size: 16px; }

.addClassModal .modal-content {
  background-color: #fff !important;
  border-radius: 4px;
  height: auto;
  padding-bottom: 20px;
  flex-wrap: wrap;
  color: #595959; }

.addClassModal .modal-dialog {
  max-width: 683px;
  align-items: center;
  margin-top: 0; }

.addClassModal .modal-body {
  width: 100%;
  padding: 30px 20px 0 20px; }

.addClassModal .btnWrapper {
  display: flex;
  justify-content: center;
  margin-top: 20px; }

.addClassModal .saveGroupBtn,
.addClassModal .saveClassBtn {
  width: 100%;
  color: white !important;
  height: 44px;
  max-width: 400px; }

.addClassModal .modal-header {
  width: 100%;
  text-align: center;
  border: 0;
  align-items: center;
  padding-left: 20px;
  padding-top: 15px;
  justify-content: center; }
  .addClassModal .modal-header .info {
    margin-left: 10px; }

.addClassModal .modal-title {
  color: #210835;
  text-align: left;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center; }

.addClassModal .selectAllClass {
  margin-left: 5px;
  margin-bottom: 30px;
  font-size: 16px;
  font-weight: 600;
  color: #8020CF;
  display: inline-block;
  cursor: pointer; }

.addClassModal .selectClassSearch {
  width: 294px;
  height: 36px;
  border: none;
  box-shadow: 0px 2px 5px rgba(40, 40, 40, 0.1); }
  .addClassModal .selectClassSearch .searchClass {
    font-size: 14px;
    font-family: "latoregular"; }

.addClassModal .overflowContainer {
  max-height: 400px;
  overflow: hidden;
  margin-bottom: 10px;
  padding: 0 5px; }

.addClassModal .mCSB_container {
  padding: 1px; }

.addClassModal .info .customTooltip {
  top: 25px;
  left: -20px;
  text-transform: none; }

.addClassModal .form-group {
  position: relative;
  margin-bottom: 30px; }
  .addClassModal .form-group label {
    width: 100%;
    font-size: 16px;
    color: #58595B; }
  .addClassModal .form-group label.checkbox {
    font-size: 14px;
    font-weight: 400; }
  .addClassModal .form-group label.inline {
    width: auto;
    margin-bottom: 0; }

.addClassModal .classSearchWrapper {
  display: flex;
  margin-bottom: 30px;
  justify-content: space-between; }

.addClassModal .checkbox {
  width: auto !important;
  margin: 0;
  font-weight: normal;
  font-size: 15px;
  color: #595959;
  cursor: pointer;
  display: inline-flex;
  justify-content: flex-start;
  align-items: flex-start;
  word-break: break-all;
  word-wrap: anywhere; }
  .addClassModal .checkbox input[type='checkbox'] {
    display: none; }
  .addClassModal .checkbox .checkboxSpan {
    /*border: 2px solid #797878;*/
    border: none;
    min-width: 16px;
    width: 16px;
    height: 15px;
    border-radius: 4px;
    margin-right: 10px;
    background: #ffffff;
    margin-top: 4px;
    border: solid 2px #878787; }
  .addClassModal .checkbox input[type='checkbox']:checked + .checkboxSpan {
    background: url(../img/ch-check-white.svg) center center no-repeat;
    background-color: #8020CF;
    border-color: #8020CF;
    background-size: 10px; }

.addClassModal .customDropdown .checkbox {
  padding-left: 10px;
  padding-right: 15px; }

.addClassModal .customDropdown .itemBtn {
  padding: 0 15px !important;
  height: 36px;
  background: #fff !important;
  color: #360D57 !important;
  border: 1px solid #360D57 !important;
  font-weight: 500 !important;
  border-radius: 10px;
  font-size: 14px;
  display: inline-flex;
  align-items: center; }
  .addClassModal .customDropdown .itemBtn .icon {
    margin-right: 4px; }
  .addClassModal .customDropdown .itemBtn #classFilterCount {
    margin-left: 4px;
    padding: 0;
    width: 20px;
    height: 20px;
    justify-content: center;
    align-items: center; }

.addClassModal .customDropdown .dropdownItemList {
  top: 50px;
  left: auto;
  right: 0;
  width: 300px;
  padding: 5px 8px 50px 5px !important; }
  .addClassModal .customDropdown .dropdownItemList li a {
    padding: 4px 10px; }
  .addClassModal .customDropdown .dropdownItemList .mCSB_container {
    padding: 1px; }

.addClassModal .dropdownBtn {
  background: transparent;
  border-radius: 5px;
  width: 76px;
  height: 35px;
  font-size: 14px;
  font-weight: 400;
  color: #595959;
  padding: 10px;
  border: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s ease-in; }
  .addClassModal .dropdownBtn.active, .addClassModal .dropdownBtn:hover {
    background: rgba(19, 139, 250, 0.13);
    color: #138bfa; }

.addClassModal .showMore {
  display: block;
  margin: 0 auto;
  font-size: 14px;
  color: #8020CF !important; }

.lineDrawModal .modal-dialog {
  transform: none !important;
  max-width: 100% !important;
  margin: 0 !important; }
  .lineDrawModal .modal-dialog .modal-content {
    height: 100% !important;
    margin-top: 0 !important; }
  .lineDrawModal .modal-dialog .modal-body {
    display: flex !important; }
    .lineDrawModal .modal-dialog .modal-body canvas {
      background-repeat: no-repeat; }
    .lineDrawModal .modal-dialog .modal-body .drawn-lines-area {
      background: #FAFBFC;
      width: 300px;
      max-height: calc(100vh - 70px);
      margin-left: auto;
      padding: 20px;
      overflow-y: scroll; }
      .lineDrawModal .modal-dialog .modal-body .drawn-lines-area::-webkit-scrollbar {
        display: none; }
      .lineDrawModal .modal-dialog .modal-body .drawn-lines-area h5 {
        font-weight: 600;
        font-size: 18px;
        line-height: 24px;
        color: #210835; }
      .lineDrawModal .modal-dialog .modal-body .drawn-lines-area p {
        font-weight: 400;
        font-size: 14px;
        line-height: 22px;
        color: #535353; }
        .lineDrawModal .modal-dialog .modal-body .drawn-lines-area p span {
          font-weight: 600;
          color: #303030; }
      .lineDrawModal .modal-dialog .modal-body .drawn-lines-area .drawn-line-box {
        background: #FFFFFF;
        box-shadow: 2px 5px 5px rgba(22, 22, 22, 0.08);
        border-radius: 4.96188px;
        width: 100%;
        padding: 10px;
        margin-bottom: 20px;
        position: relative; }
        .lineDrawModal .modal-dialog .modal-body .drawn-lines-area .drawn-line-box .classes-area {
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 2;
          display: -webkit-box;
          -webkit-box-orient: vertical; }
        .lineDrawModal .modal-dialog .modal-body .drawn-lines-area .drawn-line-box .actions-box {
          position: absolute;
          top: 35;
          right: 10;
          width: 200px;
          height: auto;
          background-color: white;
          box-shadow: 0px 3px 5px rgba(6, 0, 41, 0.2);
          border-radius: 6px;
          z-index: 10;
          display: none; }
          .lineDrawModal .modal-dialog .modal-body .drawn-lines-area .drawn-line-box .actions-box div {
            cursor: pointer;
            font-weight: 400;
            font-size: 14px;
            line-height: 20px;
            color: #595959;
            padding: 15px;
            display: flex;
            align-items: center; }
            .lineDrawModal .modal-dialog .modal-body .drawn-lines-area .drawn-line-box .actions-box div:hover {
              background: #FAF5FF; }

.gsAddRuleModal .modal-content,
.lineDrawModal .modal-content {
  background-color: #fff !important;
  border-radius: 4px;
  height: auto;
  padding-bottom: 20px;
  flex-wrap: wrap;
  color: #595959;
  margin-top: 0; }

.gsAddRuleModal .modal-dialog,
.lineDrawModal .modal-dialog {
  max-width: 510px;
  align-items: center;
  margin-top: 0; }

.gsAddRuleModal .modal-body,
.lineDrawModal .modal-body {
  width: 100%;
  padding: 0 15px 0 20px; }

.gsAddRuleModal .btnWrapper,
.lineDrawModal .btnWrapper {
  display: flex;
  justify-content: center;
  margin-top: 20px; }

.gsAddRuleModal .saveGroupBtn,
.lineDrawModal .saveGroupBtn {
  width: 135px;
  height: 44px; }

.gsAddRuleModal .modal-header,
.lineDrawModal .modal-header {
  width: 100%;
  text-align: center;
  border: 0;
  align-items: center;
  padding-left: 20px;
  padding-top: 20px;
  padding-bottom: 20px; }

.gsAddRuleModal .modal-title,
.lineDrawModal .modal-title {
  color: #210835;
  text-align: center !important;
  text-transform: capitalize;
  width: 100%;
  font-size: 16px;
  font-weight: 600; }

.gsAddRuleModal .selectAllClassForGroup,
.lineDrawModal .selectAllClassForGroup {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 600;
  color: #8020CF;
  display: inline-block;
  cursor: pointer; }

.gsAddRuleModal .overflowContainer,
.lineDrawModal .overflowContainer {
  max-height: 300px;
  overflow: hidden;
  margin-bottom: 10px; }

.gsAddRuleModal .mCSB_container,
.lineDrawModal .mCSB_container {
  padding: 1px; }

.gsAddRuleModal .info,
.lineDrawModal .info {
  margin-left: 5px;
  width: 20px;
  height: 20px;
  display: inline-block; }
  .gsAddRuleModal .info .customTooltip,
  .lineDrawModal .info .customTooltip {
    top: 25px;
    left: -20px;
    text-transform: none; }

.gsAddRuleModal .form-group,
.lineDrawModal .form-group {
  position: relative; }
  .gsAddRuleModal .form-group label,
  .lineDrawModal .form-group label {
    width: 100%;
    font-size: 16px;
    color: #58595B;
    font-weight: 500; }
  .gsAddRuleModal .form-group label.checkbox,
  .lineDrawModal .form-group label.checkbox {
    font-size: 14px;
    font-weight: 400; }
  .gsAddRuleModal .form-group label.inline,
  .lineDrawModal .form-group label.inline {
    width: auto;
    margin-bottom: 0; }
  .gsAddRuleModal .form-group .groupName,
  .lineDrawModal .form-group .groupName {
    background: #F7F7F7;
    width: 100%;
    height: 45px;
    padding: 0 15px;
    border: 1px solid #dbdbdb;
    border-radius: 5px; }

.gsAddRuleModal .classSearchWrapper,
.lineDrawModal .classSearchWrapper {
  display: flex;
  margin-bottom: 30px;
  flex-wrap: wrap; }
  .gsAddRuleModal .classSearchWrapper .group,
  .lineDrawModal .classSearchWrapper .group {
    display: flex;
    width: 100%; }

.gsAddRuleModal .checkbox,
.lineDrawModal .checkbox {
  width: auto !important;
  margin: 0;
  font-weight: normal;
  font-size: 15px;
  color: #595959;
  cursor: pointer;
  display: inline-flex;
  justify-content: flex-start;
  align-items: flex-start;
  word-break: break-all;
  word-wrap: anywhere; }
  .gsAddRuleModal .checkbox input[type='checkbox'],
  .lineDrawModal .checkbox input[type='checkbox'] {
    display: none; }
  .gsAddRuleModal .checkbox .checkboxSpan,
  .lineDrawModal .checkbox .checkboxSpan {
    border: none;
    min-width: 16px;
    width: 16px;
    height: 15px;
    border-radius: 3px;
    margin-right: 10px;
    background: #ffffff;
    margin-top: 4px;
    border: solid 2px #878787; }
  .gsAddRuleModal .checkbox input[type='checkbox']:checked + .checkboxSpan,
  .lineDrawModal .checkbox input[type='checkbox']:checked + .checkboxSpan {
    background: url(../img/ch-check-white.svg) center center no-repeat;
    background-color: #8020CF;
    border-color: #8020CF;
    background-size: 10px; }

.gsAddRuleModal .customDropdown,
.lineDrawModal .customDropdown {
  margin-left: auto; }
  .gsAddRuleModal .customDropdown .checkbox,
  .lineDrawModal .customDropdown .checkbox {
    padding-left: 10px;
    padding-right: 15px; }
  .gsAddRuleModal .customDropdown .itemBtn,
  .lineDrawModal .customDropdown .itemBtn {
    padding: 0 10px !important;
    height: 40px;
    background: transparent !important;
    color: #210835 !important;
    border: 1px solid #210835 !important;
    font-weight: 600 !important;
    border-radius: 10px;
    display: flex;
    align-items: center;
    width: 165;
    justify-content: space-evenly; }
    .gsAddRuleModal .customDropdown .itemBtn span,
    .lineDrawModal .customDropdown .itemBtn span {
      color: white;
      background: #210835;
      padding: 2px 10px;
      border-radius: 50%;
      display: none; }
  .gsAddRuleModal .customDropdown .dropdownItemList,
  .lineDrawModal .customDropdown .dropdownItemList {
    top: 50px;
    left: -135px;
    width: 300px;
    padding: 5px 8px 50px 5px !important; }
    .gsAddRuleModal .customDropdown .dropdownItemList li a,
    .lineDrawModal .customDropdown .dropdownItemList li a {
      padding: 4px 10px; }
    .gsAddRuleModal .customDropdown .dropdownItemList .mCSB_container,
    .lineDrawModal .customDropdown .dropdownItemList .mCSB_container {
      padding: 1px; }

.gsAddRuleModal .dropdownBtn,
.lineDrawModal .dropdownBtn {
  background: transparent;
  border-radius: 5px;
  width: 76px;
  height: 35px;
  font-size: 14px;
  font-weight: 400;
  color: #595959;
  padding: 10px;
  border: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s ease-in; }
  .gsAddRuleModal .dropdownBtn.active, .gsAddRuleModal .dropdownBtn:hover,
  .lineDrawModal .dropdownBtn.active,
  .lineDrawModal .dropdownBtn:hover {
    background: rgba(19, 139, 250, 0.13);
    color: #138bfa; }

.gsAddRuleModal .showMore,
.gsAddRuleModal .showMoreGroup,
.lineDrawModal .showMore,
.lineDrawModal .showMoreGroup {
  display: block;
  margin: 0 auto;
  font-size: 14px;
  color: #8020CF !important; }

.classesContainer {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  position: relative;
  margin-top: 30px;
  margin-bottom: 30px; }
  .classesContainer .classes {
    background: #ffffff;
    box-shadow: 1px 1px 3px rgba(22, 22, 22, 0.08);
    border-radius: 5px;
    border-radius: 5px;
    width: 258px;
    height: 55px;
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 30px 30px 0;
    padding: 20px 15px;
    position: relative; }
    .classesContainer .classes .customTooltip {
      top: 25px;
      right: 0; }
    .classesContainer .classes h4 {
      margin: 0;
      width: 75%;
      display: inline-block;
      color: #303030;
      font-size: 16px;
      font-weight: 600;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden; }
    .classesContainer .classes .deleteClass {
      width: 20px;
      height: 22px;
      background: url(../img/ch-delete-gray.svg) 0 0 no-repeat;
      padding: 0;
      border: 0; }
  .classesContainer .append-classes {
    width: 100%; }

.groupCardsContainer {
  position: relative;
  display: flex !important;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  position: relative;
  margin-top: 30px;
  margin-bottom: 30px; }
  .groupCardsContainer .append-groups {
    width: 100%; }

.classesTabPane .innerTitle {
  margin: 0 0 20px 0;
  color: #595959;
  font-size: 18px; }
  .classesTabPane .innerTitle .info {
    width: 16px;
    height: 16px;
    margin-left: 5px;
    display: inline-block; }
    .classesTabPane .innerTitle .info .customTooltip {
      top: 25px;
      right: 0; }

.classesTabPane .customDropdown {
  width: 225px; }

.csAddRuleModal {
  padding: 0 !important; }
  .csAddRuleModal .processHighlightBar {
    margin-bottom: 20px !important; }
  .csAddRuleModal .modal-dialog {
    max-width: 785px;
    align-items: center;
    margin: 0 auto; }
  .csAddRuleModal .modal-content {
    background-color: #fff !important;
    border-radius: 10px;
    height: auto;
    padding-bottom: 0 !important;
    flex-wrap: wrap;
    color: #595959;
    margin-top: 0; }
  .csAddRuleModal .modal-body {
    width: 100%;
    padding: 40px 80px 20px 100px !important; }
    .csAddRuleModal .modal-body .viewMore {
      font-size: 14px;
      font-weight: 400;
      color: #8020CF;
      position: relative;
      padding-right: 20px;
      width: 100px;
      display: inline-block;
      white-space: nowrap; }
      .csAddRuleModal .modal-body .viewMore:before {
        position: absolute;
        right: 0;
        bottom: 2px;
        content: 'View More';
        width: 100%;
        height: 20px;
        background: url(../img/ch-plus-purple.svg) 80px 2px no-repeat; }
      .csAddRuleModal .modal-body .viewMore.less:before {
        content: 'View Less';
        background: url(../img/ch-minus-purple.svg) 80px 10px no-repeat;
        bottom: 1px; }
    .csAddRuleModal .modal-body .classGroupNote {
      font-weight: 400;
      font-size: 14px;
      line-height: 20px;
      color: #535353;
      margin-bottom: 28px;
      position: relative;
      padding-left: 25px; }
      .csAddRuleModal .modal-body .classGroupNote .info {
        position: absolute;
        top: 3px;
        left: 0;
        margin: 0; }
      .csAddRuleModal .modal-body .classGroupNote span {
        color: #8020CF;
        font-weight: 500; }
    .csAddRuleModal .modal-body .classesGroup {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-wrap: wrap; }
      .csAddRuleModal .modal-body .classesGroup .checkbox {
        white-space: nowrap; }
      .csAddRuleModal .modal-body .classesGroup .checkboxInfo {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        display: inline-block; }
      .csAddRuleModal .modal-body .classesGroup i.models {
        color: #A5A5A5;
        margin-left: 4px;
        font-weight: 400; }
  .csAddRuleModal .btnWrapper {
    display: flex;
    justify-content: center;
    box-shadow: 3px 0px 5px 1px rgba(193, 193, 193, 0.25);
    padding: 20px 0; }
  .csAddRuleModal .saveClasssGroupBtn {
    width: 100%;
    max-width: 300px;
    height: 44px; }
    .csAddRuleModal .saveClasssGroupBtn.disable {
      border-color: #F7F7F7;
      background: #F7F7F7;
      color: #B7B7B7 !important;
      opacity: 1; }
  .csAddRuleModal .modal-header {
    width: 100%;
    text-align: center;
    border: 0;
    align-items: center;
    text-transform: none;
    padding-left: 25px;
    padding-right: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    color: #58595B;
    border-bottom: 1px solid #E5E5E5; }
    .csAddRuleModal .modal-header .backBtn {
      background: none;
      border: none; }
    .csAddRuleModal .modal-header .closeModal {
      position: static; }
  .csAddRuleModal .modal-title {
    font-weight: 600 !important;
    font-size: 18px !important;
    line-height: 20px !important;
    text-align: center !important;
    color: #210835 !important; }
  .csAddRuleModal .overflowContainer {
    max-height: 250px;
    overflow: hidden;
    margin-bottom: 20px; }
    .csAddRuleModal .overflowContainer .mCSB_container {
      padding: 1px 1px 50px 1px; }
  .csAddRuleModal .overflowContainerData {
    max-height: 250px;
    overflow: hidden;
    margin-bottom: 10px;
    margin-right: -60px; }
    .csAddRuleModal .overflowContainerData .mCSB_inside > .mCSB_container {
      margin-right: 60px; }
  .csAddRuleModal .selectClassSearch {
    margin-top: 14px;
    margin-bottom: 25px;
    border: 0;
    width: 100%;
    box-shadow: 0px 2px 5px rgba(40, 40, 40, 0.1);
    border-radius: 4px;
    justify-content: flex-start;
    border: 1px solid #E0E0E0; }
    .csAddRuleModal .selectClassSearch .searchClass {
      font-size: 14px;
      font-weight: 400; }
    .csAddRuleModal .selectClassSearch .easy-autocomplete-container {
      width: 569px !important;
      left: -40px; }
  .csAddRuleModal .group {
    display: none;
    margin-top: 10px;
    margin-bottom: 20px; }
    .csAddRuleModal .group.open {
      display: flex;
      justify-content: space-between;
      align-items: flex-start; }
  .csAddRuleModal .mCSB_container {
    padding: 1px; }
  .csAddRuleModal .info {
    margin-left: 10px;
    width: 16px;
    height: 16px;
    display: inline-block; }
    .csAddRuleModal .info .customTooltip {
      top: 25px;
      left: 0;
      text-transform: none; }
  .csAddRuleModal .form-group {
    position: relative;
    margin-bottom: 20px; }
    .csAddRuleModal .form-group label {
      width: 100%;
      font-size: 16px;
      color: #303030;
      font-weight: 500;
      font-size: 16px;
      display: flex;
      align-items: center; }
    .csAddRuleModal .form-group label.inline {
      width: auto;
      margin-bottom: 0; }
    .csAddRuleModal .form-group label.checkbox {
      font-size: 14px;
      font-weight: 400;
      color: #535353;
      align-items: center; }
    .csAddRuleModal .form-group input[type="text"] {
      background: #F7F7F7;
      border: 1px solid #E0E0E0;
      box-sizing: border-box;
      border-radius: 5px;
      width: 100%;
      max-width: 500px;
      height: 50px;
      padding: 0 15px;
      color: #210835;
      font-size: 14px; }
      .csAddRuleModal .form-group input[type="text"]:focus {
        color: #210835; }
    .csAddRuleModal .form-group h6 {
      font-weight: 500;
      font-size: 16px;
      line-height: 20px;
      color: #535353; }
    .csAddRuleModal .form-group .info .icon {
      width: 18px;
      height: 18px;
      background-size: 18px; }
  .csAddRuleModal h4 {
    font-weight: 500;
    font-size: 18px;
    line-height: 20px;
    color: #535353;
    margin-bottom: 0; }
  .csAddRuleModal .nameAndRule .customTooltip {
    width: 266px;
    white-space: normal;
    border-radius: 10px;
    padding: 10px; }
    .csAddRuleModal .nameAndRule .customTooltip strong {
      display: block;
      margin-bottom: 5px;
      margin-left: 0;
      font-weight: 600; }
  .csAddRuleModal .addClassOrGroup {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    color: #210835;
    margin-bottom: 10px; }
  .csAddRuleModal .checkbox {
    width: auto !important;
    margin: 0;
    font-weight: normal;
    font-size: 15px;
    color: #595959;
    cursor: pointer;
    display: inline-flex;
    justify-content: flex-start;
    align-items: flex-start;
    line-height: 16px; }
    .csAddRuleModal .checkbox input[type='checkbox'] {
      display: none; }
    .csAddRuleModal .checkbox .checkboxSpan {
      border: 2px solid #878787;
      min-width: 18px;
      width: 18px;
      height: 18px;
      border-radius: 4px;
      margin-right: 8px;
      background: #ffffff;
      background: #fff;
      word-break: break-all;
      word-wrap: anywhere; }
    .csAddRuleModal .checkbox input[type='checkbox']:checked + .checkboxSpan {
      background: url(../img/ch-check-white.svg) center center no-repeat;
      background-color: #8020CF;
      background-size: 12px;
      border-radius: 4px;
      border-color: #8020CF; }
  .csAddRuleModal .groups .checkbox .checkboxSpan {
    border-radius: 30px !important; }
    .csAddRuleModal .groups .checkbox .checkboxSpan:before {
      position: absolute;
      top: 4px;
      left: 4px;
      width: 10px;
      height: 10px;
      border-radius: 20px;
      content: '';
      background: transparent; }
  .csAddRuleModal .groups .checkbox input[type='checkbox']:checked + .checkboxSpan {
    border-color: #8020CF;
    background: transparent; }
  .csAddRuleModal .groups .checkbox input[type='checkbox']:checked + .checkboxSpan:before {
    background: #8020CF;
    border-color: #8020CF; }
  .csAddRuleModal .customDropdown {
    width: 200px;
    margin-top: 5px; }
    .csAddRuleModal .customDropdown .itemBtn {
      padding-left: 15px;
      height: 40px;
      background-size: 20px;
      background-position: 95% center; }
    .csAddRuleModal .customDropdown .dropdownItemList {
      top: 40px;
      max-height: 120px;
      padding: 5px 8px 50px 5px !important; }
      .csAddRuleModal .customDropdown .dropdownItemList li a {
        padding: 8px 10px;
        font-size: 14px; }
      .csAddRuleModal .customDropdown .dropdownItemList .mCSB_container {
        padding: 1px; }
  .csAddRuleModal .dropdownBtn {
    background: transparent;
    border-radius: 5px;
    width: 76px;
    height: 35px;
    font-size: 14px;
    font-weight: 400;
    color: #595959;
    padding: 10px;
    border: 0;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease-in; }
    .csAddRuleModal .dropdownBtn.active, .csAddRuleModal .dropdownBtn:hover {
      background: rgba(19, 139, 250, 0.13);
      color: #138bfa; }
  .csAddRuleModal .count,
  .csAddRuleModal .logicDropdown,
  .csAddRuleModal .addZoneDropdown {
    margin-top: 10px;
    display: inline-flex;
    flex-wrap: wrap;
    font-size: 14px;
    color: #595959; }
    .csAddRuleModal .count.active,
    .csAddRuleModal .logicDropdown.active,
    .csAddRuleModal .addZoneDropdown.active {
      display: inline-block; }
    .csAddRuleModal .count input[type="text"],
    .csAddRuleModal .logicDropdown input[type="text"],
    .csAddRuleModal .addZoneDropdown input[type="text"] {
      margin-top: 5px; }
  .csAddRuleModal .classAbsence {
    padding: 19px 0 25px;
    margin-bottom: 22px;
    border-top: solid 1px #E0E0E0;
    border-bottom: solid 1px #E0E0E0; }
    .csAddRuleModal .classAbsence h4 {
      display: inline-flex;
      align-items: center; }
    .csAddRuleModal .classAbsence .group {
      display: flex;
      justify-content: space-between;
      margin: 0 0 12px; }
    .csAddRuleModal .classAbsence .infoGray {
      margin-left: 5px;
      width: 13px;
      height: 13px;
      background: url(../img/ch-info-gray-sm.svg) 0 0 no-repeat;
      background-size: contain;
      display: inline-block; }
    .csAddRuleModal .classAbsence p {
      font-size: 14px !important;
      font-weight: 400 !important;
      margin-bottom: 0 !important;
      color: #535353; }
      .csAddRuleModal .classAbsence p strong {
        font-weight: 500;
        color: #8020CF; }
    .csAddRuleModal .classAbsence .alertOptional .soOBtn {
      margin-left: auto;
      display: inline-flex;
      align-items: center; }
      .csAddRuleModal .classAbsence .alertOptional .soOBtn span {
        margin-right: 10px;
        font-size: 14px;
        font-weight: 600;
        color: #535353; }
      .csAddRuleModal .classAbsence .alertOptional .soOBtn input[type="checkbox"] {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        width: 40px;
        height: 20px;
        border-radius: 20px;
        position: relative;
        background: #AAAAAA;
        display: inline-flex;
        align-items: center; }
        .csAddRuleModal .classAbsence .alertOptional .soOBtn input[type="checkbox"]:focus {
          outline: none; }
        .csAddRuleModal .classAbsence .alertOptional .soOBtn input[type="checkbox"]:before {
          width: 14px;
          height: 14px;
          border-radius: 30px;
          position: absolute;
          left: 2px;
          display: inline-block;
          content: '';
          background: #ffffff;
          cursor: pointer;
          transition: all 0.2s ease-in; }
        .csAddRuleModal .classAbsence .alertOptional .soOBtn input[type="checkbox"]:checked {
          background: #8020CF; }
        .csAddRuleModal .classAbsence .alertOptional .soOBtn input[type="checkbox"]:checked:before {
          left: 23px;
          background: #ffffff; }

.tabPaneHeader {
  display: flex;
  justify-content: space-between; }

.customDropdownCheckbox .checkbox,
.customDropdownCheckbox .radiobox {
  width: 100%;
  margin: 0;
  font-weight: normal;
  font-size: 14px;
  color: #4F4F4F;
  padding: 8px 0 8px 15px;
  cursor: pointer;
  display: flex;
  justify-content: flex-start;
  align-items: center; }
  .customDropdownCheckbox .checkbox input[type='checkbox'],
  .customDropdownCheckbox .radiobox input[type='checkbox'] {
    display: none; }
  .customDropdownCheckbox .checkbox .checkboxSpan,
  .customDropdownCheckbox .radiobox .checkboxSpan {
    border: 2px solid #878787;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    margin-right: 10px;
    background: #ffffff;
    margin-top: -2px;
    /*background: url(../img/checkbox-default.svg) 0 0 no-repeat;*/ }
    .customDropdownCheckbox .checkbox .checkboxSpan:before,
    .customDropdownCheckbox .radiobox .checkboxSpan:before {
      display: none; }
  .customDropdownCheckbox .checkbox .models,
  .customDropdownCheckbox .radiobox .models {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 90%; }
  .customDropdownCheckbox .checkbox input[type='checkbox']:checked + .checkboxSpan,
  .customDropdownCheckbox .radiobox input[type='checkbox']:checked + .checkboxSpan {
    background: url(../img/ch-check-white.svg) center center no-repeat;
    background-color: #8020CF;
    background-size: 10px;
    border-radius: 4px;
    border-color: #8020CF; }

.customDropdownCheckbox .radiobox .checkboxSpan {
  border-radius: 100px;
  position: relative !important;
  display: inline-flex;
  align-items: center;
  justify-content: center; }
  @media screen and (min-width: 1980px) {
    .customDropdownCheckbox .radiobox .checkboxSpan {
      border-width: 3px; } }
  .customDropdownCheckbox .radiobox .checkboxSpan:before {
    width: 10px;
    height: 10px;
    border-radius: 100%;
    content: '';
    position: absolute;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    display: none; }
    @media screen and (min-width: 1980px) {
      .customDropdownCheckbox .radiobox .checkboxSpan:before {
        width: 11px;
        height: 11px; } }

.customDropdownCheckbox .radiobox input[type='radio']:checked + .checkboxSpan,
.customDropdownCheckbox .radiobox input[checked='true'] + .checkboxSpan {
  border-color: #8020CF; }

.customDropdownCheckbox .radiobox input[type='radio']:checked + .checkboxSpan:before,
.customDropdownCheckbox .radiobox input[checked='true'] + .checkboxSpan:before {
  display: block;
  background-color: #8020CF; }

.customDropdownCheckbox li {
  transition: all 0.2s ease-in; }

.fetchFrameInfoBtn {
  border-radius: 10px 10px 0px 0px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding-top: 5px;
  cursor: pointer;
  background: transparent;
  border: none;
  position: absolute;
  right: 0;
  top: 10px;
  z-index: 2; }
  .fetchFrameInfoBtn.active {
    background: #8020CF; }
    .fetchFrameInfoBtn.active .icon {
      filter: invert(100%) sepia(100%) saturate(13%) hue-rotate(237deg) brightness(200%) contrast(104%); }

.zoneFrameInfo {
  border: 1px solid #8020CF;
  padding: 16px 25px;
  width: 100%;
  background-color: #F7F7F7;
  border-radius: 10px 0 10px 10px;
  font-family: "Euclid Circular B";
  margin-bottom: 20px;
  margin-top: 30px;
  display: none; }
  .zoneFrameInfo h5 {
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    color: #210835; }
  .zoneFrameInfo p {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #4E4576;
    margin-bottom: 10px; }
    .zoneFrameInfo p:last-child {
      margin-bottom: 0; }
  .zoneFrameInfo #close-info {
    cursor: pointer;
    width: 15px;
    height: 15px;
    opacity: 0.7; }

.frameWrapper {
  display: flex; }
  .frameWrapper .frame {
    width: 100%;
    max-width: 450px;
    margin-right: 20px;
    margin-bottom: 20px;
    border-radius: 3px;
    transition: all 0.2s ease-in;
    position: relative; }
    .frameWrapper .frame .annotationArea {
      padding-bottom: 0 !important;
      height: 100%;
      max-height: 251px; }
    .frameWrapper .frame .frameTopbar {
      margin: 0;
      padding: 10px;
      width: calc(100% + 14px);
      z-index: 2;
      border-radius: 3px 3px 0 0;
      display: flex;
      justify-content: space-between;
      align-items: center; }
    .frameWrapper .frame h5 {
      font-size: 16px;
      font-weight: 400;
      width: 100%;
      margin-bottom: 0; }
  .frameWrapper .placeholderImage {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; }
    .frameWrapper .placeholderImage p {
      margin-bottom: 0;
      font-size: 16px;
      font-weight: 500;
      line-height: 30px;
      color: #ffffff;
      text-align: center;
      position: absolute; }

.countZones {
  border: 1px solid #E0E0E0;
  padding: 12px 17px;
  border-radius: 6px;
  margin-bottom: 20px; }
  .countZones h5 {
    font-size: 16px;
    font-weight: 400;
    color: #595959;
    display: flex;
    align-items: center;
    cursor: pointer; }
    .countZones h5 .info {
      margin-left: 5px;
      width: 16px;
      height: 16px; }
      .countZones h5 .info .customTooltip {
        top: 25px;
        left: 0; }
    .countZones h5 img {
      margin-left: auto; }
      .countZones h5 img.up {
        transform: rotate(180deg); }
  .countZones .zonesWrapper.hidden {
    display: none; }
  .countZones .zonesWrapper .zoneContainer {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: row;
    margin-top: 20px;
    width: 100%; }
    .countZones .zonesWrapper .zoneContainer .mCustomScrollBox {
      width: 100%; }
    .countZones .zonesWrapper .zoneContainer .mCSB_container {
      display: flex; }
  .countZones .zonesWrapper .zone {
    width: 120px;
    height: 120px;
    border-radius: 3px;
    margin-right: 20px;
    margin-bottom: 30px;
    position: relative; }
    .countZones .zonesWrapper .zone:last-child {
      margin-right: 150px; }
    .countZones .zonesWrapper .zone:before {
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.6);
      border-radius: 3px;
      position: absolute;
      top: 0;
      left: 0;
      content: '';
      z-index: 1;
      opacity: 0;
      transition: all 0.2s ease-in; }
    .countZones .zonesWrapper .zone .img {
      display: flex;
      width: 100% !important;
      height: 100% !important;
      margin-bottom: 10px;
      overflow: hidden;
      border-radius: 3px; }
    .countZones .zonesWrapper .zone img[class*="croppedPreview"] {
      max-width: 120px;
      max-height: 120px;
      object-fit: cover; }
    .countZones .zonesWrapper .zone .zoneName {
      font-size: 16px;
      font-weight: 400;
      color: #595959;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis; }
    .countZones .zonesWrapper .zone .zoneActionsDropdown {
      position: absolute;
      right: 5px;
      top: 5px;
      visibility: hidden;
      opacity: 0;
      transition: all 0.2s ease-in; }
      .countZones .zonesWrapper .zone .zoneActionsDropdown .itemList {
        left: 0;
        right: auto; }
    .countZones .zonesWrapper .zone:hover .zoneActionsDropdown {
      visibility: visible;
      opacity: 1; }
    .countZones .zonesWrapper .zone:hover:before {
      opacity: 1; }
    .countZones .zonesWrapper .zone.active:before {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      content: '';
      pointer-events: none; }

.selectModels .buttonsWrapper {
  padding: 0 10px;
  display: flex;
  justify-content: flex-end;
  position: absolute;
  top: 162px;
  width: 100%;
  z-index: 2;
  display: none;
  background: #ffffff; }

.selectModels .dropdownItemList {
  padding-bottom: 50px !important;
  height: 160px; }

.selectModels .applyBtn,
.selectModels .cancel {
  width: 70px;
  height: 27px;
  margin-left: 10px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  border: 0;
  border-radius: 5px;
  font-weight: 500; }

.selectModels .applyBtn {
  color: #ffffff;
  background-color: #8020CF !important; }

.selectModels .cancel {
  background-color: white !important; }

.selectModels.showBtn .buttonsWrapper {
  display: flex; }

.zoneActionsDropdown {
  position: relative;
  width: 20px;
  height: 20px;
  background: #ffffff;
  border-radius: 3px;
  z-index: 1; }
  .zoneActionsDropdown .actionbttn {
    width: 20px;
    height: 20px;
    background: url(../img/down-arrow-gray.svg) center center no-repeat;
    background-size: 18px;
    border-radius: 3px;
    border: 0;
    padding: 0; }
    .zoneActionsDropdown .actionbttn.active {
      background: url(../img/up-arrow-gray.svg) center center no-repeat;
      background-size: 18px; }
  .zoneActionsDropdown .itemList {
    position: absolute;
    top: 25px;
    right: 0;
    padding: 5px 0;
    background: #ffffff;
    box-shadow: 0px 4px 29px rgba(158, 158, 158, 0.25);
    border-radius: 3px;
    display: none;
    min-width: 150px; }
    .zoneActionsDropdown .itemList li:hover {
      background-color: #EBEFF2; }
      .zoneActionsDropdown .itemList li:hover a {
        color: #595959; }
    .zoneActionsDropdown .itemList .deleteZone a {
      background: url(../img/ch-delete-dark-gray.svg) 10px center no-repeat; }
    .zoneActionsDropdown .itemList .editZone {
      background: url(../img/ch-rename-dark-gray.svg) 10px center no-repeat; }
    .zoneActionsDropdown .itemList a {
      color: #595959;
      white-space: nowrap;
      font-size: 14px;
      padding: 5px 15px 5px 35px;
      display: flex;
      justify-content: flex-start;
      align-items: center; }

.activeClassbtn,
.activeGroupbtn {
  height: 46px;
  padding: 0 20px;
  border-radius: 3px;
  color: #595959;
  margin-bottom: 20px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 0;
  background: transparent;
  transition: all 0.2s ease-in; }
  .activeClassbtn.active,
  .activeGroupbtn.active {
    background: rgba(19, 139, 250, 0.19);
    color: #138bfa; }

.info .icon {
  width: 16px;
  height: 16px;
  display: inline-block; }

.info .infoBlue {
  background: url(../img/ch-info-dark-purple.svg) 0 0 no-repeat;
  background-size: 16px; }

.info .infoOrange {
  background: url(../img/ch-info-orange.svg) 0 0 no-repeat;
  background-size: 16px; }

.info .infoDarkGray {
  background: url(../img/ch-info-dark-gray.svg) 0 0 no-repeat;
  background-size: 16px; }

.info .infoGray {
  background: url(../img/ch-info-gray.svg) 0 0 no-repeat;
  background-size: 16px; }

.activeClassAndGroup .createGroupBtn,
.activeClassAndGroup .addClassBtn {
  display: none; }

.activeClassAndGroup .addClassBtn.show,
.activeClassAndGroup .createGroupBtn.show {
  display: inline-flex; }

.deleteZoneModel {
  position: fixed;
  top: 0;
  transition: all 0.2s ease-in;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0 15px;
  font-size: 16px;
  font-weight: 300;
  opacity: 0;
  visibility: hidden;
  z-index: 9999; }
  .deleteZoneModel p {
    padding: 10px 30px 15px;
    margin: 0;
    text-align: left;
    font-size: 16px;
    color: #595959;
    font-weight: 400;
    width: 100%; }
  .deleteZoneModel .deleteWarnOptions {
    margin-top: 10px;
    padding: 0 20px 20px; }
  .deleteZoneModel .deleteWarnOptions .delete-true {
    background: #BF2600;
    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.08), inset 0px -1px 0px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    color: #fff;
    height: 36px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0 15px;
    font-size: 14px;
    font-weight: 500; }
  .deleteZoneModel .deleteWarnOptions .delete-false {
    color: #303030;
    font-size: 14px;
    font-weight: 500;
    padding: 0 15px; }
    .deleteZoneModel .deleteWarnOptions .delete-false:hover, .deleteZoneModel .deleteWarnOptions .delete-false:focus {
      color: #303030; }
  .deleteZoneModel .deleteZoneInner {
    background: #ffffff;
    border-radius: 10px;
    width: 100%;
    height: auto;
    max-width: 600px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start; }
  .deleteZoneModel.show {
    opacity: 1;
    visibility: visible; }
  .deleteZoneModel .modalHeader {
    padding: 20px 30px;
    position: relative;
    width: 100%; }
    .deleteZoneModel .modalHeader h5 {
      background: url(../img/info-solid-red.svg) left center no-repeat;
      font-weight: normal;
      margin: 0;
      color: #303030;
      font-size: 20px;
      text-align: left;
      font-weight: 500;
      padding-left: 30px; }
      .deleteZoneModel .modalHeader h5 .icon {
        margin-right: 10px; }

.deleteClassModal .deleteClassInner {
  border-radius: 10px;
  position: relative;
  align-items: flex-start;
  height: auto; }

.deleteClassModal a {
  margin: 0 10px;
  font-size: 16px;
  padding: 5px 30px; }
  .deleteClassModal a:first-child {
    margin: 0; }

.deleteClassModal .note {
  padding-top: 0;
  font-size: 16px;
  font-weight: 400;
  text-align: left;
  line-height: 30px; }

.deleteGroupModal .modalHeader {
  padding-bottom: 10px !important; }
  .deleteGroupModal .modalHeader h5 {
    margin-bottom: 0; }

.deleteGroupModal .deleteGroupInner {
  border-radius: 10px;
  position: relative;
  height: auto;
  align-items: flex-start; }

.deleteGroupModal a {
  margin: 0 10px;
  font-size: 16px;
  padding: 5px 30px; }

.deleteGroupModal .note {
  padding-top: 10px;
  margin-bottom: 0px;
  width: 100%;
  font-size: 16px;
  font-weight: 400;
  text-align: left;
  line-height: 24px;
  max-height: 350px;
  overflow: hidden; }

.deleteGroupModal .deleteWarnOptions {
  margin-top: 0 !important; }
  .deleteGroupModal .deleteWarnOptions .delete-falseFiles {
    margin-right: 0; }

.annotateImageZoneModal .annotateOption .optionItems {
  padding: 10px 0; }
  .annotateImageZoneModal .annotateOption .optionItems li {
    padding: 0 10px; }
    .annotateImageZoneModal .annotateOption .optionItems li:hover {
      background-color: #EBEFF2; }
  .annotateImageZoneModal .annotateOption .optionItems a {
    color: #595959; }
    .annotateImageZoneModal .annotateOption .optionItems a:hover, .annotateImageZoneModal .annotateOption .optionItems a:focus {
      opacity: 1; }

.noChoose {
  color: #595959;
  font-size: 15px; }

.timeRangeWrapper .customDropdown {
  width: 185px;
  margin-top: 15px; }
  .timeRangeWrapper .customDropdown li:hover {
    cursor: pointer; }
  .timeRangeWrapper .customDropdown .disabledOption {
    pointer-events: none;
    opacity: 0.6; }

.filterBtnsWrapper {
  display: flex;
  flex-direction: row;
  align-items: center; }

@media (min-width: 1200px) and (max-width: 1680px) {
  .dataFilterArea .applyFilterBtn {
    width: 120px;
    line-height: 20px; }
  .dataFilterArea .clearFilter {
    margin-top: 10px; }
  .filterBtnsWrapper {
    padding-top: 25px;
    flex-direction: column; } }

.graph-date-header {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0.1px;
  text-align: left;
  color: #595959; }

.classDetectionInformation .cdiTopBar {
  align-items: unset; }
  .classDetectionInformation .cdiTopBar h5 {
    text-indent: 0;
    margin-bottom: 5px; }

.cameraSpecificDetections h5, .timeAnalytics h5 {
  margin-bottom: 5px; }

.graph-date-header {
  position: relative;
  cursor: pointer; }
  .graph-date-header .tooltiptext {
    white-space: nowrap;
    visibility: hidden;
    background-color: #fff;
    color: #58595B;
    text-align: center;
    border-radius: 30px;
    padding: 5px 10px;
    position: absolute;
    z-index: 1;
    bottom: -35px;
    right: 35px;
    margin-left: 0;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 12px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.197662); }
  .graph-date-header .tooltiptext::after {
    content: "";
    position: absolute;
    top: 28%;
    right: 0;
    margin-right: -9px;
    background: url(../img/triangle-up.png) 0 0 no-repeat;
    background-size: contain;
    width: 20px;
    height: 20px;
    transform: rotate(90deg);
    display: none; }
  .graph-date-header:hover .tooltiptext {
    visibility: visible;
    opacity: 1; }

.recurringAlerts, .imageChatModelsAdd {
  padding: 5px 10px;
  align-items: center;
  height: 34px;
  margin-top: 10px; }
  .recurringAlerts .info, .imageChatModelsAdd .info {
    width: 15px;
    height: 15px;
    margin-right: 5px; }
    .recurringAlerts .info .icon, .imageChatModelsAdd .info .icon {
      display: inline-flex;
      width: 15px;
      height: 15px;
      border-radius: 20px;
      background: #fff url(../img/ch-info-dark-purple.svg) 0 center no-repeat;
      background-size: cover; }
    .recurringAlerts .info .customTooltip, .imageChatModelsAdd .info .customTooltip {
      left: -10px;
      right: auto; }
  .recurringAlerts .customTooltip, .imageChatModelsAdd .customTooltip {
    width: 266px;
    white-space: normal;
    border-radius: 10px;
    padding: 10px; }
    .recurringAlerts .customTooltip strong, .imageChatModelsAdd .customTooltip strong {
      display: block;
      margin-bottom: 5px; }
  .recurringAlerts .onOff, .imageChatModelsAdd .onOff {
    margin-left: 4px;
    text-transform: uppercase;
    font-size: 14px;
    color: #595959;
    font-weight: 500;
    margin-top: 2px; }
    .recurringAlerts .onOff.active, .imageChatModelsAdd .onOff.active {
      color: #8020CF; }

.recurringAlertsBar {
  display: flex; }
  .recurringAlertsBar strong {
    margin-left: 5px;
    font-size: 16px;
    font-weight: 400;
    color: #535353; }
  .recurringAlertsBar .info {
    width: 16px;
    height: 16px;
    margin-left: 10px; }
    .recurringAlertsBar .info .icon {
      display: inline-flex;
      width: 16px;
      height: 16px;
      border-radius: 20px;
      background: #fff url(../img/ch-info-dark-purple.svg) 0 center no-repeat;
      background-size: cover; }
    .recurringAlertsBar .info .customTooltip {
      left: -10px;
      right: auto; }
  .recurringAlertsBar .customTooltip {
    width: 266px;
    white-space: normal;
    border-radius: 10px;
    padding: 10px; }
    .recurringAlertsBar .customTooltip strong {
      display: block;
      margin-bottom: 5px;
      margin-left: 0; }
  .recurringAlertsBar .customToggleBtn {
    margin-right: 5px; }
    .recurringAlertsBar .customToggleBtn .controlBtn {
      width: 40px;
      height: 21px; }
      .recurringAlertsBar .customToggleBtn .controlBtn:before {
        width: 14px;
        height: 14px; }
  .recurringAlertsBar .customToggleBtn input[type="checkbox"]:checked + .controlBtn {
    background-color: #8020CF; }

.selectRuleModal {
  padding-right: 0 !important; }
  .selectRuleModal .modal-dialog {
    max-width: 785px;
    align-items: center;
    margin: 0 auto; }
  .selectRuleModal .modal-content {
    background-color: #fff !important;
    border-radius: 10px;
    height: auto;
    padding-bottom: 0 !important;
    flex-wrap: wrap;
    color: #595959;
    margin-top: 0;
    overflow: hidden; }
  .selectRuleModal .modal-body {
    width: 100%;
    padding: 48px 100px 125px;
    height: 620px; }
  .selectRuleModal .btnWrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 90px;
    box-shadow: 0 0px 5px 1px rgba(193, 193, 193, 0.25); }
  .selectRuleModal .modal-header {
    width: 100%;
    height: 65px;
    text-align: center;
    border-bottom: 1px solid #E5E5E5;
    text-transform: none;
    padding: 0 25px;
    display: flex;
    align-items: center; }
  .selectRuleModal .modal-title {
    font-weight: 600;
    font-size: 18px;
    line-height: 20px;
    color: #210835;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; }
  .selectRuleModal .createRule {
    width: 100%;
    height: 135px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background: #ffffff;
    border: 1px solid transparent;
    outline: 1px solid transparent;
    box-shadow: 2px 5px 20px rgba(65, 65, 65, 0.08);
    border-radius: 5px;
    margin-bottom: 25px;
    cursor: pointer; }
    .selectRuleModal .createRule.selected {
      border: 1px solid #8020CF;
      outline: 1px solid #8020CF; }
    .selectRuleModal .createRule h4 {
      color: #4E4576 !important;
      font-size: 20px;
      margin: 0;
      font-weight: 500; }
    .selectRuleModal .createRule .icon {
      width: 34px;
      height: 34px;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      margin-right: 30px;
      margin-left: 50px; }
  .selectRuleModal .selectCreateRuleArea {
    padding-top: 32px; }
    .selectRuleModal .selectCreateRuleArea p {
      color: #535353; }
  .selectRuleModal .nextBtn {
    min-width: 300px;
    max-width: 300px;
    margin: 0 auto;
    height: 44px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500; }
  .selectRuleModal .disable {
    background: #F7F7F7;
    border-color: #F7F7F7;
    color: #B7B7B7 !important;
    pointer-events: none;
    opacity: 1; }

.modal .pager {
  margin-bottom: 20px; }
  .modal .pager ul {
    display: flex;
    justify-content: center;
    text-align: center;
    margin: 0 auto;
    padding: 0;
    width: 400px; }
    .modal .pager ul li {
      width: 33%;
      color: #9B9B9B;
      position: relative;
      font-size: 12px;
      white-space: nowrap; }
      .modal .pager ul li:before {
        width: 20px;
        height: 20px;
        display: inline-block;
        position: absolute;
        top: 0;
        left: 0;
        content: '';
        background: #9B9B9B;
        border-radius: 20px;
        z-index: 1; }
      .modal .pager ul li:after {
        width: 198px;
        height: 5px;
        background: #F2F2F2;
        position: absolute;
        content: '';
        display: block;
        top: 8px;
        z-index: 0; }
      .modal .pager ul li:first-child p {
        text-indent: -90%; }
      .modal .pager ul li:last-child p {
        text-indent: 62%; }
      .modal .pager ul li:nth-child(2):before {
        right: 0;
        margin: 0 auto; }
      .modal .pager ul li:last-child:before {
        left: auto;
        right: 0; }
      .modal .pager ul li:nth-child(2):after {
        left: 50%; }
      .modal .pager ul li:last-child:after {
        display: none; }
      .modal .pager ul li p {
        margin-top: 30px;
        margin-bottom: 0; }
      .modal .pager ul li.active {
        color: #0A2E60;
        font-weight: 500; }
        .modal .pager ul li.active:before {
          background: #0A2E60; }

.selectDeviceModal {
  padding-right: 0 !important; }
  .selectDeviceModal .backBtn {
    background: transparent;
    border: 0;
    padding: 0; }
  .selectDeviceModal .modal-content {
    background-color: #fff !important;
    border-radius: 4px;
    height: auto;
    flex-wrap: wrap;
    color: #595959; }
  .selectDeviceModal .modal-body {
    width: 100%;
    padding: 0 0 0 25px; }
  .selectDeviceModal .btnWrapper {
    display: flex;
    justify-content: center;
    padding: 15px 0; }
  .selectDeviceModal .modal-header {
    width: 100%;
    text-align: center;
    border: 0;
    align-items: center;
    text-transform: none;
    padding-left: 25px;
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #595959; }
  .selectDeviceModal .modal-title {
    color: #595959;
    text-align: center;
    text-transform: uppercase;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; }
  .selectDeviceModal .modal-dialog {
    margin-top: 0;
    max-width: 1300px; }
  .selectDeviceModal .nextBtn {
    min-width: 160px;
    margin: 0 auto;
    height: 42px;
    cursor: pointer; }
  .selectDeviceModal .disable {
    background: #9B9B9B;
    border-color: #9B9B9B;
    pointer-events: none; }
  .selectDeviceModal .label {
    font-size: 16px;
    display: block;
    margin-bottom: 15px;
    color: #595959;
    padding: 0 10px;
    font-weight: 500; }
  .selectDeviceModal .deviceContainer {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    align-content: flex-start;
    height: 320px;
    overflow: hidden; }
    @media (min-width: 1500px) {
      .selectDeviceModal .deviceContainer {
        height: 400px; } }
    .selectDeviceModal .deviceContainer li {
      background: #F6F6F6;
      box-shadow: 0px 2px 8px rgba(205, 205, 205, 0.5);
      border-radius: 5px;
      width: 31.4%;
      height: 58px;
      margin: 5px 10px 15px;
      display: inline-block;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      line-height: 58px;
      padding-right: 10px;
      cursor: pointer; }
      .selectDeviceModal .deviceContainer li .icon {
        width: 60px;
        height: 58px;
        display: inline-flex;
        background: url(../img/ch-device-gray.svg) center center no-repeat; }
      .selectDeviceModal .deviceContainer li.selected {
        outline: 2px solid #f7941d; }
    .selectDeviceModal .deviceContainer .mCustomScrollBox {
      width: 100%; }
  .selectDeviceModal .devider {
    width: 100%;
    display: block;
    clear: both;
    /*border: 1px solid #FFFFFF;
		box-shadow: 4px 0px 4px rgba(0, 0, 0, 0.25);
		margin-bottom: 10px;*/
    margin-top: 10px; }
  .selectDeviceModal .mCSB_scrollTools {
    right: 8px; }

.selectStreamModal {
  padding-right: 0 !important; }
  .selectStreamModal .backBtn {
    background: transparent;
    border: 0;
    padding: 0; }
  .selectStreamModal .modal-content {
    background-color: #fff !important;
    border-radius: 4px;
    height: auto;
    flex-wrap: wrap;
    color: #595959; }
  .selectStreamModal .modal-body {
    width: 100%;
    padding: 0 0 0 25px; }
  .selectStreamModal .btnWrapper {
    display: flex;
    justify-content: center;
    padding: 15px 0; }
  .selectStreamModal .modal-header {
    width: 100%;
    text-align: center;
    border: 0;
    align-items: center;
    text-transform: none;
    padding-left: 25px;
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #595959; }
  .selectStreamModal .modal-title {
    color: #595959;
    text-align: center;
    text-transform: uppercase;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; }
  .selectStreamModal .modal-dialog {
    margin-top: 0;
    max-width: 1300px; }
  .selectStreamModal .nextBtn {
    min-width: 160px;
    margin: 0 auto;
    height: 42px;
    cursor: pointer; }
  .selectStreamModal .disable {
    background: #9B9B9B;
    border-color: #9B9B9B;
    pointer-events: none; }
  .selectStreamModal .pager ul li:first-child:after {
    background: #0A2E60; }
  .selectStreamModal .label {
    font-size: 16px;
    display: block;
    margin-bottom: 15px;
    color: #595959;
    padding: 0 10px;
    font-weight: 500; }
  .selectStreamModal .selectedDevice {
    font-size: 16px;
    color: #0A2E60;
    font-weight: 300;
    margin-bottom: 5px;
    padding: 0 10px; }
    .selectStreamModal .selectedDevice strong {
      font-weight: 400; }
  .selectStreamModal .streamContainer {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    align-content: flex-start;
    height: 320px;
    overflow: hidden; }
    @media (min-width: 1500px) {
      .selectStreamModal .streamContainer {
        height: 400px; } }
    .selectStreamModal .streamContainer li {
      background: #F6F6F6;
      box-shadow: 0px 2px 8px rgba(205, 205, 205, 0.5);
      border-radius: 5px;
      width: 31.4%;
      height: 58px;
      margin: 5px 10px 15px;
      display: inline-block;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      line-height: 58px;
      padding-right: 10px;
      cursor: pointer; }
      .selectStreamModal .streamContainer li .icon {
        width: 60px;
        height: 58px;
        display: inline-flex;
        background: url(../img/ch-stream-gray.svg) center center no-repeat; }
      .selectStreamModal .streamContainer li.selected {
        outline: 2px solid #f7941d; }
    .selectStreamModal .streamContainer .mCustomScrollBox {
      width: 100%; }
  .selectStreamModal .devider {
    width: 100%;
    display: block;
    clear: both;
    /*border: 1px solid #FFFFFF;
		box-shadow: 4px 0px 4px rgba(0, 0, 0, 0.25);
		margin-bottom: 10px;*/
    margin-top: 10px; }
  .selectStreamModal .mCSB_scrollTools {
    right: 8px; }
  .selectStreamModal .noRule {
    padding-top: 100px;
    padding-bottom: 50px;
    display: none;
    width: 100%;
    text-align: center; }
    .selectStreamModal .noRule a {
      color: #138bfa;
      text-decoration: underline;
      font-size: 20px;
      text-transform: uppercase; }
    .selectStreamModal .noRule h5 {
      font-size: 22px;
      color: #595959;
      margin-bottom: 25px; }
    .selectStreamModal .noRule p {
      font-size: 18px;
      color: #595959;
      margin-bottom: 50px; }
  .selectStreamModal .hide {
    display: none; }

.changeZoneModal {
  padding-right: 0 !important; }
  .changeZoneModal .backBtn {
    background: transparent;
    border: 0;
    padding: 0; }
  .changeZoneModal .modal-content {
    background-color: #fff !important;
    border-radius: 4px;
    height: auto;
    flex-wrap: wrap;
    color: #595959; }
  .changeZoneModal .modal-body {
    width: 100%;
    padding: 0 0 0 25px; }
  .changeZoneModal .btnWrapper {
    display: flex;
    justify-content: flex-end;
    padding: 15px 25px; }
  .changeZoneModal .modal-header {
    width: 100%;
    border: 0;
    text-transform: none;
    padding-left: 25px;
    font-size: 16px;
    color: #595959; }
  .changeZoneModal .modal-title {
    color: #595959;
    font-size: 18px;
    width: 100%; }
  .changeZoneModal .modal-dialog {
    margin-top: 0;
    max-width: 560px;
    transform: translate(0, 30%) !important; }

.createRuleModal {
  padding-right: 0 !important; }
  .createRuleModal .backBtn {
    background: transparent;
    border: 0;
    padding: 0; }
  .createRuleModal .modal-content {
    background-color: #fff !important;
    border-radius: 4px;
    height: auto;
    flex-wrap: wrap;
    color: #595959;
    margin-top: 0; }
  .createRuleModal .modal-body {
    width: 100%;
    padding: 0 0 0 25px;
    height: 620px; }
  .createRuleModal .btnWrapper {
    display: flex;
    justify-content: center;
    padding: 15px 0; }
  .createRuleModal .modal-header {
    width: 100%;
    text-align: center;
    border: 0;
    align-items: center;
    text-transform: none;
    padding-left: 25px;
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #595959; }
  .createRuleModal .modal-title {
    color: #210835;
    text-align: center;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    font-weight: 600; }
  .createRuleModal .modal-dialog {
    align-items: center;
    margin: 0 auto;
    max-width: 1260px; }
    @media (min-width: 1500px) {
      .createRuleModal .modal-dialog {
        max-width: 1300px; } }
  .createRuleModal .createRuleBtn,
  .createRuleModal .doneBtn {
    min-width: 160px;
    margin: 0 auto;
    height: 42px;
    cursor: pointer; }
  .createRuleModal .disable {
    background: #F7F7F7;
    border-color: #F7F7F7;
    pointer-events: none;
    color: #B7B7B7 !important;
    opacity: 1; }
  .createRuleModal .pager ul li:first-child:after, .createRuleModal .pager ul li:nth-child(2):after {
    background: #0A2E60; }
  .createRuleModal .label {
    font-size: 16px;
    display: block;
    margin-bottom: 10px;
    color: #595959;
    padding: 0 10px;
    font-weight: 500; }
  .createRuleModal .selectedStream {
    font-size: 16px;
    color: #0A2E60;
    font-weight: 300;
    margin-bottom: 5px;
    padding: 0 10px; }
    .createRuleModal .selectedStream strong {
      font-weight: 400; }
  .createRuleModal .info {
    margin-bottom: 10px;
    padding: 0 10px; }
    .createRuleModal .info .icon {
      width: 14px;
      height: 14px;
      background: url(../img/ch-info-dark-purple.svg) center center no-repeat;
      background-size: contain;
      margin-right: 5px; }
    .createRuleModal .info a {
      color: #138bfa;
      text-decoration: underline;
      margin-left: 5px; }
  .createRuleModal .alertInfo {
    color: #0052CC;
    padding-left: 0;
    font-size: 16px;
    font-weight: 400;
    display: flex;
    align-items: center; }
    .createRuleModal .alertInfo .icon {
      width: 14px;
      height: 14px;
      background: url(../img/ch-error-purple.svg) center center no-repeat;
      background-size: contain;
      margin-right: 5px; }
  .createRuleModal .ruleContainer {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    align-content: flex-start;
    height: 590px;
    overflow-y: scroll;
    overflow-x: clip; }
    .createRuleModal .ruleContainer .eachRule {
      background: transparent;
      border: 1px solid #EAEAEA;
      border-radius: 5px;
      width: 45%;
      margin-right: 5%;
      cursor: pointer;
      position: relative;
      margin-bottom: 20px;
      box-shadow: 1px 1px 3px rgba(22, 22, 22, 0.08); }
      .createRuleModal .ruleContainer .eachRule.not-allowed {
        opacity: 0.5;
        cursor: not-allowed;
        position: relative; }
        .createRuleModal .ruleContainer .eachRule.not-allowed .tooltipText {
          visibility: hidden;
          width: 350px;
          background-color: white;
          color: #595959;
          text-align: center;
          position: absolute;
          z-index: 1;
          top: 150px;
          box-shadow: 0px 3px 5px rgba(6, 0, 41, 0.2);
          border-radius: 6px;
          padding: 20px;
          left: 100;
          font-size: 14px;
          text-align: left; }
        .createRuleModal .ruleContainer .eachRule.not-allowed:hover .tooltiptext {
          visibility: visible; }
    .createRuleModal .ruleContainer h4 {
      font-size: 18px;
      max-width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-weight: 500;
      line-height: 20px;
      color: #303030;
      border-bottom: 1px solid #E0E0E0;
      padding: 10px; }
    .createRuleModal .ruleContainer .mCustomScrollBox {
      width: 100%; }
  .createRuleModal .devider {
    width: 100%;
    display: block;
    clear: both;
    /*border: 1px solid #FFFFFF;
		box-shadow: 4px 0px 4px rgba(0, 0, 0, 0.25);
		margin-bottom: 10px;*/
    margin-top: 10px; }
  .createRuleModal .mCSB_scrollTools {
    right: 8px; }
  .createRuleModal .items ul {
    padding: 0 10px;
    margin: 0; }
    .createRuleModal .items ul .detailsBox {
      border: 1px solid #F2E9FA;
      box-shadow: 1px 1px 3px rgba(22, 22, 22, 0.08);
      border-radius: 5px;
      padding: 10px;
      width: 100%;
      color: #535353;
      font-size: 13px;
      margin-bottom: 20px; }
      .createRuleModal .items ul .detailsBox p {
        margin-bottom: 10px;
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        color: #210835;
        display: flex;
        align-items: center; }
        .createRuleModal .items ul .detailsBox p span {
          color: #8020CF;
          font-weight: 600; }
        .createRuleModal .items ul .detailsBox p .info {
          margin: 0 0 0 5px;
          padding: 0; }
        .createRuleModal .items ul .detailsBox p .customTooltip {
          color: #595959;
          font-weight: 400;
          left: 0;
          right: auto; }
      .createRuleModal .items ul .detailsBox .grayBox {
        width: 45%;
        padding: 5px;
        height: 30px;
        background: #F7F7F7;
        border: 1px solid #EAEAEA;
        border-radius: 5px;
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        color: #222222; }
      .createRuleModal .items ul .detailsBox .proximity p,
      .createRuleModal .items ul .detailsBox .zones p {
        margin-bottom: 0; }
      .createRuleModal .items ul .detailsBox .proximity .grayBox,
      .createRuleModal .items ul .detailsBox .zones .grayBox {
        width: 94%; }
      .createRuleModal .items ul .detailsBox .zones .customTooltip {
        width: 220px;
        height: auto;
        white-space: normal;
        border-radius: 10px; }
    .createRuleModal .items ul li {
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      width: 100%;
      font-size: 14px;
      position: relative; }
      .createRuleModal .items ul li label {
        display: inline-block;
        margin: 0;
        width: 70px;
        font-weight: 500; }
      .createRuleModal .items ul li span {
        display: inline-block;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        font-weight: normal; }
        .createRuleModal .items ul li span:hover .customTooltip {
          visibility: visible;
          opacity: 1; }
      .createRuleModal .items ul li:last-child {
        margin-bottom: 0; }
  .createRuleModal .items .customTooltip {
    right: 0;
    top: 24px;
    font-style: normal; }
  .createRuleModal .checkbox {
    width: 15px;
    height: 15px;
    display: inline-flex;
    cursor: pointer;
    position: absolute;
    top: 15px;
    right: 15px; }
    .createRuleModal .checkbox input[type="checkbox"] {
      display: none; }
    .createRuleModal .checkbox span {
      width: 15px;
      height: 15px;
      border: solid 2px #9B9B9B;
      border-radius: 3px;
      background: #ffffff; }
    .createRuleModal .checkbox input[type="checkbox"]:checked + span {
      background: url(../img/checkbox-active.svg) center center no-repeat;
      border: none;
      background-size: contain; }
  .createRuleModal .sucessMessage {
    width: 100%;
    padding-top: 100px;
    padding-bottom: 200px;
    display: none;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    font-size: 26px;
    line-height: 45px;
    color: #62BDBF; }
    .createRuleModal .sucessMessage .icon {
      display: inline-block;
      margin-right: 10px;
      width: 45px;
      height: 45px;
      border-radius: 50px;
      background: #68C3C5 url(../img/ch-check-white.svg) center center no-repeat;
      background-size: 25px; }
    .createRuleModal .sucessMessage p {
      width: 100%;
      font-size: 18px;
      color: #9B9B9B;
      text-align: center; }
  .createRuleModal .noRule {
    padding-top: 100px;
    padding-bottom: 50px;
    display: none;
    width: 100%;
    text-align: center; }
    .createRuleModal .noRule a {
      color: #138bfa;
      text-decoration: underline;
      font-size: 20px;
      text-transform: uppercase; }
    .createRuleModal .noRule h5 {
      font-size: 22px;
      color: #595959;
      margin-bottom: 25px; }
    .createRuleModal .noRule p {
      font-size: 18px;
      color: #595959;
      margin-bottom: 50px; }
  .createRuleModal .hide {
    display: none; }

.new-line-box {
  background-color: white;
  border: 0.826979px solid #8020CF;
  box-shadow: 0px 4px 10px rgba(128, 32, 207, 0.25), 2px 5px 5px rgba(22, 22, 22, 0.08);
  border-radius: 4.96188px;
  padding: 16px 12px;
  width: 100%;
  margin-bottom: 15px;
  display: none; }
  .new-line-box .form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 35px; }
    .new-line-box .form-group label {
      font-size: 14px;
      color: #303030; }
    .new-line-box .form-group input {
      background: #F7F7F7;
      border: 1px solid #EAEAEA;
      border-radius: 5px;
      height: 36px;
      width: 100%;
      font-size: 14px; }
      .new-line-box .form-group input#search_classes {
        background: url(../img/ch-search-gray.svg) 10px center no-repeat;
        background-color: #F7F7F7;
        padding: 0 40px; }
    .new-line-box .form-group .max-chars-warning {
      font-size: 11px !important;
      line-height: 18px !important;
      color: #210835 !important;
      margin-bottom: 0 !important; }
    .new-line-box .form-group#atob_group {
      margin-bottom: 20px; }
      .new-line-box .form-group#atob_group label {
        font-size: 13px;
        color: #535353; }
    .new-line-box .form-group#btoa_group {
      margin-bottom: 0; }
      .new-line-box .form-group#btoa_group label {
        font-size: 13px;
        color: #535353; }
    .new-line-box .form-group#direction_select .checkbox-items {
      margin-bottom: 10px !important; }
  .new-line-box .directionBox {
    padding: 5px;
    text-align: center;
    color: #303030;
    margin-right: 10px;
    border-radius: 10px;
    cursor: pointer; }
  .new-line-box .classesBox {
    flex-wrap: wrap;
    margin-top: 10px;
    max-height: 200px;
    width: 198px;
    padding: 10px;
    overflow-y: scroll;
    position: absolute;
    display: none;
    background: #FAFBFC;
    box-shadow: 0px 3px 5px rgba(44, 44, 44, 0.2), 0px 0px 1px rgba(44, 44, 44, 0.31);
    border-radius: 6px;
    top: 60px;
    z-index: 1; }
    .new-line-box .classesBox.visible {
      display: block !important; }
    .new-line-box .classesBox::-webkit-scrollbar {
      display: none; }
    .new-line-box .classesBox .select-all-classes-btn {
      color: #8020CF !important;
      font-size: 14px !important;
      width: 100%;
      margin-bottom: 10px;
      cursor: pointer; }
  .new-line-box .selectedClassesBox {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
    max-height: 120px;
    overflow-y: scroll; }
    .new-line-box .selectedClassesBox::-webkit-scrollbar {
      display: none; }
    .new-line-box .selectedClassesBox .selectedClassItem {
      width: auto;
      padding: 5px;
      display: flex;
      align-items: center;
      border-radius: 6px;
      margin-right: 10px;
      margin-bottom: 10px;
      background-color: #F2E9FA;
      color: #210835;
      font-size: 14px; }
      .new-line-box .selectedClassesBox .selectedClassItem img {
        margin-left: 10px;
        cursor: pointer;
        width: 12px; }

.addLineModal {
  position: absolute;
  background-color: white;
  display: none;
  left: calc(50% - 200px);
  top: 100px;
  border: 1px solid #E0E0E0;
  border-radius: 10px;
  padding: 29px 20px;
  width: 400px; }
  .addLineModal .form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 40px; }
    .addLineModal .form-group label {
      font-size: 14px;
      color: #303030; }
    .addLineModal .form-group input {
      background: #F7F7F7;
      border: 1px solid #EAEAEA;
      border-radius: 5px;
      height: 36px;
      width: 100%;
      font-size: 14px; }
      .addLineModal .form-group input#search_classes {
        background: url(../img/ch-search-gray.svg) 10px center no-repeat;
        background-color: #F7F7F7;
        padding: 0 40px; }
    .addLineModal .form-group#atob_group {
      margin-bottom: 20px; }
      .addLineModal .form-group#atob_group label {
        font-size: 13px;
        color: #535353; }
    .addLineModal .form-group#btoa_group {
      margin-bottom: 0; }
      .addLineModal .form-group#btoa_group label {
        font-size: 13px;
        color: #535353; }
    .addLineModal .form-group#direction_select .checkbox-items {
      margin-bottom: 10px !important; }
  .addLineModal .directionBox {
    padding: 5px;
    text-align: center;
    color: #303030;
    margin-right: 10px;
    border-radius: 10px;
    cursor: pointer; }
  .addLineModal .classesBox {
    flex-wrap: wrap;
    margin-top: 10px;
    max-height: 200px;
    width: 357px;
    padding: 10px;
    overflow-y: scroll;
    position: absolute;
    display: none;
    background: #FAFBFC;
    box-shadow: 0px 3px 5px rgba(44, 44, 44, 0.2), 0px 0px 1px rgba(44, 44, 44, 0.31);
    border-radius: 6px;
    top: 60px;
    z-index: 1; }
    .addLineModal .classesBox.visible {
      display: flex !important; }
    .addLineModal .classesBox::-webkit-scrollbar {
      display: none; }
    .addLineModal .classesBox .select-all-classes-btn {
      color: #8020CF;
      font-size: 14px;
      width: 100%;
      margin-bottom: 10px;
      cursor: pointer; }
  .addLineModal .selectedClassesBox {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
    max-height: 120px;
    overflow-y: scroll; }
    .addLineModal .selectedClassesBox::-webkit-scrollbar {
      display: none; }
    .addLineModal .selectedClassesBox .selectedClassItem {
      width: auto;
      padding: 5px;
      display: flex;
      align-items: center;
      border-radius: 6px;
      margin-right: 10px;
      margin-bottom: 10px;
      background-color: #F2E9FA;
      color: #210835;
      font-size: 14px; }
      .addLineModal .selectedClassesBox .selectedClassItem img {
        margin-left: 10px;
        cursor: pointer;
        width: 12px; }

.checkbox-items {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  width: 165px; }
  .checkbox-items input {
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    width: 16px !important;
    height: 16px !important;
    border-radius: 4px;
    border: 2px solid #878787; }
  .checkbox-items input:checked {
    background: url(../img/ch-check-white.svg) center center no-repeat;
    background-color: #8020CF;
    border-color: #8020CF;
    background-size: 12px;
    border-radius: 4px; }
  .checkbox-items input:focus {
    outline: none; }
  .checkbox-items label {
    margin-bottom: 0 !important;
    margin-left: 10px !important;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #535353; }

.deleteLineModal {
  position: absolute;
  background-color: white;
  display: none;
  border: 1px solid #E0E0E0;
  border-radius: 10px;
  padding: 10px;
  width: 600px;
  left: 0;
  right: 0;
  top: 200px;
  margin-left: auto;
  margin-right: auto;
  height: 150px;
  flex-direction: column;
  justify-content: space-between; }

.renameLineDirectionModal {
  position: absolute;
  background-color: white;
  display: none;
  border: 1px solid #E0E0E0;
  border-radius: 10px;
  padding: 10px;
  width: 475px;
  left: 0;
  right: 0;
  top: 200px;
  margin-left: auto;
  margin-right: auto;
  height: auto;
  flex-direction: column;
  justify-content: space-between; }
  .renameLineDirectionModal .form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px; }
    .renameLineDirectionModal .form-group label {
      font-size: 13px;
      color: #535353; }
    .renameLineDirectionModal .form-group input {
      background: #F7F7F7;
      border: 1px solid #EAEAEA;
      border-radius: 5px;
      height: 36px;
      width: 100%;
      font-size: 14px; }

.analyticsSettingsIndoHelp {
  margin-left: auto;
  text-align: right;
  padding-top: 8px; }
  .analyticsSettingsIndoHelp .overlapWrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(149, 149, 149, 0.25);
    z-index: 1005;
    display: none; }
  .analyticsSettingsIndoHelp .iconQuestion {
    border-radius: 10px 10px 0px 0px;
    width: 40px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: url(../img/help-center-gray.svg) center center no-repeat;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 15px; }
  .analyticsSettingsIndoHelp .questionAnswer {
    background: #FBF8FF;
    border: 1px solid #8020CF;
    box-shadow: 2px 5px 5px rgba(22, 22, 22, 0.08);
    border-radius: 5px 0px 5px 5px;
    width: 100%;
    padding: 24px 30px 27px;
    text-align: left; }
    .analyticsSettingsIndoHelp .questionAnswer h5 {
      margin-bottom: 12px;
      color: #303030;
      font-size: 16px;
      font-weight: 500; }
      .analyticsSettingsIndoHelp .questionAnswer h5 span {
        color: #8020CF;
        font-weight: 500; }
    .analyticsSettingsIndoHelp .questionAnswer p {
      margin-bottom: 20px;
      font-size: 16px;
      font-weight: 400;
      color: #210835; }
      .analyticsSettingsIndoHelp .questionAnswer p:last-child {
        margin-bottom: 0; }
      .analyticsSettingsIndoHelp .questionAnswer p strong {
        font-weight: 500; }
  .analyticsSettingsIndoHelp.open .iconQuestion {
    background: #FBF8FF url(../img/help-circle-lightblue.svg) center center no-repeat;
    border: 1px solid #8020CF; }
  .analyticsSettingsIndoHelp.open .questionAnswer,
  .analyticsSettingsIndoHelp.open .overlapWrapper {
    display: block; }

.rulesModal {
  padding-right: 0 !important; }
  .rulesModal .rules {
    width: 100%;
    height: 154px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background: #ffffff;
    border: 1px solid transparent;
    outline: 1px solid transparent;
    box-shadow: 2px 5px 20px rgba(65, 65, 65, 0.08);
    border-radius: 5px;
    cursor: pointer; }
    .rulesModal .rules.zoneBasedRule {
      margin-bottom: 40px; }
    .rulesModal .rules.selected {
      border: 1px solid #8020CF;
      outline: 1px solid #8020CF; }
    .rulesModal .rules h4 {
      color: #4E4576 !important;
      font-size: 20px;
      font-weight: 500;
      margin: 0; }
    .rulesModal .rules .icon {
      width: 40px;
      height: 40px;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      margin-right: 34px;
      margin-left: 47px; }
  .rulesModal .anrBasedOnLogicbtnNext,
  .rulesModal .addNewRulebtnNext,
  .rulesModal .anrBasedOnLinebtnNext,
  .rulesModal .anrBasedOnZonebtnNext,
  .rulesModal .anrLogicModaladdRulebtn,
  .rulesModal .editRuleSaveBtn,
  .rulesModal .imageChatEditRuleSaveBtn,
  .rulesModal .imageChatPromptSelectionNextBtnEdit {
    min-width: 300px;
    height: 44px;
    margin: 0 auto;
    cursor: pointer; }
    .rulesModal .anrBasedOnLogicbtnNext:disabled,
    .rulesModal .addNewRulebtnNext:disabled,
    .rulesModal .anrBasedOnLinebtnNext:disabled,
    .rulesModal .anrBasedOnZonebtnNext:disabled,
    .rulesModal .anrLogicModaladdRulebtn:disabled,
    .rulesModal .editRuleSaveBtn:disabled,
    .rulesModal .imageChatEditRuleSaveBtn:disabled,
    .rulesModal .imageChatPromptSelectionNextBtnEdit:disabled {
      color: #b7b7b7 !important;
      background-color: #f7f7f7; }

.rulesModal .modal-dialog {
  max-width: 785px;
  align-items: center;
  margin: 0 auto; }

.rulesModal .modal-content {
  background-color: #fff !important;
  border-radius: 10px;
  height: auto;
  padding-bottom: 0 !important;
  flex-wrap: wrap;
  color: #595959;
  margin-top: 0;
  overflow: hidden; }

.rulesModal .modal-body {
  width: 100%;
  padding: 40px 100px 40px;
  min-height: 600px; }
  @media screen and (max-width: 768px) {
    .rulesModal .modal-body {
      padding: 18px 20px 35px; } }
  .rulesModal .modal-body p {
    font-weight: 400;
    font-size: 20px;
    margin-bottom: 40px; }
  .rulesModal .modal-body h5 {
    margin-bottom: 40px;
    font-size: 20px;
    font-weight: 400;
    color: #303030; }

.rulesModal .btnWrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90px;
  box-shadow: 0 0px 5px 1px rgba(193, 193, 193, 0.25); }

.rulesModal .modal-header {
  width: 100%;
  height: 65px;
  text-align: center;
  border-bottom: 1px solid #E5E5E5;
  align-items: center;
  text-transform: none;
  padding: 0 25px;
  display: flex;
  align-items: center; }

.rulesModal .modal-title {
  font-weight: 600;
  font-size: 18px;
  line-height: 20px;
  color: #210835;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%; }
  .rulesModal .modal-title i {
    color: #AAAAAA;
    font-weight: 500;
    margin-left: 5px; }

.rulesModal .processHighlightBar {
  margin: 0 auto 40px;
  display: flex;
  flex-wrap: wrap; }
  .rulesModal .processHighlightBar .stepNames {
    width: 100%;
    display: flex;
    justify-content: space-evenly; }
  .rulesModal .processHighlightBar span {
    font-size: 14px;
    font-weight: 500;
    color: #AAAAAA;
    width: 50%;
    text-align: center;
    line-height: 18px; }
    .rulesModal .processHighlightBar span.active {
      color: #210835; }
  .rulesModal .processHighlightBar ul {
    padding: 0;
    margin: 0 auto 20px;
    width: 100%;
    height: 8px;
    border-radius: 8px;
    overflow: hidden;
    background-color: #D8D8D8;
    display: flex; }
    .rulesModal .processHighlightBar ul div {
      min-width: 8px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: white; }
    .rulesModal .processHighlightBar ul li {
      width: 50%;
      display: inline-flex;
      justify-content: center;
      line-height: 18px; }
      .rulesModal .processHighlightBar ul li.active {
        background-color: #9646D7; }

.rulesModal .rules {
  width: 100%;
  height: 154px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background: #ffffff;
  border: 1px solid transparent;
  outline: 1px solid transparent;
  box-shadow: 2px 5px 20px rgba(65, 65, 65, 0.08);
  border-radius: 5px;
  cursor: pointer; }
  .rulesModal .rules.zoneBasedRule {
    margin-bottom: 40px; }
  .rulesModal .rules.selected {
    border: 1px solid #8020CF;
    outline: 1px solid #8020CF; }
  .rulesModal .rules h4 {
    color: #4E4576 !important;
    font-size: 20px;
    font-weight: 500;
    margin: 0; }
  .rulesModal .rules .icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-right: 34px;
    margin-left: 47px; }

.rulesModal .anrBasedOnLogicbtnNext,
.rulesModal .addNewRulebtnNext,
.rulesModal .anrBasedOnLinebtnNext,
.rulesModal .anrBasedOnZonebtnNext,
.rulesModal .anrLogicModaladdRulebtn,
.rulesModal .editRuleSaveBtn {
  min-width: 300px;
  height: 44px;
  margin: 0 auto;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500; }
  .rulesModal .anrBasedOnLogicbtnNext:disabled,
  .rulesModal .addNewRulebtnNext:disabled,
  .rulesModal .anrBasedOnLinebtnNext:disabled,
  .rulesModal .anrBasedOnZonebtnNext:disabled,
  .rulesModal .anrLogicModaladdRulebtn:disabled,
  .rulesModal .editRuleSaveBtn:disabled {
    color: #b7b7b7 !important;
    background-color: #f7f7f7; }

.rulesModal .classesGroup {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap; }

.anrBasedOnLogicModal .fieldArea label,
.anrBasedOnZoneModal .fieldArea label,
.anrBasedOnLineModal .fieldArea label,
.lineBasedEditRuleModal .fieldArea label,
.zoneBasedEditRuleModal .fieldArea label,
.imageChatEditRuleModal .fieldArea label {
  font-size: 16px;
  font-weight: 500;
  color: #303030;
  margin-bottom: 4px; }

.anrBasedOnLogicModal .fieldArea input[type="number"],
.anrBasedOnLogicModal .fieldArea input[type="text"],
.anrBasedOnLogicModal .fieldArea .inputText,
.anrBasedOnZoneModal .fieldArea input[type="number"],
.anrBasedOnZoneModal .fieldArea input[type="text"],
.anrBasedOnZoneModal .fieldArea .inputText,
.anrBasedOnLineModal .fieldArea input[type="number"],
.anrBasedOnLineModal .fieldArea input[type="text"],
.anrBasedOnLineModal .fieldArea .inputText,
.lineBasedEditRuleModal .fieldArea input[type="number"],
.lineBasedEditRuleModal .fieldArea input[type="text"],
.lineBasedEditRuleModal .fieldArea .inputText,
.zoneBasedEditRuleModal .fieldArea input[type="number"],
.zoneBasedEditRuleModal .fieldArea input[type="text"],
.zoneBasedEditRuleModal .fieldArea .inputText,
.imageChatEditRuleModal .fieldArea input[type="number"],
.imageChatEditRuleModal .fieldArea input[type="text"],
.imageChatEditRuleModal .fieldArea .inputText {
  width: 100%;
  height: 50px;
  padding: 0 20px;
  margin-bottom: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background: #f7f7f7;
  border: 1px solid #E0E0E0;
  border-radius: 5px;
  color: #4E4576;
  font-size: 14px;
  font-weight: 400 !important; }
  .anrBasedOnLogicModal .fieldArea input[type="number"]:placeholder,
  .anrBasedOnLogicModal .fieldArea input[type="text"]:placeholder,
  .anrBasedOnLogicModal .fieldArea .inputText:placeholder,
  .anrBasedOnZoneModal .fieldArea input[type="number"]:placeholder,
  .anrBasedOnZoneModal .fieldArea input[type="text"]:placeholder,
  .anrBasedOnZoneModal .fieldArea .inputText:placeholder,
  .anrBasedOnLineModal .fieldArea input[type="number"]:placeholder,
  .anrBasedOnLineModal .fieldArea input[type="text"]:placeholder,
  .anrBasedOnLineModal .fieldArea .inputText:placeholder,
  .lineBasedEditRuleModal .fieldArea input[type="number"]:placeholder,
  .lineBasedEditRuleModal .fieldArea input[type="text"]:placeholder,
  .lineBasedEditRuleModal .fieldArea .inputText:placeholder,
  .zoneBasedEditRuleModal .fieldArea input[type="number"]:placeholder,
  .zoneBasedEditRuleModal .fieldArea input[type="text"]:placeholder,
  .zoneBasedEditRuleModal .fieldArea .inputText:placeholder,
  .imageChatEditRuleModal .fieldArea input[type="number"]:placeholder,
  .imageChatEditRuleModal .fieldArea input[type="text"]:placeholder,
  .imageChatEditRuleModal .fieldArea .inputText:placeholder {
    color: #4E4576; }
  .anrBasedOnLogicModal .fieldArea input[type="number"]:focus, .anrBasedOnLogicModal .fieldArea input[type="number"]:focus-within, .anrBasedOnLogicModal .fieldArea input[type="number"]:active, .anrBasedOnLogicModal .fieldArea input[type="number"]:valid,
  .anrBasedOnLogicModal .fieldArea input[type="text"]:focus,
  .anrBasedOnLogicModal .fieldArea input[type="text"]:focus-within,
  .anrBasedOnLogicModal .fieldArea input[type="text"]:active,
  .anrBasedOnLogicModal .fieldArea input[type="text"]:valid,
  .anrBasedOnLogicModal .fieldArea .inputText:focus,
  .anrBasedOnLogicModal .fieldArea .inputText:focus-within,
  .anrBasedOnLogicModal .fieldArea .inputText:active,
  .anrBasedOnLogicModal .fieldArea .inputText:valid,
  .anrBasedOnZoneModal .fieldArea input[type="number"]:focus,
  .anrBasedOnZoneModal .fieldArea input[type="number"]:focus-within,
  .anrBasedOnZoneModal .fieldArea input[type="number"]:active,
  .anrBasedOnZoneModal .fieldArea input[type="number"]:valid,
  .anrBasedOnZoneModal .fieldArea input[type="text"]:focus,
  .anrBasedOnZoneModal .fieldArea input[type="text"]:focus-within,
  .anrBasedOnZoneModal .fieldArea input[type="text"]:active,
  .anrBasedOnZoneModal .fieldArea input[type="text"]:valid,
  .anrBasedOnZoneModal .fieldArea .inputText:focus,
  .anrBasedOnZoneModal .fieldArea .inputText:focus-within,
  .anrBasedOnZoneModal .fieldArea .inputText:active,
  .anrBasedOnZoneModal .fieldArea .inputText:valid,
  .anrBasedOnLineModal .fieldArea input[type="number"]:focus,
  .anrBasedOnLineModal .fieldArea input[type="number"]:focus-within,
  .anrBasedOnLineModal .fieldArea input[type="number"]:active,
  .anrBasedOnLineModal .fieldArea input[type="number"]:valid,
  .anrBasedOnLineModal .fieldArea input[type="text"]:focus,
  .anrBasedOnLineModal .fieldArea input[type="text"]:focus-within,
  .anrBasedOnLineModal .fieldArea input[type="text"]:active,
  .anrBasedOnLineModal .fieldArea input[type="text"]:valid,
  .anrBasedOnLineModal .fieldArea .inputText:focus,
  .anrBasedOnLineModal .fieldArea .inputText:focus-within,
  .anrBasedOnLineModal .fieldArea .inputText:active,
  .anrBasedOnLineModal .fieldArea .inputText:valid,
  .lineBasedEditRuleModal .fieldArea input[type="number"]:focus,
  .lineBasedEditRuleModal .fieldArea input[type="number"]:focus-within,
  .lineBasedEditRuleModal .fieldArea input[type="number"]:active,
  .lineBasedEditRuleModal .fieldArea input[type="number"]:valid,
  .lineBasedEditRuleModal .fieldArea input[type="text"]:focus,
  .lineBasedEditRuleModal .fieldArea input[type="text"]:focus-within,
  .lineBasedEditRuleModal .fieldArea input[type="text"]:active,
  .lineBasedEditRuleModal .fieldArea input[type="text"]:valid,
  .lineBasedEditRuleModal .fieldArea .inputText:focus,
  .lineBasedEditRuleModal .fieldArea .inputText:focus-within,
  .lineBasedEditRuleModal .fieldArea .inputText:active,
  .lineBasedEditRuleModal .fieldArea .inputText:valid,
  .zoneBasedEditRuleModal .fieldArea input[type="number"]:focus,
  .zoneBasedEditRuleModal .fieldArea input[type="number"]:focus-within,
  .zoneBasedEditRuleModal .fieldArea input[type="number"]:active,
  .zoneBasedEditRuleModal .fieldArea input[type="number"]:valid,
  .zoneBasedEditRuleModal .fieldArea input[type="text"]:focus,
  .zoneBasedEditRuleModal .fieldArea input[type="text"]:focus-within,
  .zoneBasedEditRuleModal .fieldArea input[type="text"]:active,
  .zoneBasedEditRuleModal .fieldArea input[type="text"]:valid,
  .zoneBasedEditRuleModal .fieldArea .inputText:focus,
  .zoneBasedEditRuleModal .fieldArea .inputText:focus-within,
  .zoneBasedEditRuleModal .fieldArea .inputText:active,
  .zoneBasedEditRuleModal .fieldArea .inputText:valid,
  .imageChatEditRuleModal .fieldArea input[type="number"]:focus,
  .imageChatEditRuleModal .fieldArea input[type="number"]:focus-within,
  .imageChatEditRuleModal .fieldArea input[type="number"]:active,
  .imageChatEditRuleModal .fieldArea input[type="number"]:valid,
  .imageChatEditRuleModal .fieldArea input[type="text"]:focus,
  .imageChatEditRuleModal .fieldArea input[type="text"]:focus-within,
  .imageChatEditRuleModal .fieldArea input[type="text"]:active,
  .imageChatEditRuleModal .fieldArea input[type="text"]:valid,
  .imageChatEditRuleModal .fieldArea .inputText:focus,
  .imageChatEditRuleModal .fieldArea .inputText:focus-within,
  .imageChatEditRuleModal .fieldArea .inputText:active,
  .imageChatEditRuleModal .fieldArea .inputText:valid {
    color: #210835;
    font-weight: 600; }

.imageChatAddruleModal .processHighlightBar {
  margin: 0 auto 40px;
  display: flex;
  flex-wrap: wrap; }
  .imageChatAddruleModal .processHighlightBar .stepNames {
    width: 100%;
    display: flex;
    justify-content: space-evenly; }
  .imageChatAddruleModal .processHighlightBar .itemBtn {
    border-color: #e0e0e0;
    background: #f7f7f7 url(../img/trangle-down-arrow-gray.svg) 97% center no-repeat; }
    .imageChatAddruleModal .processHighlightBar .itemBtn.up {
      background: #f7f7f7 url(../img/trangle-up-arrow-gray.svg) 97% center no-repeat; }
  .imageChatAddruleModal .processHighlightBar span {
    font-size: 14px;
    font-weight: 500;
    color: #AAAAAA;
    width: 25%;
    text-align: center;
    line-height: 18px; }
    .imageChatAddruleModal .processHighlightBar span.active {
      color: #210835; }
  .imageChatAddruleModal .processHighlightBar ul {
    padding: 0;
    margin: 0 auto 20px;
    width: 100%;
    height: 8px;
    border-radius: 8px;
    overflow: hidden;
    background-color: #D8D8D8;
    display: flex; }
    .imageChatAddruleModal .processHighlightBar ul div {
      min-width: 8px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: white; }
    .imageChatAddruleModal .processHighlightBar ul li {
      width: 25%;
      display: inline-flex;
      justify-content: center;
      line-height: 18px; }
      .imageChatAddruleModal .processHighlightBar ul li:first-child {
        width: 15%; }
      .imageChatAddruleModal .processHighlightBar ul li:last-child {
        width: 12%; }
      .imageChatAddruleModal .processHighlightBar ul li.active {
        background-color: #9646D7; }

.imageChatAddruleModal .modal-dialog {
  max-width: 785px;
  align-items: center;
  margin: 0 auto; }

.imageChatAddruleModal .modal-content {
  background-color: #fff !important;
  border-radius: 10px;
  height: auto;
  padding-bottom: 0 !important;
  flex-wrap: wrap;
  color: #595959;
  margin-top: 0;
  overflow: hidden; }

.imageChatAddruleModal .modal-body {
  width: 100%;
  padding: 40px 100px 40px;
  height: 600px; }
  @media screen and (max-width: 768px) {
    .imageChatAddruleModal .modal-body {
      padding: 18px 20px 35px; } }
  .imageChatAddruleModal .modal-body p {
    font-weight: 400;
    font-size: 20px;
    margin-bottom: 40px; }
  .imageChatAddruleModal .modal-body h5 {
    margin-bottom: 40px;
    font-size: 20px;
    font-weight: 400;
    color: #303030; }

.imageChatAddruleModal .btnWrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90px;
  box-shadow: 0 0px 5px 1px rgba(193, 193, 193, 0.25); }

.imageChatAddruleModal .modal-header {
  width: 100%;
  height: 65px;
  text-align: center;
  border-bottom: 1px solid #E5E5E5;
  align-items: center;
  text-transform: none;
  padding: 0 25px;
  display: flex;
  align-items: center; }

.imageChatAddruleModal .modal-title {
  font-weight: 600;
  font-size: 18px;
  line-height: 20px;
  color: #210835;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%; }
  .imageChatAddruleModal .modal-title i {
    color: #AAAAAA;
    font-weight: 500;
    margin-left: 5px; }

.imageChatAddruleModal .ruleGroup {
  position: relative; }
  .imageChatAddruleModal .ruleGroup .customTooltip {
    top: 45%; }

.imageChatAddruleModal .btnDisable_ {
  opacity: 0.4; }
  .imageChatAddruleModal .btnDisable_:hover + .customTooltip {
    visibility: visible;
    opacity: 1; }

.imageChatAddruleModal .feildContainer label {
  font-size: 16px;
  font-weight: 500;
  color: #303030;
  margin-bottom: 4px; }

.imageChatAddruleModal .feildContainer input[type="number"],
.imageChatAddruleModal .feildContainer input[type="text"],
.imageChatAddruleModal .feildContainer .inputText {
  width: 100%;
  height: 50px;
  padding: 0 20px;
  margin-bottom: 0; }

.imageChatAddruleModal .feildContainer .anrBasedOnLogicbtnNext,
.imageChatAddruleModal .feildContainer .addNewRulebtnNext,
.imageChatAddruleModal .feildContainer .anrBasedOnLinebtnNext,
.imageChatAddruleModal .feildContainer .anrBasedOnZonebtnNext,
.imageChatAddruleModal .feildContainer .anrLogicModaladdRulebtn,
.imageChatAddruleModal .feildContainer .editRuleSaveBtn {
  min-width: 300px;
  height: 44px;
  margin: 0 auto;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background: #f7f7f7;
  border: 1px solid #E0E0E0;
  border-radius: 5px;
  color: #4E4576;
  font-size: 14px;
  font-weight: 400; }
  .imageChatAddruleModal .feildContainer .anrBasedOnLogicbtnNext:placeholder,
  .imageChatAddruleModal .feildContainer .addNewRulebtnNext:placeholder,
  .imageChatAddruleModal .feildContainer .anrBasedOnLinebtnNext:placeholder,
  .imageChatAddruleModal .feildContainer .anrBasedOnZonebtnNext:placeholder,
  .imageChatAddruleModal .feildContainer .anrLogicModaladdRulebtn:placeholder,
  .imageChatAddruleModal .feildContainer .editRuleSaveBtn:placeholder {
    color: #4E4576; }
  .imageChatAddruleModal .feildContainer .anrBasedOnLogicbtnNext:focus, .imageChatAddruleModal .feildContainer .anrBasedOnLogicbtnNext:focus-within, .imageChatAddruleModal .feildContainer .anrBasedOnLogicbtnNext:active, .imageChatAddruleModal .feildContainer .anrBasedOnLogicbtnNext:valid,
  .imageChatAddruleModal .feildContainer .addNewRulebtnNext:focus,
  .imageChatAddruleModal .feildContainer .addNewRulebtnNext:focus-within,
  .imageChatAddruleModal .feildContainer .addNewRulebtnNext:active,
  .imageChatAddruleModal .feildContainer .addNewRulebtnNext:valid,
  .imageChatAddruleModal .feildContainer .anrBasedOnLinebtnNext:focus,
  .imageChatAddruleModal .feildContainer .anrBasedOnLinebtnNext:focus-within,
  .imageChatAddruleModal .feildContainer .anrBasedOnLinebtnNext:active,
  .imageChatAddruleModal .feildContainer .anrBasedOnLinebtnNext:valid,
  .imageChatAddruleModal .feildContainer .anrBasedOnZonebtnNext:focus,
  .imageChatAddruleModal .feildContainer .anrBasedOnZonebtnNext:focus-within,
  .imageChatAddruleModal .feildContainer .anrBasedOnZonebtnNext:active,
  .imageChatAddruleModal .feildContainer .anrBasedOnZonebtnNext:valid,
  .imageChatAddruleModal .feildContainer .anrLogicModaladdRulebtn:focus,
  .imageChatAddruleModal .feildContainer .anrLogicModaladdRulebtn:focus-within,
  .imageChatAddruleModal .feildContainer .anrLogicModaladdRulebtn:active,
  .imageChatAddruleModal .feildContainer .anrLogicModaladdRulebtn:valid,
  .imageChatAddruleModal .feildContainer .editRuleSaveBtn:focus,
  .imageChatAddruleModal .feildContainer .editRuleSaveBtn:focus-within,
  .imageChatAddruleModal .feildContainer .editRuleSaveBtn:active,
  .imageChatAddruleModal .feildContainer .editRuleSaveBtn:valid {
    color: #210835;
    font-weight: 600; }

.imageChatAddruleModal .fieldArea,
.anrBasedOnLogicModal .fieldArea,
.anrBasedOnZoneModal .fieldArea,
.anrBasedOnLineModal .fieldArea,
.lineBasedEditRuleModal .fieldArea,
.zoneBasedEditRuleModal .fieldArea,
.imageChatEditRuleModal .fieldArea {
  max-width: 500px;
  margin: 0 auto; }

.imageChatAddruleModal .form-group,
.anrBasedOnLogicModal .form-group,
.anrBasedOnZoneModal .form-group,
.anrBasedOnLineModal .form-group,
.lineBasedEditRuleModal .form-group,
.zoneBasedEditRuleModal .form-group,
.imageChatEditRuleModal .form-group {
  margin-bottom: 35px; }

.imageChatAddruleModal .imageChatModalBtn,
.anrBasedOnLogicModal .imageChatModalBtn,
.anrBasedOnZoneModal .imageChatModalBtn,
.anrBasedOnLineModal .imageChatModalBtn,
.lineBasedEditRuleModal .imageChatModalBtn,
.zoneBasedEditRuleModal .imageChatModalBtn,
.imageChatEditRuleModal .imageChatModalBtn {
  min-width: 300px;
  height: 44px;
  margin: 0 auto;
  cursor: pointer; }
  .imageChatAddruleModal .imageChatModalBtn:disabled,
  .anrBasedOnLogicModal .imageChatModalBtn:disabled,
  .anrBasedOnZoneModal .imageChatModalBtn:disabled,
  .anrBasedOnLineModal .imageChatModalBtn:disabled,
  .lineBasedEditRuleModal .imageChatModalBtn:disabled,
  .zoneBasedEditRuleModal .imageChatModalBtn:disabled,
  .imageChatEditRuleModal .imageChatModalBtn:disabled {
    background: #F7F7F7;
    border-color: #F7F7F7;
    color: #B7B7B7 !important;
    pointer-events: none;
    opacity: 1; }

.imageChatAddruleModal .ruleCard,
.anrBasedOnLogicModal .ruleCard,
.anrBasedOnZoneModal .ruleCard,
.anrBasedOnLineModal .ruleCard,
.lineBasedEditRuleModal .ruleCard,
.zoneBasedEditRuleModal .ruleCard,
.imageChatEditRuleModal .ruleCard {
  box-shadow: 2px 5px 20px rgba(65, 65, 65, 0.08);
  border-radius: 5px;
  height: 154px;
  padding: 0 44px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: #4E4576;
  font-size: 20px;
  font-weight: 500;
  border: 2px solid transparent;
  margin-bottom: 40px; }
  .imageChatAddruleModal .ruleCard.selected,
  .anrBasedOnLogicModal .ruleCard.selected,
  .anrBasedOnZoneModal .ruleCard.selected,
  .anrBasedOnLineModal .ruleCard.selected,
  .lineBasedEditRuleModal .ruleCard.selected,
  .zoneBasedEditRuleModal .ruleCard.selected,
  .imageChatEditRuleModal .ruleCard.selected {
    border-color: #8020CF; }
  .imageChatAddruleModal .ruleCard:last-child,
  .anrBasedOnLogicModal .ruleCard:last-child,
  .anrBasedOnZoneModal .ruleCard:last-child,
  .anrBasedOnLineModal .ruleCard:last-child,
  .lineBasedEditRuleModal .ruleCard:last-child,
  .zoneBasedEditRuleModal .ruleCard:last-child,
  .imageChatEditRuleModal .ruleCard:last-child {
    margin-bottom: 0; }

.imageChatAddruleModal .feildContainer label,
.anrBasedOnLogicModal .feildContainer label,
.anrBasedOnZoneModal .feildContainer label,
.anrBasedOnLineModal .feildContainer label,
.lineBasedEditRuleModal .feildContainer label,
.zoneBasedEditRuleModal .feildContainer label,
.imageChatEditRuleModal .feildContainer label {
  font-size: 16px;
  font-weight: 500;
  color: #303030;
  margin-bottom: 4px; }

.imageChatAddruleModal .feildContainer input[type="number"],
.imageChatAddruleModal .feildContainer input[type="text"],
.imageChatAddruleModal .feildContainer .inputText,
.anrBasedOnLogicModal .feildContainer input[type="number"],
.anrBasedOnLogicModal .feildContainer input[type="text"],
.anrBasedOnLogicModal .feildContainer .inputText,
.anrBasedOnZoneModal .feildContainer input[type="number"],
.anrBasedOnZoneModal .feildContainer input[type="text"],
.anrBasedOnZoneModal .feildContainer .inputText,
.anrBasedOnLineModal .feildContainer input[type="number"],
.anrBasedOnLineModal .feildContainer input[type="text"],
.anrBasedOnLineModal .feildContainer .inputText,
.lineBasedEditRuleModal .feildContainer input[type="number"],
.lineBasedEditRuleModal .feildContainer input[type="text"],
.lineBasedEditRuleModal .feildContainer .inputText,
.zoneBasedEditRuleModal .feildContainer input[type="number"],
.zoneBasedEditRuleModal .feildContainer input[type="text"],
.zoneBasedEditRuleModal .feildContainer .inputText,
.imageChatEditRuleModal .feildContainer input[type="number"],
.imageChatEditRuleModal .feildContainer input[type="text"],
.imageChatEditRuleModal .feildContainer .inputText {
  width: 100%;
  height: 50px;
  padding: 0 20px;
  margin-bottom: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background: #f7f7f7;
  border: 1px solid #E0E0E0;
  border-radius: 5px;
  color: #4E4576;
  font-size: 14px;
  font-weight: 400; }
  .imageChatAddruleModal .feildContainer input[type="number"]:placeholder,
  .imageChatAddruleModal .feildContainer input[type="text"]:placeholder,
  .imageChatAddruleModal .feildContainer .inputText:placeholder,
  .anrBasedOnLogicModal .feildContainer input[type="number"]:placeholder,
  .anrBasedOnLogicModal .feildContainer input[type="text"]:placeholder,
  .anrBasedOnLogicModal .feildContainer .inputText:placeholder,
  .anrBasedOnZoneModal .feildContainer input[type="number"]:placeholder,
  .anrBasedOnZoneModal .feildContainer input[type="text"]:placeholder,
  .anrBasedOnZoneModal .feildContainer .inputText:placeholder,
  .anrBasedOnLineModal .feildContainer input[type="number"]:placeholder,
  .anrBasedOnLineModal .feildContainer input[type="text"]:placeholder,
  .anrBasedOnLineModal .feildContainer .inputText:placeholder,
  .lineBasedEditRuleModal .feildContainer input[type="number"]:placeholder,
  .lineBasedEditRuleModal .feildContainer input[type="text"]:placeholder,
  .lineBasedEditRuleModal .feildContainer .inputText:placeholder,
  .zoneBasedEditRuleModal .feildContainer input[type="number"]:placeholder,
  .zoneBasedEditRuleModal .feildContainer input[type="text"]:placeholder,
  .zoneBasedEditRuleModal .feildContainer .inputText:placeholder,
  .imageChatEditRuleModal .feildContainer input[type="number"]:placeholder,
  .imageChatEditRuleModal .feildContainer input[type="text"]:placeholder,
  .imageChatEditRuleModal .feildContainer .inputText:placeholder {
    color: #4E4576; }
  .imageChatAddruleModal .feildContainer input[type="number"]:focus, .imageChatAddruleModal .feildContainer input[type="number"]:focus-within, .imageChatAddruleModal .feildContainer input[type="number"]:active, .imageChatAddruleModal .feildContainer input[type="number"]:valid,
  .imageChatAddruleModal .feildContainer input[type="text"]:focus,
  .imageChatAddruleModal .feildContainer input[type="text"]:focus-within,
  .imageChatAddruleModal .feildContainer input[type="text"]:active,
  .imageChatAddruleModal .feildContainer input[type="text"]:valid,
  .imageChatAddruleModal .feildContainer .inputText:focus,
  .imageChatAddruleModal .feildContainer .inputText:focus-within,
  .imageChatAddruleModal .feildContainer .inputText:active,
  .imageChatAddruleModal .feildContainer .inputText:valid,
  .anrBasedOnLogicModal .feildContainer input[type="number"]:focus,
  .anrBasedOnLogicModal .feildContainer input[type="number"]:focus-within,
  .anrBasedOnLogicModal .feildContainer input[type="number"]:active,
  .anrBasedOnLogicModal .feildContainer input[type="number"]:valid,
  .anrBasedOnLogicModal .feildContainer input[type="text"]:focus,
  .anrBasedOnLogicModal .feildContainer input[type="text"]:focus-within,
  .anrBasedOnLogicModal .feildContainer input[type="text"]:active,
  .anrBasedOnLogicModal .feildContainer input[type="text"]:valid,
  .anrBasedOnLogicModal .feildContainer .inputText:focus,
  .anrBasedOnLogicModal .feildContainer .inputText:focus-within,
  .anrBasedOnLogicModal .feildContainer .inputText:active,
  .anrBasedOnLogicModal .feildContainer .inputText:valid,
  .anrBasedOnZoneModal .feildContainer input[type="number"]:focus,
  .anrBasedOnZoneModal .feildContainer input[type="number"]:focus-within,
  .anrBasedOnZoneModal .feildContainer input[type="number"]:active,
  .anrBasedOnZoneModal .feildContainer input[type="number"]:valid,
  .anrBasedOnZoneModal .feildContainer input[type="text"]:focus,
  .anrBasedOnZoneModal .feildContainer input[type="text"]:focus-within,
  .anrBasedOnZoneModal .feildContainer input[type="text"]:active,
  .anrBasedOnZoneModal .feildContainer input[type="text"]:valid,
  .anrBasedOnZoneModal .feildContainer .inputText:focus,
  .anrBasedOnZoneModal .feildContainer .inputText:focus-within,
  .anrBasedOnZoneModal .feildContainer .inputText:active,
  .anrBasedOnZoneModal .feildContainer .inputText:valid,
  .anrBasedOnLineModal .feildContainer input[type="number"]:focus,
  .anrBasedOnLineModal .feildContainer input[type="number"]:focus-within,
  .anrBasedOnLineModal .feildContainer input[type="number"]:active,
  .anrBasedOnLineModal .feildContainer input[type="number"]:valid,
  .anrBasedOnLineModal .feildContainer input[type="text"]:focus,
  .anrBasedOnLineModal .feildContainer input[type="text"]:focus-within,
  .anrBasedOnLineModal .feildContainer input[type="text"]:active,
  .anrBasedOnLineModal .feildContainer input[type="text"]:valid,
  .anrBasedOnLineModal .feildContainer .inputText:focus,
  .anrBasedOnLineModal .feildContainer .inputText:focus-within,
  .anrBasedOnLineModal .feildContainer .inputText:active,
  .anrBasedOnLineModal .feildContainer .inputText:valid,
  .lineBasedEditRuleModal .feildContainer input[type="number"]:focus,
  .lineBasedEditRuleModal .feildContainer input[type="number"]:focus-within,
  .lineBasedEditRuleModal .feildContainer input[type="number"]:active,
  .lineBasedEditRuleModal .feildContainer input[type="number"]:valid,
  .lineBasedEditRuleModal .feildContainer input[type="text"]:focus,
  .lineBasedEditRuleModal .feildContainer input[type="text"]:focus-within,
  .lineBasedEditRuleModal .feildContainer input[type="text"]:active,
  .lineBasedEditRuleModal .feildContainer input[type="text"]:valid,
  .lineBasedEditRuleModal .feildContainer .inputText:focus,
  .lineBasedEditRuleModal .feildContainer .inputText:focus-within,
  .lineBasedEditRuleModal .feildContainer .inputText:active,
  .lineBasedEditRuleModal .feildContainer .inputText:valid,
  .zoneBasedEditRuleModal .feildContainer input[type="number"]:focus,
  .zoneBasedEditRuleModal .feildContainer input[type="number"]:focus-within,
  .zoneBasedEditRuleModal .feildContainer input[type="number"]:active,
  .zoneBasedEditRuleModal .feildContainer input[type="number"]:valid,
  .zoneBasedEditRuleModal .feildContainer input[type="text"]:focus,
  .zoneBasedEditRuleModal .feildContainer input[type="text"]:focus-within,
  .zoneBasedEditRuleModal .feildContainer input[type="text"]:active,
  .zoneBasedEditRuleModal .feildContainer input[type="text"]:valid,
  .zoneBasedEditRuleModal .feildContainer .inputText:focus,
  .zoneBasedEditRuleModal .feildContainer .inputText:focus-within,
  .zoneBasedEditRuleModal .feildContainer .inputText:active,
  .zoneBasedEditRuleModal .feildContainer .inputText:valid,
  .imageChatEditRuleModal .feildContainer input[type="number"]:focus,
  .imageChatEditRuleModal .feildContainer input[type="number"]:focus-within,
  .imageChatEditRuleModal .feildContainer input[type="number"]:active,
  .imageChatEditRuleModal .feildContainer input[type="number"]:valid,
  .imageChatEditRuleModal .feildContainer input[type="text"]:focus,
  .imageChatEditRuleModal .feildContainer input[type="text"]:focus-within,
  .imageChatEditRuleModal .feildContainer input[type="text"]:active,
  .imageChatEditRuleModal .feildContainer input[type="text"]:valid,
  .imageChatEditRuleModal .feildContainer .inputText:focus,
  .imageChatEditRuleModal .feildContainer .inputText:focus-within,
  .imageChatEditRuleModal .feildContainer .inputText:active,
  .imageChatEditRuleModal .feildContainer .inputText:valid {
    color: #210835;
    font-weight: 500; }

.imageChatAddruleModal .lineSelectionDropdown,
.imageChatAddruleModal .zoneSelectionDropdown,
.anrBasedOnLogicModal .lineSelectionDropdown,
.anrBasedOnLogicModal .zoneSelectionDropdown,
.anrBasedOnZoneModal .lineSelectionDropdown,
.anrBasedOnZoneModal .zoneSelectionDropdown,
.anrBasedOnLineModal .lineSelectionDropdown,
.anrBasedOnLineModal .zoneSelectionDropdown,
.lineBasedEditRuleModal .lineSelectionDropdown,
.lineBasedEditRuleModal .zoneSelectionDropdown,
.zoneBasedEditRuleModal .lineSelectionDropdown,
.zoneBasedEditRuleModal .zoneSelectionDropdown,
.imageChatEditRuleModal .lineSelectionDropdown,
.imageChatEditRuleModal .zoneSelectionDropdown {
  width: 100%; }
  .imageChatAddruleModal .lineSelectionDropdown .itemBtn,
  .imageChatAddruleModal .zoneSelectionDropdown .itemBtn,
  .anrBasedOnLogicModal .lineSelectionDropdown .itemBtn,
  .anrBasedOnLogicModal .zoneSelectionDropdown .itemBtn,
  .anrBasedOnZoneModal .lineSelectionDropdown .itemBtn,
  .anrBasedOnZoneModal .zoneSelectionDropdown .itemBtn,
  .anrBasedOnLineModal .lineSelectionDropdown .itemBtn,
  .anrBasedOnLineModal .zoneSelectionDropdown .itemBtn,
  .lineBasedEditRuleModal .lineSelectionDropdown .itemBtn,
  .lineBasedEditRuleModal .zoneSelectionDropdown .itemBtn,
  .zoneBasedEditRuleModal .lineSelectionDropdown .itemBtn,
  .zoneBasedEditRuleModal .zoneSelectionDropdown .itemBtn,
  .imageChatEditRuleModal .lineSelectionDropdown .itemBtn,
  .imageChatEditRuleModal .zoneSelectionDropdown .itemBtn {
    border-color: #e0e0e0;
    background: #f7f7f7 url(../img/trangle-down-arrow-lightblue.svg) 97% center no-repeat; }
    .imageChatAddruleModal .lineSelectionDropdown .itemBtn.up,
    .imageChatAddruleModal .zoneSelectionDropdown .itemBtn.up,
    .anrBasedOnLogicModal .lineSelectionDropdown .itemBtn.up,
    .anrBasedOnLogicModal .zoneSelectionDropdown .itemBtn.up,
    .anrBasedOnZoneModal .lineSelectionDropdown .itemBtn.up,
    .anrBasedOnZoneModal .zoneSelectionDropdown .itemBtn.up,
    .anrBasedOnLineModal .lineSelectionDropdown .itemBtn.up,
    .anrBasedOnLineModal .zoneSelectionDropdown .itemBtn.up,
    .lineBasedEditRuleModal .lineSelectionDropdown .itemBtn.up,
    .lineBasedEditRuleModal .zoneSelectionDropdown .itemBtn.up,
    .zoneBasedEditRuleModal .lineSelectionDropdown .itemBtn.up,
    .zoneBasedEditRuleModal .zoneSelectionDropdown .itemBtn.up,
    .imageChatEditRuleModal .lineSelectionDropdown .itemBtn.up,
    .imageChatEditRuleModal .zoneSelectionDropdown .itemBtn.up {
      background: #f7f7f7 url(../img/trangle-up-arrow-lightblue.svg) 97% center no-repeat; }
    .imageChatAddruleModal .lineSelectionDropdown .itemBtn:focus,
    .imageChatAddruleModal .zoneSelectionDropdown .itemBtn:focus,
    .anrBasedOnLogicModal .lineSelectionDropdown .itemBtn:focus,
    .anrBasedOnLogicModal .zoneSelectionDropdown .itemBtn:focus,
    .anrBasedOnZoneModal .lineSelectionDropdown .itemBtn:focus,
    .anrBasedOnZoneModal .zoneSelectionDropdown .itemBtn:focus,
    .anrBasedOnLineModal .lineSelectionDropdown .itemBtn:focus,
    .anrBasedOnLineModal .zoneSelectionDropdown .itemBtn:focus,
    .lineBasedEditRuleModal .lineSelectionDropdown .itemBtn:focus,
    .lineBasedEditRuleModal .zoneSelectionDropdown .itemBtn:focus,
    .zoneBasedEditRuleModal .lineSelectionDropdown .itemBtn:focus,
    .zoneBasedEditRuleModal .zoneSelectionDropdown .itemBtn:focus,
    .imageChatEditRuleModal .lineSelectionDropdown .itemBtn:focus,
    .imageChatEditRuleModal .zoneSelectionDropdown .itemBtn:focus {
      outline-color: #8020CF !important;
      color: #202223 !important;
      outline-style: solid !important;
      outline-width: 1px !important; }
  .imageChatAddruleModal .lineSelectionDropdown .itemBtn,
  .imageChatAddruleModal .zoneSelectionDropdown .itemBtn,
  .anrBasedOnLogicModal .lineSelectionDropdown .itemBtn,
  .anrBasedOnLogicModal .zoneSelectionDropdown .itemBtn,
  .anrBasedOnZoneModal .lineSelectionDropdown .itemBtn,
  .anrBasedOnZoneModal .zoneSelectionDropdown .itemBtn,
  .anrBasedOnLineModal .lineSelectionDropdown .itemBtn,
  .anrBasedOnLineModal .zoneSelectionDropdown .itemBtn,
  .lineBasedEditRuleModal .lineSelectionDropdown .itemBtn,
  .lineBasedEditRuleModal .zoneSelectionDropdown .itemBtn,
  .zoneBasedEditRuleModal .lineSelectionDropdown .itemBtn,
  .zoneBasedEditRuleModal .zoneSelectionDropdown .itemBtn,
  .imageChatEditRuleModal .lineSelectionDropdown .itemBtn,
  .imageChatEditRuleModal .zoneSelectionDropdown .itemBtn {
    height: 50px;
    font-size: 16px;
    max-width: 100%;
    display: block;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    color: #210835;
    font-family: "latomedium";
    font-weight: 400;
    cursor: pointer;
    box-sizing: border-box;
    padding-left: 40px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
    .imageChatAddruleModal .lineSelectionDropdown .itemBtn:before,
    .imageChatAddruleModal .zoneSelectionDropdown .itemBtn:before,
    .anrBasedOnLogicModal .lineSelectionDropdown .itemBtn:before,
    .anrBasedOnLogicModal .zoneSelectionDropdown .itemBtn:before,
    .anrBasedOnZoneModal .lineSelectionDropdown .itemBtn:before,
    .anrBasedOnZoneModal .zoneSelectionDropdown .itemBtn:before,
    .anrBasedOnLineModal .lineSelectionDropdown .itemBtn:before,
    .anrBasedOnLineModal .zoneSelectionDropdown .itemBtn:before,
    .lineBasedEditRuleModal .lineSelectionDropdown .itemBtn:before,
    .lineBasedEditRuleModal .zoneSelectionDropdown .itemBtn:before,
    .zoneBasedEditRuleModal .lineSelectionDropdown .itemBtn:before,
    .zoneBasedEditRuleModal .zoneSelectionDropdown .itemBtn:before,
    .imageChatEditRuleModal .lineSelectionDropdown .itemBtn:before,
    .imageChatEditRuleModal .zoneSelectionDropdown .itemBtn:before {
      width: 40px;
      height: 50px;
      background: url(../img/Search.svg) 14px center no-repeat !important;
      position: absolute;
      top: 2px;
      left: 0;
      content: '';
      z-index: 1; }
    .imageChatAddruleModal .lineSelectionDropdown .itemBtn .searchLineSelection,
    .imageChatAddruleModal .lineSelectionDropdown .itemBtn .searchZoneSelection,
    .imageChatAddruleModal .zoneSelectionDropdown .itemBtn .searchLineSelection,
    .imageChatAddruleModal .zoneSelectionDropdown .itemBtn .searchZoneSelection,
    .anrBasedOnLogicModal .lineSelectionDropdown .itemBtn .searchLineSelection,
    .anrBasedOnLogicModal .lineSelectionDropdown .itemBtn .searchZoneSelection,
    .anrBasedOnLogicModal .zoneSelectionDropdown .itemBtn .searchLineSelection,
    .anrBasedOnLogicModal .zoneSelectionDropdown .itemBtn .searchZoneSelection,
    .anrBasedOnZoneModal .lineSelectionDropdown .itemBtn .searchLineSelection,
    .anrBasedOnZoneModal .lineSelectionDropdown .itemBtn .searchZoneSelection,
    .anrBasedOnZoneModal .zoneSelectionDropdown .itemBtn .searchLineSelection,
    .anrBasedOnZoneModal .zoneSelectionDropdown .itemBtn .searchZoneSelection,
    .anrBasedOnLineModal .lineSelectionDropdown .itemBtn .searchLineSelection,
    .anrBasedOnLineModal .lineSelectionDropdown .itemBtn .searchZoneSelection,
    .anrBasedOnLineModal .zoneSelectionDropdown .itemBtn .searchLineSelection,
    .anrBasedOnLineModal .zoneSelectionDropdown .itemBtn .searchZoneSelection,
    .lineBasedEditRuleModal .lineSelectionDropdown .itemBtn .searchLineSelection,
    .lineBasedEditRuleModal .lineSelectionDropdown .itemBtn .searchZoneSelection,
    .lineBasedEditRuleModal .zoneSelectionDropdown .itemBtn .searchLineSelection,
    .lineBasedEditRuleModal .zoneSelectionDropdown .itemBtn .searchZoneSelection,
    .zoneBasedEditRuleModal .lineSelectionDropdown .itemBtn .searchLineSelection,
    .zoneBasedEditRuleModal .lineSelectionDropdown .itemBtn .searchZoneSelection,
    .zoneBasedEditRuleModal .zoneSelectionDropdown .itemBtn .searchLineSelection,
    .zoneBasedEditRuleModal .zoneSelectionDropdown .itemBtn .searchZoneSelection,
    .imageChatEditRuleModal .lineSelectionDropdown .itemBtn .searchLineSelection,
    .imageChatEditRuleModal .lineSelectionDropdown .itemBtn .searchZoneSelection,
    .imageChatEditRuleModal .zoneSelectionDropdown .itemBtn .searchLineSelection,
    .imageChatEditRuleModal .zoneSelectionDropdown .itemBtn .searchZoneSelection {
      padding: 0 !important;
      color: #210835;
      border: none !important; }
      .imageChatAddruleModal .lineSelectionDropdown .itemBtn .searchLineSelection:focus,
      .imageChatAddruleModal .lineSelectionDropdown .itemBtn .searchZoneSelection:focus,
      .imageChatAddruleModal .zoneSelectionDropdown .itemBtn .searchLineSelection:focus,
      .imageChatAddruleModal .zoneSelectionDropdown .itemBtn .searchZoneSelection:focus,
      .anrBasedOnLogicModal .lineSelectionDropdown .itemBtn .searchLineSelection:focus,
      .anrBasedOnLogicModal .lineSelectionDropdown .itemBtn .searchZoneSelection:focus,
      .anrBasedOnLogicModal .zoneSelectionDropdown .itemBtn .searchLineSelection:focus,
      .anrBasedOnLogicModal .zoneSelectionDropdown .itemBtn .searchZoneSelection:focus,
      .anrBasedOnZoneModal .lineSelectionDropdown .itemBtn .searchLineSelection:focus,
      .anrBasedOnZoneModal .lineSelectionDropdown .itemBtn .searchZoneSelection:focus,
      .anrBasedOnZoneModal .zoneSelectionDropdown .itemBtn .searchLineSelection:focus,
      .anrBasedOnZoneModal .zoneSelectionDropdown .itemBtn .searchZoneSelection:focus,
      .anrBasedOnLineModal .lineSelectionDropdown .itemBtn .searchLineSelection:focus,
      .anrBasedOnLineModal .lineSelectionDropdown .itemBtn .searchZoneSelection:focus,
      .anrBasedOnLineModal .zoneSelectionDropdown .itemBtn .searchLineSelection:focus,
      .anrBasedOnLineModal .zoneSelectionDropdown .itemBtn .searchZoneSelection:focus,
      .lineBasedEditRuleModal .lineSelectionDropdown .itemBtn .searchLineSelection:focus,
      .lineBasedEditRuleModal .lineSelectionDropdown .itemBtn .searchZoneSelection:focus,
      .lineBasedEditRuleModal .zoneSelectionDropdown .itemBtn .searchLineSelection:focus,
      .lineBasedEditRuleModal .zoneSelectionDropdown .itemBtn .searchZoneSelection:focus,
      .zoneBasedEditRuleModal .lineSelectionDropdown .itemBtn .searchLineSelection:focus,
      .zoneBasedEditRuleModal .lineSelectionDropdown .itemBtn .searchZoneSelection:focus,
      .zoneBasedEditRuleModal .zoneSelectionDropdown .itemBtn .searchLineSelection:focus,
      .zoneBasedEditRuleModal .zoneSelectionDropdown .itemBtn .searchZoneSelection:focus,
      .imageChatEditRuleModal .lineSelectionDropdown .itemBtn .searchLineSelection:focus,
      .imageChatEditRuleModal .lineSelectionDropdown .itemBtn .searchZoneSelection:focus,
      .imageChatEditRuleModal .zoneSelectionDropdown .itemBtn .searchLineSelection:focus,
      .imageChatEditRuleModal .zoneSelectionDropdown .itemBtn .searchZoneSelection:focus {
        outline: none;
        border: none; }
  .imageChatAddruleModal .lineSelectionDropdown .dropdownItemList,
  .imageChatAddruleModal .zoneSelectionDropdown .dropdownItemList,
  .anrBasedOnLogicModal .lineSelectionDropdown .dropdownItemList,
  .anrBasedOnLogicModal .zoneSelectionDropdown .dropdownItemList,
  .anrBasedOnZoneModal .lineSelectionDropdown .dropdownItemList,
  .anrBasedOnZoneModal .zoneSelectionDropdown .dropdownItemList,
  .anrBasedOnLineModal .lineSelectionDropdown .dropdownItemList,
  .anrBasedOnLineModal .zoneSelectionDropdown .dropdownItemList,
  .lineBasedEditRuleModal .lineSelectionDropdown .dropdownItemList,
  .lineBasedEditRuleModal .zoneSelectionDropdown .dropdownItemList,
  .zoneBasedEditRuleModal .lineSelectionDropdown .dropdownItemList,
  .zoneBasedEditRuleModal .zoneSelectionDropdown .dropdownItemList,
  .imageChatEditRuleModal .lineSelectionDropdown .dropdownItemList,
  .imageChatEditRuleModal .zoneSelectionDropdown .dropdownItemList {
    top: 55px;
    border-radius: 0 0 6px 6px;
    background-color: #f7f7f7;
    max-width: 100%;
    max-height: 200px;
    border: 1px solid #EAEAEA;
    box-shadow: 0px 3px 5px rgba(6, 0, 41, 0.2);
    border-radius: 6px; }
    .imageChatAddruleModal .lineSelectionDropdown .dropdownItemList .mCSB_container,
    .imageChatAddruleModal .zoneSelectionDropdown .dropdownItemList .mCSB_container,
    .anrBasedOnLogicModal .lineSelectionDropdown .dropdownItemList .mCSB_container,
    .anrBasedOnLogicModal .zoneSelectionDropdown .dropdownItemList .mCSB_container,
    .anrBasedOnZoneModal .lineSelectionDropdown .dropdownItemList .mCSB_container,
    .anrBasedOnZoneModal .zoneSelectionDropdown .dropdownItemList .mCSB_container,
    .anrBasedOnLineModal .lineSelectionDropdown .dropdownItemList .mCSB_container,
    .anrBasedOnLineModal .zoneSelectionDropdown .dropdownItemList .mCSB_container,
    .lineBasedEditRuleModal .lineSelectionDropdown .dropdownItemList .mCSB_container,
    .lineBasedEditRuleModal .zoneSelectionDropdown .dropdownItemList .mCSB_container,
    .zoneBasedEditRuleModal .lineSelectionDropdown .dropdownItemList .mCSB_container,
    .zoneBasedEditRuleModal .zoneSelectionDropdown .dropdownItemList .mCSB_container,
    .imageChatEditRuleModal .lineSelectionDropdown .dropdownItemList .mCSB_container,
    .imageChatEditRuleModal .zoneSelectionDropdown .dropdownItemList .mCSB_container {
      padding-bottom: 50px; }
    .imageChatAddruleModal .lineSelectionDropdown .dropdownItemList li,
    .imageChatAddruleModal .zoneSelectionDropdown .dropdownItemList li,
    .anrBasedOnLogicModal .lineSelectionDropdown .dropdownItemList li,
    .anrBasedOnLogicModal .zoneSelectionDropdown .dropdownItemList li,
    .anrBasedOnZoneModal .lineSelectionDropdown .dropdownItemList li,
    .anrBasedOnZoneModal .zoneSelectionDropdown .dropdownItemList li,
    .anrBasedOnLineModal .lineSelectionDropdown .dropdownItemList li,
    .anrBasedOnLineModal .zoneSelectionDropdown .dropdownItemList li,
    .lineBasedEditRuleModal .lineSelectionDropdown .dropdownItemList li,
    .lineBasedEditRuleModal .zoneSelectionDropdown .dropdownItemList li,
    .zoneBasedEditRuleModal .lineSelectionDropdown .dropdownItemList li,
    .zoneBasedEditRuleModal .zoneSelectionDropdown .dropdownItemList li,
    .imageChatEditRuleModal .lineSelectionDropdown .dropdownItemList li,
    .imageChatEditRuleModal .zoneSelectionDropdown .dropdownItemList li {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      font-size: 14px;
      color: #303030;
      font-family: "latomedium";
      font-weight: 400;
      cursor: pointer;
      box-sizing: border-box; }
      .imageChatAddruleModal .lineSelectionDropdown .dropdownItemList li a,
      .imageChatAddruleModal .zoneSelectionDropdown .dropdownItemList li a,
      .anrBasedOnLogicModal .lineSelectionDropdown .dropdownItemList li a,
      .anrBasedOnLogicModal .zoneSelectionDropdown .dropdownItemList li a,
      .anrBasedOnZoneModal .lineSelectionDropdown .dropdownItemList li a,
      .anrBasedOnZoneModal .zoneSelectionDropdown .dropdownItemList li a,
      .anrBasedOnLineModal .lineSelectionDropdown .dropdownItemList li a,
      .anrBasedOnLineModal .zoneSelectionDropdown .dropdownItemList li a,
      .lineBasedEditRuleModal .lineSelectionDropdown .dropdownItemList li a,
      .lineBasedEditRuleModal .zoneSelectionDropdown .dropdownItemList li a,
      .zoneBasedEditRuleModal .lineSelectionDropdown .dropdownItemList li a,
      .zoneBasedEditRuleModal .zoneSelectionDropdown .dropdownItemList li a,
      .imageChatEditRuleModal .lineSelectionDropdown .dropdownItemList li a,
      .imageChatEditRuleModal .zoneSelectionDropdown .dropdownItemList li a {
        font-size: 14px;
        font-weight: 400;
        color: #303030;
        padding: 10px 12px;
        text-decoration: none !important; }
      .imageChatAddruleModal .lineSelectionDropdown .dropdownItemList li:hover a,
      .imageChatAddruleModal .lineSelectionDropdown .dropdownItemList li:hover a:focus, .imageChatAddruleModal .lineSelectionDropdown .dropdownItemList li.active,
      .imageChatAddruleModal .lineSelectionDropdown .dropdownItemList li.active a,
      .imageChatAddruleModal .zoneSelectionDropdown .dropdownItemList li:hover a,
      .imageChatAddruleModal .zoneSelectionDropdown .dropdownItemList li:hover a:focus,
      .imageChatAddruleModal .zoneSelectionDropdown .dropdownItemList li.active,
      .imageChatAddruleModal .zoneSelectionDropdown .dropdownItemList li.active a,
      .anrBasedOnLogicModal .lineSelectionDropdown .dropdownItemList li:hover a,
      .anrBasedOnLogicModal .lineSelectionDropdown .dropdownItemList li:hover a:focus,
      .anrBasedOnLogicModal .lineSelectionDropdown .dropdownItemList li.active,
      .anrBasedOnLogicModal .lineSelectionDropdown .dropdownItemList li.active a,
      .anrBasedOnLogicModal .zoneSelectionDropdown .dropdownItemList li:hover a,
      .anrBasedOnLogicModal .zoneSelectionDropdown .dropdownItemList li:hover a:focus,
      .anrBasedOnLogicModal .zoneSelectionDropdown .dropdownItemList li.active,
      .anrBasedOnLogicModal .zoneSelectionDropdown .dropdownItemList li.active a,
      .anrBasedOnZoneModal .lineSelectionDropdown .dropdownItemList li:hover a,
      .anrBasedOnZoneModal .lineSelectionDropdown .dropdownItemList li:hover a:focus,
      .anrBasedOnZoneModal .lineSelectionDropdown .dropdownItemList li.active,
      .anrBasedOnZoneModal .lineSelectionDropdown .dropdownItemList li.active a,
      .anrBasedOnZoneModal .zoneSelectionDropdown .dropdownItemList li:hover a,
      .anrBasedOnZoneModal .zoneSelectionDropdown .dropdownItemList li:hover a:focus,
      .anrBasedOnZoneModal .zoneSelectionDropdown .dropdownItemList li.active,
      .anrBasedOnZoneModal .zoneSelectionDropdown .dropdownItemList li.active a,
      .anrBasedOnLineModal .lineSelectionDropdown .dropdownItemList li:hover a,
      .anrBasedOnLineModal .lineSelectionDropdown .dropdownItemList li:hover a:focus,
      .anrBasedOnLineModal .lineSelectionDropdown .dropdownItemList li.active,
      .anrBasedOnLineModal .lineSelectionDropdown .dropdownItemList li.active a,
      .anrBasedOnLineModal .zoneSelectionDropdown .dropdownItemList li:hover a,
      .anrBasedOnLineModal .zoneSelectionDropdown .dropdownItemList li:hover a:focus,
      .anrBasedOnLineModal .zoneSelectionDropdown .dropdownItemList li.active,
      .anrBasedOnLineModal .zoneSelectionDropdown .dropdownItemList li.active a,
      .lineBasedEditRuleModal .lineSelectionDropdown .dropdownItemList li:hover a,
      .lineBasedEditRuleModal .lineSelectionDropdown .dropdownItemList li:hover a:focus,
      .lineBasedEditRuleModal .lineSelectionDropdown .dropdownItemList li.active,
      .lineBasedEditRuleModal .lineSelectionDropdown .dropdownItemList li.active a,
      .lineBasedEditRuleModal .zoneSelectionDropdown .dropdownItemList li:hover a,
      .lineBasedEditRuleModal .zoneSelectionDropdown .dropdownItemList li:hover a:focus,
      .lineBasedEditRuleModal .zoneSelectionDropdown .dropdownItemList li.active,
      .lineBasedEditRuleModal .zoneSelectionDropdown .dropdownItemList li.active a,
      .zoneBasedEditRuleModal .lineSelectionDropdown .dropdownItemList li:hover a,
      .zoneBasedEditRuleModal .lineSelectionDropdown .dropdownItemList li:hover a:focus,
      .zoneBasedEditRuleModal .lineSelectionDropdown .dropdownItemList li.active,
      .zoneBasedEditRuleModal .lineSelectionDropdown .dropdownItemList li.active a,
      .zoneBasedEditRuleModal .zoneSelectionDropdown .dropdownItemList li:hover a,
      .zoneBasedEditRuleModal .zoneSelectionDropdown .dropdownItemList li:hover a:focus,
      .zoneBasedEditRuleModal .zoneSelectionDropdown .dropdownItemList li.active,
      .zoneBasedEditRuleModal .zoneSelectionDropdown .dropdownItemList li.active a,
      .imageChatEditRuleModal .lineSelectionDropdown .dropdownItemList li:hover a,
      .imageChatEditRuleModal .lineSelectionDropdown .dropdownItemList li:hover a:focus,
      .imageChatEditRuleModal .lineSelectionDropdown .dropdownItemList li.active,
      .imageChatEditRuleModal .lineSelectionDropdown .dropdownItemList li.active a,
      .imageChatEditRuleModal .zoneSelectionDropdown .dropdownItemList li:hover a,
      .imageChatEditRuleModal .zoneSelectionDropdown .dropdownItemList li:hover a:focus,
      .imageChatEditRuleModal .zoneSelectionDropdown .dropdownItemList li.active,
      .imageChatEditRuleModal .zoneSelectionDropdown .dropdownItemList li.active a {
        background: #EAEAEA;
        color: #303030 !important; }
  .imageChatAddruleModal .lineSelectionDropdown input[type="text"],
  .imageChatAddruleModal .zoneSelectionDropdown input[type="text"],
  .anrBasedOnLogicModal .lineSelectionDropdown input[type="text"],
  .anrBasedOnLogicModal .zoneSelectionDropdown input[type="text"],
  .anrBasedOnZoneModal .lineSelectionDropdown input[type="text"],
  .anrBasedOnZoneModal .zoneSelectionDropdown input[type="text"],
  .anrBasedOnLineModal .lineSelectionDropdown input[type="text"],
  .anrBasedOnLineModal .zoneSelectionDropdown input[type="text"],
  .lineBasedEditRuleModal .lineSelectionDropdown input[type="text"],
  .lineBasedEditRuleModal .zoneSelectionDropdown input[type="text"],
  .zoneBasedEditRuleModal .lineSelectionDropdown input[type="text"],
  .zoneBasedEditRuleModal .zoneSelectionDropdown input[type="text"],
  .imageChatEditRuleModal .lineSelectionDropdown input[type="text"],
  .imageChatEditRuleModal .zoneSelectionDropdown input[type="text"] {
    background: #F7F7F7;
    border: 1px solid #E0E0E0;
    border-radius: 5px;
    color: #4E4576;
    font-size: 14px;
    font-weight: 400;
    height: 50px;
    padding: 0 20px;
    width: 100%; }

.imageChatPromptSelectionModal p.label {
  margin-bottom: 20px;
  color: #535353;
  font-size: 16px;
  font-weight: 400; }

.imageChatPromptSelectionModal .group {
  display: flex;
  justify-content: space-between; }

.imageChatPromptSelectionModal .prompt,
.imageChatPromptSelectionModal .modelname {
  width: 50%; }
  .imageChatPromptSelectionModal .prompt h6,
  .imageChatPromptSelectionModal .modelname h6 {
    margin-bottom: 14px;
    font-size: 16px;
    font-weight: 500; }

.imageChatPromptSelectionModal .feildContainer {
  max-height: 420px;
  overflow: hidden; }
  .imageChatPromptSelectionModal .feildContainer .checkbox {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 400;
    color: #535353;
    cursor: pointer;
    padding-right: 20px; }
    .imageChatPromptSelectionModal .feildContainer .checkbox input[type="checkbox"] {
      min-width: 20px;
      width: 20px;
      height: 20px;
      background: #ffffff;
      border: 2px solid #878787;
      border-radius: 4px;
      margin-right: 10px;
      appearance: none;
      -webkit-appearance: none; }
      .imageChatPromptSelectionModal .feildContainer .checkbox input[type="checkbox"]:checked {
        background: #8020CF url(../img/ch-check-white.svg) center center no-repeat;
        border-color: #8020CF; }
    .imageChatPromptSelectionModal .feildContainer .checkbox span {
      white-space: nowrap;
      max-width: 90%;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #535353;
      display: inline-block; }

.imageChatPromptSelectionModal .modelname p {
  margin-bottom: 20px;
  color: #535353;
  font-size: 14px;
  font-weight: 400;
  display: flex;
  align-items: center;
  white-space: nowrap; }
  .imageChatPromptSelectionModal .modelname p i {
    color: #A5A5A5;
    margin-left: 5px; }
  .imageChatPromptSelectionModal .modelname p span {
    white-space: nowrap;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block; }

.imageChatPromptSelectionModal .searchLineSelection,
.imageChatPromptSelectionModal .searchZoneSelection {
  position: absolute;
  top: 0;
  left: 0;
  border: none;
  cursor: pointer;
  color: #210835;
  font-size: 14px;
  font-weight: 400;
  margin: 0;
  height: 42px;
  padding-left: 0;
  padding-right: 30px;
  background: transparent;
  max-width: 100%;
  width: 100%;
  border-radius: 5px; }
  .imageChatPromptSelectionModal .searchLineSelection:focus,
  .imageChatPromptSelectionModal .searchZoneSelection:focus {
    outline-width: 1px;
    box-shadow: none;
    cursor: auto; }

.imageChatPromptSelectionModal .selectedInfo {
  margin-top: -15px; }
  .imageChatPromptSelectionModal .selectedInfo p {
    margin-bottom: 7px;
    color: #535353;
    font-size: 14px;
    font-weight: 400; }
    .imageChatPromptSelectionModal .selectedInfo p span {
      margin-left: 2px;
      font-weight: 500; }

.anrLogicModal label .info {
  margin-left: 4px; }

.anrLogicModal .ccThresholdDropdown {
  width: 100%; }
  .anrLogicModal .ccThresholdDropdown .arrow {
    margin-right: 10px;
    width: 7px;
    background: url(../img/arrow.svg) 0 0 no-repeat;
    display: inline-block;
    line-height: 8px; }
  .anrLogicModal .ccThresholdDropdown .itemBtn {
    border-color: #e0e0e0;
    background: #f7f7f7 url(../img/trangle-down-arrow-lightblue.svg) 97% center no-repeat; }
    .anrLogicModal .ccThresholdDropdown .itemBtn.up {
      background: #f7f7f7 url(../img/trangle-up-arrow-lightblue.svg) 97% center no-repeat; }
    .anrLogicModal .ccThresholdDropdown .itemBtn:focus {
      outline-color: #8020CF !important;
      color: #202223 !important;
      outline-style: solid !important;
      outline-width: 1px !important; }
  .anrLogicModal .ccThresholdDropdown .itemBtn {
    height: 50px;
    font-size: 16px;
    max-width: 100%;
    display: block;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    color: #210835;
    font-family: "latomedium";
    font-weight: 400;
    cursor: pointer;
    box-sizing: border-box;
    padding-left: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
  .anrLogicModal .ccThresholdDropdown .dropdownItemList {
    top: 55px;
    border-radius: 0 0 6px 6px;
    background-color: #f7f7f7;
    max-width: 100%;
    max-height: 200px;
    border: 1px solid #EAEAEA;
    box-shadow: 0px 3px 5px rgba(6, 0, 41, 0.2);
    border-radius: 6px; }
    .anrLogicModal .ccThresholdDropdown .dropdownItemList .mCSB_container {
      padding-bottom: 50px; }
    .anrLogicModal .ccThresholdDropdown .dropdownItemList li {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      font-size: 14px;
      color: #535353;
      font-family: "latomedium";
      font-weight: 400;
      cursor: pointer;
      box-sizing: border-box; }
      .anrLogicModal .ccThresholdDropdown .dropdownItemList li a {
        font-size: 14px;
        font-weight: 400;
        color: #535353;
        padding: 10px 12px;
        text-decoration: none !important; }
        .anrLogicModal .ccThresholdDropdown .dropdownItemList li a .arrow {
          margin-right: 5px; }
      .anrLogicModal .ccThresholdDropdown .dropdownItemList li:hover a,
      .anrLogicModal .ccThresholdDropdown .dropdownItemList li:hover a:focus,
      .anrLogicModal .ccThresholdDropdown .dropdownItemList li.active a {
        background: #F9F2FF;
        color: #535353 !important; }

.anrLogicModal .recurringAlertsUniqueObject {
  display: flex; }

.rulesContainer .rulecards {
  display: inline-flex;
  flex-direction: column;
  width: 96%;
  border: 1px solid #F2E9FA;
  box-shadow: 1px 1px 3px rgba(22, 22, 22, 0.08);
  border-radius: 5px; }
  .rulesContainer .rulecards .cardHeader {
    height: 85px;
    min-height: 85px;
    border-bottom: solid 1px transparent;
    display: flex;
    align-items: center;
    border-radius: 5px 5px 0px 0px; }
    .rulesContainer .rulecards .cardHeader .group {
      display: inline-flex;
      width: 75%;
      padding-left: 35px;
      flex-direction: column; }
    .rulesContainer .rulecards .cardHeader h6 {
      font-size: 13px;
      font-weight: 400;
      margin-bottom: 0; }
    .rulesContainer .rulecards .cardHeader h4 {
      font-size: 18px;
      font-weight: 500;
      color: #210835;
      margin-bottom: 0;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      display: -webkit-box;
      overflow: hidden;
      word-break: break-word; }
    .rulesContainer .rulecards .cardHeader .actions {
      margin-left: auto;
      padding-right: 35px; }
      .rulesContainer .rulecards .cardHeader .actions button {
        width: 18px;
        height: 18px;
        background: transparent;
        border: none;
        background-size: contain !important;
        border: none;
        padding: 0; }
        .rulesContainer .rulecards .cardHeader .actions button.editBtn {
          background: url(../img/ch-edit-gray.svg) center center no-repeat; }
        .rulesContainer .rulecards .cardHeader .actions button.deleteBtn {
          background: url(../img/ch-delete-gray.svg) center center no-repeat;
          margin-left: 18px; }
        .rulesContainer .rulecards .cardHeader .actions button .customTooltip {
          top: 25px;
          right: 0; }
  .rulesContainer .rulecards .cardInfo {
    padding: 18px 35px 30px;
    height: 100%; }
    .rulesContainer .rulecards .cardInfo p {
      font-size: 14px;
      font-weight: 400;
      margin-bottom: 15px;
      color: #4E4576;
      display: flex; }
      .rulesContainer .rulecards .cardInfo p strong {
        color: #210835;
        font-weight: 500;
        display: inline-flex;
        align-items: center; }
        .rulesContainer .rulecards .cardInfo p strong span {
          font-weight: 400;
          margin-left: 2px; }
      .rulesContainer .rulecards .cardInfo p a {
        margin-left: 10px;
        font-size: 14px;
        font-weight: 500;
        color: #0052CC; }
      .rulesContainer .rulecards .cardInfo p .and {
        margin: 0 10px;
        font-style: normal; }
      .rulesContainer .rulecards .cardInfo p .notSetted {
        color: #B7B7B7;
        font-weight: 400;
        margin-left: 5px; }

.rulesContainer .zoneBasedRuleCard .cardHeader {
  background: #FDFBFF;
  border-bottom-color: #B300AE; }
  .rulesContainer .zoneBasedRuleCard .cardHeader h6 {
    color: #B300AE; }

.rulesContainer .zoneBasedRuleCard .cardInfo .infoGray {
  width: 13px;
  height: 13px;
  margin: 0 5px;
  background: url(../img/ch-info-gray-sm.svg) center center no-repeat;
  display: inline-block;
  background-size: contain; }
  .rulesContainer .zoneBasedRuleCard .cardInfo .infoGray .customTooltip {
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    white-space: nowrap;
    top: 30px;
    left: -20px;
    padding: 12px; }

.rulesContainer .lineBasedRuleCard .cardHeader {
  background: #F9FFFE;
  border-bottom-color: #159A86; }
  .rulesContainer .lineBasedRuleCard .cardHeader h6 {
    color: #159A86; }

.rulesContainer .lineBasedRuleCard .cardInfo p {
  margin-bottom: 35px;
  display: flex; }
  .rulesContainer .lineBasedRuleCard .cardInfo p strong {
    margin-right: 5px;
    align-items: flex-start; }
  .rulesContainer .lineBasedRuleCard .cardInfo p .classes {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    word-break: break-word; }

.lineBasedEditRuleModal .modal-header,
.zoneBasedEditRuleModal .modal-header,
.imageChatEditRuleModal .modal-header {
  border-bottom: none; }

.lineBasedEditRuleModal .modal-body,
.zoneBasedEditRuleModal .modal-body,
.imageChatEditRuleModal .modal-body {
  padding: 0;
  padding-top: 20px; }

.lineBasedEditRuleModal .nav-tabs,
.zoneBasedEditRuleModal .nav-tabs,
.imageChatEditRuleModal .nav-tabs {
  justify-content: space-evenly;
  border-bottom-color: #E0E0E0; }
  .lineBasedEditRuleModal .nav-tabs .nav-item,
  .zoneBasedEditRuleModal .nav-tabs .nav-item,
  .imageChatEditRuleModal .nav-tabs .nav-item {
    margin-bottom: 0; }
  .lineBasedEditRuleModal .nav-tabs .nav-link,
  .zoneBasedEditRuleModal .nav-tabs .nav-link,
  .imageChatEditRuleModal .nav-tabs .nav-link {
    border: none;
    border-radius: 10px 10px 0px 0px;
    background-color: #F7F7F7;
    color: #210835;
    font-size: 14px;
    font-weight: 400;
    min-width: 235px; }
  .lineBasedEditRuleModal .nav-tabs .nav-item.show .nav-link,
  .lineBasedEditRuleModal .nav-tabs .nav-link.active,
  .zoneBasedEditRuleModal .nav-tabs .nav-item.show .nav-link,
  .zoneBasedEditRuleModal .nav-tabs .nav-link.active,
  .imageChatEditRuleModal .nav-tabs .nav-item.show .nav-link,
  .imageChatEditRuleModal .nav-tabs .nav-link.active {
    color: #535353;
    background: #F5EBFF; }

.lineBasedEditRuleModal .tab-content,
.zoneBasedEditRuleModal .tab-content,
.imageChatEditRuleModal .tab-content {
  padding-top: 20px; }

.lineBasedEditRuleModal .infoGray,
.zoneBasedEditRuleModal .infoGray,
.imageChatEditRuleModal .infoGray {
  width: 13px;
  height: 13px;
  margin: 0 5px;
  background: url(../img/ch-info-gray-sm.svg) center center no-repeat;
  display: inline-block;
  background-size: contain; }

.lineBasedEditRuleModal .accordionTitle,
.zoneBasedEditRuleModal .accordionTitle,
.imageChatEditRuleModal .accordionTitle {
  position: relative; }
  .lineBasedEditRuleModal .accordionTitle:before,
  .zoneBasedEditRuleModal .accordionTitle:before,
  .imageChatEditRuleModal .accordionTitle:before {
    width: 25px;
    height: 25px;
    position: absolute;
    right: 0;
    bottom: 0;
    background: url(../img/up-arrow-light-gray.svg) center center no-repeat;
    content: '';
    cursor: pointer; }
  .lineBasedEditRuleModal .accordionTitle.down:before,
  .zoneBasedEditRuleModal .accordionTitle.down:before,
  .imageChatEditRuleModal .accordionTitle.down:before {
    background: url(../img/down-arrow-light-gray.svg) center center no-repeat; }

.lineBasedEditRuleModal .label,
.zoneBasedEditRuleModal .label,
.imageChatEditRuleModal .label {
  color: #210835;
  font-weight: 500;
  font-size: 14px;
  display: flex;
  align-items: center;
  padding-bottom: 4px; }

.lineBasedEditRuleModal .accordion,
.zoneBasedEditRuleModal .accordion,
.imageChatEditRuleModal .accordion {
  padding-top: 12px;
  width: 100%; }

.lineBasedEditRuleModal .accordionTitle,
.zoneBasedEditRuleModal .accordionTitle,
.imageChatEditRuleModal .accordionTitle {
  width: 100%;
  border-bottom: 1px solid #E5E5E5; }

.lineBasedEditRuleModal .accordionContent,
.zoneBasedEditRuleModal .accordionContent,
.imageChatEditRuleModal .accordionContent {
  padding-top: 18px; }
  .lineBasedEditRuleModal .accordionContent .form-group,
  .zoneBasedEditRuleModal .accordionContent .form-group,
  .imageChatEditRuleModal .accordionContent .form-group {
    width: 48%;
    display: inline-block; }
  .lineBasedEditRuleModal .accordionContent label,
  .zoneBasedEditRuleModal .accordionContent label,
  .imageChatEditRuleModal .accordionContent label {
    font-size: 14px;
    font-weight: 400;
    color: #303030;
    margin-bottom: 0; }
  .lineBasedEditRuleModal .accordionContent input[type="text"],
  .lineBasedEditRuleModal .accordionContent input[type="number"],
  .zoneBasedEditRuleModal .accordionContent input[type="text"],
  .zoneBasedEditRuleModal .accordionContent input[type="number"],
  .imageChatEditRuleModal .accordionContent input[type="text"],
  .imageChatEditRuleModal .accordionContent input[type="number"] {
    width: 100px !important;
    height: 36px !important;
    padding: 0 15px !important;
    font-weight: 500 !important; }
    .lineBasedEditRuleModal .accordionContent input[type="text"]:placeholder,
    .lineBasedEditRuleModal .accordionContent input[type="number"]:placeholder,
    .zoneBasedEditRuleModal .accordionContent input[type="text"]:placeholder,
    .zoneBasedEditRuleModal .accordionContent input[type="number"]:placeholder,
    .imageChatEditRuleModal .accordionContent input[type="text"]:placeholder,
    .imageChatEditRuleModal .accordionContent input[type="number"]:placeholder {
      color: #222222; }
  .lineBasedEditRuleModal .accordionContent .error,
  .zoneBasedEditRuleModal .accordionContent .error,
  .imageChatEditRuleModal .accordionContent .error {
    font-size: 14px;
    color: #EB5857;
    font-weight: 400;
    margin-bottom: 2px;
    white-space: nowrap; }

.anrBasedOnZoneModal .processHighlightBar span {
  line-height: 18px; }

.anrBasedOnZoneModal .zoneSelectionDropdown .dropdownItemList li.active,
.anrBasedOnZoneModal .zoneSelectionDropdown .dropdownItemList li:hover {
  background: #F9F2FF; }

.anrBasedOnZoneModal .searchZoneSelection {
  border: none !important; }

.anrBasedOnLogicModal .processHighlightBar,
.zoneBasedEditRuleModal #logic .processHighlightBar {
  margin-bottom: 20px; }

.anrBasedOnLogicModal .modal-body,
.zoneBasedEditRuleModal #logic .modal-body {
  padding-bottom: 48px; }
  .anrBasedOnLogicModal .modal-body .classGroupNote,
  .zoneBasedEditRuleModal #logic .modal-body .classGroupNote {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #535353;
    margin-bottom: 20px;
    position: relative;
    padding-left: 25px; }
    .anrBasedOnLogicModal .modal-body .classGroupNote .info,
    .zoneBasedEditRuleModal #logic .modal-body .classGroupNote .info {
      position: absolute;
      top: 2px;
      left: 0;
      margin: 0; }

.anrBasedOnLogicModal .info,
.zoneBasedEditRuleModal #logic .info {
  margin-left: 7px; }
  .anrBasedOnLogicModal .info .infoGray,
  .zoneBasedEditRuleModal #logic .info .infoGray {
    background: url(../img/ch-info-gray-sm.svg) center center no-repeat;
    background-size: contain; }
  .anrBasedOnLogicModal .info .customTooltip,
  .zoneBasedEditRuleModal #logic .info .customTooltip {
    top: 25px;
    left: -20px; }

.anrBasedOnLogicModal .label,
.zoneBasedEditRuleModal #logic .label {
  color: #210835;
  font-size: 14px;
  font-weight: 400;
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 2px; }

.anrBasedOnLogicModal .form-group,
.zoneBasedEditRuleModal #logic .form-group {
  margin-bottom: 20px;
  width: 47%; }
  .anrBasedOnLogicModal .form-group label,
  .zoneBasedEditRuleModal #logic .form-group label {
    color: #535353;
    font-size: 13px;
    font-weight: 400;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    width: 100%; }
  .anrBasedOnLogicModal .form-group.fullWidth,
  .zoneBasedEditRuleModal #logic .form-group.fullWidth {
    width: 100%; }
    .anrBasedOnLogicModal .form-group.fullWidth label,
    .zoneBasedEditRuleModal #logic .form-group.fullWidth label {
      color: #210835;
      font-size: 14px;
      font-weight: 400;
      margin-bottom: 5px; }
    .anrBasedOnLogicModal .form-group.fullWidth .customDropdown .itemBtn,
    .zoneBasedEditRuleModal #logic .form-group.fullWidth .customDropdown .itemBtn {
      background-position: 98% center; }

.anrBasedOnLogicModal .fieldArea,
.zoneBasedEditRuleModal #logic .fieldArea {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; }

.anrBasedOnLogicModal input[type="text"],
.anrBasedOnLogicModal input[type="number"],
.zoneBasedEditRuleModal #logic input[type="text"],
.zoneBasedEditRuleModal #logic input[type="number"] {
  background: #F7F7F7;
  border: 1px solid #EAEAEA;
  border-radius: 5px;
  width: 100%;
  height: 40px;
  padding-left: 10px;
  font-weight: 500; }

.anrBasedOnLogicModal input[type="number"].presenceCount,
.zoneBasedEditRuleModal #logic input[type="number"].presenceCount {
  height: 40px !important; }

.anrBasedOnLogicModal .customDropdown .itemBtn,
.zoneBasedEditRuleModal #logic .customDropdown .itemBtn {
  width: 100%;
  background-position: 96% center;
  background-color: #F7F7F7; }

.anrBasedOnLogicModal .customDropdown .dropdownItemList,
.zoneBasedEditRuleModal #logic .customDropdown .dropdownItemList {
  top: 40px;
  background-color: #F7F7F7; }
  .anrBasedOnLogicModal .customDropdown .dropdownItemList li a:hover,
  .zoneBasedEditRuleModal #logic .customDropdown .dropdownItemList li a:hover {
    background-color: #F9F2FF !important;
    color: #52575c !important; }
  .anrBasedOnLogicModal .customDropdown .dropdownItemList li.selected a,
  .zoneBasedEditRuleModal #logic .customDropdown .dropdownItemList li.selected a {
    background: #F9F2FF !important; }
  .anrBasedOnLogicModal .customDropdown .dropdownItemList li.active a,
  .zoneBasedEditRuleModal #logic .customDropdown .dropdownItemList li.active a {
    color: #52575c !important;
    background: #F9F2FF !important; }
  .anrBasedOnLogicModal .customDropdown .dropdownItemList .searchLineSelection,
  .anrBasedOnLogicModal .customDropdown .dropdownItemList .searchZoneSelection,
  .zoneBasedEditRuleModal #logic .customDropdown .dropdownItemList .searchLineSelection,
  .zoneBasedEditRuleModal #logic .customDropdown .dropdownItemList .searchZoneSelection {
    padding-left: 40px !important;
    color: #210835;
    background: transparent; }

.anrBasedOnLogicModal .timeIntervalGroup,
.zoneBasedEditRuleModal #logic .timeIntervalGroup {
  display: none;
  width: 100%; }
  .anrBasedOnLogicModal .timeIntervalGroup label,
  .zoneBasedEditRuleModal #logic .timeIntervalGroup label {
    font-size: 12px;
    font-weight: 400;
    color: #535353; }
  .anrBasedOnLogicModal .timeIntervalGroup .form-group,
  .zoneBasedEditRuleModal #logic .timeIntervalGroup .form-group {
    width: 50%;
    margin-top: 8px; }
  .anrBasedOnLogicModal .timeIntervalGroup .arrow,
  .zoneBasedEditRuleModal #logic .timeIntervalGroup .arrow {
    width: 24px;
    height: 90px;
    margin: 0 5px;
    background: url(../img/ch-arrow-black.svg) center center no-repeat; }
  .anrBasedOnLogicModal .timeIntervalGroup .customDropdown .itemBtn,
  .zoneBasedEditRuleModal #logic .timeIntervalGroup .customDropdown .itemBtn {
    color: #222222;
    font-size: 14px;
    font-weight: 500; }
  .anrBasedOnLogicModal .timeIntervalGroup .customDropdown .btnGroup,
  .zoneBasedEditRuleModal #logic .timeIntervalGroup .customDropdown .btnGroup {
    display: none;
    width: 100%;
    height: 36px;
    box-shadow: 0px 3px 5px rgba(44, 44, 44, 0.2), 0px 0px 1px rgba(44, 44, 44, 0.31);
    border-radius: 6px;
    overflow: hidden; }
    .anrBasedOnLogicModal .timeIntervalGroup .customDropdown .btnGroup button,
    .zoneBasedEditRuleModal #logic .timeIntervalGroup .customDropdown .btnGroup button {
      font-size: 14px;
      font-weight: 500;
      color: #535353;
      border-radius: 6px;
      border: none;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: 50%;
      height: 100%;
      background: #ffffff; }
      .anrBasedOnLogicModal .timeIntervalGroup .customDropdown .btnGroup button.selected,
      .zoneBasedEditRuleModal #logic .timeIntervalGroup .customDropdown .btnGroup button.selected {
        background-color: #8020CF;
        color: #ffffff; }
  .anrBasedOnLogicModal .timeIntervalGroup .customDropdown .dropdownItemList,
  .zoneBasedEditRuleModal #logic .timeIntervalGroup .customDropdown .dropdownItemList {
    top: 80px;
    background-color: #F7F7F7; }
    .anrBasedOnLogicModal .timeIntervalGroup .customDropdown .dropdownItemList .mCSB_container,
    .zoneBasedEditRuleModal #logic .timeIntervalGroup .customDropdown .dropdownItemList .mCSB_container {
      padding-bottom: 0; }
    .anrBasedOnLogicModal .timeIntervalGroup .customDropdown .dropdownItemList ul li a,
    .zoneBasedEditRuleModal #logic .timeIntervalGroup .customDropdown .dropdownItemList ul li a {
      color: #535353;
      font-size: 14px;
      font-weight: 500; }
    .anrBasedOnLogicModal .timeIntervalGroup .customDropdown .dropdownItemList li a:hover,
    .zoneBasedEditRuleModal #logic .timeIntervalGroup .customDropdown .dropdownItemList li a:hover {
      background-color: #F9F2FF !important;
      color: #52575c !important; }
    .anrBasedOnLogicModal .timeIntervalGroup .customDropdown .dropdownItemList li.selected a,
    .zoneBasedEditRuleModal #logic .timeIntervalGroup .customDropdown .dropdownItemList li.selected a {
      background: #F9F2FF !important; }
    .anrBasedOnLogicModal .timeIntervalGroup .customDropdown .dropdownItemList li.active a,
    .zoneBasedEditRuleModal #logic .timeIntervalGroup .customDropdown .dropdownItemList li.active a {
      color: #52575c !important;
      background: #F9F2FF !important; }
    .anrBasedOnLogicModal .timeIntervalGroup .customDropdown .dropdownItemList.show + .btnGroup,
    .zoneBasedEditRuleModal #logic .timeIntervalGroup .customDropdown .dropdownItemList.show + .btnGroup {
      display: flex; }

.anrBasedOnLogicModal .cctDropdown .dropdownItemList,
.zoneBasedEditRuleModal #logic .cctDropdown .dropdownItemList {
  background-color: #F7F7F7; }
  .anrBasedOnLogicModal .cctDropdown .dropdownItemList .arrow,
  .zoneBasedEditRuleModal #logic .cctDropdown .dropdownItemList .arrow {
    margin-right: 15px;
    width: 7px;
    background: url(../img/arrow.svg) 0 0 no-repeat;
    display: inline-block;
    line-height: 8px; }

.anrBasedOnLogicModal .classesGroup p.error,
.zoneBasedEditRuleModal #logic .classesGroup p.error {
  font-size: 14px;
  color: #EB5857;
  font-weight: 400;
  margin-bottom: 2px;
  white-space: nowrap; }

.anrBasedOnLogicModal .classesGroup input.error,
.zoneBasedEditRuleModal #logic .classesGroup input.error {
  border-color: #EB5857 !important; }

.imageChatZoneSelectionModal p.label {
  margin-bottom: 20px;
  color: #535353;
  font-size: 16px;
  font-weight: 400; }

.imageChatZoneSelectionModal .group {
  display: flex;
  justify-content: space-between; }

.imageChatZoneSelectionModal .prompt,
.imageChatZoneSelectionModal .zoneSelection {
  width: 50%; }
  .imageChatZoneSelectionModal .prompt h6,
  .imageChatZoneSelectionModal .zoneSelection h6 {
    margin-bottom: 14px;
    font-size: 16px;
    font-weight: 500; }

.imageChatZoneSelectionModal .zoneSelection .zoneSelectionDropdown_ {
  margin-bottom: 20px; }
  .imageChatZoneSelectionModal .zoneSelection .zoneSelectionDropdown_ .itemBtn {
    height: 30px;
    background-color: #F7F7F7; }
  .imageChatZoneSelectionModal .zoneSelection .zoneSelectionDropdown_ .dropdownItemList {
    top: 32px;
    background: #F7F7F7;
    box-shadow: 2px 5px 5px rgba(22, 22, 22, 0.08); }
    .imageChatZoneSelectionModal .zoneSelection .zoneSelectionDropdown_ .dropdownItemList label {
      padding: 10px 20px;
      margin-bottom: 0;
      font-size: 14px;
      font-weight: 500;
      color: #535353; }

.imageChatZoneSelectionModal .feildContainer {
  max-height: 420px;
  overflow: hidden; }
  .imageChatZoneSelectionModal .feildContainer .mCSB_container {
    padding-bottom: 200px; }
  .imageChatZoneSelectionModal .feildContainer .prompt label {
    width: 100%;
    height: 30px;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 400;
    color: #535353;
    white-space: nowrap;
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #535353;
    display: inline-block;
    line-height: 30px; }
  .imageChatZoneSelectionModal .feildContainer .checkbox.disable {
    opacity: 0.5;
    pointer-events: none; }
  .imageChatZoneSelectionModal .feildContainer .checkbox,
  .imageChatZoneSelectionModal .feildContainer .radiobox {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 400;
    color: #535353;
    cursor: pointer; }
    .imageChatZoneSelectionModal .feildContainer .checkbox input[type="checkbox"],
    .imageChatZoneSelectionModal .feildContainer .checkbox input[type="radio"],
    .imageChatZoneSelectionModal .feildContainer .radiobox input[type="checkbox"],
    .imageChatZoneSelectionModal .feildContainer .radiobox input[type="radio"] {
      width: 18px;
      height: 18px;
      background: #ffffff;
      border: 2px solid #878787;
      border-radius: 4px;
      margin-right: 10px;
      position: relative;
      appearance: none;
      -webkit-appearance: none; }
      .imageChatZoneSelectionModal .feildContainer .checkbox input[type="checkbox"]:checked,
      .imageChatZoneSelectionModal .feildContainer .checkbox input[type="radio"]:checked,
      .imageChatZoneSelectionModal .feildContainer .radiobox input[type="checkbox"]:checked,
      .imageChatZoneSelectionModal .feildContainer .radiobox input[type="radio"]:checked {
        background: #8020CF url(../img/ch-check-white.svg) center center no-repeat;
        border-color: #8020CF; }
      .imageChatZoneSelectionModal .feildContainer .checkbox input[type="checkbox"]:before,
      .imageChatZoneSelectionModal .feildContainer .checkbox input[type="radio"]:before,
      .imageChatZoneSelectionModal .feildContainer .radiobox input[type="checkbox"]:before,
      .imageChatZoneSelectionModal .feildContainer .radiobox input[type="radio"]:before {
        width: 10px;
        height: 10px;
        border-radius: 30px;
        position: absolute;
        top: 2px;
        left: 2px;
        content: ''; }
    .imageChatZoneSelectionModal .feildContainer .checkbox span,
    .imageChatZoneSelectionModal .feildContainer .radiobox span {
      white-space: nowrap;
      max-width: 90%;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #535353;
      display: inline-block; }
  .imageChatZoneSelectionModal .feildContainer .radiobox input[type="radio"] {
    border-radius: 50px;
    display: inline-block !important; }
    .imageChatZoneSelectionModal .feildContainer .radiobox input[type="radio"]:checked {
      background: #ffffff;
      border-color: #8020CF; }
    .imageChatZoneSelectionModal .feildContainer .radiobox input[type="radio"]:checked:before {
      background: #8020CF; }

.imageChatZoneSelectionModal .zoneSelection p {
  margin-bottom: 20px;
  color: #535353;
  font-size: 14px;
  font-weight: 400;
  display: flex;
  align-items: center; }
  .imageChatZoneSelectionModal .zoneSelection p i {
    color: #A5A5A5;
    margin-left: 5px; }
  .imageChatZoneSelectionModal .zoneSelection p span {
    white-space: nowrap;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block; }

.imageChatAdvanceSettingModal .recurringAlerts,
.imageChatAdvanceSettingModal .imageChatModelsAdd,
.imageChatAdvanceSettingModal .timeInterval {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  min-height: 50px;
  padding-left: 0;
  padding-right: 0; }
  .imageChatAdvanceSettingModal .recurringAlerts .group,
  .imageChatAdvanceSettingModal .imageChatModelsAdd .group,
  .imageChatAdvanceSettingModal .timeInterval .group {
    display: flex;
    width: 100%;
    border-bottom: 1px solid #E5E5E5;
    padding-bottom: 10px;
    margin-bottom: 20px; }
  .imageChatAdvanceSettingModal .recurringAlerts label,
  .imageChatAdvanceSettingModal .imageChatModelsAdd label,
  .imageChatAdvanceSettingModal .timeInterval label {
    color: #210835;
    font-size: 14px;
    font-weight: 400;
    color: #210835;
    margin: 0; }
    .imageChatAdvanceSettingModal .recurringAlerts label span,
    .imageChatAdvanceSettingModal .imageChatModelsAdd label span,
    .imageChatAdvanceSettingModal .timeInterval label span {
      color: #535353; }
  .imageChatAdvanceSettingModal .recurringAlerts .icon,
  .imageChatAdvanceSettingModal .imageChatModelsAdd .icon,
  .imageChatAdvanceSettingModal .timeInterval .icon {
    margin-left: 5px; }
  .imageChatAdvanceSettingModal .recurringAlerts .timeIntervalOptional,
  .imageChatAdvanceSettingModal .recurringAlerts .recurringAlertsUniqueObject,
  .imageChatAdvanceSettingModal .recurringAlerts .imageChatModelsAddOption,
  .imageChatAdvanceSettingModal .imageChatModelsAdd .timeIntervalOptional,
  .imageChatAdvanceSettingModal .imageChatModelsAdd .recurringAlertsUniqueObject,
  .imageChatAdvanceSettingModal .imageChatModelsAdd .imageChatModelsAddOption,
  .imageChatAdvanceSettingModal .timeInterval .timeIntervalOptional,
  .imageChatAdvanceSettingModal .timeInterval .recurringAlertsUniqueObject,
  .imageChatAdvanceSettingModal .timeInterval .imageChatModelsAddOption {
    margin-left: auto; }
  .imageChatAdvanceSettingModal .recurringAlerts .soOBtn,
  .imageChatAdvanceSettingModal .imageChatModelsAdd .soOBtn,
  .imageChatAdvanceSettingModal .timeInterval .soOBtn {
    margin-left: auto;
    display: inline-flex;
    align-items: center; }
    .imageChatAdvanceSettingModal .recurringAlerts .soOBtn span,
    .imageChatAdvanceSettingModal .imageChatModelsAdd .soOBtn span,
    .imageChatAdvanceSettingModal .timeInterval .soOBtn span {
      margin-right: 10px;
      color: #535353;
      font-size: 14px;
      font-weight: 400; }
    .imageChatAdvanceSettingModal .recurringAlerts .soOBtn input[type="checkbox"],
    .imageChatAdvanceSettingModal .imageChatModelsAdd .soOBtn input[type="checkbox"],
    .imageChatAdvanceSettingModal .timeInterval .soOBtn input[type="checkbox"] {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      width: 40px;
      height: 20px;
      border-radius: 20px;
      position: relative;
      background: #AAAAAA;
      display: inline-flex;
      align-items: center; }
      .imageChatAdvanceSettingModal .recurringAlerts .soOBtn input[type="checkbox"]:focus,
      .imageChatAdvanceSettingModal .imageChatModelsAdd .soOBtn input[type="checkbox"]:focus,
      .imageChatAdvanceSettingModal .timeInterval .soOBtn input[type="checkbox"]:focus {
        outline: none; }
      .imageChatAdvanceSettingModal .recurringAlerts .soOBtn input[type="checkbox"]:before,
      .imageChatAdvanceSettingModal .imageChatModelsAdd .soOBtn input[type="checkbox"]:before,
      .imageChatAdvanceSettingModal .timeInterval .soOBtn input[type="checkbox"]:before {
        width: 14px;
        height: 14px;
        border-radius: 30px;
        position: absolute;
        left: 2px;
        display: inline-block;
        content: '';
        background: #ffffff;
        cursor: pointer;
        transition: all 0.2s ease-in; }
      .imageChatAdvanceSettingModal .recurringAlerts .soOBtn input[type="checkbox"]:checked,
      .imageChatAdvanceSettingModal .imageChatModelsAdd .soOBtn input[type="checkbox"]:checked,
      .imageChatAdvanceSettingModal .timeInterval .soOBtn input[type="checkbox"]:checked {
        background: #8020CF; }
      .imageChatAdvanceSettingModal .recurringAlerts .soOBtn input[type="checkbox"]:checked:before,
      .imageChatAdvanceSettingModal .imageChatModelsAdd .soOBtn input[type="checkbox"]:checked:before,
      .imageChatAdvanceSettingModal .timeInterval .soOBtn input[type="checkbox"]:checked:before {
        left: 23px;
        background: #ffffff; }

.imageChatAdvanceSettingModal .timeIntervalGroup {
  display: none;
  width: 100%; }
  .imageChatAdvanceSettingModal .timeIntervalGroup label {
    font-size: 12px;
    font-weight: 400;
    color: #535353; }
  .imageChatAdvanceSettingModal .timeIntervalGroup .form-group {
    width: 50%; }
  .imageChatAdvanceSettingModal .timeIntervalGroup .arrow {
    width: 24px;
    height: 80px;
    margin: 0 5px;
    background: url(../img/ch-arrow-black.svg) center center no-repeat; }
  .imageChatAdvanceSettingModal .timeIntervalGroup .customDropdown .itemBtn {
    color: #222222;
    font-size: 14px;
    font-weight: 500; }
  .imageChatAdvanceSettingModal .timeIntervalGroup .customDropdown .btnGroup {
    display: none;
    width: 100%;
    height: 36px;
    box-shadow: 0px 3px 5px rgba(44, 44, 44, 0.2), 0px 0px 1px rgba(44, 44, 44, 0.31);
    border-radius: 6px;
    overflow: hidden; }
    .imageChatAdvanceSettingModal .timeIntervalGroup .customDropdown .btnGroup button {
      font-size: 14px;
      font-weight: 500;
      color: #535353;
      border-radius: 6px;
      border: none;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: 50%;
      height: 100%;
      background: #ffffff; }
      .imageChatAdvanceSettingModal .timeIntervalGroup .customDropdown .btnGroup button.selected {
        background-color: #8020CF;
        color: #ffffff; }
  .imageChatAdvanceSettingModal .timeIntervalGroup .customDropdown .dropdownItemList {
    top: 80px;
    background-color: #F7F7F7; }
    .imageChatAdvanceSettingModal .timeIntervalGroup .customDropdown .dropdownItemList .mCSB_container {
      padding-bottom: 0; }
    .imageChatAdvanceSettingModal .timeIntervalGroup .customDropdown .dropdownItemList ul li a {
      color: #535353;
      font-size: 14px;
      font-weight: 500; }
    .imageChatAdvanceSettingModal .timeIntervalGroup .customDropdown .dropdownItemList li a:hover {
      background-color: #F9F2FF !important;
      color: #52575c !important; }
    .imageChatAdvanceSettingModal .timeIntervalGroup .customDropdown .dropdownItemList li.selected a {
      background: #F9F2FF !important; }
    .imageChatAdvanceSettingModal .timeIntervalGroup .customDropdown .dropdownItemList li.active a {
      color: #52575c !important;
      background: #F9F2FF !important; }
    .imageChatAdvanceSettingModal .timeIntervalGroup .customDropdown .dropdownItemList.show + .btnGroup {
      display: flex; }

.imgChatModelSelect {
  display: none;
  width: 100%;
  margin-top: 20px; }
  .imgChatModelSelect .form-group {
    width: 100% !important; }

.zoneBasedEditRuleModal .input[type="text"],
.zoneBasedEditRuleModal .inputText,
.imageChatEditRuleModal .input[type="text"],
.imageChatEditRuleModal .inputText {
  font-weight: 500; }

.zoneBasedEditRuleModal .zoneSelectionDropdown .itemBtn,
.imageChatEditRuleModal .zoneSelectionDropdown .itemBtn {
  font-weight: 500; }

.zoneBasedEditRuleModal #classgroup .fieldArea,
.imageChatEditRuleModal #classgroup .fieldArea {
  max-width: 613px; }

.zoneBasedEditRuleModal #classgroup .checkboxInfo,
.imageChatEditRuleModal #classgroup .checkboxInfo {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: inline-block; }

.zoneBasedEditRuleModal #classgroup i.models,
.imageChatEditRuleModal #classgroup i.models {
  color: #A5A5A5;
  margin-left: 4px;
  font-weight: 400;
  max-width: 190px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden; }

.zoneBasedEditRuleModal #classgroup .classGroupNote,
.imageChatEditRuleModal #classgroup .classGroupNote {
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #535353;
  margin-bottom: 28px;
  position: relative;
  padding-left: 25px; }
  .zoneBasedEditRuleModal #classgroup .classGroupNote span,
  .imageChatEditRuleModal #classgroup .classGroupNote span {
    color: #8020CF;
    font-weight: 600; }

.zoneBasedEditRuleModal #classgroup .tab-content,
.imageChatEditRuleModal #classgroup .tab-content {
  padding-top: 20px;
  padding-bottom: 20px; }

.zoneBasedEditRuleModal #classgroup .info,
.imageChatEditRuleModal #classgroup .info {
  position: absolute;
  top: 3px;
  left: 0;
  margin: 0; }

.zoneBasedEditRuleModal #classgroup .selectClassSearch,
.imageChatEditRuleModal #classgroup .selectClassSearch {
  margin-bottom: 25px;
  border: 0;
  width: 100%;
  box-shadow: 0px 2px 5px rgba(40, 40, 40, 0.1);
  border-radius: 4px;
  justify-content: flex-start; }
  .zoneBasedEditRuleModal #classgroup .selectClassSearch .searchClass,
  .imageChatEditRuleModal #classgroup .selectClassSearch .searchClass {
    font-size: 14px;
    font-weight: 400;
    border: 0;
    box-shadow: none;
    color: #535353;
    height: 26px;
    width: 100%;
    padding: 0 10px 0 0;
    display: inline-flex;
    background: transparent; }
  .zoneBasedEditRuleModal #classgroup .selectClassSearch .easy-autocomplete-container,
  .imageChatEditRuleModal #classgroup .selectClassSearch .easy-autocomplete-container {
    width: 569px !important;
    left: -40px; }

.zoneBasedEditRuleModal .overflowContainer
.overflowContainerData,
.zoneBasedEditRuleModal .overflowScrollingContainer,
.imageChatEditRuleModal .overflowContainer
.overflowContainerData,
.imageChatEditRuleModal .overflowScrollingContainer {
  max-height: 400px;
  overflow: hidden;
  margin-bottom: 10px; }
  .zoneBasedEditRuleModal .overflowContainer
.overflowContainerData .mCSB_container,
  .zoneBasedEditRuleModal .overflowScrollingContainer .mCSB_container,
  .imageChatEditRuleModal .overflowContainer
.overflowContainerData .mCSB_container,
  .imageChatEditRuleModal .overflowScrollingContainer .mCSB_container {
    padding: 1px 1px 50px 1px; }

.zoneBasedEditRuleModal .accordionTitle,
.imageChatEditRuleModal .accordionTitle {
  width: 100%;
  border-bottom: 1px solid #E5E5E5;
  position: relative;
  font-weight: 500; }
  .zoneBasedEditRuleModal .accordionTitle:before,
  .imageChatEditRuleModal .accordionTitle:before {
    width: 25px;
    height: 25px;
    position: absolute;
    right: 0;
    bottom: 0;
    background: url(../img/up-arrow-light-gray.svg) center center no-repeat;
    content: '';
    cursor: pointer; }
  .zoneBasedEditRuleModal .accordionTitle.down,
  .imageChatEditRuleModal .accordionTitle.down {
    font-weight: 400; }
    .zoneBasedEditRuleModal .accordionTitle.down:before,
    .imageChatEditRuleModal .accordionTitle.down:before {
      background: url(../img/down-arrow-light-gray.svg) center center no-repeat; }

.zoneBasedEditRuleModal .group,
.imageChatEditRuleModal .group {
  display: none;
  margin-top: 10px;
  margin-bottom: 20px; }

.zoneBasedEditRuleModal .accordionContent,
.imageChatEditRuleModal .accordionContent {
  padding-top: 18px; }
  .zoneBasedEditRuleModal .accordionContent.open,
  .imageChatEditRuleModal .accordionContent.open {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; }

.zoneBasedEditRuleModal .mCSB_container,
.imageChatEditRuleModal .mCSB_container {
  padding: 1px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; }

.zoneBasedEditRuleModal .checkbox,
.imageChatEditRuleModal .checkbox {
  width: auto !important;
  margin: 0;
  font-weight: normal;
  font-size: 15px;
  color: #595959;
  cursor: pointer;
  display: inline-flex;
  justify-content: flex-start;
  align-items: flex-start;
  line-height: 16px; }
  .zoneBasedEditRuleModal .checkbox input[type='checkbox'],
  .imageChatEditRuleModal .checkbox input[type='checkbox'] {
    display: none; }
  .zoneBasedEditRuleModal .checkbox .checkboxSpan,
  .imageChatEditRuleModal .checkbox .checkboxSpan {
    border: 2px solid #878787;
    min-width: 18px;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    margin-right: 10px;
    background: #ffffff;
    background: #fff;
    word-break: break-all;
    word-wrap: anywhere; }
  .zoneBasedEditRuleModal .checkbox input[type='checkbox']:checked + .checkboxSpan,
  .imageChatEditRuleModal .checkbox input[type='checkbox']:checked + .checkboxSpan {
    background: url(../img/ch-check-white.svg) center center no-repeat;
    background-color: #8020CF;
    background-size: 12px;
    border-radius: 4px;
    border-color: #8020CF; }

.zoneBasedEditRuleModal .form-group,
.imageChatEditRuleModal .form-group {
  position: relative;
  margin-bottom: 20px; }
  .zoneBasedEditRuleModal .form-group label,
  .imageChatEditRuleModal .form-group label {
    width: 100%;
    font-size: 16px;
    color: #303030;
    font-weight: 500;
    font-size: 16px;
    display: flex;
    align-items: center; }
  .zoneBasedEditRuleModal .form-group label.inline,
  .imageChatEditRuleModal .form-group label.inline {
    width: auto;
    margin-bottom: 0; }
  .zoneBasedEditRuleModal .form-group label.checkbox,
  .imageChatEditRuleModal .form-group label.checkbox {
    font-size: 14px;
    font-weight: 400;
    color: #535353;
    align-items: center;
    white-space: nowrap; }
  .zoneBasedEditRuleModal .form-group input[type="text"],
  .zoneBasedEditRuleModal .form-group input[type="number"],
  .imageChatEditRuleModal .form-group input[type="text"],
  .imageChatEditRuleModal .form-group input[type="number"] {
    background: #F7F7F7;
    border: 1px solid #E0E0E0;
    box-sizing: border-box;
    border-radius: 5px;
    width: 100%;
    height: 50px;
    padding: 0 15px;
    color: #210835;
    font-size: 14px; }
    .zoneBasedEditRuleModal .form-group input[type="text"]:focus,
    .zoneBasedEditRuleModal .form-group input[type="number"]:focus,
    .imageChatEditRuleModal .form-group input[type="text"]:focus,
    .imageChatEditRuleModal .form-group input[type="number"]:focus {
      color: #210835; }
  .zoneBasedEditRuleModal .form-group .countRule,
  .imageChatEditRuleModal .form-group .countRule {
    height: 40px !important; }
  .zoneBasedEditRuleModal .form-group h6,
  .imageChatEditRuleModal .form-group h6 {
    font-weight: 500;
    font-size: 18px;
    line-height: 20px;
    color: #535353; }
  .zoneBasedEditRuleModal .form-group .info .icon,
  .imageChatEditRuleModal .form-group .info .icon {
    width: 18px;
    height: 18px;
    background-size: 18px; }

.zoneBasedEditRuleModal p,
.imageChatEditRuleModal p {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #535353;
  margin-bottom: 10px; }
  .zoneBasedEditRuleModal p .viewMore,
  .imageChatEditRuleModal p .viewMore {
    font-size: 14px;
    font-weight: 400;
    color: #8020CF;
    position: relative;
    padding-right: 20px;
    width: 100px;
    display: inline-block;
    white-space: nowrap; }
    .zoneBasedEditRuleModal p .viewMore:before,
    .imageChatEditRuleModal p .viewMore:before {
      position: absolute;
      right: 0;
      bottom: 2px;
      content: 'View More';
      width: 100%;
      height: 20px;
      background: url(../img/ch-plus-purple.svg) 80px 2px no-repeat; }
    .zoneBasedEditRuleModal p .viewMore.less:before,
    .imageChatEditRuleModal p .viewMore.less:before {
      content: 'View Less';
      background: url(../img/ch-minus-purple.svg) 80px 10px no-repeat;
      bottom: 1px; }

.zoneBasedEditRuleModal .fieldArea,
.imageChatEditRuleModal .fieldArea {
  max-width: 550px; }
  .zoneBasedEditRuleModal .fieldArea.mCustomScrollbar,
  .imageChatEditRuleModal .fieldArea.mCustomScrollbar {
    height: 500px;
    overflow: hidden; }

.zoneBasedEditRuleModal .class-group-name,
.imageChatEditRuleModal .class-group-name {
  color: #303030;
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 10px; }
  .zoneBasedEditRuleModal .class-group-name span,
  .imageChatEditRuleModal .class-group-name span {
    color: #4E4576;
    font-weight: 500;
    margin-left: 2px; }

.zoneBasedEditRuleModal #logic .fieldArea,
.imageChatEditRuleModal #logic .fieldArea {
  max-width: 100%;
  padding-left: 100px;
  padding-right: 20px; }

.zoneBasedEditRuleModal #logic .mCSB_container,
.imageChatEditRuleModal #logic .mCSB_container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-right: 80px;
  padding-left: 20px;
  padding-bottom: 150px; }

.zoneBasedEditRuleModal #logic.accordionTitle,
.imageChatEditRuleModal #logic.accordionTitle {
  font-weight: 500; }

.zoneBasedEditRuleModal #logic.down,
.imageChatEditRuleModal #logic.down {
  font-weight: 400; }

.zoneBasedEditRuleModal .form-group,
.imageChatEditRuleModal .form-group {
  margin-bottom: 20px;
  width: 100%; }
  .zoneBasedEditRuleModal .form-group .mCSB_container,
  .imageChatEditRuleModal .form-group .mCSB_container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 150px; }
  .zoneBasedEditRuleModal .form-group .accordionContent .form-group input[type="text"],
  .zoneBasedEditRuleModal .form-group .accordionContent .form-group input[type="number"],
  .imageChatEditRuleModal .form-group .accordionContent .form-group input[type="text"],
  .imageChatEditRuleModal .form-group .accordionContent .form-group input[type="number"] {
    width: 100px;
    height: 36px;
    padding: 0 10px;
    font-size: 14px;
    font-weight: 500;
    color: #222222; }

.zoneBasedEditRuleModal .actionsBar,
.imageChatEditRuleModal .actionsBar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px; }
  .zoneBasedEditRuleModal .actionsBar .enterValue,
  .imageChatEditRuleModal .actionsBar .enterValue {
    width: 110px !important;
    height: 36px !important;
    font-weight: 400 !important;
    color: #222222 !important;
    padding: 0 10px !important; }
  .zoneBasedEditRuleModal .actionsBar .applyAllBtn,
  .imageChatEditRuleModal .actionsBar .applyAllBtn {
    min-width: 80px;
    height: 36px;
    border: 1px solid #8020CF;
    border-radius: 5px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: 400;
    color: #8020CF;
    background: transparent;
    margin-left: 3px; }
    .zoneBasedEditRuleModal .actionsBar .applyAllBtn:disabled,
    .imageChatEditRuleModal .actionsBar .applyAllBtn:disabled {
      border-color: #E0E0E0;
      color: #B7B7B7; }
  .zoneBasedEditRuleModal .actionsBar .resetLink,
  .imageChatEditRuleModal .actionsBar .resetLink {
    text-decoration: underline;
    text-underline-offset: 2px;
    color: #8020CF;
    font-size: 14px;
    font-weight: 400; }
  .zoneBasedEditRuleModal .actionsBar .form-group,
  .imageChatEditRuleModal .actionsBar .form-group {
    display: inline-flex;
    margin-bottom: 0 !important; }

.zoneBasedEditRuleModal .recurringAlerts,
.zoneBasedEditRuleModal .timeInterval,
.zoneBasedEditRuleModal .imageChatModelsAdd,
.imageChatEditRuleModal .recurringAlerts,
.imageChatEditRuleModal .timeInterval,
.imageChatEditRuleModal .imageChatModelsAdd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  min-height: 50px;
  padding-left: 0;
  padding-right: 0;
  border-bottom: 1px solid #E5E5E5; }
  .zoneBasedEditRuleModal .recurringAlerts label,
  .zoneBasedEditRuleModal .timeInterval label,
  .zoneBasedEditRuleModal .imageChatModelsAdd label,
  .imageChatEditRuleModal .recurringAlerts label,
  .imageChatEditRuleModal .timeInterval label,
  .imageChatEditRuleModal .imageChatModelsAdd label {
    color: #210835;
    font-size: 14px;
    font-weight: 400;
    color: #210835;
    margin: 0; }
    .zoneBasedEditRuleModal .recurringAlerts label span,
    .zoneBasedEditRuleModal .timeInterval label span,
    .zoneBasedEditRuleModal .imageChatModelsAdd label span,
    .imageChatEditRuleModal .recurringAlerts label span,
    .imageChatEditRuleModal .timeInterval label span,
    .imageChatEditRuleModal .imageChatModelsAdd label span {
      color: #535353; }
  .zoneBasedEditRuleModal .recurringAlerts .icon,
  .zoneBasedEditRuleModal .timeInterval .icon,
  .zoneBasedEditRuleModal .imageChatModelsAdd .icon,
  .imageChatEditRuleModal .recurringAlerts .icon,
  .imageChatEditRuleModal .timeInterval .icon,
  .imageChatEditRuleModal .imageChatModelsAdd .icon {
    margin-left: 5px; }
  .zoneBasedEditRuleModal .recurringAlerts .timeIntervalOptional,
  .zoneBasedEditRuleModal .recurringAlerts .recurringAlertsUniqueObject,
  .zoneBasedEditRuleModal .recurringAlerts .imageChatModelsAddOption,
  .zoneBasedEditRuleModal .timeInterval .timeIntervalOptional,
  .zoneBasedEditRuleModal .timeInterval .recurringAlertsUniqueObject,
  .zoneBasedEditRuleModal .timeInterval .imageChatModelsAddOption,
  .zoneBasedEditRuleModal .imageChatModelsAdd .timeIntervalOptional,
  .zoneBasedEditRuleModal .imageChatModelsAdd .recurringAlertsUniqueObject,
  .zoneBasedEditRuleModal .imageChatModelsAdd .imageChatModelsAddOption,
  .imageChatEditRuleModal .recurringAlerts .timeIntervalOptional,
  .imageChatEditRuleModal .recurringAlerts .recurringAlertsUniqueObject,
  .imageChatEditRuleModal .recurringAlerts .imageChatModelsAddOption,
  .imageChatEditRuleModal .timeInterval .timeIntervalOptional,
  .imageChatEditRuleModal .timeInterval .recurringAlertsUniqueObject,
  .imageChatEditRuleModal .timeInterval .imageChatModelsAddOption,
  .imageChatEditRuleModal .imageChatModelsAdd .timeIntervalOptional,
  .imageChatEditRuleModal .imageChatModelsAdd .recurringAlertsUniqueObject,
  .imageChatEditRuleModal .imageChatModelsAdd .imageChatModelsAddOption {
    margin-left: auto; }
  .zoneBasedEditRuleModal .recurringAlerts .soOBtn,
  .zoneBasedEditRuleModal .timeInterval .soOBtn,
  .zoneBasedEditRuleModal .imageChatModelsAdd .soOBtn,
  .imageChatEditRuleModal .recurringAlerts .soOBtn,
  .imageChatEditRuleModal .timeInterval .soOBtn,
  .imageChatEditRuleModal .imageChatModelsAdd .soOBtn {
    margin-left: auto;
    display: inline-flex;
    align-items: center; }
    .zoneBasedEditRuleModal .recurringAlerts .soOBtn span,
    .zoneBasedEditRuleModal .timeInterval .soOBtn span,
    .zoneBasedEditRuleModal .imageChatModelsAdd .soOBtn span,
    .imageChatEditRuleModal .recurringAlerts .soOBtn span,
    .imageChatEditRuleModal .timeInterval .soOBtn span,
    .imageChatEditRuleModal .imageChatModelsAdd .soOBtn span {
      margin-right: 10px;
      color: #535353;
      font-size: 14px;
      font-weight: 400; }
    .zoneBasedEditRuleModal .recurringAlerts .soOBtn input[type="checkbox"],
    .zoneBasedEditRuleModal .timeInterval .soOBtn input[type="checkbox"],
    .zoneBasedEditRuleModal .imageChatModelsAdd .soOBtn input[type="checkbox"],
    .imageChatEditRuleModal .recurringAlerts .soOBtn input[type="checkbox"],
    .imageChatEditRuleModal .timeInterval .soOBtn input[type="checkbox"],
    .imageChatEditRuleModal .imageChatModelsAdd .soOBtn input[type="checkbox"] {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      width: 40px;
      height: 20px;
      border-radius: 20px;
      position: relative;
      background: #AAAAAA;
      display: inline-flex;
      align-items: center; }
      .zoneBasedEditRuleModal .recurringAlerts .soOBtn input[type="checkbox"]:focus,
      .zoneBasedEditRuleModal .timeInterval .soOBtn input[type="checkbox"]:focus,
      .zoneBasedEditRuleModal .imageChatModelsAdd .soOBtn input[type="checkbox"]:focus,
      .imageChatEditRuleModal .recurringAlerts .soOBtn input[type="checkbox"]:focus,
      .imageChatEditRuleModal .timeInterval .soOBtn input[type="checkbox"]:focus,
      .imageChatEditRuleModal .imageChatModelsAdd .soOBtn input[type="checkbox"]:focus {
        outline: none; }
      .zoneBasedEditRuleModal .recurringAlerts .soOBtn input[type="checkbox"]:before,
      .zoneBasedEditRuleModal .timeInterval .soOBtn input[type="checkbox"]:before,
      .zoneBasedEditRuleModal .imageChatModelsAdd .soOBtn input[type="checkbox"]:before,
      .imageChatEditRuleModal .recurringAlerts .soOBtn input[type="checkbox"]:before,
      .imageChatEditRuleModal .timeInterval .soOBtn input[type="checkbox"]:before,
      .imageChatEditRuleModal .imageChatModelsAdd .soOBtn input[type="checkbox"]:before {
        width: 14px;
        height: 14px;
        border-radius: 30px;
        position: absolute;
        left: 2px;
        display: inline-block;
        content: '';
        background: #ffffff;
        cursor: pointer;
        transition: all 0.2s ease-in; }
      .zoneBasedEditRuleModal .recurringAlerts .soOBtn input[type="checkbox"]:checked,
      .zoneBasedEditRuleModal .timeInterval .soOBtn input[type="checkbox"]:checked,
      .zoneBasedEditRuleModal .imageChatModelsAdd .soOBtn input[type="checkbox"]:checked,
      .imageChatEditRuleModal .recurringAlerts .soOBtn input[type="checkbox"]:checked,
      .imageChatEditRuleModal .timeInterval .soOBtn input[type="checkbox"]:checked,
      .imageChatEditRuleModal .imageChatModelsAdd .soOBtn input[type="checkbox"]:checked {
        background: #8020CF; }
      .zoneBasedEditRuleModal .recurringAlerts .soOBtn input[type="checkbox"]:checked:before,
      .zoneBasedEditRuleModal .timeInterval .soOBtn input[type="checkbox"]:checked:before,
      .zoneBasedEditRuleModal .imageChatModelsAdd .soOBtn input[type="checkbox"]:checked:before,
      .imageChatEditRuleModal .recurringAlerts .soOBtn input[type="checkbox"]:checked:before,
      .imageChatEditRuleModal .timeInterval .soOBtn input[type="checkbox"]:checked:before,
      .imageChatEditRuleModal .imageChatModelsAdd .soOBtn input[type="checkbox"]:checked:before {
        left: 23px;
        background: #ffffff; }
  .zoneBasedEditRuleModal .recurringAlerts .customTooltip,
  .zoneBasedEditRuleModal .timeInterval .customTooltip,
  .zoneBasedEditRuleModal .imageChatModelsAdd .customTooltip,
  .imageChatEditRuleModal .recurringAlerts .customTooltip,
  .imageChatEditRuleModal .timeInterval .customTooltip,
  .imageChatEditRuleModal .imageChatModelsAdd .customTooltip {
    left: 0;
    width: 300px;
    height: auto;
    word-break: break-word;
    white-space: normal; }

.zoneBasedEditRuleModal .timeIntervalGroup,
.imageChatEditRuleModal .timeIntervalGroup {
  display: none;
  width: 100%; }
  .zoneBasedEditRuleModal .timeIntervalGroup label,
  .imageChatEditRuleModal .timeIntervalGroup label {
    font-size: 12px;
    font-weight: 400;
    color: #535353; }
  .zoneBasedEditRuleModal .timeIntervalGroup .form-group,
  .imageChatEditRuleModal .timeIntervalGroup .form-group {
    width: 50%;
    margin-top: 8px; }
  .zoneBasedEditRuleModal .timeIntervalGroup .arrow,
  .imageChatEditRuleModal .timeIntervalGroup .arrow {
    width: 24px;
    height: 90px;
    margin: 0 5px;
    background: url(../img/ch-arrow-black.svg) center center no-repeat; }
  .zoneBasedEditRuleModal .timeIntervalGroup .customDropdown .itemBtn,
  .imageChatEditRuleModal .timeIntervalGroup .customDropdown .itemBtn {
    color: #222222;
    font-size: 14px;
    font-weight: 500; }
  .zoneBasedEditRuleModal .timeIntervalGroup .customDropdown .btnGroup,
  .imageChatEditRuleModal .timeIntervalGroup .customDropdown .btnGroup {
    display: none;
    width: 100%;
    height: 36px;
    box-shadow: 0px 3px 5px rgba(44, 44, 44, 0.2), 0px 0px 1px rgba(44, 44, 44, 0.31);
    border-radius: 6px;
    overflow: hidden; }
    .zoneBasedEditRuleModal .timeIntervalGroup .customDropdown .btnGroup button,
    .imageChatEditRuleModal .timeIntervalGroup .customDropdown .btnGroup button {
      font-size: 14px;
      font-weight: 500;
      color: #535353;
      border-radius: 6px;
      border: none;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: 50%;
      height: 100%;
      background: #ffffff; }
      .zoneBasedEditRuleModal .timeIntervalGroup .customDropdown .btnGroup button.selected,
      .imageChatEditRuleModal .timeIntervalGroup .customDropdown .btnGroup button.selected {
        background-color: #8020CF;
        color: #ffffff; }
  .zoneBasedEditRuleModal .timeIntervalGroup .customDropdown .dropdownItemList,
  .imageChatEditRuleModal .timeIntervalGroup .customDropdown .dropdownItemList {
    top: 80px !important;
    background-color: #F7F7F7; }
    .zoneBasedEditRuleModal .timeIntervalGroup .customDropdown .dropdownItemList .mCSB_container,
    .imageChatEditRuleModal .timeIntervalGroup .customDropdown .dropdownItemList .mCSB_container {
      padding-bottom: 0 !important; }
    .zoneBasedEditRuleModal .timeIntervalGroup .customDropdown .dropdownItemList ul li a,
    .imageChatEditRuleModal .timeIntervalGroup .customDropdown .dropdownItemList ul li a {
      color: #535353;
      font-size: 14px;
      font-weight: 500; }
    .zoneBasedEditRuleModal .timeIntervalGroup .customDropdown .dropdownItemList.show + .btnGroup,
    .imageChatEditRuleModal .timeIntervalGroup .customDropdown .dropdownItemList.show + .btnGroup {
      display: flex; }

.anrBasedOnLogicModal .fieldArea {
  max-width: 100%; }
  .anrBasedOnLogicModal .fieldArea.mCustomScrollbar {
    overflow: hidden;
    max-height: 550px; }
  .anrBasedOnLogicModal .fieldArea .mCSB_container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-right: 20px;
    padding-bottom: 150px;
    padding-left: 5px; }

.anrBasedOnLogicModal .customDropdown .dropdownItemList .mCSB_container {
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0; }

.anrBasedOnLogicModal .recurringAlerts,
.anrBasedOnLogicModal .timeInterval,
.anrBasedOnLogicModal .imageChatModelsAdd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  min-height: 50px;
  padding-left: 0;
  padding-right: 0;
  border-bottom: 1px solid #E5E5E5; }
  .anrBasedOnLogicModal .recurringAlerts label,
  .anrBasedOnLogicModal .timeInterval label,
  .anrBasedOnLogicModal .imageChatModelsAdd label {
    color: #210835;
    font-size: 14px;
    font-weight: 400;
    color: #210835;
    margin: 0; }
    .anrBasedOnLogicModal .recurringAlerts label span,
    .anrBasedOnLogicModal .timeInterval label span,
    .anrBasedOnLogicModal .imageChatModelsAdd label span {
      color: #535353; }
  .anrBasedOnLogicModal .recurringAlerts .icon,
  .anrBasedOnLogicModal .timeInterval .icon,
  .anrBasedOnLogicModal .imageChatModelsAdd .icon {
    margin-left: 5px; }
  .anrBasedOnLogicModal .recurringAlerts .customTooltip,
  .anrBasedOnLogicModal .timeInterval .customTooltip,
  .anrBasedOnLogicModal .imageChatModelsAdd .customTooltip {
    white-space: normal;
    width: 380px; }
  .anrBasedOnLogicModal .recurringAlerts .timeIntervalOptional,
  .anrBasedOnLogicModal .recurringAlerts .recurringAlertsUniqueObject,
  .anrBasedOnLogicModal .recurringAlerts .imageChatModelsAddOption,
  .anrBasedOnLogicModal .timeInterval .timeIntervalOptional,
  .anrBasedOnLogicModal .timeInterval .recurringAlertsUniqueObject,
  .anrBasedOnLogicModal .timeInterval .imageChatModelsAddOption,
  .anrBasedOnLogicModal .imageChatModelsAdd .timeIntervalOptional,
  .anrBasedOnLogicModal .imageChatModelsAdd .recurringAlertsUniqueObject,
  .anrBasedOnLogicModal .imageChatModelsAdd .imageChatModelsAddOption {
    margin-left: auto; }
  .anrBasedOnLogicModal .recurringAlerts .soOBtn,
  .anrBasedOnLogicModal .timeInterval .soOBtn,
  .anrBasedOnLogicModal .imageChatModelsAdd .soOBtn {
    margin-left: auto;
    display: inline-flex;
    align-items: center; }
    .anrBasedOnLogicModal .recurringAlerts .soOBtn span,
    .anrBasedOnLogicModal .timeInterval .soOBtn span,
    .anrBasedOnLogicModal .imageChatModelsAdd .soOBtn span {
      margin-right: 10px;
      color: #535353;
      font-size: 14px;
      font-weight: 400; }
    .anrBasedOnLogicModal .recurringAlerts .soOBtn input[type="checkbox"],
    .anrBasedOnLogicModal .timeInterval .soOBtn input[type="checkbox"],
    .anrBasedOnLogicModal .imageChatModelsAdd .soOBtn input[type="checkbox"] {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      width: 40px;
      height: 20px;
      border-radius: 20px;
      position: relative;
      background: #AAAAAA;
      display: inline-flex;
      align-items: center; }
      .anrBasedOnLogicModal .recurringAlerts .soOBtn input[type="checkbox"]:focus,
      .anrBasedOnLogicModal .timeInterval .soOBtn input[type="checkbox"]:focus,
      .anrBasedOnLogicModal .imageChatModelsAdd .soOBtn input[type="checkbox"]:focus {
        outline: none; }
      .anrBasedOnLogicModal .recurringAlerts .soOBtn input[type="checkbox"]:before,
      .anrBasedOnLogicModal .timeInterval .soOBtn input[type="checkbox"]:before,
      .anrBasedOnLogicModal .imageChatModelsAdd .soOBtn input[type="checkbox"]:before {
        width: 14px;
        height: 14px;
        border-radius: 30px;
        position: absolute;
        left: 2px;
        display: inline-block;
        content: '';
        background: #ffffff;
        cursor: pointer;
        transition: all 0.2s ease-in; }
      .anrBasedOnLogicModal .recurringAlerts .soOBtn input[type="checkbox"]:checked,
      .anrBasedOnLogicModal .timeInterval .soOBtn input[type="checkbox"]:checked,
      .anrBasedOnLogicModal .imageChatModelsAdd .soOBtn input[type="checkbox"]:checked {
        background: #8020CF; }
      .anrBasedOnLogicModal .recurringAlerts .soOBtn input[type="checkbox"]:checked:before,
      .anrBasedOnLogicModal .timeInterval .soOBtn input[type="checkbox"]:checked:before,
      .anrBasedOnLogicModal .imageChatModelsAdd .soOBtn input[type="checkbox"]:checked:before {
        left: 23px;
        background: #ffffff; }

.anrBasedOnLogicModal .timeIntervalGroup {
  display: none;
  width: 100%; }
  .anrBasedOnLogicModal .timeIntervalGroup label {
    font-size: 12px;
    font-weight: 400;
    color: #535353; }
  .anrBasedOnLogicModal .timeIntervalGroup .form-group {
    width: 50%;
    margin-top: 8px; }

.anrBasedOnLogicModal .customDropdown .itemBtn {
  color: #222222;
  font-size: 14px;
  font-weight: 500; }

.anrBasedOnLogicModal .customDropdown .btnGroup {
  display: none;
  width: 100%;
  height: 36px;
  box-shadow: 0px 3px 5px rgba(44, 44, 44, 0.2), 0px 0px 1px rgba(44, 44, 44, 0.31);
  border-radius: 6px;
  overflow: hidden; }
  .anrBasedOnLogicModal .customDropdown .btnGroup button {
    font-size: 14px;
    font-weight: 500;
    color: #535353;
    border-radius: 6px;
    border: none;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 100%;
    background: #ffffff; }
    .anrBasedOnLogicModal .customDropdown .btnGroup button.selected {
      background-color: #8020CF;
      color: #ffffff; }

.anrBasedOnLogicModal .customDropdown .dropdownItemList {
  top: 40px;
  background-color: #F7F7F7; }
  .anrBasedOnLogicModal .customDropdown .dropdownItemList .mCSB_container {
    padding-bottom: 0; }
  .anrBasedOnLogicModal .customDropdown .dropdownItemList ul li a {
    color: #535353;
    font-size: 14px;
    font-weight: 500; }
  .anrBasedOnLogicModal .customDropdown .dropdownItemList li a:hover {
    background-color: #F9F2FF !important;
    color: #52575c !important; }
  .anrBasedOnLogicModal .customDropdown .dropdownItemList li.selected a {
    background: #F9F2FF !important; }
  .anrBasedOnLogicModal .customDropdown .dropdownItemList li.active a {
    color: #52575c !important;
    background: #F9F2FF !important; }
  .anrBasedOnLogicModal .customDropdown .dropdownItemList.show + .btnGroup {
    display: flex; }

.anrBasedOnLogicModal .customDropdown .dropdownItemList .mCSB_container {
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0; }

.anrBasedOnLogicModal .classGroup p.error {
  font-size: 14px;
  color: #EB5857;
  font-weight: 400;
  margin-bottom: 2px;
  white-space: nowrap; }

.anrBasedOnLogicModal .classGroup input.error {
  border-color: #EB5857 !important; }

.anrBasedOnLogicModal .classGroup .arrow {
  width: 24px;
  height: 80px;
  margin: 0 5px;
  background: url(../img/ch-arrow-black.svg) center center no-repeat; }

.imageChatEditRuleModal .fieldArea {
  max-width: 620px; }

.imageChatEditRuleModal .nav-tabs .nav-link {
  background: transparent;
  min-width: 180px;
  color: #535353;
  height: 45px; }
  .imageChatEditRuleModal .nav-tabs .nav-link.active {
    color: #303030;
    font-weight: 500; }

.imageChatEditRuleModal p.label {
  margin-bottom: 20px;
  color: #535353;
  font-size: 16px;
  font-weight: 400; }

.imageChatEditRuleModal .group {
  display: flex;
  justify-content: space-between; }

.imageChatEditRuleModal .prompt,
.imageChatEditRuleModal .zoneSelection,
.imageChatEditRuleModal .modelName {
  width: 50%; }
  .imageChatEditRuleModal .prompt h6,
  .imageChatEditRuleModal .zoneSelection h6,
  .imageChatEditRuleModal .modelName h6 {
    margin-bottom: 14px;
    font-size: 16px;
    font-weight: 500; }

.imageChatEditRuleModal #promptSelection .fieldArea {
  max-height: 420px;
  overflow: hidden; }
  .imageChatEditRuleModal #promptSelection .fieldArea .checkbox {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 400;
    color: #535353;
    cursor: pointer;
    padding-right: 20px; }
    .imageChatEditRuleModal #promptSelection .fieldArea .checkbox input[type="checkbox"] {
      width: 20px;
      height: 20px;
      background: #ffffff;
      border: 2px solid #878787;
      border-radius: 4px;
      margin-right: 10px;
      display: inline-block;
      appearance: none;
      -webkit-appearance: none; }
      .imageChatEditRuleModal #promptSelection .fieldArea .checkbox input[type="checkbox"]:checked {
        background: #8020CF url(../img/ch-check-white.svg) center center no-repeat;
        border-color: #8020CF; }
    .imageChatEditRuleModal #promptSelection .fieldArea .checkbox span {
      white-space: nowrap;
      max-width: 90%;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #535353;
      display: inline-block; }

.imageChatEditRuleModal #promptSelection .modelname p {
  margin-bottom: 20px;
  color: #535353;
  font-size: 14px;
  font-weight: 400;
  display: flex;
  align-items: center;
  white-space: nowrap; }
  .imageChatEditRuleModal #promptSelection .modelname p i {
    color: #A5A5A5;
    margin-left: 5px; }
  .imageChatEditRuleModal #promptSelection .modelname p span {
    white-space: nowrap;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block; }

.imageChatEditRuleModal #promptSelection .group {
  width: 100%; }

.imageChatEditRuleModal #zoneSelection .prompt h6,
.imageChatEditRuleModal #zoneSelection .zoneSelection h6 {
  border-bottom: solid 1px #E0E0E0;
  padding-bottom: 5px; }

.imageChatEditRuleModal #zoneSelection .zoneSelection .zoneSelectionDropdown_,
.imageChatEditRuleModal #zoneSelection .zoneSelection .zoneSelectionDropdown_edit {
  margin-bottom: 20px; }
  .imageChatEditRuleModal #zoneSelection .zoneSelection .zoneSelectionDropdown_ .itemBtn,
  .imageChatEditRuleModal #zoneSelection .zoneSelection .zoneSelectionDropdown_edit .itemBtn {
    height: 30px;
    background-color: #F7F7F7; }
  .imageChatEditRuleModal #zoneSelection .zoneSelection .zoneSelectionDropdown_ .dropdownItemList,
  .imageChatEditRuleModal #zoneSelection .zoneSelection .zoneSelectionDropdown_edit .dropdownItemList {
    top: 32px;
    background: #F7F7F7;
    box-shadow: 2px 5px 5px rgba(22, 22, 22, 0.08); }
    .imageChatEditRuleModal #zoneSelection .zoneSelection .zoneSelectionDropdown_ .dropdownItemList label,
    .imageChatEditRuleModal #zoneSelection .zoneSelection .zoneSelectionDropdown_edit .dropdownItemList label {
      padding: 10px 20px;
      margin-bottom: 0;
      font-size: 14px;
      font-weight: 500;
      color: #535353; }

.imageChatEditRuleModal #zoneSelection .fieldArea .prompt label {
  width: 100%;
  height: 30px;
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 400;
  color: #535353;
  white-space: nowrap;
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #535353;
  display: inline-block;
  line-height: 30px; }

.imageChatEditRuleModal #zoneSelection .fieldArea .checkbox.disable {
  opacity: 0.5;
  pointer-events: none; }

.imageChatEditRuleModal #zoneSelection .fieldArea .checkbox,
.imageChatEditRuleModal #zoneSelection .fieldArea .radiobox {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 400;
  color: #535353;
  cursor: pointer;
  padding-left: 10px; }
  .imageChatEditRuleModal #zoneSelection .fieldArea .checkbox input[type="checkbox"],
  .imageChatEditRuleModal #zoneSelection .fieldArea .checkbox input[type="radio"],
  .imageChatEditRuleModal #zoneSelection .fieldArea .radiobox input[type="checkbox"],
  .imageChatEditRuleModal #zoneSelection .fieldArea .radiobox input[type="radio"] {
    width: 18px;
    height: 18px;
    background: #ffffff;
    border: 2px solid #878787;
    border-radius: 4px;
    margin-right: 10px;
    position: relative;
    appearance: none;
    -webkit-appearance: none; }
    .imageChatEditRuleModal #zoneSelection .fieldArea .checkbox input[type="checkbox"]:checked,
    .imageChatEditRuleModal #zoneSelection .fieldArea .checkbox input[type="radio"]:checked,
    .imageChatEditRuleModal #zoneSelection .fieldArea .radiobox input[type="checkbox"]:checked,
    .imageChatEditRuleModal #zoneSelection .fieldArea .radiobox input[type="radio"]:checked {
      background: #8020CF url(../img/ch-check-white.svg) center center no-repeat;
      border-color: #8020CF; }
    .imageChatEditRuleModal #zoneSelection .fieldArea .checkbox input[type="checkbox"]:before,
    .imageChatEditRuleModal #zoneSelection .fieldArea .checkbox input[type="radio"]:before,
    .imageChatEditRuleModal #zoneSelection .fieldArea .radiobox input[type="checkbox"]:before,
    .imageChatEditRuleModal #zoneSelection .fieldArea .radiobox input[type="radio"]:before {
      width: 10px;
      height: 10px;
      border-radius: 30px;
      position: absolute;
      top: 2px;
      left: 2px;
      content: ''; }
  .imageChatEditRuleModal #zoneSelection .fieldArea .checkbox span,
  .imageChatEditRuleModal #zoneSelection .fieldArea .radiobox span {
    white-space: nowrap;
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #535353;
    display: inline-block; }

.imageChatEditRuleModal #zoneSelection .fieldArea .radiobox input[type="radio"] {
  border-radius: 50px;
  display: inline-block !important; }
  .imageChatEditRuleModal #zoneSelection .fieldArea .radiobox input[type="radio"]:checked {
    background: #ffffff;
    border-color: #8020CF; }
  .imageChatEditRuleModal #zoneSelection .fieldArea .radiobox input[type="radio"]:checked:before {
    background: #8020CF; }

.imageChatEditRuleModal #advancedSetting .recurringAlerts,
.imageChatEditRuleModal #advancedSetting .imageChatModelsAdd,
.imageChatEditRuleModal #advancedSetting .timeInterval {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  min-height: 50px;
  padding-left: 0;
  padding-right: 0;
  border: none; }
  .imageChatEditRuleModal #advancedSetting .recurringAlerts .group,
  .imageChatEditRuleModal #advancedSetting .imageChatModelsAdd .group,
  .imageChatEditRuleModal #advancedSetting .timeInterval .group {
    display: flex;
    width: 100%;
    border-bottom: 1px solid #E5E5E5;
    padding-bottom: 10px;
    margin-bottom: 20px; }
  .imageChatEditRuleModal #advancedSetting .recurringAlerts label,
  .imageChatEditRuleModal #advancedSetting .imageChatModelsAdd label,
  .imageChatEditRuleModal #advancedSetting .timeInterval label {
    color: #210835;
    font-size: 14px;
    font-weight: 400;
    color: #210835;
    margin: 0; }
    .imageChatEditRuleModal #advancedSetting .recurringAlerts label span,
    .imageChatEditRuleModal #advancedSetting .imageChatModelsAdd label span,
    .imageChatEditRuleModal #advancedSetting .timeInterval label span {
      color: #535353; }
  .imageChatEditRuleModal #advancedSetting .recurringAlerts .icon,
  .imageChatEditRuleModal #advancedSetting .imageChatModelsAdd .icon,
  .imageChatEditRuleModal #advancedSetting .timeInterval .icon {
    margin-left: 5px; }
  .imageChatEditRuleModal #advancedSetting .recurringAlerts .timeIntervalOptional,
  .imageChatEditRuleModal #advancedSetting .recurringAlerts .recurringAlertsUniqueObject,
  .imageChatEditRuleModal #advancedSetting .recurringAlerts .imageChatModelsAddOption,
  .imageChatEditRuleModal #advancedSetting .imageChatModelsAdd .timeIntervalOptional,
  .imageChatEditRuleModal #advancedSetting .imageChatModelsAdd .recurringAlertsUniqueObject,
  .imageChatEditRuleModal #advancedSetting .imageChatModelsAdd .imageChatModelsAddOption,
  .imageChatEditRuleModal #advancedSetting .timeInterval .timeIntervalOptional,
  .imageChatEditRuleModal #advancedSetting .timeInterval .recurringAlertsUniqueObject,
  .imageChatEditRuleModal #advancedSetting .timeInterval .imageChatModelsAddOption {
    margin-left: auto; }
  .imageChatEditRuleModal #advancedSetting .recurringAlerts .soOBtn,
  .imageChatEditRuleModal #advancedSetting .imageChatModelsAdd .soOBtn,
  .imageChatEditRuleModal #advancedSetting .timeInterval .soOBtn {
    margin-left: auto;
    display: inline-flex;
    align-items: center; }
    .imageChatEditRuleModal #advancedSetting .recurringAlerts .soOBtn span,
    .imageChatEditRuleModal #advancedSetting .imageChatModelsAdd .soOBtn span,
    .imageChatEditRuleModal #advancedSetting .timeInterval .soOBtn span {
      margin-right: 10px;
      color: #535353;
      font-size: 14px;
      font-weight: 400; }
    .imageChatEditRuleModal #advancedSetting .recurringAlerts .soOBtn input[type="checkbox"],
    .imageChatEditRuleModal #advancedSetting .imageChatModelsAdd .soOBtn input[type="checkbox"],
    .imageChatEditRuleModal #advancedSetting .timeInterval .soOBtn input[type="checkbox"] {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      width: 40px;
      height: 20px;
      border-radius: 20px;
      position: relative;
      background: #AAAAAA;
      display: inline-flex;
      align-items: center; }
      .imageChatEditRuleModal #advancedSetting .recurringAlerts .soOBtn input[type="checkbox"]:focus,
      .imageChatEditRuleModal #advancedSetting .imageChatModelsAdd .soOBtn input[type="checkbox"]:focus,
      .imageChatEditRuleModal #advancedSetting .timeInterval .soOBtn input[type="checkbox"]:focus {
        outline: none; }
      .imageChatEditRuleModal #advancedSetting .recurringAlerts .soOBtn input[type="checkbox"]:before,
      .imageChatEditRuleModal #advancedSetting .imageChatModelsAdd .soOBtn input[type="checkbox"]:before,
      .imageChatEditRuleModal #advancedSetting .timeInterval .soOBtn input[type="checkbox"]:before {
        width: 14px;
        height: 14px;
        border-radius: 30px;
        position: absolute;
        left: 2px;
        display: inline-block;
        content: '';
        background: #ffffff;
        cursor: pointer;
        transition: all 0.2s ease-in; }
      .imageChatEditRuleModal #advancedSetting .recurringAlerts .soOBtn input[type="checkbox"]:checked,
      .imageChatEditRuleModal #advancedSetting .imageChatModelsAdd .soOBtn input[type="checkbox"]:checked,
      .imageChatEditRuleModal #advancedSetting .timeInterval .soOBtn input[type="checkbox"]:checked {
        background: #8020CF; }
      .imageChatEditRuleModal #advancedSetting .recurringAlerts .soOBtn input[type="checkbox"]:checked:before,
      .imageChatEditRuleModal #advancedSetting .imageChatModelsAdd .soOBtn input[type="checkbox"]:checked:before,
      .imageChatEditRuleModal #advancedSetting .timeInterval .soOBtn input[type="checkbox"]:checked:before {
        left: 23px;
        background: #ffffff; }

.imageChatEditRuleModal #advancedSetting .timeIntervalGroup {
  display: none;
  width: 100%; }
  .imageChatEditRuleModal #advancedSetting .timeIntervalGroup label {
    font-size: 12px;
    font-weight: 400;
    color: #535353; }
  .imageChatEditRuleModal #advancedSetting .timeIntervalGroup .form-group {
    width: 50%; }
  .imageChatEditRuleModal #advancedSetting .timeIntervalGroup .arrow {
    width: 24px;
    height: 90px;
    margin: 0 5px;
    background: url(../img/ch-arrow-black.svg) center center no-repeat; }
  .imageChatEditRuleModal #advancedSetting .timeIntervalGroup .customDropdown .itemBtn {
    color: #222222;
    font-size: 14px;
    font-weight: 500; }
  .imageChatEditRuleModal #advancedSetting .timeIntervalGroup .customDropdown .btnGroup {
    display: none;
    width: 100%;
    height: 36px;
    box-shadow: 0px 3px 5px rgba(44, 44, 44, 0.2), 0px 0px 1px rgba(44, 44, 44, 0.31);
    border-radius: 6px;
    overflow: hidden; }
    .imageChatEditRuleModal #advancedSetting .timeIntervalGroup .customDropdown .btnGroup button {
      font-size: 14px;
      font-weight: 500;
      color: #535353;
      border-radius: 6px;
      border: none;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: 50%;
      height: 100%;
      background: #ffffff; }
      .imageChatEditRuleModal #advancedSetting .timeIntervalGroup .customDropdown .btnGroup button.selected {
        background-color: #8020CF;
        color: #ffffff; }
  .imageChatEditRuleModal #advancedSetting .timeIntervalGroup .customDropdown .dropdownItemList {
    top: 80px;
    background-color: #F7F7F7; }
    .imageChatEditRuleModal #advancedSetting .timeIntervalGroup .customDropdown .dropdownItemList .mCSB_container {
      padding-bottom: 0; }
    .imageChatEditRuleModal #advancedSetting .timeIntervalGroup .customDropdown .dropdownItemList ul li a {
      color: #535353;
      font-size: 14px;
      font-weight: 500; }
    .imageChatEditRuleModal #advancedSetting .timeIntervalGroup .customDropdown .dropdownItemList li a:hover {
      background-color: #F9F2FF !important;
      color: #52575c !important; }
    .imageChatEditRuleModal #advancedSetting .timeIntervalGroup .customDropdown .dropdownItemList li.selected a {
      background: #F9F2FF !important; }
    .imageChatEditRuleModal #advancedSetting .timeIntervalGroup .customDropdown .dropdownItemList li.active a {
      color: #52575c !important;
      background: #F9F2FF !important; }
    .imageChatEditRuleModal #advancedSetting .timeIntervalGroup .customDropdown .dropdownItemList.show + .btnGroup {
      display: flex; }

.analytics_options_header {
  font-size: 18px;
  font-weight: 600;
  line-height: 36px;
  color: #4E4576 !important; }

.apiScriptModal {
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1005;
  width: 100%;
  height: 100%;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease-in; }
  .apiScriptModal.show {
    visibility: visible;
    opacity: 1; }
  .apiScriptModal .modalDialog {
    max-width: 1000px;
    width: 100%;
    position: relative;
    display: inline-flex;
    z-index: 2; }
  .apiScriptModal .modalContent {
    width: 100%;
    background: #d7d7d7; }
  .apiScriptModal .nav-tabs {
    background: #F0F0F0;
    border: none; }
    .apiScriptModal .nav-tabs .nav-item {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      /*width: 16.666666667%;*/
      width: 20%;
      height: 66px;
      /*&:last-child {
				width: 20.9%;
			}*/ }
      @media (max-width: 768px) {
        .apiScriptModal .nav-tabs .nav-item {
          width: auto; } }
    .apiScriptModal .nav-tabs .nav-link {
      color: #9B9B9B;
      font-size: 16px;
      font-family: "latomedium";
      font-weight: 500;
      border-radius: 0;
      border: none;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      white-space: nowrap; }
      @media (max-width: 768px) {
        .apiScriptModal .nav-tabs .nav-link {
          font-size: 13px; } }
  .apiScriptModal .nav-tabs .nav-item.show .nav-link,
  .apiScriptModal .nav-tabs .nav-link.active {
    color: #0A2E60; }
  .apiScriptModal .modalActionBtns {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 66px;
    padding: 0 20px; }
    @media (max-width: 768px) {
      .apiScriptModal .modalActionBtns {
        padding: 0 10px; } }
    .apiScriptModal .modalActionBtns .actionsBtn {
      width: 20px;
      height: 20px;
      border-radius: 20px;
      display: flex;
      margin: 0 4px;
      border: 0; }
    .apiScriptModal .modalActionBtns .orangeBg,
    .apiScriptModal .modalActionBtns .greenBg {
      pointer-events: none; }
  .apiScriptModal .redBg {
    background: #FF4A4A; }
  .apiScriptModal .orangeBg {
    background: #FFB83D; }
  .apiScriptModal .greenBg {
    background: #00C543; }
  .apiScriptModal .tab-content {
    padding: 40px 60px;
    color: #595959;
    background-color: #FBFBFB; }
    @media (max-width: 768px) {
      .apiScriptModal .tab-content {
        padding: 30px; } }
    .apiScriptModal .tab-content ul {
      height: 455px;
      padding-bottom: 50px;
      overflow: hidden;
      margin: 0;
      counter-reset: section; }
      .apiScriptModal .tab-content ul li {
        position: relative;
        margin-bottom: 15px;
        padding-left: 60px;
        /*font-family:monospace;*/
        font-size: 14px;
        color: #595959;
        font-family: "latomedium";
        font-weight: 500; }
        @media (max-width: 768px) {
          .apiScriptModal .tab-content ul li {
            font-size: 12px;
            padding-left: 30px; } }
        .apiScriptModal .tab-content ul li br {
          margin-bottom: 20px; }
        .apiScriptModal .tab-content ul li:before {
          counter-increment: section;
          content: counter(section);
          position: absolute;
          left: 0;
          color: #8d8d8d; }
        .apiScriptModal .tab-content ul li.indent1 div {
          padding-left: 10px; }
        .apiScriptModal .tab-content ul li.indent2 div {
          padding-left: 20px; }
        .apiScriptModal .tab-content ul li.indent3 div {
          padding-left: 30px; }
        .apiScriptModal .tab-content ul li.indent4 div {
          padding-left: 40px; }
        .apiScriptModal .tab-content ul li.indent5 div {
          padding-left: 50px; }

.objTrainModel,
.createPerceptionModal_,
.createPerceptionParametersModal {
  padding-right: 0 !important; }
  .objTrainModel .backBtn,
  .createPerceptionModal_ .backBtn,
  .createPerceptionParametersModal .backBtn {
    background: transparent;
    border: 0;
    padding: 0; }
  .objTrainModel .modal-title,
  .createPerceptionModal_ .modal-title,
  .createPerceptionParametersModal .modal-title {
    text-align: center;
    text-transform: uppercase; }
  .objTrainModel .datasetSelectNextBtn,
  .createPerceptionModal_ .datasetSelectNextBtn,
  .createPerceptionParametersModal .datasetSelectNextBtn {
    height: 44px;
    width: 100%;
    border-radius: 10px;
    max-width: 250px;
    font-size: 14px;
    font-weight: 500;
    border: none; }
    .objTrainModel .datasetSelectNextBtn.disable,
    .createPerceptionModal_ .datasetSelectNextBtn.disable,
    .createPerceptionParametersModal .datasetSelectNextBtn.disable {
      opacity: 1;
      background: #F7F7F7;
      color: #B7B7B7 !important;
      cursor: default; }
  .objTrainModel .btnWrapper,
  .createPerceptionModal_ .btnWrapper,
  .createPerceptionParametersModal .btnWrapper {
    display: flex;
    justify-content: center;
    padding: 20px;
    margin-top: 10px;
    box-shadow: 3px 0px 5px 1px rgba(193, 193, 193, 0.25); }

.fluidBtn {
  height: 50px;
  width: 100%;
  border-radius: 5px;
  max-width: 100%; }

.selectTrainingOptionModal {
  padding-right: 0 !important; }
  .selectTrainingOptionModal .backBtn {
    background: transparent;
    border: 0;
    padding: 0; }
  .selectTrainingOptionModal .createTrainingBtn {
    height: 42px;
    width: 100%;
    border-radius: 5px; }
  .selectTrainingOptionModal .nextBtn {
    height: 50px;
    width: 100%;
    border-radius: 5px; }
  .selectTrainingOptionModal .modal-content {
    margin-top: 0; }
  .selectTrainingOptionModal .modal-header {
    padding-left: 25px;
    padding-right: 25px; }
  .selectTrainingOptionModal .modal-dialog {
    max-width: 580px;
    align-items: center;
    margin: 0 auto; }
  .selectTrainingOptionModal .modal-body {
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 0;
    padding-top: 0; }
  .selectTrainingOptionModal .modal-title {
    text-align: center; }
  .selectTrainingOptionModal .label {
    font-size: 16px;
    font-weight: 400;
    margin: 0;
    color: #535353;
    width: 100%; }
  .selectTrainingOptionModal .disable {
    background: #9B9B9B;
    border-color: #9B9B9B;
    pointer-events: none; }
  .selectTrainingOptionModal .trainingOptionArea {
    padding: 30px 0 20px; }
    .selectTrainingOptionModal .trainingOptionArea .selectTraining {
      cursor: pointer; }
    .selectTrainingOptionModal .trainingOptionArea dl {
      box-shadow: 2px 5px 20px rgba(65, 65, 65, 0.08);
      border-radius: 5px;
      padding: 20px 10px 20px 0;
      border: solid 2px transparent;
      background: transparent;
      width: 100%;
      display: flex;
      align-items: center; }
      .selectTrainingOptionModal .trainingOptionArea dl dt {
        padding-left: 30px;
        padding-right: 70px;
        float: left; }
      .selectTrainingOptionModal .trainingOptionArea dl dd {
        padding-left: 30px;
        margin-left: 60px; }
      .selectTrainingOptionModal .trainingOptionArea dl.selected {
        border: solid 2px #8020CF; }
    .selectTrainingOptionModal .trainingOptionArea .icon {
      position: absolute;
      margin-left: -70px; }
    .selectTrainingOptionModal .trainingOptionArea h2 {
      color: #4E4576;
      font-size: 20px;
      font-weight: 500;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 10px; }
    .selectTrainingOptionModal .trainingOptionArea p {
      font-size: 16px;
      color: #535353;
      text-align: left;
      margin: 0; }

.checkboxNew {
  width: 19px;
  height: 19px;
  display: inline-flex;
  position: relative;
  cursor: pointer; }
  .checkboxNew input[type="checkbox"] {
    display: none; }
  .checkboxNew span {
    width: 19px;
    height: 19px;
    border: solid 2px #9B9B9B;
    border-radius: 3px;
    background: #ffffff; }
  .checkboxNew input[type="checkbox"]:checked + span {
    background: #f7941d url(../img/ch-check-white-sm.svg) center center no-repeat;
    border-color: #f7941d; }

.publicModelTabs .nav-tabs,
.customModelTabs .nav-tabs {
  z-index: 9;
  position: relative;
  display: inline-flex;
  border-bottom: 2px solid #EBEFF2; }
  .publicModelTabs .nav-tabs li,
  .customModelTabs .nav-tabs li {
    margin: 0 10px;
    position: relative; }
    .publicModelTabs .nav-tabs li:first-child,
    .customModelTabs .nav-tabs li:first-child {
      margin-left: 0; }
      .publicModelTabs .nav-tabs li:first-child a,
      .customModelTabs .nav-tabs li:first-child a {
        padding-left: 0; }
    .publicModelTabs .nav-tabs li .customTooltip,
    .customModelTabs .nav-tabs li .customTooltip {
      top: 40px;
      left: 40px;
      font-size: 15px;
      font-weight: 400;
      box-shadow: 2px 5px 20px rgba(65, 65, 65, 0.08);
      border-radius: 5px;
      white-space: normal;
      padding: 10px 15px;
      width: 325px; }
    .publicModelTabs .nav-tabs li:hover .customTooltip,
    .customModelTabs .nav-tabs li:hover .customTooltip {
      visibility: visible;
      opacity: 1; }
  .publicModelTabs .nav-tabs a,
  .customModelTabs .nav-tabs a {
    font-family: "Euclid Circular B";
    font-size: 16px;
    font-weight: 400;
    color: #360D57;
    padding: 8px 10px;
    display: inline-block; }
    .publicModelTabs .nav-tabs a.active,
    .customModelTabs .nav-tabs a.active {
      border-bottom: 4px solid #5A1691;
      color: #303030;
      font-weight: 600; }
    .publicModelTabs .nav-tabs a .new,
    .customModelTabs .nav-tabs a .new {
      color: #C424FA;
      font-size: 14px;
      font-weight: 700;
      margin-right: 8px; }

.resultContent {
  position: relative; }
  .resultContent > .group {
    display: flex;
    justify-content: space-between; }
    .resultContent > .group a {
      color: #8020CF;
      font-size: 16px;
      font-weight: 600;
      display: inline-flex;
      align-items: center; }
      .resultContent > .group a .icon {
        margin-right: 10px; }
  .resultContent .f1scroeInfoDetail {
    border-radius: 10px 10px 0px 0px;
    text-align: center;
    display: inline-flex;
    align-items: flex-start;
    justify-content: center;
    width: 36px;
    height: 40px;
    padding-top: 5px;
    cursor: pointer; }
    .resultContent .f1scroeInfoDetail .icon {
      width: 20px; }
    .resultContent .f1scroeInfoDetail.active {
      background-color: #4E4576; }
      .resultContent .f1scroeInfoDetail.active img {
        filter: invert(100%) sepia(0%) saturate(2%) hue-rotate(103deg) brightness(113%) contrast(101%); }
  .resultContent .calculationInfoDetail {
    width: 100%;
    padding: 15px 20px;
    margin: 0 auto 20px;
    background: #F7F7F7;
    border: 1px solid #4E4576;
    border-radius: 10px 0px 10px 10px;
    z-index: 2;
    position: relative;
    display: none; }
    .resultContent .calculationInfoDetail .closeModal {
      width: 14px;
      height: 14px;
      right: 10px;
      top: 15px;
      background: url(../img/ch-close-gray.svg) center center no-repeat;
      background-size: contain; }
    .resultContent .calculationInfoDetail h6 {
      font-size: 18px;
      font-weight: 500;
      color: #303030;
      margin-bottom: 20px; }
    .resultContent .calculationInfoDetail p {
      color: #303030;
      font-size: 16px;
      font-weight: 400; }
    .resultContent .calculationInfoDetail .group {
      padding: 10px 0 10px 100px;
      display: flex;
      margin: 0; }
    .resultContent .calculationInfoDetail .formula {
      display: inline-flex;
      align-items: center;
      font-size: 18px;
      font-weight: 500;
      color: #535353; }
      .resultContent .calculationInfoDetail .formula:first-child {
        margin-right: 20%; }
      .resultContent .calculationInfoDetail .formula hr {
        border-bottom: 1px solid #535353;
        margin: 0;
        min-width: 150px; }
      .resultContent .calculationInfoDetail .formula span:first-child {
        margin-right: 20px;
        width: 120px;
        text-align: right; }
      .resultContent .calculationInfoDetail .formula span:last-child {
        text-align: center; }
      .resultContent .calculationInfoDetail .formula em {
        margin: 0 2px;
        display: inline-block;
        width: 14px;
        height: 14px;
        background: url(../img/uShape.svg) center center no-repeat;
        background-size: contain; }
        .resultContent .calculationInfoDetail .formula em.up {
          transform: rotate(-180deg); }

.resultContent h6 {
  font-family: "Euclid Circular B";
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  color: #4E4576;
  display: inline-flex;
  align-items: center; }

.modelPerformanceResultArea {
  width: 100%;
  background: #FFFFFF;
  /* card shadow */
  box-shadow: 2px 5px 20px rgba(65, 65, 65, 0.08);
  border-radius: 6px; }

.resultsTitle {
  position: absolute;
  width: 100%;
  height: 54px;
  border-bottom: 2.15px #F6F6F7;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center; }
  .resultsTitle h3 {
    height: 16px;
    width: 120px;
    font-family: "Euclid Circular B";
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 16px;
    color: #303030; }

.resultInfo {
  position: absolute;
  width: 1172px;
  height: 75.4px; }

.filterWrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0 17px;
  width: 100%; }
  .filterWrapper .trainingAreaButtons {
    display: flex;
    justify-content: space-between; }
  .filterWrapper .sortDropdown {
    margin-right: 10px;
    margin-left: auto; }
  .filterWrapper .filterBtn {
    display: inline-flex;
    width: 68px;
    height: 36px;
    border-radius: 5px;
    box-shadow: 0px 4px 7px -1px rgba(0, 0, 0, 0.11), 0px 2px 4px -1px rgba(0, 0, 0, 0.07);
    background: #ffffff; }
    .filterWrapper .filterBtn .btns {
      border: 0;
      box-shadow: none;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: 50%;
      height: 100%;
      background-color: #fff;
      position: relative;
      transition: all 0.2s ease-in; }
      .filterWrapper .filterBtn .btns:hover {
        background-color: #fff; }
      .filterWrapper .filterBtn .btns.active {
        background-color: #EBEFF2; }
      .filterWrapper .filterBtn .btns:hover .customTooltip {
        visibility: visible;
        opacity: 1; }
      .filterWrapper .filterBtn .btns .customTooltip {
        border-radius: 5px;
        font-weight: 400; }
    .filterWrapper .filterBtn .gridBtn {
      border-radius: 5px 0 0 5px;
      background: #ffffff url(../img/grid-icon-gray.svg) center center no-repeat; }
      .filterWrapper .filterBtn .gridBtn.active {
        background: #E7E6EC url(../img/grid-icon-purple.svg) center center no-repeat; }
      .filterWrapper .filterBtn .gridBtn .customTooltip {
        top: 36px;
        left: 0; }
    .filterWrapper .filterBtn .listBtn {
      border-radius: 0 5px 5px 0;
      background: #ffffff url(../img/list-icon-gray.svg) center center no-repeat; }
      .filterWrapper .filterBtn .listBtn.active {
        background: #E7E6EC url(../img/list-icon-purple.svg) center center no-repeat; }
      .filterWrapper .filterBtn .listBtn .customTooltip {
        top: 36px;
        right: 0; }
  .filterWrapper .modelFilter {
    margin-right: 10px; }
  .filterWrapper .help {
    margin-left: 10px;
    border: none;
    background: none;
    box-shadow: none;
    padding: 0; }
  .filterWrapper .addModelDropdown {
    margin-left: 10px;
    position: relative;
    z-index: 912; }
    .filterWrapper .addModelDropdown .addModelBtn {
      color: #360D57;
      padding-right: 30px;
      background: url(../img/trangle-down-arrow-lightblue.svg) 90% center no-repeat;
      font-size: 14px;
      font-weight: 500;
      min-width: 165px;
      justify-content: flex-start; }
      .filterWrapper .addModelDropdown .addModelBtn .icon {
        width: 16px;
        margin-right: 6px; }
    .filterWrapper .addModelDropdown .addModelList {
      position: absolute;
      top: 40px;
      left: 0;
      width: 100%;
      padding: 20px 0;
      background: #ffffff;
      box-shadow: 0px 3px 5px rgba(6, 0, 41, 0.2);
      border-radius: 10px;
      display: none; }
      .filterWrapper .addModelDropdown .addModelList a {
        color: #535353;
        font-size: 14px;
        padding: 10px 15px;
        display: block; }
        .filterWrapper .addModelDropdown .addModelList a .icon {
          margin-right: 10px; }
        .filterWrapper .addModelDropdown .addModelList a:hover {
          background-color: #FAF5FF; }
    .filterWrapper .addModelDropdown.openList .addModelBtn {
      background: url(../img/trangle-up-arrow-lightblue.svg) 90% center no-repeat; }
    .filterWrapper .addModelDropdown.openList .addModelList {
      display: block; }
  .filterWrapper .importModelsBtn .alertTooltip {
    top: 40px;
    right: 0; }

.mainPreTrainedPreception .filterWrapper {
  padding-top: 30px;
  padding-bottom: 0; }

.mainPreTrainedPreception .ListlayoutTopbar {
  padding-right: 15px; }

.customModelTabs .filterWrapper {
  justify-content: normal; }

.popover-navigation .popCount {
  font-family: "latosemibold";
  font-size: 18px;
  color: #ffffff;
  position: relative;
  display: inline-block;
  letter-spacing: 2px; }

.popover-navigation .btn {
  min-width: 65px; }
  .popover-navigation .btn .btnArrow {
    display: none; }

.popover-navigation .btn[data-role="next"] {
  background-color: #EBEFF2;
  color: #2C5A99;
  margin-left: 15px !important; }
  .popover-navigation .btn[data-role="next"] .btnArrow {
    background: url(../img/arrow-right-sm-white.svg) center center no-repeat;
    width: 8px;
    height: 12px;
    margin-left: 10px; }

.popover-navigation .btn[data-role="prev"] {
  background-color: #0367A6;
  color: #ffffff; }
  .popover-navigation .btn[data-role="prev"] .btnArrow {
    background: url(../img/arrow-left-sm-blue.svg) center center no-repeat;
    width: 8px;
    height: 12px;
    margin-right: 10px; }

.popover-navigation .btn-group span {
  font-size: 0; }

.popover-navigation .btn[data-role="end"] {
  display: none;
  background-color: #F2E9FA;
  color: #352B63; }
  .popover-navigation .btn[data-role="end"] .btnArrow {
    background: url(../img/arrow-right-sm-blue.svg) center center no-repeat; }

.popover-navigation .disabled[data-role="next"] {
  display: none; }
  .popover-navigation .disabled[data-role="next"] .btnArrow {
    background: url(../img/arrow-right-sm-blue.svg) center center no-repeat; }

.popover-navigation .disabled[data-role="prev"] .btnArrow {
  background: url(../img/arrow-left-sm-blue.svg) center center no-repeat; }

.popover-navigation .disabled[data-role="next"] ~ .btn[data-role="end"] {
  display: inline-flex;
  margin-left: 15px;
  font-weight: 600;
  font-size: 14px;
  background-color: #F2E9FA;
  color: #352B63; }

.modelsPagination {
  display: inline-flex;
  align-items: center;
  font-weight: 400;
  font-size: 16px;
  margin-left: auto;
  margin-right: 10px; }
  .modelsPagination .next,
  .modelsPagination .prev {
    margin: 0 25px;
    display: inline-flex;
    align-items: center; }

.trainingTopCard {
  margin: 0 -15px 0;
  padding: 15px 20px 15px;
  background-image: url(../img/object-model-background.svg), linear-gradient(90.01deg, #8020CF -0.45%, #472CE6 99.99%);
  /* W3C */
  background-position: center center;
  background-size: cover;
  height: 210px; }
  .trainingTopCard .breadCrumb {
    margin-top: 0; }

.classes-header {
  font-family: "Euclid Circular B";
  font-weight: 700;
  font-size: 16px;
  line-height: 20px;
  text-align: center;
  color: #303030;
  width: 200px;
  margin-top: 10px;
  border-bottom: 4px solid #5A1691;
  margin-bottom: 20px;
  padding: 10px 0; }

.modelsDetailPage .breadCrumb + .trainingAreaTopBar {
  margin-top: 30px; }

.modelsDetailPage .test_via_btn {
  font-family: "Euclid Circular B"; }

.modelsDetailPage .title {
  margin: 0 0 10px;
  font-size: 20px;
  font-family: "latosemibold";
  color: #5071A6; }

.modelsDetailPage .header {
  width: 100%;
  margin-top: 20px; }
  .modelsDetailPage .header ul {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center; }
    .modelsDetailPage .header ul li {
      display: inline-flex;
      flex-direction: column;
      padding: 10px;
      /*border-right: 1px solid #F2F2F2;*/
      width: 100%;
      color: #EAEAEA;
      font-family: "Euclid Circular B";
      font-weight: 400;
      white-space: nowrap;
      font-size: 14px; }
      .modelsDetailPage .header ul li:first-child {
        max-width: 130px; }
      .modelsDetailPage .header ul li:nth-child(3) {
        margin-left: auto;
        max-width: 130px;
        text-align: center; }
      .modelsDetailPage .header ul li:nth-child(4) {
        max-width: 130px; }
        .modelsDetailPage .header ul li:nth-child(4) p {
          align-items: center; }
      .modelsDetailPage .header ul li:nth-child(5) {
        max-width: 130px; }
        .modelsDetailPage .header ul li:nth-child(5) p {
          align-items: center; }
      .modelsDetailPage .header ul li:nth-child(6) {
        max-width: 130px; }
        .modelsDetailPage .header ul li:nth-child(6) p {
          align-items: center; }
      .modelsDetailPage .header ul li:nth-child(7) {
        max-width: 180px; }
        .modelsDetailPage .header ul li:nth-child(7) p {
          align-items: center; }
      .modelsDetailPage .header ul li:last-child {
        max-width: 120px;
        align-items: center; }
      .modelsDetailPage .header ul li p {
        margin: 10px 0 0;
        font-size: 16px;
        font-family: "Euclid Circular B";
        font-weight: 600;
        color: #FFFFFF;
        min-height: 21px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap; }
      .modelsDetailPage .header ul li.ownerEmail {
        max-width: 250px;
        text-align: center; }
      .modelsDetailPage .header ul li .copyUID {
        width: 100px;
        text-align: center; }
        .modelsDetailPage .header ul li .copyUID p {
          font-size: 14px;
          font-weight: 500;
          color: #FFFFFF; }
        .modelsDetailPage .header ul li .copyUID .icon {
          width: 14px;
          height: 14px;
          display: inline-block; }

.modelsDetailPage .perceptionSearch {
  max-width: 398px;
  min-width: 398px;
  display: inline-block; }
  .modelsDetailPage .perceptionSearch input {
    background: #fff; }
  .modelsDetailPage .perceptionSearch .easy-autocomplete-container {
    top: 40px; }

.modelsDetailPage .tab-content .perceptionSearch {
  margin: 25px 0; }

.modelsDetailPage .trainingAreaButtons {
  width: 100%; }
  .modelsDetailPage .trainingAreaButtons .lightOrangeBtn,
  .modelsDetailPage .trainingAreaButtons .darkOrangeBtn,
  .modelsDetailPage .trainingAreaButtons .orange-button {
    height: 36px;
    min-width: 130px;
    border: 0;
    font-weight: 700;
    padding: 0 15px;
    background: linear-gradient(267.94deg, #48FDE1 -23.98%, #60EFFF 96.66%);
    color: #303030;
    border-radius: 20px;
    font-size: 14px; }

.modelsDetailPage .eachPreceptionAreaContent {
  background: #ffffff;
  box-shadow: 2px 5px 20px rgba(65, 65, 65, 0.08);
  border-radius: 5px;
  margin-right: 8px;
  margin-bottom: 8px;
  display: inline-flex;
  width: 24%; }
  @media (min-width: 1680px) {
    .modelsDetailPage .eachPreceptionAreaContent {
      width: 24.2%; } }
  .modelsDetailPage .eachPreceptionAreaContent ul li {
    width: 100% !important;
    height: 50px;
    color: #0A2E60;
    font-size: 14px;
    font-family: "latosemibold";
    color: #0A2E60; }

.modelsDetailPage .preceptionArea {
  margin: 0 0 20px;
  padding: 5px 15px 15px 15px;
  background: #ffffff;
  border-radius: 6px; }
  .modelsDetailPage .preceptionArea .nav-tabs {
    display: flex;
    border-bottom-color: 1px solid #C5DBE8; }
    .modelsDetailPage .preceptionArea .nav-tabs li a {
      padding: 10px 20px;
      color: #303030;
      font-size: 16px;
      display: inline-block;
      font-family: "Euclid Circular B";
      font-weight: 500;
      border-bottom: solid 2px transparent;
      min-width: 150px;
      text-align: center; }
      .modelsDetailPage .preceptionArea .nav-tabs li a.active {
        color: #303030;
        font-weight: 600;
        border-bottom: solid 3px #5A1691; }

.modelsDetailPage .btnBestPractice {
  float: right;
  background-color: transparent;
  border: 1px solid #AAAAAA;
  color: #ffffff;
  font-size: 14px;
  font-family: "Euclid Circular B";
  box-shadow: 0px 2px 5px rgba(40, 40, 40, 0.1);
  border-radius: 10px; }

.modelBreadCrumb {
  margin: 0 0 10px; }
  .modelBreadCrumb ul {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: flex-start; }
    .modelBreadCrumb ul li {
      font-size: 16px;
      font-weight: 600;
      color: #8C9196;
      display: inline-flex;
      background: url(../img/arrow-right-light-gray.svg) right 5px no-repeat;
      background-size: 8px;
      padding-right: 15px;
      padding-left: 10px;
      cursor: pointer; }
      .modelBreadCrumb ul li:first-child {
        padding-left: 0; }
      .modelBreadCrumb ul li.active {
        color: #595959;
        background: none;
        pointer-events: none; }

.preTrainedPreception .perceptionSearch input {
  background: #ffffff; }

.preTrainedPreception .preceptionArea {
  padding: 0;
  background: transparent;
  box-shadow: none; }

.preTrainedPreception .eachPreceptionAreaContent ul {
  flex-direction: column; }
  .preTrainedPreception .eachPreceptionAreaContent ul .preceptionAreaTopId {
    height: auto;
    color: #5071A6; }
  .preTrainedPreception .eachPreceptionAreaContent ul .preceptionAreaTopName {
    align-items: flex-start !important; }

.customModels .perceptionSearch {
  min-width: 287px;
  max-width: 287px;
  z-index: 912; }
  .customModels .perceptionSearch input {
    background: #ffffff; }

.tvuExampleOutput {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  height: 600px;
  width: 100%;
  padding: 20px 0; }
  .tvuExampleOutput .note {
    margin: 0;
    font-size: 14px;
    color: #eb5857;
    display: none;
    align-items: center;
    font-family: "latosemibold"; }
    .tvuExampleOutput .note .infoIcon {
      display: inline-flex;
      width: 19px;
      height: 19px;
      border-radius: 30px;
      margin-right: 4px;
      background: #fff url(../img/ch-info-red.svg) 0 center no-repeat; }
  .tvuExampleOutput .note.image {
    left: 5px;
    bottom: 96%;
    position: absolute; }
  .tvuExampleOutput .note.show {
    display: flex; }
  .tvuExampleOutput .loaderGif {
    position: absolute; }
  .tvuExampleOutput .annotorious-item-unfocus {
    opacity: 0.9 !important; }
  .tvuExampleOutput .galleryAreaSection {
    width: 100%;
    max-width: 54%;
    /*background-color: #f7f7f7;*/
    overflow: hidden;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column; }
    @media (max-width: 967px) {
      .tvuExampleOutput .galleryAreaSection {
        max-width: 100%; } }
    .tvuExampleOutput .galleryAreaSection canvas {
      max-width: 100%;
      max-height: 100%;
      top: 0;
      left: 0;
      /*bottom: 0;*/
      right: 0;
      margin: auto;
      position: absolute;
      width: auto !important;
      height: auto !important; }
    .tvuExampleOutput .galleryAreaSection .thumbnailPreview {
      background-color: transparent;
      height: 100%;
      max-height: 100%;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      padding: 0;
      position: relative; }
      .tvuExampleOutput .galleryAreaSection .thumbnailPreview .annotorious-annotationlayer {
        height: 89%;
        display: flex !important;
        justify-content: center;
        align-items: center; }
      .tvuExampleOutput .galleryAreaSection .thumbnailPreview img {
        max-height: 100%; }
      .tvuExampleOutput .galleryAreaSection .thumbnailPreview #thumbnail-image {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0 auto; }
  .tvuExampleOutput .wrapper {
    width: 100%;
    height: 100%;
    max-width: 50%;
    background-color: #f7f7f7;
    overflow: hidden;
    padding: 6px; }
    .tvuExampleOutput .wrapper .galleryAreaSection {
      padding: 0;
      max-width: 100%; }
  .tvuExampleOutput .prediction_model {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    border: solid 1px transparent;
    border-bottom: solid 1px #dadada; }
    .tvuExampleOutput .prediction_model:hover {
      border-color: #e02020; }
  .tvuExampleOutput .itemList {
    width: 100%;
    height: 100%;
    max-width: 47%;
    margin-right: -15px;
    padding-left: 25px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; }
    @media (max-width: 967px) {
      .tvuExampleOutput .itemList {
        max-width: 100%; } }
    @media (max-width: 480px) {
      .tvuExampleOutput .itemList {
        padding: 0 10px 10px 10px; } }
    .tvuExampleOutput .itemList h4 {
      font-size: 18px;
      color: #ff8f00;
      text-align: left;
      margin-bottom: 15px;
      margin-top: 15px;
      width: 100%;
      padding: 0 20px; }
      @media (max-width: 1366px) {
        .tvuExampleOutput .itemList h4 {
          margin-bottom: 10px;
          margin-top: 10px; } }
      @media (max-width: 967px) {
        .tvuExampleOutput .itemList h4 {
          font-size: 16px; } }
      .tvuExampleOutput .itemList h4 a {
        font-size: 18px; }
    .tvuExampleOutput .itemList .textalignLeft {
      text-align: left; }
    .tvuExampleOutput .itemList .header {
      display: none; }
    .tvuExampleOutput .itemList .listItemArea {
      color: #535353;
      width: 100%;
      height: 100%;
      overflow: hidden; }
    .tvuExampleOutput .itemList .matchResult {
      height: auto;
      min-height: min-content;
      overflow: visible; }
      .tvuExampleOutput .itemList .matchResult .predictionResultFace .prediction_model {
        justify-content: space-between;
        align-items: center; }
      .tvuExampleOutput .itemList .matchResult li {
        margin: 0; }
        @media (max-width: 480px) {
          .tvuExampleOutput .itemList .matchResult li {
            font-size: 12px; } }
    .tvuExampleOutput .itemList .similarFaces {
      min-height: 200px; }
      @media (max-width: 967px) {
        .tvuExampleOutput .itemList .similarFaces {
          padding-top: 0; } }
      @media (max-width: 480px) {
        .tvuExampleOutput .itemList .similarFaces {
          min-height: 100px; } }
      @media (min-width: 1680px) {
        .tvuExampleOutput .itemList .similarFaces {
          min-height: 480px; } }
      .tvuExampleOutput .itemList .similarFaces .listItemContent {
        height: 75%; }
    .tvuExampleOutput .itemList .listItemTopbar {
      padding: 9px 30px 9px 10px;
      margin: 0;
      font-weight: 600;
      font-size: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      text-align: center;
      margin-bottom: 10px;
      border-bottom: 2px solid #E7E6EC; }
      .tvuExampleOutput .itemList .listItemTopbar li {
        margin: 0;
        padding: 0 10px;
        font-weight: 600; }
      @media (max-width: 1366px) {
        .tvuExampleOutput .itemList .listItemTopbar {
          font-size: 14px; } }
      @media (max-width: 967px) {
        .tvuExampleOutput .itemList .listItemTopbar {
          font-size: 12px;
          padding: 10px 0; } }
    .tvuExampleOutput .itemList .eachTagTopbar {
      display: none; }
    .tvuExampleOutput .itemList .listItemContent {
      font-size: 14px;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      overflow: hidden;
      width: 100%;
      height: 100%;
      text-align: center;
      padding: 0 10px;
      margin: 0; }
      .tvuExampleOutput .itemList .listItemContent li {
        padding: 0 10px; }
      .tvuExampleOutput .itemList .listItemContent .mCSB_inside > .mCSB_container {
        margin-right: 20px !important; }
      @media (max-width: 1200px) {
        .tvuExampleOutput .itemList .listItemContent {
          font-size: 14px; } }
      @media (max-width: 480px) {
        .tvuExampleOutput .itemList .listItemContent {
          font-size: 12px; } }
      .tvuExampleOutput .itemList .listItemContent .objectModelName ul {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
        min-height: 68px; }
      .tvuExampleOutput .itemList .listItemContent .select-style {
        border: solid 1px red; }
      .tvuExampleOutput .itemList .listItemContent .eachItem {
        border: 2px solid transparent;
        border-bottom: 2px solid #dadada;
        padding: 10px 0; }
        .tvuExampleOutput .itemList .listItemContent .eachItem:hover {
          border-color: #e02020; }
        .tvuExampleOutput .itemList .listItemContent .eachItem ul {
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: row;
          min-height: 50px; }
      .tvuExampleOutput .itemList .listItemContent .mCSB_container {
        padding-bottom: 50px; }
      .tvuExampleOutput .itemList .listItemContent .prediction_model li img {
        min-width: 30px; }
    .tvuExampleOutput .itemList .alignedLeftclassName li {
      display: inline-flex;
      flex-wrap: wrap; }
    .tvuExampleOutput .itemList .alignedLeftclassName .listItemTopbar .itemclassName,
    .tvuExampleOutput .itemList .alignedLeftclassName .listItemContent .itemclassName {
      width: 50%;
      justify-content: flex-start; }
    .tvuExampleOutput .itemList .alignedLeftclassName .listItemTopbar .itemSimilarity,
    .tvuExampleOutput .itemList .alignedLeftclassName .listItemContent .itemSimilarity {
      width: 20%;
      justify-content: center; }
    .tvuExampleOutput .itemList .alignedLeftclassName .listItemTopbar .itemImage,
    .tvuExampleOutput .itemList .alignedLeftclassName .listItemContent .itemImage {
      width: 20%;
      justify-content: center; }
    .tvuExampleOutput .itemList .predictionResultList {
      padding: 0; }
    .tvuExampleOutput .itemList .listItemContent .itemSimilarity {
      font-size: 16px;
      font-family: "latosemibold"; }
    .tvuExampleOutput .itemList .mCustomScrollBox {
      width: 100%;
      height: auto !important;
      max-width: 100%; }
    .tvuExampleOutput .itemList .matchFoundResult {
      border: solid 2px #ff8f00;
      padding: 15px 10px;
      border-radius: 2px;
      margin-top: 0; }
      .tvuExampleOutput .itemList .matchFoundResult ul {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        font-size: 16px;
        text-align: center;
        color: #595959; }
        @media (max-width: 1200px) {
          .tvuExampleOutput .itemList .matchFoundResult ul {
            font-size: 14px; } }
        @media (max-width: 480px) {
          .tvuExampleOutput .itemList .matchFoundResult ul {
            font-size: 12px; } }
        .tvuExampleOutput .itemList .matchFoundResult ul b {
          font-family: "latosemibold";
          font-size: 18px;
          display: block; }
          @media (max-width: 1200px) {
            .tvuExampleOutput .itemList .matchFoundResult ul b {
              font-size: 14px; } }
          @media (max-width: 480px) {
            .tvuExampleOutput .itemList .matchFoundResult ul b {
              font-size: 12px; } }
        .tvuExampleOutput .itemList .matchFoundResult ul span {
          max-width: 200px;
          display: inline-block;
          line-height: initial;
          margin-bottom: -1px; }
      .tvuExampleOutput .itemList .matchFoundResult .itemclassName {
        width: 45%;
        word-break: break-word; }
      .tvuExampleOutput .itemList .matchFoundResult .itemSimilarity {
        width: 35%; }
    .tvuExampleOutput .itemList .mfRuslt .itemImage {
      width: 23%;
      text-align: left; }
    .tvuExampleOutput .itemList .mfRuslt .itemclassName {
      width: 25%; }
    .tvuExampleOutput .itemList .mfRuslt .itemSimilarity {
      width: 25%; }
  .tvuExampleOutput .itemList .listItemTopbar .itemImage,
  .tvuExampleOutput .itemList .listItemContent .itemImage {
    width: 23%;
    overflow: hidden;
    position: relative; }
    .tvuExampleOutput .itemList .listItemTopbar .itemImage img,
    .tvuExampleOutput .itemList .listItemContent .itemImage img {
      max-height: 52px; }
      @media (max-width: 480px) {
        .tvuExampleOutput .itemList .listItemTopbar .itemImage img,
        .tvuExampleOutput .itemList .listItemContent .itemImage img {
          max-height: 32px; } }
  .tvuExampleOutput .itemList .listItemTopbar .itemclassName,
  .tvuExampleOutput .itemList .listItemContent .itemclassName {
    width: 25%;
    word-break: break-word; }
  .tvuExampleOutput .itemList .listItemTopbar .itemSimilarity,
  .tvuExampleOutput .itemList .listItemContent .itemSimilarity {
    width: 25%; }
  .tvuExampleOutput .itemList .listItemTopbar .itemId,
  .tvuExampleOutput .itemList .listItemContent .itemId {
    display: none; }
  .tvuExampleOutput .matchFoundResult {
    border: solid 2px #ccc;
    padding: 5px;
    border-radius: 2px; }
    .tvuExampleOutput .matchFoundResult ul {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      font-size: 12px;
      text-align: center;
      color: #595959; }
      .tvuExampleOutput .matchFoundResult ul b {
        margin-right: 5px;
        font-family: "latosemibold"; }
      .tvuExampleOutput .matchFoundResult ul span {
        max-width: 90px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
        line-height: 10px;
        margin-bottom: -1px; }
    .tvuExampleOutput .matchFoundResult .itemImage {
      width: 23%; }
      .tvuExampleOutput .matchFoundResult .itemImage img {
        max-height: 52px; }
    .tvuExampleOutput .matchFoundResult .itemclassName {
      width: 30%;
      word-break: break-word; }
    .tvuExampleOutput .matchFoundResult .itemSimilarity {
      width: 25%; }
  .tvuExampleOutput .jsonResponse {
    display: inline-flex;
    color: #9646D7;
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
    line-height: 17px; }
  .tvuExampleOutput .thumbnailWrapper {
    border-top: 1px solid #E3E3E3;
    background-color: #F9FCFF;
    padding: 5px 20px;
    margin-top: 5px;
    margin-left: -20px;
    margin-right: -20px;
    height: 100px; }
    .tvuExampleOutput .thumbnailWrapper .uploadImageVideo {
      color: #595959;
      font-size: 12px;
      margin-bottom: 10px; }
    .tvuExampleOutput .thumbnailWrapper ul {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-direction: row;
      width: 100%;
      max-width: 1100px;
      overflow: hidden;
      white-space: nowrap;
      margin: 0;
      text-align: left; }
    .tvuExampleOutput .thumbnailWrapper .mCustomScrollBox {
      height: auto !important; }
    .tvuExampleOutput .thumbnailWrapper .thumbnail {
      width: 50px !important;
      height: 50px;
      border-radius: 5px;
      overflow: hidden;
      border: solid 2px #777;
      opacity: 0.5;
      box-shadow: 0px 0px 11px rgba(0, 0, 0, 0.12);
      margin: 0 10px 0 0;
      /*display: -webkit-inline-box;*/
      display: inline-flex;
      justify-content: center;
      /*align-items: center;*/
      background-color: #fff; }
      @media (max-width: 480px) {
        .tvuExampleOutput .thumbnailWrapper .thumbnail {
          width: 40px !important;
          height: 40px;
          margin-right: 15px; } }
      .tvuExampleOutput .thumbnailWrapper .thumbnail img {
        max-width: 60px;
        max-height: 60px; }
        @media (max-width: 480px) {
          .tvuExampleOutput .thumbnailWrapper .thumbnail img {
            max-width: 40px;
            max-height: 40px; } }
      .tvuExampleOutput .thumbnailWrapper .thumbnail:hover {
        opacity: 1;
        border-color: #ff8f00; }
    .tvuExampleOutput .thumbnailWrapper .active {
      opacity: 1;
      border-color: #ff8f00; }
  .tvuExampleOutput .modelIdNameGroup {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px 20px 0; }
    .tvuExampleOutput .modelIdNameGroup .group {
      display: inline-flex;
      flex-direction: column; }
    .tvuExampleOutput .modelIdNameGroup h5 {
      margin: 0 0 5px;
      color: #5071A6;
      font-size: 14px;
      font-family: "latosemibold";
      display: flex;
      align-items: center;
      position: relative; }
      .tvuExampleOutput .modelIdNameGroup h5:after {
        display: none; }
      .tvuExampleOutput .modelIdNameGroup h5.last, .tvuExampleOutput .modelIdNameGroup h5:last-child {
        margin-bottom: 0; }
      .tvuExampleOutput .modelIdNameGroup h5 span {
        color: #0A2E60;
        margin-left: 4px;
        font-family: "latosemibold"; }
      .tvuExampleOutput .modelIdNameGroup h5 .titleInfo {
        width: 14px;
        height: 14px;
        display: inline-block;
        margin-left: 6px;
        cursor: pointer;
        background: url(../img/ch-info-blue.svg) 0 0 no-repeat;
        background-size: contain; }
      .tvuExampleOutput .modelIdNameGroup h5 .customTooltip {
        top: 25px;
        left: 170px;
        white-space: normal;
        max-width: 235px;
        padding: 10px;
        border-radius: 10px; }
      .tvuExampleOutput .modelIdNameGroup h5 .titleInfo:hover + .customTooltip {
        visibility: visible;
        opacity: 1; }
  .tvuExampleOutput .eachTag {
    /*background-color: #f1f2f6;*/
    border: solid 2px #DB625C;
    color: #303030;
    padding: 2px 10px;
    border-radius: 6px;
    font-size: 16px;
    font-family: "latosemibold";
    display: inline-flex;
    justify-content: center;
    align-items: center; }
  .tvuExampleOutput .separateET {
    margin: 0 10px 10px 0; }
  .tvuExampleOutput .urlInfo {
    position: relative;
    margin-left: 5px;
    position: relative; }
    .tvuExampleOutput .urlInfo .customTooltip {
      top: 25px;
      left: auto;
      right: 0;
      color: #595959 !important;
      font-size: 14px; }
    .tvuExampleOutput .urlInfo:hover .customTooltip {
      visibility: visible;
      opacity: 1; }

#match_text {
  font-family: "Euclid Circular B";
  font-weight: 500;
  font-size: 18px;
  color: #9646D7; }

.trainModelBtn,
.addImageChatBtn {
  padding: 0 10px; }
  .trainModelBtn .icon,
  .addImageChatBtn .icon {
    margin-right: 10px; }

.addImageChatBtn.alertDesable {
  background: #f7f7f7;
  color: #b7b7b7;
  opacity: 1;
  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.08), inset 0px -1px 0px rgba(0, 0, 0, 0.1); }

.addImageChatBtn img {
  opacity: 0.5; }

.addImageChatBtn .alertTooltip {
  left: 0;
  right: auto !important;
  padding: 5px 10px;
  height: auto; }

.importModelsBtn,
.importModelBtn {
  padding: 0 10px;
  margin-left: 10px; }
  .importModelsBtn .icon,
  .importModelBtn .icon {
    margin-right: 10px; }

.modelFilter {
  position: relative;
  z-index: 912; }
  .modelFilter .modelfilterBtn {
    padding: 10px 30px 10px 12px;
    height: 36px;
    background: #FAF5FF url(../img/filter-purple.svg) 90% center no-repeat;
    box-shadow: 0px 2px 5px rgba(40, 40, 40, 0.1);
    border-radius: 10px;
    color: #360D57;
    font-size: 14px;
    font-family: "Euclid Circular B";
    font-weight: 500;
    display: flex;
    align-items: center;
    border: 1px solid #360D57;
    box-shadow: 0px 2px 5px rgba(40, 40, 40, 0.1); }
    .modelFilter .modelfilterBtn.active {
      background: #ffffff url(../img/filter-purple.svg) 10% center no-repeat;
      padding: 10px 5px 10px 37px; }
  .modelFilter .dropdown {
    width: 203px;
    background: #ffffff;
    box-shadow: 0px 3px 5px rgba(6, 0, 41, 0.2);
    border-radius: 6px;
    display: none;
    position: absolute;
    top: 40px;
    right: 0;
    margin: 0;
    padding: 10px 0; }
    .modelFilter .dropdown li {
      padding: 10px 15px;
      cursor: pointer; }
      .modelFilter .dropdown li label {
        font-family: "latomedium";
        font-size: 14px;
        color: #595959;
        margin: 0;
        display: flex;
        align-items: center; }
  .modelFilter .checkbox {
    cursor: pointer; }
    .modelFilter .checkbox input[type="checkbox"] {
      display: none;
      width: 18px;
      height: 18px; }
    .modelFilter .checkbox span {
      width: 20px;
      height: 20px;
      display: inline-block;
      border: 2px solid #8C9196;
      border-radius: 4px;
      margin-right: 10px;
      background-color: #ffffff; }
    .modelFilter .checkbox input[type="checkbox"]:checked + span {
      background: #0367A6 url(../img/ch-check-white.svg) center center no-repeat;
      border-color: #0367A6; }

.newDeleteMoel .modalHeader {
  padding: 0 20px 20px;
  position: relative;
  margin-bottom: 50px;
  width: 100%; }
  .newDeleteMoel .modalHeader h5 {
    font-weight: normal;
    text-transform: uppercase;
    margin: 0;
    color: #595959;
    font-size: 18px;
    text-align: center;
    font-weight: 500; }
  .newDeleteMoel .modalHeader .closeModal {
    top: 0;
    right: 0; }

.newDeleteMoel .tagDeleteWarn_files_inner {
  justify-content: flex-start;
  max-width: 580px;
  min-height: 320px;
  padding: 20px; }
  .newDeleteMoel .tagDeleteWarn_files_inner p {
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    color: #58595B;
    width: 100%;
    padding: 0;
    margin-bottom: 1rem; }

.newDeleteMoel .deleteWarnOptions a {
  padding: 8px 20px;
  font-weight: 400;
  border-radius: 6px;
  margin: 0 5px; }
  .newDeleteMoel .deleteWarnOptions a:focus, .newDeleteMoel .deleteWarnOptions a:hover {
    text-decoration: none; }

.newDeleteMoel .deleteWarnOptions .delete-trueFiles {
  background: transparent;
  color: #595959 !important;
  border: solid 1px #f7941d; }
  .newDeleteMoel .deleteWarnOptions .delete-trueFiles:hover, .newDeleteMoel .deleteWarnOptions .delete-trueFiles:focus {
    background: transparent;
    color: #595959 !important; }

.upload_model_modal .modal-lg {
  max-width: 1100px; }

.upload_model_modal .modal-md-modal {
  max-width: 580px; }

.upload_model_modal .modal-title {
  text-transform: uppercase;
  color: #210835;
  font-weight: 600;
  font-size: 16px;
  text-align: center; }

.upload_model_modal .modal-body {
  padding-bottom: 0; }

.upload_model_modal .folder_title {
  font-size: 16px;
  font-weight: 400;
  line-height: 18px;
  color: #535353;
  width: 100%;
  padding-left: 10px;
  padding-bottom: 10px; }
  .upload_model_modal .folder_title .info {
    display: inline-block;
    margin-left: 5px; }
  .upload_model_modal .folder_title .customTooltip {
    white-space: normal;
    word-wrap: break-word;
    min-width: 300px;
    padding: 10px;
    top: 25px;
    left: 0; }

.upload_model_modal .folderContainer #my_files_data_tab_id a,
.upload_model_modal .folderContainer #training_data_tab_id a,
.upload_model_modal .folderContainer #dataset_tab_id a {
  width: 100%;
  padding: 10px 15px;
  margin: 0; }

.upload_model_modal .folderContainer #my_files_data_tab_id,
.upload_model_modal .folderContainer #training_data_tab_id,
.upload_model_modal .folderContainer #dataset_tab_id {
  max-width: 325px; }

.upload_model_modal .folderContainer ul {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  height: auto;
  max-height: 490px;
  overflow-y: auto;
  align-content: flex-start;
  padding-top: 5px;
  position: relative;
  margin: 0 auto;
  padding-bottom: 30px; }

.upload_model_modal .folderContainer li {
  display: inline-flex;
  align-items: center;
  max-width: 260px;
  width: 100%;
  background-color: #f6f6f6;
  padding: 0;
  line-height: 20px;
  box-shadow: 0px 2px 5px rgba(40, 40, 40, 0.1);
  border-radius: 5px;
  margin: 10px 5px;
  position: relative;
  height: 52px;
  border: solid 2px #f6f6f6; }
  .upload_model_modal .folderContainer li .iconFolder {
    margin-right: 10px;
    width: 20px;
    height: 20px;
    background: url(../img/folder-icon.svg) 0 0 no-repeat;
    display: inline-block;
    line-height: 16px; }
  .upload_model_modal .folderContainer li a {
    color: #595959;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    width: 100%;
    padding: 10px 0 10px 15px;
    margin-right: 40px; }
  .upload_model_modal .folderContainer li.selected {
    border-color: #8020CF; }

.upload_model_modal .importNextBtn {
  width: 100%;
  height: 50px;
  border-radius: 5px;
  border: none;
  opacity: 1; }
  .upload_model_modal .importNextBtn:disabled {
    background: #F6F6F7;
    color: #8C9196 !important;
    pointer-events: none;
    opacity: 1; }

#importModel .modal-dialog {
  max-width: 580px; }

#importModel .uploadProcessInfo {
  position: absolute;
  top: 10px;
  width: 100%;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: #595959;
  z-index: 2;
  display: flex;
  justify-content: center; }

#importModel .loader {
  border: 2px solid #ffffff;
  /* Light grey */
  border-top: 2px solid #718BB4;
  /* Blue */
  border-radius: 50%;
  width: 22px;
  height: 22px;
  animation: spin 2s linear infinite;
  margin-right: 10px; }

@keyframes spin {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

.importUploadModel .perceptionCreateWrapper .form-group {
  margin-bottom: 20px; }

.importUploadModel .nav-tabs {
  margin-bottom: 25px; }

.importUploadModel .nav-tabs .active a {
  border-radius: 6px; }

.importUploadModel span.selectSet {
  font-weight: 500;
  font-size: 16px;
  line-height: 29px;
  color: #000000; }

.importUploadModel .modal-header .back {
  position: absolute;
  background-color: transparent;
  border: 0;
  z-index: 2;
  padding: 0;
  cursor: pointer;
  height: 14px;
  width: 10px;
  opacity: 0.7; }

.importUploadModel .perceptionCreateBtn {
  width: 100%;
  min-width: auto;
  max-width: 100%;
  border: none;
  border-radius: 5px;
  font-size: 18px;
  font-family: "latomedium";
  margin-top: 30px; }
  .importUploadModel .perceptionCreateBtn.disable {
    background: #F6F6F7;
    color: #8C9196 !important;
    opacity: 1; }

.importUploadModel .dropzone-scale-dataset .dropzone {
  padding-top: 30px; }

.modeModal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1005;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s ease-in; }
  .modeModal.alertMode {
    visibility: visible;
    opacity: 1; }
  .modeModal .innerContainer {
    width: 100%;
    max-width: 580px;
    border-radius: 10px;
    background: #ffffff; }
  .modeModal .modalHeader {
    padding: 15px 20px; }
    .modeModal .modalHeader h5 {
      font-size: 20px;
      color: #0A2E60;
      text-align: center;
      font-family: "latomedium";
      font-weight: 500; }
  .modeModal .modalBody {
    padding: 20px;
    text-align: center;
    color: #4C6588;
    font-size: 18px;
    font-family: "latomedium";
    font-weight: 500; }
    .modeModal .modalBody p {
      margin: 0; }
    .modeModal .modalBody .modeWrapper {
      color: #0A2E60;
      font-size: 18px;
      font-family: "latomedium";
      font-weight: 500;
      display: flex;
      justify-content: center;
      margin-bottom: 20px; }
      .modeModal .modalBody .modeWrapper .mode {
        color: #0A2E60;
        margin: 0 15px; }
      .modeModal .modalBody .modeWrapper .infoicon {
        display: inline; }
      .modeModal .modalBody .modeWrapper .customTooltip {
        width: 185px;
        border: 1px solid #F2F1F1;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
        border-radius: 5px;
        text-align: left;
        top: 30px;
        left: 0;
        color: #595959;
        font-size: 14px;
        padding: 15px;
        white-space: normal; }
  .modeModal .modalFooter {
    padding: 10px 20px 30px;
    display: flex;
    justify-content: center; }
    .modeModal .modalFooter button {
      min-width: 135px;
      height: 44px;
      margin: 0 10px;
      border: none;
      font-size: 16px;
      font-family: "latomedium";
      font-weight: 500; }

.createDtasetInfoModal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1005;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s ease-in; }
  .createDtasetInfoModal.show {
    visibility: visible;
    opacity: 1; }
  .createDtasetInfoModal .innerContainer {
    width: 100%;
    max-width: 450px;
    border-radius: 10px;
    background: #ffffff; }
  .createDtasetInfoModal .modalHeader {
    padding: 15px 20px;
    position: relative; }
    .createDtasetInfoModal .modalHeader h5 {
      font-size: 24px;
      color: #303030;
      text-align: left;
      font-weight: 400; }
  .createDtasetInfoModal .modalBody {
    padding: 0 20px 20px;
    text-align: left;
    color: #595959;
    font-size: 16px;
    font-weight: 400; }
    .createDtasetInfoModal .modalBody p {
      margin: 0; }
  .createDtasetInfoModal .modalFooter {
    padding: 10px 20px 20px;
    display: flex;
    justify-content: flex-end; }
    .createDtasetInfoModal .modalFooter a {
      min-width: 155px;
      height: 44px;
      border: none;
      font-size: 16px;
      font-family: "latomedium";
      font-weight: 500; }

.customModalDetailPage .facialGalleryWrapper ul li .classImg {
  max-height: none;
  width: 100%;
  height: 100%;
  object-fit: cover; }

.customModalDetailPage .objectListTrainingArea,
.customModalDetailPage .imageDetailTrainingArea {
  background-color: #ffffff;
  padding: 0 15px;
  border-radius: 6px; }

.customModalDetailPage .breadCrumb + .trainingAreaTopBar {
  margin-top: 30px; }

.customModalDetailPage .infoBox {
  min-width: 140px;
  max-width: 500px;
  height: 73px;
  background: #FFFFFF;
  box-shadow: 2px 5px 5px rgba(22, 22, 22, 0.08);
  border-radius: 10px;
  padding: 10px;
  text-align: center;
  margin-right: 30px; }
  .customModalDetailPage .infoBox h3 {
    font-family: "Euclid Circular B";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: #535353; }
  .customModalDetailPage .infoBox h5 {
    font-family: "Euclid Circular B";
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    color: #303030;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }

.customModalDetailPage .cardLayout .modelName {
  font-size: 14px;
  color: #303030;
  font-weight: 400; }

.customModalDetailPage .cardLayout .cdiWrapper {
  height: auto; }

.customModalDetailPage .cardLayout .detectionColor label {
  color: #535353; }

.customModalDetailPage hr {
  height: 0.5px;
  width: 100%;
  display: block;
  background-color: #D8D8D8;
  border: none;
  margin: 10px 0; }

.customModalDetailPage .testImagesButton {
  font-family: "Euclid Circular B";
  font-weight: 600;
  padding: 0 15px;
  gap: 10px;
  font-size: 14px; }

.customModalDetailPage .test-via-upload-obj,
.customModalDetailPage .test-via-up {
  font-weight: 600;
  margin-right: auto !important;
  padding: 0 15px;
  gap: 10px;
  font-size: 14px; }

.customModalDetailPage .addPersonBtn,
.customModalDetailPage .createPerceptionBtn {
  font-family: "latosemibold";
  font-weight: 600;
  padding: 0 15px !important;
  margin-left: 10px;
  margin-right: 0 !important; }
  .customModalDetailPage .addPersonBtn .alertTooltip,
  .customModalDetailPage .createPerceptionBtn .alertTooltip {
    top: 35px;
    right: 0; }

.customModalDetailPage .addPersonBtn {
  margin-left: auto; }

.customModalDetailPage .deepTrainingButton {
  font-family: "Euclid Circular B";
  font-weight: 500;
  filter: drop-shadow(0px 2px 5px rgba(40, 40, 40, 0.1));
  color: #352B63; }
  .customModalDetailPage .deepTrainingButton:hover, .customModalDetailPage .deepTrainingButton:focus {
    color: #352B63; }

.customModalDetailPage .title {
  margin: 15px 0 10px;
  font-size: 20px;
  font-family: "latosemibold";
  color: #5071A6; }

.customModalDetailPage .header {
  width: 100%;
  padding: 0;
  margin-top: 20px; }
  .customModalDetailPage .header ul {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px; }
    .customModalDetailPage .header ul li {
      display: inline-flex;
      flex-direction: column;
      padding: 10px 0;
      /*border-right: 1px solid #F2F2F2;*/
      width: 100%; }
      .customModalDetailPage .header ul li label {
        font-weight: 400;
        margin-bottom: 8px;
        color: #EAEAEA;
        font-size: 14px;
        line-height: 18px;
        font-family: "Euclid Circular B";
        letter-spacing: 0; }
      .customModalDetailPage .header ul li:first-child {
        max-width: 120px; }
      .customModalDetailPage .header ul li:nth-child(2) {
        max-width: 220px; }
      .customModalDetailPage .header ul li:nth-child(3) {
        max-width: 180px; }
      .customModalDetailPage .header ul li:nth-child(4) {
        max-width: 200px; }
      .customModalDetailPage .header ul li:nth-child(5) {
        max-width: 200px; }
      .customModalDetailPage .header ul li:nth-child(6) {
        max-width: 200px; }
      .customModalDetailPage .header ul li:nth-child(7) {
        max-width: 130px; }
      .customModalDetailPage .header ul li:last-child {
        max-width: 100px;
        align-items: end;
        border: none; }
      .customModalDetailPage .header ul li.empty {
        width: 42%;
        max-width: 42%; }
      .customModalDetailPage .header ul li p {
        font-size: 16px;
        font-weight: 600;
        color: #FFFFFF;
        height: 30px;
        font-family: "Euclid Circular B";
        font-style: normal;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%; }
      .customModalDetailPage .header ul li .copyUID {
        width: 100px;
        text-align: center; }
        .customModalDetailPage .header ul li .copyUID p {
          color: #FFFFFF;
          font-size: 14px;
          font-weight: 500;
          line-height: 24px;
          letter-spacing: 0;
          font-family: "Euclid Circular B";
          text-align: center;
          font-style: normal; }
        .customModalDetailPage .header ul li .copyUID .icon {
          color: #EAEAEA;
          width: 14px;
          height: 25px;
          display: inline-block; }
      .customModalDetailPage .header ul li.topBarModelName {
        min-width: 220px;
        max-width: 350px;
        width: auto; }
      .customModalDetailPage .header ul li.ownerEmail, .customModalDetailPage .header ul li.topBarUserMail {
        margin-left: auto;
        max-width: 250px; }
        .customModalDetailPage .header ul li.ownerEmail label,
        .customModalDetailPage .header ul li.ownerEmail p, .customModalDetailPage .header ul li.topBarUserMail label,
        .customModalDetailPage .header ul li.topBarUserMail p {
          text-align: center; }
      .customModalDetailPage .header ul li .togglebtnWrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column; }
        .customModalDetailPage .header ul li .togglebtnWrapper .labelText {
          display: block;
          margin: 0 0 15px;
          font-size: 14px;
          font-weight: 600;
          color: #0A2E60; }
      .customModalDetailPage .header ul li.topBarDataset {
        margin-right: 30px;
        max-width: none;
        width: auto; }
        .customModalDetailPage .header ul li.topBarDataset p {
          text-decoration: underline;
          text-underline-position: under;
          color: #fff;
          overflow: visible; }
          .customModalDetailPage .header ul li.topBarDataset p a {
            text-decoration: underline;
            text-underline-position: under;
            color: #fff; }
      .customModalDetailPage .header ul li.topBarTrainingLog {
        margin-right: auto; }
        .customModalDetailPage .header ul li.topBarTrainingLog p {
          text-decoration: underline;
          text-underline-position: under;
          color: #fff;
          overflow: visible; }
          .customModalDetailPage .header ul li.topBarTrainingLog p a {
            text-decoration: underline;
            text-underline-position: under;
            color: #fff; }
      .customModalDetailPage .header ul li.topBarCopyUUID {
        max-width: 100px; }

.customModalDetailPage .perceptionSearch {
  max-width: 280px;
  min-width: 280px;
  display: inline-block;
  margin: 0; }
  .customModalDetailPage .perceptionSearch input {
    background-color: #ffffff; }

.customModalDetailPage .trainingAreaButtons {
  display: flex;
  justify-content: space-between; }
  .customModalDetailPage .trainingAreaButtons .blueLightBorderBtn {
    margin-left: 10px; }
    .customModalDetailPage .trainingAreaButtons .blueLightBorderBtn:first-child {
      margin-left: 0; }
    .customModalDetailPage .trainingAreaButtons .blueLightBorderBtn.cancelBtn {
      border: none !important;
      color: #8020CF !important;
      display: none; }
  .customModalDetailPage .trainingAreaButtons .testModel {
    color: #303030;
    font-family: "Euclid Circular B";
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0;
    text-align: left;
    background: linear-gradient(267.94deg, #48FDE1 -23.98%, #60EFFF 96.66%);
    /* button */
    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.08), inset 0px -1px 0px rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    border: none;
    min-width: 130px;
    height: 36px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 5px 15px 5px 15px;
    gap: 10px;
    cursor: pointer; }
  .customModalDetailPage .trainingAreaButtons .editModel {
    height: 36px;
    width: 120px;
    font-size: 14px;
    border-radius: 10px;
    border: none;
    background-color: #352B63;
    color: #F2E9FA !important;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    padding: 5px 8px 5px 12px; }
    .customModalDetailPage .trainingAreaButtons .editModel .alertTooltip {
      top: 35px;
      right: 0; }
  .customModalDetailPage .trainingAreaButtons .apiScriptBtnEnd {
    margin-left: auto; }
  .customModalDetailPage .trainingAreaButtons .lightOrangeBtn,
  .customModalDetailPage .trainingAreaButtons .darkOrangeBtn,
  .customModalDetailPage .trainingAreaButtons .orange-button,
  .customModalDetailPage .trainingAreaButtons .lightGrayWithBlueTextBtn {
    height: 36px;
    min-width: 130px;
    border: 0;
    padding: 0 15px !important; }
  .customModalDetailPage .trainingAreaButtons .add_new_image {
    font-family: "Euclid Circular B";
    font-size: 14px;
    font-weight: 500;
    margin-left: 10px; }
    .customModalDetailPage .trainingAreaButtons .add_new_image.alertDesable {
      color: #b7b7b7 !important; }
      .customModalDetailPage .trainingAreaButtons .add_new_image.alertDesable .alertTooltip {
        top: 40px;
        right: 0; }
  .customModalDetailPage .trainingAreaButtons .add_new_image[disabled="true"],
  .customModalDetailPage .trainingAreaButtons .add_new_image[disabled="disabled"] {
    background: #f7f7f7;
    border: none;
    color: #b7b7b7 !important;
    pointer-events: none;
    box-shadow: none; }
    .customModalDetailPage .trainingAreaButtons .add_new_image[disabled="true"] img,
    .customModalDetailPage .trainingAreaButtons .add_new_image[disabled="disabled"] img {
      filter: invert(56%) sepia(7%) saturate(252%) hue-rotate(169deg) brightness(101%) contrast(86%); }
  .customModalDetailPage .trainingAreaButtons .editClassBtn {
    margin-left: 10px;
    cursor: pointer;
    font-family: "Euclid Circular B";
    font-weight: 500;
    font-size: 14px;
    background: transparent;
    border: 1px solid #360D57;
    color: #360D57;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    padding: 0 15px;
    min-height: 36px; }
    .customModalDetailPage .trainingAreaButtons .editClassBtn:hover, .customModalDetailPage .trainingAreaButtons .editClassBtn:focus {
      background: transparent;
      color: #360D57; }
  .customModalDetailPage .trainingAreaButtons .editClassBtn[disabled="true"],
  .customModalDetailPage .trainingAreaButtons .editClassBtn[disabled="disabled"] {
    border: 1px solid #EAEAEA !important;
    color: #B7B7B7 !important;
    pointer-events: none; }
    .customModalDetailPage .trainingAreaButtons .editClassBtn[disabled="true"] img,
    .customModalDetailPage .trainingAreaButtons .editClassBtn[disabled="disabled"] img {
      filter: invert(56%) sepia(7%) saturate(252%) hue-rotate(169deg) brightness(101%) contrast(86%); }
  .customModalDetailPage .trainingAreaButtons .cancelBtn {
    font-weight: 600; }
  .customModalDetailPage .trainingAreaButtons .cancelBtn[disabled="true"],
  .customModalDetailPage .trainingAreaButtons .cancelBtn[disabled="disabled"] {
    background: #F6F6F7;
    box-shadow: 2px 5px 20px rgba(65, 65, 65, 0.08);
    color: #8C9196;
    font-weight: 600;
    pointer-events: none;
    border-color: transparent; }
  .customModalDetailPage .trainingAreaButtons .detailActionDropdown .actionBtn {
    width: 35px;
    height: 35px;
    background: url(../img/option-vellips-primary.svg) center center no-repeat;
    color: #D9D8D8; }
  .customModalDetailPage .trainingAreaButtons .detailActionDropdown .actionItemList {
    top: 40px;
    right: 10px; }
  .customModalDetailPage .trainingAreaButtons .disable_action {
    color: #b7b7b7; }
    .customModalDetailPage .trainingAreaButtons .disable_action .alertTooltip {
      top: 40px;
      right: 0;
      padding: 5px 10px;
      min-width: 340px;
      word-break: break-all;
      white-space: normal;
      height: auto; }
  .customModalDetailPage .trainingAreaButtons .disabledTooltipHover {
    position: relative;
    pointer-events: auto !important;
    cursor: default; }
    .customModalDetailPage .trainingAreaButtons .disabledTooltipHover .customTooltip {
      top: 40px;
      left: 0; }
    .customModalDetailPage .trainingAreaButtons .disabledTooltipHover:hover {
      color: #b7b7b7; }
      .customModalDetailPage .trainingAreaButtons .disabledTooltipHover:hover .customTooltip {
        visibility: visible;
        opacity: 1; }
    .customModalDetailPage .trainingAreaButtons .disabledTooltipHover:focus {
      color: #b7b7b7; }

.customModalDetailPage .imageActionBar {
  margin-top: 20px;
  display: none; }
  .customModalDetailPage .imageActionBar .selectAllCheckbox {
    color: #8020CF;
    font-size: 14px;
    font-weight: 700; }
  .customModalDetailPage .imageActionBar button {
    border: none;
    box-shadow: none;
    background: transparent; }
  .customModalDetailPage .imageActionBar .selectedImage {
    font-size: 14px;
    font-weight: 600;
    color: #4E4576;
    margin-left: 30px;
    display: none; }
    .customModalDetailPage .imageActionBar .selectedImage .itemCounter {
      margin-right: 5px; }

.datasetDropdown .easy-autocomplete-container {
  top: 55px;
  width: 100%; }
  .datasetDropdown .easy-autocomplete-container ul {
    background: #f7f7f7;
    box-shadow: none; }
    .datasetDropdown .easy-autocomplete-container ul li {
      background: #f7f7f7 !important; }
      .datasetDropdown .easy-autocomplete-container ul li.selected {
        background: #F9F2FF !important; }

.datasetDropdown .itemBtn {
  border-color: #e0e0e0;
  background: #f7f7f7 url(../img/trangle-down-arrow-lightblue.svg) 97% center no-repeat; }
  .datasetDropdown .itemBtn.up {
    background: #f7f7f7 url(../img/trangle-up-arrow-lightblue.svg) 97% center no-repeat; }
  .datasetDropdown .itemBtn:focus {
    outline-color: #8020CF !important;
    color: #202223 !important;
    outline-style: solid !important;
    outline-width: 1px !important; }

.datasetDropdown .itemBtn {
  height: 44px;
  font-size: 16px;
  max-width: 508px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: #595959;
  font-family: "latomedium";
  font-weight: 500;
  cursor: pointer;
  box-sizing: border-box;
  padding-left: 0; }
  .datasetDropdown .itemBtn:before {
    width: 40px;
    height: 40px;
    background: url(../img/Search.svg) 12px center no-repeat !important;
    position: absolute;
    left: 0;
    content: '';
    z-index: 1; }
  .datasetDropdown .itemBtn label {
    color: #535353;
    margin: 0;
    background: transparent; }
  .datasetDropdown .itemBtn .id {
    width: 100%;
    max-width: 20%;
    padding-left: 40px;
    font-weight: 400; }
    .datasetDropdown .itemBtn .id label {
      background: transparent; }
  .datasetDropdown .itemBtn .name {
    width: 100%;
    max-width: 60%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 10px;
    color: #303030; }
  .datasetDropdown .itemBtn .type {
    width: 100%;
    max-width: 10%;
    text-align: center; }
    .datasetDropdown .itemBtn .type .customTooltip {
      display: none; }
  .datasetDropdown .itemBtn .w-65 {
    width: 65%;
    padding-left: 40px; }
  .datasetDropdown .itemBtn .w-35 {
    width: 35%;
    text-align: right; }
  .datasetDropdown .itemBtn .w-50 {
    padding-left: 20px; }
  .datasetDropdown .itemBtn #network_model_key {
    padding-left: 40px; }
  .datasetDropdown .itemBtn #network_model_key + .w-50 {
    text-indent: 10px; }
  .datasetDropdown .itemBtn #speed_key {
    text-align: left;
    text-indent: 10px; }

.datasetDropdown .dropdownItemList {
  padding: 10px 15px 20px 0 !important;
  top: 55px;
  border-radius: 0 0 6px 6px;
  background-color: #f7f7f7;
  max-width: 508px; }
  .datasetDropdown .dropdownItemList .mCSB_container {
    padding-bottom: 50px;
    padding-left: 40px; }
  .datasetDropdown .dropdownItemList li {
    display: flex;
    justify-content: space-between;
    min-height: 60px;
    align-items: center;
    font-size: 14px;
    color: #595959;
    font-family: "latomedium";
    font-weight: 400;
    cursor: pointer;
    box-sizing: border-box;
    max-width: 480px;
    padding-right: 23px !important;
    position: relative; }
    .datasetDropdown .dropdownItemList li label {
      color: #535353;
      margin: 0;
      font-size: 14px;
      font-weight: 400;
      background: transparent; }
    .datasetDropdown .dropdownItemList li .id {
      width: 100%;
      max-width: 18%; }
    .datasetDropdown .dropdownItemList li .name {
      width: 100%;
      max-width: 76%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      padding-right: 10px;
      color: #303030; }
    .datasetDropdown .dropdownItemList li .type {
      width: 100%;
      max-width: 12%;
      text-align: center; }
      .datasetDropdown .dropdownItemList li .type .customTooltip {
        top: 24px;
        right: 15px;
        font-size: 15px; }
    .datasetDropdown .dropdownItemList li .w-65 {
      width: 65%; }
    .datasetDropdown .dropdownItemList li .w-35 {
      width: 35%;
      text-align: right; }
    .datasetDropdown .dropdownItemList li.active:after {
      border: solid 1px #8020cf;
      position: absolute;
      top: 0;
      left: -10px;
      content: '';
      width: 96%;
      height: 100%; }

.createImgClassificationAddParametersModal,
.createImgClassificationModal,
.createImgClassificationAddClassModal {
  padding-right: 0 !important; }
  .createImgClassificationAddParametersModal .processHighlightBar,
  .createImgClassificationModal .processHighlightBar,
  .createImgClassificationAddClassModal .processHighlightBar {
    /*
		max-width: 524px;
		height: 110px;*/
    margin: 20px auto 55px;
    display: flex;
    flex-wrap: wrap; }
    .createImgClassificationAddParametersModal .processHighlightBar div,
    .createImgClassificationModal .processHighlightBar div,
    .createImgClassificationAddClassModal .processHighlightBar div {
      width: 100%;
      display: flex;
      justify-content: space-between; }
      .createImgClassificationAddParametersModal .processHighlightBar div span,
      .createImgClassificationModal .processHighlightBar div span,
      .createImgClassificationAddClassModal .processHighlightBar div span {
        font-size: 14px;
        width: 30%;
        text-align: center;
        font-family: "Euclid Circular B";
        line-height: 14px;
        font-weight: 500;
        color: #AAAAAA; }
        .createImgClassificationAddParametersModal .processHighlightBar div span.active,
        .createImgClassificationModal .processHighlightBar div span.active,
        .createImgClassificationAddClassModal .processHighlightBar div span.active {
          color: #210835;
          font-weight: 500; }
    .createImgClassificationAddParametersModal .processHighlightBar ul,
    .createImgClassificationModal .processHighlightBar ul,
    .createImgClassificationAddClassModal .processHighlightBar ul {
      padding: 0;
      width: 100%;
      height: 8px;
      border-radius: 8px;
      overflow: hidden;
      background-color: #F2E9FA;
      display: flex; }
      .createImgClassificationAddParametersModal .processHighlightBar ul div,
      .createImgClassificationModal .processHighlightBar ul div,
      .createImgClassificationAddClassModal .processHighlightBar ul div {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: white; }
      .createImgClassificationAddParametersModal .processHighlightBar ul li,
      .createImgClassificationModal .processHighlightBar ul li,
      .createImgClassificationAddClassModal .processHighlightBar ul li {
        height: 8px;
        border-radius: 8px; }
        .createImgClassificationAddParametersModal .processHighlightBar ul li:nth-child(1),
        .createImgClassificationModal .processHighlightBar ul li:nth-child(1),
        .createImgClassificationAddClassModal .processHighlightBar ul li:nth-child(1) {
          width: 55px; }
        .createImgClassificationAddParametersModal .processHighlightBar ul li:nth-child(3),
        .createImgClassificationModal .processHighlightBar ul li:nth-child(3),
        .createImgClassificationAddClassModal .processHighlightBar ul li:nth-child(3) {
          width: 220px; }
        .createImgClassificationAddParametersModal .processHighlightBar ul li:nth-child(5),
        .createImgClassificationModal .processHighlightBar ul li:nth-child(5),
        .createImgClassificationAddClassModal .processHighlightBar ul li:nth-child(5) {
          width: 220px; }
        .createImgClassificationAddParametersModal .processHighlightBar ul li:nth-child(7),
        .createImgClassificationModal .processHighlightBar ul li:nth-child(7),
        .createImgClassificationAddClassModal .processHighlightBar ul li:nth-child(7) {
          width: 55px; }
        .createImgClassificationAddParametersModal .processHighlightBar ul li.active,
        .createImgClassificationModal .processHighlightBar ul li.active,
        .createImgClassificationAddClassModal .processHighlightBar ul li.active {
          background-color: #9646D7; }
  .createImgClassificationAddParametersModal .cicmNextBtn,
  .createImgClassificationAddParametersModal .createBtn,
  .createImgClassificationModal .cicmNextBtn,
  .createImgClassificationModal .createBtn,
  .createImgClassificationAddClassModal .cicmNextBtn,
  .createImgClassificationAddClassModal .createBtn {
    padding: 5px 12px;
    height: 44px;
    width: 250px;
    border-radius: 10px;
    margin-top: auto;
    margin-left: auto;
    font-size: 18px;
    font-weight: 500;
    font-family: "latomedium";
    background: #8020CF;
    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.08), inset 0px -1px 0px rgba(0, 0, 0, 0.2); }
    .createImgClassificationAddParametersModal .cicmNextBtn:disabled,
    .createImgClassificationAddParametersModal .createBtn:disabled,
    .createImgClassificationModal .cicmNextBtn:disabled,
    .createImgClassificationModal .createBtn:disabled,
    .createImgClassificationAddClassModal .cicmNextBtn:disabled,
    .createImgClassificationAddClassModal .createBtn:disabled {
      background: #F7F7F7;
      color: #B7B7B7 !important;
      pointer-events: none;
      opacity: 1;
      border: none; }
  .createImgClassificationAddParametersModal .modal-header,
  .createImgClassificationModal .modal-header,
  .createImgClassificationAddClassModal .modal-header {
    padding-left: 30px;
    padding-right: 30px;
    line-height: 20px; }
  .createImgClassificationAddParametersModal .modal-dialog,
  .createImgClassificationModal .modal-dialog,
  .createImgClassificationAddClassModal .modal-dialog {
    max-width: 630px;
    align-items: center;
    margin: 0 auto; }
  .createImgClassificationAddParametersModal .modal-body,
  .createImgClassificationModal .modal-body,
  .createImgClassificationAddClassModal .modal-body {
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 0;
    padding-top: 0;
    min-height: 350px; }
    .createImgClassificationAddParametersModal .modal-body form,
    .createImgClassificationModal .modal-body form,
    .createImgClassificationAddClassModal .modal-body form {
      margin-bottom: 0;
      display: flex;
      flex-direction: column;
      min-height: 300px; }
    .createImgClassificationAddParametersModal .modal-body h5,
    .createImgClassificationModal .modal-body h5,
    .createImgClassificationAddClassModal .modal-body h5 {
      color: #0A2E60;
      font-size: 18px;
      margin: 10px 0 10px;
      font-family: "latomedium";
      font-weight: 500; }
  .createImgClassificationAddParametersModal .modal-title,
  .createImgClassificationModal .modal-title,
  .createImgClassificationAddClassModal .modal-title {
    text-transform: capitalize; }
  .createImgClassificationAddParametersModal label,
  .createImgClassificationModal label,
  .createImgClassificationAddClassModal label {
    font-size: 16px;
    color: #210835;
    font-family: "Euclid Circular B";
    font-weight: 500;
    font-style: normal;
    margin-bottom: 5px;
    width: 100%; }
    .createImgClassificationAddParametersModal label .icon,
    .createImgClassificationModal label .icon,
    .createImgClassificationAddClassModal label .icon {
      margin-left: 5px; }
  .createImgClassificationAddParametersModal label.classLabel,
  .createImgClassificationModal label.classLabel,
  .createImgClassificationAddClassModal label.classLabel {
    color: #BF2600; }
  .createImgClassificationAddParametersModal .form-control,
  .createImgClassificationModal .form-control,
  .createImgClassificationAddClassModal .form-control {
    border-radius: 5px;
    padding-left: 28px;
    padding-right: 28px;
    color: #4E4576;
    font-size: 14px;
    line-height: 18px;
    font-weight: 400;
    transition: "Euclid Circular B";
    box-sizing: border-box;
    height: 50px;
    background: #F7F7F7;
    border: 1px solid #EAEAEA; }
    .createImgClassificationAddParametersModal .form-control:focus,
    .createImgClassificationModal .form-control:focus,
    .createImgClassificationAddClassModal .form-control:focus {
      border: 1px solid #8020CF;
      color: #210835;
      font-weight: 600;
      font-size: 14px;
      line-height: 20px; }

.trainModelDropdown {
  position: absolute;
  top: 45px;
  left: 0;
  width: 100%;
  background: #F7F7F7;
  border: 1px solid #EAEAEA;
  border-radius: 8px;
  margin: 0;
  padding: 5px 0 !important;
  flex-direction: column !important;
  display: none;
  max-height: 200px;
  overflow: hidden; }

.createImgClassificationAddParametersModal,
.createImgClassificationAddClassModal,
.createFacialRecognitionModel {
  padding-right: 0 !important; }
  .createImgClassificationAddParametersModal .backBtn,
  .createImgClassificationAddClassModal .backBtn,
  .createFacialRecognitionModel .backBtn {
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0; }
  .createImgClassificationAddParametersModal .label,
  .createImgClassificationAddClassModal .label,
  .createFacialRecognitionModel .label {
    color: #4C6588;
    margin-bottom: 20px; }
  .createImgClassificationAddParametersModal .addClassBtn,
  .createImgClassificationAddClassModal .addClassBtn,
  .createFacialRecognitionModel .addClassBtn {
    height: 50px;
    border: 0;
    min-width: 115px;
    font-size: 14px;
    font-weight: 500;
    font-family: "Euclid Circular B";
    background: #F2E9FA;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), inset 0px -1px 0px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    color: #303030; }
    .createImgClassificationAddParametersModal .addClassBtn:disabled,
    .createImgClassificationAddClassModal .addClassBtn:disabled,
    .createFacialRecognitionModel .addClassBtn:disabled {
      background: #F6F6F7;
      color: #b7b7b7 !important;
      pointer-events: none;
      opacity: 1;
      border: none;
      box-shadow: none; }
  .createImgClassificationAddParametersModal .classes p,
  .createImgClassificationAddClassModal .classes p,
  .createFacialRecognitionModel .classes p {
    color: #B7B7B7;
    font-size: 16px;
    line-height: 20px;
    font-weight: 600; }
  .createImgClassificationAddParametersModal .classes .classTag,
  .createImgClassificationAddClassModal .classes .classTag,
  .createFacialRecognitionModel .classes .classTag {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 15px;
    background: #210835;
    border-radius: 6px;
    margin-right: 8px;
    margin-bottom: 8px;
    color: #F2E9FA;
    font-family: "Euclid Circular B";
    font-size: 14px;
    font-weight: 600; }
    .createImgClassificationAddParametersModal .classes .classTag .closeTag,
    .createImgClassificationAddClassModal .classes .classTag .closeTag,
    .createFacialRecognitionModel .classes .classTag .closeTag {
      width: 12px;
      height: 12px;
      background: url(../img/ch-close-white-normal.svg) center center no-repeat;
      margin-left: 10px;
      border: none; }
  .createImgClassificationAddParametersModal .inputGroup,
  .createImgClassificationAddClassModal .inputGroup,
  .createFacialRecognitionModel .inputGroup {
    display: inline-block;
    width: 75%;
    margin-right: 10px; }

.createImgClassificationAddClassModal .inputGroup {
  width: 78%; }

.createImgClassificationAddClassModal .lightOrangeBtn {
  border-radius: 10px; }

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

.selectTrainingOptionModal,
.createPerceptionModal,
.createPerceptionParametersModal,
.tcCreateFacialRecognitionModel,
.createFacialRecognitionModel,
.createModelGroupModal {
  padding-right: 0 !important; }
  .selectTrainingOptionModal .processHighlightBar,
  .createPerceptionModal .processHighlightBar,
  .createPerceptionParametersModal .processHighlightBar,
  .tcCreateFacialRecognitionModel .processHighlightBar,
  .createFacialRecognitionModel .processHighlightBar,
  .createModelGroupModal .processHighlightBar {
    margin: 20px auto 40px;
    display: flex;
    flex-wrap: wrap; }
    .selectTrainingOptionModal .processHighlightBar .stepNames,
    .createPerceptionModal .processHighlightBar .stepNames,
    .createPerceptionParametersModal .processHighlightBar .stepNames,
    .tcCreateFacialRecognitionModel .processHighlightBar .stepNames,
    .createFacialRecognitionModel .processHighlightBar .stepNames,
    .createModelGroupModal .processHighlightBar .stepNames {
      width: 97%;
      display: flex;
      justify-content: space-evenly; }
    .selectTrainingOptionModal .processHighlightBar span,
    .createPerceptionModal .processHighlightBar span,
    .createPerceptionParametersModal .processHighlightBar span,
    .tcCreateFacialRecognitionModel .processHighlightBar span,
    .createFacialRecognitionModel .processHighlightBar span,
    .createModelGroupModal .processHighlightBar span {
      font-size: 14px;
      font-weight: 500;
      color: #4E4576;
      width: 50%;
      text-align: center; }
      .selectTrainingOptionModal .processHighlightBar span.active,
      .createPerceptionModal .processHighlightBar span.active,
      .createPerceptionParametersModal .processHighlightBar span.active,
      .tcCreateFacialRecognitionModel .processHighlightBar span.active,
      .createFacialRecognitionModel .processHighlightBar span.active,
      .createModelGroupModal .processHighlightBar span.active {
        color: #210835;
        font-weight: 600; }
    .selectTrainingOptionModal .processHighlightBar ul,
    .createPerceptionModal .processHighlightBar ul,
    .createPerceptionParametersModal .processHighlightBar ul,
    .tcCreateFacialRecognitionModel .processHighlightBar ul,
    .createFacialRecognitionModel .processHighlightBar ul,
    .createModelGroupModal .processHighlightBar ul {
      padding: 0;
      margin: 0 auto 20px;
      width: 100%;
      height: 8px;
      border-radius: 8px;
      overflow: hidden;
      background-color: #D8D8D8;
      display: flex; }
      .selectTrainingOptionModal .processHighlightBar ul div,
      .createPerceptionModal .processHighlightBar ul div,
      .createPerceptionParametersModal .processHighlightBar ul div,
      .tcCreateFacialRecognitionModel .processHighlightBar ul div,
      .createFacialRecognitionModel .processHighlightBar ul div,
      .createModelGroupModal .processHighlightBar ul div {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: white; }
      .selectTrainingOptionModal .processHighlightBar ul li,
      .createPerceptionModal .processHighlightBar ul li,
      .createPerceptionParametersModal .processHighlightBar ul li,
      .tcCreateFacialRecognitionModel .processHighlightBar ul li,
      .createFacialRecognitionModel .processHighlightBar ul li,
      .createModelGroupModal .processHighlightBar ul li {
        width: 33%; }
        .selectTrainingOptionModal .processHighlightBar ul li.active,
        .createPerceptionModal .processHighlightBar ul li.active,
        .createPerceptionParametersModal .processHighlightBar ul li.active,
        .tcCreateFacialRecognitionModel .processHighlightBar ul li.active,
        .createFacialRecognitionModel .processHighlightBar ul li.active,
        .createModelGroupModal .processHighlightBar ul li.active {
          background-color: #9646D7; }
  .selectTrainingOptionModal .tcfrmmNextBtn,
  .selectTrainingOptionModal .createFrmBtn,
  .createPerceptionModal .tcfrmmNextBtn,
  .createPerceptionModal .createFrmBtn,
  .createPerceptionParametersModal .tcfrmmNextBtn,
  .createPerceptionParametersModal .createFrmBtn,
  .tcCreateFacialRecognitionModel .tcfrmmNextBtn,
  .tcCreateFacialRecognitionModel .createFrmBtn,
  .createFacialRecognitionModel .tcfrmmNextBtn,
  .createFacialRecognitionModel .createFrmBtn,
  .createModelGroupModal .tcfrmmNextBtn,
  .createModelGroupModal .createFrmBtn {
    height: 44px;
    width: 250px;
    border-radius: 10px;
    margin-top: 30px;
    font-size: 18px;
    font-weight: 500;
    font-family: "Euclid Circular B";
    float: right; }
    .selectTrainingOptionModal .tcfrmmNextBtn:disabled,
    .selectTrainingOptionModal .createFrmBtn:disabled,
    .createPerceptionModal .tcfrmmNextBtn:disabled,
    .createPerceptionModal .createFrmBtn:disabled,
    .createPerceptionParametersModal .tcfrmmNextBtn:disabled,
    .createPerceptionParametersModal .createFrmBtn:disabled,
    .tcCreateFacialRecognitionModel .tcfrmmNextBtn:disabled,
    .tcCreateFacialRecognitionModel .createFrmBtn:disabled,
    .createFacialRecognitionModel .tcfrmmNextBtn:disabled,
    .createFacialRecognitionModel .createFrmBtn:disabled,
    .createModelGroupModal .tcfrmmNextBtn:disabled,
    .createModelGroupModal .createFrmBtn:disabled {
      background: #F6F6F7;
      color: #b7b7b7 !important;
      pointer-events: none;
      opacity: 1;
      border: none; }
  .selectTrainingOptionModal .nextBtn, .selectTrainingOptionModal .saveBtn,
  .createPerceptionModal .nextBtn,
  .createPerceptionModal .saveBtn,
  .createPerceptionParametersModal .nextBtn,
  .createPerceptionParametersModal .saveBtn,
  .tcCreateFacialRecognitionModel .nextBtn,
  .tcCreateFacialRecognitionModel .saveBtn,
  .createFacialRecognitionModel .nextBtn,
  .createFacialRecognitionModel .saveBtn,
  .createModelGroupModal .nextBtn,
  .createModelGroupModal .saveBtn {
    height: 44px;
    width: 300px;
    border-radius: 10px;
    margin-top: 30px;
    font-size: 14px;
    font-weight: 500;
    font-family: "Euclid Circular B";
    padding: 5px 12px;
    margin: 0 auto; }
    .selectTrainingOptionModal .nextBtn:disabled, .selectTrainingOptionModal .saveBtn:disabled,
    .createPerceptionModal .nextBtn:disabled,
    .createPerceptionModal .saveBtn:disabled,
    .createPerceptionParametersModal .nextBtn:disabled,
    .createPerceptionParametersModal .saveBtn:disabled,
    .tcCreateFacialRecognitionModel .nextBtn:disabled,
    .tcCreateFacialRecognitionModel .saveBtn:disabled,
    .createFacialRecognitionModel .nextBtn:disabled,
    .createFacialRecognitionModel .saveBtn:disabled,
    .createModelGroupModal .nextBtn:disabled,
    .createModelGroupModal .saveBtn:disabled {
      background: #F6F6F7;
      color: #b7b7b7 !important;
      pointer-events: none;
      opacity: 1;
      border: none; }
  .selectTrainingOptionModal .modal-header,
  .createPerceptionModal .modal-header,
  .createPerceptionParametersModal .modal-header,
  .tcCreateFacialRecognitionModel .modal-header,
  .createFacialRecognitionModel .modal-header,
  .createModelGroupModal .modal-header {
    padding-left: 25px;
    padding-right: 25px;
    line-height: 20px; }
  .selectTrainingOptionModal .modal-dialog,
  .createPerceptionModal .modal-dialog,
  .createPerceptionParametersModal .modal-dialog,
  .tcCreateFacialRecognitionModel .modal-dialog,
  .createFacialRecognitionModel .modal-dialog,
  .createModelGroupModal .modal-dialog {
    max-width: 580px;
    align-items: center;
    margin: 0 auto; }
  .selectTrainingOptionModal .modal-body,
  .createPerceptionModal .modal-body,
  .createPerceptionParametersModal .modal-body,
  .tcCreateFacialRecognitionModel .modal-body,
  .createFacialRecognitionModel .modal-body,
  .createModelGroupModal .modal-body {
    padding: 0 25px; }
    .selectTrainingOptionModal .modal-body form,
    .createPerceptionModal .modal-body form,
    .createPerceptionParametersModal .modal-body form,
    .tcCreateFacialRecognitionModel .modal-body form,
    .createFacialRecognitionModel .modal-body form,
    .createModelGroupModal .modal-body form {
      margin-bottom: 0; }
    .selectTrainingOptionModal .modal-body h5,
    .createPerceptionModal .modal-body h5,
    .createPerceptionParametersModal .modal-body h5,
    .tcCreateFacialRecognitionModel .modal-body h5,
    .createFacialRecognitionModel .modal-body h5,
    .createModelGroupModal .modal-body h5 {
      color: #210835;
      font-size: 16px;
      margin: 10px 0 10px;
      font-family: "Euclid Circular B";
      font-weight: 500; }
  .selectTrainingOptionModal .modal-title,
  .createPerceptionModal .modal-title,
  .createPerceptionParametersModal .modal-title,
  .tcCreateFacialRecognitionModel .modal-title,
  .createFacialRecognitionModel .modal-title,
  .createModelGroupModal .modal-title {
    text-transform: capitalize; }
  .selectTrainingOptionModal label,
  .createPerceptionModal label,
  .createPerceptionParametersModal label,
  .tcCreateFacialRecognitionModel label,
  .createFacialRecognitionModel label,
  .createModelGroupModal label {
    font-size: 16px;
    margin: 0;
    color: #210835;
    font-family: "Euclid Circular B";
    font-weight: 500;
    margin-bottom: 5px; }
    .selectTrainingOptionModal label .customTooltip,
    .createPerceptionModal label .customTooltip,
    .createPerceptionParametersModal label .customTooltip,
    .tcCreateFacialRecognitionModel label .customTooltip,
    .createFacialRecognitionModel label .customTooltip,
    .createModelGroupModal label .customTooltip {
      top: 25px;
      left: 0;
      font-style: normal; }
  .selectTrainingOptionModal .form-control,
  .createPerceptionModal .form-control,
  .createPerceptionParametersModal .form-control,
  .tcCreateFacialRecognitionModel .form-control,
  .createFacialRecognitionModel .form-control,
  .createModelGroupModal .form-control {
    background: #FAFBFC;
    border: 1px solid #DFE1E6;
    border-radius: 5px;
    height: 48px;
    padding-left: 20px;
    padding-right: 20px;
    color: #4E4576;
    font-size: 14px;
    line-height: 18px;
    font-weight: 400;
    transition: all 0.2s ease-in; }
    .selectTrainingOptionModal .form-control:focus,
    .createPerceptionModal .form-control:focus,
    .createPerceptionParametersModal .form-control:focus,
    .tcCreateFacialRecognitionModel .form-control:focus,
    .createFacialRecognitionModel .form-control:focus,
    .createModelGroupModal .form-control:focus {
      border: 1px solid #8020CF;
      background: #F7F7F7;
      color: #210835;
      font-weight: 600;
      font-size: 14px;
      line-height: 20px; }

.tcCreateFacialRecognitionModel .processHighlightBar,
.createFacialRecognitionModel .processHighlightBar {
  margin-bottom: 55px; }

.createFacialRecognitionModel .modal-dialog {
  max-width: 630px !important; }

.createFacialRecognitionModel .modal-title {
  text-transform: uppercase !important; }

.createFacialRecognitionModel .classes {
  min-height: 50px;
  max-height: 280px;
  overflow-y: auto; }

.createFacialRecognitionModel .createFrmBtn {
  font-size: 14px;
  font-weight: 500; }

.createFacialRecognitionModel .classTag {
  max-width: 580px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  display: inline-block !important;
  padding: 5px 30px 5px 12px !important;
  line-height: 20px; }

.createFacialRecognitionModel .closeTag {
  position: absolute;
  right: 10px;
  top: 9px; }

.trainingAlerModal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1005;
  transition: all 0.2s ease-in;
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
  opacity: 0; }
  .trainingAlerModal.alertModal {
    visibility: visible;
    opacity: 1; }
  .trainingAlerModal .innerContainer {
    max-width: 480px;
    width: 100%;
    background: #ffffff;
    border-radius: 10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    padding: 50px 30px 20px;
    font-size: 18px;
    font-weight: 500;
    font-family: "latomedium";
    color: #0A2E60; }
    .trainingAlerModal .innerContainer .infoIcon {
      margin-right: 20px; }
      .trainingAlerModal .innerContainer .infoIcon img {
        width: 20px;
        height: 20px; }
    .trainingAlerModal .innerContainer .closeBtn {
      min-width: 90px;
      height: 44px;
      font-size: 18px;
      font-weight: 500;
      font-family: "latomedium";
      margin-left: auto;
      margin-top: 30px;
      border: none;
      box-shadow: none; }

.addNewClassModal {
  padding-right: 0 !important;
  background: rgba(0, 0, 0, 0.5); }
  .addNewClassModal .doneBtn {
    height: 50px;
    width: 100%;
    border-radius: 5px;
    margin-top: 30px;
    font-size: 18px;
    font-weight: 500;
    font-family: "latomedium"; }
    .addNewClassModal .doneBtn:disabled {
      background: #F6F6F7;
      color: #8C9196 !important;
      pointer-events: none;
      opacity: 1;
      border: none; }
  .addNewClassModal .modal-header {
    padding-left: 25px;
    padding-right: 25px;
    width: 100%;
    border: none; }
  .addNewClassModal .modal-dialog {
    max-width: 510px;
    align-items: center;
    margin: 0 auto; }
  .addNewClassModal .modal-content {
    background: #ffffff !important;
    border-radius: 10px;
    margin: 0;
    flex-direction: column !important; }
  .addNewClassModal .modal-body {
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 20px;
    padding-top: 0;
    width: 100%; }
    .addNewClassModal .modal-body form {
      margin-bottom: 0; }
      .addNewClassModal .modal-body form .form-group {
        display: flex;
        justify-content: space-between; }
    .addNewClassModal .modal-body h5 {
      color: #0A2E60;
      font-size: 18px;
      margin: 10px 0 10px;
      font-family: "latomedium";
      font-weight: 500; }
  .addNewClassModal .modal-title {
    text-transform: capitalize;
    color: #0A2E60;
    font-size: 16px;
    font-weight: 600;
    width: 100%;
    text-align: center; }
  .addNewClassModal .form-control {
    background: #FAFBFC;
    border: 1px solid #DFE1E6;
    border-radius: 5px;
    height: 48px;
    padding-left: 28px;
    padding-right: 28px;
    color: #9B9B9B;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.2s ease-in; }
    .addNewClassModal .form-control:focus {
      outline-color: #0367A6;
      color: #202223;
      outline-style: solid;
      outline-width: 2px; }
  .addNewClassModal .label {
    color: #4C6588;
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: 600; }
  .addNewClassModal .addClassTagBtn {
    height: 50px;
    border: 0;
    min-width: 72px;
    font-size: 16px;
    font-weight: 600; }
    .addNewClassModal .addClassTagBtn:disabled {
      background: #F6F6F7;
      color: #8C9196 !important;
      pointer-events: none;
      opacity: 1;
      border: none; }
  .addNewClassModal .classes {
    display: inline-flex;
    flex-wrap: wrap;
    width: 74%; }
    .addNewClassModal .classes p {
      color: #8C9196;
      font-size: 16px;
      font-weight: 600; }
    .addNewClassModal .classes .classTag {
      display: inline-flex;
      align-items: center;
      height: 32px;
      padding: 0 15px;
      background: #EBEFF2;
      border-radius: 6px;
      margin-right: 8px;
      margin-bottom: 8px;
      color: #0A2E60;
      font-size: 14px;
      font-weight: 600; }
      .addNewClassModal .classes .classTag .closeTag {
        width: 12px;
        height: 12px;
        background: url(../img/ch-close-gray.svg) center center no-repeat;
        margin-left: 10px;
        border: none; }
      .addNewClassModal .classes .classTag:last-child {
        margin-right: 0; }
  .addNewClassModal .existingClass {
    width: 103px;
    height: 78px;
    border: 1px dashed #66D19E;
    border-radius: 6px;
    padding: 10px;
    margin-right: 10px;
    display: inline-flex;
    flex-direction: column; }
    .addNewClassModal .existingClass label {
      font-size: 12px;
      color: #B7B7B7;
      margin-bottom: 10px;
      font-weight: 600; }
    .addNewClassModal .existingClass .tag {
      padding: 5px;
      background: #C5DBE8;
      border-radius: 6px;
      color: #0A2E60;
      font-size: 14px;
      font-weight: 600;
      display: inline-flex;
      justify-content: center;
      align-items: center; }
  .addNewClassModal .inputGroup {
    display: inline-block;
    width: 81%; }

.imageClassificationClassDetail #uploadModal.dataset-upload-first-view {
  min-height: 260px; }

.discardChangesModal_v2 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1060;
  transition: all 0.2s ease-in;
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
  opacity: 0; }
  .discardChangesModal_v2.alertModal {
    visibility: visible;
    opacity: 1; }
  .discardChangesModal_v2 .innerContainer {
    max-width: 600px;
    width: 100%;
    background: #ffffff;
    border-radius: 10px; }
  .discardChangesModal_v2 .modalHeader {
    padding: 20px 30px 20px;
    position: relative; }
    .discardChangesModal_v2 .modalHeader .modalTitle {
      text-align: left;
      color: #303030;
      font-weight: 500;
      font-size: 24px;
      margin: 0; }
  .discardChangesModal_v2 .modalContent {
    padding: 0 30px 50px;
    font-size: 16px;
    text-align: left;
    color: #595959;
    font-weight: 400; }
  .discardChangesModal_v2 .modalFooter {
    padding: 0 20px 20px 30px;
    display: flex;
    justify-content: flex-end; }
    .discardChangesModal_v2 .modalFooter button {
      margin: 0 10px;
      border-radius: 6px;
      min-width: 90px;
      height: 44px;
      box-shadow: none;
      border: none;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      font-weight: 400; }
    .discardChangesModal_v2 .modalFooter .cancelBtn {
      background: transparent;
      color: #303030; }

.htdm {
  margin-right: 30px;
  color: #138BFA;
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline; }
  .htdm:hover, .htdm:focus {
    color: #138BFA;
    text-decoration: underline; }

.howToDeployModal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1005;
  transition: all 0.2s ease-in;
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
  opacity: 0; }
  .howToDeployModal.showModal {
    visibility: visible;
    opacity: 1; }

.welcomeChoochModal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(225, 225, 225, 0.75);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1006; }
  .welcomeChoochModal.hideModal {
    visibility: hidden;
    opacity: 0; }
  .welcomeChoochModal .modalContainer {
    width: 100%;
    max-width: 784px;
    background: #ffffff;
    border-radius: 10px;
    padding: 45px 75px 45px;
    text-align: center;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column; }
    .welcomeChoochModal .modalContainer .logo {
      margin-bottom: 30px;
      max-width: 250px; }
    .welcomeChoochModal .modalContainer h5 {
      font-family: "latomedium";
      font-weight: 500;
      font-size: 28px;
      color: #210835;
      margin: 0 0 28px; }
    .welcomeChoochModal .modalContainer p {
      font-size: 18px;
      color: #595959;
      font-weight: 500;
      font-family: "latomedium";
      margin-bottom: 30px; }
    .welcomeChoochModal .modalContainer .getStartBtn {
      font-size: 18px;
      font-family: "latomedium";
      font-weight: 500;
      height: 44px;
      min-width: 135px; }
  .welcomeChoochModal .buttonLinks {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; }
    .welcomeChoochModal .buttonLinks a {
      color: #535353;
      font-size: 18px;
      font-weight: 600;
      margin-right: 20px; }

.WalkthroughModal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(225, 225, 225, 0.75);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1006;
  visibility: hidden;
  opacity: 0; }
  .WalkthroughModal.showModal {
    visibility: visible;
    opacity: 2; }
  .WalkthroughModal .modalContainer {
    width: 100%;
    max-width: 600px;
    background: #ffffff;
    border-radius: 10px;
    padding: 25px 25px 25px 25px;
    position: relative;
    display: flex;
    justify-content: flex-start;
    flex-direction: column; }
    .WalkthroughModal .modalContainer .logo {
      width: 24px;
      height: 24px;
      margin-bottom: 5px; }
    .WalkthroughModal .modalContainer .modalHeader {
      margin-bottom: 30px; }
    .WalkthroughModal .modalContainer h5 {
      font-family: "Euclid Circular B";
      font-weight: 500;
      font-size: 20px;
      color: #303030;
      display: inline-block;
      margin: 0 0 0 10px; }
    .WalkthroughModal .modalContainer p {
      font-size: 16px;
      color: #595959;
      font-weight: 400;
      font-family: "Euclid Circular B";
      margin-bottom: 20px; }
    .WalkthroughModal .modalContainer .doneBtn {
      height: 36px;
      margin-left: auto; }

.tutorialModal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(225, 225, 225, 0.75);
  z-index: 1105;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s ease-in;
  visibility: hidden;
  opacity: 0; }
  .tutorialModal.showModal {
    opacity: 1;
    visibility: visible; }
  .tutorialModal .modalContainer {
    width: 100%;
    max-width: 525px;
    padding: 25px 25px 25px 25px;
    background: #ffffff;
    border-radius: 10px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; }
    .tutorialModal .modalContainer h5 {
      color: #303030;
      font-size: 20px;
      font-weight: 500;
      font-family: "Euclid Circular B"; }
    .tutorialModal .modalContainer .buttonsWrpper {
      width: 100%;
      margin-top: 50px;
      display: flex;
      justify-content: flex-end; }
      .tutorialModal .modalContainer .buttonsWrpper button {
        min-width: 75px;
        height: 36px;
        font-size: 14px;
        font-weight: 400;
        font-family: "Euclid Circular B"; }
      .tutorialModal .modalContainer .buttonsWrpper .finishBtn {
        margin-left: 12px; }

.endtoendProductModal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(89, 89, 89, 0.64);
  z-index: 1105;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s ease-in;
  visibility: hidden;
  opacity: 0;
  padding: 10px; }
  .endtoendProductModal.showModal {
    opacity: 1;
    visibility: visible; }
  .endtoendProductModal .modalContainer {
    width: 100%;
    height: 100%;
    background: #ffffff;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center; }
    .endtoendProductModal .modalContainer .header {
      width: 100%;
      padding: 15px;
      background-color: white;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      font-size: 18px;
      font-weight: 500;
      color: #0A2E60;
      font-family: 'latomedium';
      box-shadow: 0px 2px 4px rgba(10, 46, 96, 0.1); }
    .endtoendProductModal .modalContainer .closeModal {
      position: static;
      background: transparent;
      border: none;
      padding: 0;
      width: 20px;
      height: 20px;
      cursor: pointer; }
    @media screen and (max-width: 1367px) {
      .endtoendProductModal .modalContainer .overflowContainer {
        overflow: scroll;
        width: 1200px; } }
    @media screen and (max-width: 967px) {
      .endtoendProductModal .modalContainer .overflowContainer {
        width: 700px; } }
    @media screen and (max-width: 567px) {
      .endtoendProductModal .modalContainer .overflowContainer {
        width: 400px; } }
    .endtoendProductModal .modalContainer .overflowContainer .productImage {
      width: 1440px;
      max-width: none; }

.bestPracticeModal .modal-dialog {
  max-width: 680px; }

.bestPracticeModal .modal-header,
.bestPracticeModal .modal-body,
.bestPracticeModal .modal-footer {
  padding-left: 25px;
  padding-right: 25px; }

.bestPracticeModal .modal-body,
.bestPracticeModal .modal-footer {
  width: 100%; }

.bestPracticeModal .modal-footer {
  padding-bottom: 30px; }

.bestPracticeModal .modal-title {
  font-size: 16px;
  font-weight: 500; }

.bestPracticeModal .subTitle {
  color: #535353;
  font-size: 16px;
  font-family: "Euclid Circular B";
  font-weight: 400;
  margin-bottom: 30px; }

.bestPracticeModal .infoContainer p {
  font-family: "latomedium";
  font-weight: 500;
  font-size: 18px;
  color: #0A2E60; }

.bestPracticeModal .infoContainer label {
  margin: 0;
  font-family: "latomedium";
  font-weight: 500;
  color: #595959;
  margin-right: 5px; }

.bestPracticeModal .modal-footer {
  border: none; }

.bestPracticeModal .modal-content {
  padding-bottom: 0; }

.bestPracticeModal .btnOkay {
  width: 100%;
  height: 44px;
  font-size: 14px; }

.pageTitle {
  font-size: 16px;
  font-weight: 600;
  color: #210835;
  margin-bottom: 0px; }

.dataset .filterWrapper .createDatasetBtn .icon,
.dataset .filterWrapper .importDatasetBtn .icon {
  margin-right: 10px; }

.dataset .perceptionSearch {
  min-width: 287px;
  max-width: 287px; }
  .dataset .perceptionSearch input {
    background-color: #ffffff; }

.dataset .ListlayoutTopbar {
  display: block; }

.dataset .modalContainer {
  width: 100%;
  max-width: 1150px;
  background: #ffffff;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap; }
  .dataset .modalContainer .modalHeader {
    position: relative;
    padding: 20px;
    width: 100%;
    text-align: center; }
    .dataset .modalContainer .modalHeader h5 {
      margin: 0;
      font-size: 20px;
      font-weight: 500;
      color: #595959; }
  .dataset .modalContainer .modalBody {
    width: 100%;
    padding-bottom: 30px; }
    .dataset .modalContainer .modalBody .carousel {
      display: flex;
      flex-wrap: wrap; }
    .dataset .modalContainer .modalBody .carousel-inner {
      max-width: 1045px;
      margin: 0 auto;
      padding-bottom: 60px; }
      .dataset .modalContainer .modalBody .carousel-inner .carousel-item {
        background: rgba(196, 196, 196, 0.31);
        border-radius: 10px;
        padding: 15px; }
      .dataset .modalContainer .modalBody .carousel-inner h5 {
        color: #138BFA;
        margin: 0;
        text-align: left;
        min-height: 60px;
        font-size: 20px; }
    .dataset .modalContainer .modalBody .carouselControls {
      width: 100%;
      max-width: 1045px;
      margin: 0 auto;
      display: flex;
      justify-content: flex-end;
      width: 100%; }
    .dataset .modalContainer .modalBody .carousel-control-next,
    .dataset .modalContainer .modalBody .carousel-control-prev {
      position: static;
      width: auto;
      min-width: 100px;
      box-shadow: 0px 2px 5px rgba(40, 40, 40, 0.1);
      border-radius: 5px;
      font-size: 16px;
      height: 38px;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      opacity: 1; }
    .dataset .modalContainer .modalBody .carousel-control-prev {
      background-color: #ffffff;
      border: 1px solid #F7941D;
      color: #f7941d;
      margin-right: 10px; }
    .dataset .modalContainer .modalBody .carousel-control-next {
      background-color: #f7941d;
      color: #ffffff;
      border: none; }
      .dataset .modalContainer .modalBody .carousel-control-next:hover, .dataset .modalContainer .modalBody .carousel-control-next:focus {
        background-color: #f7941d;
        color: #ffffff; }
    .dataset .modalContainer .modalBody .carousel-indicators {
      margin-left: 0;
      margin-right: 10px;
      margin-bottom: 0;
      position: static;
      margin-left: auto;
      align-items: center; }
      .dataset .modalContainer .modalBody .carousel-indicators li {
        display: none;
        border: none;
        pointer-events: none;
        text-indent: inherit;
        width: auto;
        height: auto;
        color: #595959; }
        .dataset .modalContainer .modalBody .carousel-indicators li.active {
          display: block; }
    .dataset .modalContainer .modalBody .carousel-caption {
      bottom: -70px;
      left: 0;
      right: auto;
      padding: 0; }

.dataset .cardActionsDropdown .actionItemList li .alertTooltip {
  left: auto;
  right: 10px; }

.datasetDetail .buttonBar {
  margin: 30px 0 15px; }

.datasetDetail .header {
  width: 100%;
  padding: 0;
  margin-top: 14px; }
  .datasetDetail .header > ul {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-end; }
    .datasetDetail .header > ul > li {
      display: inline-flex;
      flex-direction: column;
      padding: 10px;
      width: 100%;
      color: #EAEAEA;
      font-size: 16px; }
      .datasetDetail .header > ul > li .annotation-info {
        background: url(../img/ch-annotation-info.svg) center center no-repeat;
        position: relative;
        width: 9px;
        top: -11px;
        left: 25px;
        display: none; }
      .datasetDetail .header > ul > li:first-child {
        max-width: 300px;
        padding-left: 0;
        width: auto; }
      .datasetDetail .header > ul > li:nth-child(2), .datasetDetail .header > ul > li:nth-child(4), .datasetDetail .header > ul > li:nth-child(5) {
        max-width: 150px; }
      .datasetDetail .header > ul > li:nth-child(3) {
        max-width: 100px; }
      .datasetDetail .header > ul > li:nth-child(6) {
        margin-left: 24%;
        align-items: center;
        max-width: 120px;
        justify-content: center; }
        .datasetDetail .header > ul > li:nth-child(6) img {
          width: 27px; }
      .datasetDetail .header > ul > li:nth-child(7) {
        flex-direction: row;
        color: #595959;
        max-width: 255px;
        justify-content: center; }
        .datasetDetail .header > ul > li:nth-child(7) img {
          width: 24px; }
      .datasetDetail .header > ul > li:last-child {
        width: 3%;
        align-items: center; }
      .datasetDetail .header > ul > li > a {
        color: #fff;
        font-size: 16px;
        display: flex;
        align-items: center; }
      .datasetDetail .header > ul > li p {
        margin: 10px 0 0;
        font-size: 16px;
        color: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
        font-weight: 600; }
      .datasetDetail .header > ul > li .icon {
        margin-right: 8px; }
      .datasetDetail .header > ul > li.annotationType {
        margin-right: auto; }
      .datasetDetail .header > ul > li.viewJob {
        max-width: none;
        margin-left: auto;
        min-width: 100px;
        flex-direction: row;
        align-items: center;
        width: auto; }
        .datasetDetail .header > ul > li.viewJob a {
          color: #FFE36B;
          font-weight: 600;
          text-decoration: none; }
      .datasetDetail .header > ul > li.shareDataset_ {
        margin-left: 0; }
      .datasetDetail .header > ul > li.alertDesable {
        background-color: transparent;
        border: none; }
        .datasetDetail .header > ul > li.alertDesable > a {
          background-color: transparent;
          border: none;
          opacity: 0.5; }
        .datasetDetail .header > ul > li.alertDesable .alertTooltip {
          top: 40px;
          right: 0; }
      .datasetDetail .header > ul > li .alertDesable {
        background-color: transparent;
        border: none;
        opacity: 0.5; }
        .datasetDetail .header > ul > li .alertDesable .alertTooltip {
          top: 40px;
          right: 0;
          left: auto; }

.datasetDetail .header + .annotationTrainingArea {
  margin-top: 0; }

.datasetDetail .detailActionDropdown .actionBtn {
  width: 35px;
  height: 35px;
  border-radius: 5px;
  background: url(../img/ch-ellips-white.svg) center center no-repeat; }
  .datasetDetail .detailActionDropdown .actionBtn.active {
    background: #FAF5FF url(../img/ch-ellips-gray.svg) center center no-repeat; }

.datasetDetail .detailActionDropdown .actionItemList {
  top: 40px;
  right: 0;
  width: 200px; }
  .datasetDetail .detailActionDropdown .actionItemList li a {
    padding-top: 10px;
    padding-bottom: 10px; }
  .datasetDetail .detailActionDropdown .actionItemList .alertDesable {
    opacity: 1; }

.datasetDetail .buttonBar {
  display: flex; }
  .datasetDetail .buttonBar .versionDropdown {
    margin-right: 10px;
    z-index: 16; }
    .datasetDetail .buttonBar .versionDropdown .itemBtn {
      border-color: #AAAAAA;
      color: #ffffff;
      font-weight: 600;
      background: url(../img/trangle-down-arrow-gray.svg) 93% center no-repeat;
      text-align: center;
      border-radius: 10px; }
      .datasetDetail .buttonBar .versionDropdown .itemBtn.up {
        background: url(../img/trangle-up-arrow-gray.svg) 93% center no-repeat; }
      .datasetDetail .buttonBar .versionDropdown .itemBtn:focus {
        color: #ffffff !important; }
    .datasetDetail .buttonBar .versionDropdown .dropdownItemList {
      width: 320px;
      max-height: 300px;
      padding-top: 0;
      box-shadow: 0px 3px 5px rgba(44, 44, 44, 0.2), 0px 0px 1px rgba(44, 44, 44, 0.31); }
      .datasetDetail .buttonBar .versionDropdown .dropdownItemList li {
        border-bottom: 1px solid #E7E7E7; }
        .datasetDetail .buttonBar .versionDropdown .dropdownItemList li:last-child {
          border-bottom: none; }
        .datasetDetail .buttonBar .versionDropdown .dropdownItemList li a {
          padding: 20px 15px;
          color: #595959;
          font-size: 16px;
          font-weight: "latomedium"; }
          .datasetDetail .buttonBar .versionDropdown .dropdownItemList li a p {
            margin: 0; }
        .datasetDetail .buttonBar .versionDropdown .dropdownItemList li:hover a, .datasetDetail .buttonBar .versionDropdown .dropdownItemList li:focus a {
          background-color: #EBEFF2;
          color: #595959 !important; }
        .datasetDetail .buttonBar .versionDropdown .dropdownItemList li.active a {
          background-color: #EBEFF2;
          color: #595959 !important; }
    .datasetDetail .buttonBar .versionDropdown.alertDesable {
      border: none;
      background: transparent; }
      .datasetDetail .buttonBar .versionDropdown.alertDesable:hover {
        border: none;
        background: transparent; }
      .datasetDetail .buttonBar .versionDropdown.alertDesable .itemBtn {
        border-color: #8C9196;
        color: #8C9196; }
    .datasetDetail .buttonBar .versionDropdown .alertTooltip {
      top: 45px;
      left: 0; }
  .datasetDetail .buttonBar .createNewVersionBtn {
    border: 1px solid #AAAAAA;
    filter: drop-shadow(0px 2px 5px rgba(40, 40, 40, 0.1));
    border-radius: 10px;
    margin-right: auto;
    background-color: transparent;
    color: #ffffff;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    padding: 0 15px;
    min-height: 36px;
    transition: all 0.2s ease-in;
    font-weight: 500; }
    .datasetDetail .buttonBar .createNewVersionBtn .customTooltip {
      left: 0;
      right: auto !important; }
    .datasetDetail .buttonBar .createNewVersionBtn .alertTooltip {
      top: 45px;
      left: 0; }
  .datasetDetail .buttonBar .addFileBtn,
  .datasetDetail .buttonBar .datasetGenerateToolBtn,
  .datasetDetail .buttonBar .trainmodelBtn {
    margin-left: 10px; }
    .datasetDetail .buttonBar .addFileBtn .icon,
    .datasetDetail .buttonBar .datasetGenerateToolBtn .icon,
    .datasetDetail .buttonBar .trainmodelBtn .icon {
      margin-right: 10px; }
  .datasetDetail .buttonBar .addFileBtn {
    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.08), inset 0px -1px 0px rgba(0, 0, 0, 0.2);
    background-color: #352B63;
    color: #ffffff;
    border-radius: 10px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    padding-left: 15px;
    padding-right: 15px;
    z-index: 6; }
    .datasetDetail .buttonBar .addFileBtn button {
      background: transparent;
      border: none;
      color: #fff;
      display: flex;
      align-items: center; }
    .datasetDetail .buttonBar .addFileBtn .icon {
      margin-right: 0;
      margin-left: 10px; }
    .datasetDetail .buttonBar .addFileBtn .alertTooltip {
      top: 45px;
      right: 0; }
    .datasetDetail .buttonBar .addFileBtn.up .icon {
      transform: rotate(180deg); }
  .datasetDetail .buttonBar .addIportDropdown {
    position: absolute;
    top: 45px;
    right: 0;
    min-width: 182px;
    display: none; }
    .datasetDetail .buttonBar .addIportDropdown ul {
      background: #F7F7F7;
      box-shadow: 0px 3px 5px rgba(6, 0, 41, 0.2);
      border-radius: 6px;
      padding: 10px 0;
      margin: 0; }
      .datasetDetail .buttonBar .addIportDropdown ul li a {
        padding: 10px 20px;
        display: block;
        text-align: left;
        font-size: 14px;
        color: #535353;
        font-weight: 400; }
        .datasetDetail .buttonBar .addIportDropdown ul li a .icon {
          margin-right: 10px;
          transform: none !important; }
        .datasetDetail .buttonBar .addIportDropdown ul li a:hover {
          background-color: #FAF5FF; }
  .datasetDetail .buttonBar .datasetGenerateToolBtn,
  .datasetDetail .buttonBar .trainmodelBtn {
    padding-left: 20px;
    padding-right: 20px; }
  .datasetDetail .buttonBar .datasetGenerateToolBtn {
    border-radius: 10px;
    background: #F2E9FA;
    color: #352B63;
    border: none;
    padding-left: 15px;
    padding-right: 15px;
    font-weight: 500;
    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.08), inset 0px -1px 0px rgba(0, 0, 0, 0.2); }
    .datasetDetail .buttonBar .datasetGenerateToolBtn .alertTooltip {
      top: 45px;
      right: 0; }
  .datasetDetail .buttonBar .trainmodelBtn {
    position: relative;
    z-index: 911;
    background: transparent;
    border: 1px solid #AAAAAA;
    filter: drop-shadow(0px 2px 5px rgba(40, 40, 40, 0.1));
    color: #ffffff;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    padding: 0 15px;
    min-height: 36px;
    transition: all 0.2s ease-in;
    font-weight: 500; }
    .datasetDetail .buttonBar .trainmodelBtn:disabled {
      border-color: #8C9196;
      color: #8C9196;
      cursor: default; }
      .datasetDetail .buttonBar .trainmodelBtn:disabled .icon {
        opacity: 0.5; }
      .datasetDetail .buttonBar .trainmodelBtn:disabled:hover .customTooltip {
        visibility: visible;
        opacity: 1; }
    .datasetDetail .buttonBar .trainmodelBtn .customTooltip {
      top: 45px;
      right: 0;
      white-space: nowrap;
      text-align: left; }

.datasetDetail .annotatedNavTab {
  margin-bottom: 15px;
  border-bottom: 1px solid #E0E0E0;
  position: relative;
  z-index: 15;
  display: inline-flex; }
  .datasetDetail .annotatedNavTab li a {
    color: #303030;
    padding: 10px 50px;
    display: inline-block;
    border-bottom: solid 2px transparent;
    font-weight: 500;
    font-family: "latomedium"; }
    @media (max-width: 1400px) {
      .datasetDetail .annotatedNavTab li a {
        padding: 10px 30px; } }
    .datasetDetail .annotatedNavTab li a.active {
      color: #303030;
      border-bottom: solid 5px #5A1691;
      font-size: 16px;
      font-weight: 600; }

.datasetDetail .tab-content {
  clear: both; }

.datasetDetail .startAnnotate {
  /*z-index: 1070;*/ }

.datasetDetail .thumbnailsList .startAnnotate {
  z-index: 9; }

.datasetDetail .trainingAreaBottomBar .footerActions {
  width: 100%;
  padding-top: 0; }
  .datasetDetail .trainingAreaBottomBar .footerActions .select_all_data {
    margin-right: 30px;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
    display: inline-flex;
    align-items: center; }
  .datasetDetail .trainingAreaBottomBar .footerActions .deleteAction {
    margin-left: auto; }

.polygoneDatasetModal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1060;
  transition: all 0.2s ease-in;
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
  opacity: 0; }
  .polygoneDatasetModal.alertModal {
    visibility: visible;
    opacity: 1; }
  .polygoneDatasetModal .innerContainer {
    max-width: 530px;
    width: 100%;
    height: 165px;
    padding-top: 10px;
    background: #ffffff;
    border-radius: 10px; }
  .polygoneDatasetModal .modalHeader {
    padding: 30px;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center; }
    .polygoneDatasetModal .modalHeader .modalTitle {
      text-align: left;
      color: #303030;
      font-weight: 500;
      font-size: 20px;
      margin: 0; }
    .polygoneDatasetModal .modalHeader .closeModal {
      position: static; }
  .polygoneDatasetModal .modalContent {
    padding: 10px 33px 50px;
    font-size: 20px;
    line-height: 36px;
    color: #303030;
    font-weight: 500;
    font-family: "Euclid Circular B"; }
    .polygoneDatasetModal .modalContent .icon {
      margin-right: 10px;
      width: 20px;
      height: 20px; }
  .polygoneDatasetModal .modalFooter {
    padding: 0 20px 20px 20px;
    display: flex;
    justify-content: flex-end; }
    .polygoneDatasetModal .modalFooter button {
      border-radius: 10px;
      height: 36px;
      box-shadow: none;
      border: none;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      font-weight: 500; }

.startAnnotateModal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1060;
  transition: all 0.2s ease-in;
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
  opacity: 0; }
  .startAnnotateModal.annotateStart {
    visibility: visible;
    opacity: 1; }
  .startAnnotateModal .innerContainer {
    max-width: 525px;
    width: 100%;
    background: #ffffff;
    border-radius: 10px; }
  .startAnnotateModal .modalHeader {
    padding: 15px 30px 20px;
    position: relative; }
    .startAnnotateModal .modalHeader .modalTitle {
      text-align: left;
      color: #303030;
      font-weight: 500;
      font-size: 20px;
      margin: 0; }
  .startAnnotateModal .modalContent {
    padding: 0 30px 0px;
    font-size: 16px;
    text-align: left;
    color: #595959;
    font-weight: 500;
    font-family: "latomedium"; }
    .startAnnotateModal .modalContent strong {
      color: #303030; }
    .startAnnotateModal .modalContent .icon {
      margin-right: 10px;
      width: 20px;
      height: 20px; }
  .startAnnotateModal .modalFooter {
    padding: 20px;
    display: flex;
    justify-content: flex-end; }
    .startAnnotateModal .modalFooter button {
      border-radius: 10px;
      min-width: 80px;
      height: 36px;
      box-shadow: none;
      border: none;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      font-weight: 500; }
    .startAnnotateModal .modalFooter .skipBtn {
      background: transparent;
      color: #303030;
      margin-right: 5px; }

.modalButtonsRight {
  margin-bottom: 10px;
  margin-top: 30px;
  display: flex;
  justify-content: flex-end; }

.modalButtonsCenter {
  text-align: center; }

.justTextButton {
  background-color: #ffffff;
  color: #595959;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  padding: 0 15px;
  min-height: 36px;
  border: none;
  transition: all 0.2s ease-in; }
  .justTextButton:hover, .justTextButton:focus {
    background-color: #C1CCDF;
    color: #2C5A99; }

.shareWithPeople .usersDropdwon {
  display: none; }

.sharedWithPeopleThumbs .usersDropdwon {
  background: #ffffff;
  border: 1px solid #F2F1F1;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  position: absolute;
  top: 30px;
  right: 0;
  display: none;
  max-height: 150px;
  padding: 5px 0;
  z-index: 7; }
  .sharedWithPeopleThumbs .usersDropdwon li {
    padding: 8px 15px;
    font-size: 12px;
    color: #595959;
    white-space: nowrap;
    display: flex;
    align-items: center; }
    .sharedWithPeopleThumbs .usersDropdwon li .thumb {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: 17px;
      height: 17px;
      border-radius: 30px;
      margin-right: 10px;
      font-size: 10px;
      background-color: #735FEC;
      border: solid 2px #735FEC; }
    .sharedWithPeopleThumbs .usersDropdwon li:nth-child(2n) .thumb {
      background-color: #4F97A3;
      border-color: #4F97A3; }

.sharedWithPeopleThumbs:hover .usersDropdwon {
  display: block; }

.datasetGenerationToolsModal .modal-dialog {
  max-width: 580px; }

.datasetGenerationToolsModal .modal-header {
  border-bottom: 1px solid #E5E5E5;
  padding: 20px; }

.datasetGenerationToolsModal .modal-title {
  font-size: 18px; }

.datasetGenerationToolsModal .dgtList {
  flex: 1;
  margin: 40px 40px 10px 40px; }
  .datasetGenerationToolsModal .dgtList .dgtOption {
    padding: 20px 30px;
    min-height: 150px;
    width: 100%;
    box-shadow: 2px 5px 5px rgba(22, 22, 22, 0.08);
    border-radius: 10px;
    margin-bottom: 18px;
    border: solid 2px transparent;
    cursor: pointer;
    position: relative; }
    .datasetGenerationToolsModal .dgtList .dgtOption h4 {
      font-size: 18px;
      color: #210835; }
    .datasetGenerationToolsModal .dgtList .dgtOption .icon {
      width: 36px;
      height: 36px;
      margin-right: 10px; }
    .datasetGenerationToolsModal .dgtList .dgtOption span {
      font-weight: 400;
      font-size: 16px;
      line-height: 20px;
      color: #535353; }
    .datasetGenerationToolsModal .dgtList .dgtOption .warningText {
      font-weight: 400;
      font-size: 14px;
      line-height: 18px;
      color: #B7B7B7;
      margin-top: 14px; }
    .datasetGenerationToolsModal .dgtList .dgtOption.active {
      border: 2px solid #8020CF !important; }
    .datasetGenerationToolsModal .dgtList .dgtOption.disabled, .datasetGenerationToolsModal .dgtList .dgtOption[disabled="disabled"] {
      opacity: 1 !important; }
      .datasetGenerationToolsModal .dgtList .dgtOption.disabled h4, .datasetGenerationToolsModal .dgtList .dgtOption[disabled="disabled"] h4 {
        font-size: 18px;
        color: #8C9196; }
      .datasetGenerationToolsModal .dgtList .dgtOption.disabled span, .datasetGenerationToolsModal .dgtList .dgtOption[disabled="disabled"] span {
        font-size: 16px;
        font-weight: 400;
        line-height: 20px;
        color: #B7B7B7; }
        .datasetGenerationToolsModal .dgtList .dgtOption.disabled span .warningText, .datasetGenerationToolsModal .dgtList .dgtOption[disabled="disabled"] span .warningText {
          font-weight: 400;
          font-size: 14px;
          line-height: 18px;
          color: #B7B7B7;
          margin-top: 14px; }
      .datasetGenerationToolsModal .dgtList .dgtOption.disabled .warningText, .datasetGenerationToolsModal .dgtList .dgtOption[disabled="disabled"] .warningText {
        font-weight: 400;
        font-size: 14px;
        line-height: 18px;
        color: #B7B7B7;
        margin-top: 14px; }
      .datasetGenerationToolsModal .dgtList .dgtOption.disabled:hover, .datasetGenerationToolsModal .dgtList .dgtOption[disabled="disabled"]:hover {
        cursor: default; }
        .datasetGenerationToolsModal .dgtList .dgtOption.disabled:hover .customTooltip, .datasetGenerationToolsModal .dgtList .dgtOption[disabled="disabled"]:hover .customTooltip {
          visibility: visible;
          opacity: 1;
          bottom: -20px; }
  .datasetGenerationToolsModal .dgtList .dgtOptionVersion {
    padding: 30px;
    height: 140px;
    width: 100%;
    flex: 1;
    display: flex;
    box-shadow: 2px 5px 5px rgba(22, 22, 22, 0.08);
    border-radius: 10px;
    margin-bottom: 18px;
    border: 2px solid transparent;
    cursor: pointer; }
    .datasetGenerationToolsModal .dgtList .dgtOptionVersion h4 {
      font-size: 18px;
      color: #210835; }
    .datasetGenerationToolsModal .dgtList .dgtOptionVersion .icon {
      width: 40px;
      height: 40px;
      margin-right: 10px;
      align-self: center;
      margin: 0 35px 0 20px; }
    .datasetGenerationToolsModal .dgtList .dgtOptionVersion span {
      font-size: 16px;
      color: #595959; }
    .datasetGenerationToolsModal .dgtList .dgtOptionVersion.active {
      border: 2px solid #8020CF; }

.datasetGenerationToolsModal .dgtTypeBtn {
  width: 100%;
  max-width: 100%;
  border: none;
  height: 50px;
  border-radius: 5px;
  font-size: 18px;
  font-family: "latomedium";
  margin: 0px 35px 5px 35px; }
  .datasetGenerationToolsModal .dgtTypeBtn:disabled {
    background: #f7f7f7;
    color: #b7b7b7 !important;
    opacity: 1; }

.cancelProcessModal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9107;
  transition: all 0.2s ease-in;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  visibility: hidden;
  opacity: 0; }
  .cancelProcessModal.alertModal {
    visibility: visible;
    opacity: 1; }
  .cancelProcessModal .innerContainer {
    max-width: 600px;
    width: 100%;
    background: #ffffff;
    border-radius: 10px;
    margin-top: 270px; }
  .cancelProcessModal .modalHeader {
    padding: 20px 25px;
    position: relative; }
    .cancelProcessModal .modalHeader .modalTitle {
      text-align: left;
      color: #303030;
      font-weight: 500;
      font-size: 20px;
      margin: 0; }
  .cancelProcessModal .modalContent {
    padding: 20px 25px;
    font-size: 16px;
    text-align: left;
    color: #595959;
    font-weight: 400; }
  .cancelProcessModal .modalFooter {
    padding: 0 25px 20px;
    display: flex;
    justify-content: flex-end; }
    .cancelProcessModal .modalFooter button {
      border-radius: 10px;
      min-width: 79px;
      height: 36px;
      box-shadow: none;
      border: none;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      font-weight: 500; }
    .cancelProcessModal .modalFooter .cancelBtn {
      color: #303030;
      background: transparent;
      margin-right: 5px; }

.createNewVersionModal .modal-dialog {
  max-width: 580px; }

.createNewVersionModal .modal-header {
  border-bottom: 1px solid #E5E5E5;
  padding: 20px; }

.createNewVersionModal .modal-title {
  font-size: 18px;
  font-weight: 600;
  color: #210835;
  text-transform: uppercase; }

.createNewVersionModal .dgtList {
  flex: 1;
  margin: 40px 40px 10px 40px;
  position: relative; }
  .createNewVersionModal .dgtList label {
    font-size: 16px;
    font-weight: 500;
    color: #303030;
    margin-bottom: 15px;
    font-family: "Euclid Circular B";
    line-height: 24px; }
  .createNewVersionModal .dgtList .dgtOption {
    padding: 16px 20px;
    width: 100%;
    min-height: 150px;
    box-shadow: 2px 5px 5px rgba(22, 22, 22, 0.08);
    border-radius: 6px;
    margin-bottom: 18px;
    border: 2px solid transparent;
    cursor: pointer;
    position: relative; }
    .createNewVersionModal .dgtList .dgtOption h4 {
      font-size: 20px;
      font-weight: 500;
      color: #210835;
      margin: 0;
      margin-bottom: 5px;
      line-height: 36px; }
    .createNewVersionModal .dgtList .dgtOption .icon {
      width: 36px;
      height: 36px;
      margin-right: 10px; }
    .createNewVersionModal .dgtList .dgtOption span {
      font-size: 16px;
      color: #535353;
      line-height: 20px;
      font-weight: 400; }
    .createNewVersionModal .dgtList .dgtOption .warningText {
      font-weight: 400;
      font-size: 14px;
      margin-top: 10px;
      color: #B7B7B7; }
    .createNewVersionModal .dgtList .dgtOption.active {
      border: 2px solid #8020CF; }
    .createNewVersionModal .dgtList .dgtOption.disabled, .createNewVersionModal .dgtList .dgtOption[disabled="disabled"] {
      opacity: 1 !important; }
      .createNewVersionModal .dgtList .dgtOption.disabled h4, .createNewVersionModal .dgtList .dgtOption[disabled="disabled"] h4 {
        font-size: 18px;
        color: #8C9196; }
      .createNewVersionModal .dgtList .dgtOption.disabled span, .createNewVersionModal .dgtList .dgtOption[disabled="disabled"] span {
        font-size: 16px;
        color: #8C9196; }
      .createNewVersionModal .dgtList .dgtOption.disabled:hover, .createNewVersionModal .dgtList .dgtOption[disabled="disabled"]:hover {
        cursor: default; }
        .createNewVersionModal .dgtList .dgtOption.disabled:hover .customTooltip, .createNewVersionModal .dgtList .dgtOption[disabled="disabled"]:hover .customTooltip {
          visibility: visible;
          opacity: 1;
          bottom: -20px; }
  .createNewVersionModal .dgtList .dgtOptionVersion {
    padding: 30px;
    width: 100%;
    flex: 1;
    display: flex;
    box-shadow: 2px 5px 20px rgba(65, 65, 65, 0.08);
    border-radius: 10px;
    margin-bottom: 18px;
    border: 2px solid transparent;
    cursor: pointer; }
    .createNewVersionModal .dgtList .dgtOptionVersion h4 {
      font-size: 16px;
      color: #5071A6; }
    .createNewVersionModal .dgtList .dgtOptionVersion .icon {
      width: 40px;
      height: 40px;
      margin-right: 10px;
      align-self: center;
      margin: 0 35px 0 20px; }
    .createNewVersionModal .dgtList .dgtOptionVersion span {
      font-size: 16px;
      color: #595959; }
    .createNewVersionModal .dgtList .dgtOptionVersion.active {
      border: 2px solid #8020CF; }

.createNewVersionModal .btnWrapper {
  display: flex;
  width: 100%;
  justify-content: flex-end;
  margin: 20px 0 0;
  padding: 0 35px; }
  .createNewVersionModal .btnWrapper button {
    min-width: 150px;
    height: 44px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-family: "latomedium"; }
  .createNewVersionModal .btnWrapper .nextBtn {
    margin-left: 15px; }
    .createNewVersionModal .btnWrapper .nextBtn:disabled {
      background: #F6F6F7;
      color: #8C9196 !important;
      opacity: 1; }

.versionCreateAlertModal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1050;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(89, 89, 89, 0.64);
  visibility: hidden;
  opacity: 0; }
  .versionCreateAlertModal.alertModal {
    visibility: visible;
    opacity: 1; }
  .versionCreateAlertModal .modalContainer {
    background: #ffffff;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 600px; }
  .versionCreateAlertModal .modalHeader {
    color: #303030;
    font-size: 24px;
    font-weight: 500;
    padding: 15px 30px;
    position: relative;
    text-align: left; }
  .versionCreateAlertModal .modalContent {
    padding: 10px 30px 30px;
    text-align: left;
    font-size: 16px;
    color: #595959;
    line-height: 30px; }
  .versionCreateAlertModal .modalBtns {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    padding: 0 30px 20px; }
    .versionCreateAlertModal .modalBtns button {
      min-width: 90px;
      height: 44px;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 500; }
    .versionCreateAlertModal .modalBtns .vcYesBtn {
      margin-left: 15px; }
    .versionCreateAlertModal .modalBtns .vcCancelBtn {
      color: #303030;
      background: transparent;
      border: none; }

.cadFilePreviewModal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 1060;
  background: rgba(89, 89, 89, 0.64);
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s ease-in; }
  .cadFilePreviewModal.preview {
    visibility: visible;
    opacity: 1; }
  .cadFilePreviewModal .modalContainer {
    width: 100%;
    max-width: 1080px;
    background-color: #d7d7d7; }
    .cadFilePreviewModal .modalContainer .modalHeader {
      width: 100%;
      background-color: #ffffff;
      min-height: 60px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding: 0 15px;
      box-shadow: 2px 5px 20px rgba(65, 65, 65, 0.08);
      z-index: 2;
      position: relative; }
      .cadFilePreviewModal .modalContainer .modalHeader .closePreviewModal {
        border: none;
        background: transparent;
        box-shadow: none; }
    .cadFilePreviewModal .modalContainer .modalBody {
      background-color: #d7d7d7;
      padding: 15px;
      width: 100%;
      min-height: 600px;
      display: flex;
      justify-content: center;
      align-items: center; }
    .cadFilePreviewModal .modalContainer .previewContainer img {
      max-height: 600px; }

.changeVersionModal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1060;
  transition: all 0.2s ease-in;
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
  opacity: 0; }
  .changeVersionModal.alertModal {
    visibility: visible;
    opacity: 1; }
  .changeVersionModal .innerContainer {
    max-width: 600px;
    width: 100%;
    background: #ffffff;
    border-radius: 10px; }
  .changeVersionModal .modalHeader {
    padding: 20px 30px 20px;
    position: relative; }
    .changeVersionModal .modalHeader .modalTitle {
      text-align: left;
      color: #303030;
      font-weight: 500;
      font-size: 24px;
      margin: 0; }
  .changeVersionModal .modalContent {
    padding: 0 30px 20px;
    font-size: 16px;
    text-align: left;
    color: #595959;
    font-weight: 400;
    line-height: 30px; }
  .changeVersionModal .modalFooter {
    padding: 0 20px 20px 30px;
    display: flex;
    justify-content: flex-end; }
    .changeVersionModal .modalFooter button {
      margin: 0 10px;
      border-radius: 10px;
      min-width: 90px;
      height: 44px;
      box-shadow: none;
      border: none;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      font-weight: 500; }
    .changeVersionModal .modalFooter .cancelBtn {
      background: transparent;
      color: #303030;
      border-radius: none; }

.createPerceptionParametersModal .form-group {
  margin-bottom: 20px !important;
  position: relative; }

.createPerceptionParametersModal .perceptionCreateWrapper {
  max-height: 550px;
  overflow-y: auto;
  overflow-x: clip;
  margin: 0 auto;
  padding: 0 20px 20px;
  max-width: 560px; }

.createImgClassificationModal .form-group {
  margin-bottom: 1rem;
  justify-content: space-between;
  display: flex;
  align-items: flex-end;
  flex-direction: column; }

.createImgClassificationAddClassModal .form-group {
  display: flex;
  justify-content: space-between;
  align-items: flex-end; }

.createImgClassificationAddClassModal .classes {
  max-height: 100px;
  overflow-y: auto; }

.createImgClassificationAddParametersModal .modal-body form {
  min-height: 330px; }

.createImgClassificationAddParametersModal .form-group {
  flex-direction: column;
  display: flex;
  margin-bottom: 25px; }

.createImgClassificationAddParametersModal select#img_batch_size {
  height: 50px;
  background: #f7f7f7 url(../img/down-arrow-light-gray.svg) 96% center no-repeat;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none; }

.imgRenamePopup .modal-title,
.imgModelRenamePopup .modal-title,
.datasetRenamePopup .modal-title,
.modelRenamePopup .modal-title,
.renameAnnotateClassModal .modal-title {
  text-align: left;
  font-size: 16px; }

.imgRenamePopup .renameform,
.imgRenamePopup #rename_file_form,
.imgRenamePopup #rename_model_form,
.imgRenamePopup #rename_form,
.imgModelRenamePopup .renameform,
.imgModelRenamePopup #rename_file_form,
.imgModelRenamePopup #rename_model_form,
.imgModelRenamePopup #rename_form,
.datasetRenamePopup .renameform,
.datasetRenamePopup #rename_file_form,
.datasetRenamePopup #rename_model_form,
.datasetRenamePopup #rename_form,
.modelRenamePopup .renameform,
.modelRenamePopup #rename_file_form,
.modelRenamePopup #rename_model_form,
.modelRenamePopup #rename_form,
.renameAnnotateClassModal .renameform,
.renameAnnotateClassModal #rename_file_form,
.renameAnnotateClassModal #rename_model_form,
.renameAnnotateClassModal #rename_form {
  width: 100%;
  margin: 0; }

.imgRenamePopup .setPerceptionName,
.imgRenamePopup .rename_name,
.imgModelRenamePopup .setPerceptionName,
.imgModelRenamePopup .rename_name,
.datasetRenamePopup .setPerceptionName,
.datasetRenamePopup .rename_name,
.modelRenamePopup .setPerceptionName,
.modelRenamePopup .rename_name,
.renameAnnotateClassModal .setPerceptionName,
.renameAnnotateClassModal .rename_name {
  padding: 0 15px !important; }

.imgRenamePopup .imgNameCreateBtn,
.imgRenamePopup .imgModelNameCreateBtn,
.imgRenamePopup .renameDoneBtn,
.imgRenamePopup .renameAnnotateBtn,
.imgModelRenamePopup .imgNameCreateBtn,
.imgModelRenamePopup .imgModelNameCreateBtn,
.imgModelRenamePopup .renameDoneBtn,
.imgModelRenamePopup .renameAnnotateBtn,
.datasetRenamePopup .imgNameCreateBtn,
.datasetRenamePopup .imgModelNameCreateBtn,
.datasetRenamePopup .renameDoneBtn,
.datasetRenamePopup .renameAnnotateBtn,
.modelRenamePopup .imgNameCreateBtn,
.modelRenamePopup .imgModelNameCreateBtn,
.modelRenamePopup .renameDoneBtn,
.modelRenamePopup .renameAnnotateBtn,
.renameAnnotateClassModal .imgNameCreateBtn,
.renameAnnotateClassModal .imgModelNameCreateBtn,
.renameAnnotateClassModal .renameDoneBtn,
.renameAnnotateClassModal .renameAnnotateBtn {
  background: #F2E9FA;
  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.08), inset 0px -1px 0px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  color: #303030;
  height: 36px;
  padding: 0 15px;
  border: none;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center; }
  .imgRenamePopup .imgNameCreateBtn:focus,
  .imgRenamePopup .imgModelNameCreateBtn:focus,
  .imgRenamePopup .renameDoneBtn:focus,
  .imgRenamePopup .renameAnnotateBtn:focus,
  .imgModelRenamePopup .imgNameCreateBtn:focus,
  .imgModelRenamePopup .imgModelNameCreateBtn:focus,
  .imgModelRenamePopup .renameDoneBtn:focus,
  .imgModelRenamePopup .renameAnnotateBtn:focus,
  .datasetRenamePopup .imgNameCreateBtn:focus,
  .datasetRenamePopup .imgModelNameCreateBtn:focus,
  .datasetRenamePopup .renameDoneBtn:focus,
  .datasetRenamePopup .renameAnnotateBtn:focus,
  .modelRenamePopup .imgNameCreateBtn:focus,
  .modelRenamePopup .imgModelNameCreateBtn:focus,
  .modelRenamePopup .renameDoneBtn:focus,
  .modelRenamePopup .renameAnnotateBtn:focus,
  .renameAnnotateClassModal .imgNameCreateBtn:focus,
  .renameAnnotateClassModal .imgModelNameCreateBtn:focus,
  .renameAnnotateClassModal .renameDoneBtn:focus,
  .renameAnnotateClassModal .renameAnnotateBtn:focus {
    outline: none;
    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.08), inset 0px -1px 0px rgba(0, 0, 0, 0.2) !important; }

.imgRenamePopup .cancelBtn,
.imgModelRenamePopup .cancelBtn,
.datasetRenamePopup .cancelBtn,
.modelRenamePopup .cancelBtn,
.renameAnnotateClassModal .cancelBtn {
  background: transparent !important;
  color: #303030;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer; }
  .imgRenamePopup .cancelBtn:focus,
  .imgModelRenamePopup .cancelBtn:focus,
  .datasetRenamePopup .cancelBtn:focus,
  .modelRenamePopup .cancelBtn:focus,
  .renameAnnotateClassModal .cancelBtn:focus {
    outline: none; }

.imgRenamePopup .imgNameCreateBtn,
.imgModelRenamePopup .imgNameCreateBtn,
.datasetRenamePopup .imgNameCreateBtn,
.modelRenamePopup .imgNameCreateBtn,
.renameAnnotateClassModal .imgNameCreateBtn {
  width: auto; }
  .imgRenamePopup .imgNameCreateBtn:focus,
  .imgModelRenamePopup .imgNameCreateBtn:focus,
  .datasetRenamePopup .imgNameCreateBtn:focus,
  .modelRenamePopup .imgNameCreateBtn:focus,
  .renameAnnotateClassModal .imgNameCreateBtn:focus {
    outline: none; }

.imgRenamePopup .perceptionCreateWrapper,
.imgModelRenamePopup .perceptionCreateWrapper,
.datasetRenamePopup .perceptionCreateWrapper,
.modelRenamePopup .perceptionCreateWrapper,
.renameAnnotateClassModal .perceptionCreateWrapper {
  margin-top: 0; }
  .imgRenamePopup .perceptionCreateWrapper label,
  .imgModelRenamePopup .perceptionCreateWrapper label,
  .datasetRenamePopup .perceptionCreateWrapper label,
  .modelRenamePopup .perceptionCreateWrapper label,
  .renameAnnotateClassModal .perceptionCreateWrapper label {
    color: #210835;
    font-weight: 400;
    font-size: 14px; }

.imgRenamePopup .modalButtonsRight,
.imgModelRenamePopup .modalButtonsRight,
.datasetRenamePopup .modalButtonsRight,
.modelRenamePopup .modalButtonsRight,
.renameAnnotateClassModal .modalButtonsRight {
  margin-bottom: 0; }

.deleteModal .header,
.deleteModal .modalHeader,
.classDelete .header,
.classDelete .modalHeader,
.imageDelete .header,
.imageDelete .modalHeader,
.ImageLabel .header,
.ImageLabel .modalHeader,
.deletePersonModal .header,
.deletePersonModal .modalHeader,
.deleteDatasetModal .header,
.deleteDatasetModal .modalHeader,
.deleteImageClass .header,
.deleteImageClass .modalHeader,
.deleteImageClassModal .header,
.deleteImageClassModal .modalHeader,
.tagDeleteWarn_files .header,
.tagDeleteWarn_files .modalHeader,
.closeImageModalWithoutApplyFilter .header,
.closeImageModalWithoutApplyFilter .modalHeader {
  padding: 16px 30px;
  position: relative;
  width: 100%;
  text-align: left;
  font-size: 20px;
  color: #303030;
  font-weight: 500;
  display: flex;
  align-items: center;
  margin-top: 0; }
  .deleteModal .header .icon,
  .deleteModal .modalHeader .icon,
  .classDelete .header .icon,
  .classDelete .modalHeader .icon,
  .imageDelete .header .icon,
  .imageDelete .modalHeader .icon,
  .ImageLabel .header .icon,
  .ImageLabel .modalHeader .icon,
  .deletePersonModal .header .icon,
  .deletePersonModal .modalHeader .icon,
  .deleteDatasetModal .header .icon,
  .deleteDatasetModal .modalHeader .icon,
  .deleteImageClass .header .icon,
  .deleteImageClass .modalHeader .icon,
  .deleteImageClassModal .header .icon,
  .deleteImageClassModal .modalHeader .icon,
  .tagDeleteWarn_files .header .icon,
  .tagDeleteWarn_files .modalHeader .icon,
  .closeImageModalWithoutApplyFilter .header .icon,
  .closeImageModalWithoutApplyFilter .modalHeader .icon {
    margin-right: 10px; }

.deleteModal .closeModal,
.classDelete .closeModal,
.imageDelete .closeModal,
.ImageLabel .closeModal,
.deletePersonModal .closeModal,
.deleteDatasetModal .closeModal,
.deleteImageClass .closeModal,
.deleteImageClassModal .closeModal,
.tagDeleteWarn_files .closeModal,
.closeImageModalWithoutApplyFilter .closeModal {
  padding: 0 !important; }

.deleteModal p,
.classDelete p,
.imageDelete p,
.ImageLabel p,
.deletePersonModal p,
.deleteDatasetModal p,
.deleteImageClass p,
.deleteImageClassModal p,
.tagDeleteWarn_files p,
.closeImageModalWithoutApplyFilter p {
  padding: 0 30px 20px;
  margin: 0;
  text-align: left;
  font-size: 16px;
  color: #595959;
  font-weight: 400;
  width: 100%;
  line-height: 24px; }
  .deleteModal p strong,
  .classDelete p strong,
  .imageDelete p strong,
  .ImageLabel p strong,
  .deletePersonModal p strong,
  .deleteDatasetModal p strong,
  .deleteImageClass p strong,
  .deleteImageClassModal p strong,
  .tagDeleteWarn_files p strong,
  .closeImageModalWithoutApplyFilter p strong {
    font-weight: 600; }

.deleteModal p + p,
.classDelete p + p,
.imageDelete p + p,
.ImageLabel p + p,
.deletePersonModal p + p,
.deleteDatasetModal p + p,
.deleteImageClass p + p,
.deleteImageClassModal p + p,
.tagDeleteWarn_files p + p,
.closeImageModalWithoutApplyFilter p + p {
  padding-top: 0; }

.deleteModal .deleteDatasetText,
.classDelete .deleteDatasetText,
.imageDelete .deleteDatasetText,
.ImageLabel .deleteDatasetText,
.deletePersonModal .deleteDatasetText,
.deleteDatasetModal .deleteDatasetText,
.deleteImageClass .deleteDatasetText,
.deleteImageClassModal .deleteDatasetText,
.tagDeleteWarn_files .deleteDatasetText,
.closeImageModalWithoutApplyFilter .deleteDatasetText {
  width: 100%; }

.deleteModal .delete-trueFiles,
.deleteModal .deleteModal-true,
.classDelete .delete-trueFiles,
.classDelete .deleteModal-true,
.imageDelete .delete-trueFiles,
.imageDelete .deleteModal-true,
.ImageLabel .delete-trueFiles,
.ImageLabel .deleteModal-true,
.deletePersonModal .delete-trueFiles,
.deletePersonModal .deleteModal-true,
.deleteDatasetModal .delete-trueFiles,
.deleteDatasetModal .deleteModal-true,
.deleteImageClass .delete-trueFiles,
.deleteImageClass .deleteModal-true,
.deleteImageClassModal .delete-trueFiles,
.deleteImageClassModal .deleteModal-true,
.tagDeleteWarn_files .delete-trueFiles,
.tagDeleteWarn_files .deleteModal-true,
.closeImageModalWithoutApplyFilter .delete-trueFiles,
.closeImageModalWithoutApplyFilter .deleteModal-true {
  background: #BF2600;
  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.08), inset 0px -1px 0px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  color: #fff;
  height: 36px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0 15px;
  font-size: 14px; }

.deleteModal .delete-falseFiles,
.deleteModal .deleteModal-false,
.classDelete .delete-falseFiles,
.classDelete .deleteModal-false,
.imageDelete .delete-falseFiles,
.imageDelete .deleteModal-false,
.ImageLabel .delete-falseFiles,
.ImageLabel .deleteModal-false,
.deletePersonModal .delete-falseFiles,
.deletePersonModal .deleteModal-false,
.deleteDatasetModal .delete-falseFiles,
.deleteDatasetModal .deleteModal-false,
.deleteImageClass .delete-falseFiles,
.deleteImageClass .deleteModal-false,
.deleteImageClassModal .delete-falseFiles,
.deleteImageClassModal .deleteModal-false,
.tagDeleteWarn_files .delete-falseFiles,
.tagDeleteWarn_files .deleteModal-false,
.closeImageModalWithoutApplyFilter .delete-falseFiles,
.closeImageModalWithoutApplyFilter .deleteModal-false {
  color: #303030;
  font-size: 14px;
  font-weight: 500;
  padding: 0 15px; }
  .deleteModal .delete-falseFiles:hover, .deleteModal .delete-falseFiles:focus,
  .deleteModal .deleteModal-false:hover,
  .deleteModal .deleteModal-false:focus,
  .classDelete .delete-falseFiles:hover,
  .classDelete .delete-falseFiles:focus,
  .classDelete .deleteModal-false:hover,
  .classDelete .deleteModal-false:focus,
  .imageDelete .delete-falseFiles:hover,
  .imageDelete .delete-falseFiles:focus,
  .imageDelete .deleteModal-false:hover,
  .imageDelete .deleteModal-false:focus,
  .ImageLabel .delete-falseFiles:hover,
  .ImageLabel .delete-falseFiles:focus,
  .ImageLabel .deleteModal-false:hover,
  .ImageLabel .deleteModal-false:focus,
  .deletePersonModal .delete-falseFiles:hover,
  .deletePersonModal .delete-falseFiles:focus,
  .deletePersonModal .deleteModal-false:hover,
  .deletePersonModal .deleteModal-false:focus,
  .deleteDatasetModal .delete-falseFiles:hover,
  .deleteDatasetModal .delete-falseFiles:focus,
  .deleteDatasetModal .deleteModal-false:hover,
  .deleteDatasetModal .deleteModal-false:focus,
  .deleteImageClass .delete-falseFiles:hover,
  .deleteImageClass .delete-falseFiles:focus,
  .deleteImageClass .deleteModal-false:hover,
  .deleteImageClass .deleteModal-false:focus,
  .deleteImageClassModal .delete-falseFiles:hover,
  .deleteImageClassModal .delete-falseFiles:focus,
  .deleteImageClassModal .deleteModal-false:hover,
  .deleteImageClassModal .deleteModal-false:focus,
  .tagDeleteWarn_files .delete-falseFiles:hover,
  .tagDeleteWarn_files .delete-falseFiles:focus,
  .tagDeleteWarn_files .deleteModal-false:hover,
  .tagDeleteWarn_files .deleteModal-false:focus,
  .closeImageModalWithoutApplyFilter .delete-falseFiles:hover,
  .closeImageModalWithoutApplyFilter .delete-falseFiles:focus,
  .closeImageModalWithoutApplyFilter .deleteModal-false:hover,
  .closeImageModalWithoutApplyFilter .deleteModal-false:focus {
    color: #303030; }

.deleteModal .tagDeleteWarn_files_inner,
.classDelete .tagDeleteWarn_files_inner,
.imageDelete .tagDeleteWarn_files_inner,
.ImageLabel .tagDeleteWarn_files_inner,
.deletePersonModal .tagDeleteWarn_files_inner,
.deleteDatasetModal .tagDeleteWarn_files_inner,
.deleteImageClass .tagDeleteWarn_files_inner,
.deleteImageClassModal .tagDeleteWarn_files_inner,
.tagDeleteWarn_files .tagDeleteWarn_files_inner,
.closeImageModalWithoutApplyFilter .tagDeleteWarn_files_inner {
  padding: 0; }

.deleteModal .deleteWarnOptions,
.classDelete .deleteWarnOptions,
.imageDelete .deleteWarnOptions,
.ImageLabel .deleteWarnOptions,
.deletePersonModal .deleteWarnOptions,
.deleteDatasetModal .deleteWarnOptions,
.deleteImageClass .deleteWarnOptions,
.deleteImageClassModal .deleteWarnOptions,
.tagDeleteWarn_files .deleteWarnOptions,
.closeImageModalWithoutApplyFilter .deleteWarnOptions {
  margin-top: 10px;
  padding: 0 20px 20px; }

.deleteconfirmationModal .header,
.deleteconfirmationModal .modalHeader,
.removePersonModal .header,
.removePersonModal .modalHeader {
  padding: 20px 30px;
  position: relative;
  width: 100%;
  text-align: left;
  font-size: 20px;
  color: #303030;
  font-weight: 500;
  display: flex;
  align-items: center; }
  .deleteconfirmationModal .header .icon,
  .deleteconfirmationModal .modalHeader .icon,
  .removePersonModal .header .icon,
  .removePersonModal .modalHeader .icon {
    margin-right: 10px; }

.deleteconfirmationModal .closeModal,
.removePersonModal .closeModal {
  padding: 0 !important; }

.deleteconfirmationModal p,
.removePersonModal p {
  padding: 10px 30px 15px;
  margin: 0;
  text-align: left;
  font-size: 16px;
  color: #595959;
  font-weight: 400;
  width: 100%; }
  .deleteconfirmationModal p strong,
  .removePersonModal p strong {
    font-weight: 600;
    margin-top: 10px; }

.deleteconfirmationModal .delete-trueFiles,
.removePersonModal .delete-trueFiles {
  background: #BF2600;
  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.08), inset 0px -1px 0px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  color: #fff;
  height: 36px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0 15px;
  font-size: 14px; }

.deleteconfirmationModal .delete-falseFiles,
.removePersonModal .delete-falseFiles {
  color: #303030;
  font-size: 14px;
  font-weight: 500;
  padding: 0 15px; }
  .deleteconfirmationModal .delete-falseFiles:hover, .deleteconfirmationModal .delete-falseFiles:focus,
  .removePersonModal .delete-falseFiles:hover,
  .removePersonModal .delete-falseFiles:focus {
    color: #303030; }

.deleteconfirmationModal .tagDeleteWarn_files_inner,
.removePersonModal .tagDeleteWarn_files_inner {
  padding: 0; }

.deleteconfirmationModal .deleteWarnOptions,
.removePersonModal .deleteWarnOptions {
  margin-top: 10px;
  padding: 0 20px 20px; }

.removePersonModal .header {
  padding: 20px 30px;
  position: relative;
  width: 100%;
  text-align: left;
  font-size: 20px;
  color: #303030;
  font-weight: 500;
  display: flex;
  align-items: center; }
  .removePersonModal .header .icon {
    margin-right: 10px; }

.removePersonModal .closeModal {
  padding: 0 !important; }

.removePersonModal p {
  padding: 10px 30px 15px;
  margin: 0;
  text-align: left;
  font-size: 16px;
  color: #595959;
  font-weight: 400;
  width: 100%; }
  .removePersonModal p strong {
    font-weight: 600; }

.removePersonModal .delete-trueFiles {
  background: #BF2600;
  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.08), inset 0px -1px 0px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  color: #fff;
  height: 36px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0 15px;
  font-size: 14px; }

.removePersonModal .delete-falseFiles {
  color: #303030;
  font-size: 14px;
  font-weight: 500;
  padding: 0 15px; }
  .removePersonModal .delete-falseFiles:hover, .removePersonModal .delete-falseFiles:focus {
    color: #303030; }

.removePersonModal .tagDeleteWarn_files_inner {
  padding: 0; }

.removePersonModal .deleteWarnOptions {
  margin-top: 10px;
  padding: 0 20px 20px; }

.trainingLogModal {
  background: rgba(89, 89, 89, 0.64);
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1007;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease-in; }
  .trainingLogModal.show {
    opacity: 1;
    visibility: visible; }
  .trainingLogModal .invisibleBtn {
    position: absolute;
    right: 0;
    width: 100%;
    height: 100%; }
  .trainingLogModal .modalContainer {
    width: 100%;
    max-width: 995px;
    background: #FBFBFB;
    border-radius: 10px;
    overflow: hidden;
    z-index: 2;
    position: relative; }
  .trainingLogModal .modalHeader {
    background: #F0F0F0;
    border-radius: 10px;
    height: 66px;
    padding: 0 20px;
    display: flex;
    justify-content: flex-end;
    align-items: center; }
    .trainingLogModal .modalHeader .buttonGroup {
      display: inline-flex; }
      .trainingLogModal .modalHeader .buttonGroup .btn {
        margin-right: 10px;
        width: 20px;
        height: 20px;
        display: inline-block;
        padding: 0;
        border-radius: 20px; }
        .trainingLogModal .modalHeader .buttonGroup .btn.btnRed {
          background: #FF4A4A; }
        .trainingLogModal .modalHeader .buttonGroup .btn.btnOrange {
          background: #FFB83D; }
        .trainingLogModal .modalHeader .buttonGroup .btn.btnGreen {
          background: #00C543; }
  .trainingLogModal .modalBody {
    font-family: "Euclid Circular B"; }
    .trainingLogModal .modalBody hr {
      margin: 0 0 10px; }
    .trainingLogModal .modalBody .mprContainer {
      padding: 30px;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start; }
      .trainingLogModal .modalBody .mprContainer .infoBox {
        background: #FFFFFF;
        box-shadow: 2px 5px 5px rgba(22, 22, 22, 0.08);
        border-radius: 10px;
        margin-right: 30px;
        padding: 12px 30px;
        color: #535353;
        display: inline-flex;
        flex-direction: column; }
        .trainingLogModal .modalBody .mprContainer .infoBox label {
          font-weight: 400;
          font-size: 14px;
          margin-bottom: 10px; }
        .trainingLogModal .modalBody .mprContainer .infoBox:last-child {
          margin-right: 0; }
    .trainingLogModal .modalBody .content {
      height: 400px;
      overflow: hidden;
      padding: 20px 30px; }
      .trainingLogModal .modalBody .content ul li {
        color: #595959;
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 15px;
        font-family: "Euclid Circular B"; }

.resetModelSetting .delete-trueFiles {
  background: #8020CF; }

.tagDeleteWarn_files.complete .header {
  padding: 30px; }

.tagDeleteWarn_files.complete .deleteWarnOptions {
  padding: 0 30px 20px; }

.tagDeleteWarn_files.complete .closeModal {
  position: static;
  margin-left: auto; }

.datasetRenamePopup:disabled {
  background: #F7F7F7;
  color: #B7B7B7; }

.addImageChatModal .closeModal {
  top: 25px; }

.addImageChatModal .modal-dialog {
  max-width: 630px; }

.addImageChatModal .modal-content {
  padding-bottom: 0 !important;
  border-radius: 10px; }

.addImageChatModal .modal-header {
  padding: 22px 25px; }

.addImageChatModal .modal-title span {
  color: #8020CF; }

.addImageChatModal .modal-body {
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 50px;
  padding-right: 50px; }

.addImageChatModal .processHighlightBar {
  margin: 25px auto 48px;
  display: flex;
  flex-wrap: wrap; }
  .addImageChatModal .processHighlightBar .stepNames {
    width: 100%;
    display: flex;
    justify-content: space-evenly; }
  .addImageChatModal .processHighlightBar span {
    font-size: 14px;
    font-weight: 500;
    color: #AAAAAA;
    width: 50%;
    text-align: center; }
    .addImageChatModal .processHighlightBar span.active {
      color: #210835;
      font-weight: 600; }
  .addImageChatModal .processHighlightBar ul {
    padding: 0;
    margin: 0 auto 20px;
    width: 100%;
    height: 8px;
    border-radius: 8px;
    overflow: hidden;
    background-color: #D8D8D8;
    display: flex; }
    .addImageChatModal .processHighlightBar ul div {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: white; }
    .addImageChatModal .processHighlightBar ul li {
      width: 35%; }
      .addImageChatModal .processHighlightBar ul li:first-child, .addImageChatModal .processHighlightBar ul li:last-child {
        width: 15%; }
      .addImageChatModal .processHighlightBar ul li.active {
        background-color: #9646D7; }

.addImageChatModal form {
  width: 100%;
  margin: 0; }

.addImageChatModal .inputFieldContainer {
  height: 550px;
  overflow: hidden; }
  .addImageChatModal .inputFieldContainer .mCSB_container {
    padding-top: 5px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 150px; }
  .addImageChatModal .inputFieldContainer label {
    color: #210835;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 2px;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-start; }
    .addImageChatModal .inputFieldContainer label .icon {
      margin-left: 10px; }
      .addImageChatModal .inputFieldContainer label .icon .customTooltip {
        top: 25px;
        left: -120px;
        white-space: normal;
        min-width: 300px;
        word-break: break-word;
        font-style: normal;
        padding: 15px; }
  .addImageChatModal .inputFieldContainer .clearObjectDetector {
    color: #0052CC;
    font-size: 16px;
    font-weight: 600;
    margin-left: auto;
    background: transparent;
    border: none; }
  .addImageChatModal .inputFieldContainer .form-group {
    display: flex;
    flex-wrap: wrap; }
  .addImageChatModal .inputFieldContainer .pqGroup label {
    width: auto; }
  .addImageChatModal .inputFieldContainer input[type="text"],
  .addImageChatModal .inputFieldContainer input[type="number"] {
    background: #f7f7f7;
    border: 1px solid #E0E0E0;
    border-radius: 5px;
    height: 50px;
    padding-left: 20px;
    padding-right: 20px;
    width: 100% !important;
    box-shadow: none;
    font-size: 14px;
    font-weight: 400;
    color: #4E4576; }
  .addImageChatModal .inputFieldContainer .selectModelobjectDetector {
    background: #f7f7f7 url(../img/trangle-right-arrow-gray.svg) 96% center no-repeat;
    border: 1px solid #eaeaea;
    border-radius: 5px;
    height: 44px;
    padding-left: 20px;
    padding-right: 20px;
    width: 100% !important;
    box-shadow: none;
    font-size: 14px;
    font-weight: 400;
    color: #4E4576;
    text-align: left; }

.addImageChatModal .addImageModelNextBtn {
  width: 200px;
  height: 44px;
  outline: none; }
  .addImageChatModal .addImageModelNextBtn:focus {
    outline: none; }
  .addImageChatModal .addImageModelNextBtn:disabled {
    opacity: 1;
    background: #F7F7F7;
    color: #B7B7B7 !important;
    cursor: default !important; }

.addImageChatModal .btnNextModelDetail {
  margin: 0 auto; }

.addImageChatModal .btnSkip {
  color: #8020CF;
  font-weight: 600;
  font-size: 16px;
  position: absolute;
  right: 0; }

.addImageChatModal .label {
  color: #210835;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 5px;
  display: block; }

.addImageChatModal .epsTagsWrapper {
  margin-bottom: 50px; }
  .addImageChatModal .epsTagsWrapper .epsTag {
    margin-right: 12px;
    padding: 0 15px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 32px;
    border-radius: 25px;
    margin-bottom: 7px;
    border: 1px solid #4E4576;
    cursor: pointer; }
    .addImageChatModal .epsTagsWrapper .epsTag:last-child {
      margin-right: 0; }

.addImageChatModal .addNewPQ {
  font-size: 16px;
  font-weight: 500;
  color: #8020CF;
  text-decoration: underline;
  text-underline-offset: auto;
  margin-left: auto; }
  .addImageChatModal .addNewPQ .customTooltip {
    right: 10px;
    top: 25px; }

.addImageChatModal .pqGroup input[type='text'] {
  margin-top: 4px;
  margin-bottom: 20px;
  font-weight: 400; }
  .addImageChatModal .pqGroup input[type='text']:focus, .addImageChatModal .pqGroup input[type='text']:valid {
    font-weight: 600; }
  .addImageChatModal .pqGroup input[type='text']::placeholder {
    font-weight: 400; }

.addImageChatModal .pqGroup input[type='text'].childInput {
  width: 88% !important; }

.addImageChatModal .pqGroup .removechildInput {
  background: #ffffff url(../img/ch-close-darkpurple.svg) center center no-repeat;
  border: 1px solid #E7E6EC;
  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.08), inset 0px -1px 0px rgba(0, 0, 0, 0.2);
  border-radius: 28px;
  margin-left: 20px;
  width: 30px;
  height: 30px;
  margin-top: 10px; }

.addImageChatModal .selectModalObjectDetector,
.addImageChatModal .selectAllClass {
  width: 100%; }
  .addImageChatModal .selectModalObjectDetector .itemBtn,
  .addImageChatModal .selectAllClass .itemBtn {
    border-color: #e0e0e0;
    background: #f7f7f7 url(../img/trangle-down-arrow-lightblue.svg) 97% center no-repeat; }
    .addImageChatModal .selectModalObjectDetector .itemBtn.up,
    .addImageChatModal .selectAllClass .itemBtn.up {
      background: #f7f7f7 url(../img/trangle-up-arrow-lightblue.svg) 97% center no-repeat; }
    .addImageChatModal .selectModalObjectDetector .itemBtn:focus,
    .addImageChatModal .selectAllClass .itemBtn:focus {
      outline-color: #8020CF !important;
      color: #202223 !important;
      outline-style: solid !important;
      outline-width: 1px !important; }
  .addImageChatModal .selectModalObjectDetector .itemBtn,
  .addImageChatModal .selectAllClass .itemBtn {
    height: 44px;
    font-size: 16px;
    max-width: 100%;
    display: block;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    color: #595959;
    font-family: "latomedium";
    font-weight: 500;
    cursor: pointer;
    box-sizing: border-box;
    padding-left: 40px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
    .addImageChatModal .selectModalObjectDetector .itemBtn:before,
    .addImageChatModal .selectAllClass .itemBtn:before {
      width: 40px;
      height: 40px;
      background: url(../img/Search.svg) 12px center no-repeat !important;
      position: absolute;
      top: 2px;
      left: 0;
      content: '';
      z-index: 1; }
    .addImageChatModal .selectModalObjectDetector .itemBtn .searchODmodels,
    .addImageChatModal .selectModalObjectDetector .itemBtn .searchClass,
    .addImageChatModal .selectAllClass .itemBtn .searchODmodels,
    .addImageChatModal .selectAllClass .itemBtn .searchClass {
      padding-left: 40px !important; }
  .addImageChatModal .selectModalObjectDetector .dropdownItemList,
  .addImageChatModal .selectAllClass .dropdownItemList {
    padding-left: 10px !important;
    top: 55px;
    border-radius: 0 0 6px 6px;
    background-color: #f7f7f7;
    max-width: 100%;
    max-height: 400px; }
    .addImageChatModal .selectModalObjectDetector .dropdownItemList .mCSB_container,
    .addImageChatModal .selectAllClass .dropdownItemList .mCSB_container {
      padding-bottom: 50px; }
    .addImageChatModal .selectModalObjectDetector .dropdownItemList li,
    .addImageChatModal .selectAllClass .dropdownItemList li {
      display: flex;
      justify-content: flex-start;
      min-height: 60px;
      align-items: center;
      font-size: 14px;
      color: #595959;
      font-family: "latomedium";
      font-weight: 400;
      cursor: pointer;
      box-sizing: border-box;
      padding-right: 23px !important; }
      .addImageChatModal .selectModalObjectDetector .dropdownItemList li a,
      .addImageChatModal .selectAllClass .dropdownItemList li a {
        font-size: 16px;
        font-weight: 600;
        color: #595959; }
      .addImageChatModal .selectModalObjectDetector .dropdownItemList li:hover a,
      .addImageChatModal .selectModalObjectDetector .dropdownItemList li:hover a:focus,
      .addImageChatModal .selectModalObjectDetector .dropdownItemList li.active a,
      .addImageChatModal .selectAllClass .dropdownItemList li:hover a,
      .addImageChatModal .selectAllClass .dropdownItemList li:hover a:focus,
      .addImageChatModal .selectAllClass .dropdownItemList li.active a {
        background: transparent;
        color: #595959 !important; }
      .addImageChatModal .selectModalObjectDetector .dropdownItemList li .classInput,
      .addImageChatModal .selectAllClass .dropdownItemList li .classInput {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        border: 2px solid #878787;
        border-radius: 4px;
        background: #FAFBFC;
        margin-right: 10px;
        width: 18px;
        height: 18px;
        display: inline-block;
        cursor: pointer; }
        .addImageChatModal .selectModalObjectDetector .dropdownItemList li .classInput:checked,
        .addImageChatModal .selectAllClass .dropdownItemList li .classInput:checked {
          background: #8020CF url(../img/ch-check-white.svg) center center no-repeat;
          border-color: #8020CF; }
        .addImageChatModal .selectModalObjectDetector .dropdownItemList li .classInput:focus,
        .addImageChatModal .selectAllClass .dropdownItemList li .classInput:focus {
          outline: none; }
  .addImageChatModal .selectModalObjectDetector input[type='text'].searchODmodels,
  .addImageChatModal .selectModalObjectDetector input[type='text'].searchClass,
  .addImageChatModal .selectAllClass input[type='text'].searchODmodels,
  .addImageChatModal .selectAllClass input[type='text'].searchClass {
    position: absolute;
    top: 0;
    left: 0;
    border: none;
    cursor: pointer;
    color: #595959;
    font-size: 14px;
    font-weight: 400;
    margin: 1px;
    height: 42px;
    padding-left: 0;
    padding-right: 30px;
    background: transparent;
    max-width: 100%;
    width: 100%;
    border-radius: 5px; }
    .addImageChatModal .selectModalObjectDetector input[type='text'].searchODmodels:focus,
    .addImageChatModal .selectModalObjectDetector input[type='text'].searchClass:focus,
    .addImageChatModal .selectAllClass input[type='text'].searchODmodels:focus,
    .addImageChatModal .selectAllClass input[type='text'].searchClass:focus {
      outline-width: 1px;
      box-shadow: none;
      cursor: auto; }

.addImageChatModal .selectModalObjectDetector .dropdownItemList {
  padding: 0 !important; }
  .addImageChatModal .selectModalObjectDetector .dropdownItemList li {
    padding-left: 28px !important; }
    .addImageChatModal .selectModalObjectDetector .dropdownItemList li:hover {
      background-color: #FAF5FF; }
    .addImageChatModal .selectModalObjectDetector .dropdownItemList li.active {
      background: #FAF5FF url(../img/ch-check-purple.svg) 10px center no-repeat; }

.addImageChatModal .selectAllClass .dropdownItemList {
  padding-left: 20px !important;
  max-height: 300px; }
  .addImageChatModal .selectAllClass .dropdownItemList li {
    min-height: 50px; }
    .addImageChatModal .selectAllClass .dropdownItemList li:hover {
      cursor: default; }
  .addImageChatModal .selectAllClass .dropdownItemList label {
    font-size: 14px;
    font-weight: 400;
    color: #535353;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 0;
    padding: 0; }

.addImageChatModal .parameters {
  padding: 25px 20px 20px;
  border: 1px solid #F2E9FA;
  border-radius: 10px; }
  .addImageChatModal .parameters label {
    font-weight: 400;
    display: inline-flex;
    align-items: center; }
    .addImageChatModal .parameters label .icon {
      margin-left: 10px; }

.addImageChatModal .showOnlyObject {
  display: flex;
  align-items: center; }
  .addImageChatModal .showOnlyObject label .icon {
    margin-right: 5px;
    margin-left: 0; }
  .addImageChatModal .showOnlyObject .soOBtn {
    margin-left: auto;
    display: inline-flex;
    align-items: center; }
    .addImageChatModal .showOnlyObject .soOBtn span {
      margin-right: 10px; }
    .addImageChatModal .showOnlyObject .soOBtn input[type="checkbox"] {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      width: 32px;
      height: 16px;
      border-radius: 8px;
      position: relative;
      background: #AAAAAA;
      display: inline-flex;
      align-items: center; }
      .addImageChatModal .showOnlyObject .soOBtn input[type="checkbox"]:focus {
        outline: none; }
      .addImageChatModal .showOnlyObject .soOBtn input[type="checkbox"]:before {
        width: 12px;
        height: 12px;
        border-radius: 30px;
        position: absolute;
        left: 2px;
        display: inline-block;
        content: '';
        background: #ffffff;
        cursor: pointer;
        transition: all 0.2s ease-in; }
      .addImageChatModal .showOnlyObject .soOBtn input[type="checkbox"]:checked {
        background: #8020CF; }
      .addImageChatModal .showOnlyObject .soOBtn input[type="checkbox"]:checked:before {
        left: 17px;
        background: #ffffff; }

.addImageChatSelectModel label {
  color: #595959;
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 16px; }

.addImageChatSelectModel .models {
  min-height: 665px; }
  .addImageChatSelectModel .models .modelsBtn {
    background: #F7F7F7;
    box-shadow: 1px 1px 3px rgba(22, 22, 22, 0.08);
    border-radius: 5px;
    height: 58px;
    width: 100%;
    padding: 0 30px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border: none;
    cursor: pointer;
    margin-bottom: 25px;
    color: #595959;
    font-size: 16px;
    font-weight: 400; }
    .addImageChatSelectModel .models .modelsBtn .icon {
      margin-right: 22px; }
    .addImageChatSelectModel .models .modelsBtn:last-child {
      margin-bottom: 0; }

.readyNowModels label,
.customObjectModels label {
  color: #210835;
  margin-bottom: 2px;
  font-size: 16px;
  font-weight: 500; }

.readyNowModels .objectDetector,
.customObjectModels .objectDetector {
  min-height: 635px; }

.readyNowModels .btnSaveOD,
.customObjectModels .btnSaveOD {
  width: 200px;
  height: 44px;
  outline: none; }
  .readyNowModels .btnSaveOD:focus,
  .customObjectModels .btnSaveOD:focus {
    outline: none; }
  .readyNowModels .btnSaveOD:disabled,
  .customObjectModels .btnSaveOD:disabled {
    opacity: 1;
    background: #F7F7F7;
    color: #B7B7B7 !important;
    cursor: default !important; }

.addImageChatModalPS .inputFieldContainer {
  height: 550px; }

.imageChatmodelDetailsContent {
  display: flex;
  justify-content: space-between; }
  .imageChatmodelDetailsContent .imageChatmodelDetailsBox {
    display: inline-flex;
    flex-direction: column;
    width: 49%;
    margin-bottom: 50px;
    border: 1px solid #F2E9FA;
    filter: drop-shadow(2px 5px 5px rgba(185, 184, 184, 0.08));
    border-radius: 10px; }
    .imageChatmodelDetailsContent .imageChatmodelDetailsBox .header {
      padding: 21px;
      font-size: 16px;
      font-weight: 500;
      margin: 0;
      border-bottom: 1px solid #F2E9FA; }
      .imageChatmodelDetailsContent .imageChatmodelDetailsBox .header h5 {
        color: #4E4576;
        margin-bottom: 10px;
        font-size: 16px;
        font-weight: 500; }
      .imageChatmodelDetailsContent .imageChatmodelDetailsBox .header strong {
        color: #535353;
        font-size: 16px;
        font-weight: 500; }
    .imageChatmodelDetailsContent .imageChatmodelDetailsBox label {
      font-size: 14px;
      font-weight: 500;
      color: #4E4576;
      margin-bottom: 10px; }
    .imageChatmodelDetailsContent .imageChatmodelDetailsBox .addedClasses,
    .imageChatmodelDetailsContent .imageChatmodelDetailsBox .parameters {
      font-size: 14px;
      font-weight: 400;
      margin-bottom: 32px;
      color: #303030; }
      .imageChatmodelDetailsContent .imageChatmodelDetailsBox .addedClasses p,
      .imageChatmodelDetailsContent .imageChatmodelDetailsBox .parameters p {
        display: flex;
        align-items: center; }
      .imageChatmodelDetailsContent .imageChatmodelDetailsBox .addedClasses .icon,
      .imageChatmodelDetailsContent .imageChatmodelDetailsBox .parameters .icon {
        margin: 0 5px; }
        .imageChatmodelDetailsContent .imageChatmodelDetailsBox .addedClasses .icon .customTooltip,
        .imageChatmodelDetailsContent .imageChatmodelDetailsBox .parameters .icon .customTooltip {
          font-style: normal;
          min-width: 300;
          padding: 15px;
          top: 25px;
          left: 0;
          white-space: normal; }
      .imageChatmodelDetailsContent .imageChatmodelDetailsBox .addedClasses strong,
      .imageChatmodelDetailsContent .imageChatmodelDetailsBox .parameters strong {
        color: #303030;
        font-size: 16px;
        font-weight: 500; }
    .imageChatmodelDetailsContent .imageChatmodelDetailsBox .details {
      padding: 25px 20px;
      min-height: 300px; }
      .imageChatmodelDetailsContent .imageChatmodelDetailsBox .details .addedClasses .classes {
        width: 100%;
        height: 30px;
        overflow: hidden;
        word-break: break-word;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: block;
        margin-bottom: 10px; }
        .imageChatmodelDetailsContent .imageChatmodelDetailsBox .details .addedClasses .classes.show {
          height: auto;
          white-space: normal;
          width: auto; }
      .imageChatmodelDetailsContent .imageChatmodelDetailsBox .details .viewAll {
        display: inline-block;
        font-size: 14px;
        font-weight: 500;
        text-decoration: underline;
        color: #303030;
        margin-left: auto;
        white-space: nowrap; }
    .imageChatmodelDetailsContent .imageChatmodelDetailsBox .promptQuestions {
      padding: 25px 20px;
      list-style: inside decimal; }
      .imageChatmodelDetailsContent .imageChatmodelDetailsBox .promptQuestions li {
        color: #535353;
        font-size: 14px;
        font-weight: 400;
        margin-bottom: 10px; }
    .imageChatmodelDetailsContent .imageChatmodelDetailsBox .showOnlyObject {
      display: flex;
      align-items: center; }
      .imageChatmodelDetailsContent .imageChatmodelDetailsBox .showOnlyObject .alertDesable {
        background: transparent !important; }
        .imageChatmodelDetailsContent .imageChatmodelDetailsBox .showOnlyObject .alertDesable .alertTooltip {
          top: 25px;
          left: 45px; }
      .imageChatmodelDetailsContent .imageChatmodelDetailsBox .showOnlyObject label {
        color: #535353;
        display: inline-flex;
        margin-bottom: 0;
        align-items: center;
        font-weight: 400; }
        .imageChatmodelDetailsContent .imageChatmodelDetailsBox .showOnlyObject label .icon {
          margin-right: 10px;
          margin-left: 0; }
      .imageChatmodelDetailsContent .imageChatmodelDetailsBox .showOnlyObject .soOBtn {
        margin-left: 45px;
        display: inline-flex;
        align-items: center; }
        .imageChatmodelDetailsContent .imageChatmodelDetailsBox .showOnlyObject .soOBtn span {
          margin-right: 10px; }
        .imageChatmodelDetailsContent .imageChatmodelDetailsBox .showOnlyObject .soOBtn input[type="checkbox"] {
          appearance: none;
          -webkit-appearance: none;
          -moz-appearance: none;
          width: 32px;
          height: 16px;
          border-radius: 8px;
          position: relative;
          background: #AAAAAA;
          display: inline-flex;
          align-items: center; }
          .imageChatmodelDetailsContent .imageChatmodelDetailsBox .showOnlyObject .soOBtn input[type="checkbox"]:focus {
            outline: none; }
          .imageChatmodelDetailsContent .imageChatmodelDetailsBox .showOnlyObject .soOBtn input[type="checkbox"]:before {
            width: 12px;
            height: 12px;
            border-radius: 30px;
            position: absolute;
            left: 2px;
            display: inline-block;
            content: '';
            background: #ffffff;
            cursor: pointer;
            transition: all 0.2s ease-in; }
          .imageChatmodelDetailsContent .imageChatmodelDetailsBox .showOnlyObject .soOBtn input[type="checkbox"]:checked {
            background: #8020CF; }
          .imageChatmodelDetailsContent .imageChatmodelDetailsBox .showOnlyObject .soOBtn input[type="checkbox"]:checked:before {
            left: 17px;
            background: #ffffff; }

.addImageChatModalMD .customTooltip {
  font-weight: 400;
  font-size: 14px;
  white-space: normal;
  word-break: break-word;
  min-width: 400px;
  height: auto;
  left: -200px;
  top: 25px;
  padding: 15px;
  font-style: normal; }

.addImageChatModalMD .nmsWorkflow .customTooltip,
.addImageChatModalMD .workflow_nms_thresh .customTooltip {
  left: auto !important;
  right: 0; }

.addImageChatModalMD .inputFieldContainer {
  height: 490px; }
  .addImageChatModalMD .inputFieldContainer.mCS_destroyed {
    padding: 5px 10px 0 5px; }
  .addImageChatModalMD .inputFieldContainer .form-group {
    max-width: 500px; }

.addImageChatModalMD .btnWrapper {
  margin-top: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative; }

.addImageChatModalMD .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden {
  margin-right: 0 !important; }

.addImageChatModalMD .mCSB_container {
  padding: 0;
  padding-bottom: 100px; }

.imageChatModalDetailPage .cardActionsDropdown .actionItemList .apiScriptModel a {
  font-size: 14px;
  font-weight: 500;
  color: #535353;
  background: url(../img/ch-apiscript-gray.svg) 15px center no-repeat; }

.imageChatModalDetailPage .tvuUploadMedia .modal-header {
  border-bottom: 1px solid #D8D8D8; }

.imageChatModalDetailPage .uploadModalWrapper .fileuploadInfo {
  position: absolute;
  top: 15px;
  width: 100%;
  text-align: center;
  color: #00875A;
  display: none;
  font-size: 14px;
  font-weight: 600; }

.imageChatModalDetailPage .modelDetailTabs .modelDetailTab {
  font-weight: 400; }
  .imageChatModalDetailPage .modelDetailTabs .modelDetailTab.activeTab {
    font-weight: 600; }

.imageChatModalDetailPage .reportsContentArea .mrl {
  text-align: right; }
  .imageChatModalDetailPage .reportsContentArea .mrl a {
    font-weight: 500;
    color: #8020CF;
    font-size: 14px;
    text-decoration: underline; }

.imageChatModalDetailPage .reportsContentArea .reportTable .tablehead .className,
.imageChatModalDetailPage .reportsContentArea .reportTable .tableBody .className {
  width: 30% !important; }

.imageChatModalDetailPage .reportsContentArea .reportTable .tableBody .eachTableRaw ul {
  padding: 25px 0; }
  .imageChatModalDetailPage .reportsContentArea .reportTable .tableBody .eachTableRaw ul .perceptionName {
    color: #535353; }
  .imageChatModalDetailPage .reportsContentArea .reportTable .tableBody .eachTableRaw ul li {
    font-size: 16px;
    font-weight: 400; }

.imageChatModalDetailPage .reportsContentArea .f1scroeTable .tablehead li {
  justify-content: flex-start;
  text-align: left; }

.imageChatModalDetailPage .reportsContentArea .f1scroeTable .tableBody .eachTableRaw ul .className {
  justify-content: flex-start;
  text-align: left; }

.imageChatModalDetailPage .missingResultModal .modal-dialog {
  max-width: 785px; }

.imageChatModalDetailPage .missingResultModal .modal-header {
  border-bottom: 1px solid #E0E0E0; }

.imageChatModalDetailPage .missingResultModal .modal-content {
  padding-bottom: 0 !important; }

.imageChatModalDetailPage .missingResultModal .modal-body {
  padding: 40px 90px 20px; }
  .imageChatModalDetailPage .missingResultModal .modal-body .inputFieldContainer {
    min-height: 400px; }
    .imageChatModalDetailPage .missingResultModal .modal-body .inputFieldContainer label {
      font-weight: 500;
      font-size: 16px;
      color: #210835;
      margin-bottom: 4px; }
    .imageChatModalDetailPage .missingResultModal .modal-body .inputFieldContainer input[type="text"] {
      background: #F7F7F7;
      border: 1px solid #EAEAEA;
      border-radius: 5px;
      color: #4E4576;
      font-size: 14px;
      font-weight: 400;
      width: 100%;
      height: 50px;
      padding: 0 20px; }

.imageChatModalDetailPage .missingResultModal .infoContent {
  text-align: left !important; }

.imageChatModalDetailPage .missingResultModal .buttonWrpper {
  border-top: 1px solid #E0E0E0;
  padding: 20px;
  width: 100%; }

.imageChatModalDetailPage .missingResultModal .btnSave {
  width: 250px;
  height: 44px; }
  .imageChatModalDetailPage .missingResultModal .btnSave:focus {
    outline: none; }
  .imageChatModalDetailPage .missingResultModal .btnSave:disabled, .imageChatModalDetailPage .missingResultModal .btnSave.disable {
    opacity: 1;
    background: #F7F7F7;
    color: #B7B7B7 !important;
    cursor: default !important;
    opacity: 1 !important;
    border-color: #F7F7F7; }

.testViaUploadModal.imageChatTestViaUpload .itemList .itemAnnotationCheck .checkbox {
  font-size: 14px;
  font-weight: 400; }
  .testViaUploadModal.imageChatTestViaUpload .itemList .itemAnnotationCheck .checkbox .checkboxSpan {
    border-radius: 20px; }
  .testViaUploadModal.imageChatTestViaUpload .itemList .itemAnnotationCheck .checkbox .unmarked {
    opacity: 1; }

.testViaUploadModal.imageChatTestViaUpload .itemList .listItemTopbar li {
  color: #303030; }

.testViaUploadModal.imageChatTestViaUpload .itemList .listItemTopbar li,
.testViaUploadModal.imageChatTestViaUpload .itemList .listItemContent li {
  justify-content: center;
  font-size: 16px;
  font-weight: 500; }
  .testViaUploadModal.imageChatTestViaUpload .itemList .listItemTopbar li .itemclassName,
  .testViaUploadModal.imageChatTestViaUpload .itemList .listItemContent li .itemclassName {
    justify-content: flex-start; }

.testViaUploadModal.imageChatTestViaUpload .itemList .listItemTopbar .itemImage,
.testViaUploadModal.imageChatTestViaUpload .itemList .listItemContent .itemImage {
  justify-content: center;
  width: 15%; }

.testViaUploadModal.imageChatTestViaUpload .itemList .listItemTopbar .itemclassName,
.testViaUploadModal.imageChatTestViaUpload .itemList .listItemContent .itemclassName {
  width: 30%; }

.testViaUploadModal.imageChatTestViaUpload .itemList .listItemTopbar .response,
.testViaUploadModal.imageChatTestViaUpload .itemList .listItemContent .response {
  width: 30%; }

.testViaUploadModal.imageChatTestViaUpload .itemList .listItemTopbar .itemAnnotationCheck,
.testViaUploadModal.imageChatTestViaUpload .itemList .listItemContent .itemAnnotationCheck {
  /*			display: none;*/ }

.testViaUploadModal.imageChatTestViaUpload .itemList .itemAnnotationCheck .checkbox input[type="radio"] {
  display: none; }

.imageChatTestViaUpload .contentGroup #match_text {
  color: #159A86;
  font-weight: 400; }

.imageChatTestViaUpload .currentView {
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  margin-top: 20px; }
  .imageChatTestViaUpload .currentView span {
    color: #159A86; }

.imageChatTestViaUpload .eachTag {
  font-size: 16px;
  font-weight: 500;
  color: #210835;
  justify-content: flex-start;
  text-align: left; }

.imageChatTestViaUpload .itemList .listItemContent .itemSimilarity {
  font-size: 16px; }

.editImageChatModal .modal-dialog {
  max-width: 590px; }

.editImageChatModal .modal-content {
  padding-bottom: 0 !important; }

.editImageChatModal .modal-header {
  border-bottom: 1px solid #D8D8D8; }

.editImageChatModal .modal-body {
  padding-left: 20px;
  padding-right: 10px;
  padding-bottom: 30px; }

.editImageChatModal .inputFieldContainer {
  margin-bottom: 20px;
  height: 550px;
  overflow: hidden;
  padding: 5px 10px 0 5px; }
  .editImageChatModal .inputFieldContainer .mCSB_container {
    padding-bottom: 100px; }
  .editImageChatModal .inputFieldContainer label {
    color: #210835;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 2px;
    display: inline-flex;
    align-items: center; }
    .editImageChatModal .inputFieldContainer label .icon {
      margin-left: 5px; }
  .editImageChatModal .inputFieldContainer .form-group {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding: 0 5px;
    max-width: 525px; }
  .editImageChatModal .inputFieldContainer input[type="text"] {
    background: #f7f7f7;
    border: 1px solid #eaeaea;
    border-radius: 5px;
    height: 44px;
    padding-left: 20px;
    padding-right: 20px;
    width: 100% !important;
    box-shadow: none;
    font-size: 14px;
    font-weight: 500;
    color: #222222; }
  .editImageChatModal .inputFieldContainer .accordionLabel {
    font-weight: 500;
    padding-bottom: 8px;
    width: 100%;
    border-bottom: 1px solid #D8D8D8;
    position: relative;
    margin-bottom: 15px;
    margin-top: 10px; }
    .editImageChatModal .inputFieldContainer .accordionLabel .arrowDownBtn {
      width: 30px;
      height: 30px;
      position: absolute;
      right: 10px;
      top: 0;
      display: inline-flex;
      content: '';
      cursor: pointer;
      background: url(../img/down-arrow-light-gray.svg) center center no-repeat; }
    .editImageChatModal .inputFieldContainer .accordionLabel.openAccordion .arrowDownBtn {
      background: url(../img/up-arrow-light-gray.svg) center center no-repeat; }
  .editImageChatModal .inputFieldContainer .accordionContent {
    width: 100%; }
    .editImageChatModal .inputFieldContainer .accordionContent .form-group {
      width: 100%; }
  .editImageChatModal .inputFieldContainer .parameters {
    padding: 25px 20px 20px;
    border: 1px solid #F2E9FA;
    border-radius: 10px;
    margin-bottom: 20px; }
    .editImageChatModal .inputFieldContainer .parameters input[type="text"],
    .editImageChatModal .inputFieldContainer .parameters input[type="number"] {
      background: #f7f7f7;
      border: 1px solid #eaeaea;
      border-radius: 5px;
      height: 44px;
      padding-left: 20px;
      padding-right: 20px;
      width: 100% !important;
      box-shadow: none;
      font-size: 14px;
      font-weight: 400;
      color: #4E4576; }
  .editImageChatModal .inputFieldContainer .selectModelobjectDetector {
    background: #f7f7f7 url(../img/trangle-right-arrow-gray.svg) 96% center no-repeat;
    border: 1px solid #eaeaea;
    border-radius: 5px;
    height: 44px;
    padding-left: 20px;
    padding-right: 20px;
    width: 100% !important;
    box-shadow: none;
    font-size: 14px;
    font-weight: 400;
    color: #4E4576;
    text-align: left; }

.editImageChatModal .selectModalObjectDetector,
.editImageChatModal .selectAllClass {
  width: 100%; }
  .editImageChatModal .selectModalObjectDetector .itemBtn,
  .editImageChatModal .selectAllClass .itemBtn {
    border-color: #e0e0e0;
    background: #f7f7f7 url(../img/trangle-down-arrow-lightblue.svg) 97% center no-repeat; }
    .editImageChatModal .selectModalObjectDetector .itemBtn.up,
    .editImageChatModal .selectAllClass .itemBtn.up {
      background: #f7f7f7 url(../img/trangle-up-arrow-lightblue.svg) 97% center no-repeat; }
    .editImageChatModal .selectModalObjectDetector .itemBtn:focus,
    .editImageChatModal .selectAllClass .itemBtn:focus {
      outline-color: #8020CF !important;
      color: #202223 !important;
      outline-style: solid !important;
      outline-width: 1px !important; }
  .editImageChatModal .selectModalObjectDetector .itemBtn,
  .editImageChatModal .selectAllClass .itemBtn {
    height: 44px;
    font-size: 16px;
    max-width: 100%;
    display: block;
    font-size: 14px;
    color: #595959;
    font-family: "latomedium";
    font-weight: 500;
    cursor: pointer;
    box-sizing: border-box;
    padding-left: 40px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
    .editImageChatModal .selectModalObjectDetector .itemBtn:before,
    .editImageChatModal .selectAllClass .itemBtn:before {
      width: 40px;
      height: 40px;
      background: url(../img/Search.svg) 12px center no-repeat !important;
      position: absolute;
      top: 2px;
      left: 0;
      content: '';
      z-index: 1; }
    .editImageChatModal .selectModalObjectDetector .itemBtn .searchODmodels,
    .editImageChatModal .selectModalObjectDetector .itemBtn .searchClass,
    .editImageChatModal .selectAllClass .itemBtn .searchODmodels,
    .editImageChatModal .selectAllClass .itemBtn .searchClass {
      padding-left: 40px !important; }
  .editImageChatModal .selectModalObjectDetector .dropdownItemList,
  .editImageChatModal .selectAllClass .dropdownItemList {
    padding-left: 10px !important;
    top: 55px;
    border-radius: 0 0 6px 6px;
    background-color: #f7f7f7;
    max-width: 100%;
    max-height: 400px; }
    .editImageChatModal .selectModalObjectDetector .dropdownItemList .mCSB_container,
    .editImageChatModal .selectAllClass .dropdownItemList .mCSB_container {
      padding-bottom: 50px; }
    .editImageChatModal .selectModalObjectDetector .dropdownItemList li,
    .editImageChatModal .selectAllClass .dropdownItemList li {
      display: flex;
      justify-content: flex-start;
      min-height: 60px;
      align-items: center;
      font-size: 14px;
      color: #595959;
      font-family: "latomedium";
      font-weight: 400;
      cursor: pointer;
      box-sizing: border-box;
      max-width: 480px;
      padding-right: 23px !important; }
      .editImageChatModal .selectModalObjectDetector .dropdownItemList li a,
      .editImageChatModal .selectAllClass .dropdownItemList li a {
        font-size: 16px;
        font-weight: 600;
        color: #595959; }
      .editImageChatModal .selectModalObjectDetector .dropdownItemList li:hover a,
      .editImageChatModal .selectModalObjectDetector .dropdownItemList li:hover a:focus,
      .editImageChatModal .selectModalObjectDetector .dropdownItemList li.active a,
      .editImageChatModal .selectAllClass .dropdownItemList li:hover a,
      .editImageChatModal .selectAllClass .dropdownItemList li:hover a:focus,
      .editImageChatModal .selectAllClass .dropdownItemList li.active a {
        background: transparent;
        color: #595959 !important; }
      .editImageChatModal .selectModalObjectDetector .dropdownItemList li .classInput,
      .editImageChatModal .selectAllClass .dropdownItemList li .classInput {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        border: 2px solid #878787;
        border-radius: 4px;
        background: #FAFBFC;
        margin-right: 10px;
        width: 18px;
        height: 18px;
        display: inline-block; }
        .editImageChatModal .selectModalObjectDetector .dropdownItemList li .classInput:checked,
        .editImageChatModal .selectAllClass .dropdownItemList li .classInput:checked {
          background: #8020CF url(../img/ch-check-white.svg) center center no-repeat;
          border-color: #8020CF; }
        .editImageChatModal .selectModalObjectDetector .dropdownItemList li .classInput:focus,
        .editImageChatModal .selectAllClass .dropdownItemList li .classInput:focus {
          outline: none; }
  .editImageChatModal .selectModalObjectDetector input[type='text'].searchODmodels,
  .editImageChatModal .selectModalObjectDetector input[type='text'].searchClass,
  .editImageChatModal .selectAllClass input[type='text'].searchODmodels,
  .editImageChatModal .selectAllClass input[type='text'].searchClass {
    position: absolute;
    top: 0;
    left: 0;
    border: none;
    cursor: pointer;
    color: #595959;
    font-size: 14px;
    font-weight: 400;
    margin: 1px;
    height: 42px;
    padding-left: 0;
    padding-right: 30px;
    background: transparent;
    max-width: 100%;
    width: 100%;
    border-radius: 5px; }
    .editImageChatModal .selectModalObjectDetector input[type='text'].searchODmodels:focus,
    .editImageChatModal .selectModalObjectDetector input[type='text'].searchClass:focus,
    .editImageChatModal .selectAllClass input[type='text'].searchODmodels:focus,
    .editImageChatModal .selectAllClass input[type='text'].searchClass:focus {
      outline-width: 1px;
      box-shadow: none;
      cursor: auto; }

.editImageChatModal .selectModalObjectDetector .itemBtn {
  padding-left: 20px; }
  .editImageChatModal .selectModalObjectDetector .itemBtn:before {
    display: none; }

.editImageChatModal .selectAllClass {
  max-width: 540px; }
  .editImageChatModal .selectAllClass .dropdownItemList {
    padding-left: 20px !important;
    max-height: 380px; }
    .editImageChatModal .selectAllClass .dropdownItemList li {
      min-height: 50px; }
    .editImageChatModal .selectAllClass .dropdownItemList label {
      font-size: 14px;
      font-weight: 400;
      color: #535353;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-bottom: 0;
      padding: 0; }

.editImageChatModal .editModalDetailSaveBtn {
  width: 145px;
  height: 36px;
  outline: none;
  font-size: 14px;
  font-weight: 500; }
  .editImageChatModal .editModalDetailSaveBtn:focus {
    outline: none; }
  .editImageChatModal .editModalDetailSaveBtn:disabled {
    opacity: 1;
    background: #F7F7F7;
    color: #B7B7B7 !important;
    cursor: default !important; }

.editImageChatModal .btnRest {
  width: 145px;
  height: 36px;
  font-size: 14px;
  font-weight: 500; }

.editImageChatModal .showOnlyObject {
  display: flex;
  align-items: center; }
  .editImageChatModal .showOnlyObject label {
    display: inline-flex;
    font-weight: 400;
    align-items: center; }
    .editImageChatModal .showOnlyObject label .icon {
      margin-right: 10px;
      margin-left: 0; }
    .editImageChatModal .showOnlyObject label .customTooltip {
      left: -60px; }
  .editImageChatModal .showOnlyObject .soOBtn {
    margin-left: auto;
    display: inline-flex;
    align-items: center; }
    .editImageChatModal .showOnlyObject .soOBtn span {
      margin-right: 10px; }
    .editImageChatModal .showOnlyObject .soOBtn input[type="checkbox"] {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      width: 32px;
      height: 16px;
      border-radius: 8px;
      position: relative;
      background: #AAAAAA;
      display: inline-flex;
      align-items: center; }
      .editImageChatModal .showOnlyObject .soOBtn input[type="checkbox"]:focus {
        outline: none; }
      .editImageChatModal .showOnlyObject .soOBtn input[type="checkbox"]:before {
        width: 12px;
        height: 12px;
        border-radius: 30px;
        position: absolute;
        left: 2px;
        display: inline-block;
        content: '';
        background: #ffffff;
        cursor: pointer;
        transition: all 0.2s ease-in; }
      .editImageChatModal .showOnlyObject .soOBtn input[type="checkbox"]:checked {
        background: #8020CF; }
      .editImageChatModal .showOnlyObject .soOBtn input[type="checkbox"]:checked:before {
        left: 17px;
        background: #ffffff; }

.editImageChatModal .btnWrapper {
  padding-top: 20px; }
  .editImageChatModal .btnWrapper .btnRest,
  .editImageChatModal .btnWrapper .editModalDetailSaveBtn {
    margin: 0 10px; }

.editImageChatModal .customTooltip {
  font-weight: 400;
  font-size: 14px;
  white-space: normal;
  word-break: break-word;
  min-width: 300px;
  height: auto;
  left: -150px;
  top: 25px;
  padding: 15px;
  font-style: normal; }

.editImageChatModal .workflow_nms_thresh .customTooltip {
  left: -300px; }

.editImageChatModal .addNewPQ {
  font-size: 16px;
  font-weight: 500;
  color: #8020CF;
  text-decoration: underline;
  text-underline-offset: auto;
  margin-left: auto; }
  .editImageChatModal .addNewPQ .customTooltip {
    right: 10px;
    top: 25px;
    min-width: auto;
    left: auto;
    white-space: nowrap;
    padding: 5px 10px; }

.editImageChatModal .pqGroup input[type='text'] {
  margin-top: 4px;
  margin-bottom: 20px;
  font-weight: 400; }
  .editImageChatModal .pqGroup input[type='text']:focus, .editImageChatModal .pqGroup input[type='text']:valid {
    font-weight: 600; }
  .editImageChatModal .pqGroup input[type='text']::placeholder {
    font-weight: 400; }

.editImageChatModal .pqGroup input[type='text'].childInput {
  width: 88% !important; }

.editImageChatModal .pqGroup .removechildInput {
  background: #ffffff url(../img/ch-close-darkpurple.svg) center center no-repeat;
  border: 1px solid #E7E6EC;
  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.08), inset 0px -1px 0px rgba(0, 0, 0, 0.2);
  border-radius: 28px;
  margin-left: 20px;
  width: 30px;
  height: 30px;
  margin-top: 10px; }

.editImageChatModal .condition-answers {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 10px; }
  .editImageChatModal .condition-answers .answer-btn {
    background-color: #f7f7f7;
    border: 1px solid #f7f7f7;
    width: 100px;
    height: 36px;
    border-radius: 10px;
    color: #4a4a4a; }
    .editImageChatModal .condition-answers .answer-btn.active {
      background-color: white;
      border: 1px solid #8020CF;
      color: black; }

.addImageChatModalNTM .inputFieldContainer {
  padding: 0 5px; }

.missingResultLogModal .modal-dialog {
  max-width: 1312px; }

.missingResultLogModal .modal-content {
  padding-bottom: 0 !important; }

.missingResultLogModal .modal-header {
  border-bottom: 1px solid #E0E0E0; }

.missingResultLogModal .modal-body {
  padding-left: 50px;
  padding-right: 50px; }

.missingResultLogModal .logListItem .header {
  display: flex;
  border-bottom: solid 1px #E0E0E0;
  padding: 0 25px 0 0; }
  .missingResultLogModal .logListItem .header li {
    display: inline-flex;
    font-size: 16px;
    font-weight: 600;
    color: #210835;
    padding: 12px 0; }

.missingResultLogModal .logListItem .logItem {
  height: 400px;
  overflow: hidden; }
  .missingResultLogModal .logListItem .logItem ul li {
    display: inline-flex;
    align-items: center;
    font-size: 16px;
    font-weight: 400;
    color: #303030; }
    .missingResultLogModal .logListItem .logItem ul li img {
      max-width: 94px;
      height: 60px;
      border-radius: 6px; }
  .missingResultLogModal .logListItem .logItem .eachLogRow {
    border-bottom: solid 1px #E0E0E0; }
    .missingResultLogModal .logListItem .logItem .eachLogRow ul {
      display: flex;
      padding: 12px 0; }

.missingResultLogModal .logListItem .header li:first-child,
.missingResultLogModal .logListItem .logItem ul li:first-child {
  width: 20%;
  justify-content: center; }

.missingResultLogModal .logListItem .header li:nth-child(2),
.missingResultLogModal .logListItem .logItem ul li:nth-child(2) {
  width: 70%; }

.missingResultLogModal .logListItem .header li:last-child,
.missingResultLogModal .logListItem .logItem ul li:last-child {
  width: 10%; }

.changeThumbnailModal .modal-dialog {
  max-width: 630px; }

.changeThumbnailModal .modal-content {
  padding-bottom: 0 !important; }

.changeThumbnailModal .modal-header {
  padding-top: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid #E0E0E0; }

.changeThumbnailModal .modal-body,
.changeThumbnailModal .modal-footer {
  width: 100%;
  justify-content: center;
  border: none; }

.changeThumbnailModal .modal-body {
  padding: 50px;
  padding-bottom: 114px; }

.changeThumbnailModal .modal-footer {
  padding: 20px;
  flex-direction: column; }
  .changeThumbnailModal .modal-footer .group {
    margin: 0 !important;
    width: 100%;
    display: none;
    text-align: center; }
    .changeThumbnailModal .modal-footer .group .blueLightBorderBtn {
      margin: 0 10px; }

.changeThumbnailModal .uploadPhotoBtn,
.changeThumbnailModal .removeThumbnailBtn,
.changeThumbnailModal .saveAsThumbnailBtn {
  width: 215px;
  height: 36px;
  border-radius: 20px;
  cursor: pointer; }
  .changeThumbnailModal .uploadPhotoBtn:focus,
  .changeThumbnailModal .removeThumbnailBtn:focus,
  .changeThumbnailModal .saveAsThumbnailBtn:focus {
    outline: none; }

.changeThumbnailModal .thumnailImage {
  display: flex;
  justify-content: center;
  border-radius: 10px;
  overflow: hidden; }
  .changeThumbnailModal .thumnailImage img {
    max-width: 530px;
    max-height: 234px;
    width: 100%;
    object-fit: cover; }

.changeThumbnailModal .notification {
  box-shadow: 2px 5px 20px rgba(65, 65, 65, 0.08);
  border-radius: 6px;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 420px;
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s ease-in;
  flex-wrap: wrap;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 20px; }
  .changeThumbnailModal .notification.notificationActive {
    visibility: visible;
    opacity: 1; }
  .changeThumbnailModal .notification .group {
    display: flex;
    align-items: center;
    width: 100%; }
  .changeThumbnailModal .notification .icon {
    width: 20px;
    height: 20px;
    margin-right: 12px; }
  .changeThumbnailModal .notification .note {
    font-size: 14px;
    font-weight: 500;
    width: 85%;
    color: #303030; }
  .changeThumbnailModal .notification .closeNotification {
    border: 0;
    cursor: pointer;
    padding: 0;
    background: transparent;
    margin-left: auto;
    width: 20px;
    height: 20px; }
  .changeThumbnailModal .notification.thumnailUpdateSucess {
    background: #E3FCEF; }
    .changeThumbnailModal .notification.thumnailUpdateSucess .icon {
      background: url(../img/check-icon-circle-green.svg) center center no-repeat;
      background-size: contain; }
    .changeThumbnailModal .notification.thumnailUpdateSucess .closeNotification {
      background: url(../img/close-green.svg) center center no-repeat; }

.propmtWarningModal {
  position: fixed;
  z-index: 1060;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  background: rgba(89, 89, 89, 0.64);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease-in; }
  .propmtWarningModal.alertPrompt {
    opacity: 1;
    visibility: visible; }
  .propmtWarningModal .innerContainer {
    width: 600px;
    height: 187px;
    border-radius: 10px;
    background: #ffffff;
    position: relative;
    display: inline-flex;
    flex-direction: column; }
    .propmtWarningModal .innerContainer p {
      margin-top: 68px;
      min-height: 51px;
      margin-bottom: 15px;
      font-size: 16px;
      color: #595959;
      font-weight: 400;
      padding: 0 22px; }
    .propmtWarningModal .innerContainer .btnOk {
      margin-left: auto;
      margin-right: 22px;
      width: 60px;
      height: 36px;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 500; }

.createModelGroupModal .processHighlightBar span {
  width: 33%; }

.createModelGroupModal .processHighlightBar ul li {
  width: 25%; }

.createModelGroupModal .modal-dialog {
  max-width: 780px !important; }

.createModelGroupModal .main-body {
  height: 550px; }

.createModelGroupModal .model-type {
  width: 38%;
  margin-bottom: 50px; }
  .createModelGroupModal .model-type .model-type-list .model-type-item {
    width: 100%;
    height: 50px;
    background-color: #FFFFFF;
    border: 1px solid #E0E0E0;
    display: flex;
    align-items: center;
    padding: 0 10px;
    color: #210835;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    cursor: pointer; }
    .createModelGroupModal .model-type .model-type-list .model-type-item.active {
      background-color: #F2E9FA;
      font-weight: 600; }
    .createModelGroupModal .model-type .model-type-list .model-type-item:nth-child(1) {
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      border-bottom: none; }
    .createModelGroupModal .model-type .model-type-list .model-type-item:nth-child(3) {
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
      border-top: none;
      box-shadow: 0px 2px 4px rgba(10, 46, 96, 0.1); }

.createModelGroupModal .model-select {
  width: 60%;
  margin-left: auto; }
  .createModelGroupModal .model-select .dropdownItemList {
    max-height: 300px; }
  .createModelGroupModal .model-select input[type='text'].searchClass {
    position: absolute;
    top: 0;
    left: 0;
    border: none;
    cursor: pointer;
    color: #595959;
    font-size: 14px;
    font-weight: 400;
    height: 38px;
    padding-left: 10px;
    padding-right: 30px;
    background: transparent;
    max-width: 100%;
    width: 100%;
    border-radius: 5px; }
    .createModelGroupModal .model-select input[type='text'].searchClass:focus {
      outline-width: 1px;
      box-shadow: none;
      cursor: auto; }
  .createModelGroupModal .model-select .checkbox-item {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 15px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }
    .createModelGroupModal .model-select .checkbox-item input {
      position: absolute;
      opacity: 0;
      cursor: pointer;
      height: 0;
      width: 0; }
      .createModelGroupModal .model-select .checkbox-item input:checked ~ .checkmark {
        background-color: #8020CF; }
        .createModelGroupModal .model-select .checkbox-item input:checked ~ .checkmark:after {
          display: block; }
    .createModelGroupModal .model-select .checkbox-item .checkmark {
      position: absolute;
      top: 3px;
      left: 10px;
      height: 16px;
      width: 16px;
      background-color: #eee;
      border-radius: 4px; }
      .createModelGroupModal .model-select .checkbox-item .checkmark:after {
        content: "";
        position: absolute;
        display: none;
        left: 6px;
        top: 3px;
        width: 5px;
        height: 10px;
        border: solid white;
        border-width: 0 2px 2px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg); }

.createModelGroupModal .selected-models-list {
  width: 100%;
  height: 150px;
  padding: 10px;
  border: 2px dashed #B7B7B7;
  overflow-y: scroll;
  margin-bottom: 10px; }
  .createModelGroupModal .selected-models-list::-webkit-scrollbar {
    display: none; }
  .createModelGroupModal .selected-models-list .selected-model-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
    font-size: 14px;
    line-height: 13px; }
    .createModelGroupModal .selected-models-list .selected-model-item img {
      cursor: pointer; }

.createModelGroupModal .step-2 .customDropdown .itemBtn {
  background: #F7F7F7 url(../img/trangle-down-arrow-gray.svg) 94% center no-repeat;
  padding-left: 40px; }
  .createModelGroupModal .step-2 .customDropdown .itemBtn.up {
    background: #F7F7F7 url(../img/trangle-down-arrow-gray.svg) 94% center no-repeat;
    border: 1px solid #8020CF; }
  .createModelGroupModal .step-2 .customDropdown .itemBtn:before {
    width: 40px;
    height: 40px;
    background: url(../img/Search.svg) 12px center no-repeat !important;
    position: absolute;
    left: 0;
    top: 0;
    content: '';
    z-index: 1; }

.createModelGroupModal .step-3 .customDropdown .checkbox {
  padding-left: 10px;
  padding-right: 15px; }

.createModelGroupModal .step-3 .customDropdown .itemBtn {
  padding: 0 15px !important;
  height: 36px;
  background: #fff;
  color: #360D57 !important;
  border: 1px solid #360D57 !important;
  font-weight: 500 !important;
  border-radius: 10px;
  font-size: 14px;
  display: inline-flex;
  align-items: center; }
  .createModelGroupModal .step-3 .customDropdown .itemBtn .icon {
    margin-right: 4px; }
  .createModelGroupModal .step-3 .customDropdown .itemBtn #classFilterCount {
    background-color: #360D57;
    color: #FFFFFF;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: none;
    justify-content: center;
    align-items: center;
    margin-left: 5px; }

.createModelGroupModal .step-3 .customDropdown .dropdownItemList {
  top: 50px;
  left: auto;
  right: 0;
  width: 300px;
  padding: 5px 8px 50px 5px !important;
  max-height: 280px;
  height: 280px; }
  .createModelGroupModal .step-3 .customDropdown .dropdownItemList li a {
    padding: 4px 10px; }
  .createModelGroupModal .step-3 .customDropdown .dropdownItemList .mCSB_container {
    padding: 1px; }

.createModelGroupModal .step-3 .selectClassSearch {
  width: 294px;
  height: 36px;
  border-radius: 4px;
  box-shadow: 0px 2px 5px 0px #2828281A;
  border: none; }

.createModelGroupModal .step-3 .selectAllClass {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 600;
  color: #8020CF;
  display: inline-block;
  cursor: pointer; }

.createModelGroupModal .step-3 .models-classes {
  overflow-y: scroll;
  height: 440px; }
  .createModelGroupModal .step-3 .models-classes::-webkit-scrollbar {
    display: none; }
  .createModelGroupModal .step-3 .models-classes .model-container {
    margin-bottom: 10px; }
    .createModelGroupModal .step-3 .models-classes .model-container .model-name {
      font-size: 16px;
      font-weight: 600;
      line-height: 13px;
      color: #303030;
      margin-bottom: 20px; }
      .createModelGroupModal .step-3 .models-classes .model-container .model-name span {
        font-weight: 400; }
    .createModelGroupModal .step-3 .models-classes .model-container .class-list {
      display: flex;
      align-items: flex-start;
      flex-wrap: wrap;
      gap: 10px 3%; }
      .createModelGroupModal .step-3 .models-classes .model-container .class-list .checkbox-item {
        display: block;
        width: 30%;
        position: relative;
        padding-left: 35px;
        margin-bottom: 12px;
        cursor: pointer;
        font-size: 14px;
        font-weight: 400;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none; }
        .createModelGroupModal .step-3 .models-classes .model-container .class-list .checkbox-item input {
          position: absolute;
          opacity: 0;
          cursor: pointer;
          height: 0;
          width: 0; }
          .createModelGroupModal .step-3 .models-classes .model-container .class-list .checkbox-item input:checked ~ .checkmark {
            background-color: #8020CF; }
            .createModelGroupModal .step-3 .models-classes .model-container .class-list .checkbox-item input:checked ~ .checkmark:after {
              display: block; }
        .createModelGroupModal .step-3 .models-classes .model-container .class-list .checkbox-item .checkmark {
          position: absolute;
          top: 3px;
          left: 10px;
          height: 16px;
          width: 16px;
          background-color: #eee;
          border-radius: 4px; }
          .createModelGroupModal .step-3 .models-classes .model-container .class-list .checkbox-item .checkmark:after {
            content: "";
            position: absolute;
            display: none;
            left: 6px;
            top: 3px;
            width: 5px;
            height: 10px;
            border: solid white;
            border-width: 0 2px 2px 0;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg); }
    .createModelGroupModal .step-3 .models-classes .model-container .showMoreClass {
      display: block;
      margin: 5px 0 15px 0;
      font-size: 14px;
      font-weight: 500;
      color: #8020CF !important; }

.model-group-detail-tooltip {
  left: 0 !important;
  pointer-events: all !important; }
  .model-group-detail-tooltip::-webkit-scrollbar {
    display: none; }

.model-group-item {
  width: 287px;
  height: 310px;
  border-radius: 10px;
  background-color: #FFFFFF; }
  .model-group-item img {
    width: 100%;
    height: 122px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px; }
  .model-group-item .item-info {
    display: flex;
    flex-direction: column;
    height: 188px; }
    .model-group-item .item-info .info-header {
      padding: 10px;
      border-bottom: 0.5px solid #D8D8D8;
      display: flex;
      align-items: center;
      justify-content: space-between; }
      .model-group-item .item-info .info-header .name {
        font-size: 16px;
        font-weight: 600;
        line-height: 20px;
        color: #210835; }
    .model-group-item .item-info .info-body {
      padding: 10px;
      color: #535353;
      font-size: 14px; }
      .model-group-item .item-info .info-body .model-group-detail-tooltip ul {
        list-style-type: circle !important;
        margin: 0 20px !important;
        padding: 0 20px !important; }
        .model-group-item .item-info .info-body .model-group-detail-tooltip ul li::marker {
          color: black !important; }
      .model-group-item .item-info .info-body .model-group-detail-tooltip p {
        color: #0052CC;
        margin-bottom: 5px !important; }
        .model-group-item .item-info .info-body .model-group-detail-tooltip p strong {
          color: #303030; }
    .model-group-item .item-info .info-footer {
      margin-top: auto;
      padding: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #535353;
      font-size: 12px;
      line-height: 16px; }
      .model-group-item .item-info .info-footer .ownerName {
        display: flex;
        align-items: center; }
        .model-group-item .item-info .info-footer .ownerName span {
          width: 22px;
          height: 22px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          text-transform: uppercase;
          color: #4E147E;
          font-size: 12px;
          font-weight: 600;
          margin-left: 5px;
          background-color: #F2E9FA; }

#modelGroups .listLayout .eachCardLayout:last-child {
  margin-bottom: 50px; }

.activeTask {
  position: absolute;
  background: linear-gradient(226.85deg, #8020CF 3.02%, #22FCDB 100%);
  width: 6px;
  min-height: 50px;
  left: 0;
  margin-top: -12px;
  border-radius: 0 5px 5px 0; }

.createAnnotationClass {
  background: #8020CF;
  border: 1px solid #F7F7F7;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #F7F7F7;
  width: 145px;
  height: 36px; }
  .createAnnotationClass:disabled {
    color: #B7B7B7;
    background: #F7F7F7;
    border-radius: 20px; }

.classTooltip .classAlertTooltip {
  top: 41px;
  height: 38px;
  right: 0; }

.createAnnotationClassModal .modal-dialog {
  max-width: 580px;
  align-items: center;
  margin: 0 auto; }

.createAnnotationClassModal .modal-content {
  margin-top: 0;
  background-color: #fff !important;
  border-radius: 8px;
  height: auto;
  min-height: 337px;
  padding-bottom: 20px;
  flex-wrap: wrap; }

.createAnnotationClassModal .modal-header {
  padding-left: 25px;
  padding-right: 25px;
  line-height: 20px;
  width: 100%;
  border: none; }
  .createAnnotationClassModal .modal-header .modal-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    color: #210835;
    width: 100%;
    text-align: center; }
  .createAnnotationClassModal .modal-header .closeModal {
    background: transparent;
    position: absolute;
    right: 25px;
    top: 20px;
    cursor: pointer;
    border: 0;
    padding: 0;
    z-index: 99;
    width: 15px;
    height: 15px;
    opacity: 0.7; }

.createAnnotationClassModal .modal-body {
  padding: 0 25px;
  width: 100%; }
  .createAnnotationClassModal .modal-body #createAnnotationClassForm {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    height: 200px;
    padding-top: 35px; }
    .createAnnotationClassModal .modal-body #createAnnotationClassForm .form-group label {
      font-weight: 500;
      font-size: 16px;
      line-height: 20px;
      color: #210835; }
    .createAnnotationClassModal .modal-body #createAnnotationClassForm .form-group .form-control {
      border-radius: 5px;
      padding: 16px 20px;
      color: #4E4576;
      font-size: 14px;
      line-height: 18px;
      font-weight: 400;
      transition: "Euclid Circular B";
      height: 50px;
      background: #F7F7F7;
      border: 1px solid #EAEAEA; }
      .createAnnotationClassModal .modal-body #createAnnotationClassForm .form-group .form-control:focus {
        font-weight: 500; }

.createAnnotationClassModal .modal-footer {
  border: none;
  width: 100%; }
  .createAnnotationClassModal .modal-footer .cancelAnnotationClassBtn,
  .createAnnotationClassModal .modal-footer .addAnnotationClassBtn {
    height: 36px;
    font-weight: 500;
    font-size: 14px;
    line-height: 16px; }
  .createAnnotationClassModal .modal-footer .cancelAnnotationClassBtn {
    width: 60px;
    border: none;
    background: transparent;
    color: #303030; }
  .createAnnotationClassModal .modal-footer .addAnnotationClassBtn {
    width: 72px;
    border: none;
    border-radius: 10px;
    background: #8020CF;
    color: #F7F7F7;
    cursor: pointer; }
    .createAnnotationClassModal .modal-footer .addAnnotationClassBtn:disabled {
      background: #F7F7F7;
      color: #B7B7B7; }

.annotationManagementTopBar {
  width: 100%;
  height: 44px;
  display: flex;
  justify-content: space-between;
  align-items: center; }
  .annotationManagementTopBar .alertTooltip {
    width: 460px;
    height: 45px;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    text-align: center;
    border-radius: 6px;
    padding: 5px 15px;
    position: absolute;
    top: 50px;
    left: 315px;
    z-index: 9999;
    visibility: hidden;
    opacity: 0;
    transition: all 0.2s ease-out; }
  .annotationManagementTopBar .assignAnnotationTask {
    background: linear-gradient(90deg, #8020CF 0%, #492DE6 100%);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    color: #ffffff;
    height: 36px !important;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0 15px;
    min-height: 36px;
    border: none;
    transition: all 0.2s ease-in; }
    .annotationManagementTopBar .assignAnnotationTask.alertDesable {
      opacity: 0.5; }
  .annotationManagementTopBar .alertDesable:hover ~ .alertTooltip {
    visibility: visible;
    opacity: 1; }
  .annotationManagementTopBar .annotationHelpers {
    display: flex;
    align-items: center;
    justify-content: space-between; }
    .annotationManagementTopBar .annotationHelpers .filter .itemBtn {
      height: 36px;
      background: #fff url(../img/ch-filter-purple-icon.svg) 10px center no-repeat;
      background-size: 15px;
      font-weight: 500;
      color: #360D57;
      border-radius: 10px;
      padding: 0 15px 0 35px;
      display: inline-flex;
      align-items: center;
      border: 1px solid #360D57;
      filter: drop-shadow(0px 2px 5px rgba(40, 40, 40, 0.1)); }
      .annotationManagementTopBar .annotationHelpers .filter .itemBtn .checkedItemCount {
        width: 21px;
        height: 21px;
        background-color: #360D57;
        color: #ffffff;
        display: none;
        justify-content: center;
        align-items: center;
        margin-left: 10px;
        font-size: 14px;
        font-weight: 500;
        border-radius: 40px; }
    .annotationManagementTopBar .annotationHelpers .filter .annotationTaskFilterBox .btnWrapper #reset_filter {
      color: #210835;
      opacity: 1;
      cursor: pointer; }
      .annotationManagementTopBar .annotationHelpers .filter .annotationTaskFilterBox .btnWrapper #reset_filter[disabled="disabled"] {
        opacity: 0.5;
        cursor: not-allowed; }
    .annotationManagementTopBar .annotationHelpers .filter .annotationTaskFilterBox #filterAssignedToMe .filterAnnotator {
      width: 100%; }
    .annotationManagementTopBar .annotationHelpers .filter .annotationTaskFilterBox #filterAssignedTo {
      height: 160px;
      max-height: 180px;
      padding-right: 12px; }
    .annotationManagementTopBar .annotationHelpers .filter .annotationTaskFilterBox .filterTaskStatus,
    .annotationManagementTopBar .annotationHelpers .filter .annotationTaskFilterBox .filterAnnotator {
      min-width: 49%;
      width: fit-content; }
      .annotationManagementTopBar .annotationHelpers .filter .annotationTaskFilterBox .filterTaskStatus label,
      .annotationManagementTopBar .annotationHelpers .filter .annotationTaskFilterBox .filterAnnotator label {
        min-width: 80% !important;
        width: fit-content; }
    .annotationManagementTopBar .annotationHelpers .showDropdown {
      z-index: 2; }
    .annotationManagementTopBar .annotationHelpers #help-question {
      margin-left: 15px;
      margin-right: 2px;
      height: 35px;
      width: 39px;
      border: none;
      background: transparent; }
      .annotationManagementTopBar .annotationHelpers #help-question .icon {
        width: 25px;
        height: 25px;
        display: inline-block;
        background: url("../img/help-circle-lightblue.svg") center center no-repeat;
        border: 1.5px solid #360D57;
        border-radius: 50%; }
      .annotationManagementTopBar .annotationHelpers #help-question.show {
        background: #8020CF;
        border-radius: 10px 10px 0px 0px;
        color: #ffffff; }
        .annotationManagementTopBar .annotationHelpers #help-question.show .icon {
          background: url("../img/ch-help-circle-white.svg") center center no-repeat;
          border: 1.5px solid #FFFFFF; }
    .annotationManagementTopBar .annotationHelpers .help-explanation-wrapper {
      position: relative; }
      .annotationManagementTopBar .annotationHelpers .help-explanation-wrapper .help-explanation {
        top: 18px; }
    .annotationManagementTopBar .annotationHelpers .help-explanation {
      width: 810px;
      height: 238px;
      right: 1%;
      top: 120px;
      background: #F7F7F7;
      border: 1px solid #8020CF;
      border-radius: 10px 0 10px 10px;
      z-index: 10;
      padding: 32px;
      position: absolute;
      display: none; }
      .annotationManagementTopBar .annotationHelpers .help-explanation.active {
        display: block; }
      .annotationManagementTopBar .annotationHelpers .help-explanation h6 {
        font-weight: 500;
        font-size: 16px;
        line-height: 20px;
        color: #210835; }
      .annotationManagementTopBar .annotationHelpers .help-explanation ul li {
        font-family: "Euclid Circular B";
        font-style: normal;
        list-style: disc;
        font-weight: 400;
        font-size: 14px;
        line-height: 21px;
        color: #535353;
        margin-bottom: 25px; }

.annotatorTooltip {
  width: 246px;
  height: 66px;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  text-align: center;
  border-radius: 6px;
  padding: 5px 15px;
  position: absolute;
  z-index: 9999;
  background: #FFFFFF;
  box-shadow: 0px 3px 5px rgba(6, 0, 41, 0.2);
  display: none;
  transition: all 0.2s ease-out;
  font-style: normal;
  color: #595959; }

.imageBox .thumbnail img {
  border-radius: 10px; }

.imageBox:hover .annotatorTooltip {
  display: block;
  opacity: 1; }

.thumbnailsGrid .imageBox:hover .annotatorTooltip {
  top: 38px;
  left: 0;
  right: 0;
  margin: 0 auto;
  display: block;
  opacity: 1;
  font-size: 10px;
  height: auto;
  width: 90%; }

.thumbnailsList .imageBox .thumbnail img {
  border-radius: 10px; }

.thumbnailsList .imageBox:hover .annotatorTooltip {
  width: 210px;
  font-size: 14px;
  top: 65px;
  left: 85px;
  display: block;
  opacity: 1;
  padding-top: 10px;
  padding-bottom: 10px;
  margin: 0; }

.createAnnotationTaskCard {
  background: #ffffff;
  box-shadow: 0px 3.30792px 21.5015px rgba(180, 180, 180, 0.25);
  border-radius: 5px;
  padding: 25px 30px;
  margin-top: 28px;
  width: 100%;
  max-width: 641px;
  height: 375px; }
  .createAnnotationTaskCard .cardTitle {
    color: #4E4576;
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 500;
    display: flex;
    align-items: center; }
    .createAnnotationTaskCard .cardTitle .icon {
      margin-right: 10px; }
  .createAnnotationTaskCard .innerContainer {
    padding: 5px 20px; }
    .createAnnotationTaskCard .innerContainer ul {
      list-style: disc;
      margin-bottom: 30px; }
      .createAnnotationTaskCard .innerContainer ul li {
        margin-bottom: 20px;
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 21px;
        color: #535353; }
  .createAnnotationTaskCard .buttonBar {
    display: flex;
    justify-content: flex-end;
    align-items: center; }
    .createAnnotationTaskCard .buttonBar .assignAnnotationTask {
      background: linear-gradient(90deg, #8020CF 0%, #492DE6 100%);
      box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
      border-radius: 10px;
      color: #ffffff;
      height: 36px !important;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      padding: 0 15px;
      min-height: 36px;
      border: none;
      transition: all 0.2s ease-in; }

.annotationManagementContentArea {
  margin-top: 20px;
  width: 100%;
  height: auto;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
  padding: 25px 25px 50px 25px; }

.annotationTableContainer {
  height: 650px;
  overflow-y: auto; }
  .annotationTableContainer table thead th {
    border-top: none;
    position: sticky;
    top: 0;
    background-color: #ffffff;
    height: 60px;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #4E4576;
    z-index: 1;
    vertical-align: text-top; }
    .annotationTableContainer table thead th .tableFilterBtn:after {
      width: 25px;
      height: 20px;
      position: absolute;
      top: 0;
      right: 0;
      content: '';
      background: url(../img/down-arrow-light-gray.svg) right center no-repeat;
      background-size: 12px; }
    .annotationTableContainer table thead th .tableFilterBtn.up:after {
      background: url(../img/up-arrow-light-gray.svg) right center no-repeat;
      background-size: 12px !important; }
  .annotationTableContainer table tbody {
    position: relative;
    min-height: 500px; }
    .annotationTableContainer table tbody .taskDetailURL {
      display: block;
      width: 100%;
      height: 100%; }
    .annotationTableContainer table tbody .hoverRow {
      position: relative; }
    .annotationTableContainer table tbody tr:hover {
      background-color: #FDFBFF; }
    .annotationTableContainer table tbody tr th, .annotationTableContainer table tbody tr td {
      line-height: 16px;
      color: #535353;
      vertical-align: unset; }
    .annotationTableContainer table tbody tr th {
      font-weight: 600;
      font-size: 16px; }
      .annotationTableContainer table tbody tr th a {
        color: #535353; }
    .annotationTableContainer table tbody tr td {
      font-weight: 400;
      font-size: 14px;
      max-width: 310px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden; }
      .annotationTableContainer table tbody tr td .annotationUpdates {
        display: flex;
        align-items: center;
        justify-content: space-between; }
      .annotationTableContainer table tbody tr td img {
        margin-right: 5px; }
      .annotationTableContainer table tbody tr td.taskStatus {
        font-weight: 500; }
      .annotationTableContainer table tbody tr td.statusDescription_3 {
        color: #00875A; }
        .annotationTableContainer table tbody tr td.statusDescription_3 img {
          content: url(../img/ch-annotation-task-completed.svg); }
      .annotationTableContainer table tbody tr td.statusDescription_1 {
        color: #DE350B; }
        .annotationTableContainer table tbody tr td.statusDescription_1 img {
          content: url(../img/ch-annotation-task-not-started.svg); }
      .annotationTableContainer table tbody tr td.statusDescription_2 {
        color: #FF8B00; }
        .annotationTableContainer table tbody tr td.statusDescription_2 img {
          content: url(../img/ch-annotation-task-in-progress.svg);
          width: 16px; }
      .annotationTableContainer table tbody tr td .assignedToMeText {
        color: #8020CF;
        font-weight: 500; }
  .annotationTableContainer .nothingToSeeHere {
    position: absolute; }

.annotationUpdates .actionBtn {
  background: url(../img/option-vellips-darkgray.svg) center center no-repeat;
  border-radius: 30px;
  height: 25px;
  width: 25px;
  border: 0;
  color: #D8D8D8;
  font-size: 16px;
  padding: 0;
  cursor: pointer; }

.annotationUpdates .annotationTaskDotsDropdownBtn {
  border-radius: 5px; }
  .annotationUpdates .annotationTaskDotsDropdownBtn .annotationDotsDropdownBtn {
    background: url(../img/option-vellips-darkgray.svg) center center no-repeat;
    border-radius: 3px;
    height: 30px;
    width: 30px;
    border: 0;
    color: #D8D8D8;
    font-size: 16px;
    padding: 0;
    cursor: pointer; }
    .annotationUpdates .annotationTaskDotsDropdownBtn .annotationDotsDropdownBtn.active {
      background-color: #FAF5FF; }
  .annotationUpdates .annotationTaskDotsDropdownBtn .annotationDotsActionItemList {
    position: absolute;
    top: 42px;
    right: 8px;
    min-width: 130px;
    background: #ffffff;
    border-radius: 6px;
    display: none;
    box-shadow: 0 3px 5px rgba(6, 0, 41, 0.2);
    margin: 0;
    text-align: left;
    width: 180px; }
    .annotationUpdates .annotationTaskDotsDropdownBtn .annotationDotsActionItemList a {
      padding: 8px 15px 8px 45px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      color: #535353;
      font-size: 14px;
      transition: all 0.2s ease-in;
      margin: 0;
      white-space: nowrap; }
      .annotationUpdates .annotationTaskDotsDropdownBtn .annotationDotsActionItemList a:hover {
        background-color: #EAEAEA; }
    .annotationUpdates .annotationTaskDotsDropdownBtn .annotationDotsActionItemList .editTask {
      background: url(../img/ch-rename-gray.svg) 15px center no-repeat;
      background-size: 16px; }
    .annotationUpdates .annotationTaskDotsDropdownBtn .annotationDotsActionItemList .deleteTask {
      background: url(../img/ch-delete-gray.svg) 15px center no-repeat;
      background-size: 17px;
      width: 100%;
      height: 45px; }
    .annotationUpdates .annotationTaskDotsDropdownBtn .annotationDotsActionItemList.active {
      display: block;
      z-index: 5; }

.completeTaskModal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1060;
  transition: all 0.2s ease-in;
  display: flex;
  justify-content: center;
  align-items: center; }
  .completeTaskModal .innerContainer {
    max-width: 625px;
    width: 100%;
    background: #ffffff;
    border-radius: 10px; }
  .completeTaskModal .modalHeader {
    padding: 15px 30px 20px;
    position: relative; }
    .completeTaskModal .modalHeader .modalTitle {
      text-align: left;
      color: #303030;
      font-weight: 500;
      font-size: 20px;
      margin: 0; }
  .completeTaskModal .modalContent {
    padding: 15px 80px 20px 25px;
    font-size: 16px;
    text-align: left;
    color: #595959;
    font-weight: 400;
    font-family: "Euclid Circular B";
    line-height: 28px; }
    .completeTaskModal .modalContent p {
      margin-bottom: 0; }
    .completeTaskModal .modalContent strong {
      font-weight: 500; }
    .completeTaskModal .modalContent .icon {
      margin-right: 10px;
      width: 20px;
      height: 20px; }
  .completeTaskModal .modalFooter {
    padding: 20px;
    display: flex;
    justify-content: flex-end; }
    .completeTaskModal .modalFooter button {
      border-radius: 10px;
      min-width: 80px;
      height: 36px;
      box-shadow: none;
      border: none;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      font-weight: 500; }
    .completeTaskModal .modalFooter .cancelCompleteBtn {
      background: transparent;
      color: #303030;
      margin-right: 5px; }
    .completeTaskModal .modalFooter #completeTaskBtn {
      background: #8020CF;
      padding: 9px 12px;
      color: #FFFFFF;
      box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.08), inset 0px -1px 0px rgba(0, 0, 0, 0.2);
      border-radius: 10px; }

.annotationTaskDetailTopCard {
  margin: 0 -15px 0;
  padding: 15px 20px 10px;
  background-image: url(../img/object-model-background.svg), linear-gradient(90.01deg, #8020CF -0.45%, #472CE6 99.99%);
  /* W3C */
  background-position: center center;
  background-size: cover;
  height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: space-between; }
  .annotationTaskDetailTopCard .breadCrumb {
    margin-top: 0; }
  .annotationTaskDetailTopCard .taskDetailHeader {
    width: 100%;
    padding: 0;
    margin-top: 25px; }
    .annotationTaskDetailTopCard .taskDetailHeader ul {
      padding: 0;
      margin: 0;
      display: flex;
      align-items: flex-end; }
      .annotationTaskDetailTopCard .taskDetailHeader ul li {
        display: inline-flex;
        flex-direction: column;
        padding: 10px;
        width: 100%;
        color: #EAEAEA;
        font-size: 16px;
        text-align: center; }
        .annotationTaskDetailTopCard .taskDetailHeader ul li:nth-child(5) {
          max-width: 110px; }
        .annotationTaskDetailTopCard .taskDetailHeader ul li:last-child {
          width: 3%;
          align-items: center;
          flex-direction: row;
          color: #595959; }
        .annotationTaskDetailTopCard .taskDetailHeader ul li p {
          margin: 10px 0 0;
          font-size: 16px;
          color: #fff;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          width: 100%;
          font-weight: 600;
          text-align: center; }
      .annotationTaskDetailTopCard .taskDetailHeader ul .taskID {
        max-width: 300px;
        width: auto; }
      .annotationTaskDetailTopCard .taskDetailHeader ul .assignedImageCount {
        max-width: 150px; }
        .annotationTaskDetailTopCard .taskDetailHeader ul .assignedImageCount p {
          color: #FFE36B; }
      .annotationTaskDetailTopCard .taskDetailHeader ul .createdTaskDate {
        max-width: 110px; }
      .annotationTaskDetailTopCard .taskDetailHeader ul .taskLatestUpdate {
        margin-right: auto;
        max-width: 150px; }
      .annotationTaskDetailTopCard .taskDetailHeader ul .annotator {
        max-width: 250px;
        text-align: center; }
      .annotationTaskDetailTopCard .taskDetailHeader ul .deleteTask {
        width: 200px !important;
        border-radius: 5px;
        cursor: pointer; }
      .annotationTaskDetailTopCard .taskDetailHeader ul .completeTaskWrapper {
        max-width: 165px;
        text-align: center;
        background: #F7F7F7;
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), inset 0px -1px 0px rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        margin-bottom: 15px; }
        .annotationTaskDetailTopCard .taskDetailHeader ul .completeTaskWrapper .completeTaskBtn {
          width: 100%;
          height: 100%;
          font-weight: 500;
          font-size: 14px;
          line-height: 18px;
          color: #352B63;
          border: none; }
          .annotationTaskDetailTopCard .taskDetailHeader ul .completeTaskWrapper .completeTaskBtn.disabled {
            opacity: 0.5;
            cursor: not-allowed; }
      .annotationTaskDetailTopCard .taskDetailHeader ul .completeTaskTooltip {
        position: absolute;
        width: 280px;
        height: 63px;
        right: 4.2%;
        top: 160px;
        background: #FFFFFF;
        box-shadow: 0 3px 5px rgba(6, 0, 41, 0.2);
        border-radius: 6px;
        font-style: normal;
        font-weight: 400;
        font-size: 15px;
        line-height: 18px;
        color: #595959;
        white-space: break-spaces;
        text-align: left;
        padding: 12px 13px;
        display: none;
        z-index: 10; }
      .annotationTaskDetailTopCard .taskDetailHeader ul .editTaskDetailButton {
        width: 98px;
        height: 36px;
        border: 1px solid #FFFFFF;
        filter: drop-shadow(0px 2px 5px rgba(40, 40, 40, 0.1));
        border-radius: 20px;
        background: transparent;
        font-weight: 500;
        font-size: 14px;
        line-height: 16px;
        color: #FFFFFF; }

.annotatedNavTab {
  gap: 25px; }
  .annotatedNavTab .completedAnnotationTask {
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.7; }
  .annotatedNavTab .annotationTooltip {
    position: absolute;
    top: 47px;
    left: 30%;
    width: 209px;
    height: 52px;
    background: #FFFFFF;
    box-shadow: 0px 3px 5px rgba(6, 0, 41, 0.2);
    border-radius: 6px;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: #303030;
    text-align: center;
    padding: 12px 13px;
    display: none; }
    .annotatedNavTab .annotationTooltip.secondTooltip {
      left: 65%; }

.annotationTaskContentArea {
  overflow-y: auto; }

.tagDeleteWarn_files .cancelDeleteTask {
  color: #303030;
  font-size: 14px;
  font-weight: 500;
  padding: 0 15px; }

.tagDeleteWarn_files .deleteAnnotationTask {
  background: #BF2600;
  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.08), inset 0px -1px 0px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  color: #fff;
  height: 36px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0 15px;
  font-size: 14px; }

.editAnnotationTaskModal.show {
  overflow-y: auto !important; }

.editAnnotationTaskModal .modal-dialog {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  background: #fff; }

.editAnnotationTaskModal .modal-content {
  flex-wrap: wrap;
  margin-top: 0; }

.editAnnotationTaskModal .modal-header {
  width: 100%;
  height: 60px;
  padding-left: 65px;
  padding-right: 30px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  box-shadow: 0 2px 4px rgba(10, 46, 96, 0.1); }
  .editAnnotationTaskModal .modal-header .titleContent {
    font-weight: 500;
    width: 250px;
    display: flex;
    align-items: center;
    justify-content: space-between; }
    .editAnnotationTaskModal .modal-header .titleContent h4 {
      font-size: 20px;
      line-height: 36px;
      color: #210835; }
    .editAnnotationTaskModal .modal-header .titleContent h5 {
      font-size: 16px;
      line-height: 20px;
      color: #535353;
      margin-bottom: 0; }

.editAnnotationTaskModal .modal-body {
  padding: 1rem 10rem; }
  .editAnnotationTaskModal .modal-body #editTaskFormGroup {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-top: 35px; }
    .editAnnotationTaskModal .modal-body #editTaskFormGroup .assignClassFormGroup {
      margin-bottom: 60px;
      /*start dropdown selectClassList*/
      /*end of dropdown selectClassList*/ }
      .editAnnotationTaskModal .modal-body #editTaskFormGroup .assignClassFormGroup #editClassSelection #selectEditClass {
        z-index: 2;
        overflow: auto;
        width: 40%; }
        .editAnnotationTaskModal .modal-body #editTaskFormGroup .assignClassFormGroup #editClassSelection #selectEditClass .classItem {
          width: 49%;
          display: inline-block;
          padding: 8px 15px !important; }
      .editAnnotationTaskModal .modal-body #editTaskFormGroup .assignClassFormGroup .form-control {
        margin-bottom: 20px; }
      .editAnnotationTaskModal .modal-body #editTaskFormGroup .assignClassFormGroup .editTaskClassWrapper p {
        font-weight: 400;
        font-size: 16px;
        line-height: 20px;
        color: #210835;
        margin-bottom: 20px; }
      .editAnnotationTaskModal .modal-body #editTaskFormGroup .assignClassFormGroup .editTaskClassWrapper .editClassTag {
        height: 32px;
        background: #F2E9FA;
        border-radius: 6px;
        display: inline-flex;
        align-items: center;
        padding: 0 15px;
        margin: 0 8px 8px 0;
        color: #210835;
        font-family: "Euclid Circular B";
        font-weight: 400;
        font-size: 14px;
        line-height: 16px;
        text-transform: capitalize; }
        .editAnnotationTaskModal .modal-body #editTaskFormGroup .assignClassFormGroup .editTaskClassWrapper .editClassTag .editCloseTag {
          width: 12px;
          height: 12px;
          background: url(../img/ch-close-black.svg) center center no-repeat;
          margin-left: 10px;
          border: none;
          text-transform: capitalize; }
    .editAnnotationTaskModal .modal-body #editTaskFormGroup .form-group label {
      font-weight: 500;
      font-size: 16px;
      line-height: 20px;
      color: #210835; }
    .editAnnotationTaskModal .modal-body #editTaskFormGroup .form-group .form-control {
      width: 40%;
      border-radius: 5px;
      padding: 16px 20px;
      color: #4E4576;
      font-size: 14px;
      line-height: 18px;
      font-weight: 400;
      transition: "Euclid Circular B";
      height: 50px;
      background-color: #F7F7F7;
      border: 1px solid #EAEAEA; }
      .editAnnotationTaskModal .modal-body #editTaskFormGroup .form-group .form-control:focus {
        font-weight: 500; }
    .editAnnotationTaskModal .modal-body #editTaskFormGroup .form-group .assignMoreImage {
      display: flex;
      align-items: center;
      justify-content: space-between; }
      .editAnnotationTaskModal .modal-body #editTaskFormGroup .form-group .assignMoreImage .assignMoreBtn {
        background: transparent;
        color: #8020CF;
        border: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 118px;
        cursor: pointer; }
    .editAnnotationTaskModal .modal-body #editTaskFormGroup .form-group .editTaskImageList {
      overflow: auto;
      height: 280px;
      margin-bottom: 60px; }
    .editAnnotationTaskModal .modal-body #editTaskFormGroup .form-group .editTaskImageList .taskImageBox,
    .editAnnotationTaskModal .modal-body #editTaskFormGroup .form-group .editTaskMoreImageList .taskImageBox {
      position: relative;
      display: inline-block;
      width: 124px; }
      .editAnnotationTaskModal .modal-body #editTaskFormGroup .form-group .editTaskImageList .taskImageBox label img,
      .editAnnotationTaskModal .modal-body #editTaskFormGroup .form-group .editTaskMoreImageList .taskImageBox label img {
        border-radius: 5px; }
      .editAnnotationTaskModal .modal-body #editTaskFormGroup .form-group .editTaskImageList .taskImageBox .editTaskImageInput,
      .editAnnotationTaskModal .modal-body #editTaskFormGroup .form-group .editTaskMoreImageList .taskImageBox .editTaskImageInput {
        display: none; }
      .editAnnotationTaskModal .modal-body #editTaskFormGroup .form-group .editTaskImageList .taskImageBox .checkbox-icon,
      .editAnnotationTaskModal .modal-body #editTaskFormGroup .form-group .editTaskMoreImageList .taskImageBox .checkbox-icon {
        display: inline-block;
        position: absolute;
        top: 5px;
        right: 10px;
        width: 20px;
        height: 20px;
        background: #fff;
        margin-top: 0;
        cursor: pointer;
        border: 2px solid #878787;
        border-radius: 4px;
        background-size: cover; }
      .editAnnotationTaskModal .modal-body #editTaskFormGroup .form-group .editTaskImageList .taskImageBox .editTaskImageInput:checked ~ .checkbox-icon,
      .editAnnotationTaskModal .modal-body #editTaskFormGroup .form-group .editTaskMoreImageList .taskImageBox .editTaskImageInput:checked ~ .checkbox-icon {
        opacity: 1;
        background: url(../img/ch-check-white.svg) center center no-repeat;
        background-color: #8020CF;
        border-color: #8020CF;
        background-size: 12px;
        border-radius: 4px; }
  .editAnnotationTaskModal .modal-body .assignMoreFileArea {
    display: none; }
    .editAnnotationTaskModal .modal-body .assignMoreFileArea .selectMoreFileByNumber {
      width: 100%;
      height: 155px;
      background: #FFFFFF;
      border: 1px solid #8020CF;
      border-radius: 10px;
      padding: 15px 25px;
      margin-bottom: 30px; }
      .editAnnotationTaskModal .modal-body .assignMoreFileArea .selectMoreFileByNumber .taskFilterArea {
        display: flex;
        align-items: center;
        justify-content: space-between; }
      .editAnnotationTaskModal .modal-body .assignMoreFileArea .selectMoreFileByNumber .selectByNumber {
        width: 55px; }

.editAnnotationTaskModal .modal-footer {
  width: 100%;
  height: 100px; }

.assignDatasetTaskModal .processHighlightBar,
.assignAnnotationTaskModal .processHighlightBar,
.assignAnnotationTaskAddClassModal .processHighlightBar,
.assignAnnotationTaskAddImageModal .processHighlightBar {
  margin: 20px auto 65px;
  display: flex;
  flex-wrap: wrap;
  max-width: 615px; }
  .assignDatasetTaskModal .processHighlightBar div,
  .assignAnnotationTaskModal .processHighlightBar div,
  .assignAnnotationTaskAddClassModal .processHighlightBar div,
  .assignAnnotationTaskAddImageModal .processHighlightBar div {
    width: 95%;
    display: flex;
    justify-content: space-around;
    margin: 0 auto; }
    .assignDatasetTaskModal .processHighlightBar div span,
    .assignAnnotationTaskModal .processHighlightBar div span,
    .assignAnnotationTaskAddClassModal .processHighlightBar div span,
    .assignAnnotationTaskAddImageModal .processHighlightBar div span {
      font-size: 14px;
      text-align: center;
      font-family: "Euclid Circular B";
      line-height: 14px;
      font-weight: 500;
      color: #AAAAAA; }
      .assignDatasetTaskModal .processHighlightBar div span.active,
      .assignAnnotationTaskModal .processHighlightBar div span.active,
      .assignAnnotationTaskAddClassModal .processHighlightBar div span.active,
      .assignAnnotationTaskAddImageModal .processHighlightBar div span.active {
        color: #210835;
        font-weight: 600; }
  .assignDatasetTaskModal .processHighlightBar ul,
  .assignAnnotationTaskModal .processHighlightBar ul,
  .assignAnnotationTaskAddClassModal .processHighlightBar ul,
  .assignAnnotationTaskAddImageModal .processHighlightBar ul {
    width: 80%;
    background-color: #F2E9FA;
    display: flex;
    margin: 20px auto;
    border-radius: 10px; }
    .assignDatasetTaskModal .processHighlightBar ul div,
    .assignAnnotationTaskModal .processHighlightBar ul div,
    .assignAnnotationTaskAddClassModal .processHighlightBar ul div,
    .assignAnnotationTaskAddImageModal .processHighlightBar ul div {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: white;
      margin: 0; }
    .assignDatasetTaskModal .processHighlightBar ul li,
    .assignAnnotationTaskModal .processHighlightBar ul li,
    .assignAnnotationTaskAddClassModal .processHighlightBar ul li,
    .assignAnnotationTaskAddImageModal .processHighlightBar ul li {
      height: 8px;
      border-radius: 8px; }
      .assignDatasetTaskModal .processHighlightBar ul li:nth-child(1),
      .assignAnnotationTaskModal .processHighlightBar ul li:nth-child(1),
      .assignAnnotationTaskAddClassModal .processHighlightBar ul li:nth-child(1),
      .assignAnnotationTaskAddImageModal .processHighlightBar ul li:nth-child(1) {
        width: 55px; }
      .assignDatasetTaskModal .processHighlightBar ul li:nth-child(3),
      .assignAnnotationTaskModal .processHighlightBar ul li:nth-child(3),
      .assignAnnotationTaskAddClassModal .processHighlightBar ul li:nth-child(3),
      .assignAnnotationTaskAddImageModal .processHighlightBar ul li:nth-child(3) {
        width: 220px; }
      .assignDatasetTaskModal .processHighlightBar ul li:nth-child(5),
      .assignAnnotationTaskModal .processHighlightBar ul li:nth-child(5),
      .assignAnnotationTaskAddClassModal .processHighlightBar ul li:nth-child(5),
      .assignAnnotationTaskAddImageModal .processHighlightBar ul li:nth-child(5) {
        width: 220px; }
      .assignDatasetTaskModal .processHighlightBar ul li:nth-child(7),
      .assignAnnotationTaskModal .processHighlightBar ul li:nth-child(7),
      .assignAnnotationTaskAddClassModal .processHighlightBar ul li:nth-child(7),
      .assignAnnotationTaskAddImageModal .processHighlightBar ul li:nth-child(7) {
        width: 55px; }
      .assignDatasetTaskModal .processHighlightBar ul li.active,
      .assignAnnotationTaskModal .processHighlightBar ul li.active,
      .assignAnnotationTaskAddClassModal .processHighlightBar ul li.active,
      .assignAnnotationTaskAddImageModal .processHighlightBar ul li.active {
        background-color: #9646D7; }

.assignDatasetTaskModal .processHighlightBarFourSteps,
.assignAnnotationTaskModal .processHighlightBarFourSteps,
.assignAnnotationTaskAddClassModal .processHighlightBarFourSteps,
.assignAnnotationTaskAddImageModal .processHighlightBarFourSteps {
  margin: 20px auto 65px;
  display: flex;
  flex-wrap: wrap;
  max-width: 620px; }
  .assignDatasetTaskModal .processHighlightBarFourSteps div,
  .assignAnnotationTaskModal .processHighlightBarFourSteps div,
  .assignAnnotationTaskAddClassModal .processHighlightBarFourSteps div,
  .assignAnnotationTaskAddImageModal .processHighlightBarFourSteps div {
    width: 95%;
    display: flex;
    justify-content: space-around;
    margin: 0 auto; }
    .assignDatasetTaskModal .processHighlightBarFourSteps div span,
    .assignAnnotationTaskModal .processHighlightBarFourSteps div span,
    .assignAnnotationTaskAddClassModal .processHighlightBarFourSteps div span,
    .assignAnnotationTaskAddImageModal .processHighlightBarFourSteps div span {
      font-size: 14px;
      text-align: center;
      font-family: "Euclid Circular B";
      line-height: 14px;
      font-weight: 500;
      color: #AAAAAA; }
      .assignDatasetTaskModal .processHighlightBarFourSteps div span.active,
      .assignAnnotationTaskModal .processHighlightBarFourSteps div span.active,
      .assignAnnotationTaskAddClassModal .processHighlightBarFourSteps div span.active,
      .assignAnnotationTaskAddImageModal .processHighlightBarFourSteps div span.active {
        color: #210835;
        font-weight: 600; }
  .assignDatasetTaskModal .processHighlightBarFourSteps ul,
  .assignAnnotationTaskModal .processHighlightBarFourSteps ul,
  .assignAnnotationTaskAddClassModal .processHighlightBarFourSteps ul,
  .assignAnnotationTaskAddImageModal .processHighlightBarFourSteps ul {
    width: 90%;
    background-color: #F2E9FA;
    display: flex;
    margin: 20px auto;
    border-radius: 10px; }
    .assignDatasetTaskModal .processHighlightBarFourSteps ul div,
    .assignAnnotationTaskModal .processHighlightBarFourSteps ul div,
    .assignAnnotationTaskAddClassModal .processHighlightBarFourSteps ul div,
    .assignAnnotationTaskAddImageModal .processHighlightBarFourSteps ul div {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: white;
      margin: 0; }
    .assignDatasetTaskModal .processHighlightBarFourSteps ul li,
    .assignAnnotationTaskModal .processHighlightBarFourSteps ul li,
    .assignAnnotationTaskAddClassModal .processHighlightBarFourSteps ul li,
    .assignAnnotationTaskAddImageModal .processHighlightBarFourSteps ul li {
      height: 8px;
      border-radius: 8px; }
      .assignDatasetTaskModal .processHighlightBarFourSteps ul li:nth-child(1),
      .assignAnnotationTaskModal .processHighlightBarFourSteps ul li:nth-child(1),
      .assignAnnotationTaskAddClassModal .processHighlightBarFourSteps ul li:nth-child(1),
      .assignAnnotationTaskAddImageModal .processHighlightBarFourSteps ul li:nth-child(1) {
        width: 60px; }
      .assignDatasetTaskModal .processHighlightBarFourSteps ul li:nth-child(3),
      .assignAnnotationTaskModal .processHighlightBarFourSteps ul li:nth-child(3),
      .assignAnnotationTaskAddClassModal .processHighlightBarFourSteps ul li:nth-child(3),
      .assignAnnotationTaskAddImageModal .processHighlightBarFourSteps ul li:nth-child(3) {
        width: 152px; }
      .assignDatasetTaskModal .processHighlightBarFourSteps ul li:nth-child(5),
      .assignAnnotationTaskModal .processHighlightBarFourSteps ul li:nth-child(5),
      .assignAnnotationTaskAddClassModal .processHighlightBarFourSteps ul li:nth-child(5),
      .assignAnnotationTaskAddImageModal .processHighlightBarFourSteps ul li:nth-child(5) {
        width: 132px; }
      .assignDatasetTaskModal .processHighlightBarFourSteps ul li:nth-child(7),
      .assignAnnotationTaskModal .processHighlightBarFourSteps ul li:nth-child(7),
      .assignAnnotationTaskAddClassModal .processHighlightBarFourSteps ul li:nth-child(7),
      .assignAnnotationTaskAddImageModal .processHighlightBarFourSteps ul li:nth-child(7) {
        width: 130px; }
      .assignDatasetTaskModal .processHighlightBarFourSteps ul li:nth-child(9),
      .assignAnnotationTaskModal .processHighlightBarFourSteps ul li:nth-child(9),
      .assignAnnotationTaskAddClassModal .processHighlightBarFourSteps ul li:nth-child(9),
      .assignAnnotationTaskAddImageModal .processHighlightBarFourSteps ul li:nth-child(9) {
        width: 50px; }
      .assignDatasetTaskModal .processHighlightBarFourSteps ul li.active,
      .assignAnnotationTaskModal .processHighlightBarFourSteps ul li.active,
      .assignAnnotationTaskAddClassModal .processHighlightBarFourSteps ul li.active,
      .assignAnnotationTaskAddImageModal .processHighlightBarFourSteps ul li.active {
        background-color: #9646D7; }

.assignAnnotationTaskModal .modal-dialog,
.assignAnnotationTaskAddClassModal .modal-dialog {
  max-width: 785px;
  align-items: center;
  margin: 0 auto; }

.assignAnnotationTaskModal .modal-content,
.assignAnnotationTaskAddClassModal .modal-content {
  margin-top: 0;
  background-color: #fff !important;
  border-radius: 8px;
  height: auto;
  min-height: 800px;
  padding-bottom: 0 !important;
  flex-wrap: wrap; }

.assignAnnotationTaskModal .modal-header,
.assignAnnotationTaskAddClassModal .modal-header {
  padding-left: 25px;
  padding-right: 25px;
  line-height: 20px;
  width: 100%;
  border: none; }
  .assignAnnotationTaskModal .modal-header .modal-title,
  .assignAnnotationTaskAddClassModal .modal-header .modal-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    color: #210835;
    width: 100%;
    text-align: center; }
  .assignAnnotationTaskModal .modal-header .closeModal,
  .assignAnnotationTaskAddClassModal .modal-header .closeModal {
    background: transparent;
    position: absolute;
    right: 25px;
    top: 20px;
    cursor: pointer;
    border: 0;
    padding: 0;
    z-index: 99;
    width: 15px;
    height: 15px;
    opacity: 0.7; }
  .assignAnnotationTaskModal .modal-header .backBtn,
  .assignAnnotationTaskAddClassModal .modal-header .backBtn {
    display: inline-flex;
    margin-right: 10px;
    opacity: 0.7;
    height: 14px;
    border: none;
    background-color: transparent; }

.assignAnnotationTaskModal .modal-body,
.assignAnnotationTaskAddClassModal .modal-body {
  padding: 0 25px;
  width: 100%;
  min-height: 655px; }
  .assignAnnotationTaskModal .modal-body #assignDataset .datasetDropdown .itemBtn,
  .assignAnnotationTaskAddClassModal .modal-body #assignDataset .datasetDropdown .itemBtn {
    max-width: 100%; }
    .assignAnnotationTaskModal .modal-body #assignDataset .datasetDropdown .itemBtn .easy-autocomplete,
    .assignAnnotationTaskAddClassModal .modal-body #assignDataset .datasetDropdown .itemBtn .easy-autocomplete {
      width: 100% !important;
      padding-left: 40px;
      position: inherit !important; }
      .assignAnnotationTaskModal .modal-body #assignDataset .datasetDropdown .itemBtn .easy-autocomplete .searchDataset,
      .assignAnnotationTaskAddClassModal .modal-body #assignDataset .datasetDropdown .itemBtn .easy-autocomplete .searchDataset {
        padding: 6px 12px;
        width: 100%;
        border: none;
        background: transparent; }
      .assignAnnotationTaskModal .modal-body #assignDataset .datasetDropdown .itemBtn .easy-autocomplete .easy-autocomplete-container,
      .assignAnnotationTaskAddClassModal .modal-body #assignDataset .datasetDropdown .itemBtn .easy-autocomplete .easy-autocomplete-container {
        margin-top: 10px; }
        .assignAnnotationTaskModal .modal-body #assignDataset .datasetDropdown .itemBtn .easy-autocomplete .easy-autocomplete-container .dispFlex span,
        .assignAnnotationTaskAddClassModal .modal-body #assignDataset .datasetDropdown .itemBtn .easy-autocomplete .easy-autocomplete-container .dispFlex span {
          display: none; }
  .assignAnnotationTaskModal .modal-body #assignDataset .dropdownItemList,
  .assignAnnotationTaskAddClassModal .modal-body #assignDataset .dropdownItemList {
    overflow: auto;
    max-width: 590px; }
  .assignAnnotationTaskModal .modal-body #assignDataset .id,
  .assignAnnotationTaskAddClassModal .modal-body #assignDataset .id {
    max-width: 20%; }
    .assignAnnotationTaskModal .modal-body #assignDataset .id label.id-label,
    .assignAnnotationTaskAddClassModal .modal-body #assignDataset .id label.id-label {
      width: 25px; }
  .assignAnnotationTaskModal .modal-body #assignDataset,
  .assignAnnotationTaskModal .modal-body #addAnnotatorEmailForm,
  .assignAnnotationTaskModal .modal-body #selectTaskClassForm,
  .assignAnnotationTaskAddClassModal .modal-body #assignDataset,
  .assignAnnotationTaskAddClassModal .modal-body #addAnnotatorEmailForm,
  .assignAnnotationTaskAddClassModal .modal-body #selectTaskClassForm {
    margin: 0 auto;
    width: 71%;
    display: flex;
    flex-direction: column;
    height: 200px; }
    .assignAnnotationTaskModal .modal-body #assignDataset .invalidMail p,
    .assignAnnotationTaskModal .modal-body #addAnnotatorEmailForm .invalidMail p,
    .assignAnnotationTaskModal .modal-body #selectTaskClassForm .invalidMail p,
    .assignAnnotationTaskAddClassModal .modal-body #assignDataset .invalidMail p,
    .assignAnnotationTaskAddClassModal .modal-body #addAnnotatorEmailForm .invalidMail p,
    .assignAnnotationTaskAddClassModal .modal-body #selectTaskClassForm .invalidMail p {
      font-weight: 400;
      font-size: 14px;
      line-height: 20px;
      color: #DE350B; }
    .assignAnnotationTaskModal .modal-body #assignDataset .form-group label,
    .assignAnnotationTaskModal .modal-body #addAnnotatorEmailForm .form-group label,
    .assignAnnotationTaskModal .modal-body #selectTaskClassForm .form-group label,
    .assignAnnotationTaskAddClassModal .modal-body #assignDataset .form-group label,
    .assignAnnotationTaskAddClassModal .modal-body #addAnnotatorEmailForm .form-group label,
    .assignAnnotationTaskAddClassModal .modal-body #selectTaskClassForm .form-group label {
      font-weight: 500;
      font-size: 16px;
      line-height: 20px;
      color: #210835;
      width: 100%; }
    .assignAnnotationTaskModal .modal-body #assignDataset .form-group .form-control,
    .assignAnnotationTaskModal .modal-body #addAnnotatorEmailForm .form-group .form-control,
    .assignAnnotationTaskModal .modal-body #selectTaskClassForm .form-group .form-control,
    .assignAnnotationTaskAddClassModal .modal-body #assignDataset .form-group .form-control,
    .assignAnnotationTaskAddClassModal .modal-body #addAnnotatorEmailForm .form-group .form-control,
    .assignAnnotationTaskAddClassModal .modal-body #selectTaskClassForm .form-group .form-control {
      border-radius: 5px;
      padding: 16px 20px;
      color: #4E4576;
      font-size: 14px;
      line-height: 18px;
      font-weight: 400;
      transition: "Euclid Circular B";
      height: 50px;
      border: 1px solid #EAEAEA; }
      .assignAnnotationTaskModal .modal-body #assignDataset .form-group .form-control:focus,
      .assignAnnotationTaskModal .modal-body #addAnnotatorEmailForm .form-group .form-control:focus,
      .assignAnnotationTaskModal .modal-body #selectTaskClassForm .form-group .form-control:focus,
      .assignAnnotationTaskAddClassModal .modal-body #assignDataset .form-group .form-control:focus,
      .assignAnnotationTaskAddClassModal .modal-body #addAnnotatorEmailForm .form-group .form-control:focus,
      .assignAnnotationTaskAddClassModal .modal-body #selectTaskClassForm .form-group .form-control:focus {
        font-weight: 500; }

.assignAnnotationTaskModal .modal-footer,
.assignAnnotationTaskAddClassModal .modal-footer {
  width: 100%;
  height: 90px; }
  .assignAnnotationTaskModal .modal-footer .assignDatasetTaskModal,
  .assignAnnotationTaskModal .modal-footer .addAnnotationTaskMailBtn,
  .assignAnnotationTaskModal .modal-footer .addAnnotationTaskClassBtn,
  .assignAnnotationTaskAddClassModal .modal-footer .assignDatasetTaskModal,
  .assignAnnotationTaskAddClassModal .modal-footer .addAnnotationTaskMailBtn,
  .assignAnnotationTaskAddClassModal .modal-footer .addAnnotationTaskClassBtn {
    height: 44px;
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    width: 250px;
    border: none;
    border-radius: 10px;
    background: #8020CF;
    color: #F7F7F7;
    cursor: pointer;
    margin: 0 auto; }
    .assignAnnotationTaskModal .modal-footer .assignDatasetTaskModal:disabled,
    .assignAnnotationTaskModal .modal-footer .addAnnotationTaskMailBtn:disabled,
    .assignAnnotationTaskModal .modal-footer .addAnnotationTaskClassBtn:disabled,
    .assignAnnotationTaskAddClassModal .modal-footer .assignDatasetTaskModal:disabled,
    .assignAnnotationTaskAddClassModal .modal-footer .addAnnotationTaskMailBtn:disabled,
    .assignAnnotationTaskAddClassModal .modal-footer .addAnnotationTaskClassBtn:disabled {
      background: #F7F7F7;
      color: #B7B7B7; }

#assignAnnotationTaskAddClassModal #assignClassSelection #assignClassItems {
  z-index: 2;
  overflow-y: auto;
  width: 100%; }
  #assignAnnotationTaskAddClassModal #assignClassSelection #assignClassItems .classItem {
    width: 49%;
    display: inline-block;
    padding: 8px 15px !important; }
    #assignAnnotationTaskAddClassModal #assignClassSelection #assignClassItems .classItem label {
      color: #535353;
      font-weight: 400;
      font-size: 14px;
      line-height: 18px;
      display: inline-flex;
      align-items: center;
      text-transform: capitalize;
      word-break: break-word; }
      #assignAnnotationTaskAddClassModal #assignClassSelection #assignClassItems .classItem label .newTaskClassInput {
        display: none; }
      #assignAnnotationTaskAddClassModal #assignClassSelection #assignClassItems .classItem label .checkbox-icon {
        display: inline-block;
        min-width: 18px;
        width: 18px;
        height: 18px;
        background: #fff;
        margin-right: 7px;
        cursor: pointer;
        border: 2px solid #878787;
        border-radius: 4px;
        background-size: cover; }
      #assignAnnotationTaskAddClassModal #assignClassSelection #assignClassItems .classItem label .newTaskClassInput:checked ~ .checkbox-icon {
        opacity: 1;
        background: url(../img/ch-check-white.svg) center center no-repeat;
        background-color: #8020CF;
        border-color: #8020CF;
        background-size: 10px;
        border-radius: 4px; }

#assignAnnotationTaskAddClassModal .classes .classTag {
  height: 32px;
  background: #F2E9FA;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  padding: 0 15px;
  margin: 0 8px 8px 0;
  color: #210835;
  font-family: "Euclid Circular B";
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  text-transform: capitalize; }
  #assignAnnotationTaskAddClassModal .classes .classTag .closeTag {
    width: 12px;
    height: 12px;
    background: url(../img/ch-close-black.svg) center center no-repeat;
    margin-left: 10px;
    border: none;
    text-transform: capitalize; }

#assignAnnotationTaskAddImageModal .annotationTaskFilterBox.showDropdown {
  width: 240px; }
  #assignAnnotationTaskAddImageModal .annotationTaskFilterBox.showDropdown .filterContentType .filterTaskStatus,
  #assignAnnotationTaskAddImageModal .annotationTaskFilterBox.showDropdown .filterContentType .filterAnnotator {
    width: 100%;
    align-items: center;
    justify-content: space-evenly; }
  #assignAnnotationTaskAddImageModal .annotationTaskFilterBox.showDropdown .btnWrapper {
    padding: 15px 50px;
    justify-content: center; }

#assignAnnotationTaskAddImageModal .modal-dialog {
  max-width: 95%;
  align-items: center;
  margin: 0 auto; }

#assignAnnotationTaskAddImageModal .modal-content {
  margin-top: 0;
  background-color: #fff !important;
  border-radius: 8px;
  height: auto;
  padding-bottom: 0 !important;
  flex-wrap: wrap; }
  #assignAnnotationTaskAddImageModal .modal-content .assignNewTaskImageList {
    display: flex;
    flex-wrap: wrap; }

#assignAnnotationTaskAddImageModal .modal-header {
  padding-left: 25px;
  padding-right: 25px;
  line-height: 20px;
  width: 100%;
  border: none; }
  #assignAnnotationTaskAddImageModal .modal-header .modal-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    color: #210835;
    width: 100%;
    text-align: center; }
  #assignAnnotationTaskAddImageModal .modal-header .backBtn {
    display: inline-flex;
    margin-right: 10px;
    opacity: 0.7;
    height: 14px;
    border: none;
    background-color: transparent; }

#assignAnnotationTaskAddImageModal .modal-body {
  padding: 0 30px;
  width: 100%;
  min-height: 800px; }
  #assignAnnotationTaskAddImageModal .modal-body .processHighlightBar {
    margin: 20px auto 65px;
    display: flex;
    flex-wrap: wrap;
    max-width: 565px; }
    #assignAnnotationTaskAddImageModal .modal-body .processHighlightBar div {
      width: 95%;
      max-width: 520px;
      display: flex;
      justify-content: space-around;
      margin: 0 auto; }
      #assignAnnotationTaskAddImageModal .modal-body .processHighlightBar div span {
        font-size: 14px;
        text-align: center;
        font-family: "Euclid Circular B";
        line-height: 14px;
        font-weight: 500;
        color: #AAAAAA; }
        #assignAnnotationTaskAddImageModal .modal-body .processHighlightBar div span.active {
          color: #210835;
          font-weight: 600; }
    #assignAnnotationTaskAddImageModal .modal-body .processHighlightBar ul {
      width: 80%;
      background-color: #F2E9FA;
      display: flex;
      margin: 20px auto; }
      #assignAnnotationTaskAddImageModal .modal-body .processHighlightBar ul div {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: white;
        margin: 0; }
      #assignAnnotationTaskAddImageModal .modal-body .processHighlightBar ul li {
        height: 8px;
        border-radius: 8px; }
        #assignAnnotationTaskAddImageModal .modal-body .processHighlightBar ul li:nth-child(1) {
          width: 55px; }
        #assignAnnotationTaskAddImageModal .modal-body .processHighlightBar ul li:nth-child(3) {
          width: 220px; }
        #assignAnnotationTaskAddImageModal .modal-body .processHighlightBar ul li:nth-child(5) {
          width: 220px; }
        #assignAnnotationTaskAddImageModal .modal-body .processHighlightBar ul li:nth-child(7) {
          width: 55px; }
        #assignAnnotationTaskAddImageModal .modal-body .processHighlightBar ul li.active {
          background-color: #9646D7; }
  #assignAnnotationTaskAddImageModal .modal-body .assignNewTaskFileArea .selectFileByNumber {
    width: 100%;
    height: 155px;
    background: #FFFFFF;
    border: 1px solid #8020CF;
    border-radius: 10px;
    padding: 15px 25px;
    margin-bottom: 30px; }
    #assignAnnotationTaskAddImageModal .modal-body .assignNewTaskFileArea .selectFileByNumber .showDropdown {
      z-index: 5; }
    #assignAnnotationTaskAddImageModal .modal-body .assignNewTaskFileArea .selectFileByNumber .taskFilterArea {
      display: flex;
      align-items: center;
      justify-content: space-between; }
    #assignAnnotationTaskAddImageModal .modal-body .assignNewTaskFileArea .selectFileByNumber .selectByNumber {
      width: 55px; }
  #assignAnnotationTaskAddImageModal .modal-body .assignNewTaskImageList {
    height: 300px;
    overflow-y: auto; }
    #assignAnnotationTaskAddImageModal .modal-body .assignNewTaskImageList .taskImageBox {
      position: relative;
      display: inline-block;
      width: 124px; }
      #assignAnnotationTaskAddImageModal .modal-body .assignNewTaskImageList .taskImageBox label img {
        border-radius: 5px;
        width: 117px;
        height: 100px; }
      #assignAnnotationTaskAddImageModal .modal-body .assignNewTaskImageList .taskImageBox .newTaskImageInput {
        display: none; }
      #assignAnnotationTaskAddImageModal .modal-body .assignNewTaskImageList .taskImageBox .checkbox-icon {
        display: inline-block;
        position: absolute;
        top: 5px;
        right: 10px;
        width: 20px;
        height: 20px;
        background: #fff;
        margin-top: 0;
        cursor: pointer;
        border: 2px solid #878787;
        border-radius: 4px;
        background-size: cover; }
      #assignAnnotationTaskAddImageModal .modal-body .assignNewTaskImageList .taskImageBox .newTaskImageInput:checked ~ .checkbox-icon {
        opacity: 1;
        background: url(../img/ch-check-white.svg) center center no-repeat;
        background-color: #8020CF;
        border-color: #8020CF;
        background-size: 12px;
        border-radius: 4px; }
      #assignAnnotationTaskAddImageModal .modal-body .assignNewTaskImageList .taskImageBox .newTaskImageInput:checked ~ .image {
        filter: invert(0%) sepia(11%) saturate(45%) hue-rotate(154deg) brightness(58%) contrast(75%); }

#assignAnnotationTaskAddImageModal .modal-footer {
  width: 100%; }
  #assignAnnotationTaskAddImageModal .modal-footer .assignNewTaskBtn {
    height: 44px;
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    width: 250px;
    border: none;
    border-radius: 10px;
    background: #8020CF;
    color: #F7F7F7;
    cursor: pointer;
    margin: 0 auto; }
    #assignAnnotationTaskAddImageModal .modal-footer .assignNewTaskBtn:disabled {
      background: #F7F7F7;
      color: #B7B7B7; }

@media (max-width: 1550px) and (max-height: 900px) {
  #assignAnnotationTaskAddImageModal .modal-body {
    min-height: 700px; } }

.task-management-navigation {
  margin-top: 15px; }

.dataset-tasks-navigation {
  height: 50px;
  margin-bottom: 15px !important;
  border-bottom: 1px solid #E0E0E0; }
  .dataset-tasks-navigation .alertTooltip {
    width: 460px;
    height: 45px;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    text-align: center;
    border-radius: 6px;
    padding: 5px 15px;
    position: absolute;
    top: 50px;
    left: 315px;
    z-index: 9999;
    visibility: hidden;
    opacity: 0;
    transition: all 0.2s ease-out; }
  .dataset-tasks-navigation .item-list {
    width: 280px;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    color: #303030;
    padding: 1.2rem 1rem 0 1rem; }
    .dataset-tasks-navigation .item-list.alertDesable {
      opacity: 0.5; }
    .dataset-tasks-navigation .item-list:not(:last-child) {
      margin-right: 20px; }
    .dataset-tasks-navigation .item-list.active {
      border-bottom: 4px solid #5A1691;
      border-radius: 0;
      background-color: transparent !important;
      color: #303030 !important;
      font-weight: 600; }
  .dataset-tasks-navigation .alertDesable:hover ~ .alertTooltip {
    visibility: visible;
    opacity: 1; }

.addDatasetBtn {
  background: linear-gradient(90deg, #8020CF 0%, #492DE6 100%);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), inset 0px -1px 0px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  color: #ffffff;
  width: 190px;
  height: 36px !important;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 5px 0 15px;
  min-height: 36px;
  border: none;
  transition: all 0.2s ease-in;
  cursor: pointer;
  position: relative;
  z-index: 992; }
  .addDatasetBtn.up .icon {
    transform: rotate(180deg); }
  .addDatasetBtn .addDatasetDropdown .addDatasetDropdownList {
    position: absolute;
    top: 40px;
    left: 0;
    padding: 10px 0;
    min-width: 130px;
    background: #ffffff;
    border-radius: 6px;
    display: none;
    box-shadow: 0px 3px 5px rgba(6, 0, 41, 0.5);
    margin: 0;
    text-align: left;
    width: 190px;
    z-index: 5; }
    .addDatasetBtn .addDatasetDropdown .addDatasetDropdownList li {
      border-radius: 4px;
      width: 100%;
      padding: 0 20px 0 15px;
      height: 40px;
      font-weight: 400;
      font-size: 14px;
      line-height: 18px; }
      .addDatasetBtn .addDatasetDropdown .addDatasetDropdownList li:hover {
        background-color: #FAF5FF; }
      .addDatasetBtn .addDatasetDropdown .addDatasetDropdownList li .datasetDropdownBtn {
        border: none;
        background: transparent;
        color: #535353;
        height: 40px; }

.taskNotificationHeader {
  position: fixed;
  z-index: 10000;
  width: 100%;
  height: 100px;
  background: #352B63;
  box-shadow: 1px 1px 3px rgba(22, 22, 22, 0.08);
  padding-left: 100px;
  display: flex;
  align-items: center;
  justify-content: space-around; }
  .taskNotificationHeader .notificationMessage {
    width: 70%;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #F7F7F7; }
    .taskNotificationHeader .notificationMessage strong {
      font-weight: 700; }
  .taskNotificationHeader .taskBtnWrapper {
    display: flex;
    gap: 15px;
    margin-left: 60px; }
    .taskNotificationHeader .taskBtnWrapper .btnLater {
      background: transparent;
      border: none;
      color: #EAEAEA;
      font-style: normal;
      font-weight: 500;
      font-size: 16px;
      line-height: 18px; }
    .taskNotificationHeader .taskBtnWrapper .btnStartTask {
      width: 98px;
      height: 40px;
      background: #FFFFFF;
      border: 1px solid #EAEAEA;
      box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
      border-radius: 20px; }
      .taskNotificationHeader .taskBtnWrapper .btnStartTask .startTask {
        font-weight: 600;
        font-size: 14px;
        line-height: 16px;
        color: #303030; }

.startAnnotationTaskModal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1060;
  transition: all 0.2s ease-in;
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
  opacity: 0; }
  .startAnnotationTaskModal.annotationStart {
    visibility: visible;
    opacity: 1; }
  .startAnnotationTaskModal .innerContainer {
    max-width: 625px;
    width: 100%;
    background: #ffffff;
    border-radius: 10px; }
  .startAnnotationTaskModal .modalHeader {
    padding: 15px 30px 20px;
    position: relative; }
    .startAnnotationTaskModal .modalHeader .modalTitle {
      text-align: left;
      color: #303030;
      font-weight: 500;
      font-size: 20px;
      margin: 0; }
  .startAnnotationTaskModal .modalContent {
    padding: 15px 45px 0 30px;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #595959; }
    .startAnnotationTaskModal .modalContent li {
      margin-bottom: 15px; }
    .startAnnotationTaskModal .modalContent .icon {
      margin-right: 10px;
      width: 20px;
      height: 20px; }
  .startAnnotationTaskModal .modalFooter {
    padding: 20px;
    display: flex;
    justify-content: flex-end; }
    .startAnnotationTaskModal .modalFooter button {
      border-radius: 10px;
      min-width: 80px;
      height: 36px;
      box-shadow: none;
      border: none;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      font-weight: 500; }

.trainingMenu .alertDesable.classTooltip {
  display: inline-flex;
  border-radius: 20px; }

sup.tm {
  font-size: 8px;
  top: -8px;
  font-weight: 400; }

.upload-main-header {
  font-weight: 600;
  font-size: 24px;
  line-height: 20px;
  display: flex;
  align-items: center;
  color: #303030;
  margin: 14px 0 24px 0; }
  .upload-main-header span {
    font-weight: 500; }
  .upload-main-header .apiDropdown {
    margin-left: auto; }
    .upload-main-header .apiDropdown .dropdownItemList li:first-child {
      opacity: 1;
      pointer-events: all;
      background: #FFFFFF; }
      .upload-main-header .apiDropdown .dropdownItemList li:first-child a {
        background: #FFFFFF; }
      .upload-main-header .apiDropdown .dropdownItemList li:first-child:hover a,
      .upload-main-header .apiDropdown .dropdownItemList li:first-child:hover a:focus {
        background: #F9F2FF !important;
        color: #535353 !important; }
  .upload-main-header .apiLinks {
    margin-left: 10px;
    display: none; }
  .upload-main-header .api-documentation-link {
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    text-decoration: underline;
    color: #535353 !important;
    margin-right: 20px;
    cursor: pointer;
    text-underline-offset: 5px;
    text-decoration-thickness: 2px; }

.upload-content {
  background: inherit;
  display: flex; }
  .upload-content .drop-content {
    width: 100%;
    background: #FFFFFF;
    border-radius: 0px 20px 20px 20px; }
    .upload-content .drop-content .uploadMedia {
      max-width: 625px;
      margin: 0 auto;
      padding: 35px 0; }
      .upload-content .drop-content .uploadMedia label {
        font-size: 16px;
        font-weight: 400; }
      .upload-content .drop-content .uploadMedia .label {
        color: #210835;
        margin-bottom: 5px;
        font-size: 16px;
        font-weight: 400; }
    .upload-content .drop-content .or {
      text-align: center;
      font-size: 16px;
      font-weight: 500;
      margin-top: 20px;
      margin-bottom: 20px;
      padding: 0;
      color: #535353;
      text-transform: uppercase;
      position: relative; }
      .upload-content .drop-content .or:before {
        width: 100%;
        height: 1px;
        background: #D8D8D8;
        position: absolute;
        top: 55%;
        left: 0;
        right: 0;
        content: '';
        margin: 0 auto; }
      .upload-content .drop-content .or span {
        padding: 10px;
        background: #ffffff;
        color: #535353;
        position: relative; }
    .upload-content .drop-content .form-group {
      position: relative; }
      .upload-content .drop-content .form-group label {
        font-size: 16px;
        font-weight: 400;
        color: #210835;
        margin-bottom: 0; }
    .upload-content .drop-content .form-control {
      background: #FCFCFC;
      border: 1px solid #EAEAEA;
      border-radius: 5px;
      height: 50px;
      font-size: 14px;
      width: 100% !important;
      margin-bottom: 30px;
      color: #4E4576;
      text-overflow: ellipsis;
      padding-right: 20px;
      padding-left: 20px; }
    .upload-content .drop-content .imageUrl {
      margin-bottom: 5px;
      padding-right: 40px;
      display: inline-block;
      overflow: hidden; }
      .upload-content .drop-content .imageUrl:focus {
        box-shadow: 0 0 0 2px #8020CF !important;
        color: #4E4576; }
      .upload-content .drop-content .imageUrl.urlValid {
        border-color: #36B37E;
        background: #FAFBFC url(../img/check-dark-green.svg) 97% center no-repeat;
        box-shadow: 0 0 0 1px #36B37E !important; }
      .upload-content .drop-content .imageUrl.urlNotValid {
        border-color: #FF7452;
        box-shadow: 0 0 0 1px #FF7452 !important;
        margin: 0;
        background: none; }
    .upload-content .drop-content .errorText {
      display: none;
      font-size: 14px;
      font-weight: 400;
      color: #EB5857;
      margin-bottom: 0; }
    .upload-content .drop-content .urlNotValid ~ .errorText {
      display: block; }
    .upload-content .drop-content .removeError {
      display: none;
      box-shadow: none;
      border: none; }
    .upload-content .drop-content .urlNotValid ~ .removeError {
      background: url(../img/close-red.svg) center center no-repeat;
      display: block;
      width: 20px;
      height: 20px;
      position: absolute;
      right: 15px;
      top: 47px; }
    .upload-content .drop-content .supportedFiles {
      margin: 0;
      font-size: 14px;
      font-weight: 400;
      color: #535353; }
      .upload-content .drop-content .supportedFiles em {
        color: #FF0000;
        font-style: normal; }
    .upload-content .drop-content .nav-tabs {
      border: 0;
      margin-bottom: 5px; }
      .upload-content .drop-content .nav-tabs li:first-child a {
        border-radius: 5px 0px 0px 5px; }
      .upload-content .drop-content .nav-tabs li:last-child a {
        border-radius: 0 5px 5px 0; }
      .upload-content .drop-content .nav-tabs a {
        width: 102px;
        height: 36px;
        color: #303030;
        font-size: 14px;
        font-weight: 400;
        border: 1px solid #D8D8D8;
        background: #ffffff;
        transition: all 0.2s ease-in;
        display: inline-flex;
        justify-content: center;
        align-items: center; }
        .upload-content .drop-content .nav-tabs a:hover, .upload-content .drop-content .nav-tabs a:focus, .upload-content .drop-content .nav-tabs a:active {
          color: #8020CF;
          border-color: #8020CF;
          background-color: #FDFBFF; }
      .upload-content .drop-content .nav-tabs .active a {
        color: #8020CF;
        font-weight: 400;
        border-color: #8020CF;
        background-color: #FDFBFF; }
    .upload-content .drop-content .urlInfo {
      display: inline-block;
      margin-left: 10px; }
      .upload-content .drop-content .urlInfo .infoGray {
        width: 15px;
        height: 15px;
        background: url(../img/ch-info-gray-sm.svg) 0 0 no-repeat;
        display: inline-block; }
      .upload-content .drop-content .urlInfo .customTooltip {
        width: 320px;
        white-space: normal;
        top: 20px;
        left: 0; }
  .upload-content .upload-header {
    font-weight: 500 !important;
    font-size: 18px !important;
    line-height: 36px !important;
    color: #4E4576 !important;
    margin-bottom: 10px !important; }
  .upload-content .upload-explanation {
    text-align: left;
    margin: 0 0 37px 0; }
  .upload-content .dropzone-scale-dataset .dropzone {
    border: none !important; }
  .upload-content .dropzone-scale-dataset .dropzone.dz-started {
    height: unset !important; }
  .upload-content #uploadModal {
    height: 237px !important;
    overflow: hidden; }
    .upload-content #uploadModal .note p {
      text-align: center !important;
      margin-bottom: 15px;
      font-size: 18px;
      font-weight: 500; }
      .upload-content #uploadModal .note p a {
        text-underline-offset: 5px !important;
        font-weight: 500;
        font-size: 18px; }
  .upload-content .dataset-upload-first-view {
    max-width: none !important;
    background-color: #FCFCFC !important; }
    .upload-content .dataset-upload-first-view .uploadModalWrapper {
      max-width: none !important; }
  .upload-content .dropzone {
    border: none !important; }
  .upload-content .file-is-uploaded {
    border: none;
    background: transparent;
    padding: 0;
    white-space: nowrap;
    color: #00875A;
    text-decoration: none;
    z-index: 2;
    font-weight: 600;
    font-size: 14px;
    width: 100%;
    text-align: center; }
  .upload-content .upload-button {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1px 24px;
    width: 239px;
    height: 44px;
    background: transparent !important;
    border: 1.5px solid #BDBDBD !important;
    border-radius: 34px;
    color: #D9D9D9 !important;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    margin: 60px auto 0;
    pointer-events: none; }
    .upload-content .upload-button.active {
      color: #303030 !important;
      pointer-events: all;
      border: solid 2px transparent !important;
      background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(101deg, #8020cf, #ff00f8) !important;
      background-origin: border-box !important;
      background-clip: content-box, border-box !important;
      box-shadow: 2px 1000px 1px #FFFFFF inset !important; }
  .upload-content .recognize-field {
    width: 310px;
    background: #FFFFFF;
    box-shadow: 2px 5px 5px rgba(22, 22, 22, 0.08);
    position: relative;
    border-radius: 20px;
    z-index: 1; }
    .upload-content .recognize-field .exampleImages {
      padding: 15px 25px 20px;
      width: 310px; }
    .upload-content .recognize-field .uploadImgTab {
      height: 123px;
      display: flex;
      align-items: center;
      padding-left: 26px;
      padding-right: 26px;
      position: relative;
      border-bottom: 1px solid #E0E0E0;
      background-color: #FDFBFF;
      cursor: pointer; }
      @media screen and (max-width: 1220px) {
        .upload-content .recognize-field .uploadImgTab {
          height: 80px; } }
      .upload-content .recognize-field .uploadImgTab .info {
        margin-left: 16px;
        line-height: 20px; }
      .upload-content .recognize-field .uploadImgTab:before {
        position: absolute;
        background: linear-gradient(226.85deg, #8020CF 3.02%, #22FCDB 100%);
        width: 11px;
        height: 100%;
        left: 0;
        top: 0;
        border-radius: 5px;
        content: ''; }
    .upload-content .recognize-field .recognize-header {
      font-weight: 500;
      font-size: 18px;
      color: #4E4576;
      margin-bottom: 20px;
      width: 100%; }
    .upload-content .recognize-field .recognize-box {
      display: flex;
      align-items: center;
      width: 100%;
      height: 88px;
      margin-bottom: 25px;
      border-radius: 10px; }
      .upload-content .recognize-field .recognize-box:last-child {
        margin-bottom: 0; }
      @media screen and (max-width: 1220px) {
        .upload-content .recognize-field .recognize-box {
          margin-bottom: 15px; } }
      .upload-content .recognize-field .recognize-box h5 {
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
        color: #303030; }
      .upload-content .recognize-field .recognize-box img {
        border-radius: 10px;
        min-width: 125px;
        height: 85px;
        margin-right: 10px;
        display: inline-flex; }
      .upload-content .recognize-field .recognize-box button {
        width: 127px;
        height: 36px;
        border-radius: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #303030;
        border: solid 2px transparent;
        background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(101deg, #8020cf, #ff00f8);
        background-origin: border-box;
        background-clip: content-box, border-box;
        box-shadow: 2px 1000px 1px #F8F9FA inset;
        font-weight: 600;
        font-size: 14px;
        line-height: 15px; }

.chat-content {
  display: none;
  position: relative; }
  .chat-content .closeChat {
    margin-left: auto;
    background: transparent;
    border: none;
    opacity: 0.5; }
  .chat-content .chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding: 18px 24px 5px;
    display: none; }
    .chat-content .chat-header h5 {
      font-weight: 600;
      font-size: 16px;
      line-height: 20px;
      display: flex;
      align-items: center;
      color: #210835;
      margin-bottom: 0; }
      .chat-content .chat-header h5 span {
        color: #8020cf; }
    .chat-content .chat-header .api-documentation-link {
      font-weight: 600;
      font-size: 14px;
      line-height: 20px;
      text-decoration: underline;
      color: #535353 !important;
      margin-right: 20px;
      cursor: pointer;
      text-underline-offset: 5px;
      text-decoration-thickness: 2px; }
    .chat-content .chat-header .upload-btn {
      display: flex;
      align-items: center;
      justify-content: space-around;
      padding: 5px 16px 5px 12px;
      width: 130px;
      height: 36px;
      background: linear-gradient(267.94deg, #48FDE1 -23.98%, #60EFFF 96.66%);
      box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.08), inset 0px -1px 0px rgba(0, 0, 0, 0.2);
      border-radius: 20px;
      border: none;
      margin-right: 20px;
      font-weight: 700;
      font-size: 14px;
      line-height: 20px;
      color: #303030; }
    .chat-content .chat-header .help-btn {
      margin-left: 10px;
      border: none;
      box-shadow: none;
      padding: 0; }
  .chat-content .chat-area {
    background-color: #FFFFFF;
    /*    height: 76vh;*/
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start; }
    .chat-content .chat-area .currentDay {
      display: none;
      justify-content: center;
      padding: 24px;
      font-size: 13px;
      color: #AAAAAA;
      font-weight: 400; }
    .chat-content .chat-area .fileDiv {
      width: 335px;
      border-radius: 8px;
      padding: 12px;
      border: solid 1px #EAEAEA;
      display: inline-block;
      position: relative;
      margin: 20px 0 20px 20px; }
      @media screen and (max-width: 1500px) {
        .chat-content .chat-area .fileDiv {
          width: 252px; } }
      @media screen and (max-width: 1220px) {
        .chat-content .chat-area .fileDiv {
          width: 202px; } }
      .chat-content .chat-area .fileDiv .fileName {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        color: #210835;
        font-size: 14px;
        font-weight: 500;
        width: 85%;
        margin: 0;
        word-wrap: break-word; }
      .chat-content .chat-area .fileDiv .customTooltip {
        top: 80%;
        left: 15px;
        max-width: 500px;
        word-wrap: break-word;
        white-space: normal; }
      .chat-content .chat-area .fileDiv .fileName:hover + .customTooltip {
        opacity: 1;
        visibility: visible; }
      .chat-content .chat-area .fileDiv .type {
        color: #535353;
        font-size: 13px;
        font-weight: 500;
        margin: 0; }
      .chat-content .chat-area .fileDiv .fileOption {
        position: relative;
        display: inline-flex;
        width: 24px;
        height: 24px; }
        .chat-content .chat-area .fileDiv .fileOption .ellipsIocn {
          width: 100%;
          height: 100%;
          background: url(../img/option-vellips-darkgray.svg) center center no-repeat;
          border-radius: 1px;
          background-size: 5px;
          cursor: pointer; }
        .chat-content .chat-area .fileDiv .fileOption .fileOptionDropdown {
          width: 210px;
          background: #ffffff;
          box-shadow: 2px 5px 5px 0px rgba(22, 22, 22, 0.08);
          position: absolute;
          right: 0;
          top: 26px;
          display: none;
          border-radius: 6px; }
          .chat-content .chat-area .fileDiv .fileOption .fileOptionDropdown li a {
            padding: 12px 15px;
            display: flex;
            align-items: center;
            color: #535353;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer; }
          .chat-content .chat-area .fileDiv .fileOption .fileOptionDropdown li:hover a,
          .chat-content .chat-area .fileDiv .fileOption .fileOptionDropdown li .active {
            background-color: #F9F2FF; }
        .chat-content .chat-area .fileDiv .fileOption.open .ellipsIocn {
          background: #FAF5FF url(../img/option-vellips-darkgray.svg) center center no-repeat; }
        .chat-content .chat-area .fileDiv .fileOption.open .fileOptionDropdown {
          display: block; }
      .chat-content .chat-area .fileDiv .fileIcon {
        width: 26px;
        height: 26px;
        display: inline-flex;
        justify-content: center;
        align-items: center; }
        .chat-content .chat-area .fileDiv .fileIcon.image {
          background: url(../img/filetype/image.svg) center center no-repeat;
          background-size: contain; }
        .chat-content .chat-area .fileDiv .fileIcon.audio {
          background: url(../img/filetype/audio.svg) center center no-repeat;
          background-size: contain; }
        .chat-content .chat-area .fileDiv .fileIcon.video {
          background: url(../img/filetype/video.svg) center center no-repeat;
          background-size: contain; }
        .chat-content .chat-area .fileDiv .fileIcon.youTube {
          background: url(../img/filetype/youtube.svg) center center no-repeat;
          background-size: contain; }
        .chat-content .chat-area .fileDiv .fileIcon.pdf {
          background: url(../img/filetype/pdf.svg) center center no-repeat;
          background-size: contain; }
        .chat-content .chat-area .fileDiv .fileIcon.msWord, .chat-content .chat-area .fileDiv .fileIcon.doc, .chat-content .chat-area .fileDiv .fileIcon.docx {
          background: url(../img/filetype/ms-word.svg) center center no-repeat;
          background-size: contain; }
        .chat-content .chat-area .fileDiv .fileIcon.msExcel, .chat-content .chat-area .fileDiv .fileIcon.xls, .chat-content .chat-area .fileDiv .fileIcon.xlsx {
          background: url(../img/filetype/ms-excel.svg) center center no-repeat;
          background-size: contain; }
        .chat-content .chat-area .fileDiv .fileIcon.msPowerPoint, .chat-content .chat-area .fileDiv .fileIcon.ppt, .chat-content .chat-area .fileDiv .fileIcon.pptx {
          background: url(../img/filetype/ms-power-point.svg) center center no-repeat;
          background-size: contain; }
        .chat-content .chat-area .fileDiv .fileIcon.csv {
          background: url(../img/filetype/csv.svg) center center no-repeat;
          background-size: contain; }
        .chat-content .chat-area .fileDiv .fileIcon.txt {
          background: url(../img/filetype/txt.svg) center center no-repeat;
          background-size: contain; }
        .chat-content .chat-area .fileDiv .fileIcon.url {
          background: url(../img/filetype/url.svg) center center no-repeat;
          background-size: contain; }
      .chat-content .chat-area .fileDiv .fileDivTop {
        display: flex;
        justify-content: space-between;
        position: relative;
        padding-bottom: 10px;
        border-bottom: solid 1px #eaeaea;
        margin-bottom: 10px; }
        @media screen and (max-width: 1220px) {
          .chat-content .chat-area .fileDiv .fileDivTop {
            padding-bottom: 5px; } }
      .chat-content .chat-area .fileDiv .fileDivBottom {
        display: flex;
        justify-content: space-between;
        align-items: center; }
        .chat-content .chat-area .fileDiv .fileDivBottom .group {
          display: inline-flex;
          align-items: center; }
      .chat-content .chat-area .fileDiv .sourceFileIcon {
        width: 30px;
        height: 30px;
        margin-left: 10px; }
        .chat-content .chat-area .fileDiv .sourceFileIcon.chooch {
          background: url(../img/filetype/chooch.svg) center center no-repeat;
          background-size: 30px; }
        .chat-content .chat-area .fileDiv .sourceFileIcon.cloud {
          background: url(../img/filetype/cloud.svg) center center no-repeat;
          background-size: 26px; }
        .chat-content .chat-area .fileDiv .sourceFileIcon.googleDrive {
          background: url(../img/filetype/google-drive.svg) center center no-repeat;
          background-size: 26px; }
        .chat-content .chat-area .fileDiv .sourceFileIcon.youTube {
          background: url(../img/filetype/youtube.svg) center center no-repeat;
          background-size: 26px; }
        .chat-content .chat-area .fileDiv .sourceFileIcon.web {
          background: url(../img/filetype/web.svg) center center no-repeat;
          background-size: 30px; }
        .chat-content .chat-area .fileDiv .sourceFileIcon.siteMap {
          background: url(../img/filetype/sitemap.svg) center center no-repeat;
          background-size: 30px; }
        .chat-content .chat-area .fileDiv .sourceFileIcon.url {
          background: url(../img/filetype/url.svg) center center no-repeat;
          background-size: 24px; }
        .chat-content .chat-area .fileDiv .sourceFileIcon.aws {
          background: url(../img/filetype/aws.svg) center center no-repeat;
          background-size: 30px; }
        .chat-content .chat-area .fileDiv .sourceFileIcon.sharePoint {
          background: url(../img/filetype/sharepoint.svg) center center no-repeat;
          background-size: 30px; }
        .chat-content .chat-area .fileDiv .sourceFileIcon.azureBlob {
          background: url(../img/filetype/azure-blob.svg) center center no-repeat;
          background-size: 30px; }
      .chat-content .chat-area .fileDiv .externalLink {
        width: 20px;
        height: 20px;
        margin-left: auto;
        background: url(../img/filetype/external-link.svg) center center no-repeat;
        background-size: contain; }
    .chat-content .chat-area .videoFile {
      width: 335px;
      margin-bottom: 20px;
      position: relative;
      display: inline-block;
      margin-left: 24px;
      box-shadow: 0px 5px 15px 0px rgba(58, 56, 56, 0.15);
      border-radius: 6px; }
      @media screen and (max-width: 1500px) {
        .chat-content .chat-area .videoFile {
          width: 252px; } }
      .chat-content .chat-area .videoFile .videoImage {
        width: 100%;
        margin-bottom: 10px;
        border: none;
        height: 174px;
        min-height: 174px;
        max-height: 174px;
        object-fit: cover; }
        @media screen and (max-width: 1500px) {
          .chat-content .chat-area .videoFile .videoImage {
            height: 134px;
            min-height: 134px;
            max-height: 134px; } }
      .chat-content .chat-area .videoFile .fileName {
        background: #ffffff;
        font-size: 14px;
        font-weight: 500;
        color: #000;
        max-height: 37px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        word-wrap: break-word; }
      .chat-content .chat-area .videoFile .video_duration {
        position: absolute;
        right: 18px;
        top: 156px;
        font-size: 12px;
        padding: 3px 6px;
        background: #595959;
        border-radius: 6px;
        color: white;
        font-weight: 600;
        letter-spacing: 1px; }
    .chat-content .chat-area .imgFile {
      position: relative;
      width: 335px;
      border-radius: 10px;
      display: inline-block;
      margin-left: 20px;
      box-shadow: 0px 5px 15px 0px rgba(58, 56, 56, 0.15); }
      @media screen and (max-width: 1500px) {
        .chat-content .chat-area .imgFile {
          width: 252px; } }
      @media screen and (max-width: 1220px) {
        .chat-content .chat-area .imgFile {
          width: 202px; } }
      .chat-content .chat-area .imgFile .img {
        width: 100%;
        height: 174px;
        min-height: 174px;
        overflow: hidden;
        margin-bottom: 10px;
        background-color: #fafafa; }
        @media screen and (max-width: 1500px) {
          .chat-content .chat-area .imgFile .img {
            height: 134px;
            min-height: 134px; } }
        @media screen and (max-width: 1220px) {
          .chat-content .chat-area .imgFile .img {
            height: 104px;
            min-height: 104px;
            margin-bottom: 5px; } }
        .chat-content .chat-area .imgFile .img img {
          width: 100%;
          height: 100%;
          max-height: 174px;
          object-fit: contain; }
          @media screen and (max-width: 1500px) {
            .chat-content .chat-area .imgFile .img img {
              max-height: 134px; } }
          @media screen and (max-width: 1220px) {
            .chat-content .chat-area .imgFile .img img {
              max-height: 104px; } }
    .chat-content .chat-area .chatAreaGroup {
      padding: 20px;
      width: 70%; }
      @media screen and (max-width: 1500px) {
        .chat-content .chat-area .chatAreaGroup {
          width: 72%; } }
      @media screen and (max-width: 1300px) {
        .chat-content .chat-area .chatAreaGroup {
          width: 60%; } }
      @media screen and (max-width: 1220px) {
        .chat-content .chat-area .chatAreaGroup {
          width: 65%; } }
    .chat-content .chat-area .chat-image-area {
      height: 40vh;
      width: 410px;
      display: flex;
      justify-content: stretch;
      align-items: flex-start;
      position: relative;
      margin-right: 15px;
      overflow: hidden;
      padding-right: 30px;
      border-right: 1px solid #E0E0E0;
      display: none; }
      @media screen and (max-width: 1300px) {
        .chat-content .chat-area .chat-image-area {
          height: 45vh; } }
      .chat-content .chat-area .chat-image-area img {
        border-radius: 10px;
        width: 100%;
        object-fit: cover;
        max-width: 338px;
        max-height: 228px;
        margin: 0 auto; }
      .chat-content .chat-area .chat-image-area .fullscreenImageBtn {
        border: none;
        background: #ffffff;
        width: 24px;
        height: 24px;
        cursor: pointer;
        position: absolute;
        right: 15px;
        bottom: 8px;
        z-index: 2;
        padding: 4px;
        border-radius: 3px; }
        .chat-content .chat-area .chat-image-area .fullscreenImageBtn img {
          border-radius: unset; }
    .chat-content .chat-area .chat-predictions-area {
      /*height: 300px;
      height: 25vh;*/
      max-height: 270px;
      flex-grow: 1;
      overflow-y: scroll;
      width: 100%; }
      .chat-content .chat-area .chat-predictions-area::-webkit-scrollbar {
        width: 5px; }
      .chat-content .chat-area .chat-predictions-area::-webkit-scrollbar-track {
        border-radius: 10px; }
      .chat-content .chat-area .chat-predictions-area::-webkit-scrollbar-thumb {
        background: #9B9B9B59;
        border-radius: 10px; }
      .chat-content .chat-area .chat-predictions-area .chat-prediction-item {
        display: flex;
        align-items: flex-start; }
        .chat-content .chat-area .chat-predictions-area .chat-prediction-item img {
          margin-right: 16px;
          min-width: 30px;
          width: 30px;
          height: 30px;
          border-radius: 50%;
          object-fit: cover; }
        .chat-content .chat-area .chat-predictions-area .chat-prediction-item .chat-prediction-text {
          width: auto;
          border-radius: 6px;
          font-size: 14px;
          line-height: 18px;
          color: #303030; }
    .chat-content .chat-area .fullscreenBtn {
      position: absolute;
      width: 16px;
      right: 38px;
      top: 25.5vh;
      cursor: pointer;
      display: none; }
    .chat-content .chat-area .writing-loader {
      display: none;
      position: absolute;
      left: 20px;
      bottom: 98px;
      align-items: center; }
      .chat-content .chat-area .writing-loader img {
        width: 30px; }
      .chat-content .chat-area .writing-loader .spinnerDots > div {
        width: 6.25px;
        height: 6.25px;
        background-color: #210835;
        border-radius: 100%;
        display: inline-block;
        -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
        animation: sk-bouncedelay 1.4s infinite ease-in-out both; }
      .chat-content .chat-area .writing-loader .spinnerDots .bounce1 {
        -webkit-animation-delay: -0.32s;
        animation-delay: -0.32s;
        background-color: #210835; }
      .chat-content .chat-area .writing-loader .spinnerDots .bounce2 {
        -webkit-animation-delay: -0.16s;
        animation-delay: -0.16s;
        background-color: #210835; }
    .chat-content .chat-area .chat-messages-area {
      width: 100%;
      max-width: 100%;
      border-top: 10px solid #F8F9FA;
      overflow-y: auto;
      padding: 10px 20px 0;
      margin-bottom: 140px;
      min-height: 285px;
      max-height: 468px; }
      .chat-content .chat-area .chat-messages-area::-webkit-scrollbar {
        width: 5px; }
      .chat-content .chat-area .chat-messages-area::-webkit-scrollbar-track {
        border-radius: 10px; }
      .chat-content .chat-area .chat-messages-area::-webkit-scrollbar-thumb {
        background: #9B9B9B59;
        border-radius: 10px; }
      .chat-content .chat-area .chat-messages-area .chat-model-message {
        display: flex;
        align-items: center;
        font-weight: 400;
        font-size: 14px;
        line-height: 18px;
        letter-spacing: 0.022em;
        color: #1E1E1E;
        margin: 10px 0;
        word-break: break-word; }
        .chat-content .chat-area .chat-messages-area .chat-model-message .chat-model-icon {
          min-width: 30px;
          height: 30px;
          background: #FFFFFF;
          box-shadow: 1.875px 4.6875px 4.6875px rgba(22, 22, 22, 0.08);
          border-radius: 50%;
          margin-right: 16px;
          display: flex;
          align-items: center;
          justify-content: center;
          background-image: url(../img/chooch-mobile-logo-new.svg);
          background-size: 20px;
          background-repeat: no-repeat;
          background-position: center;
          align-self: flex-start; }
      .chat-content .chat-area .chat-messages-area .chat-user-message {
        display: flex;
        align-items: center;
        font-weight: 400;
        font-size: 14px;
        line-height: 18px;
        letter-spacing: 0.022em;
        color: #4E4576;
        margin: 10px 0;
        word-break: break-word; }
        .chat-content .chat-area .chat-messages-area .chat-user-message .chat-user-icon {
          min-width: 30px;
          width: 30px;
          height: 30px;
          background: #F6F9FF;
          box-shadow: 2.75px 6.875px 6.875px rgba(22, 22, 22, 0.08);
          border-radius: 50%;
          margin-right: 16px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 600;
          font-size: 12px;
          line-height: 15px;
          letter-spacing: 0.022em;
          color: rgba(33, 8, 53, 0.8);
          align-self: flex-start; }
    .chat-content .chat-area .chat-prompt-area {
      height: 90px;
      padding: 9px 24px;
      width: 100%;
      display: flex;
      align-items: center;
      position: absolute;
      bottom: 0;
      align-items: center;
      position: absolute;
      bottom: 0; }
      .chat-content .chat-area .chat-prompt-area .prompt-message {
        width: max-content;
        height: 32px;
        border: 1px solid #8020CF;
        border-radius: 25px;
        padding: 6px 12px;
        font-weight: 500;
        font-size: 14px;
        line-height: 18px;
        color: #8020CF;
        margin-right: 20px;
        cursor: pointer; }
  .chat-content .chat-type-area {
    background-color: #EEEEEE;
    height: 90px;
    width: 100%;
    padding: 19px 16px;
    position: absolute;
    bottom: 0; }
    .chat-content .chat-type-area .chat-text-input {
      padding: 0px 100px 0 10px;
      width: 100%;
      height: 52px;
      background: #F5F5F5;
      border-radius: 8px;
      display: flex;
      align-items: center;
      border: none;
      outline: none !important;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis; }
    .chat-content .chat-type-area .divider {
      width: 2px;
      height: 40px;
      background-color: #1E1E1E;
      opacity: 0.1;
      position: absolute;
      top: 25px;
      right: 85px; }
    .chat-content .chat-type-area .send-btn {
      background: #EEEEEE;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      position: absolute;
      top: 25px;
      right: 30px;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      pointer-events: none; }
      .chat-content .chat-type-area .send-btn.active {
        background-color: #8020CF;
        pointer-events: all; }
        .chat-content .chat-type-area .send-btn.active img {
          filter: brightness(0) invert(1); }

.welcomeChatModal {
  padding: 0 !important; }
  .welcomeChatModal .modal-dialog {
    max-width: 784px;
    align-items: center; }
  .welcomeChatModal .modal-content {
    background-color: #FFFFFF !important;
    flex-direction: column !important;
    padding-bottom: 0 !important;
    border-radius: 10px;
    margin-top: 0; }
  .welcomeChatModal .modal-body {
    width: 100%;
    border: none;
    padding: 52px 40px;
    min-height: 300px; }
    .welcomeChatModal .modal-body img {
      width: 224px;
      margin-bottom: 22px;
      margin-left: calc(calc(100% - 224px) / 2); }
    .welcomeChatModal .modal-body h5 {
      margin-bottom: 6px;
      font-weight: 400;
      font-size: 24px;
      line-height: 36px;
      text-align: center;
      color: #210835; }
      .welcomeChatModal .modal-body h5 span {
        color: #8020CF; }
        .welcomeChatModal .modal-body h5 span .tm {
          top: -14px;
          left: -2px; }
    .welcomeChatModal .modal-body .welcome-content {
      font-weight: 400;
      font-size: 14px;
      line-height: 25px;
      text-align: center;
      color: #303030; }
    .welcomeChatModal .modal-body button {
      width: 129px;
      height: 44px;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      padding: 5px 12px;
      margin-top: 30px;
      margin-left: calc(calc(100% - 130px) / 2);
      font-size: 14px; }

.imageChatHelpInfo {
  border: 1px solid #8020CF;
  padding: 25px 20px 20px;
  width: 100%;
  max-width: 666px;
  background-color: #ffffff;
  border-radius: 10px 0 10px 10px;
  font-family: "Euclid Circular B";
  margin-bottom: 20px;
  display: none;
  position: absolute;
  right: 30px;
  top: 60px;
  z-index: 1006; }
  .imageChatHelpInfo h5 {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #303030;
    margin-bottom: 12px; }
    .imageChatHelpInfo h5 span {
      color: #8020cf; }
  .imageChatHelpInfo p,
  .imageChatHelpInfo div {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #535353; }
    .imageChatHelpInfo p:last-child,
    .imageChatHelpInfo div:last-child {
      margin-bottom: 0; }
  .imageChatHelpInfo #close-info {
    cursor: pointer;
    width: 15px;
    height: 15px;
    opacity: 0.7; }

.imageChatHelpInfoBtn {
  border-radius: 10px 10px 0px 0px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 36px;
  cursor: pointer;
  background: transparent;
  border: none;
  margin-left: auto;
  display: none !important; }
  .imageChatHelpInfoBtn.active {
    background: #8020CF; }
    .imageChatHelpInfoBtn.active .icon {
      filter: invert(100%) sepia(100%) saturate(13%) hue-rotate(237deg) brightness(200%) contrast(104%); }
  .imageChatHelpInfoBtn + .overlapWrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(149, 149, 149, 0.25);
    z-index: 1002;
    display: none; }

.predictionsModal {
  padding: 0 !important; }
  .predictionsModal .modal-dialog {
    max-width: 1040px; }
  .predictionsModal .modal-content {
    background-color: #FFFFFF !important;
    border-radius: 10px;
    margin-top: 0; }
  .predictionsModal .modal-body {
    width: 100%;
    border: none;
    background-color: #ffffff;
    padding-top: 20px;
    height: 720px; }
    .predictionsModal .modal-body .modal-chat-image-area {
      max-height: 700px;
      width: 410px;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      margin-right: 20px;
      overflow: hidden; }
      .predictionsModal .modal-body .modal-chat-image-area img {
        border-radius: 10px;
        width: 100%;
        object-fit: cover;
        max-width: 338px;
        max-height: 680px; }
    .predictionsModal .modal-body .modal-chat-predictions-area {
      width: 65%;
      height: 700px;
      max-height: 700px;
      flex-grow: 1;
      overflow-y: scroll;
      padding-left: 10px;
      border-left: 1px solid #E0E0E0; }
      .predictionsModal .modal-body .modal-chat-predictions-area::-webkit-scrollbar {
        width: 5px; }
      .predictionsModal .modal-body .modal-chat-predictions-area::-webkit-scrollbar-track {
        border-radius: 10px; }
      .predictionsModal .modal-body .modal-chat-predictions-area::-webkit-scrollbar-thumb {
        background: #9B9B9B59;
        border-radius: 10px; }
      .predictionsModal .modal-body .modal-chat-predictions-area .chat-prediction-item {
        display: flex;
        align-items: center;
        margin-bottom: 10px; }
        .predictionsModal .modal-body .modal-chat-predictions-area .chat-prediction-item img {
          min-width: 30px;
          height: 30px;
          background: #FFFFFF;
          box-shadow: 1.875px 4.6875px 4.6875px rgba(22, 22, 22, 0.08);
          border-radius: 50%;
          margin-right: 16px; }
        .predictionsModal .modal-body .modal-chat-predictions-area .chat-prediction-item .chat-prediction-text {
          width: auto;
          min-height: 30px;
          background: rgba(128, 32, 207, 0.8);
          padding: 6px 8px;
          border-radius: 6px;
          font-size: 14px;
          line-height: 18px;
          color: #FFFFFF; }

.big-chat-loader {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: none;
  background: rgba(247, 247, 247, 0.8);
  z-index: 11000;
  flex-direction: column;
  justify-content: center;
  align-items: center; }
  .big-chat-loader .big-writing-loader {
    display: flex;
    width: 115px;
    height: 115px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    box-shadow: 0px 3.73377px 11.2013px rgba(0, 0, 0, 0.16); }
    .big-chat-loader .big-writing-loader img {
      width: 40px; }
    .big-chat-loader .big-writing-loader .spinnerDots > div {
      width: 7.25px;
      height: 7.25px;
      background-color: #210835;
      border-radius: 100%;
      display: inline-block;
      -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
      animation: sk-bouncedelay 1.4s infinite ease-in-out both; }
    .big-chat-loader .big-writing-loader .spinnerDots .bounce1 {
      -webkit-animation-delay: -0.32s;
      animation-delay: -0.32s;
      background-color: #210835; }
    .big-chat-loader .big-writing-loader .spinnerDots .bounce2 {
      -webkit-animation-delay: -0.16s;
      animation-delay: -0.16s;
      background-color: #210835; }

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0); }
  40% {
    -webkit-transform: scale(1); } }

@keyframes sk-bouncedelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0); }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1); } }

.progress-loader {
  position: relative;
  height: 6px;
  width: 360px;
  border: 3px solid #ffffff;
  border-radius: 40px;
  margin-top: 20px; }
  .progress-loader .color {
    position: absolute;
    background-color: #4E4576;
    width: 0px;
    height: 6px;
    border-radius: 40px;
    animation: progres 10s infinite linear;
    margin-top: -3px;
    left: -3px; }

@keyframes progres {
  0% {
    width: 0%; }
  25% {
    width: 50%; }
  50% {
    width: 75%; }
  75% {
    width: 85%; }
  100% {
    width: 100%; } }

.fullImageViewWrapper {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1005;
  background: rgba(89, 89, 89, 0.65);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease-in; }
  .fullImageViewWrapper.show {
    opacity: 1;
    visibility: visible; }
  .fullImageViewWrapper .fullImageView {
    width: 100%;
    max-width: 1130px;
    max-height: 762px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 10px; }
    .fullImageViewWrapper .fullImageView img {
      max-width: 1130px;
      max-height: 762px;
      border-radius: 10px;
      width: 100%;
      height: 100%;
      object-fit: contain; }
  .fullImageViewWrapper .closeImage {
    position: fixed;
    right: 35px;
    top: 35px;
    width: 18px;
    height: 18px;
    z-index: 1006;
    border: none;
    background: url(../img/close-white.png) center center no-repeat;
    background-size: contain; }

.imageChatHelp {
  position: relative; }
  .imageChatHelp .overlapWrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(149, 149, 149, 0.25);
    z-index: 1002;
    display: none; }
  .imageChatHelp .iconQuestion {
    border-radius: 10px 10px 0px 0px;
    width: 40px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: url(../img/help-circle-lightblue.svg) center center no-repeat;
    cursor: pointer;
    position: relative; }
  .imageChatHelp .questionAnswer {
    border: 1px solid #8020CF;
    border-radius: 10px 0px 10px 10px;
    width: 666px;
    padding: 25px 20px 20px;
    background-color: #ffffff;
    position: absolute;
    right: 0;
    top: 36px;
    z-index: 1002;
    display: none; }
    .imageChatHelp .questionAnswer h5 {
      margin-bottom: 12px;
      color: #303030;
      font-size: 16px;
      font-weight: 500; }
      .imageChatHelp .questionAnswer h5 span {
        color: #8020CF;
        font-weight: 500; }
    .imageChatHelp .questionAnswer p {
      margin-bottom: 0;
      font-size: 14px;
      font-weight: 400;
      color: #535353; }
  .imageChatHelp.open .iconQuestion {
    background: #8020CF url(../img/ch-help-circle-white.svg) center center no-repeat;
    z-index: 1002; }
  .imageChatHelp.open .questionAnswer,
  .imageChatHelp.open .overlapWrapper {
    display: block; }

.warningMessage {
  width: 103%;
  height: 70px;
  display: block;
  position: relative;
  background: #352B63;
  box-shadow: 2px 5px 5px rgba(22, 22, 22, 0.08);
  font-size: 14px;
  font-weight: 400;
  color: #ffffff;
  padding: 15px 60px 0 30px;
  margin: -10px -20px 0 -20px; }
  @media screen and (max-width: 1366px) {
    .warningMessage br {
      display: none; } }
  .warningMessage strong {
    color: #ffffff;
    font-weight: 700; }
  .warningMessage .closeMessage {
    position: absolute;
    top: 25px;
    right: 35px;
    width: 14px;
    height: 14px;
    background: url(../img/close-white.png) center center no-repeat;
    background-size: contain;
    opacity: 0.8;
    padding: 0;
    border: none; }

.imageChatUploadFileModal .dataset_upload_warn {
  padding-left: 15px;
  position: relative; }
  .imageChatUploadFileModal .dataset_upload_warn:before {
    width: 4px;
    height: 4px;
    position: absolute;
    left: 0;
    top: 8px;
    content: '';
    background-color: #535353;
    border-radius: 20px; }

.languageSupportBtn {
  background: transparent url(../img/ch-chat-purple.svg) 10px center no-repeat;
  border: none;
  box-shadow: none;
  display: inline-flex;
  font-size: 14px;
  font-weight: 500;
  color: #B71EFF;
  margin-right: 5px;
  padding: 10px 15px 10px 38px;
  border-radius: 20px; }
  .languageSupportBtn i {
    font-weight: 400;
    margin-left: 2px; }
  .languageSupportBtn:hover {
    background-color: #F9F2FF; }

.languageSupportModal .modal-dialog {
  max-width: 723px; }

.languageSupportModal .modal-title {
  font-size: 20px;
  font-weight: 500;
  padding: 20px 25px; }

.languageSupportModal .modal-content {
  padding-bottom: 0 !important; }

.languageSupportModal .modal-body {
  padding-left: 48px;
  padding-right: 48px;
  min-height: 250px; }

.languageSupportModal .modal-footer {
  width: 100%;
  justify-content: center;
  border: none; }

.languageSupportModal p {
  font-size: 16px;
  color: #303030;
  margin-bottom: 38px; }

.languageSupportModal label {
  margin-bottom: 2px;
  color: #303030;
  font-size: 16px;
  font-weight: 500; }

.languageSupportModal .saveLanguageBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  height: 44px;
  border-radius: 40px;
  font-size: 16px;
  font-weight: 500;
  color: #303030;
  box-shadow: 2px 1000px 1px #fff inset;
  border: solid 2px transparent;
  background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(101deg, #8020cf, #ff00f8);
  background-origin: border-box;
  background-clip: content-box, border-box; }
  .languageSupportModal .saveLanguageBtn:disabled {
    border-color: #B7B7B7;
    color: #B7B7B7; }

.languageSupportModal .languageSupportDropdown {
  width: 100%;
  position: relative; }
  .languageSupportModal .languageSupportDropdown:before {
    width: 40px;
    height: 40px;
    background: url(../img/Search.svg) 12px center no-repeat !important;
    position: absolute;
    top: 2px;
    left: 0;
    content: '';
    z-index: 1; }
  .languageSupportModal .languageSupportDropdown .searchLanguage {
    border: solid 1px #e0e0e0;
    background: #f7f7f7 url(../img/trangle-down-arrow-lightblue.svg) 97% center no-repeat; }
    .languageSupportModal .languageSupportDropdown .searchLanguage.up {
      background: #f7f7f7 url(../img/trangle-up-arrow-lightblue.svg) 97% center no-repeat; }
    .languageSupportModal .languageSupportDropdown .searchLanguage:focus {
      outline-color: #8020CF !important;
      color: #202223 !important;
      outline-style: solid !important;
      outline-width: 1px !important; }
  .languageSupportModal .languageSupportDropdown .itemBtn {
    height: 44px;
    font-size: 16px;
    max-width: 100%;
    display: block;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    color: #303030;
    font-family: "latomedium";
    font-weight: 500;
    cursor: pointer;
    box-sizing: border-box;
    padding-left: 45px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
  .languageSupportModal .languageSupportDropdown .dropdownItemList {
    padding-left: 0 !important;
    top: 50px;
    border-radius: 0 0 6px 6px;
    background-color: #f7f7f7;
    max-width: 100%;
    max-height: 200px;
    display: none; }
    .languageSupportModal .languageSupportDropdown .dropdownItemList .mCSB_container {
      padding-bottom: 50px; }
    .languageSupportModal .languageSupportDropdown .dropdownItemList li {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      font-size: 14px;
      color: #535353;
      font-family: "latomedium";
      font-weight: 400;
      cursor: pointer;
      box-sizing: border-box;
      padding-right: 23px !important;
      margin-bottom: 2px; }
      .languageSupportModal .languageSupportDropdown .dropdownItemList li a {
        font-size: 16px;
        font-weight: 500;
        color: #535353;
        padding: 15px 15px 15px 45px;
        display: block;
        width: 100%; }
        .languageSupportModal .languageSupportDropdown .dropdownItemList li a span {
          font-weight: 400;
          font-style: italic; }
      .languageSupportModal .languageSupportDropdown .dropdownItemList li:hover a,
      .languageSupportModal .languageSupportDropdown .dropdownItemList li:hover a:focus,
      .languageSupportModal .languageSupportDropdown .dropdownItemList li.active a {
        background: #F9F2FF;
        color: #535353 !important; }
    .languageSupportModal .languageSupportDropdown .dropdownItemList.show {
      display: block; }
  .languageSupportModal .languageSupportDropdown input[type='text'].searchLanguage {
    cursor: pointer;
    color: #595959;
    font-size: 14px;
    font-weight: 400;
    margin: 1px;
    height: 42px;
    padding-left: 45px;
    padding-right: 30px;
    max-width: 100%;
    width: 100%;
    border-radius: 5px; }
    .languageSupportModal .languageSupportDropdown input[type='text'].searchLanguage:focus {
      outline-width: 1px;
      box-shadow: none;
      cursor: auto; }

.imageChatWrapper .trainingDataModal .folderDataContainer li {
  padding-left: 10px; }

.imageChatWrapper .trainingDataInnerFolder .folderContainer li {
  background-color: white;
  border: solid 1px #D8D8D8; }
  .imageChatWrapper .trainingDataInnerFolder .folderContainer li .iconImage {
    max-height: 30px;
    margin-bottom: 10px;
    filter: none; }
  .imageChatWrapper .trainingDataInnerFolder .folderContainer li .fileType {
    color: #303030;
    font-size: 10px;
    font-weight: 500;
    padding: 0 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 142px; }
  .imageChatWrapper .trainingDataInnerFolder .folderContainer li .dbClickDiv {
    flex-direction: column;
    align-items: center;
    justify-content: center; }

body, html {
  height: 100%; }

body {
  margin: 0;
  padding: 0 !important;
  background-color: #fff !important;
  overflow-x: hidden; }

body.modal-open {
  overflow: hidden;
  padding-right: 0 !important; }

.modal {
  padding: 0 !important; }

.bodyScrollHide {
  overflow: hidden; }

h1,
h2,
h3,
h4,
h5,
h6,
a,
p,
b,
span,
div,
button,
input,
textarea,
label,
form {
  font-family: "Euclid Circular B"; }

p {
  font-family: "Euclid Circular B"; }

a {
  color: #FF5630;
  cursor: pointer; }

a:focus,
a:active {
  text-decoration: none;
  outline: 0; }

button:focus {
  outline: 0 !important; }

button {
  -webkit-appearance: none !important;
  cursor: pointer; }

a:hover {
  text-decoration: none; }

input:focus,
select:focus {
  outline-color: #8020CF;
  box-shadow: none !important;
  color: #202223;
  outline-style: solid;
  outline-width: 1px; }

input[type="checkbox"]:focus,
input[type="radio"]:focus {
  outline: none; }

ul {
  list-style: none; }

.disabled {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.5; }

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

.margin0 {
  margin: 0 !important; }

.sidebar {
  width: 80px;
  float: left;
  height: 100vh;
  background: #555658;
  position: fixed;
  z-index: 8;
  transition: all 0.2s ease-in; }
  .sidebar:before {
    content: "";
    height: 10px;
    background: #f7941d;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; }

.sideBarLogo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 0; }

.h1 {
  color: #fff;
  font-size: 18px;
  font-weight: 300;
  font-family: "Euclid Circular B";
  float: left;
  margin-left: 25px;
  margin-top: 18px; }

.topSearchBtnMobile {
  position: absolute;
  left: 0;
  top: 0;
  height: 60px;
  width: 60px;
  background-image: url(../img/search-icon.png);
  background-position: center;
  background-repeat: no-repeat;
  transition: all 0.2s ease-in;
  cursor: pointer; }
  @media (min-width: 1024px) {
    .topSearchBtnMobile {
      display: none; } }

.topSearch_mobileToggle {
  /* transform: translateY(60px);*/
  transition: all 0.2s ease-in;
  /* button {
      background-color: #e5e7e8;
  }*/ }

.signOut {
  color: #fff;
  font-size: 16px;
  font-family: "Euclid Circular B";
  text-decoration: none;
  margin: 0;
  font-weight: 300;
  float: right;
  text-indent: -999999px;
  width: 45px;
  padding-right: 8px;
  height: 100%; }
  .signOut:hover, .signOut:focus, .signOut:active {
    color: #fff !important; }
  @media (min-width: 1024px) {
    .signOut {
      padding: 1.1em 15px;
      width: initial;
      padding-right: 15px;
      height: initial;
      text-indent: initial; } }
  .signOut img {
    width: 20px;
    float: right;
    margin-top: 20px;
    cursor: pointer; }
    @media (min-width: 1024px) {
      .signOut img {
        margin-top: 3px;
        margin-left: 8px; } }

.dim {
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 14;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease-in; }

.dim-visible {
  opacity: 1;
  visibility: visible;
  transition: all 0.2s ease-in; }

.galleryArea {
  width: 100%;
  float: right;
  margin-left: 80px;
  position: relative;
  margin-top: 0px !important; }
  @media (min-width: 1024px) {
    .galleryArea {
      margin-left: 10px !important;
      margin-bottom: 0 !important; } }

#choochGallery {
  height: auto !important; }
  #choochGallery .galleryImg {
    border: 1px solid #d8d8d8; }
  #choochGallery .modal-content {
    justify-content: center !important; }

.galleryThumbnailWrapper {
  transition: all 0.2s ease-in;
  color: #58595B !important; }
  @media (min-width: 1024px) {
    .galleryThumbnailWrapper:hover .galleryThumbnail {
      filter: brightness(70%); } }

.entry-visible .galleryFileName {
  opacity: 1;
  transition: all 0.2s ease-in; }

.searchGallery {
  float: left; }
  .searchGallery .eachFolder {
    overflow: visible !important;
    padding-top: 40px !important; }
  .searchGallery .selectAndOptions {
    position: relative;
    padding: 26px 2px; }

.galleryOverlay {
  opacity: 0;
  transition: all 0.2s ease-in;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  padding: 8px;
  z-index: 9; }
  .galleryOverlay:hover {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.5); }

.toggleIcon {
  width: 25px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end; }

.galleryTaggedImgWrapper {
  float: left;
  position: relative;
  overflow: hidden; }

.galleryTaggedImg {
  width: 100%;
  float: left; }

.tagsWrapper {
  float: left;
  position: relative;
  z-index: 1;
  transform: translateX(0px);
  transition: 0.3s ease-in all;
  width: 100%; }
  .tagsWrapper .fade:not(.show) {
    opacity: 1 !important; }

.invisibleBtn {
  opacity: 0;
  width: 100%;
  height: 100%;
  top: 0 !important;
  right: 0 !important;
  z-index: 0;
  cursor: default; }

.galleryTags {
  width: 100%;
  float: left; }

.modalImg {
  position: relative;
  z-index: 11;
  max-width: 100%;
  max-height: 465px; }
  @media (min-width: 1400px) {
    .modalImg {
      max-height: 600px;
      float: left;
      position: initial; } }

.invisibleMobile {
  position: absolute !important; }
  @media (min-width: 1024px) {
    .invisibleMobile {
      display: none; } }

@media (min-width: 992px) {
  .modal-lg-portrait {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center; } }

@media (min-width: 992px) {
  .modal-lg-landscape {
    width: 80vw !important;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center; } }

.modal-lg-landscape .modal-content {
  max-height: 600px !important; }

.modal {
  overflow-y: hidden !important;
  display: flex;
  align-items: center;
  justify-content: center; }
  @media (max-width: 480px) {
    .modal {
      padding-right: 0 !important;
      padding-left: 0 !important; } }

.modal-content {
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
  display: flex;
  flex-direction: column !important;
  align-items: flex-start;
  justify-content: flex-start;
  height: auto;
  margin-top: 50px; }
  @media (min-width: 1024px) {
    .modal-content {
      margin-top: 50px;
      flex-direction: row !important; } }

.modal-dialog {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start; }
  @media (min-width: 1200px) {
    .modal-dialog {
      width: auto; } }

/*.closeModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background: rgba(0, 0, 0, 0.3);
    border: 0;

    &:active,
    &:focus {
        outline: 0 !important;
    }
}*/
.sideBarNav {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0; }
  .sideBarNav li {
    list-style-type: none;
    background: #555658;
    height: 80px;
    border-bottom: 1px solid #2f2f31;
    font-family: "Roboto";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; }
    .sideBarNav li span {
      margin-top: 5px; }
    .sideBarNav li img {
      width: 25px; }
    .sideBarNav li a {
      padding-top: 11px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      text-decoration: none;
      color: #fff;
      flex-direction: column;
      font-weight: 300;
      transition: all 0.2s ease-in;
      font-size: 13px; }
      @media (min-width: 1024px) {
        .sideBarNav li a {
          font-size: 14px;
          padding-top: 20px;
          color: #fff; } }
      .sideBarNav li a:focus {
        color: #fff !important; }

.navbar_active {
  background: #383838 !important; }

.modalImgWrapper {
  position: relative;
  z-index: 9;
  text-align: center; }

@media (max-width: 1024px) {
  #myModal .modal-lg {
    margin: 0;
    padding: 8px;
    width: 100% !important;
    max-width: 100% !important; } }

.hideTags {
  height: 35px;
  width: 20px;
  background: #f7941d;
  color: #fff;
  position: absolute;
  top: 0;
  right: -20px;
  display: none; }
  @media (min-width: 1024px) {
    .hideTags {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff !important; } }
  .hideTags img {
    width: 7px; }

.hideTags-hide {
  transform: translateX(-200px);
  transition: 0.3s ease-in all; }
  .hideTags-hide ul {
    display: none; }
  .hideTags-hide .tags {
    visibility: hidden; }

.arrow-flip {
  transform: rotate(180deg); }

/*.publishWrapper {
    width: calc(100% - 20px);
    float: left;
}*/
.publishTitle {
  width: 100%;
  color: #595959;
  font-family: "Roboto";
  float: left;
  clear: both;
  font-size: 18px;
  margin: 0px; }

.folders {
  width: 100%;
  padding: 0;
  margin: 15px 0 0 0;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap; }
  .folders > li {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-bottom: 25px;
    margin-right: 25px;
    position: relative; }
    @media (max-width: 768px) {
      .folders > li {
        width: 100%;
        justify-content: flex-start;
        margin-right: 0;
        margin-bottom: 15px; } }
    @media (min-width: 1024px) {
      .folders > li {
        margin-bottom: 15px; } }
    .folders > li .selectAndOptions {
      position: relative;
      float: none;
      width: 100%;
      position: absolute;
      margin: 0; }
      .folders > li .selectAndOptions .arrow {
        transform: rotate(90deg);
        right: -10px;
        left: auto;
        top: 14px; }
  .folders .dropdown-menu {
    transform: none !important;
    right: 40px !important;
    left: auto !important;
    min-width: auto;
    width: 80px;
    border-radius: 10px !important;
    margin-top: -22px; }
  .folders .dropdown-item {
    padding: 0 !important;
    text-align: center;
    cursor: pointer;
    width: 55px;
    height: 47px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ECECEC !important;
    border-radius: 13px 0 0 13px;
    margin-right: 5px; }

.publishGalleryWrapper {
  float: left;
  width: 100%;
  margin-top: 10px;
  height: 100%; }

.publishGallery {
  overflow: visible !important;
  margin-left: -20px;
  margin-top: 30px; }
  .publishGallery > div {
    overflow: visible !important; }

.publishGalleryImg {
  max-height: 200px;
  border: 2px solid transparent !important; }

.eachPublishGalleryItem {
  padding-top: 33px !important; }

.publishGallerySelect {
  margin-top: -28px;
  margin-bottom: 0; }

.publishImgTitle {
  font-family: "Roboto";
  position: absolute;
  bottom: -10px;
  color: #fff;
  font-weight: 300;
  width: 100%;
  text-align: center;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-height: 20px;
  max-height: 20px; }

.publishUploadWrapper {
  float: left;
  width: 100%;
  max-width: 220px; }

.publishGallery .eachFolder-selected img {
  border-color: #fff !important; }

.eachFolder .folderIcon {
  margin-right: 10px; }

.settingsWrapper {
  margin-bottom: 30px;
  max-width: 1030px;
  margin: 0 auto;
  padding: 40px 15px 0; }
  .settingsWrapper #pswd_info {
    z-index: 99; }
    @media (max-width: 768px) {
      .settingsWrapper #pswd_info {
        padding: 7px 15px;
        bottom: -182px;
        left: 0 !important; } }
  .settingsWrapper .settingsContainer {
    background: #FFFFFF;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    width: 100%;
    padding: 40px 0; }

.ftpWrapper {
  background: #555658;
  border-radius: 10px;
  padding: 13px;
  width: 100%;
  float: left;
  position: relative; }
  .ftpWrapper ul {
    padding-left: 0;
    margin-left: 20px;
    margin-bottom: 0; }
    .ftpWrapper ul li {
      list-style-type: none;
      font-family: "Roboto";
      color: #c0c1c1;
      display: flex;
      font-weight: 500;
      align-items: center;
      position: relative;
      margin-bottom: 15px; }
      .ftpWrapper ul li:last-of-type {
        margin-bottom: 0; }
      .ftpWrapper ul li p {
        float: left;
        margin-right: 15px;
        position: relative;
        margin: 0;
        font-weight: 500; }
      .ftpWrapper ul li span {
        color: #fff;
        float: left;
        font-weight: 500; }

.apiWrapper {
  background: #555658;
  border-radius: 10px;
  padding: 15px;
  width: 100%;
  float: left;
  position: relative;
  margin-top: 30px; }
  .apiWrapper ul {
    padding-left: 0;
    margin-left: 20px;
    margin-bottom: 0; }
    .apiWrapper ul li {
      list-style-type: none;
      font-family: "Roboto";
      color: #c0c1c1;
      font-weight: 500;
      display: flex;
      align-items: center;
      position: relative;
      margin-bottom: 15px; }
      .apiWrapper ul li:last-of-type {
        margin-bottom: 0; }
      .apiWrapper ul li p {
        float: left;
        font-weight: 500;
        margin: 0; }
      .apiWrapper ul li span {
        color: #fff;
        float: left; }

.settings_forgotPw {
  font-family: "Roboto";
  color: #e0e0e0;
  font-weight: 500;
  font-size: 14px;
  text-decoration: underline;
  transition: all 0.2s ease-in; }
  .settings_forgotPw:hover {
    text-decoration: underline !important;
    color: #c0c1c1; }

.changePwWrapper {
  border-radius: 10px;
  width: 100%;
  position: relative;
  margin: 0 auto;
  max-width: 460px; }
  .changePwWrapper #pswd_info {
    clear: both;
    padding: 20px 10px; }
    .changePwWrapper #pswd_info h4 {
      color: #4A4A4A;
      font-size: 20px; }
    .changePwWrapper #pswd_info ul {
      list-style: none;
      margin: 0;
      padding: 0;
      color: #4A4A4A; }
  .changePwWrapper .fyp {
    display: flex;
    justify-content: space-between;
    align-items: center; }
    .changePwWrapper .fyp a {
      color: #F7941D; }
  .changePwWrapper form {
    width: 100%;
    font-family: "Roboto";
    margin-bottom: 0; }
    .changePwWrapper form .form-group {
      margin-bottom: 15px;
      position: relative;
      height: 80px; }
      .changePwWrapper form .form-group label {
        font-size: 14px;
        line-height: 16px;
        color: #9B9B9B;
        position: absolute;
        margin: 0;
        padding: 0 10px;
        background: #fff;
        top: -10px;
        left: 30px;
        z-index: 2; }
      .changePwWrapper form .form-group .iconKey {
        position: absolute;
        left: 12px;
        top: 15px; }
    .changePwWrapper form p {
      font-weight: 500;
      color: #c0c1c1; }
    .changePwWrapper form input[type="password"],
    .changePwWrapper form input[type="text"] {
      width: 100%;
      height: 52px;
      background: #fff;
      padding: 0 20px;
      border: 0;
      font-weight: 400;
      font-family: "Roboto";
      border-radius: 30px;
      border: 1px solid #9B9B9B;
      border-radius: 26px; }
      .changePwWrapper form input[type="password"]::-webkit-input-placeholder,
      .changePwWrapper form input[type="text"]::-webkit-input-placeholder {
        /* Chrome/Opera/Safari */
        color: rgba(0, 0, 0, 0.6);
        transition: 0.2s ease-in all; }
      .changePwWrapper form input[type="password"]::-moz-placeholder,
      .changePwWrapper form input[type="text"]::-moz-placeholder {
        /* Firefox 19+ */
        transition: 0.2s ease-in all;
        color: #000; }
      .changePwWrapper form input[type="password"]:-ms-input-placeholder,
      .changePwWrapper form input[type="text"]:-ms-input-placeholder {
        /* IE 10+ */
        transition: 0.2s ease-in all;
        color: rgba(0, 0, 0, 0.6); }
      .changePwWrapper form input[type="password"]:-moz-placeholder,
      .changePwWrapper form input[type="text"]:-moz-placeholder {
        /* Firefox 18- */
        transition: 0.2s ease-in all;
        color: rgba(0, 0, 0, 0.6); }
    .changePwWrapper form input[type="submit"] {
      padding: 10px 40px;
      font-family: "Roboto";
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 400;
      border-radius: 30px;
      transition: all 0.2s ease-in;
      cursor: pointer; }

@media (max-width: 967px) {
  .settingsWrapper .settingsContainer {
    padding-left: 20px;
    padding-right: 20px; }
  .changePwWrapper .fyp {
    flex-direction: column; }
    .changePwWrapper .fyp .settings_forgotPw {
      margin-top: 20px; }
  .notFound_wrapper {
    padding-top: 20px !important; } }

.newPw,
.confirmPw,
.currentPw {
  position: relative; }

.pwVisibility,
.pwVisibilityConfirm,
.pwVisibilityCurrent {
  position: absolute;
  top: 10px;
  right: 15px;
  width: 24px;
  height: 24px;
  cursor: pointer;
  pointer-events: all;
  background: url("../img/icon-eye-closed.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain; }

.pwVisibility-on {
  background: url("../img/icon-eye-closed.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  opacity: 0.5; }

.invalid {
  background: url(../img/close-red.svg) no-repeat 0 50%;
  padding-left: 22px;
  line-height: 24px;
  background-size: 12px; }

.valid {
  background: url(../img/check-green.svg) no-repeat 0 50%;
  padding-left: 22px;
  line-height: 24px;
  background-size: 12px; }

.settings_orangeSquare {
  background: #f7941d;
  width: 50px;
  height: 50px;
  font-family: "Roboto";
  font-weight: bold;
  color: #2f2f31;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: -25px;
  top: -15px;
  border-radius: 10px; }
  .settings_orangeSquare img {
    width: 22px; }

.perceptionsWrapper {
  float: left;
  width: 100%;
  max-width: 850px;
  margin-left: 105px;
  margin-top: 30px;
  color: #fff; }

.perceptionsPageWrapper {
  margin-left: 0 !important; }
  @media (min-width: 1024px) {
    .perceptionsPageWrapper {
      margin-left: 30px !important; } }

.perceptionsPageWrapper .eachPerception {
  width: 100%;
  padding: 0 10px; }
  @media (min-width: 1024px) {
    .perceptionsPageWrapper .eachPerception {
      margin-left: 10px;
      padding: initial;
      width: 200px;
      margin-left: initial; } }
  .perceptionsPageWrapper .eachPerception .perceptionBtn span {
    text-transform: lowercase; }
  @media (min-width: 1680px) {
    .perceptionsPageWrapper .eachPerception {
      width: 200px; } }

.eachPerception {
  height: 60px;
  float: left;
  margin-right: 10px;
  margin-bottom: 10px;
  transition: 0.4s ease-in all;
  width: 100%; }
  @media (max-width: 1024px) {
    .eachPerception {
      margin-right: 0 !important; } }
  @media (min-width: 1024px) {
    .eachPerception {
      width: 168px; } }
  @media (min-width: 1400px) {
    .eachPerception {
      width: 185px; } }
  @media (min-width: 1680px) {
    .eachPerception {
      width: 200px; } }
  @media (min-width: 1920px) {
    .eachPerception:nth-child(4n) {
      margin-right: 0; } }
  .eachPerception .multi-collapse {
    position: initial !important;
    left: 0;
    transition: 0.4s ease-in all; }
    @media (min-width: 1024px) {
      .eachPerception .multi-collapse {
        position: absolute !important; } }
  .eachPerception .container {
    height: 100%; }
  .eachPerception .collapse {
    display: block !important;
    transition: 0.4s ease-in all;
    height: 0;
    margin-top: 10px; }
  .eachPerception .collapse.show {
    height: 400px !important;
    transition: 0.4s ease-in all; }

.eachPerception-opened {
  height: 470px;
  transition: 0.4s ease-in all; }

.perceptionsCollapseWrapper {
  float: left;
  width: 100%;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
  padding-bottom: 25px; }
  @media (min-width: 1024px) {
    .perceptionsCollapseWrapper {
      padding-bottom: initial; } }

.perceptionCollapse {
  position: absolute;
  width: 100%;
  background: #555658;
  font-family: "Roboto";
  color: #adadad;
  font-weight: 500;
  max-height: 400px;
  transition: 0.4s ease-in all; }

.perceptionCollapse-disabled {
  background: #3b3c3e;
  transition: 0.4s ease-in all; }
  .perceptionCollapse-disabled .perceptionClassToggle {
    background: #545454 !important; }

.perceptionBtnWrapper {
  background: #555658;
  border: 1px solid #555658;
  height: 60px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: relative; }

.perceptionBtn {
  color: #fff;
  font-family: "Roboto";
  transition: 0.4s ease-in all;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 16px;
  padding-left: 11px;
  font-weight: 500;
  text-transform: initial; }
  .perceptionBtn span {
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 155px; }
  @media (min-width: 1024px) {
    .perceptionBtn:after {
      content: "";
      width: 101%;
      height: 10px;
      position: absolute;
      left: -1px;
      bottom: -11px;
      background: #555658;
      transition: all 0.2s ease-in; } }
  .perceptionBtn:focus, .perceptionBtn:active {
    color: #fff !important; }
  .perceptionBtn:hover {
    color: #fff; }

.perceptionBtn.collapsed:after {
  transition: all 0.2s ease-in;
  height: 0; }

.perceptionBtn-disabled {
  background: #3b3c3e;
  transition: all 0.2s ease-in; }
  .perceptionBtn-disabled .perceptionCollapse {
    background: #3b3c3e; }
  .perceptionBtn-disabled .perceptionBtn {
    color: #89898a;
    transition: all 0.2s ease-in;
    position: relative;
    overflow: hidden; }
    .perceptionBtn-disabled .perceptionBtn:before {
      content: "Waiting for approval";
      position: absolute;
      left: 0px;
      bottom: -60px;
      height: 100%;
      width: 100%;
      background: #c0771d;
      font-family: "Roboto";
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      transition: all 0.2s ease-in;
      text-transform: capitalize; }
    .perceptionBtn-disabled .perceptionBtn:after {
      background: #3b3c3e;
      height: 11px;
      bottom: -11px; }
    .perceptionBtn-disabled .perceptionBtn:focus, .perceptionBtn-disabled .perceptionBtn:active {
      color: #89898a !important; }
    .perceptionBtn-disabled .perceptionBtn:hover {
      color: #89898a; }
    .perceptionBtn-disabled .perceptionBtn:hover:before {
      bottom: 0; }

.perceptionBtn-disabled-noHover {
  background: #3b3c3e;
  transition: all 0.2s ease-in; }
  .perceptionBtn-disabled-noHover .perceptionCollapse {
    background: #3b3c3e; }
  .perceptionBtn-disabled-noHover .perceptionBtn {
    color: #89898a;
    transition: all 0.2s ease-in;
    position: relative;
    overflow: hidden; }
    .perceptionBtn-disabled-noHover .perceptionBtn:after {
      background: #3b3c3e;
      height: 11px;
      bottom: -11px; }
    .perceptionBtn-disabled-noHover .perceptionBtn:focus, .perceptionBtn-disabled-noHover .perceptionBtn:active {
      color: #89898a !important; }
    .perceptionBtn-disabled-noHover .perceptionBtn:hover {
      color: #89898a; }
    .perceptionBtn-disabled-noHover .perceptionBtn:hover:before {
      bottom: 0; }

.perceptionBtn-disabled .perceptionBtn.collapsed:after {
  transition: all 0.2s ease-in;
  height: 0; }

.perceptionActiveToggle {
  width: 10px;
  height: 30px;
  background: #3b3c3e;
  float: right;
  border-radius: 20px;
  right: 11px;
  z-index: 9;
  position: absolute;
  transition: all 0.2s ease-in; }
  .perceptionActiveToggle:before {
    content: "";
    display: block;
    height: 16px;
    width: 10px;
    background: #f7941d;
    border-radius: 20px;
    transform: translateY(0px);
    transition: all 0.2s ease-in; }

.perceptionActiveToggle-disable {
  transition: all 0.2s ease-in;
  background: #2f2f31; }
  .perceptionActiveToggle-disable:before {
    content: "";
    display: block;
    height: 16px;
    width: 10px;
    transform: translateY(14px);
    background: #555658;
    border-radius: 20px;
    transition: all 0.2s ease-in; }

.perceptions_eachClass {
  border-bottom: 1px solid #707072;
  width: 100%;
  float: left;
  position: relative;
  padding: 7px 15px; }
  .perceptions_eachClass span {
    padding: 3px 0;
    float: left;
    font-weight: 300;
    text-transform: lowercase; }

.customScroll {
  opacity: 0; }
  .customScroll .mCSB_dragger_bar {
    background: #707072 !important;
    width: 7px !important; }
  .customScroll .mCSB_draggerRail {
    background: #3b3c3e !important;
    width: 7px !important; }

.perceptionCollapse-disabled .mCSB_draggerRail {
  background: #2f2f31 !important; }

.customScroll.show {
  opacity: 1; }

.perceptionSearch {
  width: 100%;
  max-width: 100%;
  padding-left: 10px;
  padding-right: 10px;
  position: relative;
  z-index: 7;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column; }
  @media (min-width: 1024px) {
    .perceptionSearch {
      max-width: 400px;
      padding-left: initial;
      padding-right: initial;
      display: initial; } }
  .perceptionSearch .searchGoBack {
    float: right !important; }
  .perceptionSearch input {
    border-radius: 4px;
    font-family: "Euclid Circular B";
    color: #222222;
    font-weight: 400;
    padding: 3px 7px 3px 15px;
    width: 100%;
    height: 36px;
    font-size: 14px; }
    .perceptionSearch input:-webkit-autofill {
      background-color: #fff !important;
      transition: background-color 5000s ease-in-out 0s !important;
      -webkit-box-shadow: 0 0 0px 10px #2f2f31 inset !important;
      -webkit-text-fill-color: #fff !important; }
  .perceptionSearch .topSearch {
    margin-left: 0 !important;
    margin-right: 0 !important;
    position: relative !important;
    width: 100% !important;
    top: 0; }
    .perceptionSearch .topSearch .clearSearch {
      height: 36px;
      width: 36px;
      border: 0;
      position: absolute;
      left: auto;
      right: 0;
      top: 0;
      background-color: transparent;
      background-image: url(../img/ch-close-gray.svg);
      background-position: center;
      background-repeat: no-repeat;
      transition: all 0.2s ease-in;
      opacity: 0;
      visibility: hidden;
      transition: all 0.2s ease-in; }
    .perceptionSearch .topSearch:focus-within .clearSearch {
      visibility: visible;
      opacity: 0.6; }
  .perceptionSearch .searchGoBack {
    margin-top: 0; }
  .perceptionSearch h3 {
    font-size: 16px;
    float: left;
    margin: 5px 0;
    font-family: "Euclid Circular B";
    display: flex;
    align-items: center;
    color: #595959; }
    @media (min-width: 1600px) {
      .perceptionSearch h3 {
        font-size: 18px; } }
    @media (max-width: 1024px) {
      .perceptionSearch h3 {
        flex-direction: column; } }
    .perceptionSearch h3 span {
      color: #f7941d;
      max-width: 180px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      display: inline-block;
      margin-left: 8px; }

.perception_enableAllBtn,
.perception_optionsBtn,
.perception_disableAllBtn {
  padding: 10px 20px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Roboto"; }
  @media (min-width: 639px) {
    .perception_enableAllBtn,
    .perception_optionsBtn,
    .perception_disableAllBtn {
      width: auto;
      white-space: nowrap; } }
  @media (max-width: 967px) {
    .perception_enableAllBtn,
    .perception_optionsBtn,
    .perception_disableAllBtn {
      margin-bottom: 10px; } }

.perceptionOptionsWrapper {
  padding: 0;
  display: block;
  margin: 0px auto 12px auto;
  padding: 0;
  width: 100%;
  z-index: 99; }
  @media (min-width: 768px) {
    .perceptionOptionsWrapper {
      width: 140px;
      top: 15px;
      position: absolute;
      right: 20px;
      margin: initial; } }
  .perceptionOptionsWrapper ul {
    padding: 0; }
  .perceptionOptionsWrapper li {
    list-style-type: none;
    width: 140px;
    margin: 0 auto; }
    .perceptionOptionsWrapper li button {
      width: 140px !important;
      background: #f7941d;
      border: 0;
      color: white;
      padding: 10px 20px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: "Roboto"; }

.perceptionsOption.hidden {
  display: none; }

.perceptionsOption {
  padding: 0; }
  .perceptionsOption li {
    list-style-type: none; }
    .perceptionsOption li button {
      background: #af732c;
      border-top: 1px solid #8c5616;
      border-bottom: 1px solid #8c5616; }

.supportWrapper {
  width: 100%;
  min-height: 100%;
  float: left; }

.supportHeaderWrapper {
  float: left;
  padding-left: 95px;
  width: 100%;
  height: 80px;
  background: #262628;
  position: relative; }
  .supportHeaderWrapper div {
    height: 100%;
    align-items: center; }

.faqSearch {
  float: left;
  width: 100%;
  align-items: center;
  display: flex;
  height: 100%; }
  .faqSearch input {
    height: 40px;
    width: 100%;
    background: #2f2f31;
    color: #757575;
    font-family: "Roboto";
    border: 0;
    padding: 0 10px; }
  .faqSearch button {
    height: 40px;
    width: 40px;
    border: 0;
    font-family: "Roboto";
    background-color: #2f2f31;
    background-image: url(../img/search-icon.png);
    background-position: center;
    background-repeat: no-repeat;
    transition: all 0.2s ease-in; }
    .faqSearch button:hover {
      background-color: #fff; }

.faqLabel {
  color: #f7941d;
  font-family: "Roboto";
  font-weight: bold;
  margin: 0;
  height: 100%;
  display: flex;
  align-items: center; }

.contactLabel {
  color: #f7941d;
  font-family: "Roboto";
  font-weight: bold;
  margin: 0;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center; }
  @media (min-width: 1024px) {
    .contactLabel {
      justify-content: flex-start; } }

.faqWrapper {
  width: 100%;
  position: relative;
  padding-bottom: 25px; }
  .faqWrapper .col-xs-12 {
    padding: 0 !important; }
  @media (min-width: 1024px) {
    .faqWrapper .col-lg-5 {
      padding-right: 15px !important;
      padding-left: 15px !important; } }

.eachFaq {
  width: 100%;
  margin-top: 15px; }

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

.faqLine {
  display: none;
  background: #262628;
  width: 1px;
  height: 100%;
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 15px;
  right: 0;
  top: -6px; }

.contactWrapper {
  width: 100%;
  padding: 20px; }
  @media (min-width: 1024px) {
    .contactWrapper {
      padding: initial; } }
  .contactWrapper form {
    width: 100%;
    position: relative; }
  .contactWrapper ul {
    padding: 0;
    clear: both;
    width: 100%;
    margin-bottom: 0; }
    .contactWrapper ul li {
      list-style: none; }
      .contactWrapper ul li p {
        color: #fff;
        font-weight: bold;
        font-size: 14px;
        font-family: "Roboto";
        margin-bottom: 3px; }
      .contactWrapper ul li input[type="text"],
      .contactWrapper ul li input[type="email"] {
        font-size: 14px;
        background: #262628;
        padding: 0 7px;
        height: 30px;
        color: #fff;
        font-family: "Roboto";
        border: 0;
        width: 100%; }
      .contactWrapper ul li select {
        -webkit-appearance: none;
        font-size: 14px;
        background: #262628;
        padding: 0 7px;
        height: 30px;
        color: #fff;
        font-family: "Roboto";
        border: 0;
        width: 100%;
        background-image: url("../img/down-arrow.png");
        background-repeat: no-repeat;
        background-position: 98% 50%;
        background-size: 22px; }
        .contactWrapper ul li select:active, .contactWrapper ul li select:focus {
          color: #fff !important; }
      .contactWrapper ul li select::-ms-expand {
        display: none; }
      .contactWrapper ul li textarea {
        font-size: 14px;
        background: #262628;
        padding: 5px 7px;
        height: 30px;
        color: #fff;
        font-family: "Roboto";
        border: 0;
        width: 100%;
        height: 120px;
        resize: none; }
        .contactWrapper ul li textarea:active, .contactWrapper ul li textarea:focus {
          color: #fff !important;
          outline: 0; }

#contactSend {
  background: #f7941d;
  height: 33px;
  width: 90px;
  font-family: "Roboto";
  display: flex;
  align-items: center;
  justify-content: center;
  color: #262628;
  border: 0;
  font-weight: bold;
  font-size: 17px;
  float: right;
  transition: all 0.2s ease-in; }
  #contactSend:focus, #contactSend:active {
    outline: 0; }
  #contactSend:hover {
    background: #d2801e; }

.contactAddress {
  float: left;
  font-family: "Roboto";
  margin-top: 12px;
  width: 100%; }
  .contactAddress p {
    color: #fff;
    margin-bottom: 0; }
  .contactAddress a {
    color: #fff; }

.notifiyBtn {
  width: 50px;
  height: 50px;
  background: transparent;
  color: #fff;
  font-family: "Roboto";
  position: fixed;
  bottom: 0;
  right: 10px;
  z-index: 9; }
  .notifiyBtn a {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; }
  .notifiyBtn span {
    position: absolute;
    top: 0;
    right: 7px;
    color: #fff;
    font-size: 12px;
    font-weight: bold; }

.notifications {
  position: fixed;
  bottom: 0px;
  right: 35px;
  color: #fff;
  visibility: hidden;
  opacity: 0;
  z-index: 99;
  transition: all 0.2s ease-in; }
  .notifications ul {
    padding-left: 0;
    margin-bottom: 0; }
    .notifications ul li {
      list-style-type: none;
      width: 290px;
      background: #fff;
      position: relative;
      padding: 10px 10px 10px 38px;
      color: #555658;
      font-family: "Roboto";
      margin-top: 20px;
      transition: all 0.2s ease-in;
      display: block;
      border: 1px solid gainsboro; }
      .notifications ul li:after {
        content: "";
        position: absolute;
        right: -1px;
        bottom: -12px;
        background: url(../img/triangle.png);
        width: 13px;
        height: 12px; }
      .notifications ul li h5 {
        font-weight: bold;
        font-size: 15px;
        margin: 0;
        position: relative; }
        .notifications ul li h5:before {
          content: "";
          position: absolute;
          left: -33px;
          background: url(../img/info-icon-2.png) no-repeat;
          width: 27px;
          height: 27px;
          top: -4px; }
      .notifications ul li p {
        font-weight: 300;
        font-size: 14px;
        margin: 5px 0 0 0; }

.notifications-visible {
  visibility: visible;
  opacity: 1;
  transition: all 0.2s ease-in;
  bottom: 60px; }

.notifications-hideThis {
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s ease-in; }

.closeNotify {
  position: absolute;
  top: 5px;
  right: 5px;
  padding: 3px; }

.notifInner {
  float: left;
  width: 100%; }

.navSupport {
  list-style-type: none;
  background: #555658;
  height: 77px;
  width: 80px;
  position: fixed;
  left: 0;
  bottom: 0;
  border-top: 1px solid #2f2f31 !important;
  font-family: "Roboto";
  display: flex;
  align-items: center;
  justify-content: center; }
  @media (min-width: 1024px) {
    .navSupport:hover a {
      color: #fff; } }
  .navSupport span {
    margin-top: 5px; }
  .navSupport img {
    width: 25px; }
  .navSupport a {
    font-weight: 300;
    padding-top: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: #fff;
    flex-direction: column;
    transition: all 0.2s ease-in;
    font-size: 13px; }
    @media (min-width: 1024px) {
      .navSupport a {
        font-size: 14px;
        padding-top: 10px;
        color: #fff; } }
    .navSupport a:focus {
      color: #fff !important; }

.breadCrumb {
  background: transparent !important;
  padding: 0 !important;
  color: #F2E9FA;
  margin-top: 1rem; }
  .breadCrumb a {
    color: #F2E9FA;
    font-size: 14px;
    font-weight: 400; }

.darkBreadCrumb li a {
  color: #535353 !important; }

.darkBreadCrumb li:last-child a {
  color: #303030 !important;
  border-bottom: none !important; }

.foldersBreadCrumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-left: initial;
  margin-bottom: 0;
  margin-top: 0px;
  margin-left: 0px;
  padding-bottom: 0px;
  white-space: nowrap; }
  @media (min-width: 1024px) {
    .foldersBreadCrumb {
      width: auto;
      background: none;
      position: relative; } }
  .foldersBreadCrumb li {
    list-style-type: none;
    position: relative;
    font-size: 16px;
    padding-left: 30px;
    display: flex;
    align-items: center; }
    .foldersBreadCrumb li:before {
      content: "";
      background: url(../img/arrow-small-right-light-gray.svg) center 6px no-repeat;
      background-size: 7px;
      width: 20px;
      height: 20px;
      position: absolute;
      left: 5px;
      top: -1px; }
    .foldersBreadCrumb li:nth-child(1) {
      padding-left: 0; }
      .foldersBreadCrumb li:nth-child(1):before {
        display: none; }
    .foldersBreadCrumb li:last-child {
      max-width: 700px;
      overflow: hidden;
      text-overflow: ellipsis; }
      .foldersBreadCrumb li:last-child a {
        color: #F2E9FA;
        font-weight: 600;
        cursor: auto;
        /*border-bottom: solid 1px #F2E9FA;*/
        font-size: 14px; }
    .foldersBreadCrumb li a {
      text-decoration: none;
      color: #B7B7B7;
      display: inherit; }
    .foldersBreadCrumb li a:not([href]):not([tabindex]):focus,
    .foldersBreadCrumb li a:not([href]):not([tabindex]):hover {
      color: #F2E9FA; }
    .foldersBreadCrumb li .backBtn {
      margin-right: 0;
      opacity: 1;
      height: auto; }
    .foldersBreadCrumb li .backBtn img {
      margin-right: 20px;
      width: 15px;
      display: none; }
      @media (max-width: 480px) {
        .foldersBreadCrumb li .backBtn img {
          margin-right: 0; } }
  .foldersBreadCrumb li.arrowNone {
    margin-left: 0;
    padding-left: 0; }
    .foldersBreadCrumb li.arrowNone:before {
      display: none; }

.publishUploadWrapper .invisibleBtn {
  z-index: 9; }

.signupSuccess {
  font-family: "Roboto";
  color: #3e3e3e;
  font-weight: 500;
  font-size: 19px;
  line-height: 29px; }

.noFileWarn_one {
  font-family: "Roboto";
  font-weight: bold;
  color: #b5b5b5;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  text-align: center;
  margin: 0 auto;
  font-size: 28px; }

.foldersWrapper {
  width: 100%;
  margin-top: 15px; }
  .foldersWrapper h3 {
    font-size: 18px;
    color: #595959;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px; }

.foldersTopBar {
  float: left;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #4a4a4a;
  height: 80px;
  position: relative;
  padding: 33px 20px 10px 20px; }
  @media (min-width: 1024px) {
    .foldersTopBar {
      position: none;
      padding: 10px 25px;
      height: auto; } }

.galleryTopBar {
  float: left;
  width: 100%;
  border-bottom: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px; }

.folderName {
  font-family: "Roboto";
  font-size: 17px;
  margin-top: 0px;
  font-weight: 500;
  margin-bottom: 0;
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 100px;
  max-width: 200px;
  color: #595959;
  height: 47px;
  line-height: 47px;
  padding: 0 10px;
  background: #ECECEC;
  border-radius: 0 13px 13px 0; }

.selectAndOptions {
  width: 100%;
  margin-bottom: 20px; }

.folderSelectbox {
  color: #fff;
  float: left;
  margin: 0;
  font-weight: 300; }
  .folderSelectbox .brand-checkbox-icon {
    background: #fff;
    border-radius: 3px;
    margin: 0; }
    .folderSelectbox .brand-checkbox-icon:after {
      font-size: 12px; }

.eachGalleryItem .selectAndOptions {
  visibility: visible;
  position: relative;
  padding: 26px 2px; }

.eachGalleryItem .selectAndOptions-visible {
  visibility: visible !important; }

.eachGalleryItem-selected .selectAndOptions {
  visibility: visible !important; }

.eachGalleryItem {
  overflow: visible !important;
  padding-top: 10px !important; }
  .eachGalleryItem .galleryThumbnailWrapper img {
    border: 0 !important;
    z-index: 9;
    height: 100%; }

.eachGalleryItem-selected .galleryThumbnailWrapper img {
  border-color: #fff !important; }

@media (min-width: 1024px) {
  .eachGalleryItem:hover > .selectAndOptions {
    visibility: visible; } }

@media (min-width: 1024px) {
  .galleryThumbnailWrapper:hover > .galleryFileName {
    opacity: 1;
    transition: all 0.2s ease-in; } }

.submittedTitle {
  width: 100%;
  color: #fff;
  font-family: "DIN Pro";
  float: left;
  clear: both;
  border-bottom: 1px solid #555658;
  font-size: 18px;
  padding-bottom: 10px; }

.deleteTagBtn {
  width: 15px;
  height: 15px;
  background: #EB5857 url(../img/icon-close-bold.svg) no-repeat center center;
  background-size: 7px;
  position: absolute;
  right: -4px;
  top: -4px;
  border-radius: 50px; }

.deleteTagBtn-active {
  opacity: 1;
  z-index: 9; }

.readonly {
  color: #555658;
  background: #e3e3e3;
  padding: 3px 5px 3px 5px;
  float: left;
  font-weight: 500;
  min-height: 31px;
  font-size: 14px;
  text-decoration: none;
  font-family: "DIN Pro";
  text-transform: lowercase;
  border: 0; }

.readonly-inactive {
  background: #f5f5f5;
  border: 0;
  height: 34px;
  font-size: 14px;
  text-transform: lowercase;
  padding: 0px 10px;
  width: auto;
  border-radius: 60px; }

.tagDeleteWarn {
  position: fixed;
  top: 47px;
  left: 0;
  transition: all 0.2s ease-in;
  width: 100%;
  height: 320px;
  background: rgba(67, 67, 67, 0.29);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: 16px;
  opacity: 0;
  visibility: hidden;
  border-radius: 0 6px 6px 6px; }
  .tagDeleteWarn p {
    color: #595959;
    text-align: center;
    width: 100%; }
  .tagDeleteWarn a {
    padding: 2px 15px;
    font-weight: 300;
    margin: 0 5px; }
  .tagDeleteWarn .innerContainer {
    padding: 30px 10px;
    background: #ffffff;
    border-radius: 12px;
    width: 100%;
    max-width: 280px; }

.tagDeleteWarn-active {
  transition: all 0.2s ease-in;
  visibility: visible;
  opacity: 1; }

.deleteWarnOptions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: end;
  width: 100%; }
  .deleteWarnOptions .delete-false-deep-train {
    background: transparent;
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    color: #303030 !important;
    border: none; }
    .deleteWarnOptions .delete-false-deep-train:focus {
      background: transparent;
      color: #303030 !important; }
  .deleteWarnOptions a[class*='-button'] {
    width: 70px;
    height: 40px;
    font-size: 14px;
    line-height: 16px;
    border-radius: 10px; }

.txt_ {
  min-width: 20px; }

.hide_ {
  display: none;
  white-space: pre; }

.fromUrlLoader {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: none;
  background: rgba(89, 89, 89, 0.64);
  z-index: 99991;
  justify-content: center;
  align-items: center; }

/*
.loaderInner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    width: 120px;
    height: 120px;
    border-radius: 100%;
    background: $white;
    z-index: 9999;
    position: relative;
}
.loaderInner.loaderBig {
  width: 160px;
  height: 160px;
}*/
.newLoadSpinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  width: 120px;
  height: 120px;
  border-radius: 100%;
  z-index: 9999;
  position: relative; }

.newLoadSpinner div {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  animation: circleSpinner 1.2s linear infinite; }

.newLoadSpinner div:nth-child(1) {
  animation-delay: 0s;
  top: 37px;
  left: 66px;
  background: linear-gradient(180deg, #7F26D0 0%, #7244D2 100%); }

.newLoadSpinner div:nth-child(2) {
  animation-delay: -0.1s;
  top: 22px;
  left: 62px;
  background: linear-gradient(180deg, #7F26D0 0%, #7146cd 100%); }

.newLoadSpinner div:nth-child(3) {
  animation-delay: -0.2s;
  top: 11px;
  left: 52px;
  background: linear-gradient(180deg, #753CD1 0%, #6958D3 100%); }

.newLoadSpinner div:nth-child(4) {
  animation-delay: -0.3s;
  top: 7px;
  left: 37px;
  background: linear-gradient(180deg, #6f3ac5 0%, #6958D3 100%); }

.newLoadSpinner div:nth-child(5) {
  animation-delay: -0.4s;
  top: 11px;
  left: 22px;
  background: linear-gradient(180deg, #5D74D4 0%, #5092D6 100%); }

.newLoadSpinner div:nth-child(6) {
  animation-delay: -0.5s;
  top: 22px;
  left: 11px;
  background: linear-gradient(180deg, #41B6D8 0%, #36CFD9 100%); }

.newLoadSpinner div:nth-child(7) {
  animation-delay: -0.6s;
  top: 37px;
  left: 7px;
  background: linear-gradient(180deg, #2FE1DA 0%, #25F8DC 100%); }

.newLoadSpinner div:nth-child(8) {
  animation-delay: -0.7s;
  top: 52px;
  left: 11px;
  background: linear-gradient(180deg, #2EE2DA 0%, #25F8DC 100%); }

.newLoadSpinner div:nth-child(9) {
  animation-delay: -0.8s;
  top: 62px;
  left: 22px;
  background: linear-gradient(180deg, #2EE2DA 0%, #25F8DC 100%); }

.newLoadSpinner div:nth-child(10) {
  animation-delay: -0.9s;
  top: 66px;
  left: 37px;
  background: linear-gradient(180deg, #5C77D5 0%, #538CD6 100%); }

.newLoadSpinner div:nth-child(11) {
  animation-delay: -1s;
  top: 62px;
  left: 52px;
  background: linear-gradient(180deg, #7340D1 0%, #6C52D2 100%); }

.newLoadSpinner div:nth-child(12) {
  animation-delay: -1.1s;
  top: 52px;
  left: 62px;
  background: linear-gradient(180deg, #753CD1 0%, #6958D3 100%); }

@keyframes circleSpinner {
  0%, 20%, 80%, 100% {
    transform: scale(1); }
  50% {
    transform: scale(1.5); } }

.spinnerText {
  position: relative;
  height: 36px;
  left: -15;
  top: calc(50% - 20px);
  font-family: "Euclid Circular B";
  font-style: normal;
  font-weight: 400;
  font-size: 30px;
  line-height: 36px;
  text-align: center;
  color: #352B63;
  margin: 20px 0 0; }

.fromUrlLoader-load {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column; }

.fromUrlLoader-load-dark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: rgba(89, 89, 89, 0.64);
  border-radius: 6px;
  font-family: "Euclid Circular B";
  font-style: normal;
  font-weight: 700;
  font-size: 34px;
  line-height: 36px;
  /* identical to box height, or 106% */
  text-align: center;
  color: #3FECFF; }
  .fromUrlLoader-load-dark .newLoadSpinner p.spinnerText {
    color: #3FECFF; }

.infinitySpinner {
  width: 40px;
  display: none; }
  @media (min-width: 1024px) {
    .infinitySpinner {
      width: 100px; } }

.whiteAbsoluteLoader {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: none;
  background-color: #f1f1f1;
  z-index: 99991; }

.whiteAbsoluteLoaderInner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  width: 180px;
  height: 180px;
  border-radius: 100%;
  z-index: 9999;
  position: relative; }

.whiteAbsoluteLoader-load {
  display: flex;
  align-items: center;
  justify-content: center; }

.cancelLoad {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  width: 95px;
  height: 30px;
  background: #f7941d;
  font-weight: 500;
  font-family: "Roboto";
  border-radius: 22px;
  width: 75px;
  height: 21px;
  position: absolute;
  bottom: -31px;
  font-size: 13px;
  text-align: center;
  line-height: 30px; }
  @media (min-width: 1024px) {
    .cancelLoad {
      width: 95px;
      height: 30px;
      position: initial;
      font-size: initial; } }
  .cancelLoad:hover, .cancelLoad:active, .cancelLoad:focus {
    color: #fff !important; }
  .cancelLoad img {
    width: 10px;
    margin-left: 9px;
    margin-top: 0px; }
    @media (min-width: 1024px) {
      .cancelLoad img {
        width: 12px; } }

.faceTitle {
  color: #fff;
  font-family: "DIN Pro";
  float: left;
  clear: both;
  font-size: 18px;
  margin: 15px 0 0 0;
  font-size: 18px; }

.createdPersonsWrapper {
  float: left;
  width: 800px;
  height: 450px;
  margin-top: 30px; }

.createdPersonsList {
  padding-left: 0;
  margin-bottom: 0;
  float: left;
  width: 100%;
  height: 405px;
  background: #3b3c3e; }

.eachCreatedPerson {
  float: left;
  width: 100%;
  list-style-type: none;
  border-bottom: 1px solid #707072; }
  .eachCreatedPerson a {
    padding: 6px 10px;
    float: left;
    width: 100%;
    font-weight: 300;
    color: #adadad;
    font-family: "Roboto";
    transition: all 0.2s ease-in; }
    .eachCreatedPerson a:hover, .eachCreatedPerson a:active, .eachCreatedPerson a:focus {
      outline: 0;
      color: #adadad !important; }
    .eachCreatedPerson a:hover {
      transition: all 0.2s ease-in;
      opacity: 0.8; }

.customScroll_two .mCSB_dragger_bar {
  background: #707072 !important;
  width: 7px !important; }

.customScroll_two .mCSB_draggerRail {
  background: #1c1c1c !important;
  width: 7px !important; }

.customScroll_two .mCSB_inside > .mCSB_container {
  margin-right: 10px !important; }

.personNameTitle {
  color: #222;
  font-size: 20px;
  padding: 8px;
  font-weight: 600;
  background: #f7941d;
  font-family: "Roboto";
  margin-bottom: 0;
  float: left;
  width: 100%; }

.personSearch {
  float: left;
  width: 100%;
  margin-bottom: 10px; }
  .personSearch input {
    background: transparent;
    font-family: "Roboto";
    color: #fff;
    font-weight: 300;
    font-style: italic;
    border: 0;
    border-bottom: 1px solid #555658;
    padding: 3px 0px;
    width: 100% !important;
    height: 30px;
    font-size: 16px; }
    .personSearch input::-webkit-input-placeholder {
      /* Chrome/Opera/Safari */
      color: #fff; }
    .personSearch input::-moz-placeholder {
      /* Firefox 19+ */
      color: #fff; }
    .personSearch input:-ms-input-placeholder {
      /* IE 10+ */
      color: #fff; }
    .personSearch input:-moz-placeholder {
      /* Firefox 18- */
      color: #fff; }

.personImgTitle {
  color: #fff;
  font-family: "DIN Pro";
  float: left;
  clear: both;
  font-size: 18px;
  margin: 15px 0 0 0;
  font-size: 18px; }

.activePerson a {
  background: #e0e0e0;
  color: #222;
  font-weight: 500; }

.faceRecGalleryWrapper {
  float: left;
  width: 100%;
  max-height: 200px;
  margin-top: 33px; }
  .faceRecGalleryWrapper .galleryArea {
    margin-top: 0; }

.personUploadBtn {
  background: #f7941d;
  color: #fff;
  font-family: "Roboto";
  font-size: 20px;
  font-weight: 500;
  height: 40px;
  text-align: center;
  float: left;
  width: 260px;
  font-weight: 300;
  border: 0; }

.faceRecPerceptionWrapper {
  float: left;
  width: 100%; }
  .faceRecPerceptionWrapper ul {
    margin-top: 25px;
    float: left;
    padding: 0;
    margin-top: 53px;
    margin-bottom: 0;
    width: 100%;
    height: 450px; }
    .faceRecPerceptionWrapper ul li {
      list-style-type: none; }
      .faceRecPerceptionWrapper ul li a {
        color: #fff;
        font-family: "Roboto";
        transition: 0.4s ease-in all;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        padding-left: 0;
        font-weight: 500; }
        .faceRecPerceptionWrapper ul li a:hover, .faceRecPerceptionWrapper ul li a:active, .faceRecPerceptionWrapper ul li a:focus {
          outline: 0;
          color: #fff !important; }
        .faceRecPerceptionWrapper ul li a span {
          text-align: center;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          line-height: 20px;
          max-height: 20px; }

.faceRecListWrapper {
  max-width: 800px; }

.faceRecMainWrapper {
  margin-top: 25px; }

.activeFaceRecPerc .perceptionBtnWrapper {
  background: #333941; }

.topBarContainer .topSearch {
  margin-right: -200px; }
  @media (max-width: 1366px) {
    .topBarContainer .topSearch {
      margin-right: -150px; } }

.topRightSection {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center; }
  .topRightSection .upgradeButton {
    font-weight: 400;
    font-family: "Euclid Circular B";
    font-size: 14px;
    padding: 8px 15px;
    display: inline-flex;
    margin-left: auto;
    color: #303030;
    background: linear-gradient(267.94deg, #48FDE1 -23.98%, #60EFFF 96.66%);
    border-radius: 20px;
    transition: all 0.2s ease-in;
    cursor: pointer;
    box-shadow: none;
    border: none;
    position: relative; }
    .topRightSection .upgradeButton .customTooltip {
      box-shadow: 0px 4px 21px rgba(120, 114, 114, 0.25);
      border-radius: 5px;
      padding: 15px;
      width: 190px;
      border: none;
      right: 0;
      top: 42px;
      white-space: normal;
      text-align: left;
      pointer-events: auto;
      cursor: default;
      font-size: 14px;
      color: #595959; }
      .topRightSection .upgradeButton .customTooltip a {
        color: #0367A6;
        text-decoration: underline; }
        .topRightSection .upgradeButton .customTooltip a:hover, .topRightSection .upgradeButton .customTooltip a:focus {
          color: #0367A6;
          text-decoration: underline !important; }
      .topRightSection .upgradeButton .customTooltip p {
        margin: 0; }
      .topRightSection .upgradeButton .customTooltip h5 {
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 10px;
        color: #FF5630; }
    .topRightSection .upgradeButton:hover .customTooltip {
      visibility: visible;
      opacity: 1; }
    @media (max-width: 967px) {
      .topRightSection .upgradeButton {
        display: none;
        padding-left: 0; } }
  .topRightSection .enterpriseButton {
    font-weight: 400;
    font-size: 16px;
    padding: 8px 15px;
    display: inline-flex;
    margin-left: auto;
    color: #DB5315;
    background-color: #FFEBCE;
    border-radius: 6px;
    transition: all 0.2s ease-in;
    cursor: pointer;
    box-shadow: none;
    border: none; }
    @media (max-width: 967px) {
      .topRightSection .enterpriseButton {
        display: none;
        padding-left: 0; } }
  .topRightSection .devider {
    width: 1px;
    height: 40px;
    background: #fff;
    margin: 0 5px;
    display: inline-flex; }
    @media (max-width: 967px) {
      .topRightSection .devider {
        display: none; } }

.globalNotification {
  font-family: "Euclid Circular B";
  text-align: center;
  width: 52px;
  height: 42px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  border-radius: 7px;
  cursor: pointer; }
  .globalNotification .iconPurple {
    display: none; }
  .globalNotification.notificationAlert {
    background-color: #F7F7F7;
    border-radius: 6px; }
    .globalNotification.notificationAlert .notificationsAlert {
      background-color: #8020CF;
      z-index: 2; }
    .globalNotification.notificationAlert .iconPurple {
      display: block; }
    .globalNotification.notificationAlert .iconGray {
      display: none; }
  .globalNotification p {
    margin: 0;
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center; }
  .globalNotification .notificationsCount {
    width: 16px;
    height: 16px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 3px;
    right: 3px;
    background-color: #138BFA;
    font-size: 10px;
    line-height: 15px;
    color: #FFFFFF;
    border-radius: 50%; }
  .globalNotification .notificationsAlert {
    width: 9px;
    height: 9px;
    position: absolute;
    top: 12px;
    right: 16px;
    border-radius: 50px;
    background: #FF5630;
    border: 2px solid white; }
  .globalNotification .notificationDropdown {
    position: absolute;
    top: 50px;
    right: 0;
    display: none;
    background: #FFFFFF;
    border: 1px solid #F2F1F1;
    box-shadow: 0px 3px 5px rgba(44, 44, 44, 0.2), 0px 0px 1px rgba(44, 44, 44, 0.31);
    border-radius: 5px;
    padding: 24px 0 0;
    border-radius: 5px;
    width: 623px; }
    .globalNotification .notificationDropdown h3 {
      font-size: 18px;
      font-weight: 600;
      color: #210835;
      opacity: 0.5;
      text-align: left;
      padding: 0 20px 25px;
      margin: 0;
      pointer-events: none; }
    .globalNotification .notificationDropdown ul {
      width: 100%;
      overflow: hidden;
      list-style: none;
      text-align: left;
      margin: 0;
      position: relative;
      z-index: 1; }
      .globalNotification .notificationDropdown ul li {
        position: relative;
        border-bottom: 1px solid #E0E0E0;
        color: #210835;
        word-break: break-word;
        padding: 0;
        cursor: auto; }
        .globalNotification .notificationDropdown ul li a {
          font-size: 14px;
          line-height: 20px;
          color: #210835;
          position: relative;
          word-break: break-word;
          font-weight: 400;
          width: auto;
          padding: 0;
          display: inline-flex;
          align-items: center; }
          .globalNotification .notificationDropdown ul li a:hover {
            text-decoration: underline; }
        .globalNotification .notificationDropdown ul li .notificationItem {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%; }
        .globalNotification .notificationDropdown ul li .notificationCloseIcon {
          color: #878787;
          width: 14px !important; }
        .globalNotification .notificationDropdown ul li .time {
          margin-left: auto;
          display: inline-flex;
          align-items: center;
          width: 140px;
          min-width: 140px;
          justify-content: flex-end;
          position: relative;
          padding-right: 25px;
          padding-left: 20px;
          text-align: right; }
          .globalNotification .notificationDropdown ul li .time .indicator {
            border-radius: 10px;
            background-color: transparent;
            width: 8px;
            height: 8px;
            display: inline-block;
            position: absolute;
            right: 5px; }
        .globalNotification .notificationDropdown ul li.unreadNotification {
          background-color: #F7F7F7; }
          .globalNotification .notificationDropdown ul li.unreadNotification .indicator {
            background: #22FCDB; }
      .globalNotification .notificationDropdown ul .apilimitMessage {
        padding: 0;
        border: none;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100px;
        flex-direction: column; }
      .globalNotification .notificationDropdown ul .no_notification_warn {
        border: none;
        color: #9c9c9c;
        height: 100px; }
      .globalNotification .notificationDropdown ul .mCSB_inside > .mCSB_container {
        margin-right: 20px !important; }
    .globalNotification .notificationDropdown .iconArrow {
      display: none;
      align-items: center;
      justify-content: center;
      margin-bottom: -1px; }
      .globalNotification .notificationDropdown .iconArrow img {
        width: 30px; }
  .globalNotification .clearAll {
    font-size: 14px;
    color: #303030;
    font-weight: 400; }
  .globalNotification .notificationTabs {
    position: relative;
    overflow: hidden; }
    .globalNotification .notificationTabs:after {
      width: 1px;
      height: 100%;
      background: #E0E0E0;
      position: absolute;
      top: 30px;
      right: 20px;
      content: ''; }
    .globalNotification .notificationTabs .tabs {
      display: flex;
      width: 100%;
      border-bottom: 1px solid #E0E0E0;
      min-height: auto;
      max-height: none;
      height: auto; }
      .globalNotification .notificationTabs .tabs li {
        display: inline-flex;
        font-size: 14px;
        font-weight: 400;
        color: #303030;
        padding: 2px 30px;
        border-bottom: solid 4px transparent;
        cursor: pointer;
        border-right: none; }
        .globalNotification .notificationTabs .tabs li.current {
          color: #8020CF;
          font-weight: 600;
          border-bottom-color: #8020CF; }
        .globalNotification .notificationTabs .tabs li span {
          margin-left: 2px; }
        .globalNotification .notificationTabs .tabs li.clearNotification {
          margin-left: auto; }
    .globalNotification .notificationTabs .tab-content {
      display: none;
      padding-top: 23px;
      padding-bottom: 20px;
      position: relative; }
      .globalNotification .notificationTabs .tab-content.current {
        display: inherit; }
      .globalNotification .notificationTabs .tab-content h5 {
        color: #210835;
        opacity: 0.5;
        padding: 0 20px 10px;
        text-align: left;
        margin-bottom: 0;
        text-transform: uppercase;
        font-size: 16px;
        font-weight: 600; }
      .globalNotification .notificationTabs .tab-content .mCustomScrollbar {
        max-height: 350px; }
      .globalNotification .notificationTabs .tab-content ul {
        margin-bottom: 30px; }
        .globalNotification .notificationTabs .tab-content ul li {
          padding: 0 20px;
          height: 70px;
          display: flex; }
      .globalNotification .notificationTabs .tab-content .loaderGif {
        position: absolute;
        bottom: -130px;
        left: 0;
        right: 0;
        margin: 0 auto; }

.closeGlobalNotification {
  position: absolute;
  right: 50px;
  top: 18px; }
  .closeGlobalNotification img {
    width: 22px; }

.globalNotification-active {
  visibility: visible;
  display: block;
  opacity: 1;
  transition: all 0.2s ease-in; }

.searchResultsTitle {
  width: 100%;
  font-family: "DIN Pro";
  float: left;
  clear: both;
  margin: 0;
  border-bottom: 1px solid #555658;
  background: #4a4a4a;
  width: calc(100% - 0px);
  margin-left: 0px;
  padding: 10px 25px; }
  .searchResultsTitle h3 {
    color: #fff;
    font-size: 18px;
    float: left;
    margin: 5px 0; }
    @media (min-width: 1024px) {
      .searchResultsTitle h3 {
        font-size: 20px; } }
    .searchResultsTitle h3 span {
      color: #f7941d; }

.searchGoBack {
  float: left;
  background: #f7941d;
  color: #fff;
  padding: 2px 13px;
  clear: both;
  border-radius: 3px;
  transition: all 0.2s ease-in;
  margin-top: 2px; }
  @media (min-width: 1024px) {
    .searchGoBack {
      margin-left: 50px;
      padding: 2px 13px;
      clear: none;
      margin-top: initial; } }
  .searchGoBack:hover {
    color: #fff;
    opacity: 0.8; }
  .searchGoBack:focus, .searchGoBack:active {
    color: #fff !important; }
  .searchGoBack img {
    width: 15px;
    transform: rotate(180deg);
    margin-top: -2px;
    margin-right: 5px; }

.searchResultImg img {
  border: 2px solid transparent !important; }

.searchResultImgName {
  display: none;
  color: #fff;
  font-family: "Roboto";
  color: #fff;
  font-size: 16px;
  margin-top: 15px;
  font-weight: 300;
  text-align: center;
  margin-bottom: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1; }

.eachSearchResultElement {
  height: 185px !important;
  justify-content: flex-end !important;
  margin-right: 25px !important;
  margin-bottom: 20px !important; }
  .eachSearchResultElement .selectAndOptions {
    padding: 15px 0;
    margin-bottom: 0; }
    .eachSearchResultElement .selectAndOptions:hover {
      visibility: visible; }

.searchResultsUl {
  margin-top: 55px; }

.eachFolder-selected-share {
  background: transparent !important; }

.searchWarn {
  position: fixed !important; }

.eachFolder-selected-search img {
  border-color: #fff !important; }

.foldersSearchRslt {
  margin-left: 20px; }

.fqLabelWrap {
  padding-left: 0 !important;
  display: none; }
  @media (min-width: 1024px) {
    .fqLabelWrap {
      display: block; } }

.trainOr {
  float: left;
  width: 100%;
  text-align: center;
  color: #fff;
  position: relative;
  font-weight: bold;
  margin-top: 15px;
  margin-bottom: 15px; }
  .trainOr:before {
    content: "";
    width: 42%;
    height: 1px;
    background: #fff;
    position: absolute;
    left: 0;
    top: 50%; }
  .trainOr:after {
    content: "";
    width: 42%;
    height: 1px;
    background: #fff;
    position: absolute;
    right: 0;
    top: 50%; }

.chooseZip {
  background: #d8d5d2;
  float: right;
  height: 40px;
  padding: 0 10px;
  font-family: "Roboto";
  font-weight: bold;
  color: #2f2f31;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  font-weight: 500;
  transition: all 0.2s ease-in;
  font-size: 18px;
  margin-top: 15px; }
  @media (min-width: 768px) {
    .chooseZip {
      margin-top: initial; } }
  .chooseZip:active, .chooseZip:focus {
    color: #2f2f31 !important; }

.uploadZipLbl {
  float: left;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #484848;
  margin-top: 25px;
  flex-direction: column;
  padding: 15px; }
  @media (min-width: 768px) {
    .uploadZipLbl {
      flex-direction: row;
      padding: 0 0 0 10px; } }
  .uploadZipLbl label {
    margin: 0 !important; }

#chooseZipFile,
#ChooseFile {
  display: none; }

.shareImgWrapper {
  width: 100%;
  background: #ffffff;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  border-radius: 10px;
  background-color: #ffffff;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1); }

.sharedImg {
  width: 100%;
  display: block;
  margin: 0 auto; }

.shareWrapper {
  width: 100%;
  display: flex;
  margin: 0 auto;
  flex-direction: row;
  align-items: flex-start; }
  .shareWrapper .shareTagWrapperArea {
    height: 100%; }
    @media (max-width: 768px) {
      .shareWrapper .shareTagWrapperArea {
        max-width: 100%;
        height: auto; } }
  @media (max-width: 768px) {
    .shareWrapper {
      flex-direction: column; } }
  .shareWrapper .shareTagWrapper {
    padding: 10px;
    background-color: #ffffff;
    border-radius: 10px;
    height: 100%; }
    @media (max-width: 768px) {
      .shareWrapper .shareTagWrapper {
        margin-top: 20px;
        min-height: 100px;
        max-height: 300px; } }

.tagsShare {
  position: absolute;
  overflow: hidden;
  padding: 0;
  margin: 0;
  width: 82%;
  min-height: 330px;
  height: 94%; }
  @media (max-width: 768px) {
    .tagsShare {
      min-height: 100px;
      max-height: 200px;
      position: relative;
      width: 100%; } }
  .tagsShare .mCSB_inside > .mCSB_container {
    margin-right: 20px !important; }
  .tagsShare li {
    list-style-type: none;
    float: left;
    position: relative;
    list-style-type: none;
    margin-right: 9px;
    margin-bottom: 9px; }
    .tagsShare li span {
      color: #4A4A4A;
      background: #F6F7FB;
      border-radius: 17px;
      padding: 5px 10px;
      float: left;
      font-weight: 500;
      min-height: 30px;
      font-size: 14px;
      text-decoration: none;
      font-family: "Roboto";
      word-wrap: break-word; }

.shareImgBtn {
  background: #f7941d;
  color: #fff;
  font-family: "Roboto";
  font-size: 20px;
  font-weight: 500;
  height: 40px;
  text-align: center;
  float: left;
  width: 100%;
  font-weight: 300;
  border: 0;
  margin-top: 5px; }

.shareLeftArea {
  align-items: center;
  justify-content: center;
  display: flex; }
  @media (max-width: 768px) {
    .shareLeftArea {
      max-width: 100% !important; } }

.shareDirectLink {
  width: 100%;
  position: relative;
  font-family: "Roboto"; }
  .shareDirectLink input {
    height: 40px;
    background: #F6F7FB;
    border-radius: 10px;
    padding: 0 10px;
    color: #58595B;
    border: 0;
    font-weight: 300;
    font-size: 12px;
    font-family: "Roboto"; }
  .shareDirectLink p {
    font-weight: 500;
    color: #58595B;
    margin: 5px 0; }

.copy_share {
  float: right;
  border-radius: 25px;
  width: 88px;
  height: 32px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
  cursor: pointer; }
  .copy_share img {
    width: 20px;
    margin-top: 2px; }
  .copy_share span {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    margin-left: 4px; }

#fbShareBtn,
#twitter-widget-0 {
  margin-top: 12px; }

@media (max-width: 1024px) {
  #fbShareBtn {
    display: inline-block !important; } }

#twitter-widget-0 {
  margin-left: 8px; }

.copyWarn_ {
  font-family: "Roboto";
  color: greenyellow;
  font-size: 16px;
  font-weight: 500;
  font-family: "DIN Pro";
  color: #f7941d;
  font-size: 14px;
  font-weight: 300;
  position: absolute;
  top: 9px;
  right: 0; }

.shareFooter {
  width: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4c4c4c;
  font-size: 14px;
  position: absolute;
  bottom: 0; }

.folderWarn {
  top: 65% !important; }

.fileWarn {
  top: 5% !important; }

.newTagInput input {
  max-width: 150px !important; }

.bigNotification {
  position: absolute;
  z-index: 9910;
  top: 0;
  left: 0;
  transition: all 0.2s ease-in;
  transform: translateX(0px);
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  padding: 0 15px;
  font-size: 21px;
  text-align: center; }
  @media (min-width: 768px) {
    .bigNotification {
      justify-content: center; } }
  .bigNotification p {
    color: #58595B;
    font-size: 18px;
    font-weight: 500; }

.bigNotification_inner {
  position: relative;
  text-align: center;
  font-size: 21px;
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  max-width: 400px;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center; }
  @media (min-width: 768px) {
    .bigNotification_inner {
      max-width: 400px;
      margin-top: initial; } }
  .bigNotification_inner .bn_tick {
    width: 35px;
    margin-bottom: 10px;
    margin-top: 20px; }

.bigNotification_inner_close {
  position: relative;
  text-align: center;
  font-size: 21px;
  background: #ffffff;
  padding: 20px;
  width: 400px;
  height: 200px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 10px; }
  .bigNotification_inner_close .bn_tick {
    width: 35px;
    margin-bottom: 10px; }

.closeBigNotification {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  font-family: "Roboto";
  font-weight: bold;
  font-size: 22px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center; }

.trainingTitle {
  width: 100%;
  color: #fff;
  font-family: "Roboto";
  float: left;
  clear: both;
  border-bottom: 1px solid #555658;
  font-size: 18px;
  padding-bottom: 10px; }

.trainingAreaWrapper {
  float: left;
  width: 100%;
  font-family: "Roboto";
  color: #fff;
  margin-top: 30px; }
  .trainingAreaWrapper h1 {
    font-size: 40px;
    width: 100%;
    max-width: 600px;
    float: left;
    margin-bottom: 25px;
    position: relative;
    margin-bottom: 30px;
    position: relative;
    margin-top: 10px; }
    .trainingAreaWrapper h1 button {
      top: 4px;
      border-radius: 0 !important; }
  .trainingAreaWrapper h2 {
    font-size: 30px; }
  .trainingAreaWrapper h5 {
    clear: both;
    font-size: 12px;
    float: left;
    max-width: 500px;
    margin-top: 30px;
    font-weight: 300;
    letter-spacing: 0.5px;
    line-height: 17px;
    padding-bottom: 10px; }
    .trainingAreaWrapper h5 b {
      font-weight: 900; }

.trainArea form {
  width: 100%;
  float: left;
  padding: 0px 15px; }

.trainArea {
  float: left;
  width: 100%;
  max-width: 600px;
  background: #373737;
  position: relative;
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center; }
  .trainArea label {
    color: #f7941d;
    font-size: 22px;
    margin-top: 15px; }
  .trainArea h4 {
    background: #f7941d;
    text-align: center;
    float: left;
    width: 49%;
    font-size: 18px;
    margin-bottom: 0;
    margin-top: 45px;
    transition: all 0.2s ease-in; }
    .trainArea h4:nth-of-type(2) {
      margin-left: 10px; }
    .trainArea h4:hover {
      background: #c97a36; }
    .trainArea h4 a {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px;
      color: #fff; }
      .trainArea h4 a:active, .trainArea h4 a:focus {
        color: #fff !important; }

.trainByTrigger-active {
  background: #c97a36 !important; }

.trainType {
  float: left;
  width: 100%;
  padding: 15px;
  background: #6f6557;
  position: relative; }
  .trainType h2 {
    text-align: center;
    margin-bottom: 0;
    font-size: 26px;
    background: #525252;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 9px 0;
    line-height: 28px; }

.trainName {
  width: 100%;
  height: 40px;
  background: #484848;
  padding: 0 5px;
  color: #fff;
  border: 0;
  font-weight: 500; }

.trainClasses {
  width: 100%;
  height: 40px;
  background: #484848;
  padding: 8px;
  color: #fff;
  border: 0;
  font-weight: 300;
  height: 330px;
  resize: none; }
  .trainClasses:focus {
    outline: 0; }

.submittedPerceptionsWrapper {
  float: left;
  width: 100%;
  margin-top: 50px; }
  .submittedPerceptionsWrapper .perceptionBtnWrapper {
    width: 100% !important; }
    .submittedPerceptionsWrapper .perceptionBtnWrapper span {
      text-align: center !important; }

.trainSection-6 p {
  font-size: 25px;
  font-weight: bold; }

.trainSection-6 span {
  color: #dadada;
  margin: 10px 0;
  float: left; }

.trainSection-6 i {
  font-style: normal;
  color: white; }

.submitTrain {
  background: #f7941d;
  float: right;
  height: 40px;
  padding: 0 10px;
  font-family: "Roboto";
  font-weight: bold;
  color: #2f2f31;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  font-weight: 600;
  transition: all 0.2s ease-in;
  width: 170px;
  font-size: 22px;
  float: none;
  margin: 20px auto 0 auto;
  cursor: pointer; }
  .submitTrain:hover {
    background: #d8d5d2; }

.submittedPerceptionsArea {
  float: left;
  width: 100%;
  padding-left: 0;
  padding-bottom: 50px;
  margin-top: 25px; }

.submittedPerceptionBtn {
  background: #555658;
  border: 1px solid #555658;
  height: 60px;
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: relative;
  float: left;
  margin-right: 10px;
  margin-bottom: 10px; }
  .submittedPerceptionBtn a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #fff;
    transition: all 0.2s ease-in;
    font-weight: 500; }
    .submittedPerceptionBtn a:hover {
      color: #89898a;
      background: #3b3c3e; }
    .submittedPerceptionBtn a span {
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      line-height: 20px;
      max-height: 20px; }

.submittedPerceptionsWrapper {
  margin-left: 0 !important;
  margin-top: 30px !important; }
  .submittedPerceptionsWrapper .perceptionBtn {
    justify-content: center !important;
    padding-left: 0 !important; }

.trainSection {
  visibility: hidden;
  opacity: 0;
  display: none !important;
  top: 0;
  left: 0;
  width: 100%;
  transition: all 0.2s ease-in; }

.trainSection-active {
  opacity: 1 !important;
  visibility: visible !important;
  transition: all 0.2s ease-in;
  display: block !important; }

.trainSection-1,
.trainSection-2,
.trainSection-3,
.trainSection-9 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column; }
  .trainSection-1 label,
  .trainSection-2 label,
  .trainSection-3 label,
  .trainSection-9 label {
    margin: 0 !important;
    font-size: 18px !important; }
    @media (min-width: 1024px) {
      .trainSection-1 label,
      .trainSection-2 label,
      .trainSection-3 label,
      .trainSection-9 label {
        font-size: 22px !important; } }

.trainYesNo {
  margin-top: 20px; }
  .trainYesNo a {
    border: 1px solid #f7941d;
    color: #fff;
    padding: 5px 35px;
    margin: 0 10px;
    transition: all 0.2s ease-in; }
    .trainYesNo a:hover {
      background: #f7941d;
      color: #fff; }
    .trainYesNo a:focus, .trainYesNo a:active {
      color: #fff !important; }

.next_1 {
  border: 1px solid #f7941d;
  color: #fff;
  padding: 5px 35px;
  margin: 0 10px;
  transition: all 0.2s ease-in;
  float: right;
  margin-right: 0;
  margin-top: 10px; }
  .next_1:hover {
    background: #f7941d;
    color: #fff; }
  .next_1:focus, .next_1:active {
    color: #fff !important; }

.next_2 {
  border: 1px solid #f7941d;
  color: #fff;
  padding: 5px 35px;
  margin: 0 10px;
  transition: all 0.2s ease-in;
  float: right;
  margin-right: 0;
  margin-top: 10px; }
  .next_2:hover {
    background: #f7941d;
    color: #fff; }
  .next_2:focus, .next_2:active {
    color: #fff !important; }

.next_3 {
  border: 1px solid #f7941d;
  color: #fff;
  padding: 5px 35px;
  margin: 0 10px;
  transition: all 0.2s ease-in;
  float: right;
  margin-right: 0;
  margin-top: 10px; }
  .next_3:hover {
    background: #f7941d;
    color: #fff; }
  .next_3:focus, .next_3:active {
    color: #fff !important; }

.next_4 {
  border: 1px solid #f7941d;
  color: #fff;
  padding: 5px 35px;
  margin: 0 10px;
  transition: all 0.2s ease-in;
  float: right;
  margin-right: 0;
  margin-top: 10px; }
  .next_4:hover {
    background: #f7941d;
    color: #fff; }
  .next_4:focus, .next_4:active {
    color: #fff !important; }

.next_5 {
  border: 1px solid #f7941d;
  color: #fff;
  padding: 5px 35px;
  margin: 0 10px;
  transition: all 0.2s ease-in;
  float: right;
  margin-right: 0;
  margin-top: 10px; }
  .next_5:hover {
    background: #f7941d;
    color: #fff; }
  .next_5:focus, .next_5:active {
    color: #fff !important; }

.trainSection-5 {
  padding: 0 15px;
  background: #373737;
  text-align: left !important;
  overflow: hidden;
  position: relative; }

.trainSection-7,
.trainSection-4 {
  text-align: left !important; }

.trainSection-4 {
  position: relative;
  overflow: hidden;
  min-height: 166px; }

.trainTooltip {
  background: #656565;
  position: absolute;
  top: 0;
  right: 0;
  border: 0;
  padding: 8px 9px;
  border-bottom-left-radius: 24px;
  display: flex;
  align-items: center;
  font-family: "Roboto"; }

.tooltip {
  opacity: 1 !important; }
  .tooltip .arrow:before {
    border-right-color: #656565;
    border-bottom-color: #656565; }

.tooltip-inner {
  font-family: "Roboto";
  background: #656565 !important;
  max-width: 300px !important;
  text-align: left !important; }

.prev_1,
.prev_2,
.prev_3,
.prev_4,
.prev_5 {
  border: 1px solid #f7941d;
  color: #fff;
  padding: 5px 35px;
  margin: 0 10px;
  transition: all 0.2s ease-in;
  float: left;
  margin-left: 0;
  margin-top: 10px; }
  .prev_1:hover,
  .prev_2:hover,
  .prev_3:hover,
  .prev_4:hover,
  .prev_5:hover {
    background: #f7941d;
    color: #fff; }
  .prev_1:focus, .prev_1:active,
  .prev_2:focus,
  .prev_2:active,
  .prev_3:focus,
  .prev_3:active,
  .prev_4:focus,
  .prev_4:active,
  .prev_5:focus,
  .prev_5:active {
    color: #fff !important; }

.prev_6,
.prev_7 {
  position: absolute;
  bottom: 10px;
  left: 10px;
  border: 1px solid #f7941d;
  color: #fff;
  padding: 5px 35px;
  margin: 0 10px;
  transition: all 0.2s ease-in;
  float: left;
  margin-left: 0;
  margin-top: 10px; }
  .prev_6:hover,
  .prev_7:hover {
    background: #f7941d;
    color: #fff; }
  .prev_6:focus, .prev_6:active,
  .prev_7:focus,
  .prev_7:active {
    color: #fff !important; }

#renew_password_form .pwVisibility,
#renew_password_form .pwVisibilityConfirm,
#renew_password_form .pwVisibilityCurrent {
  top: 14px;
  right: 20px; }

.fakeClick {
  height: 35px;
  float: right;
  width: 186px;
  position: absolute;
  right: 35px;
  cursor: pointer; }

.fakeClick_signUp {
  float: right;
  width: 100%;
  left: 0;
  top: 0;
  position: absolute;
  right: 35px;
  bottom: 44px;
  cursor: pointer; }

.forgotPwWrapper {
  max-width: 890px;
  position: relative;
  margin: 0 auto; }
  .forgotPwWrapper img {
    width: 280px !important;
    margin-bottom: 50px;
    margin-left: 305px; }
  .forgotPwWrapper .forgotPwContainer {
    background: #FFFFFF;
    width: 100%; }
    .forgotPwWrapper .forgotPwContainer img {
      width: 240px;
      margin-bottom: 50px; }
  .forgotPwWrapper .passwordInfo {
    padding: 50px 0; }
    .forgotPwWrapper .passwordInfo h4 {
      font-size: 16px;
      color: #535353; }
    .forgotPwWrapper .passwordInfo ul {
      padding: 0;
      margin: 0;
      list-style: none;
      color: #535353; }
  .forgotPwWrapper .form-group {
    position: relative;
    height: 80px; }
    .forgotPwWrapper .form-group .iconKey {
      position: absolute;
      left: 12px;
      top: 15px; }
    .forgotPwWrapper .form-group label {
      font-weight: 500;
      font-size: 14px;
      line-height: 36px;
      color: #210835;
      margin-bottom: 0 !important; }
    .forgotPwWrapper .form-group .form-control {
      width: 100%;
      height: 36px;
      background: #F7F7F7;
      padding: 0 20px;
      color: #4A4A4A;
      border: 0;
      font-weight: 400;
      border: 1px solid #E0E0E0;
      border-radius: 5px; }

.forgotPwArea {
  padding: 40px;
  width: 100%;
  margin-bottom: 40px;
  display: flex;
  flex-direction: column;
  align-items: center; }
  .forgotPwArea form {
    margin: 0;
    width: 100%; }
  .forgotPwArea .form-group {
    margin-bottom: 0; }
    .forgotPwArea .form-group .icon {
      position: absolute;
      left: 10px;
      top: 14px;
      width: 24px;
      height: 24px; }
  .forgotPwArea input[type="email"] {
    width: 100%;
    height: 38px;
    padding: 0 20px;
    background: #F7F7F7;
    border: 1px solid #E0E0E0;
    border-radius: 5px;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #210835; }
  .forgotPwArea input[type="password"] {
    width: 100% !important;
    height: 40px;
    border-radius: 30px;
    padding: 0 15px; }
    .forgotPwArea input[type="password"]:nth-of-type(1) {
      margin-bottom: 10px; }
  .forgotPwArea input[type="submit"] {
    display: flex;
    align-items: center;
    justify-content: center;
    float: right;
    border: 0;
    transition: all 0.2s ease-in;
    cursor: pointer;
    margin: 20px auto; }

.fakeClick-2 {
  height: 30px;
  float: right;
  width: 159px;
  position: absolute;
  right: 45px;
  cursor: pointer;
  bottom: 20px; }

.warn_small {
  font-size: 12px; }

.bigNotification.bigger .bigNotification_inner {
  height: 300px !important; }

.resetPwError {
  font-family: "Roboto";
  color: #4A4A4A;
  text-align: center;
  line-height: 45px; }

.b-lazy {
  -webkit-transition: opacity 500ms ease-in-out;
  -moz-transition: opacity 500ms ease-in-out;
  -o-transition: opacity 500ms ease-in-out;
  transition: opacity 500ms ease-in-out;
  max-width: 100% !important;
  opacity: 0; }

.mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail {
  background-color: rgba(0, 0, 0, 0.3) !important; }

.menu {
  position: absolute;
  width: 200px;
  padding: 2px;
  margin: 0;
  border: 1px solid #bbb;
  background: #eee;
  background: -webkit-linear-gradient(to bottom, #fff 0%, #e5e5e5 100px, #e5e5e5 100%);
  background: linear-gradient(to bottom, #fff 0%, #e5e5e5 100px, #e5e5e5 100%);
  z-index: 100;
  border-radius: 3px;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
  opacity: 0;
  -webkit-transform: translate(0, 15px) scale(0.95);
  transform: translate(0, 15px) scale(0.95);
  transition: transform 0.1s ease-out, opacity 0.1s ease-out;
  pointer-events: none; }

.dropdown_context {
  opacity: 0;
  display: block !important;
  position: absolute;
  width: 200px;
  padding: 2px;
  margin: 0;
  border: 1px solid #bbb;
  background: #eee;
  background: -webkit-linear-gradient(to bottom, #fff 0%, #e5e5e5 100px, #e5e5e5 100%);
  background: linear-gradient(to bottom, #fff 0%, #e5e5e5 100px, #e5e5e5 100%);
  z-index: 100;
  border-radius: 3px;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
  opacity: 0;
  -webkit-transform: translate(0, 15px) scale(0.95);
  transform: translate(0, 15px) scale(0.95);
  transition: transform 0.1s ease-out, opacity 0.1s ease-out;
  pointer-events: none; }

.dropdown_context-show {
  opacity: 1;
  -webkit-transform: translate(0, 0) scale(1);
  transform: translate(0, 0) scale(1);
  pointer-events: auto; }

.show-2 {
  visibility: visible !important;
  display: block !important; }

.cmenu,
.cmenuTwo {
  position: absolute;
  display: inline-block;
  width: 180px;
  background: #8e9eab;
  /* fallback for old browsers */
  background: linear-gradient(to right, #eef2f3, #8e9eab);
  font-family: "Roboto";
  z-index: 99;
  color: #6b6b6b;
  border-radius: 3px;
  border: 1px solid #bfbfbf;
  box-shadow: 1px 1px 23px #000000; }
  .cmenu .item,
  .cmenuTwo .item {
    float: left;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-basis: initial;
    flex-direction: row-reverse;
    padding: 7px 5px;
    cursor: pointer; }
    .cmenu .item:hover,
    .cmenuTwo .item:hover {
      background: #fff; }
    .cmenu .item:last-of-type,
    .cmenuTwo .item:last-of-type {
      border-top: 1px solid #bdbdbd; }
  .cmenu .label,
  .cmenuTwo .label {
    margin-left: 7px; }
  .cmenu .fas,
  .cmenuTwo .fas {
    min-width: 17px;
    font-size: 15px; }
  .cmenu .disabled,
  .cmenuTwo .disabled {
    opacity: 0.4;
    cursor: not-allowed; }
    .cmenu .disabled:hover,
    .cmenuTwo .disabled:hover {
      background: initial; }

.spinner span {
  background: #f7941d !important; }

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both; }

/* ---- .grid-item ---- */
.grid-sizer,
.grid-item {
  width: 20%;
  padding: 10px; }

.grid-item {
  float: left; }

.grid-item img {
  display: block;
  max-width: 100%;
  width: 100%; }

.percentageLoader {
  margin: 10px 0;
  color: #F7941D;
  text-align: center;
  font-weight: 500;
  font-family: "Roboto";
  font-size: 17px; }
  @media (min-width: 1024px) {
    .percentageLoader {
      font-size: 26px; } }

.deSelectAll {
  display: none !important; }

.wololo {
  display: block !important; }

.notFoundWrapper .topBarContainer {
  justify-content: center; }

.notFound_wrapper {
  width: 100%;
  font-family: "Euclid Circular B";
  max-width: 760px;
  margin: 0 auto; }
  .notFound_wrapper .errorContainer {
    background: transparent;
    border-radius: 10px;
    padding: 30px 40px 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /*p {
        font-style: normal;
        font-weight: 400;
        font-size: 18px;
        line-height: 23px;
        color: #303030;
        a {
          color: #8020CF;
        }*/ }
    .notFound_wrapper .errorContainer .btn {
      box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.19788);
      border-radius: 26px;
      padding: 8px 40px;
      margin-top: 20px; }
    .notFound_wrapper .errorContainer .orDevider {
      width: 100%;
      position: relative;
      text-align: center;
      margin: 25px 0; }
      .notFound_wrapper .errorContainer .orDevider:before {
        width: 100%;
        height: 1px;
        background: #E2E2E4;
        position: absolute;
        top: 49%;
        left: 0;
        right: 0;
        content: ''; }
      .notFound_wrapper .errorContainer .orDevider span {
        display: inline-block;
        background: #FFFFFF;
        border: 1px solid #E2E2E4;
        width: 45px;
        height: 45px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        z-index: 1;
        border-radius: 100%;
        position: relative; }
    .notFound_wrapper .errorContainer h4 {
      margin-top: 20px;
      color: #4A4A4A; }

.backHome {
  border-bottom: 2px solid #303030;
  margin-bottom: 40px;
  padding-bottom: 5px;
  width: 34%;
  display: flex;
  align-items: center;
  justify-content: space-between; }
  .backHome a {
    text-decoration: none !important;
    color: #303030;
    font-weight: 400;
    font-size: 24px;
    line-height: 30px;
    text-transform: capitalize; }

.img-404 {
  height: 50%;
  width: 75%;
  margin-bottom: 90px; }

.notFoundWarning {
  font-family: "Euclid Circular B";
  font-weight: 700;
  font-size: 64px;
  line-height: 81px;
  color: #210835; }

.notFoundMessage {
  font-family: "Euclid Circular B";
  font-weight: 700;
  font-size: 24px;
  line-height: 30px;
  color: #303030;
  margin-bottom: 85px; }

.nf_overlay {
  width: 100%;
  height: 100%; }

.nf_btn {
  margin-top: 30px;
  width: 210px;
  height: 60px;
  font-size: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: "Roboto";
  font-weight: bold;
  transition: all 0.2s ease-in;
  border: 5px solid #fff;
  position: relative;
  overflow: hidden; }
  .nf_btn:hover, .nf_btn:active, .nf_btn:focus {
    color: #fff !important; }
  .nf_btn:after {
    content: "";
    position: absolute;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    bottom: -50px;
    transition: all 0.2s ease-in;
    background: #45b5a5; }
  .nf_btn:hover:after {
    bottom: 0; }

.wzrd_warn_1 {
  position: absolute;
  bottom: -62px;
  width: 95%;
  text-align: center;
  margin: 0 auto;
  left: 0;
  right: 0;
  color: #ff2828;
  background: white;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  transition: all 0.2s ease-in; }
  .wzrd_warn_1 p {
    font-size: 18px;
    margin: 0; }
    @media (min-width: 768px) {
      .wzrd_warn_1 p {
        font-size: 21px; } }

.wzrd_warn_2 {
  position: absolute;
  bottom: -62px;
  width: 100%;
  text-align: center;
  margin: 0 auto;
  left: 0;
  right: 0;
  color: #ff2828;
  background: white;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  transition: all 0.2s ease-in; }
  .wzrd_warn_2 p {
    margin: 0;
    font-size: 21px; }

.wzrd_warn_1-active,
.wzrd_warn_2-active {
  bottom: 0;
  transition: all 0.2s ease-in; }

.wzrd_warn_1-close,
.wzrd_warn_2-close {
  position: absolute;
  top: 0;
  right: 0;
  background: #ff2828;
  width: 25px;
  height: 25px;
  color: #fff;
  font-size: 22px;
  line-height: 20px;
  font-family: "Roboto";
  font-weight: 300; }
  .wzrd_warn_1-close:hover, .wzrd_warn_1-close:focus, .wzrd_warn_1-close:active,
  .wzrd_warn_2-close:hover,
  .wzrd_warn_2-close:focus,
  .wzrd_warn_2-close:active {
    color: #fff !important; }

.submittedPerceptionsWrapper .perceptionClassToggle {
  display: none !important; }

.folderShareCopyBtn {
  margin-top: 15px;
  background: #138bfa;
  float: right;
  height: 30px;
  padding: 0 10px;
  width: 90px;
  font-family: "Roboto";
  font-weight: bold;
  color: #2f2f31;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  font-weight: 500;
  transition: all 0.2s ease-in;
  cursor: pointer; }
  .folderShareCopyBtn:hover {
    background: #d8d5d2;
    color: #2f2f31; }

.apiStatusBtn {
  background: #f7941d;
  float: right;
  height: 30px;
  padding: 0 10px;
  font-family: "Roboto";
  font-weight: bold;
  color: #2f2f31;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  font-weight: 500;
  transition: all 0.2s ease-in;
  margin-top: 15px;
  cursor: pointer; }
  .apiStatusBtn:hover {
    background: #d8d5d2; }

.modalVideo {
  width: 100%;
  height: 100%;
  position: relative;
  cursor: pointer;
  outline: none;
  /*@media (min-width: 1200px) {
        max-height: 300px;
    }*/ }
  @media (max-width: 967px) {
    .modalVideo {
      max-width: 100%; } }

.videoOverlay {
  display: none !important;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  z-index: 99;
  cursor: pointer; }
  .videoOverlay img {
    width: 90px; }

.videoThumbOverlay {
  background-image: url(../img/play-button.svg);
  width: 100%;
  height: 74%;
  position: absolute;
  top: 9%;
  left: 0%;
  background-size: 50px;
  background-repeat: no-repeat;
  background-position: center center;
  z-index: 9;
  cursor: pointer;
  display: none; }

.videoThumbOverlay-processing {
  background-image: url(../img/spinner.svg);
  width: 100%;
  height: 74%;
  position: absolute;
  top: 9%;
  left: 0%;
  background-size: 45px;
  background-repeat: no-repeat;
  background-position: center center;
  z-index: 9;
  cursor: pointer; }
  .videoThumbOverlay-processing:after {
    content: "Processing...";
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    bottom: 30px;
    font-size: 14px;
    color: white; }

.folderIcon {
  width: 35px;
  float: left; }

.openFolder {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-left: 40px; }

.folderWarng {
  position: fixed;
  top: 0;
  transition: all 0.2s ease-in;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0 15px;
  font-size: 17px;
  font-weight: 300;
  opacity: 0;
  visibility: hidden;
  z-index: 999; }

.folderWarng p {
  color: #58595B;
  font-size: 20px;
  font-weight: 500;
  text-align: center;
  margin: 0; }

.folderWarng small {
  color: #fff;
  font-family: "DIN Pro"; }

.folderWarng a {
  color: #ffffff;
  padding: 4px 30px;
  font-weight: 500;
  background: #da8c39;
  margin: 0 5px; }

.folderWarng a:focus,
.folderWarng a:active,
.folderWarng a:hover {
  color: #fff !important; }

.folderWarng-active {
  opacity: 1;
  visibility: visible;
  transition: all 0.2s ease-in; }

.folderWarng_inner {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  width: 100%;
  max-width: 400px;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; }
  .folderWarng_inner img {
    width: 45px;
    margin-bottom: 10px;
    filter: invert(45%) sepia(95%) saturate(4753%) hue-rotate(196deg) brightness(104%) contrast(104%); }

.videoShareWrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%; }
  @media (max-width: 768px) {
    .videoShareWrapper {
      height: 205px; } }

.spinner {
  position: fixed !important;
  bottom: 0 !important;
  width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  text-align: center !important;
  margin: 0 auto !important;
  background: #1d1d1d !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-top: 12px !important;
  z-index: 999; }

.topBarHiddenAccount {
  position: absolute;
  float: right;
  right: 0;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  transition: 0.2s ease-in all;
  background: #3b3c3e;
  border-top: 1px solid #313131; }
  .topBarHiddenAccount:hover {
    background: #383838; }
  .topBarHiddenAccount a {
    padding: 0 15px !important; }
  .topBarHiddenAccount .topBarAccount::after {
    content: "";
    background: url(../img/right-arrow.png) no-repeat;
    background-size: 11px;
    width: 11px;
    height: 11px;
    right: -2px;
    top: 44%;
    position: absolute; }

.topBarHiddenAccount-active {
  top: 60px;
  transition: 0.2s ease-in all; }
  .topBarHiddenAccount-active .topNavBar li:last-of-type:after {
    transform: rotate(0deg); }

.topBarAccount span {
  width: 100%;
  max-width: 75px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden; }

.terms {
  box-sizing: border-box;
  font-family: "Roboto";
  color: #58595B;
  padding: 20px 0;
  width: 100%;
  line-height: 26px;
  background-color: #F2F2F2; }
  .terms a {
    color: #e28511; }
    .terms a:active, .terms a:focus {
      color: #e28511 !important; }
  .terms .orangeRadialBgBar-left {
    width: auto; }
  .terms .innerContainer {
    padding: 0 30px;
    background: #fff;
    border-radius: 10px;
    padding: 30px 25px 70px 25px; }

.topNavBar {
  padding: 0;
  flex-direction: row;
  justify-content: flex-end;
  height: 100%;
  margin: 0;
  display: none; }
  @media (min-width: 1024px) {
    .topNavBar {
      display: flex; } }
  .topNavBar li {
    position: relative;
    list-style-type: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #313131;
    background: #3b3c3e; }
    .topNavBar li:hover {
      transition: 0.2s ease-in all;
      background: #383838; }
    .topNavBar li:last-of-type {
      border: 0;
      position: relative;
      min-width: 140px; }
      .topNavBar li:last-of-type:after {
        content: "";
        background: url(../img/right-arrow.png) no-repeat;
        background-size: 11px;
        width: 11px;
        height: 11px;
        right: 4px;
        top: 44%;
        position: absolute;
        transform: rotate(90deg); }
      .topNavBar li:last-of-type a {
        padding: 0 20px; }
    .topNavBar li a {
      cursor: pointer !important;
      height: 100%;
      color: #fff !important;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 12px;
      font-family: "Roboto";
      font-size: 15px; }
      @media (min-width: 1680px) {
        .topNavBar li a {
          padding: 0 16px;
          font-size: 16px; } }
      .topNavBar li a:hover, .topNavBar li a:focus, .topNavBar li a:active {
        color: #fff !important; }
      .topNavBar li a img {
        width: 20px;
        float: left;
        margin-right: 5px; }
    .topNavBar li .nav_inactive {
      color: #848484 !important; }

.topNavBar-mobile {
  display: flex;
  position: fixed;
  padding-left: 0;
  padding-top: 50px;
  top: 0;
  z-index: 9999;
  right: -300px;
  width: 250px;
  flex-direction: column;
  height: 100%;
  background: #f3f3f3;
  transition: 0.2s ease-in all; }
  @media (min-width: 1024px) {
    .topNavBar-mobile {
      display: none; } }
  .topNavBar-mobile li {
    list-style-type: none; }
    .topNavBar-mobile li a {
      color: #282828;
      font-family: "Roboto";
      padding: 13px 15px;
      float: left;
      width: 100%;
      border-bottom: 1px solid gainsboro; }

.topNavBar-mobile-active {
  right: 0;
  transition: 0.2s ease-in all; }

.mobileNavTop {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  text-align: right; }
  .mobileNavTop .mobileUserName {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: #3e3e3e;
    color: #fff !important;
    border-bottom: 4px solid #f7941d;
    padding: 9px 15px !important; }
  .mobileNavTop img {
    width: 20px;
    margin-right: 5px; }

.mobileNavToggle {
  position: absolute;
  top: 0;
  right: 0px;
  height: 60px;
  width: 60px;
  background-color: #333333;
  background-image: url(../img/menu.svg);
  background-size: 30px;
  background-position: center;
  background-repeat: no-repeat;
  transition: all 0.2s ease-in;
  cursor: pointer;
  display: none; }
  @media (min-width: 1024px) {
    .mobileNavToggle {
      display: none; } }

.closeMobileNav {
  position: absolute;
  top: -2px;
  left: -44px;
  background: #f7941d;
  height: 44px;
  width: 44px !important;
  border: none !important;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center; }
  .closeMobileNav img {
    width: 18px !important;
    margin: 0 !important; }

.dim-two {
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 25;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease-in; }

.dim-two-visible {
  opacity: 1;
  visibility: visible;
  transition: all 0.2s ease-in; }

.bs-tooltip-auto[x-placement^=left] .arrow::before,
.bs-tooltip-left .arrow::before {
  border-left-color: #656565 !important; }

.supportHeaderWrapperDesktop {
  display: none; }
  @media (min-width: 1024px) {
    .supportHeaderWrapperDesktop {
      display: block; } }

.supportHeaderWrapperMobile {
  display: block; }
  .supportHeaderWrapperMobile .contactLabel {
    border-bottom: 1px solid #5d4629; }
  @media (min-width: 1024px) {
    .supportHeaderWrapperMobile {
      display: none; } }

.createNewFolder-mobile {
  display: none;
  height: 100%;
  font-size: 18px; }
  .createNewFolder-mobile img {
    margin-right: 5px; }
  @media (min-width: 1024px) {
    .createNewFolder-mobile {
      display: none; } }

.folder_shareStatusForm {
  position: relative;
  margin: 0; }
  .folder_shareStatusForm p {
    padding: 10px 0;
    text-align: right;
    float: left; }
  .folder_shareStatusForm .copyWarn_ {
    left: -130px !important;
    top: 0 !important;
    height: 30px;
    line-height: 30px;
    margin: 0; }
    @media (max-width: 768px) {
      .folder_shareStatusForm .copyWarn_ {
        display: none !important; } }
  @media (max-width: 768px) {
    .folder_shareStatusForm {
      width: 100%; } }

.folderShareBtn {
  opacity: 0;
  height: 0;
  visibility: hidden;
  margin-right: 8px;
  background: #f7941d;
  padding: 0 10px;
  width: 130px;
  font-family: "Roboto";
  font-weight: bold;
  color: #2f2f31;
  display: none;
  border: 0;
  font-weight: 500;
  transition: all 0.2s ease-in;
  cursor: pointer; }
  .folderShareBtn:hover {
    background: #d8d5d2;
    color: #2f2f31; }

.sharedFolderUrl {
  width: 100%;
  font-size: 14px;
  height: 30px;
  padding: 3px 15px;
  font-family: "Roboto";
  border-radius: 0;
  -webkit-appearance: none;
  background-color: #F0EFEF;
  color: #595959;
  border-radius: 10px 0 0 10px;
  border: 0; }
  @media (min-width: 768px) {
    .sharedFolderUrl {
      width: 250px; } }
  @media (min-width: 1024px) {
    .sharedFolderUrl {
      width: 250px; } }

.copy_share_folder {
  cursor: pointer;
  color: #fff !important;
  background: #FF5630;
  font-family: "DIN Pro";
  height: 30px;
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  padding: 0 10px;
  font-family: "Roboto";
  border-radius: 0 10px 10px 0; }
  .copy_share_folder img {
    width: 18px;
    margin-right: 5px; }

.fileError {
  position: fixed;
  top: 0;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 0 15px;
  font-size: 17px;
  font-weight: 300;
  opacity: 0;
  visibility: hidden;
  z-index: 9999; }

.fileError p {
  color: #58595B;
  margin: 15px 0;
  font-weight: 500;
  font-size: 20px; }

.fileError small {
  color: #58595B;
  font-family: "DIN Pro"; }

.fileError a {
  padding: 5px 30px;
  font-weight: 400;
  margin: 0 5px;
  font-family: "Roboto"; }

.fileError-active {
  opacity: 1;
  visibility: visible;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in; }

.fileError_inner {
  background: #ffffff;
  padding: 20px;
  border-radius: 20px;
  max-width: 400px;
  min-height: 200px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center; }
  .fileError_inner img {
    width: 45px;
    filter: invert(45%) sepia(95%) saturate(4753%) hue-rotate(196deg) brightness(104%) contrast(104%); }

.closeModalMobile {
  width: 34px;
  height: 34px;
  position: absolute;
  bottom: -34px;
  right: 0;
  background-image: url(../img/close-white.png);
  background-color: #f7941d;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 13px;
  border: 0 !important;
  z-index: 999;
  color: #fff;
  text-align: left;
  font-family: "Roboto";
  font-size: 15px; }
  @media (min-width: 1024px) {
    .closeModalMobile {
      display: none; } }

.api_doc {
  font-family: "Roboto";
  font-size: 14px;
  position: absolute;
  top: 1px;
  right: -6px;
  color: #e0e0e0;
  text-decoration: underline; }
  .api_doc:hover, .api_doc:active, .api_doc:focus {
    color: #fff !important;
    text-decoration: underline !important; }

.shareBody {
  background-color: #F2F2F2; }
  .shareBody .contentArea {
    margin-top: 0 !important;
    padding-top: 60px;
    background-color: transparent; }

.forgotPwBody {
  height: 100vh;
  background-color: white !important; }
  .forgotPwBody .contentArea {
    background-color: white !important;
    margin-top: 0 !important;
    padding-top: 40px; }
    @media (max-width: 967px) {
      .forgotPwBody .contentArea {
        padding-top: 20px; } }

.spinnerIE {
  margin: 0;
  width: 176px;
  height: 176px;
  text-align: center;
  border-radius: 100%;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  align-content: space-evenly;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); }
  .spinnerIE .loaderLogo {
    width: 100%;
    margin-bottom: 0; }
    .spinnerIE .loaderLogo img {
      width: 68px;
      height: 68px; }

.spinnerIE > div {
  width: 15px;
  height: 15px;
  /* background-color: $orange;*/
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: colorDelay 1.4s infinite ease-in-out both;
  animation: colorDelay 1.4s infinite ease-in-out both;
  margin: 0 5px 5px;
  background-color: #d9d9d9; }

spinnerIE .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s; }

.spinnerIE .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s; }

/*
@-webkit-keyframes sk-bouncedelay {

    0%,
    80%,
    100% {
      -webkit-transform: scale(0);
      background-color: #210835;
    }

    40% {
      -webkit-transform: scale(1.0);
    }
}

@keyframes sk-bouncedelay {

    0%,
    80%,
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    40% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }
}*/
@-webkit-keyframes colorDelay {
  0% {
    background-color: #210835; }
  100% {
    background-color: #d9d9d9; } }

@keyframes colorDelay {
  0% {
    background-color: #210835; }
  100% {
    background-color: #d9d9d9; } }

.folderStatusTop {
  display: flex;
  justify-content: flex-end;
  align-items: center; }
  .folderStatusTop p {
    margin-right: 10px;
    margin-bottom: 0;
    padding: 10px 0;
    color: #595959; }
    @media (max-width: 768px) {
      .folderStatusTop p {
        padding: 0; } }
  @media (max-width: 768px) {
    .folderStatusTop {
      justify-content: center;
      flex-direction: column;
      margin-top: 20px; } }
  .folderStatusTop .sGroup {
    white-space: nowrap;
    display: inline-flex;
    align-items: center; }

.folderShareToggle {
  width: 44px;
  height: 16px;
  background: #138BFA;
  border-radius: 20px;
  transition: all 0.2s ease-in;
  cursor: pointer;
  position: relative;
  z-index: 9;
  display: inline-flex; }
  .folderShareToggle:before {
    content: "";
    display: block;
    height: 20px;
    width: 20px;
    background: #E0E0E0;
    border-radius: 20px;
    transform: translateX(0);
    transition: all 0.2s ease-in;
    margin-top: -2px;
    border: solid 2px #138BFA; }

.folderShareToggle-disabled {
  transition: all 0.2s ease-in;
  background: #E0E0E0; }
  .folderShareToggle-disabled:before {
    content: "";
    display: block;
    height: 20px;
    width: 20px;
    transform: translateX(24px);
    background: #bdbdbd;
    border-radius: 20px;
    transition: all 0.2s ease-in;
    border-color: #E0E0E0; }

.folderShareUrlArea {
  position: relative;
  clear: both;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 5px; }
  @media (max-width: 768px) {
    .folderShareUrlArea {
      justify-content: center; } }

.foldersBreadcrumbWrapper {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #565656;
  height: 45px;
  padding: 10px 25px; }

.black-backBtn {
  position: absolute;
  left: 24px;
  background: #000;
  color: #fff;
  padding: 3px 13px;
  clear: both;
  border-radius: 0px;
  transition: all 0.2s ease-in; }
  .black-backBtn:hover {
    color: #fff;
    opacity: 0.8; }
  .black-backBtn:focus, .black-backBtn:active {
    color: #fff !important; }
  .black-backBtn img {
    width: 15px;
    transform: rotate(180deg);
    margin-top: -2px;
    margin-right: 5px; }

.brdcrmb_back {
  float: left;
  margin-right: 15px;
  margin-top: 2px; }
  .brdcrmb_back img {
    width: 10px; }

.foldersBreadCrumbWrap {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1; }
  @media (min-width: 1024px) {
    .foldersBreadCrumbWrap {
      position: absolute;
      left: 0;
      right: 0;
      top: 15px; } }

.perceptionCollapse .customScroll {
  padding: 0 8px; }

footer {
  width: 100%;
  display: flex !important; }
  footer ul {
    padding: 20px 0;
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    height: auto;
    justify-content: space-between;
    font-size: 14px;
    color: #4c4c4c;
    flex-wrap: wrap;
    flex-direction: column; }
    @media (max-width: 1024px) {
      footer ul {
        flex-direction: column;
        font-size: 12px; } }
    footer ul li {
      font-family: "Roboto";
      list-style-type: none; }
      footer ul li a {
        color: #F7941D; }
        footer ul li a:hover {
          color: #4c4c4c; }
      footer ul li span {
        margin: 0 5px;
        font-size: 12px;
        color: #4c4c4c; }

.thumbnailSpinner {
  background: url(../img/spinner.svg) no-repeat center center;
  background-size: 50px;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 99;
  width: 100%;
  height: 100%;
  top: 0; }

.galleryItem-invis {
  opacity: 0.3 !important; }
  .galleryItem-invis a {
    cursor: wait; }

.createMetaTagBtn-hidden {
  display: none !important; }

.trainingSelector {
  display: flex;
  position: fixed;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: #40639a;
  flex-direction: column; }
  @media (min-width: 1200px) {
    .trainingSelector {
      flex-direction: row; } }

.facialSelector {
  background: #40639a;
  color: white;
  display: flex;
  flex-direction: column;
  height: 31%;
  width: 100%;
  align-items: center;
  justify-content: center;
  font-family: "Roboto";
  border: 0;
  font-size: 25px;
  font-weight: 500; }
  @media (min-width: 1024px) {
    .facialSelector {
      height: initial; } }
  .facialSelector a {
    align-items: center;
    justify-content: center;
    font-family: "Roboto";
    border: 0;
    font-size: 25px;
    font-weight: 500;
    color: white; }
    .facialSelector a:hover {
      color: #fff !important; }
  .facialSelector img {
    width: 40px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 12px; }
    @media (min-width: 1024px) {
      .facialSelector img {
        margin-bottom: 22px;
        width: 90px; } }

.objectSelector {
  background: #214b8e;
  color: white;
  display: flex;
  flex-direction: column;
  height: 31%;
  width: 100%;
  align-items: center;
  justify-content: center;
  font-family: "Roboto";
  border: 0;
  font-size: 25px;
  font-weight: 500; }
  @media (min-width: 1024px) {
    .objectSelector {
      height: initial; } }
  .objectSelector a {
    align-items: center;
    justify-content: center;
    font-family: "Roboto";
    border: 0;
    font-size: 25px;
    font-weight: 500;
    color: white; }
    .objectSelector a:hover {
      color: #fff !important; }
  .objectSelector img {
    width: 40px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 12px; }
    @media (min-width: 1024px) {
      .objectSelector img {
        margin-bottom: 22px;
        width: 90px; } }

.imageSelector {
  display: flex;
  height: 31%;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #233c62;
  font-family: "Roboto";
  border: 0;
  color: white;
  font-size: 25px;
  font-weight: 500; }
  @media (min-width: 1024px) {
    .imageSelector {
      height: initial; } }
  .imageSelector img {
    width: 40px;
    margin-bottom: 12px;
    display: block;
    margin-left: auto;
    margin-right: auto; }
    @media (min-width: 1024px) {
      .imageSelector img {
        margin-bottom: 22px;
        width: 90px; } }
  .imageSelector a {
    align-items: center;
    justify-content: center;
    font-family: "Roboto";
    border: 0;
    font-size: 25px;
    font-weight: 500;
    color: white; }
    .imageSelector a:hover, .imageSelector a:focus, .imageSelector a:active {
      color: white !important; }

.facialTrained:after {
  display: none !important; }

.facial_detail_name {
  padding: 5px 0;
  color: #ffffff;
  text-align: center;
  font-size: 18px;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  background: #1c1c1d;
  font-family: "Roboto"; }
  @media (min-width: 1200px) {
    .facial_detail_name {
      height: 70px; } }
  @media (max-width: 1024px) {
    .facial_detail_name {
      flex-direction: column; } }
  @media (max-width: 1024px) {
    .facial_detail_name b {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column; } }

#facialImageUpload {
  background: #f7941d;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  height: 35px;
  text-align: center;
  float: right;
  width: 190px;
  font-weight: 300;
  border: 0;
  float: left;
  line-height: 33px;
  position: absolute;
  left: 30px;
  font-family: "Roboto"; }

.hiddeinInput-facial {
  display: none; }

.facePerceptionCount {
  font-size: 16px;
  color: #ffa906; }

.succesPhotoCount {
  font-size: 20px;
  color: #56ca60; }

.facialTableBody img {
  max-width: 65px !important;
  max-height: 65px !important;
  padding: 5px; }

.facialTableBody a:active,
.facialTableBody a:focus {
  color: white !important; }

.facialTableBody .perceptionClassToggle {
  left: 0;
  right: 0;
  top: 50%;
  background: #131313;
  margin: auto;
  transform: translateY(-50%); }

.facialTableBody tr td {
  position: relative;
  padding: 0 !important;
  background: #424242;
  text-align: center;
  font-weight: 500;
  font-size: 15px !important;
  text-align: center; }
  @media (min-width: 768px) {
    .facialTableBody tr td {
      font-size: 20px !important; } }

.image_count-success {
  color: #56ca60;
  font-size: 16px; }

.image_count-fail {
  color: #ff4b4b;
  font-size: 16px; }

.facialDetailTable th {
  text-align: center; }

.person_name a {
  font-size: 15px;
  color: white !important;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  background: #424242;
  transition: 0.2s ease-in all; }
  @media (min-width: 768px) {
    .person_name a {
      font-size: 20px; } }
  .person_name a:hover {
    background: #292929; }

.person_name a:focus,
.person_name a:active {
  color: #fff !important; }

/*.changeStatusText {
    font-size: 15px;
    position: absolute;
    bottom: 5px;
    left: 0;
    right: 0;
    margin: auto;
    color: #56ca60;
    text-align: center;
    font-weight: 500;
}*/
.facialMainTable th {
  text-align: center; }

.facialMainTable td {
  height: 55px !important;
  position: relative;
  text-align: center;
  font-size: 20px;
  font-weight: 500;
  padding: 10px !important; }
  .facialMainTable td:last-of-type {
    width: 5%; }
  .facialMainTable td a:active,
  .facialMainTable td a:focus {
    color: white !important; }

.facialMainTable .perceptionClassToggle {
  left: 0;
  right: 0;
  top: 50%;
  background: #131313;
  margin: auto;
  transform: translateY(-50%); }

.trainigListLink a {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: flex-start;
  font-weight: 400;
  transition: 0.2s ease-in all; }

/*.testImagesButton {
    background: #de4646 !important;
    position: absolute;
    right: 25px;
    top: 10px;
    border-radius: 30px;
}*/
.customModal {
  position: fixed;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  top: 0;
  opacity: 0;
  visibility: hidden; }

.customModal-visible {
  display: flex;
  z-index: 9999 !important;
  background: rgba(0, 0, 0, 0.7);
  opacity: 1;
  visibility: visible; }

.customModalInner {
  max-height: 500px;
  background: #2d2b2b;
  overflow-x: hidden;
  overflow-y: scroll;
  height: auto; }
  .customModalInner .prediction_model {
    padding: 8px;
    color: #595959;
    /*font-family: "DIN Pro";*/
    font-size: 14px !important;
    border-bottom: 1px solid grey;
    background: white; }
  .customModalInner #image_predicted {
    padding: 20px 0;
    max-height: 400px;
    width: auto;
    max-width: 100%; }
  .customModalInner ul {
    padding: 20px 0; }
    .customModalInner ul li {
      margin-bottom: 15px;
      list-style-type: none;
      font-size: 14px; }
      @media (max-width: 480px) {
        .customModalInner ul li {
          font-size: 12px; } }

.predictBar {
  background: #4a4a4a;
  height: 70px;
  line-height: 33px;
  width: 100%;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  align-items: center;
  padding: 0 30px;
  border-top: 1px solid #3a3a3a; }

.predictUrlSub {
  display: flex;
  align-items: center;
  justify-content: flex-start; }
  .predictUrlSub input {
    width: 500px; }
  .predictUrlSub span {
    color: white; }

.testImagesButton-2 {
  background: #de4646 !important;
  height: 40px !important;
  margin: 0 15px;
  top: 10px; }

.easy-autocomplete a {
  color: #4a4a4a !important; }

.general_api {
  display: flex;
  flex-direction: column;
  width: 100%; }

.facial_dashboard {
  display: flex;
  flex-direction: column;
  width: 100%; }
  .facial_dashboard p a {
    text-decoration: underline;
    font-size: 18px;
    font-weight: 500;
    color: #3266de; }
  .facial_dashboard p img {
    width: 100%;
    box-shadow: 4px 6px 15px #949494;
    border: 1px solid #c1c1c1;
    border-radius: 7px; }
  .facial_dashboard p:last-of-type .imgWrapperApi::after {
    display: none; }

.facial_api {
  display: flex;
  flex-direction: column;
  width: 100%; }

.imgWrapperApi {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 35px 0; }
  .imgWrapperApi:after {
    content: "";
    display: block;
    width: 300px;
    height: 2px;
    background: #FF5630;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -25px;
    margin: auto; }

@media (max-width: 480px) {
  .facialSampleImg {
    max-width: 100% !important; } }

.apiWrapper {
  position: relative;
  float: left;
  width: 100%; }

.apiSideNav {
  position: absolute;
  left: 0;
  top: 0;
  background: #eaeaea;
  height: 100%;
  float: left;
  width: 250px;
  display: none;
  padding: 40px 0; }
  @media (min-width: 1200px) {
    .apiSideNav {
      display: block; } }
  .apiSideNav:after {
    content: "";
    width: 1px;
    height: 100%;
    background: #ff945f;
    position: absolute;
    right: 0;
    top: 0; }
  .apiSideNav h4 {
    color: #f56b27;
    font-size: 20px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 0px; }

.parentApiNav {
  padding-left: 25px;
  padding-bottom: 10px;
  padding-right: 20px;
  padding-top: 10px;
  margin: 0; }
  .parentApiNav li {
    list-style-type: disc;
    font-size: 16px;
    margin: 20px 0;
    color: #f56b27; }
    .parentApiNav li a {
      color: #f56b27; }
      .parentApiNav li a:active, .parentApiNav li a:focus {
        color: #f56b27 !important; }

.childApiNav {
  padding-left: 20px; }
  .childApiNav li {
    margin: 15px 0;
    list-style-type: none; }
    .childApiNav li a {
      color: #282828; }

.fixed {
  position: fixed !important;
  padding-top: 70px !important; }

.titleApiNav {
  font-weight: 500; }

.apiMainContainer {
  float: left;
  width: 100%;
  background: white;
  padding: 0px 20px 60px 20px; }
  @media (min-width: 639px) {
    .apiMainContainer {
      padding: 0px 20px 60px 0; } }
  @media (min-width: 1200px) {
    .apiMainContainer {
      margin-left: 265px;
      width: 78%; } }

@media (min-width: 1680px) {
  .apiMainContainer {
    width: 100%; } }

.apiSignBtns {
  margin-top: 20px; }

.apiBannerContainer {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%; }
  .apiBannerContainer h1 {
    color: #fff;
    font-weight: 500;
    font-size: 30px;
    margin: 0;
    font-size: 30px; }
    @media (min-width: 1200px) {
      .apiBannerContainer h1 {
        font-size: 48px;
        margin-bottom: 25px; } }

.apiCodeBlock {
  float: left;
  width: 100%; }

.codeCode-visible {
  display: block; }

.codeCode-hidden {
  display: none; }

.code-trigger-wrapper {
  float: right;
  height: 33px;
  margin-top: -4px;
  display: flex; }
  @media (min-width: 768px) {
    .code-trigger-wrapper {
      margin-right: 25px; } }
  .code-trigger-wrapper a {
    text-decoration: none;
    color: #282828;
    height: 33px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    font-size: 14px;
    font-weight: 500; }

.code-trigger-active {
  background: #b7b7b7; }

.codeCode {
  background: #e4e4e4;
  float: left;
  width: 100%;
  padding: 30px 18px;
  font-size: 15px;
  font-weight: 300;
  margin-top: 0;
  margin-bottom: 20px;
  word-wrap: break-word;
  position: relative;
  max-height: 340px;
  overflow-y: hidden; }
  @media (max-width: 1024px) {
    .codeCode {
      max-height: 470px; } }
  .codeCode img {
    width: 15px; }
  @media (max-width: 1024px) {
    .codeCode pre {
      white-space: pre-wrap;
      overflow-x: hidden; } }

.codeCode-long {
  position: relative; }
  .codeCode-long:after {
    position: absolute;
    content: '';
    left: 0;
    right: 0;
    bottom: 0;
    height: 100px;
    background: linear-gradient(0deg, rgba(171, 171, 171, 0.9), rgba(206, 206, 206, 0)); }

.codeCode-visible {
  max-height: initial;
  overflow-y: visible; }

.show_codeCode {
  position: absolute;
  bottom: 21px;
  z-index: 9;
  width: 200px;
  margin: auto;
  left: 0;
  right: 0;
  padding: 10px;
  background: #E67E22;
  color: white;
  border: 0;
  border-radius: 7px;
  box-shadow: 2px 2px 6px #6b6b6b;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 1px;
  font-family: "Nunito", sans-serif;
  cursor: pointer; }
  .show_codeCode:focus, .show_codeCode:active {
    outline: 0 !important; }

.codeBar {
  float: left;
  width: 100%;
  height: 33px;
  background: #d0d0d0;
  padding: 4px 10px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px; }
  .codeBar img {
    width: 23px; }

.codeSvg {
  float: right; }

.dotSvg {
  float: left; }

.apiSecondTitle {
  font-size: 32px;
  color: #ff945f;
  font-weight: 500;
  margin-bottom: 10px;
  padding-top: 15px; }
  @media (min-width: 1024px) {
    .apiSecondTitle {
      padding-top: 60px; } }

.apiThirdTitle {
  font-size: 25px;
  color: #ff945f;
  font-weight: 400;
  padding-top: 10px;
  float: left;
  width: 100%; }

.apiFourthTitle {
  font-size: 18px;
  color: #ff945f;
  margin: 20px 0 !important;
  font-weight: 500;
  float: left;
  width: 100%;
  padding-top: 10px; }

.apiFourthTitle.bordered_ {
  margin: 0 20px 0 0; }

.bordered_:before {
  content: "";
  width: 100%;
  height: 1px;
  background: #e0e0e0;
  float: left;
  margin: 35px 0; }

.apiParagraph {
  font-size: 17px;
  line-height: 24px;
  color: #525252;
  float: left;
  width: 100%;
  font-weight: 500; }

.codeExp {
  font-size: 17px;
  line-height: 24px;
  color: #525252;
  float: left;
  width: 100%;
  margin-top: 15px; }

.apiResponseFields {
  float: left;
  width: 100%; }
  .apiResponseFields ul {
    padding-left: 0; }
    .apiResponseFields ul li {
      list-style-type: none;
      font-size: 16px;
      line-height: 28px;
      color: #525252;
      margin-bottom: 15px; }
      .apiResponseFields ul li b {
        color: #ff945f; }

@media (max-width: 480px) {
  .facialSampleImg {
    max-width: 100% !important; } }

.innerApiCode {
  background: #e4e4e4;
  padding: 5px 7px;
  font-size: 15px;
  font-weight: 300; }
  @media (max-width: 1024px) {
    .innerApiCode {
      width: 100%;
      word-break: break-word; } }

.statusMessages {
  float: left;
  width: 100%; }
  .statusMessages ul {
    float: left;
    margin-right: 100px;
    padding-left: 0; }
    .statusMessages ul .apiFourthTitle {
      margin-bottom: 15px; }
    .statusMessages ul li {
      list-style-type: none;
      font-size: 16px;
      line-height: 28px;
      color: #525252;
      margin-bottom: 15px;
      float: left;
      clear: both; }

.terminalModal {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 9999;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: rgba(45, 45, 45, 0.8);
  opacity: 1;
  visibility: visible;
  transition: all 0.2s ease-in; }
  .terminalModal p {
    text-align: center;
    margin-bottom: 2rem; }
  .terminalModal .window {
    max-width: 700px;
    margin: 90px 15px;
    box-shadow: 0 0.25rem 0.5rem #12181e;
    border-radius: 0 0 0.1rem 0.1rem;
    border-radius: 10px; }
  .terminalModal .bar {
    background: #F6F7FB;
    height: 36px;
    padding: 0 10px;
    border-radius: 0.5rem 0.5rem 0 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end; }
  .terminalModal .btns {
    width: 14px;
    height: 14px;
    border-radius: 100%;
    display: inline-block;
    background: #FF3843;
    color: #ffffff;
    text-align: center;
    border: 0;
    padding: 0;
    font-size: 11px; }
  .terminalModal .body {
    height: 450px;
    background: #ffffff;
    color: #232323;
    padding: 18px;
    max-height: 500px;
    border-radius: 0 0 10px 10px;
    overflow: hidden; }
  .terminalModal .body .inner {
    margin: 0; }
  .terminalModal .command {
    color: #32c146; }
  .terminalModal .comment {
    opacity: 0.5; }

.terminalModal-hidden {
  display: none;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease-in; }

.logWrapper {
  padding: 0 30px 0 0;
  margin: 0;
  word-break: break-word; }
  .logWrapper li {
    font-family: "Euclid Circular B";
    font-weight: 300;
    list-style-type: none;
    font-size: 16px;
    margin-bottom: 20px;
    text-align: left; }
    .logWrapper li:first-of-type {
      color: #6d6d6d; }

@media (max-width: 967px) {
  .viewlogTerminal {
    padding: 10px; } }

@media (max-width: 480px) {
  .viewlogTerminal {
    padding: 80px 10px 0; } }

.viewlogTerminal .bodyWrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff; }
  @media (max-width: 967px) {
    .viewlogTerminal .bodyWrapper {
      flex-direction: column; } }
  .viewlogTerminal .bodyWrapper .logChart {
    max-width: 450px;
    width: 100%;
    padding: 10px 15px; }

.viewlogTerminal .window {
  max-width: 1100px;
  width: 100%; }

.viewlogTerminal .body {
  width: 100%; }
  @media (max-width: 480px) {
    .viewlogTerminal .body {
      max-height: 280px; } }

.annotation_button_wrapper {
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding: 5px;
  flex-direction: column; }
  @media (min-width: 1024px) {
    .annotation_button_wrapper {
      max-width: 200px;
      margin: 20px auto;
      bottom: 0;
      flex-direction: row; } }
  @media (max-width: 1200px) {
    .annotation_button_wrapper {
      max-width: 200px;
      margin: 20px auto;
      bottom: 0;
      flex-direction: row; } }
  .annotation_button_wrapper .annotation_obj_number {
    white-space: nowrap;
    line-height: 34px; }

.faceTable th {
  color: white !important; }

.faceTable thead {
  background: #234242 !important; }

.dataTables_wrapper .dataTables_paginate {
  font-size: 13px !important; }

.subBar {
  background: #4a4a4a;
  height: 60px;
  line-height: 33px;
  width: 100%;
  float: left;
  display: flex;
  align-items: center;
  padding: 0 30px; }

.red-button {
  background: #b14747;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  float: left;
  font-weight: 500;
  border: 0;
  padding: 5px 25px;
  font-family: "Roboto";
  border-radius: 30px; }
  .red-button:hover {
    color: #fff !important; }
  .red-button:focus {
    color: #fff !important; }

.green-button {
  background: #2e9268;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  float: left;
  font-weight: 300;
  border: 0;
  padding: 5px 12px;
  font-family: "Roboto"; }
  .green-button:hover {
    color: #fff !important; }
  .green-button:focus {
    color: #fff !important; }

.annotationSubBar {
  justify-content: space-between;
  flex-direction: column;
  padding: 15px 0;
  height: auto !important; }
  .annotationSubBar a {
    margin: 8px 0; }
  @media (min-width: 1024px) {
    .annotationSubBar {
      flex-direction: row;
      padding: 0 30px;
      height: 60px !important; }
      .annotationSubBar a {
        margin: initial; } }
  .annotationSubBar .backBtn {
    width: 85px;
    display: inline-flex;
    align-items: center;
    justify-content: space-around;
    background: black;
    color: #fff;
    border-radius: 30px;
    padding: 0;
    margin-right: 10px; }
    .annotationSubBar .backBtn:focus, .annotationSubBar .backBtn:active {
      color: white !important; }
    .annotationSubBar .backBtn img {
      margin-top: 3px;
      width: 8px;
      float: left; }

.ODbtn {
  width: 310px !important; }

.ODhiddenUpload {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  z-index: -999; }

.classDetailBar {
  justify-content: space-between; }

.addNewImgBtn {
  background: #f7941d;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  height: 35px;
  text-align: center;
  float: right;
  width: 190px;
  border: 0;
  float: left;
  line-height: 33px;
  font-family: "Roboto"; }
  .addNewImgBtn:active, .addNewImgBtn:focus, .addNewImgBtn:hover {
    color: #fff !important; }

.classDetailDropdownToggle {
  width: 190px;
  height: 35px;
  color: #fff;
  background: #2e9268;
  float: left;
  text-align: center;
  font-family: "Roboto";
  font-size: 16px;
  border-radius: 30px; }
  .classDetailDropdownToggle :active,
  .classDetailDropdownToggle :focus,
  .classDetailDropdownToggle :hover {
    color: #fff !important; }

.classDetailDropdownToggle:focus,
.classDetailDropdownToggle:hover {
  color: #fff !important; }

.classDetailDropdown-active {
  position: relative;
  padding: 0; }
  .classDetailDropdown-active ul {
    display: block !important;
    position: absolute;
    top: 36px;
    left: 0;
    padding: 0; }
    .classDetailDropdown-active ul li {
      list-style-type: none;
      text-align: left; }
      .classDetailDropdown-active ul li:first-of-type a {
        border-bottom: 1px solid #fff; }
      .classDetailDropdown-active ul li a {
        padding-left: 8px;
        text-align: left; }

.classDetailDropdown {
  position: relative;
  padding: 0;
  margin: 0;
  z-index: 9; }
  .classDetailDropdown a {
    font-size: 16px; }
  .classDetailDropdown li {
    list-style-type: none;
    cursor: pointer; }
  .classDetailDropdown ul {
    display: none; }

.addImg-hidden {
  display: none !important; }

.classGalleryWrapper ul {
  padding-left: 0;
  margin: 0; }
  .classGalleryWrapper ul li {
    position: relative;
    list-style-type: none; }
    .classGalleryWrapper ul li .deleteClassImg {
      background: #ffF;
      width: 27px;
      height: 27px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: 0;
      right: 1px;
      border: 1px solid #404040;
      border-right: 0;
      border-bottom-left-radius: 16px; }
      .classGalleryWrapper ul li .deleteClassImg img {
        width: 20px;
        margin-left: 3px;
        margin-top: -3px; }

.classGalleryWrapper .itemSelectBox {
  visibility: visible;
  opacity: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  transition: all 0.2s ease-in;
  overflow: hidden; }
  .classGalleryWrapper .itemSelectBox .overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none; }
  .classGalleryWrapper .itemSelectBox.itemSelectBox-selected .overlay {
    display: block; }

.classGalleryWrapper .itemSelectBox-active {
  opacity: 1;
  visibility: visible; }

.classGalleryWrapper .itemSelectBox-selected {
  height: 100%;
  opacity: 1;
  visibility: visible; }

.classGalleryWrapper .eachGalleryItem {
  position: relative; }
  .classGalleryWrapper .eachGalleryItem a.rename_file {
    position: absolute;
    bottom: 7px;
    right: 6px;
    z-index: 1010;
    width: 20px;
    height: 20px;
    visibility: hidden; }
    .classGalleryWrapper .eachGalleryItem a.rename_file .customTooltip {
      top: 25px;
      right: 0; }
    .classGalleryWrapper .eachGalleryItem a.rename_file .alertTooltip {
      top: 25px;
      right: 0; }
  .classGalleryWrapper .eachGalleryItem .alertDesable {
    border: 0;
    background: none; }
    .classGalleryWrapper .eachGalleryItem .alertDesable img {
      filter: invert(91%) sepia(5%) saturate(101%) hue-rotate(314deg) brightness(800%) contrast(100%); }
  .classGalleryWrapper .eachGalleryItem img {
    width: 100%;
    height: 100%;
    object-fit: cover; }

.classGalleryWrapper .remember_forgot .brand-checkbox i:after {
  left: 2px; }

.addNewImgBtn {
  background: #f7941d;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  height: 35px;
  text-align: center;
  float: right;
  width: 190px;
  border: 0;
  float: left;
  line-height: 33px; }
  .addNewImgBtn:active, .addNewImgBtn:focus, .addNewImgBtn:hover {
    color: #fff !important; }

.classDetailBar {
  justify-content: space-between; }

.addImg-hidden {
  display: none !important; }

.deleteModal {
  position: fixed;
  top: 0;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 0 15px;
  font-size: 17px;
  font-weight: 300;
  opacity: 0;
  visibility: hidden;
  z-index: 9999; }

.deleteModal a {
  padding: 4px 30px;
  font-weight: 400;
  margin: 0 5px;
  border-radius: 30px; }

.deleteModal-active {
  opacity: 1;
  visibility: visible;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in; }

.deleteModal_inner {
  position: relative;
  border-radius: 10px;
  background: #ffffff;
  width: 100%;
  max-width: 600px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; }
  .deleteModal_inner p {
    font-weight: 400;
    font-size: 16px;
    color: #595959; }

.editClassModal .createPerceptionPopup {
  position: fixed;
  width: 100%;
  height: 60%;
  top: 0;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center; }

.editClassModal .createPerceptionInside {
  background: #555658;
  padding: 15px;
  width: 370px;
  float: left;
  position: relative;
  z-index: 10; }

.editClassModal .perceptionCreateWrapper {
  float: left;
  padding: 5px 30px;
  width: 100%; }
  .editClassModal .perceptionCreateWrapper p {
    font-weight: 500;
    color: #fff;
    margin: 5px 0;
    font-size: 16px; }
  .editClassModal .perceptionCreateWrapper input[type="text"],
  .editClassModal .perceptionCreateWrapper select {
    width: 100% !important;
    height: 35px;
    background: #3b3c3e;
    font-size: 16px;
    padding: 0 15px;
    color: #fff;
    border: 0;
    font-weight: 500;
    color: white;
    border-radius: 30px; }
    .editClassModal .perceptionCreateWrapper input[type="text"] option,
    .editClassModal .perceptionCreateWrapper select option {
      color: white; }

.editClassModal .perceptionCreateBtn {
  margin-top: 15px;
  background: #f7941d;
  float: right;
  height: 30px;
  font-size: 16px;
  padding: 0 15px;
  font-family: "Roboto";
  font-weight: bold;
  color: #2f2f31;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  font-weight: 500;
  transition: all 0.2s ease-in;
  cursor: pointer;
  border-radius: 30px; }
  .editClassModal .perceptionCreateBtn:hover {
    background: #d8d5d2; }

.editClassModal .settings_orangeSquare {
  background: #f7941d;
  width: 50px;
  height: 50px;
  font-family: "Roboto";
  font-weight: bold;
  color: #2f2f31;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: -25px;
  top: -15px; }
  .editClassModal .settings_orangeSquare img {
    width: 25px; }

.editClassModal .modal-dialog {
  z-index: 9999; }

.editClassModal .closeModal {
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: rgba(0, 0, 0, 0.3);
  border: 0;
  z-index: 9; }

.editClassModal .modal-content {
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
  display: flex;
  flex-direction: row !important;
  align-items: flex-start;
  justify-content: flex-start;
  height: auto;
  margin-top: 65px; }

.editClassModal .createPerceptionModal .modal-lg,
.editClassModal .createPerceptionParametersModal .modal-lg,
.editClassModal .createClassModal .modal-lg,
.editClassModal .editClassModal .modal-lg {
  z-index: 10;
  height: 100%; }

.classCreateWrapper ul {
  float: left;
  width: 100%;
  padding: 0;
  margin: 0; }
  .classCreateWrapper ul li {
    margin-bottom: 15px;
    float: left;
    width: 100%;
    list-style-type: none; }

.createClassModal .createPerceptionPopup,
.editClassModal .createPerceptionPopup {
  height: auto; }

.disabledClasses {
  color: #e84e3c; }

.enabledClasses {
  color: #46da7a; }

.classBar {
  float: left;
  width: 100%;
  background: #4a4a4a; }
  @media (max-width: 1024px) {
    .classBar .col-lg-4 {
      border-bottom: 1px solid #2b2b2b; } }
  .classBar ul {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center; }
    .classBar ul:after {
      content: "";
      width: 1px;
      background: #353535;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0; }
  .classBar li {
    list-style-type: none;
    color: #fff;
    padding: 12px 0;
    font-size: 17px; }
    .classBar li a {
      color: #fff;
      padding: 7px 11px;
      font-size: 15px;
      background: #b14747;
      transition: all 0.2s ease-in;
      text-align: center;
      cursor: pointer; }
      .classBar li a:hover {
        background: #6d2727; }
    .classBar li span {
      display: block; }
    .classBar li input[type=number] {
      width: 58px;
      font-weight: 500;
      color: #282828; }

.discountValue span {
  float: left;
  margin-right: 10px; }

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0; }

.createClassBtn {
  background: #f7941d;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  height: 35px;
  text-align: center;
  float: left;
  width: 190px;
  font-weight: 300;
  border: 0;
  position: absolute;
  left: 30px;
  top: 17px;
  line-height: 33px; }
  .createClassBtn:active, .createClassBtn:focus, .createClassBtn:hover {
    color: #fff !important; }

.trainBtn {
  background: #2e9268;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  height: 35px;
  text-align: center;
  float: left;
  width: 190px;
  font-weight: 500;
  border: 0;
  border-radius: 30px;
  line-height: 33px; }
  @media (max-width: 1024px) {
    .trainBtn {
      width: 140px; } }
  .trainBtn:active, .trainBtn:focus, .trainBtn:hover {
    color: #fff !important; }

.deployStatus a {
  margin-left: 23px; }

.discountValue a {
  display: block;
  margin-left: 0;
  margin-top: 20px; }

.predictImg input {
  margin-bottom: 20px;
  width: 100%;
  color: #282828; }

.predictImg a {
  float: left; }

.predictImg span {
  margin: 5px 10px;
  float: left; }

.img_clas_detail_subbar {
  justify-content: space-between !important; }
  @media (max-width: 768px) {
    .img_clas_detail_subbar {
      flex-direction: column;
      height: initial !important; } }
  .img_clas_detail_subbar .backBtn {
    position: initial; }
  @media (max-width: 1024px) {
    .img_clas_detail_subbar .createPerceptionBtn {
      margin: 10px !important; } }

.deployOpt {
  align-items: center !important;
  justify-content: center !important;
  margin-top: 27px !important; }
  @media (max-width: 1024px) {
    .deployOpt {
      margin-top: 0 !important;
      padding: 20px 0 !important; } }

.predictUpload {
  margin-top: 50px; }
  @media (max-width: 1024px) {
    .predictUpload {
      margin-top: 0 !important;
      padding: 25px 0 !important; } }

.overflowedTableWrapper {
  float: left;
  width: 100%;
  overflow-y: auto;
  overflow-x: auto; }

@media (max-width: 1024px) {
  .image_classification_list_subbar,
  .facial_training_subbar,
  .facial_trainig_detail_subbar,
  .object_detection_dataset_subbar {
    justify-content: flex-end !important; } }

@media (max-width: 1024px) {
  .image_classification_detail_subbar {
    padding: 15px !important;
    flex-direction: column !important;
    height: auto !important; } }

@media (max-width: 1024px) {
  .image_classification_detail_subbar .addNewImgBtn {
    margin: 15px 0px !important; } }

@media (max-width: 1024px) {
  .facial_training_list_subbar,
  .object_detection_list_subbar {
    flex-direction: column !important;
    align-items: center !important;
    height: 195px !important;
    padding: 15px !important; } }

@media (max-width: 1024px) {
  .facial_training_list_subbar .backBtn,
  .object_detection_list_subbar .backBtn {
    position: initial !important; } }

@media (max-width: 1024px) {
  .facial_training_list_subbar .createPerceptionBtn,
  .object_detection_list_subbar .createPerceptionBtn {
    margin: 10px 0 !important; } }

@media (max-width: 1024px) {
  .facial_training_list_subbar .testImagesButton,
  .object_detection_list_subbar .testImagesButton {
    position: initial !important; } }

#prediction_list .prediction_model {
  flex-direction: column;
  height: auto;
  position: relative;
  border: solid 2px transparent;
  border-bottom: solid 2px #dadada;
  padding: 10px 0; }
  @media (min-width: 1024px) {
    #prediction_list .prediction_model {
      flex-direction: row; } }
  @media (min-width: 1200px) {
    #prediction_list .prediction_model img {
      position: initial;
      left: 250px;
      top: 10px; } }

#prediction_list .objecModelName .prediction_model {
  background: #f7941d;
  color: white;
  text-align: center;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 21px !important; }

#support-form-ticket {
  width: 100%; }
  #support-form-ticket input[type="text"],
  #support-form-ticket input[type="email"] {
    font-size: 14px;
    background: #fff;
    color: #282828; }
  #support-form-ticket textarea {
    background: #fff;
    color: #282828;
    min-height: 206px;
    resize: none; }
  #support-form-ticket input[type="submit"] {
    color: #fff;
    border: 0;
    cursor: pointer;
    font-weight: 500;
    margin-top: 15px;
    border-radius: 30px; }
  #support-form-ticket .submitted-message p {
    color: white;
    text-align: center;
    font-weight: bold;
    border: 3px solid orange;
    padding: 15px;
    line-height: 33px;
    background: #212121; }

.topBarHiddenNav {
  position: absolute;
  z-index: -1;
  left: 0;
  top: -250px;
  width: 100%;
  transition: all 0.2s ease-in; }
  .topBarHiddenNav a {
    list-style-type: none;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #313131;
    background: #3b3c3e;
    display: flex;
    flex-direction: column;
    height: 60px !important;
    border-top: 1px solid #313131;
    text-align: center; }
    .topBarHiddenNav a:hover {
      transition: 0.2s ease-in all;
      background: #383838; }
  .topBarHiddenNav span {
    font-size: 12px; }

.perceptionTopBarHiddenNav {
  position: absolute;
  z-index: -1;
  left: 0;
  top: -300px;
  width: 100%;
  transition: all 0.2s ease-in; }
  .perceptionTopBarHiddenNav a {
    list-style-type: none;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #313131;
    background: #3b3c3e;
    display: flex;
    flex-direction: column;
    height: 60px !important;
    border-top: 1px solid #313131;
    text-align: center; }
    .perceptionTopBarHiddenNav a:hover {
      transition: 0.2s ease-in all;
      background: #383838; }
  .perceptionTopBarHiddenNav span {
    font-size: 12px; }

.topBarHiddenNav-support {
  position: absolute;
  z-index: -1;
  left: 0;
  top: -300px;
  width: 100%;
  transition: all 0.2s ease-in; }
  .topBarHiddenNav-support a {
    list-style-type: none;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #313131;
    background: #3b3c3e;
    display: flex;
    flex-direction: column;
    height: 70px !important;
    border-top: 1px solid #313131;
    text-align: center;
    padding: 0 !important; }
    .topBarHiddenNav-support a:hover {
      transition: 0.2s ease-in all;
      background: #383838; }
  .topBarHiddenNav-support span {
    font-size: 12px; }

.topBarHiddenNav-active,
.perceptionTopBarHiddenNav-active,
.topBarHiddenNav-support-active {
  top: 60px;
  transition: all 0.2s ease-in; }

.pagination {
  display: flex;
  justify-content: center;
  align-items: center; }
  .pagination .prev, .pagination .next {
    width: 20px;
    text-align: center; }
  .pagination .pages {
    position: relative;
    z-index: 8;
    margin: 0 10px;
    display: block;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    background: #FFFFFF;
    border: 1px solid #9B9B9B;
    width: 80px;
    height: 28px;
    overflow: hidden;
    border-radius: 4px;
    /*.dropdownArrow {
      width: 24px;
      height: 26px;
      transform: rotate(90deg);
      position: absolute;
      right: 2px;
      top: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 2;
      transition: $transition;
      img {
        width: 16px;
        height: 12px;
      }
    }
   ul {
      width: 100%;
      list-style: none;
      margin: 0;
    }*/ }
    .pagination .pages .mCSB_scrollTools {
      margin-top: 35px; }
    .pagination .pages #noOfPages {
      /*position: absolute;
      bottom: 0;*/
      width: 100% !important;
      border-radius: 4px;
      margin: 0;
      border-radius: 4px;
      border: 0;
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      -o-appearance: none;
      position: relative;
      cursor: pointer;
      background: #fff url(../img/icon-down.svg) 90% center no-repeat;
      background-size: 14px;
      padding-left: 10px;
      font-family: "Roboto";
      color: #58595B; }
      .pagination .pages #noOfPages option {
        font-family: "Roboto";
        color: #58595B;
        background-color: transparent; }
      .pagination .pages #noOfPages li {
        list-style: none;
        width: 100%;
        background: #FFFFFF; }
        .pagination .pages #noOfPages li a {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          width: 100%;
          color: #58595B;
          text-align: center;
          padding: 0 10px;
          line-height: 27px; }
  .pagination .open {
    overflow: visible;
    border: 0;
    position: relative; }
    .pagination .open #noOfPages li {
      border: 1px solid #9B9B9B;
      border-bottom: 0; }
      .pagination .open #noOfPages li:last-child {
        border-bottom: 1px solid #9B9B9B; }
    .pagination .open .dropdownArrow {
      transform: rotate(-90deg); }

.match_warn {
  color: #4d4de0 !important;
  font-weight: 500;
  justify-content: center !important;
  font-size: 21px; }

.match_warn_match {
  color: #F68F20 !important;
  justify-content: center !important;
  font-size: 21px;
  position: initial;
  left: 0;
  right: 0;
  top: 8px;
  margin: auto !important;
  text-align: center; }
  @media (min-width: 1200px) {
    .match_warn_match {
      position: absolute; } }

#myCanvas {
  max-width: 100%; }
  @media (min-width: 1200px) {
    #myCanvas {
      max-width: initial; } }

.customModalLarge {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  top: 0; }

.customModalLarge-visible {
  display: flex; }

.customModalLargeInner {
  max-height: calc(100vh - 20%);
  background: #2d2b2b;
  overflow-x: hidden;
  overflow-y: scroll;
  height: auto; }
  .customModalLargeInner .prediction_model {
    padding: 8px;
    color: #282828;
    font-family: "DIN Pro";
    font-size: 17px !important;
    border-bottom: 1px solid grey;
    background: white; }
  .customModalLargeInner #prediction_list h3 {
    text-align: left;
    font-size: 20px;
    margin: 15px 0;
    color: #FF5630; }
  .customModalLargeInner ul {
    padding: 40px 0; }
    .customModalLargeInner ul li {
      margin-bottom: 15px;
      list-style-type: none; }

.closeCustomModalLarge {
  background: #FF5630;
  color: white;
  padding: 8px 25px;
  text-decoration: none;
  text-align: center;
  position: absolute;
  right: 15px;
  font-weight: 500;
  font-size: 18px;
  display: none; }
  .closeCustomModalLarge:hover, .closeCustomModalLarge:active, .closeCustomModalLarge:focus {
    color: white !important; }
  @media (min-width: 1200px) {
    .closeCustomModalLarge {
      display: block; } }

.closeCustomModalLarge-mobile {
  background: #FF5630;
  color: white;
  padding: 8px 25px;
  text-decoration: none;
  text-align: center;
  position: absolute;
  right: 0;
  font-weight: 500;
  font-size: 18px; }
  .closeCustomModalLarge-mobile:hover, .closeCustomModalLarge-mobile:active, .closeCustomModalLarge-mobile:focus {
    color: white !important; }
  @media (min-width: 1200px) {
    .closeCustomModalLarge-mobile {
      display: none; } }

.nuclei_prediction {
  display: block;
  height: 42px;
  position: relative;
  padding: 8px 65px 8px 8px;
  font-size: 17px;
  color: #282828;
  width: 100%;
  border-bottom: 1px solid grey;
  background: white;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden; }

.nuclei_viewMore {
  position: absolute;
  right: 0;
  background: orange;
  border: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  width: 45px; }
  .nuclei_viewMore img {
    width: 25px; }

.nuclei_prediction-showAll {
  height: auto;
  text-overflow: initial;
  white-space: initial;
  overflow: visible;
  word-wrap: break-word;
  padding: 8px; }

.nuclei_images {
  display: flex;
  align-items: center;
  width: 100%;
  flex-direction: column;
  justify-content: space-around; }

.nuclei_original {
  margin: 20px 0; }
  .nuclei_original h4 {
    text-align: center;
    color: #FF5630; }
  .nuclei_original img {
    border: 2px solid #FF5630;
    max-width: 256px;
    width: 100%; }

.nuclei_predicted {
  margin: 20px 0; }
  .nuclei_predicted h4 {
    text-align: center;
    color: #3dfd78; }
  .nuclei_predicted img {
    border: 2px solid #3dfd78;
    max-width: 256px;
    width: 100%; }

.nuclei_count {
  color: black;
  font-weight: 500;
  font-size: 25px;
  margin-bottom: 10px;
  text-align: center;
  background: white;
  display: block;
  width: 250px;
  padding: 10px;
  margin: 0 auto; }

.howToVideos {
  display: flex;
  flex-direction: column;
  width: 100%; }
  .howToVideos iframe {
    box-shadow: 4px 6px 15px #949494; }
    @media (max-width: 480px) {
      .howToVideos iframe {
        width: 330px;
        height: 200px; } }

#acceptTerms {
  width: 16px;
  height: 16px;
  margin: 0; }

.terms-warn {
  text-decoration: underline;
  text-decoration-color: red; }

.emailVerifyBg {
  height: 100% !important;
  background-color: white; }

.redirect-spinner {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  background: black;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center; }

.medicalChooseFiles {
  float: left;
  margin: 9px 0;
  background: gainsboro;
  border: 0;
  padding: 5px 12px;
  font-weight: 500;
  border-radius: 3px; }

.hiddenSelect {
  display: none;
  visibility: hidden;
  opacity: 0; }

.nucleiCaption span {
  color: #FF5630; }

.eachNucleiCaption {
  margin: 0 30px;
  font-size: 15px;
  font-weight: 500; }
  @media (min-width: 1200px) {
    .eachNucleiCaption {
      font-size: 20px; } }
  .eachNucleiCaption span {
    color: #FF5630; }
  .eachNucleiCaption p {
    margin: 0; }

.nucleiTable tr {
  height: 95px !important; }

.baseImage {
  color: #FF5630;
  font-weight: 500;
  margin: 10px 30px; }
  @media (min-width: 1200px) {
    .baseImage {
      position: relative;
      z-index: 1000; } }
  .baseImage img {
    width: 75px;
    border: 2px solid white;
    margin-left: 5px; }

.outputImage {
  color: #FF5630;
  font-weight: 500;
  margin: 10px 30px; }
  @media (min-width: 1200px) {
    .outputImage {
      position: relative;
      z-index: 1000; } }
  .outputImage img {
    width: 75px;
    border: 2px solid white;
    margin-left: 5px; }

.nuclei_detail_bar {
  min-height: 90px;
  height: auto; }
  @media (max-width: 1024px) {
    .nuclei_detail_bar {
      height: auto !important; }
      .nuclei_detail_bar .eachNucleiCaption {
        margin: 15px 30px !important; } }

.mobileHiddenNav {
  padding-left: 20px;
  float: left;
  position: relative;
  display: none; }
  .mobileHiddenNav .nav_inactive {
    opacity: 0.5; }
  .mobileHiddenNav a {
    position: relative; }
    .mobileHiddenNav a img {
      width: 23px;
      margin-left: 5px; }
    .mobileHiddenNav a:before {
      content: "";
      background: url(../img/right-arrow-blueish.png);
      width: 10px;
      height: 10px;
      position: absolute;
      left: 0;
      top: 17px;
      background-size: 10px; }

.mobileHiddenNav-active {
  display: block; }

.mobileNavHiddenContainer > a span {
  position: relative; }
  .mobileNavHiddenContainer > a span:before {
    content: "";
    background: url(../img/right-arrow-blueish.png);
    width: 10px;
    height: 10px;
    position: absolute;
    top: 6px;
    right: -20px;
    transform: rotate(90deg);
    background-size: 10px; }

.baseImageGridDim {
  position: fixed;
  top: 0;
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s ease-in;
  left: 0;
  width: 100%;
  height: 100%;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  background: rgba(0, 0, 0, 0.8); }

.baseImageGridDim-visible {
  opacity: 1;
  visibility: visible; }

.baseImgGrid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 330px; }
  @media (min-width: 768px) {
    .baseImgGrid {
      width: 540px; } }

.eachBaseImgGrid {
  flex: 0 0 32%; }
  .eachBaseImgGrid img {
    width: 110px;
    border: 1px solid #24336b; }
    @media (min-width: 768px) {
      .eachBaseImgGrid img {
        width: 180px; } }

.eachBaseImgGrid-9 {
  flex: 0 0 32%; }
  .eachBaseImgGrid-9 img {
    width: 110px;
    border: 1px solid #24336b; }
    @media (min-width: 768px) {
      .eachBaseImgGrid-9 img {
        width: 180px; } }

.eachBaseImgGrid-42 {
  flex: 0 0 14%; }
  .eachBaseImgGrid-42 img {
    width: 110px;
    border: 1px solid #24336b; }
    @media (min-width: 768px) {
      .eachBaseImgGrid-42 img {
        width: 77px; } }

.eachOutputImgGrid-42 {
  flex: 0 0 14%; }
  .eachOutputImgGrid-42 img {
    width: 110px;
    border: 1px solid #24336b; }
    @media (min-width: 768px) {
      .eachOutputImgGrid-42 img {
        width: 77px; } }

.outputImageGridDim {
  position: fixed;
  top: 0;
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s ease-in;
  left: 0;
  width: 100%;
  height: 100%;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  background: rgba(0, 0, 0, 0.8); }

.outputImageGridDim-visible {
  opacity: 1;
  visibility: visible; }

.outputImgGrid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 330px; }
  @media (min-width: 768px) {
    .outputImgGrid {
      width: 540px; } }

.eachOutputImgGrid {
  flex: 0 0 32%; }
  .eachOutputImgGrid img {
    width: 110px;
    border: 1px solid #24336b; }
    @media (min-width: 768px) {
      .eachOutputImgGrid img {
        width: 180px; } }

@media only screen and (max-width: 1024px) {
  .ifMobile {
    display: none; } }

.nucleiTable a {
  float: left;
  width: 100%; }

.nucleiTable img {
  transition: opacity 0.5s ease-in-out;
  padding: 0 !important; }

.nucleiTable .is-loading {
  background-image: url(../img/spinner-2.svg);
  background-size: 40px 40px;
  background-position: center center;
  width: 100%;
  height: 100%;
  background-color: #2f2f31;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 1;
  background-repeat: no-repeat;
  transition: opacity .7s ease-in-out; }
  .nucleiTable .is-loading img {
    opacity: 0; }

.is-loaded {
  transition: opacity .7s ease-in-out;
  opacity: 0 !important;
  z-index: -1; }

.nuclei_description img {
  width: 30px; }

.inputImageWrapper-active {
  position: relative;
  z-index: 999; }

.outputImageWrapper-active {
  position: relative;
  z-index: 999; }

.inputImageWrapper img {
  border: 3px solid white; }

.baseImgGrid-active img {
  border-color: #10ff00; }

.outputImgGrid-active img {
  border: 5px solid #10ff00; }

.button-radius {
  border-radius: 30px !important; }

.customPerceptionCreate label,
.classCreateWrapper label,
.perceptionCreateWrapper label {
  color: white;
  margin: 12px 0 3px 0; }

.addNewImgVideoBtn {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  height: 45px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 33px;
  font-family: "Roboto";
  margin: 20px 0; }
  @media (min-width: 1200px) {
    .addNewImgVideoBtn {
      margin: initial; } }
  @media (max-width: 967px) {
    .addNewImgVideoBtn {
      margin-top: 0; } }
  .addNewImgVideoBtn:active, .addNewImgVideoBtn:focus, .addNewImgVideoBtn:hover {
    color: #fff !important; }

.faceResultPersonName {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis; }

.folders_Myfiles {
  display: flex;
  margin: 0;
  padding: 0;
  width: 100%;
  flex-wrap: wrap; }
  .folders_Myfiles li {
    list-style-type: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #424242;
    margin-right: 20px;
    margin-top: 20px; }
    .folders_Myfiles li a {
      padding: 10px;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center; }
      .folders_Myfiles li a:active, .folders_Myfiles li a:focus {
        color: white !important; }
      .folders_Myfiles li a img {
        width: 60px;
        float: left;
        margin-right: 15px; }
    .folders_Myfiles li p {
      margin: 0;
      font-size: 18px; }

.analyticsBar {
  float: left;
  width: 100%;
  display: none;
  background: #4a4a4a;
  position: relative; }
  @media (min-width: 1200px) {
    .analyticsBar {
      height: 60px;
      display: block; } }
  .analyticsBar ul {
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 1000;
    position: relative;
    background: #4a4a4a; }
    @media (min-width: 1200px) {
      .analyticsBar ul {
        flex-direction: row;
        height: 100%; } }
    .analyticsBar ul li {
      color: white;
      list-style-type: none;
      padding: 15px 0;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center; }
      @media (min-width: 1200px) {
        .analyticsBar ul li {
          margin: 0 25px;
          padding: initial; } }
      .analyticsBar ul li b {
        color: #FF5630;
        margin-right: 5px; }
      .analyticsBar ul li img {
        width: 22px;
        margin-left: 5px; }

.popularTags-analytics {
  position: relative;
  cursor: pointer; }

.popularTags-hidden {
  z-index: 999;
  position: absolute;
  transform: translateY(-60px);
  transition: all 0.2s ease-in;
  left: 0;
  width: 100%;
  height: auto;
  min-height: 60px;
  background: #4a4a4a;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #2b2b2b; }
  .popularTags-hidden ul {
    margin: 0;
    padding: 0; }
    .popularTags-hidden ul li {
      list-style-type: none;
      background: #d21717;
      color: white;
      padding: 5px 15px;
      border-radius: 30px;
      margin: 0 10px; }

.popularTags-hidden-visible {
  transform: translateY(0px);
  transition: all 0.2s ease-in; }

@media (max-width: 1024px) {
  .perception_result_subbar {
    height: auto !important;
    flex-direction: column; } }

@media (max-width: 1024px) {
  .captionWithVideo {
    flex-direction: column;
    height: auto !important;
    padding: 15px 0; } }

.helperAnnotation {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  top: 0;
  padding-top: 60px;
  z-index: 99;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px; }
  .helperAnnotation p {
    font-weight: 500;
    font-size: 16px;
    margin-bottom: 0;
    margin-top: 25px;
    color: #138BFA;
    padding: 10px 25px;
    border-radius: 15px;
    text-align: center; }
  .helperAnnotation .closeModal {
    width: 14px;
    top: 10px;
    right: 10px; }

.helperAnnotation-active {
  display: flex !important; }

.helperVideo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: white;
  padding: 30px;
  border-radius: 10px;
  width: 100%;
  max-width: 600px;
  margin-top: 90px;
  position: relative; }
  .helperVideo video {
    width: 100%;
    border-radius: 10px; }
  .helperVideo .blue-button {
    cursor: initial !important; }

#prediction_file_button {
  color: white;
  border-radius: 30px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center; }
  #prediction_file_button:active, #prediction_file_button:focus {
    color: white !important; }

.pricingTable {
  width: 100%;
  display: none;
  flex-direction: column;
  background: #f9f9f9;
  border-radius: 8px;
  margin-top: 30px;
  margin-bottom: 70px;
  box-shadow: 1px 3px 15px #dcdcdc; }
  @media (min-width: 1200px) {
    .pricingTable {
      display: flex; } }
  .pricingTable ul {
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    margin: 0; }
    .pricingTable ul li {
      list-style-type: none;
      width: 100%;
      color: #333b46; }
      .pricingTable ul li:first-of-type {
        padding: 20px; }
  .pricingTable .first-col li {
    color: #FF5630; }

.first-col li {
  position: relative;
  height: 75px;
  border-right: 1px solid #f2f2f2;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 500; }
  .first-col li:first-of-type {
    justify-content: flex-start !important; }
  .first-col li:last-of-type {
    border-right: none; }

.second-col li {
  height: 55px;
  border-top: 1px solid #f2f2f2;
  display: flex;
  justify-content: center;
  align-items: center;
  border-right: 1px solid #f2f2f2;
  font-weight: 500; }
  .second-col li:first-of-type {
    justify-content: flex-start !important;
    font-weight: 400 !important; }
  .second-col li:last-of-type {
    border-right: none; }

.third-col li {
  height: 55px;
  border-top: 1px solid #f2f2f2;
  display: flex;
  justify-content: center;
  align-items: center;
  border-right: 1px solid #f2f2f2;
  font-weight: 500; }
  .third-col li:first-of-type {
    justify-content: flex-start !important;
    font-weight: 400 !important; }
  .third-col li:last-of-type {
    border-right: none; }

.fourth-col li {
  height: 55px;
  border-top: 1px solid #f2f2f2;
  display: flex;
  justify-content: center;
  align-items: center;
  border-right: 1px solid #f2f2f2;
  font-weight: 500; }
  .fourth-col li:first-of-type {
    justify-content: flex-start !important;
    font-weight: 400 !important; }
  .fourth-col li:last-of-type {
    border-right: none; }

.fifth-col li,
.sixth-col li {
  height: 80px;
  border-top: 1px solid #f2f2f2;
  display: flex;
  justify-content: center;
  align-items: center;
  border-right: 1px solid #f2f2f2;
  font-weight: 500; }
  .fifth-col li:first-of-type,
  .sixth-col li:first-of-type {
    justify-content: flex-start !important;
    font-weight: 400 !important; }
  .fifth-col li:last-of-type,
  .sixth-col li:last-of-type {
    border-right: none; }

.seventh-col li {
  height: 80px;
  border-top: 1px solid #f2f2f2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-right: 1px solid #f2f2f2;
  font-weight: 400; }
  .seventh-col li:first-of-type {
    justify-content: flex-start !important; }
  .seventh-col li:last-of-type {
    border-right: none; }
  .seventh-col li b {
    font-weight: 500; }

.eighth-col li {
  position: relative;
  height: 170px;
  border-top: 1px solid #f2f2f2;
  width: 230px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-right: 1px solid #f2f2f2; }
  .eighth-col li:first-of-type {
    justify-content: flex-start !important;
    align-items: flex-start;
    padding-top: 40px !important; }
  .eighth-col li:last-of-type {
    border-right: none; }

.pricingTable-active-header {
  background: #FF5630;
  color: white !important; }
  .pricingTable-active-header:before {
    content: "";
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
    height: 20px;
    background: #f7941d;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px; }

.pricingTable-active-footer:before {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 0;
  width: 100%;
  height: 20px;
  background: white;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  box-shadow: 1px 10px 15px #dcdcdc; }

.row-price p {
  font-weight: bold;
  font-size: 23px;
  margin-top: 0; }

.row-price-btn {
  padding: 10px 40px !important;
  transition: none !important; }
  @media (min-width: 639px) {
    .row-price-btn {
      padding: 10px 55px !important; } }

.newpricingpage .container {
  max-width: 1200px; }

.newpricingpage .pricingTable p {
  margin: 0; }

.newpricingpage .pricingTable ul {
  background-color: #fff; }
  .newpricingpage .pricingTable ul:first-child {
    border-radius: 15px 15px 0 0; }
  .newpricingpage .pricingTable ul:last-child {
    border-radius: 0 0 15px 15px; }
  .newpricingpage .pricingTable ul li {
    height: 130px;
    padding: 1rem;
    color: #595959;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: flex-start; }
    .newpricingpage .pricingTable ul li form {
      margin: 0; }
  .newpricingpage .pricingTable ul li.title_type {
    font-size: 18px;
    font-weight: 600;
    color: #138BFA;
    align-items: flex-start;
    padding-left: 3rem; }
  .newpricingpage .pricingTable ul li.title_plan {
    font-size: 18px;
    font-weight: 600;
    align-items: center;
    justify-content: flex-start; }

.newpricingpage .pricingTable ul.new-first-col {
  background-color: #fbf9f9; }

.newpricingpage .new-second-col,
.newpricingpage .new-third-col,
.newpricingpage .new-fourth-col {
  border-bottom: 1px solid #D8D8D8; }

.newpricingpage .row-price-btn {
  padding: 5px 20px !important;
  margin-top: 20px;
  text-align: center;
  display: block;
  box-shadow: 0px 2px 9px 0px rgba(111, 111, 111, 0.5);
  white-space: nowrap;
  min-width: 150px;
  font-size: 18px; }
  @media (max-width: 480px) {
    .newpricingpage .row-price-btn {
      min-width: 210px;
      max-width: 210px;
      width: 100%; } }

.newpricingpage .cancel_subscription {
  text-decoration: none; }

.newpricingpage .pricingTable-mobile {
  margin-top: 20px; }
  @media (max-width: 967px) {
    .newpricingpage .pricingTable-mobile ul li:first-of-type {
      flex-direction: column;
      justify-content: center;
      height: auto;
      background: #FBF9F9;
      color: #595959; } }
  .newpricingpage .pricingTable-mobile ul li {
    background-color: #fff;
    border-bottom-color: #f2f2f2; }
    .newpricingpage .pricingTable-mobile ul li form {
      margin-bottom: 0; }
    .newpricingpage .pricingTable-mobile ul li span.title_type {
      font-size: 18px;
      font-weight: 600;
      color: #138BFA;
      width: 40%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start; }
    .newpricingpage .pricingTable-mobile ul li span:last-of-type {
      text-align: left;
      width: 60%;
      font-weight: 400; }

.plan-addons {
  width: 100%;
  background: white;
  border-radius: 8px;
  height: 100%;
  box-shadow: 1px 3px 15px #dcdcdc; }
  @media (min-width: 1200px) {
    .plan-addons {
      max-height: 500px; } }
  .plan-addons ul {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column; }
    .plan-addons ul li {
      list-style-type: none;
      justify-content: space-between;
      align-items: center;
      padding: 25px 10px;
      display: flex;
      border-bottom: 1px solid #ececec; }
      .plan-addons ul li:last-of-type {
        border: 0; }
    .plan-addons ul .addon-title {
      font-weight: 500;
      padding-left: 15px; }
      @media (min-width: 1200px) {
        .plan-addons ul .addon-title {
          padding-left: 30px; } }
    .plan-addons ul .addon-price {
      font-weight: 400;
      max-width: 300px;
      width: 135px;
      text-align: center; }
      @media (min-width: 1200px) {
        .plan-addons ul .addon-price {
          width: 100%;
          text-align: initial; } }
      .plan-addons ul .addon-price b {
        color: #FF5630;
        font-size: 22px;
        font-weight: 500; }

.face-addons {
  width: 100%;
  background: white;
  border-radius: 8px;
  box-shadow: 1px 3px 15px #dcdcdc;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  max-height: 400px;
  margin: 50px 0; }
  @media (min-width: 1200px) {
    .face-addons {
      margin: initial; } }
  .face-addons h3 {
    font-size: 22px;
    margin-top: 20px;
    margin-bottom: 0; }
  .face-addons b {
    font-size: 22px;
    color: #FF5630; }
  .face-addons p {
    font-weight: 500; }
  .face-addons img {
    margin: 25px 0; }

.pricingPage h2 {
  width: 100%;
  color: #333b46;
  font-size: 32px;
  padding-left: 15px;
  text-align: center; }

.pricingPage h1 {
  width: 100%;
  color: #138BFA;
  font-size: 32px;
  padding-left: 15px;
  margin-top: 0;
  text-align: center; }

.pricingPage h4 {
  width: 100%;
  font-size: 16px;
  color: #595959;
  text-align: center;
  font-weight: 400; }

.pricingPage .contactUsModal .modal-title {
  color: #FF5630; }

.pricingPage .contactUsModal .contactForm {
  padding: 0 30px; }
  .pricingPage .contactUsModal .contactForm form {
    margin: 0; }
  .pricingPage .contactUsModal .contactForm p {
    color: #58595B; }
  .pricingPage .contactUsModal .contactForm .messageTextarea {
    height: 150px;
    resize: none;
    margin-bottom: 15px; }
    .pricingPage .contactUsModal .contactForm .messageTextarea:focus {
      box-shadow: none;
      border-color: #ced4da; }
  .pricingPage .contactUsModal .contactForm .submitButton {
    height: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 215px;
    margin: 0 auto; }
  .pricingPage .contactUsModal .contactForm .alert-success,
  .pricingPage .contactUsModal .contactForm .alert-danger {
    padding: 5px 10px; }

.pricingTable-mobile {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 600px;
  margin: 0 auto; }
  @media (min-width: 1200px) {
    .pricingTable-mobile {
      display: none; } }
  .pricingTable-mobile ul {
    margin: 0;
    padding: 0;
    display: flex;
    width: 100%;
    flex-direction: column;
    background: #f9f9f9;
    box-shadow: 1px 3px 15px #dcdcdc;
    border-radius: 8px;
    margin-bottom: 50px; }
    .pricingTable-mobile ul li {
      list-style-type: none;
      display: flex;
      width: 100%;
      color: #333b46;
      padding: 25px 20px;
      border-bottom: 1px solid #f2f2f2;
      justify-content: space-between; }
      .pricingTable-mobile ul li:first-of-type {
        color: #FF5630;
        font-weight: 500;
        justify-content: center;
        font-size: 22px;
        height: 70px;
        align-items: center; }
      .pricingTable-mobile ul li:last-of-type {
        height: 100px;
        align-items: center; }
      .pricingTable-mobile ul li span {
        line-height: 23px; }
        .pricingTable-mobile ul li span:last-of-type {
          font-weight: 500;
          text-align: right; }
        .pricingTable-mobile ul li span b {
          font-size: 18px;
          color: #595959; }

.pricingPage {
  float: left;
  width: 100%;
  padding: 50px 0; }

.annotorious-editor-button-cancel {
  font-weight: 500;
  font-size: 14px;
  padding: 4px 15px;
  width: 80px; }

.annotorious-editor-button-save {
  border-radius: 10px;
  font-weight: 500;
  font-size: 14px;
  color: floralwhite;
  padding: 7px 15px; }
  .annotorious-editor-button-save:hover {
    color: white; }

.annotorious-editor {
  padding: 10px; }

.annotorious-editor-text {
  resize: none;
  border-radius: 5px;
  font-size: 14px;
  color: #535353;
  background: #F7F7F7;
  border: 1px solid #EAEAEA;
  border-radius: 5px;
  font-weight: 400; }

.annotorious-editor-recomended-container {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 100%;
  flex-wrap: wrap;
  flex-direction: row;
  margin-top: 5px;
  margin-bottom: 10px; }
  .annotorious-editor-recomended-container .tag_button {
    background: #F2E9FA;
    color: #303030;
    font-weight: 600;
    font-size: 14px;
    border: none;
    border-radius: 6px;
    padding: 0 10px;
    margin-left: 0;
    margin-right: 5px;
    margin-bottom: 5px;
    margin-top: 0 !important;
    letter-spacing: 0.5px;
    height: 36px;
    line-height: 36px;
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 300px; }
    .annotorious-editor-recomended-container .tag_button:focus, .annotorious-editor-recomended-container .tag_button:active {
      color: #0A2E60 !important; }
  .annotorious-editor-recomended-container .selectedTagButton {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 15px;
    background: #210835;
    border-radius: 6px;
    margin-right: 8px;
    margin-bottom: 8px;
    color: #F2E9FA;
    font-family: "Euclid Circular B";
    font-size: 14px;
    font-weight: 600; }
    .annotorious-editor-recomended-container .selectedTagButton .closeTag {
      width: 12px;
      height: 12px;
      background: url(../img/ch-close-white-normal.svg) center center no-repeat;
      margin-left: 10px;
      border: none; }

.customModal-light {
  padding: 20px; }
  .customModal-light .customModalInner {
    max-height: initial !important;
    height: 100%;
    width: 900px;
    max-width: 900px;
    background: white !important;
    overflow-y: hidden;
    padding: 20px;
    padding-top: 0;
    border-radius: 8px; }
  .customModal-light #prediction_list .prediction_model {
    height: initial;
    flex-direction: column; }

.testViaUploadModal .customModalInner {
  padding: 0; }

.predictionResultWrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  justify-content: center;
  position: relative; }

.predictionResultImage {
  width: 100%;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  background: #ECE9E6;
  /* background: -webkit-linear-gradient(to right, #FFFFFF, #ECE9E6);
    background: linear-gradient(to right, #FFFFFF, #ECE9E6);*/
  background: #fafafa;
  padding: 50px 0; }

.predictionResultList {
  width: 100%;
  padding: 0 15px; }
  .predictionResultList h5 {
    color: #F68F20;
    font-size: 18px;
    position: relative; }
    .predictionResultList h5 span {
      padding: 0;
      background-color: #ffffff;
      position: relative;
      z-index: 1; }
    .predictionResultList h5:after {
      width: 100%;
      height: 1px;
      background-color: #EDEDED;
      position: absolute;
      top: 50%;
      left: 0;
      content: ''; }

.predictionMatchResult {
  width: 100%;
  padding: 0 !important;
  margin-bottom: 15px; }
  .predictionMatchResult .faceResultPersonName {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; }
  .predictionMatchResult .prediction_model {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 0;
    padding: 15px;
    flex-direction: column;
    border: solid 2px #fff;
    margin: 0; }
    @media (min-width: 1200px) {
      .predictionMatchResult .prediction_model {
        flex-direction: row; } }
    .predictionMatchResult .prediction_model li {
      font-size: 16px;
      flex-direction: column;
      display: flex;
      align-items: center;
      margin: 5px 15px; }
      @media (min-width: 1200px) {
        .predictionMatchResult .prediction_model li {
          display: initial;
          margin: 0 15px; } }
      @media (max-width: 1366px) {
        .predictionMatchResult .prediction_model li {
          font-size: 14px; } }
      .predictionMatchResult .prediction_model li b,
      .predictionMatchResult .prediction_model li strong {
        font-weight: 500; }

.prediction_result_list_each {
  border: 0 !important;
  border-radius: 8px;
  padding: 15px !important;
  margin: 0; }
  .prediction_result_list_each .faceResultPersonName {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: right; }
  .prediction_result_list_each li {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    padding: 0 15px; }
    .prediction_result_list_each li b {
      font-weight: 500;
      width: 80px;
      position: relative;
      margin-right: 10px; }
      .prediction_result_list_each li b:after {
        position: absolute;
        right: 0;
        top: 0;
        content: ':'; }

.similarResult,
.similarImgResult {
  justify-content: center !important;
  padding: 0 !important; }

.similarResult b {
  font-size: 20px; }

.closePredictionResult {
  /*position: absolute;
  top: 10px;
  right: 10px;*/
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 9;
  padding: 0;
  text-align: center;
  width: 15px;
  height: 15px;
  opacity: 0.7; }

@media (min-width: 1024px) {
  .customPaddingCaption {
    padding-right: 130px; } }

@media (min-width: 1024px) {
  .absouluteBackBtn {
    position: absolute !important;
    left: 30px; } }

.absoluteContainerSubBar {
  justify-content: center !important; }

.add_image_button {
  cursor: pointer;
  color: White !important; }
  .add_image_button:hover {
    color: white !important; }

.status_red {
  font-weight: 500;
  color: #ff4b4b !important; }

.status_green {
  font-weight: 500;
  color: #56ca60 !important; }

.status_yellow {
  font-weight: 500;
  color: #fac824 !important; }

.facial_training_detail .subBar {
  flex-direction: column;
  height: auto; }
  @media (min-width: 1200px) {
    .facial_training_detail .subBar {
      justify-content: space-between !important;
      flex-direction: row;
      height: 70px; } }
  .facial_training_detail .subBar button {
    margin: 15px 0; }
    @media (min-width: 1200px) {
      .facial_training_detail .subBar button {
        margin: initial; } }
  .facial_training_detail .subBar .backBtn {
    position: initial !important; }

.paginationWrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 15px 0; }
  .paginationWrapper .pagination {
    margin: 0 !important; }
  .paginationWrapper .pagination a {
    color: black;
    text-decoration: none;
    transition: background-color .3s;
    border: 1px solid #ddd;
    font-size: 18x;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px; }
  .paginationWrapper .pagination a.active {
    background-color: #f7941d !important;
    color: white;
    border: 1px solid #f7941d; }
  .paginationWrapper .pagination a:hover:not(.active) {
    background-color: #ddd; }
  .paginationWrapper .gotext {
    width: 55px;
    height: 35px;
    font-size: 16px;
    font-family: "Roboto";
    border: 0;
    text-align: center; }
  .paginationWrapper #gotext {
    margin: 0 5px; }
  .paginationWrapper #go {
    background: #FF5630;
    border: 0;
    color: white;
    font-family: "Roboto";
    cursor: pointer; }

.obj_datasetName {
  color: #0A2E60;
  text-decoration: underline; }
  .obj_datasetName:hover, .obj_datasetName:active, .obj_datasetName:focus {
    color: #fff !important;
    text-decoration: underline; }

.folder-error {
  color: red;
  text-align: center; }

.shareFolderContentArea {
  background: #ffffff; }
  .shareFolderContentArea .topBarLogo {
    width: 150px; }
  .shareFolderContentArea .breadCrumb {
    margin-top: 0; }
  .shareFolderContentArea .shareFolderHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0; }
    @media (max-width: 768px) {
      .shareFolderContentArea .shareFolderHeader {
        flex-direction: column;
        padding-top: 20px; } }
    .shareFolderContentArea .shareFolderHeader .topRight {
      display: flex;
      justify-content: flex-end;
      align-items: center; }
      @media (max-width: 768px) {
        .shareFolderContentArea .shareFolderHeader .topRight {
          flex-direction: column;
          width: 100%; } }
  .shareFolderContentArea .downloadAllBtn {
    margin: 0 0 0 15px;
    padding: 2px 15px; }
    @media (max-width: 768px) {
      .shareFolderContentArea .downloadAllBtn {
        margin: 10px auto;
        max-width: 160px;
        width: 100%; } }
  .shareFolderContentArea #choochGallery {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap; }
    @media (max-width: 480px) {
      .shareFolderContentArea #choochGallery {
        flex-direction: column; } }
  .shareFolderContentArea .eachGalleryItem {
    opacity: 1 !important;
    position: relative;
    padding: 20px 20px 20px 0 !important;
    min-width: 175px;
    max-width: 175px; }
    @media (max-width: 480px) {
      .shareFolderContentArea .eachGalleryItem {
        display: block; } }
    .shareFolderContentArea .eachGalleryItem .brand-checkbox {
      position: absolute;
      top: 85px;
      left: 10px;
      z-index: 10; }
    .shareFolderContentArea .eachGalleryItem .galleryThumbnailWrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      position: relative; }
      .shareFolderContentArea .eachGalleryItem .galleryThumbnailWrapper .galleryThumbnailBox {
        border: 1px solid #ECECEC;
        border-radius: 10px 10px 0 0;
        margin-bottom: 5px;
        overflow: hidden; }
      .shareFolderContentArea .eachGalleryItem .galleryThumbnailWrapper .galleryThumbnail {
        opacity: 1 !important;
        max-height: 100px;
        position: static;
        margin: 0 !important;
        width: auto !important; }
        @media (max-width: 480px) {
          .shareFolderContentArea .eachGalleryItem .galleryThumbnailWrapper .galleryThumbnail {
            max-height: auto; } }
    .shareFolderContentArea .eachGalleryItem .galleryFileName {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin: 0;
      font-size: 14px;
      background: #ECECEC;
      padding: 4px 5px;
      color: #595959;
      border-radius: 0 0 10px 0; }
    .shareFolderContentArea .eachGalleryItem .itemFooter {
      display: flex;
      justify-content: space-between; }
      .shareFolderContentArea .eachGalleryItem .itemFooter .dropdown-item {
        width: 40px;
        height: 30px;
        background: #ECECEC !important;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 5px;
        border-radius: 0 0 0 10px; }
        .shareFolderContentArea .eachGalleryItem .itemFooter .dropdown-item img {
          height: 14px; }
  .shareFolderContentArea #file_div {
    width: 100%;
    margin: 15px 0 0 0; }
    .shareFolderContentArea #file_div .folderOptions {
      top: 35%; }
    .shareFolderContentArea #file_div .selectAndOptions {
      position: relative;
      float: none;
      width: 100%;
      height: 100%;
      position: absolute;
      margin: 0; }
      .shareFolderContentArea #file_div .selectAndOptions .arrow {
        transform: rotate(90deg);
        right: -10px;
        left: auto;
        top: 14px; }
    .shareFolderContentArea #file_div .dropdown-menu {
      transform: none !important;
      right: 40px !important;
      left: auto !important;
      min-width: auto;
      width: 80px;
      border-radius: 10px !important;
      margin-top: -26px; }
    .shareFolderContentArea #file_div .dropdown-item {
      padding: 0 !important;
      text-align: center;
      cursor: pointer;
      width: 40px;
      height: 30px;
      position: relative; }
      .shareFolderContentArea #file_div .dropdown-item img {
        position: static !important;
        opacity: 1 !important; }
  .shareFolderContentArea .openFolder {
    margin-left: 0; }

.newPassword .contentArea {
  padding-top: 40px;
  margin: 0; }
  @media max967 {
    .newPassword .contentArea {
      padding-top: 20px; } }

.newPassword .newPasswordContainer .showPassword {
  position: absolute;
  right: 15px;
  top: 12px;
  width: 30px;
  height: 30px;
  cursor: pointer; }

.newPassword .newPasswordContainer .showPassword.active {
  opacity: 0.5; }

.newPassword .forgotPwWrapper {
  margin-bottom: 40px; }

.updateUserStatus .signupBg,
.signupSuccess .signupBg {
  padding: 0;
  background-color: white; }
  @media (max-width: 480px) {
    .updateUserStatus .signupBg,
    .signupSuccess .signupBg {
      padding: 50px 0; } }

.updateUserStatus .signupArea,
.signupSuccess .signupArea {
  background-color: #ffffff; }

.updateUserStatus .orange-button,
.updateUserStatus .blue-button,
.updateUserStatus .signUpFormBtn,
.signupSuccess .orange-button,
.signupSuccess .blue-button,
.signupSuccess .signUpFormBtn {
  float: none;
  color: #ffffff;
  padding: 8px 20px;
  text-decoration: none;
  min-width: 150px;
  display: inline-block;
  height: auto; }
  .updateUserStatus .orange-button:focus,
  .updateUserStatus .blue-button:focus,
  .updateUserStatus .signUpFormBtn:focus,
  .signupSuccess .orange-button:focus,
  .signupSuccess .blue-button:focus,
  .signupSuccess .signUpFormBtn:focus {
    color: #ffffff !important; }

.dz-error-mark img {
  width: 40px; }

.helpVideo {
  padding: 6px 10px;
  width: 124px;
  font-weight: 500;
  z-index: 9999; }
  @media (max-width: 480px) {
    .helpVideo {
      width: 38px;
      height: 38px;
      padding: 0;
      border-radius: 100%;
      font-size: 0; } }
  .helpVideo .videoIcon {
    margin-right: 5px;
    display: none; }
    @media (max-width: 480px) {
      .helpVideo .videoIcon {
        margin: 0;
        width: 20px;
        display: block; } }

.btnOk {
  width: auto;
  height: 35px; }

.stickyMenu {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 99999;
  width: 41px;
  height: 41px;
  background: url(../img/ch-help-white.svg) center center no-repeat;
  background-color: #138BFA;
  box-shadow: 0px 4px 13px #A0B6F0;
  border-radius: 9px;
  transition: all 0.2s ease-in;
  overflow: hidden; }
  .stickyMenu .menu-toggler {
    width: 41px;
    height: 41px;
    z-index: 2;
    opacity: 0;
    cursor: pointer; }
  .stickyMenu .menuPopup {
    background: #FFFFFF;
    box-shadow: 0px 4px 20px rgba(176, 170, 170, 0.25);
    border-radius: 9px;
    position: fixed;
    right: 20px;
    bottom: 75px;
    width: 274px;
    /*height: 238px;*/
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease-in; }
    .stickyMenu .menuPopup ul {
      padding: 20px 15px;
      margin: 0;
      height: 100%; }
      .stickyMenu .menuPopup ul li {
        margin-bottom: 15px; }
        .stickyMenu .menuPopup ul li:first-child {
          display: none; }
        .stickyMenu .menuPopup ul li:last-child {
          margin-bottom: 0;
          display: block; }
        .stickyMenu .menuPopup ul li a {
          border-radius: 8px;
          color: #595959;
          font-size: 12px;
          font-weight: 500;
          padding: 10px 15px;
          display: block;
          background: #F5F7FB url(../img/chevron-right-dark-gray.svg) 95% center no-repeat; }
    .stickyMenu .menuPopup h5 {
      background: #138BFA;
      border-radius: 9px 9px 0px 0px;
      margin: 0;
      display: flex;
      align-items: center;
      height: 45px;
      padding: 0 15px;
      color: #ffffff;
      font-size: 14px;
      font-weight: 500; }
    .stickyMenu .menuPopup .icon {
      margin-right: 15px; }
  .stickyMenu input[type="checkbox"]:checked ~ .menuPopup {
    visibility: visible;
    opacity: 1; }

#launcher {
  display: none; }

.pricingPage {
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(247, 249, 255, 0.71)), to(rgba(247, 249, 255, 0.71))), url(../img/groovepaper_@2X.png);
  background: linear-gradient(0deg, rgba(247, 249, 255, 0.71), rgba(247, 249, 255, 0.71)), url(../img/groovepaper_@2X.png); }
  .pricingPage .pageInnerCV {
    font-size: 16px;
    line-height: 31px;
    color: #4A4A4A;
    text-align: left; }
    .pricingPage .pageInnerCV h2 {
      font-weight: 600;
      font-size: 21px;
      line-height: 29px;
      color: #138BFA;
      margin: 30px 0;
      padding: 0;
      text-align: left;
      text-transform: uppercase; }
    .pricingPage .pageInnerCV ul {
      list-style: inside;
      padding-left: 20px;
      text-transform: uppercase; }
      .pricingPage .pageInnerCV ul a {
        text-decoration: underline; }

.pricingPageNavigation {
  display: none;
  position: relative; }
  @media (max-width: 967px) {
    .pricingPageNavigation {
      display: block;
      left: 15px; } }

.nothingToSeeHere {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: #0367A6;
  font-size: 24px; }
  .nothingToSeeHere h5 {
    font-size: 24px; }
  .nothingToSeeHere p {
    font-family: "Euclid Circular B";
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 36px;
    color: #210835; }
  .nothingToSeeHere p {
    font-family: "Euclid Circular B";
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 36px;
    color: #210835; }
  .nothingToSeeHere .placeholderPurpleText {
    color: #8020CF !important; }
  .nothingToSeeHere .nodataPlaceholder {
    margin: 20px 0; }

.disable_download {
  cursor: default !important;
  pointer-events: none;
  color: rgba(89, 89, 89, 0.4);
  background: rgba(155, 155, 155, 0.2) url(../img/ch-download-gray.svg) 12px center no-repeat; }

.upgradePlanModal .modal-content {
  background-color: #fff !important;
  border-radius: 4px;
  height: auto;
  padding-bottom: 20px;
  flex-wrap: wrap;
  color: #595959;
  margin-top: 0; }

.upgradePlanModal .modal-dialog {
  max-width: 815px;
  align-items: center;
  margin-top: 0; }

.upgradePlanModal .modal-body {
  width: 100%;
  padding: 25px 32px; }

.upgradePlanModal .modal-header {
  width: 100%;
  text-align: center;
  border: 0;
  align-items: center;
  padding-left: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #E5E5E5; }

.upgradePlanModal .modal-title {
  color: #210835;
  text-align: center !important;
  text-transform: capitalize;
  width: 100%;
  font-size: 18px;
  font-weight: 600;
  line-height: 20px; }

.upgradePlanModal .mCSB_container {
  padding: 1px; }

.upgradePlanModal .apiLimitReached {
  color: #8020CF;
  font-size: 19px;
  font-weight: 600;
  line-height: 21.025px;
  margin-bottom: 14px;
  text-align: center; }

.upgradePlanModal .pricing-info-card {
  border-radius: 10px;
  border: 1px solid #F7F7F7;
  background: #F7F7F7;
  box-shadow: 1px 1px 3px 0px rgba(22, 22, 22, 0.08);
  padding: 12px; }
  .upgradePlanModal .pricing-info-card .pricing-info-card-header {
    color: #210835;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px; }
  .upgradePlanModal .pricing-info-card .current-usage-link {
    color: #0052CC;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-decoration-line: underline;
    text-underline-offset: 5px;
    cursor: pointer; }
  .upgradePlanModal .pricing-info-card .info-item {
    display: flex;
    align-items: center;
    color: #210835;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    margin-top: 10px; }
    .upgradePlanModal .pricing-info-card .info-item img {
      margin-right: 7px;
      width: 20px;
      height: 20px; }

.contactFormPopup {
  background: #FFFFFF;
  box-shadow: 0px 4px 20px rgba(176, 170, 170, 0.25);
  border-radius: 9px;
  position: fixed;
  right: 20px;
  bottom: 75px;
  z-index: 101111;
  width: 350px;
  overflow: hidden;
  display: none; }
  .contactFormPopup .formContainer {
    padding: 0 15px 0 15px; }
    .contactFormPopup .formContainer iframe {
      height: 565px; }
  .contactFormPopup .successArea {
    position: absolute;
    top: 45px;
    width: 100%;
    height: 90%;
    padding: 20px;
    text-align: center;
    background: #ffffff;
    display: none; }
    .contactFormPopup .successArea img {
      max-height: 150px; }
    .contactFormPopup .successArea p {
      color: #595959;
      font-size: 16px;
      margin-bottom: 40px; }
    .contactFormPopup .successArea .textBlue {
      font-size: 17px;
      font-weight: 500;
      color: #138BFA;
      margin-top: 15px;
      margin-bottom: 10px; }
    .contactFormPopup .successArea a {
      text-decoration: underline;
      color: #138BFA; }
  .contactFormPopup .form {
    padding: 15px;
    margin: 0;
    height: 100%; }
    .contactFormPopup .form label {
      width: 100%;
      display: block;
      margin-bottom: 5px;
      color: #595959;
      font-size: 16px; }
    .contactFormPopup .form input[type="text"] {
      border: 1px solid #d8dcde;
      color: #2f3941;
      font-size: 14px;
      width: 100% !important;
      border-radius: 4px;
      min-height: 40px;
      padding: 0 10px; }
    .contactFormPopup .form .subjectTextArea {
      border: 1px solid #d8dcde;
      color: #2f3941;
      font-size: 14px;
      width: 100%;
      border-radius: 4px;
      resize: none;
      padding: 10px;
      height: 76px !important; }
  .contactFormPopup .formHeader {
    background: #138BFA;
    border-radius: 9px 9px 0px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 45px;
    padding: 0 15px; }
    .contactFormPopup .formHeader h5 {
      color: #ffffff;
      font-size: 16px;
      font-weight: 500;
      margin: 0;
      width: 100%;
      text-align: center;
      text-indent: 20px; }
    .contactFormPopup .formHeader .closePopup {
      background: transparent;
      border: 0;
      font-size: 30px;
      color: #ffffff;
      width: 20px;
      height: 20px;
      cursor: pointer;
      display: inline-flex;
      justify-content: center;
      align-items: center; }
  .contactFormPopup .formFooter {
    padding: 10px 15px;
    border-top: 0.0785714rem solid #e9ebed;
    box-shadow: rgba(0, 0, 0, 0.08) 0px -0.0714286rem 0.857143rem;
    display: flex;
    justify-content: flex-end;
    align-items: center; }
    .contactFormPopup .formFooter .btnSubmit {
      background: #138BFA;
      padding: 5px 15px;
      color: #ffffff;
      font-size: 14px;
      border-radius: 4px;
      border: none;
      font-weight: 500;
      cursor: pointer; }
  .contactFormPopup .error {
    font-size: 12px;
    padding-left: 24px;
    background: url(../img/ch-info-red.svg) left center no-repeat;
    color: #EB5857;
    background-size: 16px;
    margin-top: 5px;
    display: none; }

.modal-backdrop.show +
.modal-backdrop.show +
.modal-backdrop.show +
.modal-backdrop.show {
  opacity: 0 !important; }

.toast-message-success {
  min-width: 360px;
  height: 51px;
  background: #E3FCEF;
  box-shadow: 2px 5px 20px rgba(65, 65, 65, 0.08);
  border-radius: 6px;
  font-family: "Euclid Circular B";
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #303030;
  display: none;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  right: 15px;
  top: 15px;
  padding: 15px 20px;
  z-index: 9999; }
  .toast-message-success .icon {
    width: 18px;
    height: 18px;
    margin-right: 10px; }
  .toast-message-success .toast-close {
    cursor: pointer; }

.toast-message {
  min-width: 360px;
  height: 82px;
  background: #E3FCEF;
  box-shadow: 2px 5px 20px rgba(65, 65, 65, 0.08);
  border-radius: 6px;
  font-family: "Euclid Circular B";
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #303030;
  display: none;
  align-items: center;
  justify-content: space-between;
  position: absolute !important;
  right: 20px;
  top: 50px;
  padding: 15px 20px;
  z-index: 9999; }
  .toast-message .toast-close {
    cursor: pointer; }

.cancelDownloadProcess .cancelWarn_process_inner {
  padding: 0;
  height: auto; }

.cancelDownloadProcess .header {
  padding: 20px 30px;
  position: relative;
  width: 100%;
  text-align: left;
  font-size: 20px;
  color: #303030;
  font-weight: 500;
  display: flex;
  align-items: center;
  margin-top: 0; }
  .cancelDownloadProcess .header .icon {
    margin-right: 10px; }

.cancelDownloadProcess .closeModal {
  padding: 0 !important; }

.cancelDownloadProcess p {
  padding: 10px 30px 15px;
  margin: 0;
  text-align: left;
  font-size: 16px;
  color: #595959;
  font-weight: 400;
  width: 100%;
  line-height: 24px; }

.cancelDownloadProcess .cancel-trueProcess {
  background: #BF2600;
  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.08), inset 0px -1px 0px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  color: #fff;
  height: 36px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0 15px;
  font-size: 14px;
  width: auto; }

.cancelDownloadProcess .cancel-falseProcess {
  color: #303030;
  font-size: 14px;
  font-weight: 500;
  padding: 0 15px;
  margin-right: 0; }
  .cancelDownloadProcess .cancel-falseProcess:hover, .cancelDownloadProcess .cancel-falseProcess:focus {
    color: #303030; }

.cancelDownloadProcess .cancelWarnOptions {
  margin-top: 30px;
  padding: 0 20px 20px; }

.account-type-card {
  width: 360px;
  height: 247px;
  border-radius: 8.76px;
  border: 0.876px solid #EFF0F6;
  background: #FFF;
  padding: 16px 28px;
  margin-bottom: 35px; }
  .account-type-card .plan-name {
    color: #4E4576;
    font-size: 20px;
    font-weight: 600;
    line-height: 25.859px;
    display: flex;
    align-items: center; }
    .account-type-card .plan-name .icon-square {
      width: 53.196px;
      height: 53.196px;
      margin-right: 15px;
      background-color: #F9F2FF;
      border-radius: 15px;
      display: flex;
      align-items: center;
      justify-content: center; }
    .account-type-card .plan-name .price {
      color: #210835;
      font-size: 35px;
      font-weight: 600;
      line-height: 57.819px;
      margin-left: auto; }
  .account-type-card .plan-description {
    color: #535353;
    font-size: 16px;
    font-weight: 400;
    line-height: 125%;
    margin-top: 15px; }
  .account-type-card .buy-btn {
    width: 100%;
    height: 39px;
    border-radius: 84.1px;
    display: flex;
    padding: 10.512px 33.29px;
    justify-content: center;
    align-items: center;
    background: #8020CF;
    color: #FFF;
    font-size: 16px;
    font-weight: 600;
    line-height: 17.521px;
    border: none !important;
    margin-top: auto; }
  .account-type-card .contact-btn-bg {
    width: 100%;
    background: linear-gradient(90deg, #8020CF 0%, #FF00F8 100%);
    height: 43px;
    border-radius: 84.1px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: auto; }
  .account-type-card .contact-btn {
    width: calc(100% - 4px);
    height: 39px;
    border-radius: 84.1px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
    color: #303030;
    font-size: 16px;
    font-weight: 600;
    line-height: 17.521px;
    border: none !important; }
  .account-type-card .disabled-btn {
    width: 100%;
    height: 39px;
    border-radius: 84.1px;
    border: 1.5px solid #EAEAEA;
    display: flex;
    padding: 10px;
    justify-content: center;
    align-items: center;
    background: #EAEAEA;
    color: #B7B7B7;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    line-height: 17.521px;
    margin-top: auto; }