/*
 * Custom/additional styles for the TYPO3 backend
 *
 * Core Colors:
 *	alert-info: 	#6daae0
 *	alert-success: 	#79a548
 *	alert-warning: 	#e8a33d
 *	alert-danger:	#c83c3c
 *	table-bg:		#fafafa
 */

/**
 * TODO: Check and upgrade to Bootstrap version 5
 */

/*
 * Mouse pointers
 */
.cursor-help {
  cursor: help;
}

.h-100 { height: 100% !important;}
@media (min-width: 768px) {
  .h-sm-100 { height: 100% !important;}
}

/*
 * BS4 width classes
 */
.w-25 { width: 25% !important; }
.w-50 { width: 50% !important; }
.w-75 { width: 75% !important; }
.w-100 { width: 100% !important; }
.w-auto { width: auto !important; }

/*
 * BS4 margin classes
 */
.mx-auto { margin-left: auto !important; margin-right: auto !important;}
.my-auto { margin-top: auto !important; margin-bottom: auto !important;}

.mt-0, .my-0, .m-0 { margin-top: 0 !important; }
.mt-1, .my-1, .m-1 { margin-top: 5px !important; }
.mt-2, .my-2, .m-2 { margin-top: 10px !important; }
.mt-3, .my-3, .m-3 { margin-top: 18px !important; }

.me-0, .mx-0, .m-0 { margin-right: 0 !important; }
.me-1, .mx-1, .m-1 { margin-right: 5px !important; }
.me-2, .mx-2, .m-2 { margin-right: 10px !important; }
.me-3, .mx-3, .m-3 { margin-right: 18px !important; }

.mb-0, .my-0, .m-0 { margin-bottom: 0 !important; }
.mb-1, .my-1, .m-1 { margin-bottom: 5px !important; }
.mb-2, .my-2, .m-2 { margin-bottom: 10px !important; }
.mb-3, .my-3, .m-3 { margin-bottom: 18px !important; }

.ms-0, .mx-0, .m-0 { margin-left: 0 !important; }
.ms-1, .mx-1, .m-1 { margin-left: 5px !important; }
.ms-2, .mx-2, .m-2 { margin-left: 10px !important; }
.ms-3, .mx-3, .m-3 { margin-left: 18px !important; }

/*
 * BS4 padding classes
 */
.pt-0, .py-0, .p-0 { padding-top: 0 !important; }
.pt-1, .py-1, .p-1 { padding-top: 5px !important; }
.pt-2, .py-2, .p-2 { padding-top: 10px !important; }
.pt-3, .py-3, .p-3 { padding-top: 18px !important; }

.pe-0, .px-0, .p-0 { padding-right: 0 !important; }
.pe-1, .px-1, .p-1 { padding-right: 5px !important; }
.pe-2, .px-2, .p-2 { padding-right: 10px !important; }
.pe-3, .px-3, .p-3 { padding-right: 18px !important; }

.pb-0, .py-0, .p-0 { padding-bottom: 0 !important; }
.pb-1, .py-1, .p-1 { padding-bottom: 5px !important; }
.pb-2, .py-2, .p-2 { padding-bottom: 10px !important; }
.pb-3, .py-3, .p-3 { padding-bottom: 18px !important; }

.ps-0, .px-0, .p-0 { padding-left: 0 !important; }
.ps-1, .px-1, .p-1 { padding-left: 5px !important; }
.ps-2, .px-2, .p-2 { padding-left: 10px !important; }
.ps-3, .px-3, .p-3 { padding-left: 18px !important; }

/*
 * BS4 vertical alignment
 */
.align-top, table.align-top td { vertical-align: top!important; }
.align-middle, table.align-middle td { vertical-align: middle!important; }
.align-bottom, table.align-bottom td { vertical-align: bottom!important; }

/*
 * BS5 Font weight and italics
 */
.fw-bold { font-weight: bolder!important;}
.fw-bolder { font-weight: bolder!important; }
.fw-normal { font-weight: 400!important; }
.font-italic { font-style: italic!important; }
.text-decoration-underline { text-decoration: underline!important; }
.text-strike {text-decoration: line-through!important; }

