/*
 * cssjs/system.css
 *
 * System styles
 *
 * /!\ You may not update this file
 *
 * Copyright 2023 Philippe CROUÉ philippe@croue.com under GNU licence
 *
 * This file is part of Surfin'Data Manager.
 *
 */

:root {

    --defaultTopBottomPadding: 3px;
    --defaultLeftRightPadding: 5px;


	--errorPadding: 13px 7px;
	--errorBackgroundColor: rgb(255, 220, 220);
	--errorColorError: rgb(192, 0, 0);
	--errorColorWarning: rgb(192, 96, 0);
	--errorColorDelete: rgb(128, 0, 0);

	--errorBorder: 1px solid red;
	--errorBorderRadius: 7px;


	--inputBorder: 1px solid grey;
	--inputBorderRadius: 5px;

	--inputStringWidth: 350px;
	--inputSelectWidth: 350px;
	--inputCodeWidth: 100px;
	--inputNumberWidth: 70px;
	--inputBigNumberWidth: 150px;
	--inputShortStringWidth: 200px;
	--inputDateWidth: 160px;
	--inputYearWidth: 50px;
	--inputTimeWidth: 60px;
	--inputPhoneWidth: 120px;
	--inputTextWidth: 350px;
	--inputTextHeight: 70px;


    --buttonMargin: 0 3px;
    --buttonActionMargin: 0 3px;
    --buttonPadding: 9px 17px;
    --buttonActionPadding: 0;
    --buttonMinWidth: 100px;
    --buttonBorder: 1px solid;
	--buttonBorderRadius: 9px;
	--buttonFont: normal small-caps bold 100% mainFont;

	--buttonColorPrimary: white;
	--buttonBackgroundColorPrimary: #33C3F0;
	--buttonHoverColorPrimary: white;
	--buttonHoverBackgroundColorPrimary: #1EAEDB;

	--buttonColorInfo: white;
	--buttonBackgroundColorInfo: #65D62D;
	--buttonHoverColorInfo: white;
	--buttonHoverBackgroundColorInfo: #52C21B;

	--buttonColorAlert: white;
	--buttonBackgroundColorAlert: #F04333;
	--buttonHoverColorAlert: white;
	--buttonHoverBackgroundColorAlert: #DB2E1E;

	--buttonColorReset: white;
	--buttonBackgroundColorReset: #B3B3B3;
	--buttonHoverColorReset: white;
	--buttonHoverBackgroundColorReset: #999999;

	--buttonActionWidth: 16px;
	--buttonActionHeight: 16px;

	--buttonNavWidth: 16px;
	--buttonNavHeight: 16px;
}

/*
 * GLOBAL DEFINITIONS
 *
 */

* {
	        box-sizing: border-box;
	   -moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;

	margin: 0;
	padding: 0;
}
HTML, BODY {
	width: 100%;
	height: 100%;
}
BODY {
	overflow-x: hidden;
}
IMG {
	display: inline-block;
}
TABLE {
	margin: 0 auto;
}
TH {
	padding: var(--defaultTopBottomPadding) var(--defaultLeftRightPadding);
}
TD {
	padding: var(--defaultTopBottomPadding) var(--defaultLeftRightPadding);
}
/*
UL {
	margin-bottom: 0;
}
*/
LI {
	margin: 5px 0 5px 20px;
}
HR {
	border: 0;
	height: 1px;
	background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
}
CODE {
	display: inline-block;
	padding: 10px;
	width: 100%;
	color: white;
	background-color: rgb(40, 40, 40);
	font-family: monospace;
	font-size: 90%;
	white-space: pre-wrap;
	border-radius: var(--inputBorderRadius);

    tab-size: 4;
	-moz-tab-size: 4;
}
INPUT[TYPE="radio"] {
  margin-top: -1px;
  vertical-align: middle;
}

/* BUTTONS */

