/***App Listing Page css start here **/
.apigee-entity-list .table .table-cell .left-div, .apigee-entity-list .table .table-cell .right-div, .apigee-entity-list .table .table-cell .middle-div {
  /* Set display property to inline-block */
  display: inline-block;
  /* Optional: adjust width and padding */
  width: 33%; /* or any appropriate value */
  padding: 10px;
  /* Optional: adjust vertical alignment */
  vertical-align: top; /* Aligns the divs to the top */
}
.apigee-entity-list .table:nth-child(even) {
  background-color: #f2f2f2; /* Alternate background color */
}
.apigee-entity-list .table {
  display: table;
  width: 100%;
  border-collapse: collapse;
}

.apigee-entity-list .table .table-cell {
  display: table-cell;
  padding: 10px;
  border: 0px solid #ccc;
}

.apigee-entity-list .table .table-cell .left-div {
  float: left;
}

.apigee-entity-list .table .table-cell .middle-div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.apigee-entity-list .table .table-cell .right-div {
  float: right;
  margin-top: -5px;
}


.apigee-entity-list .table .table-cell .menu {
  position: relative;
}

.apigee-entity-list .table .table-cell .menu .toggle-btn {
  cursor: pointer;
  display: inline-block;
  font-size: 20px;
  margin-right: 10px;
  float: right;
  box-shadow: none;
}

.hide_show_box .links {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.hide_show_box .links li {
  margin-bottom: 5px;
}

.hide_show_box .links li a {
  display: block;
  padding: 5px 10px;
  text-decoration: none;
  color: #333;
}

.hide_show_box .links li a:hover {
  background-color: #ddd;
}
.hide_show_box .nav-tabs-details .view_details, .hide_show_box .nav-tabs-details .edit_details,  .hide_show_box .nav-tabs-details .delete_details{
  margin-right: 6px;
}
  
.hide_show_box .nav-tabs-details .delete_details .use-ajax {
  color: red;
}
.hide_show_box ul li:last-child {
  display: none;
}
.hide_show_box .nav-tabs--secondary {
  border-bottom: 0px solid #c8c8c8;
  display: flow-root;
}
.hide_show_box{
 display: none;
 background-color: #ffffff;
 padding: 10px;
 border: 1px solid #ddd;
 border-radius: 5px;
 position: absolute;
 right: 4%;
 z-index: 999;
 padding-bottom: 0px;
}
.app-message{
	background-color: #30343B;
	color: white;
	font-family: Arial, sans-serif;
	margin: 0;
	padding: 20px;
	box-sizing: border-box;
}
.app-message .row{
	margin: 0 auto;
	}	
.app-header{
	font-size: 24px;
	font-weight: bold;
}	
.block--apigee-custom-local-actions .my-4 a {
  float: right;
  margin-bottom: 10px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 12px 20px 12px 24px;
  gap: 12px;
  background: #1E22AA;
  border-radius: initial;
}
.contextual-region.block.block--apigee-custom-quicktabsquicktabapppagesidebarmenus h2 {
  display: none;
}
#quicktabs-quicktab_app_page_sidebar_menus #quicktabs-tab-quicktab_app_page_sidebar_menus-0{
	display:none;
}
#quicktabs-container-quicktab_app_page_sidebar_menus{
  margin-top: -16px;
  background-color: #F7F7F7;
  padding: 0px 16px;
  flex-direction: column;
  align-items: flex-start;
  display: flex;
}
.current-user-app-view-dashboard #quicktabs-tabpage-quicktab_app_page_sidebar_menus-0 .nav {
    display: block;
    background-color: #F7F7F7 !important;
  }
  .current-user-app-view-dashboard #quicktabs-tabpage-quicktab_app_page_sidebar_menus-0 .nav .nav-item a{
    color: var(--text-black-text-black-100, #000) !important;
    font-family: Proxima Nova;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px;
    border: initial !important;
    width: auto;
    text-align: left;
}
.current-user-app-view-dashboard #quicktabs-tabpage-quicktab_app_page_sidebar_menus-0 .nav .nav-item .dropdown-menu.show{
	position: relative !important;
  float: none !important;
   transform: none !important;
  border: 0px solid rgba(0, 0, 0, 0.15) !important;
  background-color: #F7F7F7 !important;
}
.current-user-app-view-dashboard  main{
  width : 88% !important;
  margin: 25px auto 25px 13px !important;
}
.block--apigee-custom-quicktabsquicktabapppagesidebarmenus h2 {
  display: none;
}
.dropdown-menu.show a {
  font-family: proxima nova !important;
}
.current-user-app-view-dashboard .main-container .row {
  margin-right: 0px;
}
@media (min-width: 992px){
  .current-user-app-view-dashboard .main-container .row .col-lg-3{
    flex: 0 0 16% !important;
    max-width: 294px !important;
    padding-right: 0px;
    padding-left: 32px;

}
.current-user-app-view-dashboard .main-container .row .col-lg-9 {
  flex: 0 0 100%;
  max-width: calc(100% - 424px) !important;
  width: 100%;
  margin: 15px 62px 0 62px;
}
.current-user-app-view-dashboard .sub-header .block.block--dataservicessubnavigation {
  display: none;
}
}

