@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

:root {
       /* Colors*/
    --darkblue: #007bff;
    --blue: #1887d2;
    --green: #28a745;
    --yellow: #d8a816;
    --red: #dc3545;
    --purple: #605ca8;
    --indigo: #6610f2;
    --navy: #001f3f;
    --fuchsia: #f012be;
    --orange: #ff851b;
    --olive: #3d9970;
    --lime: #01ff70;
    --teal: #37adad;
    --gray: #525252;
    --darkgray: #343a40;
    --lightgray: #c9c9c9;
    --white: #e0e0e0;

    --akzentfarbe: #1887d2 ;
    --Akzentfarbe_Hover: #22a4fa;
    --discord: #5865F2;

    /* Backgrounds */
    --BG: #1a1d21;
    --BG_Hover: #3f3f3f;

    --SidebarBG: #111518;
    --SidebarBG_Active: #3f3f3f;
    --SidebarBG_Dropdown: #19191b;
    --SidebarBG_Hover: #3f3f3f;

    --FooterBG: #111518;

    --Input: #1a1d21;
    --disabledInput: #171a1d;
    --InputBorder : #555555;

    /* Box */
    --BoxBG: #222529;
    --BoxSecondary: #292c30;
    --BoxThird: #1c1e20;
    --BoxInBox: #2f3236;
    --BoxDark: #1d1e22;
    --BoxBGHover: #2c3035;
    --BoxBGHoverSecondary: rgb(48, 53, 58);
    --BoxBorder: 1px solid #353535;
    --BoxShadow: 0 0 5px rgb(14 14 14 / 65%);
    --widgetColor: #2f2f2f;

    /* Text */
    --TextColorButton: #fff;
    --TextColorTag: #f6f7f8;
    --TextColor:#9d9d9d;
    --TextSecondary: #dddddd;
    --TextThird:#797979;
    --TextInput: #bdbdbd;
    --TextAltTitle: #969696;
    --TextWidgetTitle: #acacac;
    --TextDark: #000000;
    --TextDisabled: #474747;
    --DateColor: #797979;

    /*Table Backgrounds*/
    --TableTheadBG: #1c1f23;
    --TableBG: #24272b;
    --TableOddBG: #1f2125;
    --TableHoverBG: #2c3035;
    --TableBorder: #32363b;

    /* Navbar */
    --NavbarHeight: 60px !important;
    --NavbarBG: #111518;
    --NavbarButtonBG: #1d1e23;
    --NavbarButtonBGHover: #282930;
    --NavbarTooltip: #25262c;
    --NavbarBorder: #2e2e2e;

    /* Other */
    --Footerheight: 50px;
    --borderStrong: #353535;

}

.Box {
    box-shadow: var(--BoxShadow);
    padding: 25px;
    background: var(--BoxBG);
    border-radius: 3px;
    border: var(--BoxBorder);
}

/* Modal */

.modal {
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.603);
    position: absolute;
    filter: blur(120%);
    z-index: 9999999;
}

