@import url(variables.css);
:root {
	--url-server-desktop: 'IMPORTANT: After installing the Desktop app, you will need to set the following URL as Owncloud Server Address: ';
	--url-server-mobile: 'IMPORTANT: After installing the Mobile app, you will need to set the following URL as Owncloud Server Address: ';
	--primary-color: #EE0700;
	--secondary-color: #ffffff;
	--main-text-color: #000000;
}

/* header color */
/* this is the main brand color */
#body-user #header,
#body-settings #header,
#body-public #header {
	background-color: var(--primary-color);
}

/* log in screen background color and image */
/* gradient of the header color and a brighter shade */
/* can also be a flat color or an image */
#body-login {
	/* Login background image */
	background: url("../img/background.jpg") no-repeat center center fixed !important;
	background-size: cover !important;
	height: 100% !important;
	/* End of using background image */
	background: var(--primary-color); /* Old browsers */
	background: -moz-linear-gradient(top, var(--secondary-color) 0%, var(--primary-color) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,var(--secondary-color)), color-stop(100%,var(--primary-color))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, var(--secondary-color) 0%,var(--primary-color) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, var(--secondary-color) 0%,var(--primary-color) 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, var(--secondary-color) 0%,var(--primary-color) 100%); /* IE10+ */
	background: linear-gradient(top, var(--secondary-color) 0%,var(--primary-color) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='var(--secondary-color)', endColorstr='var(--primary-color)',GradientType=0 ); /* IE6-9 */
}

/* >= ownCloud 10.8 - login button */
/* styling of the login button which was introduced with ownCloud 10.8 */
#alternative-logins li a.button, html #body-login input[type="submit"], html #body-login button[type="submit"] {
  background-color: var(--primary-color);
  color: #fff; /* color of the text */
  border: 1px solid #fff;
}
/* style for the hovered state of the button */
#alternative-logins li a.button:hover, html #body-login input[type="submit"]:hover, html #body-login button[type="submit"]:hover {
  background-color: var(--secondary-color);
  color: var(--primary-color); /* color of the text */
  border: 1px solid #fff;
}

/* style legal and copyright text */
/* styling of the info text of the login page on the button. */
/* the color of the p.info part is also the color of the text above the credential fields (used by ownCloud >= 10.8) */
/* also the color of error messages will be changed to the provided value */
#body-login p.info, #body-login .warning, #body-login .update, #body-login .error, #body-login #showAdvanced {
  color: #fff;
}
/* legal and copyright text (Link) */
#body-login p.info a, #body-login .update a, #body-login form fieldset legend, #body-login #datadirContent label {
  color: #fff;
}

/* primary action button, use sparingly */
/* header color as border, brighter shade again, here as background */
.primary,
input[type="submit"].primary,
input[type="button"].primary,
button.primary,
.button.primary,
.primary:active,
input[type="submit"].primary:active,
input[type="button"].primary:active,
button.primary:active,
.button.primary:active {
	border-color: var(--primary-color);
	color: var(--secondary-color);
	background-color: var(--primary-color);
}
.primary:hover,
input[type="submit"].primary:hover,
input[type="button"].primary:hover,
button.primary:hover,
.button.primary:hover,
.primary:focus,
input[type="submit"].primary:focus,
input[type="button"].primary:focus,
button.primary:focus,
.button.primary:focus {
	color: var(--primary-color);
	background-color: var(--secondary-color);
}
.primary:active, input[type="submit"].primary:active, input[type="button"].primary:active, button.primary:active, .button.primary:active,
.primary:disabled, input[type="submit"].primary:disabled, input[type="button"].primary:disabled, button.primary:disabled, .button.primary:disabled,
.primary:disabled:hover, input[type="submit"].primary:disabled:hover, input[type="button"].primary:disabled:hover, button.primary:disabled:hover, .button.primary:disabled:hover,
.primary:disabled:focus, input[type="submit"].primary:disabled:focus, input[type="button"].primary:disabled:focus, button.primary:disabled:focus, .button.primary:disabled:focus {
	background-color: var(--secondary-color);
}