/* Responsive styles */
@media only screen and (max-width: 768px) {
  .current-user-app-view-dashboard  main{
    width : 100% !important;
    margin: 25px auto 25px 13px !important;
  }
  
.apigee-entity-list .table .table-cell {
      display: block;
      width: 100%;
      float: none;
  }
  .current-user-app-view-dashboard .sub-header .contextual-region.block.block--dataservicessubnavigation {
    display: block !important;
    text-align: center !important;
  }
  .current-user-app-view-dashboard .sub-header .contextual-region.block.block--dataservicessubnavigation #superfish-menu-sub-navigation-accordion {
    text-align: left;
    background-color: #E1E1E1 !important;
  }
  .current-user-app-view-dashboard .sub-header .block--dataservicessubnavigation #superfish-menu-sub-navigation{
    width: auto !important;
  }
  .current-user-app-view-dashboard #superfish-menu-sub-navigation-accordion .menuparent .sf-has-clone-parent .sf-clone-parent{
    display:none !important;
  }
  .current-user-app-view-dashboard #superfish-menu-sub-navigation-accordion .menuparent .sf-has-clone-parent .sf-depth-2 {
    background: #E1E1E1 !important;
  }
}

@media (max-width: 992px) {
  .current-user-app-view-dashboard #quicktabs-tabpage-quicktab_app_page_sidebar_menus-0 .nav {
    display: none !important;
  }
}

/***App Listing Page css end here **/

/* Add App Popup Styles Start here */

.current-user-app-view-dashboard .apps-lightbox-modal .ui-dialog-titlebar {
  align-self: stretch;
  background: #FFFFFF;
  border-bottom: 1px solid #ddd !important;
  border: none;
}

.current-user-app-view-dashboard .apps-lightbox-modal .ui-dialog-titlebar .ui-dialog-title {
  align-self: stretch;
  color: var(--text-slate-text-slate-100, #30343B);
  text-align: center;
  font-family: "Proxima Nova";
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 36px;
  letter-spacing: -0.068px;
  float: initial;
}

/* App Close button Styles */

.current-user-app-view-dashboard .ui-button.ui-corner-all.ui-widget.ui-button-icon-only.ui-dialog-titlebar-close {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M12.6673 4.27301L11.7273 3.33301L8.00065 7.05967L4.27398 3.33301L3.33398 4.27301L7.06065 7.99967L3.33398 11.7263L4.27398 12.6663L8.00065 8.93967L11.7273 12.6663L12.6673 11.7263L8.94065 7.99967L12.6673 4.27301Z" fill="white"/></svg>') center center no-repeat;
  top: -40% !important;
  right: -3px;
}

/* App Label and Input Styles */

.current-user-app-view-dashboard .developer-app-add-for-developer-form {
  margin-top: 20px;
}

.current-user-app-view-dashboard .developer-app-add-for-developer-form label {
  font-family: 'Proxima Nova';
  font-style: normal;
  font-weight: 700;
  font-size: 12px;
  line-height: 22px;
  display: flex;
  align-items: center;
  letter-spacing: 0.044em;
  text-transform: uppercase;
  color: rgba(48, 52, 59, 0.8);
}

.current-user-app-view-dashboard .developer-app-add-for-developer-form input {
  font-family: 'Proxima Nova';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  /*display: flex;*/
  align-items: center;
  letter-spacing: -0.0016em;
  color: #30343B;
  border-radius: 0;
}

.current-user-app-view-dashboard .developer-app-add-for-developer-form textarea.form-textarea {
  font-family: 'Proxima Nova';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  align-items: center;
  letter-spacing: -0.0016em;
  color: #30343B;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 12px;
  gap: 12px;
  width: 552px;
  height: 194px;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.24);
  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 1;
  border-radius: 0;
}

/* App Save and Delete Styles */

.current-user-app-view-dashboard .apps-lightbox-modal .ui-dialog-buttonset button.form-submit {
  justify-content: center;
  padding: 12px 24px;
  gap: 20px;
  background: #1E22AA;
  flex: none;
  order: 1;
  flex-grow: 0;
  font-family: 'Proxima Nova';
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  display: flex;
  align-items: center;
  letter-spacing: -0.0016em;
  color: #FFFFFF;
  border-radius: 0;
}

.current-user-app-view-dashboard .apps-lightbox-modal button.button--danger  {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 12px 20px 12px 24px;
  gap: 12px;
  width: 94px;
  height: 48px;
  background: #EEEFEF;
  flex: none;
  font-family: 'Proxima Nova';
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  align-items: center;
  letter-spacing: -0.0016em;
  color: #30343B;
  order: 0;
  flex-grow: 0;
  border-radius: 0;
}

/* Adjusted the Top of the Modal-popup */

.current-user-app-view-dashboard .apps-lightbox-modal {
  top: 105px !important;
}

/* App Mobile Styles for screens below 768 pixels (mobile devices) */

@media only screen and (max-width: 767px) {
  .current-user-app-view-dashboard .apps-lightbox-modal {
      position: fixed !important;
      height: 564px !important;
      width: 80% !important;
      top: 165.93px !important;
      left: 48px !important;
  }
  .current-user-app-view-dashboard .apps-lightbox-modal .ui-dialog-title {
      white-space: initial !important;
      width: 100% !important;
  }
  .current-user-app-view-dashboard .ui-button.ui-corner-all.ui-widget.ui-button-icon-only.ui-dialog-titlebar-close {
      top: -25% !important;
  }
  .current-user-app-view-dashboard .apps-lightbox-modal div#drupal-modal {
      max-height: 500px !important;
  }
  .current-user-app-view-dashboard .developer-app-add-for-developer-form textarea.form-textarea {
      width: 90%;
      height: initial !important;
  } 
  .current-user-app-view-dashboard .apps-lightbox-modal .ui-dialog-buttonpane {
      display: flex !important;
      justify-content: center !important;
  }
}