.modal_container {
    width: 700px;
    height: auto;
    background: var(--ModalBG);
    text-align: center;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.side_modal_container {
    width: 400px;
    height: 100%;
    background: var(--ModalBG);
    text-align: center;
    margin: 0;
    position: absolute;
    right: 0;
    animation: sidemodal_slidein .3s  forwards ease ;
}

.side_modal_slideout {
    opacity: 0;
    animation: sidemodal_slideout .3s  forwards ease ;
}

@keyframes sidemodal_slidein {
	from {
		opacity: 0;
		right: -400px;
	}
	to {
		opacity: 1;
		right: 0px;
	}
}

@keyframes sidemodal_slideout {
	from {
		opacity: 1;
		right: 0;
	}
	to {
		opacity: 0;
		right: -400px;
	}
}

.modal_title {
    width: 100%;
    height: 50px;
    padding: 7px;
    font-size: 20px;
    font-weight: 400;
    border-bottom: 1px solid var(--InputBorder);
    margin-bottom: 10px;
    text-align: left;
    padding: 10px 15px;
}

.close_modal {
    position: absolute;
    width: 25px;
    height: 25px;
    top: 12.5px;
    right: 10px;
    font-size: 15px;
    padding: 0;
    border: 1px solid var(--red);
    color: var(--red);
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.close_modal:hover {
    background: var(--red);
    color: #fff;
}

.modal_content {
    width: 100%;
    height: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ck_container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid var(--InputBorder);
    overflow: hidden;
}

.ck-editor__main {
    background: var(--Input);
}

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Poppins", sans-serif;
}

html {
	height: 100%;
}

body {
    background: var(--BG);
    color: var(--TextColor);
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    height: 100%;
}

/* Page content */

.container {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.content {
    height: calc(100% - var(--NavbarHeight) - var(--Footerheight));
}

.page_info {
    height: 60px;
    padding: 0 20px;
    line-height: 60px;
    font-size: 25px;
    font-weight: 600;
    color: var(--TextAltTitle)
}

::-webkit-scrollbar-track {
    display: none;
}

::-webkit-scrollbar-button {
    display: none;
}

::-webkit-scrollbar {
    display: none;
}

::-webkit-scrollbar-thumb {
    display: none;
}

::-webkit-scrollbar-corner {
    display: none;
}

button {
    background: var(--akzentfarbe);
    color: var(--TextColorButton);
    padding: 10px 25px;
    border: none;
    outline: none;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s ease;
}

button:hover {
    filter: brightness(110%);
    box-shadow: var(--BoxShadow);
}

select {
    margin: 0;
    box-sizing: border-box;
    height: 40px;
    background: var(--Input);
    color: var(--TextInput);
    padding: 10px;
    border: 1px solid var(--InputBorder);
    user-select: none;
    transition: all 0.3s ease;
    color-scheme: dark;
}

select:active, select:focus {
    outline: none;
}

input {
    margin: 0;
    box-sizing: border-box;
    height: 40px;
    background: var(--Input);
    color: var(--TextInput);
    padding: 10px;
    /* border: 1px solid var(--InputBorder); */
    border: none;
    user-select: none;
    transition: all 0.3s ease;
}

textarea {
    width: 100%;
    height: 200px;
    resize: none;
    background: var(--Input);
    box-sizing: border-box;
    color: var(--TextInput);
    padding: 10px;
    border: none;
    user-select: none;
    transition: all 0.3s ease;
}

input:active, input:focus, button:active, button:focus, textarea:active, textarea:focus {
    outline: none;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance:textfield;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance:none;
}

input[type="color"] {
    padding: 5px;
    outline: none;
}

input[type="datetime-local"], input[type="time"], input[type="date"] {
   color-scheme: dark;
}

input[type="datetime-local"]:disabled, input[type="time"]:disabled, input[type="date"]:disabled {
   background: var(--disabledInput);
   border: none;
   color: var(--TextDisabled);
}

input[type="submit"] {
    background: var(--green);
    color: var(--TextColor);
    border: none;
}

input[type="reset"] {
    background: var(--red);
    color: var(--TextColor);
    border: none;
}

input[type="file"] {
    background: var(--Input);
    color: var(--TextInput);
    width: 100%;
    height: 25px;
    cursor: pointer;
    outline: none;
    box-shadow: none;
    border: none;
}

input[type="file"]:active, input[type="file"]:focus {
  outline: none;
}

input[type="file"]:hover {
  filter: brightness(120%);
}

input[type="file"]::-webkit-file-upload-button {
  border: none;
  outline: none;
  box-shadow: none;
}

input {
    margin-bottom: 10px;
}

red {
    color: var(--red);
}

green {
    color: var(--green);
}

.tag {
    background: var(--darkgray);
    color: var(--TextColorTag);
    padding: 5px 10px;
    border-radius: 3px;
    font-size: 12px;
    display: inline-block;
}

.userrank_tag {
    display: inline-block;
    border-radius: 2px;
    padding: 0 8px;
    line-height: 20px;
    font-size: 13px;
    font-weight: 400;
    color: var(--TextColorTag);
    text-shadow: 0 0 2px black;
}

.active_sidebaritem {
    background: var(--akzentfarbe);
}


/* Tagging */

.tag_item {
    display: inline-flex;
    align-items: center;
    padding: 0 5px;
    border-radius: 3px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
    color: var(--TextSecondary);
}

.tag_item:hover {
    opacity: 0.5 !important;
}

#taglist.hidden {
    display: none;
}

.taglist {
    position: absolute;
    z-index: 10;
    overflow-y: auto;
    max-height: 225px;
    background: var(--BoxDark);
    color: var(--TextSecondary);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    text-align: left;
}

.suggestion_tag {
    padding: 5px 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
    align-items: center;
    justify-content: center;
    margin: 5px;
    color: var(--TextSecondary);
}

.suggestion_tag_rank {
    font-size: 10px;
}

.suggestion_tag:hover,
.suggestion_tag.active {
    filter: brightness(120%) !important;
}