/*
 * These are now the real basic styles that once used to be in basic.css
 * These are included in basic.css but also in item_base.css so they are available in WYSIWYG editors
 */

@import "inc/text_styles.inc.less";
@import "inc/image_styles.inc.less";
@import "inc/block_styles.inc.less";

@import "inc/sprite_flags.inc.less";
@import "inc/sprite_icons.inc.less";

@import "inc/fontawesome_icons.inc.less";
@import "inc/loader.inc.less";

@import "inc/visibility_status_colors.inc.less";

@import "inc/userfield_icons.inc.less";

@import "inc/current_filters.inc.less";
// Legacy specific Styles of filters for current selection of the posts (widget "Current filters"):
.filter_item div.icon {
	height: 22px;
}

// Break all long links:
a {
	word-break: break-all;
}

// ------ Styles to hide/show depending on window width (from bootstrap library):
.visible-xs,
.visible-sm,
.visible-md,
.visible-lg,
.visible-xs-inline,
.visible-xs-inline-block,
.visible-sm-inline,
.visible-sm-inline-block,
.visible-md-inline,
.visible-md-inline-block,
.visible-lg-inline,
.visible-lg-inline-block {
	display: none !important;
}
@media (max-width: 767px) {
	.visible-xs {
		display: block !important;
	}
	.visible-xs-inline {
		display: inline !important;
	}
	.visible-xs-inline-block {
		display: inline-block !important;
	}
	.hidden-xs {
		display: none !important;
	}
}
@media (min-width: 768px) and (max-width: 991px) {
	.visible-sm {
		display: block !important;
	}
	.visible-sm-inline {
		display: inline !important;
	}
	.visible-sm-inline-block {
		display: inline-block !important;
	}
	.hidden-sm {
		display: none !important;
	}
}
@media (min-width: 992px) and (max-width: 1199px) {
	.visible-md {
		display: block !important;
	}
	.visible-md-inline {
		display: inline !important;
	}
	.visible-md-inline-block {
		display: inline-block !important;
	}
	.hidden-md {
		display: none !important;
	}
}
@media (min-width: 1200px) {
	.visible-lg {
		display: block !important;
	}
	.visible-lg-inline {
		display: inline !important;
	}
	.visible-lg-inline-block {
		display: inline-block !important;
	}
	.hidden-lg {
		display: none !important;
	}
}
// ---------------- //

// Use special font for code blocks in order to have the same width for each char
code, samp {
	font-family: Menlo, Monaco, "Courier New", Courier, monospace;
}

blockquote {
	border: 1px solid #eee;
	background-color: #eee;
	margin: 1em;
	padding: 1ex 1em;
}


// --- For Legacy skins: ---

// Hide something (for legacy skins)
.hidden {
	display: none;
}

