/*#################################################*/
/* MODERN LOOK
/* Loaded after style.css and before style.custom.php (CPanel themes still override colors).
/* Only colors, borders, shadows and rounded corners are changed, sizes and positions stay
/* the same, so JS layout calculations are not affected.
/* To return to original look remove style.modern.css link from index.php, tracking.php and cpanel.php.
/*#################################################*/

:root {
	--gs-primary: #2b82d4;
	--gs-primary-dark: #236fb6;
	--gs-primary-soft: #e9f2fb;
	--gs-primary-ring: rgba(43, 130, 212, 0.18);
	--gs-text: #2f3b4a;
	--gs-text-muted: #6b7785;
	--gs-border: #e1e6ec;
	--gs-border-strong: #c9d2dc;
	--gs-surface: #ffffff;
	--gs-surface-2: #f4f6f9;
	--gs-surface-3: #eceff3;
	--gs-radius: 6px;
	--gs-radius-lg: 10px;
	--gs-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
	--gs-shadow: 0 4px 14px rgba(16, 24, 40, 0.10), 0 1px 3px rgba(16, 24, 40, 0.06);
	--gs-shadow-lg: 0 18px 40px rgba(16, 24, 40, 0.18), 0 3px 8px rgba(16, 24, 40, 0.08);
}

/*#################################################*/
/* BASE
/*#################################################*/

body,
input, select, textarea, button, optgroup, option,
.ui-widget, .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
	font-family: "Open Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

body {
	color: var(--gs-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--gs-primary-soft); color: var(--gs-text); }

/* thin scrollbars */
* { scrollbar-width: thin; scrollbar-color: #c3ccd6 transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c9d1da; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #aab4bf; background-clip: content-box; }

/*#################################################*/
/* INPUTBOXES, SELECT
/*#################################################*/

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
select,
textarea,
.inputbox,
.textarea,
.ms-choice {
	border: 1px solid var(--gs-border);
	border-radius: var(--gs-radius);
	background-color: var(--gs-surface);
	color: var(--gs-text);
	transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

input[type="text"]:hover,
input[type="password"]:hover,
input[type="email"]:hover,
input[type="number"]:hover,
select:hover,
textarea:hover,
.inputbox:hover,
.ms-choice:hover {
	border-color: var(--gs-border-strong);
	background-color: var(--gs-surface);
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus,
.inputbox:focus {
	border-color: var(--gs-primary);
	box-shadow: 0 0 0 3px var(--gs-primary-ring);
	background-color: var(--gs-surface);
}

input:disabled,
textarea:disabled,
select:disabled,
.ms-choice.disabled {
	border-color: var(--gs-surface-3);
	background-color: var(--gs-surface-3);
	color: var(--gs-text-muted);
}

/* color pickers have no border, background is the selected color */
input.color,
input.color:hover,
input.color:focus { border: none; box-shadow: none; }

/* calendar and search inputs keep their icons */
.inputbox-calendar,
.inputbox-calendar-mmdd { background-color: var(--gs-surface); border-color: var(--gs-border); }
.inputbox-calendar:disabled,
.inputbox-calendar-mmdd:disabled { background-color: var(--gs-surface-3); }
.inputbox-search { background-color: var(--gs-surface-2); border-color: var(--gs-surface-2); }
.inputbox-search:hover,
.inputbox-search:focus { background-color: var(--gs-surface); }

input[type="checkbox"],
input[type="radio"] { accent-color: var(--gs-primary); }

.ms-drop {
	border: 1px solid var(--gs-border);
	border-radius: var(--gs-radius);
	box-shadow: var(--gs-shadow);
	overflow: hidden;
}

/*#################################################*/
/* BUTTONS
/*#################################################*/

input.button,
input.button-32 {
	border: 1px solid var(--gs-border);
	border-radius: var(--gs-radius);
	background-color: var(--gs-surface);
	color: var(--gs-text);
	box-shadow: var(--gs-shadow-sm);
	transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
input.button:hover,
input.button-32:hover {
	border-color: var(--gs-border-strong);
	background-color: var(--gs-surface-2);
}
input.button:active,
input.button-32:active {
	background-color: var(--gs-surface-3);
	box-shadow: none;
}
input.button:focus-visible,
input.button-32:focus-visible { box-shadow: 0 0 0 3px var(--gs-primary-ring); }
input.button:disabled,
input.button-32:disabled {
	border-color: var(--gs-surface-3);
	background-color: var(--gs-surface-3);
	box-shadow: none;
	cursor: default;
}

input.button.panel {
	border-color: transparent;
	background-color: transparent;
	box-shadow: none;
}
input.button.panel:hover,
input.button.panel:active {
	border-color: var(--gs-surface-3);
	background-color: var(--gs-surface-3);
}

.panel-button img {
	background-color: var(--gs-surface-2);
	border-radius: var(--gs-radius);
	transition: background-color .15s ease;
}
.panel-button img:hover { background-color: var(--gs-surface-3); }

/*#################################################*/
/* HEADINGS
/*#################################################*/

.title-block {
	border-bottom-color: var(--gs-border);
	letter-spacing: 0.1px;
}

/*#################################################*/
/* TOP PANEL
/*#################################################*/

#top_panel {
	box-shadow: 0 1px 0 var(--gs-border), 0 2px 10px rgba(16, 24, 40, 0.05);
}
#top_panel .tp-menu div a {
	color: var(--gs-text-muted);
	transition: background-color .15s ease, box-shadow .15s ease;
}
#top_panel a:hover { background-color: var(--gs-surface-2); }
#top_panel a.active {
	background-color: var(--gs-primary-soft);
	box-shadow: inset 0 -2px 0 var(--gs-primary);
}
#top_panel .chat-btn span,
#top_panel .billing-btn span,
#top_panel .billing-btn-red span {
	border-radius: 9px;
	padding: 3px 6px;
	font-weight: 600;
}
#top_panel .select-language { border-radius: var(--gs-radius); }

