/* the spinner - start */
.locker, .locker-loader {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.locker {
	z-index: 1000;
	opacity: 0.8;
	background-color: var(--wpcd-white-color);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	filter: alpha(opacity=80);
}

.locker-loader {
	z-index: 1001;
	background: url(/wp-content/plugins/wp-cloud-deploy/assets/images/spinner.gif) no-repeat center center;
}
/* the spinner - end */

/******************************************************************************************/
/* Style popup                                                                            */
/******************************************************************************************/
.wpcd-popup {
	/* This is the main content area */
	width: 75%;
	height: 100%;
	margin-left: 20%;
	margin-right: 10%;
	padding-right: 20%;
}

.wpcd-popup .wpcd-log-wrap {
	/* Wrapper around the main data area for logs */
	background-color: #CFD8DC;
	padding-top: 0.25em;
	border: 1px solid #CFD8DC;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

.wpcd-popup .wpcd-log-title {
	/* The log area and command output title */
	font-size: 2em;
	margin-top: 1em;
	margin-bottom: 1em;
	margin-left: 5px;
	color: #212121;
}

.wpcd-popup .wpcd-log-console {
	/* Style the actual command output area to look like a linux terminal */
	background-color: var(--wpcd-terminal-background-color);
	padding: 2em;
	color: var(--wpcd-terminal-foreground-color);
	overflow: scroll;
	max-height: 300px;
}

/* Make scrollbars in terminal almost invisible */
.wpcd-popup .wpcd-log-console::-webkit-scrollbar {
	width: 5px;
}

/* style the close button */
.wpcd-popup .wpcd-log-close-button {
	margin: 1em;
	background-color: transparent;
}

.wpcd-popup .wpcd-log-close-button a {
	text-decoration: none;
}

/******************************************************************************************/
/* Style Metabox.io Tabs in the wp-app screen                                             */
/******************************************************************************************/

/* Set a min height to the tab container */
div[id^='wpcd_wordpress-app'] {
	min-height: 300px !important;
	padding-left: 1em !important;
	padding-right: 1em !important;
}

/* If we're painting tabs vertically we have an extra metabox at the top of the screen - we don't want this to be too big */
#wpcd_wordpress-app_tab_top_of_site_details {
	min-height: 10px !important;
	margin-top: 0px !important;
	padding-top: 0px !important;
}

/* And we want some styling on that extra metabox ! */
#wpcd_wordpress-app_tab_top_of_site_details {
	color: var(--wpcd-white-color);
	background-color: var(--wpcd-accent-background-color);
	word-wrap: break-word;
}

/* Make the domain name bigger when we're using left menus and we're in that extra metabox at the top of the screen */
#wpcd_wordpress-app_tab_top_of_site_details .wpcd_site_details_top_row_domain_left .rwmb-input {
	/* text-transform: uppercase; */
	color: var(--wpcd-secondary-brand-color);
	font-size: 1.25em;
	margin-top: -10px;
	/* Don't allow long domain names to wrap to wrap */
	overflow-x: clip; 
	text-overflow: ellipsis;
}

/* Buttons in the top of site area */
#wpcd_wordpress-app_tab_top_of_site_details .rwmb-input .button,
#wpcd_wordpress-app_tab_top_of_site_details .rwmb-input .button a {
	text-decoration: none;
	background-color: var(--wpcd-primary-brand-color);
	border-color: var(--wpcd-primary-brand-color);
	border-radius: 3px;
	color: var(--wpcd-white-color);
}
#wpcd_wordpress-app_tab_top_of_site_details .rwmb-input .button:hover,
#wpcd_wordpress-app_tab_top_of_site_details .rwmb-input .button a:hover {
	text-decoration: none;
	border-color: var(--wpcd-white-color);
}

/** 
 * Make the data under the domain name 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_site_details_top_row  .wpcd_site_details_top_row_element_wrapper .wpcd_medium_chicklet {
	/* Applies to all medium sized chicklets - duplicated in wpcd-server-admin.css  */
	font-size: 10px;
	font-weight: normal;
	padding: 5px;
	border-radius:3px;
	border: solid 1px;
	margin-right: 5px;
	min-width: 20px;
}
.wpcd_site_details_top_row .wpcd_site_details_top_row_element_wrapper .wpcd_site_details_top_row_element_wstype {
	color: var(--wpcd-primary-brand-color);
	border-color: var(--wpcd-primary-brand-color);	
}
.wpcd_site_details_top_row .wpcd_site_details_top_row_element_wrapper .wpcd_site_details_top_row_element_ssl_on {
	color: var(--wpcd-positive-color);
	border-color: var(--wpcd-positive-color);	
}
.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_site_details_top_row .wpcd_site_details_top_row_element_wrapper .wpcd_site_details_top_row_element_page_cache_on {
	color: var(--wpcd-positive-color);
	border-color: var(--wpcd-positive-color);	
}
.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_site_details_top_row .wpcd_site_details_top_row_element_wrapper .wpcd_site_details_top_row_element_git_status {
	color: var(--wpcd-positive-color);
	border-color: var(--wpcd-positive-color);	
}
.wpcd_site_details_top_row .wpcd_site_details_top_row_element_wrapper .wpcd_site_details_top_row_element_site_type {
	color: black;
	border-color: black;
}
.wpcd_site_details_top_row .wpcd_site_details_top_row_element_wrapper .wpcd_site_details_top_row_element_passwordless_login,
.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_site_details_top_row .wpcd_site_details_top_row_element_wrapper .wpcd_site_details_top_row_element_passwordless_login a:hover,
.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-white-color);
}
/* End make the data under the domain name when we're using left menus smaller and in chiclet boxes...*/

