/* 
    Created on : Jan 27, 2022, 9:56:53 AM
    Author     : Tahir Nazir
*/

.wpcd_public_clear {
        clear: both;
	float: none;
}

.rwmb-meta-box .rwmb-tabs {
        margin: 0;
}

#wpcd_public_wrapper {
        max-width: 100%;
}

/* Links should not be underlined. */
#wpcd_public_wrapper a {
	text-decoration: none;
	text-decoration-line: none;
}
#wpcd_public_wrapper a:hover,
#wpcd_public_wrapper a:active,
#wpcd_public_wrapper a:focus,
#wpcd_public_wrapper a:focus-visible,
#wpcd_public_wrapper a:visited {
	text-decoration: none;
	text-decoration-line: none;
}
/* End links should not be underlined. */

/* Button text should not be underlined and text color should be defaulted to white. */
#wpcd_public_wrapper button,
#wpcd_public_wrapper a.button {
	background-color: var(--wpcd-front-end-accent-background-color);
	border-color: var(--wpcd-front-end-accent-background-color);
	color: var(--wpcd-front-end-white-color);
	text-decoration: none;
	text-decoration-line: none;	
}
#wpcd_public_wrapper button:hover,
#wpcd_public_wrapper a.button:hover {
	text-decoration: none;
	text-decoration-line: none;	
}
/* End button text should not be underlined. */

#wpcd_public_wrapper .wpcd-create-popup-label {
		/* Field labels on popup when creating a new site or server.*/
        font-size: 13px;
}

#wpcd_public_wrapper .wpcd-create-popup-label-wrap {
		/* Field labels on popup when creating a new site needs vertical space between them.*/
        margin-bottom: 6px;
}


#wpcd_public_wrapper .wpcd-create-popup-grid-wrap:after {
        content: ' ';
        float: none;
        clear: both;
}

#wpcd_public_wrapper .wpcd-popup .wpcd-log-title {
		/* Popup title for long running operations. */
        font-size: 26px;
        margin-top: 26px;
        margin-bottom: 26px;
        margin-left: 5px;
}

/* Close button on popups.*/
#wpcd_public_wrapper .wpcd-popup .wpcd-log-close-button {
		border-color: var(--wpcd-front-end-negative-color);
		background-color: var(--wpcd-front-end-negative-color);
		text-decoration: none;
        display: inline-block;
        font-size: 13px;
        border-radius: 3px;
        line-height: 28px;
        padding: 0 10px;
		color: var(--wpcd-front-end-white-color);;
}
#wpcd_public_wrapper .wpcd-popup .wpcd-log-close-button a {
		text-decoration: none;
        color: inherit;
}
#wpcd_public_wrapper .wpcd-popup .wpcd-log-close-button:hover {
		border-color: var(--wpcd-front-end-primary-brand-color);
		background-color: var(--wpcd-front-end-primary-brand-color);	
}

#wpcd_public_wrapper .wpcd-log-close-wrap {
        margin-top: 13px;
}

#wpcd_public_wrapper .wpcd-log-wrap {
        padding: 3px 26px 26px 26px;
}


#wpcd_public_wrapper th.manage-column {
        font-size: 13px;
}

#wpcd_public_wrapper td {
        font-size: 14px;
}

/* Style filter bar at the top of table/grid */
#wpcd_public_wrapper .tablenav .tablenav-pages {
        float: right;
        margin: 9px 0 9px;
        font-size: 14px;
}

#wpcd_public_wrapper .tablenav .displaying-num {
        margin-right: 7px;
}

#wpcd_public_wrapper .tablenav .tablenav-pages .button,
#wpcd_public_wrapper .tablenav .tablenav-pages .tablenav-pages-navspan {
        display: inline-block;
        vertical-align: baseline;
        min-width: 30px;
        min-height: 30px;
        margin: 0;
        padding: 0 4px;
        border-width: 1px;
        font-size: 16px;
        line-height: 1.625;
        text-align: center;
		text-decoration: none;
}

#wpcd_public_wrapper .tablenav-pages .current-page {
        margin: 0 2px 0 0;
        font-size: 13px;
        padding: 0 8px;
        text-align: center;
        min-height: 30px;
}

#wpcd_public_wrapper .tablenav .actions select {
		/* Individual filter drop-downs */
		background-color: var(--wpcd-front-end-accent-background-color);
		border-color: var(--wpcd-front-end-accent-background-color);
		border-style: none;
		color: var(--wpcd-front-end-white-color);
		height: 30px;		
        width: 13%;
        float: left;
        margin-bottom: 10px;
        margin-right: 6px;        
        padding-top: 0;
        padding-bottom: 0;
		padding 0 10px;
        font-size: 14px;
        border-radius: 3px;
}

#wpcd_public_wrapper .tablenav .actions #post-query-submit {
		/* Submit button next to filter bar. */
		color: var(--wpcd-front-end-white-color);
		background-color: var(--wpcd-front-end-primary-brand-color);
		border-color: var(--wpcd-front-end-primary-brand-color);
		height: 30px;		
        min-height: 30px;
        float: left;
        font-size: 13px;
        padding-top: 0;
        padding-bottom: 0;
        border-width: 1px;
		border-radius: 3px;
        display: inline-block;		
}
#wpcd_public_wrapper .tablenav .actions #post-query-submit:hover {
	/* Submit button next to filter bar - hover. */
	background-color: var(--wpcd-front-end-accent-background-color);
	border-color: var(--wpcd-front-end-accent-background-color);
}
/* End style filter bar at the top of table/grid */

#wpcd_public_wrapper td button.toggle-row {
        display: none;
}