.absolute_center {
	display: block;
	margin: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

.mb1 {
	margin-bottom: 1px;
}

// Font sizes (for legacy skins only)
.small92 {
	font-size: 92%;
}
.small84,
.small {
	font-size: 84%;
}
.small80 {
	font-size: 80%;
}
.small_details {
	font-size: 84%;
	color: #555;
}

img.flag {
	vertical-align:middle;
	border:1px solid #666;
}
img.flagtop {
	vertical-align:top;
	border:1px solid #666;
}

// --- Rounded buttons (For Legacy skins) ---

// The links that look as buttons with round corners:
a.roundbutton, a.roundbutton_text, span.roundbutton {
	/* autoprefixer: off */
	font: 11.28px Verdana, Geneva, Arial, Helvetica, sans-serif;
	display: inline-block;
	position: relative;
	min-width: 16px;
	height: 20px;
	line-height: 20px;
	padding: 0 5px;
	margin: 0;
	vertical-align: bottom;
	text-align: center;
	font-size: 11.28px;
	cursor: default;
	color: #000;
	text-decoration: none;
	border: 1px solid #787878;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-khtml-border-radius: 4px;

	background: #bababa;
	/* Safari 4-5, Chrome 1-9 */
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#bababa), to(#f5f5f5));
	/* Safari 5.1, Chrome 10+ */
	background: -webkit-linear-gradient(top, #f5f5f5, #bababa);
	/* Firefox 3.6+ */
	background: -moz-linear-gradient(center 1%, #f5f5f5, #bababa);
	/* IE 10 */
	background: -ms-linear-gradient(top, #f5f5f5, #bababa);
	/* Opera 11.10+ */
	background: -o-linear-gradient(top, #f5f5f5, #bababa);
	/* IE 8 */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#bababa');
}
a.roundbutton.middle {
	vertical-align: middle;
}

a.roundbutton:hover, a.roundbutton_text:hover {
	/* autoprefixer: off */
	cursor: default;
	text-decoration: none;
	color: inherit;
	background: #d2d2d2;
	/* Safari 4-5, Chrome 1-9 */
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d2d2d2), to(#a0a0a0));
	/* Safari 5.1, Chrome 10+ */
	background: -webkit-linear-gradient(top, #a0a0a0, #d2d2d2);
	/* Firefox 3.6+ */
	background: -moz-linear-gradient(center 1%, #a0a0a0, #d2d2d2);
	/* IE 10 */
	background: -ms-linear-gradient(top, #a0a0a0, #d2d2d2);
	/* Opera 11.10+ */
	background: -o-linear-gradient(top, #a0a0a0, #d2d2d2);
	/* IE 8 */
	// @milos -> @fp : I changed this according to what @amoun suggested here:
	// code @source http://forums.b2evolution.net/css-validation-in-6-7-4#c107271
	// old code: filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a0a0a0', endColorstr='#d2d2d2');
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#a0a0a0', endColorstr='#d2d2d2')";
}
a.roundbutton.roundbutton_selected, a.roundbutton_text.roundbutton_selected, span.roundbutton {
	/* autoprefixer: off */
	cursor: default;
	background: #989898;
	/* Safari 4-5, Chrome 1-9 */
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#989898), to(#6b6b6b));
	/* Safari 5.1, Chrome 10+ */
	background: -webkit-linear-gradient(top, #6b6b6b, #989898);
	/* Firefox 3.6+ */
	background: -moz-linear-gradient(center 1%, #6b6b6b, #989898);
	/* IE 10 */
	background: -ms-linear-gradient(top, #6b6b6b, #989898);
	/* Opera 11.10+ */
	background: -o-linear-gradient(top, #6b6b6b, #989898);
	/* IE 8 */
	// @milos -> @fp : I changed this according to what @amoun suggested here:
	// code @source http://forums.b2evolution.net/css-validation-in-6-7-4#c107271
	// old code: filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b6b6b', endColorstr='#989898');
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b6b6b', endColorstr='#989898')";
}
a.roundbutton_green, span.roundbutton_green,
a.roundbutton_green:hover, span.roundbutton_green:hover {
	/* autoprefixer: off */
	cursor: default;
	background: #09f197;
	/* Safari 4-5, Chrome 1-9 */
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#09f197), to(#00b46e));
	/* Safari 5.1, Chrome 10+ */
	background: -webkit-linear-gradient(top, #00b46e, #09f197);
	/* Firefox 3.6+ */
	background: -moz-linear-gradient(center 1%, #00b46e, #09f197);
	/* IE 10 */
	background: -ms-linear-gradient(top, #00b46e, #09f197);
	/* Opera 11.10+ */
	background: -o-linear-gradient(top, #00b46e, #09f197);
	/* IE 8 */
	// @milos -> @fp : I changed this according to what @amoun suggested here:
	// code @source http://forums.b2evolution.net/css-validation-in-6-7-4#c107271
	// old code: filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00b46e', endColorstr='#09f197');
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#00b46e', endColorstr='#09f197')";
}
a.roundbutton_red, span.roundbutton_red,
a.roundbutton_red:hover, span.roundbutton_red:hover {
	/* autoprefixer: off */
	cursor: default;
	background: #fa7171;
	/* Safari 4-5, Chrome 1-9 */
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fa7171), to(#e62020));
	/* Safari 5.1, Chrome 10+ */
	background: -webkit-linear-gradient(top, #e62020, #fa7171);
	/* Firefox 3.6+ */
	background: -moz-linear-gradient(center 1%, #e62020, #fa7171);
	/* IE 10 */
	background: -ms-linear-gradient(top, #e62020, #fa7171);
	/* Opera 11.10+ */
	background: -o-linear-gradient(top, #e62020, #fa7171);
	/* IE 8 */
	// @milos -> @fp : I changed this according to what @amoun suggested here:
	// code @source http://forums.b2evolution.net/css-validation-in-6-7-4#c107271
	// old code: filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e62020', endColorstr='#fa7171');
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#e62020', endColorstr='#fa7171')";
}
.roundbutton span, .roundbutton_text span {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
}
// The grouped round buttons, where only first and last buttons have the rounded corners
.roundbutton_group .roundbutton,
.roundbutton_group .roundbutton_text {
	border-radius: 0;
	border-left: none;
	border-right: 1px solid #787878;
}
.roundbutton_group .roundbutton::before,
.roundbutton_group .roundbutton_text::before {
	border-left: 1px solid #b1b1b1;
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -1px;
}
.roundbutton_group .roundbutton:first-child::before,
.roundbutton_group .roundbutton_text:first-child::before,
.roundbutton_group .roundbutton_text.first-child::before {
	border: none;
}
.roundbutton_group .roundbutton:first-child,
.roundbutton_group .roundbutton_text:first-child,
.roundbutton_group .roundbutton_text.first-child {
	border-radius: 4px 0 0 4px;
	-moz-border-radius-topleft: 4px; -moz-border-radius-bottomleft: 4px;
	-khtml-border-radius-topleft: 4px; -khtml-border-radius-bottomleft: 4px;
	-webkit-border-top-left-radius: 4px; -webkit-border-bottom-left-radius: 4px;
	border-left: 1px solid #787878;
	border-right: 1px solid #787878;
}
.roundbutton_group .roundbutton:last-child,
.roundbutton_group .roundbutton_text:last-child,
.roundbutton_group .roundbutton_text.last-child {
	border-left: none;
	border-right: 1px solid #787878;
	border-radius: 0 4px 4px 0;
	-moz-border-radius-topright: 4px; -moz-border-radius-bottomright: 4px;
	-khtml-border-radius-topright: 4px; -khtml-border-radius-bottomright: 4px;
	-webkit-border-top-right-radius: 4px; -webkit-border-bottom-right-radius: 4px;
}
.roundbutton_group .roundbutton:first-child:last-child,
.roundbutton_group .roundbutton_text:first-child:last-child,
.roundbutton_group .roundbutton_text.first-child.last-child {
	border: 1px solid #787878;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-khtml-border-radius: 4px;
}
// Round buttons with text
a.roundbutton_text, a.roundbutton_text_noicon {
	padding: 0 5px 0 23px;
	height: 20px;
	line-height: 20px;
}
a.roundbutton_text_noicon {
	padding-left: 5px;
}
a.roundbutton_text span, a.roundbutton_text_noicon span {
	left: 5px;
	right: auto;
}
// Black style for round buttons (NOW it is used ONLY for photoalbums skin to switch between posts on disp=single)
.roundbutton.rbtn_black, .roundbutton_group .roundbutton.rbtn_black {
	/* autoprefixer: off */
	border-color: #1a1a1a;
	background-color: #3a3a3a;
	background-size : 30px 30px;
	background-repeat:repeat-x;
	background-position :0;
	background-image : -moz-linear-gradient(
		90deg,
		rgba(0,0,0,0.01) 0%,
		rgba(0,0,0,0.01) 50%,
		rgba(255,255,255,0.1) 50%,
		rgba(255,255,255,0.3) 100%
		);
	background-image : -o-linear-gradient(
		90deg,
		rgba(0,0,0,0.01) 0%,
		rgba(0,0,0,0.01) 50%,
		rgba(255,255,255,0.1) 50%,
		rgba(255,255,255,0.3) 100%
		);
	background-image : -webkit-linear-gradient(
		90deg,
		rgba(0,0,0,0.01) 0%,
		rgba(0,0,0,0.01) 50%,
		rgba(255,255,255,0.1) 50%,
		rgba(255,255,255,0.3) 100%
		);
}
.roundbutton.rbtn_black::before, .roundbutton_group .roundbutton.rbtn_black::before {
	border-color: #1a1a1a;
}
.roundbutton.rbtn_black:hover, .roundbutton_group .roundbutton.rbtn_black:hover {
	background-color: #252525;
}
span.roundbutton.rbtn_black, .roundbutton_group span.roundbutton.rbtn_black,
span.roundbutton.rbtn_black:hover, .roundbutton_group span.roundbutton.rbtn_black:hover {
	background-color: #666;
}

.notes a.roundbutton {
	top: -2px;
}
// @milos -> @fp : This style has no specific target. Instead, I set ".notes a.roundbutton { top: 0; } " below.
//@-moz-document url-prefix() {
//	.notes a.roundbutton { top: 0; }
//}
.notes a.roundbutton { top: 0; }
// ---------------- //

// Bootstrap button colors:
.btn {
	background-image: none;
	border: 1px solid transparent;
	border-radius: 4px;
	box-sizing: border-box;
	padding: 1px 7px 2px;
	&:hover,
	&:focus {
		color: #333;
		text-decoration: none;
	}
	&:link,
	&:active {
		color: #333;
	}
}
.btn-default {
	color: #333;
	background-color: #fff;
	border-color: #ccc;
	&:hover,
	&:focus {
		color: #333;
		background-color: #e6e6e6;
		border-color: #adadad;
	}
	&:link,
	&:active {
		color: #333;
	}
}
.btn-primary {
	color: #fff;
	background-color: #337ab7;
	border-color: #2e6da4;
	&:hover,
	&:focus {
		color: #fff;
		background-color: #286090;
		border-color: #204d74;
	}
	&:link,
	&:active {
		color: #fff;
	}
}
.btn-success {
	color: #fff;
	background-color: #5cb85c;
	border-color: #4cae4c;
	&:hover,
	&:focus {
		color: #fff;
		background-color: #449d44;
		border-color: #398439;
	}
	&:link,
	&:active {
		color: #fff;
	}
}
.btn-info {
	color: #fff;
	background-color: #5bc0de;
	border-color: #46b8da;
	&:hover,
	&:focus {
		color: #fff;
		background-color: #31b0d5;
		border-color: #269abc;
	}
	&:link,
	&:active {
		color: #fff;
	}
}
.btn-warning {
	color: #fff;
	background-color: #f0ad4e;
	border-color: #eea236;
	&:hover,
	&:focus {
		color: #fff;
		background-color: #ec971f;
		border-color: #d58512;
	}
	&:link,
	&:active {
		color: #fff;
	}
}
.btn-danger {
	color: #fff;
	background-color: #d9534f;
	border-color: #d43f3a;
	&:hover,
	&:focus {
		color: #fff;
		background-color: #c9302c;
		border-color: #ac2925;
	}
	&:link,
	&:active {
		color: #fff;
	}
}

// ---------------- //

// Toolbars with buttons before the edit post/comment forms:
.edit_toolbars {
	margin-top: 1ex;
	width: 100%;
	text-align: center;
}
div.edit_toolbar {
	background-color: #f1f6f8;
	border: 1px solid #becdd6;
	padding: 1px 2px;
	margin: 1px auto;
	width: 98%;
}
div.edit_toolbar input {
	background: #fefefe url(../img/whitebar24.png) repeat-x center;
	border: 1px solid #becdd6;
	margin: 0 1px;
	padding: 0 1px;
}
div.edit_toolbar input:hover {
	border-color: #00f;
}
div.comment_toolbars, div.message_toolbars {
	text-align: center;
}
div.comment_toolbars div.edit_toolbar, div.message_toolbars div.edit_toolbar {
	margin: 0;
	width: 100%;
	border-bottom: none;
}

// ---------------- //

// Meta categories that appears on categories widget:
.widget_core_coll_category_list {
	.evo_cat_meta {
		> label, > a {
			font-weight: bold;
		}
		ul {
			font-weight: normal;
		}
		input[disabled="disabled"] {
			visibility: hidden;
		}
	}
}

// Bootstrap 4 style utilities:
.w-100 {
    width: 100% !important;
}
.w-75 {
    width: 75% !important;
}
.w-50 {
    width: 50% !important;
}
.w-25 {
    width: 25% !important;
}
.w-auto {
    width: auto !important;
}