/*#################################################*/
/* SIDE AND BOTTOM PANELS
/*#################################################*/

#side_panel { box-shadow: 1px 0 0 var(--gs-border), 4px 0 12px rgba(16, 24, 40, 0.04); }
#bottom_panel { box-shadow: 0 -1px 0 var(--gs-border), 0 -4px 12px rgba(16, 24, 40, 0.04); }

/*#################################################*/
/* TABS
/*#################################################*/

.ui-tabs .ui-tabs-nav { background-color: var(--gs-surface-2); }
.ui-tabs .ui-tabs-nav li a {
	border-radius: var(--gs-radius) var(--gs-radius) 0 0;
	color: var(--gs-text-muted);
	transition: color .15s ease, background-color .15s ease;
}
.ui-tabs .ui-tabs-nav li a:hover { color: var(--gs-text); }
.ui-tabs .ui-tabs-nav li.ui-tabs-active a {
	background-color: var(--gs-surface);
	color: var(--gs-primary);
	box-shadow: inset 0 2px 0 var(--gs-primary);
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active { background-color: var(--gs-surface-2); }

/* places sub tabs are buttons */
#side_panel_places .ui-tabs-nav li a { border-radius: var(--gs-radius); }
#side_panel_places .ui-tabs-nav li.ui-tabs-active a { box-shadow: var(--gs-shadow-sm); }

/*#################################################*/
/* DIALOGS
/*#################################################*/

.ui-dialog {
	border-radius: var(--gs-radius-lg);
	box-shadow: var(--gs-shadow-lg);
}
.ui-dialog .ui-dialog-titlebar {
	border-radius: var(--gs-radius-lg) var(--gs-radius-lg) 0 0;
	font-weight: 600;
	letter-spacing: 0.2px;
}
.ui-dialog .ui-dialog-titlebar-close {
	border-radius: 50%;
	transition: background-color .15s ease;
}
.ui-dialog .ui-dialog-titlebar-close:hover { background-color: rgba(255, 255, 255, 0.22); }
.ui-dialog .ui-dialog-content { border-radius: 0 0 var(--gs-radius-lg) var(--gs-radius-lg); }
.ui-dialog .ui-dialog-buttonpane { border-radius: 0 0 var(--gs-radius-lg) var(--gs-radius-lg); }

.ui-widget-overlay {
	background: #1b2533;
	opacity: 0.35;
}

.controls-block { background-color: var(--gs-surface-2); border-bottom: 1px solid var(--gs-border); }

/*#################################################*/
/* GRIDS
/*#################################################*/

.ui-jqgrid .ui-jqgrid-hdiv {
	background-color: var(--gs-surface-2);
	border-radius: var(--gs-radius);
}
.ui-jqgrid .ui-jqgrid-htable th {
	color: var(--gs-text-muted);
	font-weight: 600;
}
.ui-th-ltr, .ui-jqgrid .ui-jqgrid-htable th.ui-th-ltr { border-left-color: var(--gs-border); }
.ui-jqgrid tr.ui-row-ltr td { border-color: var(--gs-surface-3); }
.ui-jqgrid tr.jqgrow { transition: background-color .1s ease; }
.ui-jqgrid .ui-state-hover {
	background-color: #f5f8fc;
	opacity: 1;
}
.ui-jqgrid .ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
	background-color: var(--gs-primary-soft);
	opacity: 1;
}
.ui-jqgrid .ui-jqgrid-pager {
	background-color: var(--gs-surface-2);
	border-top: 1px solid var(--gs-border) !important;
}
.ui-pg-div .ui-icon-plus { border-radius: var(--gs-radius); }
/* pager at the bottom edge of dialog follows rounded corners */
.ui-dialog .ui-jqgrid .ui-jqgrid-pager { border-radius: 0 0 var(--gs-radius-lg) var(--gs-radius-lg); }
.ui-dialog .ui-pg-div .ui-icon-plus { border-radius: var(--gs-radius) var(--gs-radius) var(--gs-radius) var(--gs-radius-lg); }
.ui-jqgrid .ui-pg-button:hover { border-radius: var(--gs-radius); }

