/* ======================================
   API CATALOG REDESIGN
====================================== */
#searchResultsWrapper {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
  align-items: stretch !important;
}
/* Result count row */
/* Hide old divider rows */
#searchResultsWrapper > .search_result_divider {
  display: none !important;
}
#SearchResults .collection_item_container {
  width: 340px !important;
  min-height: 240px !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 16px !important;
  margin: 0 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  transition: .25s ease !important;
}
#SearchResults .collection_item_container:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  border-color: #2563eb !important;
}
#SearchResults .collection_item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
}
#SearchResults .collection_item_title {
  margin: 0 0 12px 0 !important;
}
#SearchResults .collection_item_description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#SearchResults .collection_item_extensions {
  border-top: 1px solid #f1f5f9 !important;
  margin-top: auto !important;
  padding-top: 12px !important;
  color: #64748b !important;
}
#SearchResults .collection_item_logo {
  display: none !important;
}
#SearchResults .collection_item_img {
  margin: 0 !important;
}
#SearchResults .collection_item_img img {
  width: 42px !important;
  height: 42px !important;
  border-radius: 10px !important;
}
#SearchResults .collection_item_title a {
  display: block !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  line-height: 1.4 !important;
  color: #2563eb !important;
  font-weight: 600 !important;
  font-size: 18px !important;
}
/* FILTER BAR */
select,
input[type="text"] {
  height: 40px !important;
  border-radius: 10px !important;
  border: 1px solid #dbe2ea !important;
  font-size: 14px !important;
}
/* Search keyword box */
input[placeholder*="keyword"] {
  width: 400px !important;
}
/* Filter row */
.search_filter,
.search_filters {
  padding: 12px 20px !important;
  background: #f8fafc !important;
  border-radius: 12px !important;
  margin-bottom: 20px !important;
}
/* ==========================================
   MODERN API SEARCH BAR
========================================== */
/* entire filter bar */
/* LEFT FILTER PANEL */
/* ======================================
   FILTERS ONLY ON COLLECTION PAGES
====================================== */
#Content-Widest:has(#ResourceCollectionFilter):has(#APICollection) .soa-ui-cm-filters,
#Content-Widest:has(#ResourceCollectionFilter):has(#APPCollection) .soa-ui-cm-filters,
body:has(#SearchResults) .soa-ui-cm-filters {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
}
/* hide Filter label */
#ResourceCollectionFilter .soa-ui-cm-section-header {
  display: block !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  margin-bottom: 10px !important;
}
/* hide tags */
.soa-ui-cm-tag-search {
  display: block !important;
}
/* API Type */
/* Search button */
#collection_options_submit {
  width: 42px !important;
  height: 42px !important;
  width: 100% !important;
  border-radius: 10px !important;
  background: #2563eb !important;
  color: #fff !important;
}
/* remove ugly search text */
#collection_options_submit i {
  color: #fff !important;
}
/* cleaner results heading */
/* Result count row */
#searchResultsWrapper > div:first-child {
  width: 100% !important;
  flex: 0 0 100% !important;
  display: block !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  margin-bottom: 10px !important;
  clear: both !important;
}
#collection_options_sortby {
  display: block !important;
}
/* MAIN PAGE LAYOUT */
/* LEFT FILTER */
/* RESULTS */
#SearchResults {
  width: auto !important;
  min-width: 0 !important;
}
#Content-Widest:has(#APICollection) #collection_options_type,
#Content-Widest:has(#APICollection) #collection_options_sortby,
#Content-Widest:has(#APICollection) #collection_options_search,
#Content-Widest:has(#APICollection) #soa-control-cm-search-tags,
#Content-Widest:has(#APPCollection) #collection_options_type,
#Content-Widest:has(#APPCollection) #collection_options_sortby,
#Content-Widest:has(#APPCollection) #collection_options_search,
#Content-Widest:has(#APPCollection) #soa-control-cm-search-tags,
body:has(#SearchResults) #collection_options_type,
body:has(#SearchResults) #collection_options_sortby,
body:has(#SearchResults) #collection_options_search,
body:has(#SearchResults) #soa-control-cm-search-tags {
  width: 200px !important;
}
.soa-ui-cm-filters li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.soa-ui-cm-form-row {
  margin: 0 !important;
}
#ResourceCollectionFilter form {
  margin: 0 !important;
}
#ResourceCollectionFilter .soa-ui-cm-filters {
  align-content: flex-start !important;
}
/* SEARCH RESULTS PAGE ONLY */
body:has(#SearchResults) #Content-Widest {
  display: grid !important;
  grid-template-columns: 220px 1fr !important;
  gap: 32px !important;
  align-items: start !important;
}
body:has(#SearchResults) #ResourceCollectionFilter {
  position: sticky !important;
  top: 90px !important;
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 16px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}
/* My APIs / My Apps */
#APICollection .filteredResult {
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
/* My APIs */
#APIfollowings {
  display: none !important;
}
/* My APIs / Collections layout */
/* Only pages that have the API filter */
#Content-Widest:has(#ResourceCollectionFilter):has(#APICollection) {
  flex-direction: row !important;
  align-items: flex-start !important;
}
#ResourceCollectionFilter {
  width: 250px !important;
  min-width: 200px !important;
  flex: 0 0 300px !important;
}
#APICollection {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
}
#APIfollowings {
  display: none !important;
}
/* ======================================
   MY APPS LAYOUT
====================================== */
#Content-Widest:has(#ResourceCollectionFilter):has(#APPCollection) {
  flex-direction: row !important;
  align-items: flex-start !important;
}
#APPCollection {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
}
#APPfollowings {
  display: none !important;
}
/* App cards */
#APPCollection .soa-ui-cm-resource-collection {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}
#APPCollection .soa-ui-cm-card {
  width: 320px !important;
  flex: none !important;
}
/* LOGIN page - Sourabh */
#Login {
  min-height: 100vh;
  padding: 0px;
  background: linear-gradient(135deg, #071b3a, #0d3b7a, #0066ff);
  /*background: url('/content/home/landing/images/LoginImage.jpg') no-repeat center center;*/

  opacity: .9;
}
#soa-control-cm-user-forgot-password-container,
#soa-control-cm-sso-login-widget {
  min-height: 100vh;
  padding: 40px;
  background: linear-gradient(135deg, #071b3a, #0d3b7a, #0066ff);
  /*background: url('/content/home/landing/images/LoginImage.jpg') no-repeat center center;*/

  opacity: .9;
}
#soa-control-cm-user-forgot-password-container {
  min-height: 100vh;
  padding: 40px;
  background: linear-gradient(135deg, #071b3a, #0d3b7a, #0066ff);
  /*background: url('/content/home/landing/images/globe-network.png') no-repeat center center;*/

  opacity: 0.94;
}
/*
#soa-control-cm-signup-page-container {
    min-height: 100vh;
    padding: 40px;
    background:
      linear-gradient(
      135deg,
      #071B3A,
      #0D3B7A,
      #0066FF
    ); */