#wpcd_public_wrapper .wpcd-popup .wpcd-log-console,
#wpcd_public_wrapper .wpcd_custom_tooltiptext,
#wpcd_public_wrapper .rwmb-tab-panels {
        font-size: 13px;
}

#wpcd_public_wrapper .rwmb-tab-nav {
        padding: 0;
}

#wpcd_public_wrapper ul.rwmb-tab-nav li a {
        font-size: 14px;
}

#wpcd_public_wrapper #wpcd_server_wordpress-app_tab_top_of_server_details {
        margin: 0;
}

#wpcd_public_wrapper #wpcd_server_wordpress-app_tab3 {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-top: 20px;
}

/* Metabox toggle switches */
#wpcd_public_wrapper .rwmb-input label.rwmb-switch-label {
		/* Toggle switches need pointer changed on hover. */
        cursor: pointer;
}
#wpcd_public_wrapper .rwmb-input .rwmb-switch:checked + .rwmb-switch-status .rwmb-switch-slider {
		/* Color when switch is enabled. */
		background-color: var(--wpcd-front-end-positive-color);
}
/* End Metabox toggle switches */

#wpcd_public_wrapper .rwmb-meta-box.wpcd_server_wordpress-app_tab_top_of_server_details label {
        font-size: 12px;
}

#wpcd_public_wrapper .rwmb-meta-box.wpcd_server_wordpress-app_tab_top_of_server_details .rwmb-input {
        font-size: 15px;
}

/* Metabox field labels */
#wpcd_public_wrapper .rwmb-label,
#wpcd_public_wrapper .rwmb-label label {
        font-size: 13px;
}

/* Metabox buttons - default to white text. */
#wpcd_public_wrapper button .rwmb-button a {
		text-decoration: none;
        color: var(--wpcd-front-end-white-color);
}

/* Styling install popups */
#wpcd_public_wrapper .wpcd-install-app-container.wpcd-popup {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding-left: 2%;
        padding-right: 2%;
}

#wpcd_public_wrapper .wpcd-header {
        margin-left: 2%;
}

#wpcd_public_wrapper .wpcd-install-app-container.wpcd-popup .wpcd-create-popup-input-wrap input,
#wpcd_public_wrapper .wpcd-install-app-container.wpcd-popup .wpcd-create-popup-input-wrap select {
        font-size: 14px;
        box-shadow: 0 0 0 transparent;
        border-radius: 4px;
        border: 1px solid #8c8f94;
        background-color: var(--wpcd-front-end-white-color);
        color: #2c3338;
        line-height: 28px;
        padding-top: 0;
        padding-bottom: 0;
        min-height: 30px;
}

#wpcd_public_wrapper .wpcd-install-app-container.wpcd-popup .wpcd-create-popup-label-wrap {
        line-height: 18px;
}

#wpcd_public_wrapper .wpcd-install-app-container .wpcd-action-title {
        font-size: 26px;
}

#wpcd_public_wrapper .wpcd-install-app-container.wpcd-popup .wpcd-action-instructions {
        font-size: 13px;
}

#wpcd_public_wrapper .mfp-wrap {
        background: #eceff1;
}

#wpcd_public_wrapper .mfp-content {
        padding-bottom: 50px;
}

#wpcd_public_wrapper .wpcd-create-popup-input-wrap.wpcd-create-popup-input-wp-version-select2-wrap {
        position: relative;
}

#wpcd_public_wrapper .wpcd-create-popup-input-wrap .wpcd-install-button.wpcd-install-app,
#wpcd_public_wrapper .wpcd-create-popup-input-wrap .wpcd-install-button.wpcd-install-server {
		/* The install button on the popups */
		border-radius: 3px;
        font-size: 17px;
}

#wpcd_public_wrapper .wpcd-install-app-container.wpcd-popup .wpcd-create-popup-fields-wrap .wp_field_error {
		/* Validation error messages */
		font-size: 13px;
}
/* End styling install popups */

/* Style console for viewing logs */
#wpcd_public_wrapper .wpcd-install-app-container-show-log-console {
        width: 65%;
        margin: 0 auto;
}

#wpcd_public_wrapper .wpcd-install-app-container-show-log-console .wpcd-popup .wpcd-create-popup-console-wrap {
        width: 100%;
}

#wpcd_public_wrapper .wpcd-install-app-container-show-log-console .wpcd-header {
        margin-left: 2%;
}
/* End style console for viewing logs */

/* Some SELECT2 Styling. */
#wpcd_public_wrapper .select2-search input.select2-search__field {
        line-height: 28px;
        border-radius: 4px;
        margin-left: 1px;
        margin-right: 1px;
}

#wpcd_public_wrapper ul.select2-results__options li.select2-results__option,
#wpcd_public_wrapper .select2-selection {
        font-size: 13px;
}
/* End SELECT2 styles. */

/* Style the post counts above the filter bar. */
#wpcd_public_wrapper .subsubsub {
        list-style: none;
        margin: 8px 0 0;
        padding: 0;
        font-size: 13px;
        color: #646970;		
        margin-bottom: 10px;
		
}

#wpcd_public_wrapper .tablenav .no-pages,
#wpcd_public_wrapper .tablenav .one-page .pagination-links {
        display: none;
}

#wpcd_public_wrapper .subsubsub li {
        display: inline-block;
        margin: 0;
		margin-right: 6px;
        padding: 0;
        white-space: nowrap;
}

#wpcd_public_wrapper .subsubsub a {
		/* Make individual links buttons */
		background-color: var(--wpcd-front-end-accent-background-color);
		color: var(--wpcd-front-end-white-color);
        line-height: 2;
        padding: 5px 8px;;
		border-radius: 3px;
        text-decoration: none;
}
#wpcd_public_wrapper .subsubsub a:hover {
	background-color: var(--wpcd-front-end-primary-brand-color);
	border-color: var(--wpcd-front-end-primary-brand-color);
}