/*#################################################*/
/* MENUS, TOOLTIPS, NOTIFICATIONS
/*#################################################*/

.menu {
	border-radius: var(--gs-radius-lg);
	box-shadow: var(--gs-shadow);
	border: 1px solid var(--gs-border);
}
.menu ul {
	border-radius: var(--gs-radius-lg);
	box-shadow: var(--gs-shadow);
	border: 1px solid var(--gs-border);
}
.menu li { border-top-color: var(--gs-surface-2); }
.menu li a:hover,
.menu.ui-menu .ui-menu-item a.ui-state-focus,
.menu.ui-menu .ui-menu-item a.ui-state-active { background-color: var(--gs-surface-2); }
.menu.ui-menu .first-item { border-radius: var(--gs-radius-lg) var(--gs-radius-lg) 0 0; }

.qtip, .ui-tooltip {
	border-radius: var(--gs-radius);
	box-shadow: var(--gs-shadow);
}

.ui-pnotify-container {
	border-radius: var(--gs-radius-lg);
	box-shadow: var(--gs-shadow);
}

/*#################################################*/
/* DATEPICKER
/*#################################################*/

.ui-datepicker {
	border-radius: var(--gs-radius-lg);
	box-shadow: var(--gs-shadow);
	border: 1px solid var(--gs-border);
}
.ui-datepicker td a,
.ui-datepicker td span { border-radius: var(--gs-radius); }
.ui-datepicker .ui-state-highlight { background-color: var(--gs-primary-soft); color: var(--gs-primary); }
.ui-datepicker .ui-state-active { background-color: var(--gs-primary); color: #ffffff; }

/*#################################################*/
/* MAP CONTROLS
/*#################################################*/

.leaflet-bar,
.leaflet-control-layers,
.map-layer-control,
.history-view-control {
	border: none !important;
	border-radius: var(--gs-radius) !important;
	box-shadow: var(--gs-shadow) !important;
	overflow: hidden;
}
.leaflet-bar a { border-bottom-color: var(--gs-surface-3); }
.leaflet-bar a:hover { background-color: var(--gs-surface-2); }
.leaflet-popup-content-wrapper,
.leaflet-popup-tip { box-shadow: var(--gs-shadow); }
.leaflet-popup-content-wrapper { border-radius: var(--gs-radius-lg); }
.camera-control,
.street-view-control {
	border-radius: var(--gs-radius-lg);
	box-shadow: var(--gs-shadow);
	overflow: hidden;
}

/*#################################################*/
/* LOGIN PAGE
/*#################################################*/

body#login {
	/* uploaded login background (CPanel) stays on top, soft gradient is shown when there is none */
	background-image: url(../img/login-background.jpg), linear-gradient(135deg, #f3f6fa 0%, #e6edf6 55%, #dbe6f3 100%);
	background-position: center center, center center;
	background-size: cover, cover;
	background-attachment: fixed;
}
#login .wrapper .inner-wrapper {
	border-radius: 14px;
	box-shadow: var(--gs-shadow-lg);
	padding: 28px;
}
#login input.inputbox {
	border-radius: 8px;
	background-color: var(--gs-surface-2);
	border-color: var(--gs-surface-2);
}
#login input.inputbox:hover { background-color: var(--gs-surface); border-color: var(--gs-border); }
#login input.inputbox:focus {
	background-color: var(--gs-surface);
	border-color: var(--gs-primary);
	box-shadow: 0 0 0 3px var(--gs-primary-ring);
}
#login .wrapper .content-block input.button {
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(43, 130, 212, 0.28);
	letter-spacing: 0.3px;
	transition: opacity .15s ease, box-shadow .15s ease;
}
#login .wrapper .content-block input.button:hover { box-shadow: 0 6px 16px rgba(43, 130, 212, 0.34); }
#login .registration-closed { border-radius: 8px; }
#login .recover-register-block li a { color: var(--gs-text-muted); transition: color .15s ease; }
#login .recover-register-block li a:hover { color: var(--gs-primary); }
#login .footer { border-top-color: var(--gs-border); }
#login .footer .mobile-v { color: var(--gs-text-muted); }
#login .server-select .ms-choice { border-radius: 8px; }

/*#################################################*/
/* CPANEL
/*#################################################*/

body#cpanel { background-color: #edf1f5; }
#cpanel_user_list,
#cpanel_object_list,
#cpanel_unused_object_list,
#cpanel_billing_plan_list {
	border-radius: var(--gs-radius-lg);
	box-shadow: var(--gs-shadow-sm), 0 0 0 1px var(--gs-border);
}
#cpanel #cpanel_manage_server .ui-tabs-nav { background-color: var(--gs-surface-2); }
#cpanel #cpanel_manage_server .ui-tabs .ui-tabs-nav li a {
	border-radius: var(--gs-radius);
	box-shadow: none;
}
#cpanel #cpanel_manage_server .ui-tabs .ui-tabs-nav li.ui-tabs-active a { box-shadow: var(--gs-shadow-sm); }
#cpanel_manage_server .ui-img-container { border-radius: var(--gs-radius); border-color: var(--gs-border); }