/*
 * Text
 */
.text-dark, .text-black {
  color: black !important;
}

/*
 * Labels
 */
.label-default {
  color: black;
}

/*
 * Image Manipulation
 */
.cropper .cropper-cover-area {
  background: rgba(0,0,0,.25);
}

/*
 * CE General
 */
.t3-page-ce-body-inner .untranslated {
  font-style: italic;
  color: #737373;
}
.t3-page-ce-body-inner .spacer {
  display: block;
  margin: 0 0 8px 0;
  padding: 0;
}
.t3-page-ce-body-inner hr.spacer {
  margin: 5px 0;
  border-bottom: 1px solid #cdcdcd;
}
.t3-page-ce-body-inner .record_content--crop {
  max-height: 90px;
  overflow-y: scroll;
}
.t3-page-ce-body-inner .record_content--crop-xl {
  max-height: 145px;
  overflow-y: scroll;
}
.t3-page-ce .t3-page-ce-footer .t3-page-ce-footer {
  padding-left: 0;
  padding-right: 0;
}
.t3-page-ce .t3-page-ce-footer .t3-page-ce-info {
  overflow-x: scroll;
}
.t3-page-ce .t3-page-ce-footer .t3-page-ce-description {
  font-family: Verdana,Arial,Helvetica,sans-serif;
  margin-top: 5px;
}
.t3-page-ce .record_header .font-monospace {
  font-size: 11px;
}

.record_content .media_preview {
  position: relative;
  border: 1px solid #cdcdcd;
  width: 64px;
  height: 64px;
  overflow: hidden;
  display: block;
  vertical-align: middle;
  text-align: center;
  background: url(/typo3conf/ext/sitecore/Resources/Public/Images/MediaBackground.svg?t=1591874178) repeat;
}
.record_content .media_thumbnail {
  margin: 1px;
  width: 60px;
  height: 60px;
  line-height: 58px;
}
.record_content .media_thumbnail > img {
  vertical-align: middle;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
.record_content .media_thumbnail .icon-size-large {
  margin-top: 6px;
}
.record_content .media_preview.no-alternative .media_overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(255, 0, 0, .5) url(/typo3conf/ext/sitecore/Resources/Public/Images/Overlays/NoAltText.svg) no-repeat;
  background-size: cover;
}

.record_region-header {
  color: #999;
  font-size: 90%;
  padding: 0 0 5px 0;
  margin: 5px 0 5px 0;
  border-bottom: 1px solid #cdcdcd;
}

/*
 * CE Html
 */
pre[class*=language-] {
  font-size: 1rem;
  border-width: 0!important;
  border-left-width: 5px!important;
  border-radius: 0;
  margin: 0;
  position: relative;
  overflow: auto;
  direction: ltr!important;
  text-align: left!important;
  tab-size: 4;
  hyphens: none;
}
pre[class*=language-].line-numbers {
  padding-left: 3em;
}
pre[class*=language-] .line-number {
  color: #999;
  display: block;
  padding-right: .8em;
  text-align: right;
  position: absolute;
  pointer-events: none;
  font-size: 100%;
  left: 0;
  width: 3em;
  letter-spacing: -1px;
  user-select: none;
}
pre[class*=language-] .code-line {
  display: block;
  min-height: 1.5rem;
  overflow-wrap: break-word;
  white-space: pre-wrap;
  word-break: normal;
}
pre[class*=language-].line-numbers .code-line {
  border-left: 1px solid #ccc;
  padding-left: .8em;
}

/*
 * Additional progress bar colors
 */