#expand {
	background: #ffffff !important;
    border-top-left-radius: 0px;
    padding-bottom: 10PX;
}

#expandDisplayName {
	color: var(--main-text-color) !important;
}

a, #header {
	opacity: 1 !important;
}
a:hover, #header:hover {
	opacity: 0.8 !important;
}

#header * {
	font-weight: bold;
	opacity: 1 !important;
	color: #ffffff;
}

/* use logos from theme */
#header .logo {
	background-image: url('../img/logo.svg');
	width: 250px;
	height: 121px;
	opacity: 1 !important;
}
#header .logo-icon {
	background-image: url('../img/logo-icon.svg');
	height: 34px;
	opacity: 1 !important;
    background-size: 50px auto !important;
    line-height: 24px !important;
}
#owncloud {
	padding: 3px;
	opacity: 1 !important;
}

/* show Claim */
#body-user #logo-claim  {
	display: initial !important;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	padding-top: 17px;
	padding-left: 170px;
	height: 45px;
}
#body-user #logo-claim a {
	color: #fff;
}
/* hide on small screens */
@media only screen and (max-width: 767px) {
	#body-user #logo-claim  {
		display: none !important;
	}
}

/* Montserrat Normal */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/montserrat-normal-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/montserrat-normal-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Montserrat Italic */
@font-face {
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/montserrat-italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/montserrat-italic-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Zodiak';
    font-style: normal;
    font-weight: normal;
    font-display: auto;
    src: url('../fonts/Zodiak-Regular.woff2') format('woff2');
}

/**************** Alternatives fonts **********************/

/* Emergency.lu fonts */
/* Custom fonts *********************************************************************************************/
/* latin-ext */
@font-face {
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 400;
	src: url(../fonts/QGYyz_MVcBeNP4NjuGObqx1XmO1I4TC1O4i0ExAo.woff2) format('woff2');
	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 400;
	src: url(../fonts/QGYyz_MVcBeNP4NjuGObqx1XmO1I4TC1O4a0Ew.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
	font-family: 'Archivo Narrow';
	font-style: normal;
	font-weight: 400;
	src: url(../fonts/tss5ApVBdCYD5Q7hcxTE1ArZ0Zz8oY2KRmwvKhhvLFG6rHmsJCQ.woff2) format('woff2');
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
	font-family: 'Archivo Narrow';
	font-style: normal;
	font-weight: 400;
	src: url(../fonts/tss5ApVBdCYD5Q7hcxTE1ArZ0Zz8oY2KRmwvKhhvLFG6rXmsJCQ.woff2) format('woff2');
	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
	font-family: 'Archivo Narrow';
	font-style: normal;
	font-weight: 400;
	src: url(../fonts/tss5ApVBdCYD5Q7hcxTE1ArZ0Zz8oY2KRmwvKhhvLFG6o3ms.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
* {
	font-family: Montserrat, Outfit !important;
}
h1 {
	font-family: Zodiak, Archivo Narrow !important;
}
/*#body-user #header, #body-settings #header, #body-public #header {
    background-color: #EE0800 !important;
}*/

div#clientsbox a[href*="download.owncloud.com/desktop"]:after, div#firstrunwizard a[href*="download.owncloud.com/desktop"]:after {
	content: var(--url-server-desktop) var(--url-server-owncloud) !important;
	margin-bottom: 1em;
	display: block;
	font-weight: bold;
	color: #EE0700;
}

div#clientsbox a[href*="apps.apple.com"]:after, div#firstrunwizard a[href*="apps.apple.com"]:after {
	content: var(--url-server-mobile) var(--url-server-owncloud) !important;
	margin-bottom: 1em;
	display: block;
	font-weight: bold;
	color: #EE0700;
}

#header .burger:before {
    top: calc(50% - 0px) !important;
    height: 1px !important;
}