/*background: url('/content/home/landing/images/globe-network.png') no-repeat center center;*/
/*opacity: .9;
	background-size: cover;
}*/
/* , #soa-control-cm-signup-page-container .soa-ui-cm-content-body */
#Login #soa-control-cm-platform-login-container,
#soa-control-cm-sso-login-widget #soa-control-cm-ssologin,
#soa-control-cm-user-forgot-password-container .soa-ui-cm-content-body {
  max-width: 480px;
  /* 420 */

  margin: 50px auto;
  padding: 40px;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}
.soa-ui-cm-login-form {
  width: 380px;
}
#Login .soa-control-cm-form-row {
  margin-bottom: 18px;
}
/* , #soa-control-cm-signup-page-container .soa-ui-cm-input */
#Login .soa-ui-cm-input,
#soa-control-cm-user-forgot-password-container .soa-ui-cm-input,
#soa-control-cm-sso-login-widget .soa-ui-cm-input {
  width: 100%;
  height: 54px !important;
  border-radius: 12px !important;
  border: 1px solid #D9E2EC !important;
  padding: 0 16px !important;
  font-size: 15px;
  transition: all .2s ease;
}
/*
#soa-control-cm-signup-page-container .soa-ui-cm-input-checkbox {
  padding: 0 16px !important;
  font-size: 15px;
  width: auto !important;
  top: -18px;
}*/
#Login .soa-ui-cm-input:focus {
  border-color: #0066FF !important;
  box-shadow: 0 0 0 4px rgba(0, 102, 255, 0.15);
  outline: none;
}
#Login .soa-ui-cm-input::placeholder {
  color: #94A3B8;
}
/* , #soa-control-cm-signup-page-container #soa-control-cm-button-signup*/
#Login #soa-control-cm-login,
#soa-control-cm-user-forgot-password-container #soa-control-cm-continue,
#soa-control-cm-sso-login-widget #soa-control-cm-login {
  width: 100%;
  height: 56px;
  border: none;
  border-radius: 12px;
  color: white;
  font-size: 16px;
  font-weight: 600;
  transition: all .2s ease;
}
#Login #soa-control-cm-login:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 102, 255, 0.35);
}
#Login .soa-ui-cm-signin-footer {
  text-align: center;
  margin-top: 10px;
}
#Login .soa-ui-cm-signin-footer a {
  color: #0066FF;
  font-weight: 500;
  text-decoration: none;
}
#Login #soa-control-cm-login-register {
  text-align: center;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #E2E8F0;
}
#Login #soa-control-cm-login-register a {
  color: #0066FF;
  font-weight: 600;
  text-decoration: none;
}
#Login .soa-ui-cm-third-party-login-links {
  margin-top: 24px;
}
#Login .soa-ui-cm-thirdparty-login-container {
  background: white;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all .2s ease;
  margin-left: 12px;
  flex: 1;
}
#Login .soa-ui-cm-thirdparty-login-container:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
#Login .soa-ui-cm-login-form::before {
  content: "Sign In";
  display: block;
  font-size: 32px;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 8px;
}
#soa-control-cm-sso-login-widget .soa-ui-cm-login-form::before {
  content: "Employee Login";
  display: block;
  font-size: 32px;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 8px;
}
/* , #soa-control-cm-signup-page-container .soa-ui-cm-content-header*/
#soa-control-cm-user-forgot-password-container .soa-ui-cm-content-header {
  display: none;
}
#soa-control-cm-user-forgot-password-container .soa-ui-cm-login-form::before {
  content: "Reset your password";
  display: block;
  font-size: 32px;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 8px;
}
/*
#soa-control-cm-signup-page-container .soa-control-cm-signup-form::before {
  content: "Sign Up";
  display: block;
  font-size: 32px;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 8px;
}*/
#soa-control-cm-third-party-login-links {
  display: flex;
  flex-wrap: wrap;
}
#soa-control-cm-third-party-login-links::before {
  content: "Corporate Login Options";
  flex-basis: 100%;
  display: block;
  margin-bottom: 15px;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  color: #0F172A;
}
#soa-control-cm-third-party-login-links > li:first-child::after {
  content: "Employee Login";
  display: block;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 8px;
  text-align: center;
  color: #0F172A;
}
#soa-control-cm-third-party-login-links > li:last-child::after {
  content: "TCx Login";
  display: block;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 8px;
  text-align: center;
  color: #0F172A;
}
/* ======================================
   MODERN GLOBAL LOADER
   Akana 2024.1.2
====================================== */
#spinner {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 120px !important;
  height: 120px !important;
  padding: 20px !important;
  border: none !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.1) !important;
  z-index: 99999 !important;
  text-align: center !important;
}
/* Hide old Akana loader */
#spinner span,
#spinner .spinner_logo {
  display: none !important;
}
/* New spinner */
#spinner:before {
  content: "";
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto;
  border-radius: 50%;
  border: 4px solid #e2e8f0;
  border-top-color: #2563eb;
  animation: tataSpinner .8s linear infinite;
}
/* Loading text */
#spinner:after {
  content: "Please wait";
  display: block;
  margin-top: 12px;
  color: #64748b;
  font-size: 14px;
  font-weight: 600;
}
/* Animation */
@keyframes tataSpinner {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
#spinner .spinner_logo {
  background: none !important;
  background-image: none !important;
}