#wpcd_public_wrapper .subsubsub a.current {
        font-weight: 700;
        border: none;
}

#wpcd_public_wrapper .subsubsub a .count,
#wpcd_public_wrapper .subsubsub a.current .count {
		color: var(--wpcd-front-end-white-color);
        font-weight: 400;
}
/* End style the post counts above the filter bar. */

#wpcd_public_wrapper .row-actions {
        /* Nothing here */
}

#wpcd_public_wrapper .wpcd-grid-table-row:hover .row-actions {
        /* Nothing here */
}


#wpcd_public_wrapper br.clear {
        clear: both;
        float: none;
}

/* Format the DEPLOY A WORDPRESS SERVER and INSTALL WORDPRESS/NEW WORDPRESS SITE buttons. */
#wpcd_public_wrapper a.deploy_button,
#wpcd_public_wrapper button.wpcd_action_install_app {
		display: inline-block;
		background-color: var(--wpcd-front-end-positive-color);
		border: solid;
		border-color: var(--wpcd-front-end-positive-color);
		padding: 9px 17px 9px 17px;
		border-radius: 3px;
		color: var(--wpcd-front-end-white-color);
		text-decoration: none;
		text-decoration-line: none;
        margin: 20px 0;
		cursor: pointer;
}
#wpcd_public_wrapper a.deploy_button:hover,
#wpcd_public_wrapper a.deploy_button:active,
#wpcd_public_wrapper a.deploy_button:focus,
#wpcd_public_wrapper a.deploy_button:visited,
#wpcd_public_wrapper button.wpcd_action_install_app:hover,
#wpcd_public_wrapper button.wpcd_action_install_app:active,
#wpcd_public_wrapper button.wpcd_action_install_app:focus,
#wpcd_public_wrapper button.wpcd_action_install_app:visited {
		text-decoration: none;
		text-decoration-line: none;
		border-color: var(--wpcd-front-end-primary-brand-color);
		background-color: var(--wpcd-front-end-primary-brand-color);
		cursor: pointer;
}
/* End format DEPLOY WORDPRESS SERVER button. */

/* Format INSTALL WORDPRESS / NEW WORDPRESS SITE button */
#wpcd_public_wrapper button.wpcd_action_install_app {
		/* Nothing here */
}
#wpcd_public_wrapper button.wpcd_action_install_app:hover {
		/* Nothing here */
}
/* End Format INSTALL WORDPRESS button */

/* Format the operation in progress alert in the SERVER ACTIONS column */
#wpcd_public_wrapper .wpcd_server_actions_op_in_progress {
	/* Just needs a bit of margin. */
	margin: 20px 0;
}

/* Format the background updates alert in the SERVER ACTIONS column */
#wpcd_public_wrapper .wpcd_server_actions_aptget_in_progress {
	/* Just needs a bit of margin. */
	margin: 20px 0;
}

/* Format site image - from Powerpack */
#wpcd_public_wrapper .wpcd_site_home_page_image.column-wpcd_site_home_page_image a img {
	min-width: 100%;
	max-width: 100%;
	max-height: 250px;
	border-radius: 10px;
}
#wpcd_public_wrapper #wpcd_public_apps_container .wpcd-grid-table-cell:first-child {
	/* Remove cell background for homepage image.  Unfortunately the cell doesn't have a classname so we use first-child since the home-page image will usually be the first column. */
	/**** none of this works well right now so removing...
	padding: 0px;
	border-radius: 0px;
	background-color: transparent;
	****/
}
/* End format site image - from powerpack */

/**
 * The following section handles promo buttons. 
 */
 #wpcd_public_wrapper .wpcd_promo_button_wrap {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 10px;				
	grid-auto-rows: auto;
	grid-row-gap: 15px;
	max-width: 600px;
 }
#wpcd_public_wrapper .wpcd-wpapp-instance-promo a {
	font-size: small;
}

#wpcd_public_wrapper .wpcd-wpapp-instance-promo-button {
	margin-top: 0.25em;
	margin-bottom: 0.25em;
}

#wpcd_public_wrapper .wpcd-wpapp-instance-promo-button a {
	font-size: small;
	color: var(--wpcd-front-end-white-color);
	background-color: #004D40;
	border-radius: 3px;
	border-width: 0px;
	padding: 1em;
}
@media screen and (max-width: 600px) {
	/* Don't show promos on small screen where real estate is at a premium */
	#wpcd_public_wrapper .wpcd_promo_button_wrap {
		display: none;
	}
}
/* End section to handle promo buttons */

/**
 * The following section handles the formatting of the table list for servers and sites on the front-end. 
 */
.wpcd-grid-table {
		/* Formatting for all elements in the table grid */
		color: black;
		font-size: 15px;
		line-height: 20px;
		font-weight: 700;
		font-style: normal;		
}

.wpcd-grid-table a {
		/* Link styling for all elements in the table grid */
		font-weight: 600;
		font-style: normal;
}

.wpcd-grid-table-col,
.wpcd-grid-table-cell {
		/* Make each table cell a white card. */
		background-color: var(--wpcd-front-end-light-background-color);
		border-radius: 10px;
        padding: 35px 30px 35px 30px;
}

.wpcd-grid-table .no-items {
		/* @TODO: Not sure what this does - is it needed?  */
        padding: 10px 0;
}


.wpcd-grid-table-rows {
        padding-right: 40px;
	/* All rows are in a grid - right now just one column but later we might adjust to make it two. */
        display: grid;
	grid-template-columns: 1fr;
	column-gap: 20px;			
}

.wpcd-grid-table.table-hidden .wpcd-grid-table-columns,
.wpcd-grid-table.table-hidden .wpcd-grid-table-rows {
        /* Nothing here */
}