INPUT[type=submit],
INPUT[type=reset],
INPUT[type=button],
BUTTON,
.button-primary,
.button-info,
.button-alert,
.button-reset {
    display: inline-block;
    margin: var(--buttonMargin);
    padding: var(--buttonPadding);
    border: var(--buttonBorder);
    border-radius: var(--buttonBorderRadius);
    font: var(--buttonFont);
    cursor: pointer;
}
INPUT[type=submit],
INPUT[type=reset],
INPUT[type=button],
BUTTON,
.button-primary {
    color: var(--buttonColorPrimary);
    background-color: var(--buttonBackgroundColorPrimary);
    border-color: var(--buttonBackgroundColorPrimary);
}
.button-primary:hover {
    color: var(--buttonHoverColorPrimary);
    background-color: var(--buttonHoverBackgroundColorPrimary);
    border-color: var(--buttonHoverBackgroundColorPrimary);
}
A.button-primary {
    color: var(--buttonColorPrimary);
    text-decoration: none;
}
.button-info {
    color: var(--buttonColorInfo);
    background-color: var(--buttonBackgroundColorInfo);
    border-color: var(--buttonBackgroundColorInfo);
}
.button-info:hover {
    color: var(--buttonHoverColorInfo);
    background-color: var(--buttonHoverBackgroundColorInfo);
    border-color: var(--buttonHoverBackgroundColorInfo);
}
A.button-info {
    color: var(--buttonColorInfo);
    text-decoration: none;
}
.button-alert {
    color: var(--buttonColorAlert);
    background-color: var(--buttonBackgroundColorAlert);
    border-color: var(--buttonBackgroundColorAlert);
}
.button-alert:hover {
    color: var(--buttonHoverColorAlert);
    background-color: var(--buttonHoverBackgroundColorAlert);
    border-color: var(--buttonHoverBackgroundColorAlert);
}
A.button-alert {
    color: var(--buttonColorAlert);
    text-decoration: none;
}
.button-reset {
    color: var(--buttonColorReset);
    background-color: var(--buttonBackgroundColorReset);
    border-color: var(--buttonBackgroundColorReset);
}
.button-reset:hover {
    color: var(--buttonHoverColorReset);
    background-color: var(--buttonHoverBackgroundColorReset);
    border-color: var(--buttonHoverBackgroundColorReset);
}
A.button-reset {
    color: var(--buttonColorReset);
    text-decoration: none;
}

/* INPUTS OBJECTS */

INPUT[TYPE="color"],
INPUT[TYPE="date"],
INPUT[TYPE="datetime-local"],
INPUT[TYPE="email"],
INPUT[TYPE="file"],
INPUT[TYPE="image"],
INPUT[TYPE="month"],
INPUT[TYPE="number"],
INPUT[TYPE="password"],
INPUT[TYPE="radio"],
INPUT[TYPE="range"],
INPUT[TYPE="search"],
INPUT[TYPE="tel"],
INPUT[TYPE="text"],
INPUT[TYPE="time"],
INPUT[TYPE="url"],
INPUT[TYPE="week"],
TEXTAREA,
SELECT {
	padding: var(--defaultTopBottomPadding) var(--defaultLeftRightPadding);
	border: var(--inputBorder);
	border-radius: var(--inputBorderRadius);
}

.input-code {
	width: var(--inputCodeWidth);
	text-align: left;
}
.input-num {
	width: var(--inputNumberWidth);
	text-align: right;
}
.input-bignum {
	width: var(--inputBigNumberWidth);
	text-align: right;
}
.input-str {
	width: var(--inputStringWidth);
	text-align: left;
}
.input-shortstr {
	width: var(--inputShortStringWidth);
	text-align: left;
}
.input-date {
	width: var(--inputDateWidth);
	text-align: center;
}
.input-year {
	width: var(--inputYearWidth);
	text-align: center;
}
.input-time {
	width: var(--inputTimeWidth);
	text-align: center;
}
.input-phone {
	width: var(--inputPhoneWidth);
	text-align: center;
}
SELECT {
	width: var(--inputSelectWidth);
}
TEXTAREA, .comments-text {
	width: var(--inputTextWidth);
	height: var(--inputTextHeight);
}
.updated {
	border-color: red;
}
/* SYSTEM DEFINITIONS */

.box {
	display: inline-block;
}
.line {
	display: inline-block;
	width: 100%;
}
.left {
	text-align: left;
}
.center {
	text-align: center;
}
.right {
	text-align: right;
}
.justify {
	text-align: justify;
}
.top {
	vertical-align: top;
}
.middle {
	vertical-align: middle;
}
.bottom {
	vertical-align: bottom;
}
.floatleft {
	float: left;
}
.floatright {
	float: right;
}
.nowrap {
	white-space: nowrap;
}
.withPointer {
    cursor: pointer;
}
.fullwidth {
    width: 100%;
}
.midwidth {
    width: 49.9%;
}

