/*-----------------------------------------------------------------------------------------------*/
/* Allgemeine Styles                                                                             */
/*-----------------------------------------------------------------------------------------------*/

/* body { font-family: 'Open Sans', sans-serif; margin: 0; padding: 0; height: 100%; } */
body { font-family: 'Libre Franklin', sans-serif; margin: 0; padding: 0; height: 100%; }
html { height: 100%; font-size: 13px !important; }
input[type='submit']:focus, input[type='button']:focus, input[type='text']:focus, textarea:focus, input[type='text']:active, input[type='password']:focus, input[type='password']:active textarea:active, button:focus, button:active { outline: none; }
.material span { color: #000}
.material .btn {color: #fff}

/*-----------------------------------------------------------------------------------------------*/
/* Material Design Styles                                                                        */
/*-----------------------------------------------------------------------------------------------*/

.material a { color: #3498db; font-family: 'Libre Franklin', sans-serif; font-weight: 200; }
.material select { font-family: inherit;  padding: 4px 0;  color: #424242; border: none; border-bottom: 1px solid rgba(0,0,0, 0.12); }
.material .card { background: #fff; position: relative; border-radius: 3px; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2); }
.material .card-title { border-bottom: 1px solid #e0e0e0; margin: 0; padding: 20px; }
.material .card-title span { color: #000000; }
.material .card-body { padding: 40px; background: #F5F5F5; }
.material .card-body .instruction { display: block; }
.material .card-body span { color: #424242; }
.material .card-title > img { right: 3px; position: absolute; top: 4px; }
.material .menu-container { border-bottom: 1px solid #e5e5e5; }
.material .shadow {  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2); }
.material .shadow-side { box-shadow: 4px 2px 5px 0px rgba(0, 0, 0, 0.14); }
.material #verwaltungDetailsSprachen input { max-width: 250px !important; margin: 5px; }

/* Abstaende bei Formularfeldern kleiner */
.material .input-field{margin-top:5px!important;margin-bottom:5px!important}
.formFieldRequired{border-bottom:2px solid #ffd900!important}
.formFieldError{border-bottom:2px solid red!important}
.material input[type='file'],
.material input[type='text'],
.material input[type='password'] {background-color: rgba(227,242,253, 0.9) !important}
.select-wrapper .caret {z-index: 1;pointer-events: none;}

/* Formatierung Breadcrumb */
.material nav .breadcrumb{font-size:1.1em;background:none;box-shadow:none;color:#000;position:relative;top:15px}
.breadcrumb:before{margin:-3px 10px 0 8px !important}
.material nav .breadcrumb:before, .material nav .breadcrumb:last-child{color:#000}

/* Linkes Menu mit Menupunkten */
.material nav { color: inherit; background-color: inherit; width: auto !important; height: auto !important; line-height: normal !important; }
.material .menuLeft { list-style: none; margin: 0; padding: 0; }
.material .menuLeft span { display: inline-block; }
.material .menuLeft > li { padding: 1px; border-bottom: 1px solid #e0e0e0; line-height: 36px; transition: background-color .1s ease; }
.material .menuLeft li:hover { background-color: #cbcbcb; }
.material .menuLeft > li > a { padding: 15px; text-decoration: none; color: #424242; }
.material .menuLeft > div > div > li > a { color: #424242; text-decoration: none; }
.material .menuLeft > div > div li {border-bottom: 1px solid #e0e0e0;line-height: 35px;}
.material .menuLeft > div > div > li { padding: 1px 1px 1px 30px;}
.material .menuLeft > div > div > div > li { padding: 1px 1px 1px 55px;}
.material .menuLeft > div > div > div > div > li { padding: 1px 1px 1px 80px;}
.material .menuLeft > div > div > div > div > div > li { padding: 1px 1px 1px 105px; }
.material .menuLeft > div > div > div div li > a{ color: #424242; text-decoration: none; }
.material .menuLeft i, .material .menuLeft span { line-height: 35px !important; vertical-align: middle; margin-left: 14px; }
.material .menuLeft .menuLeftInactive { color: red; opacity: 0.5;  }
.material .menuLeft a { color: #000; }
.material .menuLeft .menuLeftSelected { font-weight: bold !important; }
.material .menuLeft .menuLeftNew { color: #00C334; }
.material .menu-nav-helper{list-style:none;margin:0;padding-right:10px;}
.material .menu-nav-helper > li { display: inline-block; padding: 5px;  }
.material .menu-nav-helper > li > a { padding: 5px; text-decoration: none; color: #424242; }
.material .menu-main { list-style: none; margin: 0; padding: 0; }
.material .menu-main > li:first-of-type { border-left: none}
.material .menu-main > li { display: inline-block; padding: 5px;  padding: 16px; border: none; }
.material .menu-main > li > a { padding: 20px; text-decoration: none; color: #000000; margin: -15px; }
.material .menu-main > li { transition: background-color 0.1s ease; }
.material .menu-main > li:hover { background-color: #EEEEEE; cursor: pointer; }

/* Menü links Tooltip */
.material .menuLeft span{overflow:hidden;text-overflow:ellipsis;max-width:20ch;white-space:nowrap}
.material .menuLeft span[tooltipEbene2]{max-width:18.5ch}
.material .menuLeft span[tooltipEbene3]{max-width:16ch}
.material .menuLeft span[tooltipEbene4]{max-width:13ch}
.material .menuLeft span[tooltipEbene5]{max-width:10ch}
.material .menuLeft span[tooltip]::after{content:attr(tooltip);background-color:rgba(40,40,40,0.9);color:#fff;text-align:center;border-radius:2px;padding:0 10px;position:absolute;z-index:100;font-size:12px;left:60px;margin-top:30px;line-height:3;padding-top:calc(calc(5px + 1px) + 2px);clip-path:polygon(0 calc(5px + 1px),calc(calc(25px + 2px) - calc(5px + 1px)) calc(5px + 1px),calc(25px + 2px) 0,calc(calc(25px + 2px) + calc(5px + 1px)) calc(5px + 1px),100% calc(5px + 1px),100% 100%,0 100%);pointer-events:none;white-space:nowrap;font-weight:400;opacity: 0;transition: opacity 0.3s;}
.material .menuLeft span[tooltipEbene1]::after{left:60px}
.material .menuLeft span[tooltipEbene2]::after{left:82px}
.material .menuLeft span[tooltipEbene3]::after{left:104px}
.material .menuLeft span[tooltipEbene4]::after{left:126px}
.material .menuLeft span[tooltipEbene5]::after{left:148px}
.material .menuLeft li:hover span[tooltip]::after{opacity: 1}

/* Einzug Hauptmenü */
ul.menu-main.left.hide-on-med-and-down { margin: 0 -14px 0 14px; }
.cferror { color: #e74c3c !important; }

/* Fuer alle SVG Icons */
.material svg { width: 24px; height: 24px; }

.material .mediumIcon a { color: #424242; }
.material .big-icon a { color: #424242; text-decoration: none; }
.material .big-icon i { vertical-align: middle; }
.material .big-icon span { margin-left: 14px; display: inline-block; }
#left-files-container > ul > div > div > li > a > span { margin-left: 14px; }
.material .title-container { background: #e74c3c; padding: 20px; position: relative; z-index: -2; margin: -41px -41px 0; }
.material .title-container > h1 { color: #fff; }
.material h1 { padding: 0;font-size: 2em; }

.material p {  font-weight: 200; }
.material .title-left { margin-left: 20px; }
.material .btndesign { display: inline-block; border: none; padding: 10px; color: #000000; border-radius: 3px; background: #fff; cursor: pointer; text-transform: uppercase; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2); text-decoration: none; }
.material .padding { padding: 20px; padding-top: 0px; }
.material input[value="Neu"] { margin-left: 20px; }

.material .eintragAktuellesAbgelaufenes { display: inline-block; }
.material .titleWithBackground { padding-left: 20px; }
.material .titleWithBackground h1 { margin: 0 20px 0 20px; }
.material .titleWithBackground a { color: #fff; }

.material .titleWithBackgroundLess { padding-left: 13px; }
form#formUserProfile {margin-left: 10px; max-width: 1000px;}

/* Tab-Navigation */
.material .tabs .tab a { color: #000000; }
.material .tabs{top:0;left:0;border:0!important;border-radius:0!important;height:auto;white-space:normal}
.material .tabs .active { background-color: #2196F3 !important; color: #fff !important; }
.material .tabs .tab a:hover { background-color: #2196F3 !important; color: #fff !important; }
.material .specialTabs { position: static; padding-left: 20px; }
.checkboxWorkflow { color: #ff8000 !important; }

/*-----------------------------------------------------------------------------------------------*/
/* Blaettern Navigation                                                                          */
/*-----------------------------------------------------------------------------------------------*/

.blaettern { line-height: 20px; clear: both; display: flex; justify-content: space-between; vertical-align: top; }
.blaettern_links { color: #333; float: left; }
.blaettern_mitte { float: left; text-align: center; }
.blaettern_mitte a { width: 20px; height: 20px; display: inline-block; text-align: center; line-height: 20px; }
.blaettern_rechts { float: right; text-align: right;}

/*-----------------------------------------------------------------------------------------------*/
/* Tablespezifische Styles                                                                      */
/*-----------------------------------------------------------------------------------------------*/

/* .material table tr:first-of-type { background: #e74c3c; color: #fff; } */
.material table:not(.cke_dialog, .cke_dialog_footer_buttons) { width: 100%; border-spacing: 0px; }
.material table tr:first-of-type > td > span { color: #000000; }
.material table .material-icons { color: #424242; }
.material .colorless tr td { background: #efefef !important; color: #000 !important; padding: 0 !important; }
.material .colorless tr td span,
.material .colorless tr td span b { color: #000 !important; }
.material form table td { padding: 5px !important; }
.material table tr:hover { background-color: #E3F2FD !important; }

/* Tabellenzeilen bei Listenansichten der Eintraege */
.tableRowEntryWorkflow {background-color: #ff8000;}
.tableRowEntryInactive {color: #e74c3c;}
.tableRowEntryInactive a {color: #e74c3c;}
.tableRowEntryToday {color: #008800;}
.tableRowEntryToday a {color: #008800;}

/*-----------------------------------------------------------------------------------------------*/
/* Seitenspezifische Styles                                                                      */
/*-----------------------------------------------------------------------------------------------*/

.disableBreak { display: inline-block; }

#verwaltungDetailsSprachen .row { margin: 0px;  min-height: 55px !important; }
#verwaltungDetailsSprachen .row:nth-child(even) { background-color: #E0E0E0; }
#verwaltungDetailsSprachen .row { line-height: 55px; }
.userverwaltungWrap { display: table; }
.userverwaltungLeft, .userverwaltungRight { display: table-cell; vertical-align: top; }
.verwaltungLinks { width: 250px; margin: 0px 10px 0px 0px; vertical-align: top; }
.userverwaltungRight { width: 100%; }

.inlineWhite { display: inline-block; color: #fff !important; }

.material .tabs{top:0;left:0;border:0!important;border-radius:0!important;height:auto;white-space:normal}
.indicator{display:none}
.formOptionDiv{height:auto;clear:both;display:inline-block;width:100%;padding:10px}
.formOptionDiv:nth-child(odd){background-color:#E5E5E5}
.mandantEinstellungen{margin:20px}
.backButton{margin:20px}
#userverwaltungTable a{color:#fff!important}
.backButtonLess{margin:13px}
#login-container{width:410px;margin:200px auto 0}
#header-container{z-index:2;position:fixed;top:0;width:100%!important;border-bottom:1px solid lightgray}
.sidenav-overlay{z-index:1!important}

/* Header Grid */
.top-menu-container{display:grid;grid-template-columns:minmax(350px,auto) minmax(auto,300px) minmax(350px,auto);grid-template-rows:70px 60px;grid-column-gap:15px;grid-row-gap:15px;grid-template-areas:"logo search loggedinuser" "hauptnav hauptnav hilfsnav"}
.top-logo-container{grid-area:logo;padding:5px}
.top-logo-container img{width:120px}
.top-search-container{grid-area:search;padding:5px;position:absolute;left:50%;transform:translate(-50%,0);min-width:300px;max-width:300px}
.top-search-container>form{min-width:150px}
.loggedinuser-container{grid-area:loggedinuser;text-align:right;padding:5px 14px 5px 5px;display:inline-block}
.loggedinuser-container-logout-icon{padding-left:7px;padding-right:10px}
.top-nav-main-container{grid-area:hauptnav}
.top-nav-helper-container{grid-area:hilfsnav;align-self:center}

/* Suchfeld */
#suchresultateContainer { display: none; color: black; margin-top: -15px; width: 600px; background: #fff; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);  position: relative; z-index: 1; }
#suchresultate {  width: 100%; padding: 20px; display:inline-block; }
#suchresultate > li { float: none; padding-bottom: 15px; }
.closeSearchBox { padding: 15px 15px 0; }
.closeSearchBox > span { float: right; cursor: pointer; }
#suchresultate > li > div > h5 { margin: 0 !important; }
.suchKategorie { display: inline-block; width: 150px; vertical-align: top; }
.suchKategorie > span { font-size: 1.2em; font-weight: bold; }
.suchresultatListe { display: inline-block; width: 400px; max-height: 300px; overflow-y: auto;}
.suchresultatListe > li { border-top: 1px solid rgba(0,0,0,0.12); width: 100%; padding: 2px; }
.suchresultatListe > li > div > a { padding: 0; }
#keineResultate { display: none; }

/* Hauptbereich */
#main-menu-container{background:#FFF;opacity:.97;width:100%}
#main-menu{display:inline-block;vertical-align:top}
#main-menu div{margin-left:21px}
#sub-main-menu .material-icons,#sub-main-menu-right .material-icons{color:#424242;vertical-align:middle;line-height:35px}
#top-menu{float:right}
#sub-main-menu-container{background:#fff;display:flex;justify-content:space-between;padding:0 14px}
#sub-main-menu,#sub-main-menu-right{display:flex}
#sub-main-menu-right{float:right;vertical-align:middle}
.padding20{padding:20px}
#left-container-top{background:#fff;padding:14px;border-bottom:1px solid #e5e5e5}
#left-container-top select{width:100%}
#left-files-container{background:#fff;height:auto}
#left-files-container > ul{height:calc(100% - 283px);overflow-y:auto}
#main-work-view{display:table-cell!important;position:relative;width:100%;box-sizing:border-box;vertical-align:top;height:auto;overflow-x:hidden;padding:20px}
#main-work-view h1{font-weight:700;font-size:16px;margin:0 15px 15px 0}
#workflow-container{clear:both}
#workflow-container-form{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr;grid-column-gap:15px;grid-row-gap:0}
#grid4-container-form{display:grid;grid-template-columns:repeat(4,1fr);grid-column-gap:15px;grid-row-gap:0}
#grid3-container-form{display:grid;grid-template-columns:repeat(3,1fr);grid-column-gap:15px;grid-row-gap:0}
#grid2-container-form{display:grid;grid-template-columns:repeat(2,1fr);grid-column-gap:15px;grid-row-gap:0}

#menu-left-container { display: table-cell; min-width: 300px; height: 100vh; background-color: #fff; overflow: hidden; }

#file-manager { padding: 15px; position: relative; z-index: 1; background: #fff; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2); }
#file-manager i { color: #424242; }
#file-manager a { color: #424242; }
#file-manager-file-container { padding: 15px; padding-top: 0px; position: relative; z-index: 2; background: #fff; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2); }
#file-manager-file-container i { color: #e67e22; }
#file-manager-file-container a { color: #e67e22; }
#file-manager label span {top: -11px}

#file-manager-file-container .file { max-width: 500px; }
#file-manager-file-container .file .data-name { min-width: 300px; display: inline-block; }

.data-data, .file { display: inline-block; vertical-align: middle; }
.data-data { margin-left: 20px; }

#spezial-nav { list-style: none; }
#spezial-nav > li  { display: inline-block; border: none; padding: 10px; color: #000000; border-radius: 3px; background: #fff; cursor: pointer; text-transform: uppercase; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2); }
#spezial-nav > li > a { text-decoration: none; }

#manage-categorys { margin-top: 40px; }
#manage-categorys > span { color: #fff; }

.mainmenu, .submenu1,.submenu2 { background: none !important; }

.material .category { padding: 10px; background: #e74c3c; }

.material .yellowSvg { fill: #ebd07f; }
.material .blueSvg { fill: #3F51B5;}
.material .redSvg { fill: #F44336; }
.material .greenSvg { fill: #4CAF50; }
.material .svgWhite { fill: #fff; }
.material .specialSvg { position: relative;  bottom: -7px; }

#add-cat { margin-top: 10px; display: block; }
.labelSpacing {margin-right: 15px;}
.labelSpacing input[type="checkbox"]+span:not(.lever) {padding-left:25px}

.spezfunktion-eintrag:first-of-type { border-top: 1px solid  rgba(0,0,0, 0.12); }
.spezfunktion-eintrag::nth-of-type(1) { border-top: 1px solid  rgba(0,0,0, 0.12); }
.spezfunktion-eintrag { background: transparent; border-bottom: 1px solid  rgba(0,0,0, 0.12); height: 50px; }
.spezfunktion-eintrag > span { color: #000000; height: 100%; display: table; }
.spezfunktion-eintrag > span > a { color: #000000; padding: 0 5px; display:table-cell; vertical-align:middle; height: 100%; }

#userverwaltung table tr:first-of-type { background: transparent !important; }
#userverwaltung { overflow: auto; height: calc(100% - 200px); }

#statistik { color: #000000 !important; }

.addBtn {
    background: #26a69a;
    display: inline-block;
    padding: 5px;
    color: #fff;
    cursor: pointer;
    border-radius: 3px;
    margin: 10px 0;
    user-select: none;
}

#cmsContainer { display: table-cell; width: 100%; height: 100%; }
#cmsWrap { display: table; width: 100%; height: 100%;}
#cmsWrap form table td { padding: 7px !important; }
#cmsWrap form table tr { border: 0; }
#main-work-view input { width: unset; }
[type="checkbox"]+span{height:auto !important}
.menu-benutzerverwaltung .col { padding: 0 19px !important; }
#main-work-view input.select-dropdown.dropdown-trigger { width: 100%; }
#main-work-view img {max-width:100%}
.divider { margin-bottom: 20px; }
.benutzerVerwaltung-Legende img { position: relative; top: 6px; }
/* Fix für Select-Scrolling */
#main-work-view ul.dropdown-content.select-dropdown { overflow-y: auto !important; backface-visibility: hidden; max-height: 350px; }
#main-work-view table [type="checkbox"]+span {
    height: 25px !important;
    margin-top: 4px;
}
input[type="text"] {padding:0 5px !important}

.imagepreviewImage {max-width:100%;}

#main-work-view .select-wrapper { min-width: 250px; }
#main-work-view .selectPageType { max-width: 350px; }
#workflow-window .row .col .input-field.seitenart { width: fit-content; }
input#FieldSeitentitel, input#FieldSeitentitel2 { width: 100%; }
.tabs .tab a { font-size: 13px !important; padding: 0 21px !important; }

/* Cropper-Spezifische styles */
.dropdown.dropup.docs-options [type="radio"]:not(:checked)+span:before, .dropdown.dropup.docs-options [type="radio"]:not(:checked)+span:after { border: 2px solid #fff; }
.dropdown.dropup.docs-options [type="radio"]:checked+span:after, .dropdown.dropup.docs-options [type="radio"].with-gap:checked+span:before, .dropdown.dropup.docs-options [type="radio"].with-gap:checked+span:after { border: 2px solid #fff; }
.dropdown.dropup.docs-options [type="radio"]:checked+span:after, .dropdown.dropup.docs-options  [type="radio"].with-gap:checked+span:after { background-color: #fff; }
.dropdown.dropup.docs-options .docs-tooltip { color: #fff; }

/* Landingpage - Admin */
#tableLP th:nth-child(1){width:20%}
#tableLP th:nth-child(2){width:15%}
#tableLP th:nth-child(3){width:20%}
#tableLP th:nth-child(4){width:25%}
#tableLP th:nth-child(5){width:10%}
#tableLP th:nth-child(6){width:10%}
#tableLP td:nth-child(6) img {cursor: pointer;}
#tableLP td:nth-child(6) img.optionLP {filter: invert(43%) sepia(96%) saturate(1237%) hue-rotate(88deg) brightness(88%) contrast(119%);}
.addLP.btn{margin-top:10px}
#modalBackgroundLP { position: fixed; top: 0; left: 0; background-color: rgba(65, 65, 65, 0.6); width: 100%; height: 100%; visibility: hidden; opacity: 0; z-index: 500;}
div#modalLP{width:500px;min-height:150px;background:#fff;border-radius:4px;top:50%;left:50%;position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column}
div#modalLP > div{padding:0 25px}
div#modalLP div#modalLP-header{padding-top:25px}
div#modalLP h5{margin:0;font-size:1.5rem}
div#modalLP-body{flex:1;}
div#modalLP-body form{display:flex;flex-direction: column;padding:10px 0}
div#modalLP-body form > *{position:relative; top:0; font-size: 1.2rem;}
div#modalLP div#modalLP-footer{margin:auto 0 0;display:flex;justify-content:flex-end;padding-bottom:25px}
div#modalLP div#modalLP-footer *{margin-left:10px}
div#modalLP input[type="color"] {width:150px;margin:8px 0}

/* Style fuer Sternchen bei Pflichtfeldern */
.RequiredFields  { color: #FF0000; }

/*-----------------------------------------------------------------------------------------------*/
/* Meldungen                                                                                     */
/*-----------------------------------------------------------------------------------------------*/

.deleteWarning { margin: 15px; padding: 10px; border: 2px solid red; color: darkRed; }
.deleteWarning ul {	list-style: none; margin: 20px;	padding: 0;	height: 15px; }
.deleteWarning ul li { float: left;	margin: 0 20px 0 0;	height: 15px; }
.deleteWarning ul li yes { background-color: green; }
.deleteWarning ul li a { display: block; width: 120px; height: 20px; line-height: 20px;	text-align: center;	background: darkRed; color: #fff; text-decoration: none; }
.deleteWarning ul li a:hover { text-decoration: underline; }
.pageActionMessage { margin: 15px; padding: 10px; border: 2px solid darkGreen; color: darkGreen; }
div.errorMessage { margin: 15px; padding: 10px;	border: 2px solid red; color: darkRed; }
span.errorMessage {color: #FF0000}
.successMessage { color: darkGreen; }

[type="checkbox"]+span{vertical-align:middle!important}
.btn{min-width:70px}

/* Gruene Schalter mit weisser Schrift */
.waves-effect input{color:#fff;cursor: pointer;}

/* Farbe für Abbrechen-Button */
.materialize-red.lighten-2:hover{background-color:#f5a5a8!important}

/* Ausrichtung Icons "neue Seite einfügen", "Kategorienbild ändern", "Fusszeile", etc. */
nav i, nav [class^="mdi-"], nav [class*="mdi-"], nav i.material-icons { height: 35px !important; }
#sub-main-menu > .mediumIconBox { margin-right: 8px; }
#sub-main-menu-right > .mediumIconBox { margin-left: 8px; }

/* Dateimanager Texte für "Neuer Ordner", "Hochladen", etc. sind auf Bildhöhe */
#buttonleiste>a>span { position: relative; top: -7px; }

/*-----------------------------------------------------------------------------------------------*/
/* Dropdown-userInfo / Logout                                                                    */
/*-----------------------------------------------------------------------------------------------*/

.loggedinuser-Box { display: flex; justify-content: flex-end; position: absolute; right: 10px;}
.loggedinuser-Box .bell-icon { font-size: 30px; line-height: 30px; }
.dropdown-trigger-userInfo { display: flex; justify-content: flex-end; padding: 0 5px 0 0;}
.loggedinuser-Box > ul { top: 45px !important; transform-origin: 100% 0 !important; min-width: 300px; }
.loggedinuser-Box > ul > li:hover {background-color:rgb(52, 152, 219, 0.2)}
.loggedinuser-Box > ul > li:first-child:hover { background-color: inherit; }
.loggedinuser-Box > ul a:hover {background-color: transparent;}
.loggedinuser-Box > ul > li > p{font-size:20px;color:#000!important;line-height:22px;padding:14px 16px;margin:0;font-weight:700;cursor:auto;max-width:280px;overflow:hidden;text-overflow:ellipsis}
.dropdown-trigger-userInfo > .material-icons { font-size: 30px; line-height: 1; }
.dropdown-trigger-userInfo > .material-icons:last-child { font-size: 24px; position: relative; top: 5px; font-weight: bold; }
.dropdown-trigger-userInfo > .userLoginName { position: relative; top: 7px; padding: 0 0 0 5px; font-size: 16px; }
.loggedinuser-Box li, .loggedinuser-Box a, .loggedinuser-Box p { color: #3498db !important; }
.loggedinuser-Box li {border-bottom: solid 1px; white-space: nowrap;}

/*-----------------------------------------------------------------------------------------------*/
/* CKEDitor Dialog-Boxen                                                                         */
/*-----------------------------------------------------------------------------------------------*/

table.cke_dialog input{box-sizing:border-box!important}
.material table.cke_dialog tr:hover{background-color:transparent!important}
.material table.cke_dialog .select-wrapper{position:relative}
.material table.cke_dialog .select-wrapper > ul{position:absolute;background-color:#fff}
.cke_dialog_contents_body{overflow:visible!important}
#cke_HTMLSource_BeschreibungListe .cke_button__save, #cke_HTMLSource_BeschreibungDetail .cke_button__save, #cke_Feld_59 .cke_button__save {display:none;}

/*-----------------------------------------------------------------------------------------------*/
/* Modal-Boxen / Dialog-Boxen                                                                    */
/*-----------------------------------------------------------------------------------------------*/

#modalBackground { position: fixed; top: 0; left: 0; background-color: rgba(65, 65, 65, 0.6); width: 100%; height: 100%; visibility: hidden; opacity: 0; }
#modalBox1, #modalBox2, #modalBox3, #modalBox4, #modalBox5 { opacity: 0; transition: linear 500ms, opacity 500ms; position: absolute;  border-radius: 10px; background-color: rgba(252, 252, 252, 1); visibility: hidden;}
#modalBox1, #modalBox4 { left: 50%; top: 60%; transform: translate(-50%, -60%); }
#modalBox2, #modalBox3, #modalBox5 { left: 50%; top: 50%; transform: translate(-50%, -50%); }
#eigenschaften, #umbenennen, #loeschen, #verschieben { display: none; }

/* Dateiinfo */
#modalBox1 { width: 80%; max-width: 1440px; height: 60%; }
#tooltipGrid { display: grid; grid-template-columns: 1fr 80px; grid-template-rows: 65px auto; height: 100%; padding: 15px; }
#tooltipHeader { border-bottom: solid 0.5px; margin: 7px 0 0 7px; grid-area: 1 / 1 / 2 / 2; }
#tooltipFilename { display: flex; flex-direction: column; }
#ttName { font-size: 18px; font-weight: bold; }
#tooltipClose { margin: 7px 7px 0 0; text-align: right; grid-area: 1 / 2 / 2 / 3; border-bottom: solid 0.5px; cursor: pointer; }
#tooltipContent { display: flex; padding: 7px; justify-content: space-between; grid-area: 2 / 1 / 3 / 3; overflow: hidden; }
#tooltipImageContainer { width: 49%; display: flex; justify-content: center; background-color: rgba(240, 240, 240, 1); }
#tooltipInfoContainer { width: 49%; display:flex; flex-direction: column; padding-top: 10px; }
#tooltipInfo { display: grid; grid-template-columns: 150px 1fr; height: fit-content; }
#showFileContainer { padding-top: 15px; }

/* Datei umbenennen */
#modalBox2 { width: 500px; height: 250px; }
#renameGrid { display: grid; grid-template-columns: 100px 1fr 100px; grid-template-rows: 40px 1fr 40px; width: 100%; height: 100%; padding: 15px }
#renameFileName { grid-area: 1 / 1 / 2 / 3; margin: 7px 0 0 7px; font-size: 19px; }
#renameInputContainer { grid-area: 2 / 1 / 3 / 4; margin: 7px; display: flex; justify-content: center; width: 70%; margin: 0 auto; }
#renameInputField { align-self: center; }
#renameButtonContainer { grid-area: 3 / 1 / 4 / 4; justify-self: center; align-self: flex-end; margin: 0 7px 7px 0; }
#renameAlert { visibility: hidden; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 95%; height: 92%; background-color: rgba(252, 252, 252, 1); display: grid; grid-template-rows: auto 65px; border-radius: 8px; padding: 15px; }
#renameAlertTextBox { align-self: flex-end; justify-self: center; width: 80%; padding: 8px; }
#renameAlertButtonContainer { display: flex; justify-content: center; align-self: flex-end; }

/* Datei loeschen */
#modalBox3 { width: 500px; height: 250px; }
#deleteGrid { display: grid; grid-template-columns: 1fr; grid-template-rows: 40px auto 40px; height: 100%; padding: 15px; }
#deleteHeader { font-size: 19px; padding: 7px 7px 0 7px; }
#deleteTextContainer { padding: 7px; display: flex; justify-content: center; }
#deleteText { align-self: center; width: 80% }
#deleteButtonContainer { justify-self: center; align-self: flex-end; padding: 7px; }
#deleteAlert { visibility: hidden; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 95%; height: 92%; background-color: rgba(252, 252, 252, 1); display: grid; grid-template-rows: auto 65px; border-radius: 8px; padding: 15px; }
#deleteAlertTextBox { align-self: flex-end; justify-self: center; width: 80%; padding: 8px; }
#deleteAlertButtonContainer { display: flex; justify-content: center; align-self: flex-end; }

/* Datei verschieben */
#modalBox4 { width: 30%; min-width: 300px; max-width: 1440px; height: 50%; min-height: 200px; max-height: 960px; }
#moveGrid { display: grid; grid-template-columns: 1fr; grid-template-rows: 65px calc(100% - 65px - 80px - 65px) 80px 65px; height: 100%; padding: 15px; }
#moveHeader { font-size: 19px; padding: 7px 7px 0 7px; }
#moveToFolders { height: 100%; padding: 7px; }
#moveToTarget { padding: 7px; }
#moveButtonContainer { justify-self: center; align-self: flex-end; padding: 7px; }

/* Neuen Ordner erstellen */
#modalBox5 { width: 500px; height: 250px; }
#newFolderGrid { display: grid; grid-template-columns: 1fr; grid-template-rows: 65px calc(100% - 65px - 65px) 65px; height: 100%; padding: 15px; }
#newFolderHeader { font-size: 19px; padding: 7px 7px 0 7px; }
#newFolderName { margin: 7px; display: flex; justify-content: center; }
#newFolderInputField { align-self: center; width: 70%; }
#newFolderButtonContainer { justify-self: center; align-self: flex-end; padding: 7px; }
#newFolderAlert { visibility: hidden; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 95%; height: 92%; background-color: rgba(252, 252, 252, 1); display: grid; grid-template-rows: auto 65px; border-radius: 8px; padding: 15px; }
#newFolderAlertTextBox { align-self: flex-end; justify-self: center; width: 80%; padding: 8px; }
#newFolderAlertButtonContainer { display: flex; justify-content: center; align-self: flex-end; }

/* Animation "Laden" */
.lds-spinner { color: official; display: inline-block; width: 48px; height: 48px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: hidden; }
.lds-spinner div { transform-origin: 32px 32px; animation: lds-spinner 1.2s linear infinite; }
.lds-spinner div:after { content: " "; display: block; position: absolute; top: 3px; left: 29px; width: 5px; height: 14px; border-radius: 20%; background: #fff; }
.lds-spinner div:nth-child(1) { transform: rotate(0deg); animation-delay: -1.1s; }
.lds-spinner div:nth-child(2) { transform: rotate(30deg); animation-delay: -1s; }
.lds-spinner div:nth-child(3) { transform: rotate(60deg); animation-delay: -0.9s; }
.lds-spinner div:nth-child(4) { transform: rotate(90deg); animation-delay: -0.8s; }
.lds-spinner div:nth-child(5) { transform: rotate(120deg); animation-delay: -0.7s }
.lds-spinner div:nth-child(6) { transform: rotate(150deg); animation-delay: -0.6s; }
.lds-spinner div:nth-child(7) { transform: rotate(180deg); animation-delay: -0.5s }
.lds-spinner div:nth-child(8) { transform: rotate(210deg); animation-delay: -0.4s; }
.lds-spinner div:nth-child(9) { transform: rotate(240deg);  animation-delay: -0.3s }
.lds-spinner div:nth-child(10) { transform: rotate(270deg); animation-delay: -0.2s; }
.lds-spinner div:nth-child(11) { transform: rotate(300deg); animation-delay: -0.1s }
.lds-spinner div:nth-child(12) { transform: rotate(330deg); animation-delay: 0s;}   

#loader{border:10px solid #f3f3f3;border-top:10px solid #333;border-radius:50%;width:70px;height:70px;animation:spin 1.5s linear infinite;}

@keyframes lds-spinner {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

/* Fixes fuer Drag&Dropable <tr> */
.ui-sortable-placeholder td{display:none}
.ui-sortable-helper{display:table}
.ui-sortable > tr {cursor:pointer;}

/* SoMeModal */
#modal-soMe {position:fixed;width:100%;height:100%;top:0;left:0;background:rgba(0, 0, 0, 0.12);z-index:100;}
#modal-soMe * {user-select: none;}
#modal-soMe > div{background-color:#eee;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);min-width:250px;box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);}
#modal-soMe-header{display:flex;justify-content:flex-end;border-bottom:solid 1px;height:30px}
#modal-soMe-header span{padding:0 10px;border-left:solid 1px;display:flex;flex-direction:column;justify-content:center;cursor:pointer}
#modal-soMe ul{list-style-type:none;padding:0;margin:0;display:flex;flex-direction:column;padding:15px}
#modal-soMe li{margin:5px 0;text-align:center;display:inline-flex;align-self:center;}
#modal-soMe li:hover{cursor:pointer}
#modal-soMe a.so-me-btn{text-decoration:none;color:#fff;padding:8px 10px;display:flex;border-radius:5px;font-weight:700;font-size:15px; position: relative;width:200px;}
#modal-soMe a.so-me-btn:hover{opacity:.9}
#modal-soMe a.so-me-btn span.soMe-btn-tooltip {visibility:hidden;width:200px;background-color:#333;color:#fff;text-align:center;border-radius:5px;padding:5px 0;position:absolute;z-index:1;top:125%;left:50%;margin-left:-100px;opacity:0;transition:opacity .3s;font-weight: 100;}
#modal-soMe a.so-me-btn span.soMe-btn-tooltip::after{content:"";position:absolute;bottom:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:transparent transparent #333 transparent}
#modal-soMe a.so-me-btn:hover span.soMe-btn-tooltip {opacity: 1; visibility: visible;}
#modal-soMe a#twitterBtn{background-color:#1DA1F2}
#modal-soMe a#facebookBtn{background-color:#4267B2}
#modal-soMe a#instagramBtn{background:#f09433;background:-moz-linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);background:-webkit-linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f09433',endColorstr='#bc1888',GradientType=1)}
#modal-soMe span.so-me-icon{display:flex;margin-right:10px}
#modal-soMe span.so-me-text{align-self:center;flex:1;color:#fff}
#modal-soMe a.so-me-btn.disabled{background:#aaa!important}
#modal-soMe-content{min-width:500px;max-width:700px;max-height:80vh;padding:15px 30px}
#modal-soMe-content > div{margin:15px 0}
#modal-soMe-content > div:nth-child(1){margin-top: 0;}
#modal-soMe-content > div:nth-last-child(1){margin-top: 25px;}
#soMe-content-description textarea{max-width:100%;max-height:500px;font-size:16px;padding:10px;min-height:200px;resize:none;border:2px solid #9e9e9e}
#soMe-content-title > input{outline:none!important;background:none!important;border:2px solid #9e9e9e !important;box-shadow:none!important;box-sizing:border-box;padding:0 10px;margin:0;}
#soMe-content-title > input:focus, #soMe-content-description textarea:focus {border-color: #333 !important;}
#soMe-content-img img {max-width: 100%;max-height: 250px;box-sizing: border-box; padding: 15px; margin: 0 auto;}
#soMe-content-img {display:flex;flex-direction: column;}
#soMe-content-btn {display:flex; justify-content: center;}

/*-----------------------------------------------------------------------------------------------*/
/* MEDIA QUERIES                                                                                 */
/*-----------------------------------------------------------------------------------------------*/

@media only screen and (min-width: 993px) {
    #toast-container{top:80%!important;right:5%!important}
    .toast {font-size: 1.2rem !important;}
    .toast.success {background:#4CAF50 !important}
    .toast.fail {background:#e81716 !important}
}
@media all and (max-width: 1100px) {
    #loggedinuser-container { display: none; }
    #login-container { margin: 50px auto 0; }
    #menu-left-container { width: 280px; }
  }
@media all and ( max-width: 1000px ) {
    .top-menu-container {
        grid-template-columns: 300px minmax(150px, auto) 300px;
    }
}
@media all and ( max-width: 980px ) {
    #main-menu { display: none; }
    .top-search-container { min-width: 240px; max-width: 240px; }
}