.progress-bar { box-shadow: none; }
.progress-bar-danger-light { background-color: #e49e9e; }
.progress-bar-info-light { background-color: #b6d5f0; }
.progress-bar-success-light { background-color: #bcd2a4; }
.progress-bar-warning-light { background-color: #f4d19e; }

/*
 * SERP Preview
 */
.serp-snippet {
  max-width: 100%;
  overflow-x: scroll;
}
.serp-snippet .snippet-box {
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 2px;
  width: 662px;
  padding: 30px;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.15);
  background: #fff;
  font-family: arial,sans-serif;
  font-weight: 400;
}
.serp-snippet .snippet-url {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
  line-height: 1.58;
  margin: 1px 0;
  color: #202124;
}
.serp-snippet .snippet-breadcrumb {
  color: #5f6368;
}
.serp-snippet .snippet-cache {
  color: #70757a;
  padding-left: 7px;
}
.serp-snippet .snippet-title {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 20px;
  line-height: 1.3;
  margin: 4px 0 3px 0;
  color: #1a0dab;
}
.serp-snippet .snippet-title:hover {
  text-decoration: underline;
}
.serp-snippet .snippet-content {
  width: 100%;
  font-size: 14px;
  line-height: 1.58;
}
.serp-snippet .snippet-content-spacer,
.serp-snippet .snippet-author,
.serp-snippet .snippet-date {
  color: #70757a;
}
.serp-status {
  display: inline-block;
  margin-top: 18px;
}
@media (min-width: 992px) {
  .serp-snippet {
    display: inline-block;
    margin-right: 36px;
  }
  .serp-status {
    vertical-align: top;
  }
}

/*
 * Icon Browser
 */
.iconbrowser-body {
  padding: 15px;
}
.iconbrowser .svg-inline--fa .fa-primary {
  fill: black;
  opacity: 1;
}
.iconbrowser .svg-inline--fa .fa-secondary {
  fill: black;
  opacity: .4;
}
.iconbrowser-preview {
  width: 100%;
  height: 200px;
  border: 1px solid #ddd;
  padding: 10px;
  background: url('../../Images/MediaBackground.svg');
  background-size: 10%;
  overflow: hidden;
  text-align: center;
}
.iconbrowser-preview svg {
  padding: 1px;
  border: 1px dotted #ccc;
}
.iconbrowser-preview .svg-inline--fa {
  height: 160px;
  margin: 10px 0;
}
.iconbrowser-icon {
  padding: 0;
  text-align: center;
  box-shadow: 0 2px 0 rgba(0,0,0,.1);
  border: 1px solid #ccc;
  border-radius: 2px;
  margin-bottom: 18px;
}
.iconbrowser-icon:focus, .iconbrowser-icon:hover {
  background-color: #eee;
  border-color: #999;
}
.iconbrowser-icon a.iconbrowser-selector {
  display: block;
  padding: 10px 5px 5px;
}
.iconbrowser-icon .iconbrowser-iconname {
  padding: 0 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.iconbrowser-icon .svg-inline--fa {
  height: 48px;
}
.iconbrowser-styleswitch {
  padding: 5px;
}
.iconbrowser-styleswitch .btn {
  line-height: 1;
}
.iconbrowser-styleswitch .svg-inline--fa {
  height: 16px !important;
}

/*
 * Font Awesome
 */
.svg-inline--fa {
  display: inline-block;
  font-size: inherit;
  height: 1em;
  vertical-align: -.125em;
}
.svg-inline--fa .fa-primary,
.svg-inline--fa.fa-swap-opacity .fa-secondary {
  opacity: 1;
}
.svg-inline--fa .fa-secondary,
.svg-inline--fa.fa-swap-opacity .fa-primary {
  opacity: .4;
}

.callout .callout-icon .fa-stack-1x { color: white; }
.callout-danger .callout-icon .fa-stack-2x { color: #c83c3c; }
.callout-info .callout-icon .fa-stack-2x { color: #6daae0; }
.callout-notice .callout-icon .fa-stack-2x { color: #a0a0a0; }
.callout-success .callout-icon .fa-stack-2x { color: #79a548; }
.callout-warning .callout-icon .fa-stack-2x { color: #e8a33d; }

/*
 * Form Framework (ECT:form)
 */
.t3-form-form-element-custom .t3js-icon {
  height: 100%;
}

/*
 * Dashboard Widgets
 */
.widget-identifier-ebwelcome .widget-content-main {
  background-image: url("/typo3conf/ext/sitecore/Resources/Public/Images/Backend/widget_welcome_bg.svg");
  background-position: bottom right;
  background-repeat: no-repeat;
}