/*
 * CMS ADMINISTRATION SECTION STYLES
 *
 */

/* ROOT PAGE (NO PARENT) IN CMSPAGES LIST */

.tr-rootpage {
	font-weight: bold;
}

/* NEW VALUES IN CMSDIFFUSE */

.td-raise {
	background-color: rgb(255, 255, 180);
}

/* CMSPAGES ACTION BUTTONS */

.td-actionbuttons {
	font-weight: normal;
}

.button-action {
	margin: var(--buttonActionMargin) !important;
	padding: var(--buttonActionPadding) !important;
	width: var(--buttonActionWidth);
	height: var(--buttonActionHeight);
	cursor: pointer;
	border: none !important;

	background-color: transparent !important;
    border-radius: 0 !important;
    border-color: transparent !important;
}
.button-action-disable {
	margin: var(--buttonActionMargin) !important;
	padding: var(--buttonActionPadding) !important;
	width: var(--buttonActionWidth);
	height: var(--buttonActionHeight);
	cursor: auto !important;
	border: none !important;

	background-color: transparent !important;
    border-radius: 0 !important;
    border-color: transparent !important;
}
.button-action-double {
	margin: var(--buttonActionMargin) !important;
	padding: var(--buttonActionPadding) !important;
	width: calc(var(--buttonActionWidth) * 2);
	height: calc(var(--buttonActionHeight) * 2);
	cursor: pointer;
	border: none !important;

	background-color: transparent !important;
    border-radius: 0 !important;
    border-color: transparent !important;
}
.button-action-double-disable {
	margin: var(--buttonActionMargin) !important;
	padding: var(--buttonActionPadding) !important;
	width: calc(var(--buttonActionWidth) * 2);
	height: calc(var(--buttonActionHeight) * 2);
	cursor: auto !important;
	border: none !important;

	background-color: transparent !important;
    border-radius: 0 !important;
    border-color: transparent !important;
}
.button-nav {
	margin: var(--buttonActionMargin) !important;
	padding: var(--buttonActionPadding) !important;
	height: var(--buttonNavHeight);
	cursor: pointer;
	border: none !important;

	background-color: transparent !important;
    border-radius: 0 !important;
    border-color: transparent !important;
}

.button-delete {
	background: url(./images/button-delete.png) no-repeat;
}
.button-show {
	background: url(./images/button-show.png) no-repeat;
}
.button-update {
	background: url(./images/button-update.png) no-repeat;
}
.button-undo {
	background: url(./images/button-undo.png) no-repeat;
}
.button-translate {
	background: url(./images/button-translate.png) no-repeat;
}
.button-hidden {
	background: url(./images/button-hidden.png) no-repeat;
}

/* Nav buttons */

.button-forward {
	background: url(./images/button-forward.png) no-repeat;
}
.button-backward {
	background: url(./images/button-backward.png) no-repeat;
}

/* Secondary menu button */

.button-submenu {
	display: none;
	background: url(./images/button-submenu.png) no-repeat;
	vertical-align: top;
}

/* CMS ADMINISTRATION SPECIAL DEFS */

#logs {
	overflow: auto;
	height: 300px;
	background-color: white;
	text-align: left;
}
#logs PRE {
	font-family: courier;
}
.errorDiv {
	margin-bottom: 13px;
	padding: var(--errorPadding);
	background-color: var(--errorBackgroundColor);
	border: var(--errorBorder);
	border-radius: var(--errorBorderRadius);
}
.error {
	color: var(--errorColorError);
	font-weight: bold;
}
.warning {
	color: var(--errorColorWarning);
	font-weight: bold;
}
.delete {
	color: var(--errorColorDelete);
	font-weight: bold;
}
.newfiles {
	padding: var(--defaultTopBottomPadding) var(--defaultLeftRightPadding);
	border: var(--inputBorder);
	border-radius: var(--inputBorderRadius);
}

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

	.button-submenu {
		display: inline-block;
	}
}