.wpcd-grid-table-loader, .wpcd-loader-public {
        background: url(/wp-content/plugins/wp-cloud-deploy/assets/images/spinner.gif) no-repeat center center;
        width: 100%;
        height: 100px;
        margin-top: 50px;
        display: none;
}

.wpcd-loader-public {
        display: block;
}

.wpcd-grid-table.table-hidden .wpcd-grid-table-loader {
        display: block;
}

.wpcd-grid-table * {
        word-wrap: break-word;
}

.wpcd-grid-table button.toggle-row {
        display: none;
}

.wpcd-grid-table-columns {
		/* Nothing here */
}

.row_col_name {
        display: none;
        font-weight: bold;
        color: rgb(160, 174, 192);
}

.wpcd-grid-table.mobile .wpcd-grid-table-cell {
        /* Nothing here */
}

.wpcd-grid-table.mobile .row_col_name {
        /* Nothing here */
}

.wpcd-grid-table.mobile .wpcd-grid-table-row {
		/* Nothing here */
}

.wpcd-grid-table-rows .wpcd-grid-table-row {
		/* Each table row */
		margin-top: 40px;
		margin-bottom: 40px;		
		background-color: var(--wpcd-front-end-alternate-accent-background-color);
        border-radius: 6px;
		padding: 20px;
}

.wpcd-grid-table .wpcd-grid-table-columns,
.wpcd-grid-table .wpcd-grid-table-rows .wpcd-grid-table-row {
		/* All cells within a row will also be in a grid. */
        display: grid;		
        grid-template-columns: 1fr 1fr 1fr;
		column-gap: 20px;				
        grid-auto-rows: auto;
		grid-row-gap: 15px;
        width: 100%;		
}

.wpcd-grid-table-rows .wpcd-grid-table-row {
		/* Set the max width for each table row */
        max-width: 1400px;
		margin-left: auto;
		margin-right: auto;
}

.wpcd-grid-table .row_col_name {
		/* The column name at the top of each card */
        display: block;
		margin-bottom: 10px;
}

.wpcd-grid-table .wpcd-grid-table-columns {
		/* @TODO: Not sure what this is - table title columns?  */
        display: none;
}

/* Server and app groups */
.wpcd-grid-table .column-wpcd_app_group {
	/* Grid for server and app groups - three columns.  Label will go in the first row. */
	display: grid;
	grid-template: "a a a"
				   "b b b";	
	grid-row-gap: 15px;
	grid-column-gap: 20px;
}
.wpcd-grid-table .column-wpcd_app_group .row_col_name {
	/* Assign label to first row of grid. */
	grid-area: a;
}
.wpcd-grid-table .wpcd-app-server-app-group,
.wpcd-grid-table .wpcd-app-server-app-group {
	/* Assign server and app groups to the 2nd row of the grid.*/
	grid-area: b;	
}
.wpcd-grid-table .wpcd-app-server-app-group,
.wpcd-grid-table .wpcd-app-server-app-group {
	/* format the server and app groups into buttons' */
	line-height: 20px;
	display: block;
	padding: 10px;
	color: var(--wpcd-front-end-white-color);
	border-radius: 5px;
}
/* End server and app groups */

/* Format custom link labels shown on the server and app cpt list screens */
.wpcd_custom_link a {
    display: inline-block;
    padding: 2px 8px;
    color: var(--wpcd-front-end-white-color);
    vertical-align: baseline;
    background-color: #039BE5;
    border-radius: 3px;
    margin-top: 3px;
}
.wpcd_custom_link a:hover {
	background-color: var(--wpcd-front-end-primary-brand-color);
}

/* Style in-line values such as "region: xxx" and "ipv4: xxx */
.wpcd-grid-table [class^="wpcd-app-col-element-wrap-"],
.wpcd-grid-table [class*=" wpcd-app-col-element-wrap-"],
.wpcd-grid-table [class^="wpcd-server-col-element-wrap-"],
.wpcd-grid-table [class*=" wpcd-server-col-element-wrap-"] {
	display: block;
	margin-bottom: 15px;
}
.wpcd-grid-table [class^="wpcd-app-col-element-label-"],
.wpcd-grid-table [class*=" wpcd-app-col-element-label-"],
.wpcd-grid-table [class^="wpcd-server-col-element-label-"],
.wpcd-grid-table [class*=" wpcd-server-col-element-label-"] {
	/* Nothing here. */
}
.wpcd-grid-table [class^="wpcd-app-col-element-value-"],
.wpcd-grid-table [class*=" wpcd-app-col-element-value-"],
.wpcd-grid-table [class^="wpcd-server-col-element-value-"],
.wpcd-grid-table [class*=" wpcd-server-col-element-value-"] {
	float: right;
}
/* End style in-line value */

/* Style the "apps on this server in the app list" and "Update Remote State on the server list" links - make them buttons. */
.wpcd-grid-table .wpcd-app-col-element-label-apps_on_server a,
.wpcd-grid-table .wpcd-server-col-element-label-update_remote_state_link a {
	display: inline-block;
	margin-top: 10px;
	background-color: var(--wpcd-front-end-accent-background-color);
	padding: 9px 17px 9px 17px;
	border-radius: 3px;
	color: var(--wpcd-front-end-white-color);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
}
.wpcd-grid-table .wpcd-app-col-element-label-apps_on_server a:hover,
.wpcd-grid-table .wpcd-server-col-element-label-update_remote_state_link a:hover {
	text-decoration: none;
	background-color: var(--wpcd-front-end-primary-brand-color);
}
/* End Style the "apps on this server in the app list"... */