@media only screen and (max-width: 1600px) {
	/* As the screen gets smaller decrease the size of the domain name font */
	#wpcd_wordpress-app_tab_top_of_site_details .wpcd_site_details_top_row_domain_left .rwmb-input {
		font-size: 1.2em;
	}
}

@media only screen and (max-width: 1300px) {
	/* As the screen gets smaller, we want the column divs in that top row to wrap - we can do that by making the width 100% */
	#wpcd_wordpress-app_tab_top_of_site_details .rwmb-column {
		width: 100%;
	}
}

/* Tab metabox on the app detail screen - make title uppercase */
#wpcd_wordpress-app_tab2 h2.hndle.ui-sortable-handle {
	text-transform: uppercase;
}

@media only screen and (max-width: 1300px) {
	/* As the screen gets smaller, we need to hide the metabox title since the data in there isn't structured for columns unfortunately. */
	#wpcd_wordpress-app_tab2 h2.hndle.ui-sortable-handle {
		display: none;
	}
}

/* Certain text elements in the tab metabox on the app detail screen - change their colors to make more visible */
#wpcd_wordpress-app_tab2 h2.hndle.ui-sortable-handle .wpcd_metabox_title_value {
	color: var(--wpcd-secondary-brand-color);
	/* pinkish but not wpcd colors */
}

#wpcd_wordpress-app_tab2 h2.hndle.ui-sortable-handle a.wpcd_metabox_title_value {
	font-size: 14px;
	text-decoration: none;
	font-weight: 700;
}

/* Add some padding around each tab and make the font a little bigger.*/
.wpcd-wpapp-actions .rwmb-tab-nav li[class^='rwmb-tab-'] a {
	padding-left: 1.25em !important;
	padding-right: 1.25em !important;
	padding-top: 1.0em !important;
	padding-bottom: 1.0em !important;
	font-size: 1.1em;
}

/* If the tabs are being painted vertically put some more padding on the right */
.wpcd-wpapp-actions .rwmb-tabs-left .rwmb-tab-nav li[class^='rwmb-tab-'] a {
	padding-right: 5em !important;
	padding-top: 0.75em !important;
	padding-bottom: 0.75em !important;
}

/* Remove some excess space below the tab navigation row for horizontal tabs*/
.wpcd-wpapp-actions .rwmb-tab-nav {
	margin-bottom: 0.01px !important;
}

/* Remove the lower border on the anchor in the vertical tabs that was introduced sometime in 2021 by the metabox.io publisers */
.wpcd-wpapp-actions .rwmb-tabs-left .rwmb-tab-nav li {
	border-bottom: 0px !important;
}

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

.wpcd-wpapp-actions .rwmb-tabs-left .rwmb-tab-nav .rwmb-tab-active {
	background-image: linear-gradient( to right, var(--wpcd-accent-background-color), var(--wpcd-accent-background-color) 50%, var(--wpcd-alternate-accent-background-color) 50%);
	background-size: 200% 100%;
	background-position: 100%;
	transition: all 0.5s cubic-bezier(0.000, 0.000, 0.230, 1);
}

.wpcd-wpapp-actions .rwmb-tabs-left .rwmb-tab-nav a {
	color: var(--wpcd-white-color);
}

.wpcd-wpapp-actions .rwmb-tabs-left .rwmb-tab-nav .rwmb-tab-active a {
	color: var(--wpcd-primary-brand-color);
	font-weight: bold;
}

/* Hover color for vertical tabs */
.wpcd-wpapp-actions .rwmb-tabs-left .rwmb-tab-nav a:hover {
	color: var(--wpcd-primary-brand-color);
	transition: all 1s cubic-bezier(0.000, 0.000, 0.230, 1);
}

/* Font awesome pro icons need a little it more margin... */
.wpcd-wpapp-actions .rwmb-tab-nav i {
	margin-right: .6em;
}

/* The first row at the top of the site detail screen needs some extra love - bigger fonts for values. */
.wpcd_site_details_top_row {
	font-size: 1.4em !important;
	font-weight: bold !important;
	margin-top: 1em !important;
}

.wpcd_site_details_top_row .rwmb-label {
	/* smaller fonts for the labels */
	font-size: 0.75em !important;
	color: var(--wpcd-primary-brand-color);
}

.wpcd_site_details_top_row #wpcd_app_action_site-detail-header-view-admin, .wpcd_site_details_top_row #wpcd_app_action_site-detail-header-view-site, .wpcd_site_details_top_row #wpcd_app_action_site-detail-header-view-apps {
	/* Buttons at the top of the first row of the site needs some tweaking on font size, decoration and so on. */
	font-size: small;
	font-weight: normal;
}

.wpcd_site_details_top_row #wpcd_app_action_site-detail-header-view-admin a, .wpcd_site_details_top_row #wpcd_app_action_site-detail-header-view-site a, .wpcd_site_details_top_row #wpcd_app_action_site-detail-header-view-apps a {
	text-decoration: none;
}

/* Add some padding to the content area of the tab */
.wpcd-wpapp-actions .rwmb-tab-panel {
	padding-left: 2em !important;
	padding-right: 2em !important;
	padding-bottom: 3em !important;
}

/* Font for section headings need to be a little larger */
.wpcd-wpapp-actions h4 {
	font-size: 1.1em !important;
	color: var(--wpcd-primary-brand-color);
	margin-top: 5px !important;
}
/* End style Metabox.io Tabs in the wp-app screen */

/* the password toggle icon */
.wpcd_app_pass_toggle_icon {
	vertical-align: middle;
	width: 30px;
	height: 30px;
	cursor: pointer;
}