/* Style the app count link on the server list. */
.wpcd-grid-table span.wpcd-server-col-element-value-server_app_count {
	display: inline-block;
	border: 1px solid;
	border-color: var(--wpcd-front-end-primary-brand-color);
	border-radius: 3px;
	padding: 3px 10px;
	text-align: center;
	color: var(--wpcd-front-end-primary-brand-color);
}
.wpcd-grid-table span.wpcd-server-col-element-value-server_app_count:hover {
	font-weight: bold;
}
/* End style the app count link on the server list. */

/* Style the app links on the server list. */
.wpcd-grid-table .wpcd-server-col-element-label-server_app_link {
	display: block;
	font-size: 15px;
	font-weight: normal;
	color: #5560C2;
	margin-bottom: 10px;
}
.wpcd-grid-table .wpcd-server-col-element-label-server_app_link a {
	color: #5560C2;
	font-weight: normal;
}
.wpcd-grid-table .wpcd-server-col-element-label-server_app_link a:hover {
	font-weight: bold;
}
/* End style the app links on the server list. */

/* Style the local status column on the server list - place green borders around the status and state if active. */
.wpcd-grid-table .wpcd-server-col-element-wrap-local_server_status_active {
	border-color: var(--wpcd-front-end-positive-color);
	border-width: 1px;
	border-style: solid;
	text-align: center;
	padding: 9px 17px;
}
.wpcd-grid-table .wpcd-server-col-element-value-remote_server_state_active {
	display: inline-block;
	border-color: var(--wpcd-front-end-positive-color);
	border-width: 1px;
	border-style: solid;
	padding: 4px 8px;	
}
/* End style the local status column on the server list */

/* Style the webserver type in the server list */
.wpcd-grid-table .wpcd-server-col-element-value-web_server_desc {
	text-transform: uppercase;
}
/* End style the webserver type in the server list */

/* Style the ADMIN LOGIN and VIEW SITE links in the app list. */
.wpcd-grid-table .wpcd-app-col-element-label-wp_admin_link a,
.wpcd-grid-table .wpcd-app-col-element-label-public_admin_link a,
.wpcd-grid-table .wpcd-app-col-element-value-homepage_link a {
	/* Note: The public_admin_link element is not part of core wpcd but is there for add-ons or custom code that might need it later. */
	display: inline-block;
	color: var(--wpcd-front-end-white-color);
	background-color: var(--wpcd-front-end-primary-brand-color);
	border-color: var(--wpcd-front-end-primary-brand-color);
	border-width: 1px;
	border-style: solid;
	padding: 4px 8px;
	border-radius: 3px;
}
.wpcd-grid-table .wpcd-app-col-element-label-wp_admin_link a:hover,
.wpcd-grid-table .wpcd-app-col-element-label-public_admin_link a:hover,
.wpcd-grid-table .wpcd-app-col-element-value-homepage_link a:hover {
	background-color: var(--wpcd-front-end-accent-background-color);	
	border-color: var(--wpcd-front-end-accent-background-color);

}

/* Style the SSL value in the app list. */
.wpcd-grid-table .wpcd_ssl_status {
	min-width: 50px;
	text-transform: uppercase;
	text-align: center;
}

/* Style the PHP value in the app list */
.wpcd-grid-table .wpcd_php_version {
	min-width: 50px;
	text-align: center;
}

/* Style the PAGE and OBJECT CACHE values in the app list (APP FEATURES card) */
.wpcd-grid-table .wpcd_page_cache_status .wpcd-app-col-element-value-page_cache,
.wpcd-grid-table .wpcd_object_cache_status .wpcd-app-col-element-value-object_cache {
    display: inline-block;
	min-width: 50px;
	text-align: center;
    padding: 2px 8px;
    font-weight: 700;
    color: var(--wpcd-front-end-white-color);
    vertical-align: baseline;
    border-radius: 3px;
    margin: 2px;
	text-transform: uppercase;
}
.wpcd-grid-table .wpcd_page_cache_off .wpcd-app-col-element-value-page_cache {
	color: var(--wpcd-front-end-negative-color);
}
.wpcd-grid-table .wpcd_object_cache_off .wpcd-app-col-element-value-object_cache {
    color: orange;
}
.wpcd-grid-table .wpcd_page_cache_on .wpcd-app-col-element-value-page_cache,
.wpcd-grid-table .wpcd_object_cache_on .wpcd-app-col-element-value-object_cache {
	color: var(--wpcd-front-end-positive-color);
}

.wpcd-grid-table .wpcd-app-col-element-wrap-health_last_update {
	/* Make the last updated row in the APP HEALTH card a little more vertical space above. */
	margin-top: 10px;
}

.wpcd-grid-table .column-title .row_col_name {
	/* Adjust the bottom margin in the title column label a bit because we'll be increasing the size of the title. */
	margin-bottom: 5px;
}

/* Make the title bigger */
.wpcd-grid-table .column-title .row_col_name + a {
	display: block;
	font-size: 20px;
	font-weight: 800;
	margin-bottom: 20px;
	x-text-align: center;
	color: var(--wpcd-front-end-primary-brand-color);
}
.wpcd-grid-table .column-title .row_col_name{
	/* Note used - can be used to hide the title label.*/
}
/* End make the title bigger */

/* Make row action links buttons */
.wpcd-grid-table .row-actions a, .wpcd-button {
	display: inline-block;
	background-color: var(--wpcd-front-end-accent-background-color);
	padding: 9px 17px 9px 17px;
	border-radius: 3px;
	color: var(--wpcd-front-end-white-color);
	font-size: 15px;
	font-weight: 700;
	margin-right: 15px;
	margin-bottom: 20px;
	min-width: 90px;
	text-decoration: none;
        cursor: pointer;
        border: 0;
}
.wpcd-grid-table .row-actions a:hover, .wpcd-button:hover {
	text-decoration: none;
	background-color: var(--wpcd-front-end-primary-brand-color);
}
.wpcd-grid-table .row-actions {
	/* Center the row action buttons within the card. */
	margin: 0 auto;
	text-align: center;
}
.wpcd-grid-table .row-actions .view a:before {
	/* View link - nothing here */
}
/* End make row actions buttons */


/* Media queries for the table/grid lists */
@media screen and (max-width: 1200px) {

        .wpcd-grid-table .wpcd-grid-table-columns,
        .wpcd-grid-table .wpcd-grid-table-rows .wpcd-grid-table-row {
                grid-template-columns: 1fr 1fr;
        }

        .wpcd-grid-table .wpcd-grid-table-cell:nth-child(3n) {
                /* Nothing here */
        }

        .wpcd-grid-table .wpcd-grid-table-cell:nth-child(2n) {
                /* Nothing here */
        }
}

@media screen and (max-width: 650px) {

        .wpcd-grid-table .wpcd-grid-table-columns,
        .wpcd-grid-table .wpcd-grid-table-rows .wpcd-grid-table-row {
                grid-template-columns: 1fr;
        }

        .wpcd-grid-table .wpcd-grid-table-cell,
        .wpcd-grid-table .wpcd-grid-table-cell:nth-child(3n),
        .wpcd-grid-table .wpcd-grid-table-cell:nth-child(2n) {
                /* Nothing here */
        }

}
/* End media queries for the table/grid lists */

/**
 * Start custom css for the detail pages.
 */
.single-wpcd_app #wpcd_public_wrapper,
.single-wpcd_app_server #wpcd_public_wrapper {
	 /* Set a background color for the main container. */
	 background-color: var(--wpcd-front-end-alternate-accent-background-color);
	 border-radius: 3px;
	 padding: 30px 20px;
}
 
#wpcd_public_wrapper #wpcd_wordpress-app_tab2,
#wpcd_public_wrapper #wpcd_wordpress-app_tab2 .rwmb-tab-panels,
#wpcd_public_wrapper #wpcd_server_wordpress-app_tab3,
#wpcd_public_wrapper #wpcd_server_wordpress-app_tab3 .rwmb-tab-panels {
	/* Background color for everything in a tab - other colors layer on top of it. */
	background-color: var(--wpcd-front-end-medium-background-color);
} 

#wpcd_public_wrapper .wpcd-wpapp-actions .rwmb-tabs-left .rwmb-tab-nav .rwmb-tab-active a,
#wpcd_public_wrapper .wpcd-wpapp-actions .rwmb-tabs-left .rwmb-tab-nav a:hover {
	/* Hover and active color for vertical tabs */
	color: var(--wpcd-front-end-primary-brand-color);
} 
 
#wpcd_public_wrapper .wpcd-wpapp-actions h4 {
	/* Card / Section headers on detail screens. */
	color: var(--wpcd-front-end-primary-brand-color);
}

#wpcd_public_wrapper .rwmb-input button,
#wpcd_public_wrapper #wpcd_wordpress-app_tab2 .rwmb-input .button,
#wpcd_public_wrapper #wpcd_wordpress-app_tab2 .rwmb-input .button a,
#wpcd_public_wrapper #wpcd_server_wordpress-app_tab_top_of_server_details .rwmb-input .button,
#wpcd_public_wrapper #wpcd_server_wordpress-app_tab_top_of_server_details .rwmb-input .button a,
#wpcd_public_wrapper #wpcd_server_wordpress-app_tab3 .rwmb-input .button,
#wpcd_public_wrapper #wpcd_server_wordpress-app_tab3 .rwmb-input .button a {
	/* Buttons */
	text-decoration: none;
	background-color: var(--wpcd-front-end-accent-background-color);
	border-color: var(--wpcd-front-end-accent-background-color);
	color: var(--wpcd-front-end-white-color);
	padding: 9px 17px 9px 17px;
	border-radius: 3px;
} 
#wpcd_public_wrapper .rwmb-input button:hover,
#wpcd_public_wrapper #wpcd_wordpress-app_tab2 .rwmb-input .button:hover,
#wpcd_public_wrapper #wpcd_wordpress-app_tab2 .rwmb-input .button a:hover, 
#wpcd_public_wrapper #wpcd_server_wordpress-app_tab_top_of_server_details .rwmb-input .button:hover,
#wpcd_public_wrapper #wpcd_server_wordpress-app_tab_top_of_server_details .rwmb-input .button a:hover,
#wpcd_public_wrapper #wpcd_server_wordpress-app_tab3 .rwmb-input .button:hover,
#wpcd_public_wrapper #wpcd_server_wordpress-app_tab3 .rwmb-input .button a:hover {
	/* Buttons - hover */
	text-decoration: none;
	background-color: var(--wpcd-front-end-primary-brand-color);
	border-color: var(--wpcd-front-end-primary-brand-color);
}

#wpcd_public_wrapper .wpcd-back_link {
	/* Back to list buttons */
	background-color: var(--wpcd-front-end-accent-background-color);
	padding: 9px 17px 9px 17px;
	border-radius: 3px;	
    display: inline-block;
    margin-bottom: 20px;	
}
#wpcd_public_wrapper .wpcd-back_link:hover {
	/* Back to list buttons - hover */
	text-decoration: none;
	background-color: var(--wpcd-front-end-primary-brand-color);
	border-color: var(--wpcd-front-end-primary-brand-color);	
}

#wpcd_public_wrapper .wpcd_wordpress-app_tab_top_of_site_details .rwmb-row {
	/* Summary row at the top of the site detail screen. */
	background-color: var(--wpcd-front-end-accent-background-color);	
	margin-bottom: 20px;	
	padding: 9px 17px 9px 17px;
	border-radius: 3px;		
}
#wpcd_public_wrapper .wpcd_wordpress-app_tab_top_of_site_details .rwmb-row .rwmb-label {
	/* Summary row at the top of the site detail screen - column titles get brand color. */
	color: var(--wpcd-front-end-primary-brand-color);
}

#wpcd_public_wrapper .wpcd_wordpress-app_tab_top_of_site_details .rwmb-row {
	/* Summary row at the top of the site detail screen - other text needs color to stand out. */
	color: var(--wpcd-front-end-light-background-color);
}

#wpcd_public_wrapper .wpcd_site_details_top_row_domain_left {
	/* Site domain name at the top of the detail screen - gets brand color. */
	color: var(--wpcd-front-end-primary-brand-color);
	text-transform: uppercase;	
}

#wpcd_public_wrapper .wpcd_wordpress-app_tab_top_of_site_details .rwmb-row button, 
#wpcd_public_wrapper .wpcd_wordpress-app_tab_top_of_site_details .rwmb-row button a {
	/* Buttons at the top of the site detail screen. */
	text-decoration: none;
	color: var(--wpcd-front-end-light-background-color);
	background-color: var(--wpcd-front-end-primary-brand-color);
	border-color: var(--wpcd-front-end-primary-brand-color);	
}
#wpcd_public_wrapper .wpcd_wordpress-app_tab_top_of_site_details .rwmb-row button:hover,
#wpcd_public_wrapper .wpcd_wordpress-app_tab_top_of_site_details .rwmb-row button a:hover {
	/* Buttons at the top of the site detail screen - hover. */
	text-decoration: none;
	border-color: var(--wpcd-front-end-alternate-accent-background-color);
}

#wpcd_public_wrapper #wpcd_server_wordpress-app_tab_top_of_server_details {
	/* Summary row at the top of the server detail screen */
	background-color: var(--wpcd-front-end-accent-background-color);
	border-radius: 3px;
}

#wpcd_public_wrapper #wpcd_server_wordpress-app_tab_top_of_server_details a {
	/* Summary row at the top of the server detail screen - links in this top metabox need a different color to make it stand out. */
	color: var(--wpcd-front-end-alternate-accent-background-color);
}

/** 
 * Make the data under the domain name on the app detail screen when we're using left menus smaller and format as tiny chicklet boxes.
 * Note that we're not using css id #wpcd_wordpress-app_tab_top_of_site_details to target these
 * items because we want them to work when the tabs are horizontal as well.
 */
#wpcd_public_wrapper .wpcd_site_details_top_row  .wpcd_site_details_top_row_element_wrapper .wpcd_medium_chicklet {
	font-size: 10px;
	font-weight: normal;
	padding: 5px;
	border-radius:3px;
	border: solid 1px;
	margin-right: 5px;
	min-width: 20px;	
}
#wpcd_public_wrapper .wpcd_site_details_top_row .wpcd_site_details_top_row_element_wrapper  .wpcd_site_details_top_row_element_wstype {
	color: var(--wpcd-front-end-primary-brand-color);
	border-color: var(--wpcd-front-end-primary-brand-color);	
}
#wpcd_public_wrapper .wpcd_site_details_top_row .wpcd_site_details_top_row_element_wrapper  .wpcd_site_details_top_row_element_ssl_on {
	color: var(--wpcd-front-end-positive-color);
	border-color: var(--wpcd-front-end-positive-color);	
}
#wpcd_public_wrapper .wpcd_site_details_top_row .wpcd_site_details_top_row_element_wrapper  .wpcd_site_details_top_row_element_ssl_off {
	color: gray;
	border-color: gray;	
}
#wpcd_public_wrapper .wpcd_site_details_top_row .wpcd_site_details_top_row_element_wrapper  .wpcd_site_details_top_row_element_page_cache_on {
	color: var(--wpcd-front-end-positive-color);
	border-color: var(--wpcd-front-end-positive-color);
}
#wpcd_public_wrapper .wpcd_site_details_top_row .wpcd_site_details_top_row_element_wrapper  .wpcd_site_details_top_row_element_page_cache_off {
	color: gray;
	border-color: gray;	
}
#wpcd_public_wrapper .wpcd_site_details_top_row .wpcd_site_details_top_row_element_wrapper  .wpcd_site_details_top_row_element_git_status {
	color: var(--wpcd-front-end-positive-color);
	border-color: var(--wpcd-front-end-positive-color);
}
#wpcd_public_wrapper .wpcd_site_details_top_row .wpcd_site_details_top_row_element_wrapper .wpcd_site_details_top_row_element_passwordless_login,
#wpcd_public_wrapper .wpcd_site_details_top_row .wpcd_site_details_top_row_element_wrapper .wpcd_site_details_top_row_element_passwordless_login a {
	min-width: 90px;
	color: #A3E635;
	border-color: #A3E635;
	color: #A3E635;
	text-decoration: none;
}
#wpcd_public_wrapper .wpcd_site_details_top_row .wpcd_site_details_top_row_element_wrapper .wpcd_site_details_top_row_element_passwordless_login a:hover,
#wpcd_public_wrapper .wpcd_site_details_top_row .wpcd_site_details_top_row_element_wrapper .wpcd_site_details_top_row_element_passwordless_login:hover {
	background-color: #A3E635;
	color: var(--wpcd-front-end-white-color);
}
/* End make the data under the domain name on the app detail when we're using left menus smaller and in chiclet boxes...*/

/* Background color and text for tabs - vertical - app detail */
#wpcd_public_wrapper .wpcd-wpapp-actions .rwmb-tabs-left .rwmb-tab-nav {
	background-color: var(--wpcd-front-end-accent-background-color);
}

#wpcd_public_wrapper .wpcd-wpapp-actions .rwmb-tabs-left .rwmb-tab-nav .rwmb-tab-active {
	background-image: linear-gradient( to right, var(--wpcd-accent-front-end-background-color), var(--wpcd-accent-front-end-background-color) 50%, var(--wpcd-alternate-front-end-accent-background-color) 50%);
}

/* End background color and text for tabs - vertical - app detail*/

/** 
 * Make the data under the domain name on the server detail screen smaller and format as tiny chicklet boxes.
 */
#wpcd_public_wrapper .wpcd_server_wordpress-app_tab_top_of_server_details .wpcd_server_details_top_row .wpcd_medium_chicklet {
	/* Applies to all medium sized chicklets - duplicated in wpcd-app.css, wpcd-server-admin */
	font-size: 10px;
	font-weight: normal;
	padding: 5px;
	border-radius:3px;
	border: solid 1px;
	margin-right: 5px;
	min-width: 20px;
}
#wpcd_public_wrapper .wpcd_server_wordpress-app_tab_top_of_server_details .wpcd_server_details_top_row .wpcd_server_details_top_row_element_wstype {
	color: var(--wpcd-front-end-primary-brand-color);
	border-color: var(--wpcd-front-end-secondary-brand-color);	
}
#wpcd_public_wrapper .wpcd_server_wordpress-app_tab_top_of_server_details .wpcd_server_details_top_row .wpcd_server_details_top_row_element_git_status {
	border-color: var(--wpcd-front-end-positive-color);	
	color: var(--wpcd-front-end-light-background-color);
}
 
/**
 * Card overrides.
 */
#wpcd_public_wrapper .wpcd-card-group {
	background-color: var(--wpcd-front-end-white-color);	
	border-color: var(--wpcd-front-end-medium-accent-background-color);
}
#wpcd_public_wrapper .wpcd-card-group:hover {
	border-color: var(--wpcd-front-end-primary-brand-color);
}
 
/* custom table pages style */
#wpcd_public_wrapper .notice {
    background: var(--wpcd-front-end-white-color);
    border: 1px solid #c3c4c7;
    border-left-width: 4px;
    box-shadow: 0 1px 1px rgb(0 0 0 / 4%);
    margin: 5px 0px;
    padding: 1px 12px;
}

#wpcd_public_wrapper .notice p {
    margin: 6px 0;
}

#wpcd_public_wrapper .notice-error, 
#wpcd_public_wrapper div.error {
    border-left-color: #d63638;
}

#wpcd_public_wrapper .notice-success, 
#wpcd_public_wrapper div.updated {
    border-left-color: #00a32a;
}


#mb_submit_box {
        margin: 20px 0;
}
 
#mb_submit_box .wpcd-button {
        margin-right: 0;
}


.child-items-mb {
        margin-top: 50px;
        border-top: #bdbdbd solid 1px;
        padding-top: 40px;
}


.child-items-mb .wpcd-mb-title {
        font-size: 18px;
        font-weight: bold;
        background: #e1e1e1;
        padding: 10px 20px;
}

.child-items-mb .rwmb-meta-box {
        padding: 20px;
        border: #e1e1e1 solid 2px;
}


.child-items-mb .rwmb-meta-box .wpcd-grid-table-loader {
        display: none;
}

.rwmb-input input[type=number], 
.rwmb-input input[type=password], 
.rwmb-input input[type=search], 
.rwmb-input input[type=text] {
    padding: 0 8px;
    line-height: 2;
    min-height: 30px;
}

.rwmb-input input[type=text],
.rwmb-input input[type=number], 
.rwmb-input input[type=password], 
.rwmb-input input[type=search], 
.rwmb-input select, 
.rwmb-input textarea {
    box-shadow: 0 0 0 transparent;
    border-radius: 4px;
    border: 1px solid #8c8f94;
    background-color: var(--wpcd-front-end-white-color);
    color: #2c3338;
}

.rwmb-input select {
    font-size: 14px;
    line-height: 2;
    color: #2c3338;
    border-color: #8c8f94;
    box-shadow: none;
    border-radius: 3px;
    padding: 0 24px 0 8px;
    min-height: 30px;
    max-width: 25rem;
    -webkit-appearance: none;
    background: var(--wpcd-front-end-white-color) url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E) no-repeat right 5px top 55%;
    background-size: 16px 16px;
    cursor: pointer;
    vertical-align: middle;
}

.rwmb-input textarea {
    overflow: auto;
    padding: 2px 6px;
    line-height: 1.42857143;
    resize: vertical;
}


.rwmb-input .select2-selection__choice {
        margin-bottom: 6px;
}

.rwmb-input .rwmb-select-all-none {
        font-size: 14px;
}
.wpcd-mbct-submit {
        float: right;
        margin-top: 30px;
}


.wpcd-mbct-submit input[type=submit]#wpcd_ct_submit {
        display: inline-block;
        width: auto;
        margin-left: 50px;
}

.wpcd-ct-add-item-link {
        display: none;
}


.wpcd_mb_inline_edit_form_window .rwmb-field .rwmb-input input {
	box-sizing: border-box;
}

.wpcd_mb_inline_edit_form_window > h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 26px;
    font-family: sans-serif;
}

.wpcd_mb_inline_edit_form_window .rwmb-field .rwmb-label label, 
.wpcd_mb_inline_edit_form_window .rwmb-field .rwmb-input {
	font-size : 14px;
}


.wpcd_mb_inline_edit_form_window .spinner.wpcd-loader-public {
    float: right;
    width: 40px;
    height: 30px;
    margin-top: 0;
}
/**
 * End custom css for the detail pages.
 */ 