@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
body, html{
    overflow:hidden!important;
    margin: 0;
    padding: 0;
    background: #1a1a1c
    /* background: url("/img/bg.jpg") no-repeat; */
    /* background-size: cover; */
    /* background-attachment: fixed; */
}
.header{
    display:inline-block;
    height: 2vw!important;
    width: 100%;
    text-align:center;
    font-size: 1.1vw;
    background:rgba(0,0,0,0.4);
    padding-top: 1vw;
} 
.footer{
    position:absolute;
    bottom: 0;
    display:inline-block;
    height: 4vw;
    width: 100%;
    text-align:center;
    font-size: 0.5vw;
    background:rgba(0,0,0,0.4);
    color: rgba(255,255,255,0.5);
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    text-transform: uppercase;
} 
.bg-dblue{
    background: #7289da!important;
    color: white;
    font-size: 1.2vw;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    text-transform: uppercase;
}
.bg-dblue:hover{
    background: #5b6eae!important;
}
.btn{
    display:grid;
    place-items: center;
    /*width: 100%;*/
    min-width: 50%;
    max-width: max-content;
    height: 2.5vw;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(0,0,0,0.4);
}
.footer .navbar{ 
    position: absolute;
    left: 0.5vw;
    bottom: 1.5vw;
}
.footer .navbar a{
    margin-left: 1vw;
    text-decoration: none;
    color: rgba(255,255,255,0.5);
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    text-transform: uppercase;
}
.header img{
    display:block;
    position:absolute;
    height: 4vw;
    left:0.5vw;
    top: 0.5vw;
}
.header .navbar a{
    margin-left: 1vw;
    text-decoration: none;
    color: rgba(255,255,255,0.5);
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    text-transform: uppercase;

}
.header .navbar a:hover{
    color: rgb(255,255,255);
}
.content{
    display:flex;
    word-break:break-all;
    width: 100%;
    font-family: "Raleway", sans-serif;
    font-size: 1vw;
    color: rgba(255,255,255,0.5);
    overflow-y:auto;
}
.logo{
    display:flex;
    position:static;
    height: 5vw;
    width: 5vw;
}
.test{
    background: rgba(0,0,0,0.2);
}
.test1{
    background: rgba(0, 0, 0, 0.394);
}

.box{
    margin: 0.5vw;
    word-break: keep-all;
    word-wrap: break-word;
    box-sizing:border-box;
    border: 0.1vw solid rgba(0,0,0,0.4);
    box-shadow: 0.3vw 0.3vw 1vw rgba(0,0,0,0.2);
}
.mx-auto{
    margin-left: auto;
    margin-right: auto;
}
.box-body{
    overflow: hidden;
    background: rgba(0,0,0,0.2);
}
.row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-evenly;
    align-content: stretch;
    margin-left: -0.01vh;
    margin-right: -0.01vh;
}
.box-header{
    text-decoration: dashed;
    padding: 0.2vw;
    background: rgba(0,0,0,0.3);
}
.box > .box-body {
  padding: 0.5vw;
  width: 100%;
  box-sizing: border-box;
}

.item-center{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}
.nowrap{
    flex-wrap: wrap;
}

.alert{
    padding: 0.5vw;
    border: 0.1vw solid rgba(0,0,0,0.3);
}
/* 
SETTINGS SETTINGS SETTINGS SETTINGS SETTINGS SETTINGS SETTINGS SETTINGS SETTINGS SETTINGS SETTINGS SETTINGS SETTINGS SETTINGS SETTINGS
 SETTINGS SETTINGS SETTINGS SETTINGS SETTINGS SETTINGS SETTINGS SETTINGS SETTINGS SETTINGS SETTINGS SETTINGS SETTINGS SETTINGS SETTINGS
  SETTINGS SETTINGS SETTINGS SETTINGS SETTINGS SETTINGS SETTINGS SETTINGS SETTINGS SETTINGS SETTINGS SETTINGS SETTINGS SETTINGS SETTINGS
   SETTINGS SETTINGS SETTINGS SETTINGS SETTINGS SETTINGS SETTINGS SETTINGS SETTINGS SETTINGS SETTINGS SETTINGS SETTINGS SETTINGS SETTINGS
*/
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    box-sizing:content-box;   /* Padding und Border zur Breite dazu zählen */
    overflow-wrap: break-word;
    white-space: normal;
}
.col-1 {width: 8.3333%;}.col-2{width: 16.6667%;}.col-3 {width: 25%;}.col-4 {width: 33.3333%;}.col-5 {width: 41.6667%;}.col-6 {width: 50%;}
.col-7 {width: 58.3333%;}.col-8 {width: 66.6667%;}.col-9 {width: 75%;}.col-10 {width: 83.3333%;}.col-11 {width: 91.6667%;}.col-12 {width: 100%;}
.w-1{height:8.3333%}.w-2{height:16.6667%}.w-3{height:25%}.w-4{height:33.3333%}.w-5{height:41.6667%}.w-6{height:50%}.w-7{height:58.3333%}.w-8{height:66.6667%}.w-9{height:75%}.w-10{height:83.3333%}.w-11{height:91.6667%}.w-12{height:100%}.wv-1{height:8.3333vh}.wv-2{height:16.6667vh}.wv-3{height:25vh}.wv-4{height:33.3333vh}.wv-5{height:41.6667vh}.wv-6{height:50vh}.wv-7{height:58.3333vh}.wv-8{height:66.6667vh}.wv-9{height:75vh}.wv-10{height:83.3333vh}.wv-11{height:91.6667vh}.wv-12{height:100vh}
.text-center{text-align:center;}.text-left{text-align: left;}.text-right{text-align: right;}
.bg-discord{background: #2c2f33!important;}
.border{ border: 0.1vw solid rgba(0,0,0,0.2);}.br{border-radius:0.4vw;}.inline{display:inline;}.justify-content-center{justify-content: center;}.align-items-center{align-items: center;}.flex{display:flex;}.flex-column{flex-direction: column;}.flex-row{flex-direction: row;}.flex-wrap{flex-wrap: wrap;}.flex-nowrap{flex-wrap: nowrap;}
.justify-content-end{justify-content: flex-end;}.justify-content-start{justify-content: flex-start;}.justify-content-between{justify-content: space-between;}.justify-content-around{justify-content: space-around;}.align-items-start{align-items: flex-start;}.align-items-end{align-items: flex-end;}.align-items-baseline{align-items: baseline;}
.btn-full{ width: 100vw !important;
    max-width: -webkit-fill-available;}
.p-1{padding: 0.1vw;}.p-2{padding: 0.2vw;}.p-3{padding: 0.3vw;}.p-4{padding: 0.4vw;}.p-5{padding: 0.5vw;}.p-6{padding: 0.6vw;}.p-7{padding: 0.7vw;}.p-8{padding: 0.8vw;}.p-9{padding: 0.9vw;}.p-10{padding: 1vw;}
/*

*/
		.message-container {
            width: 100%;
            margin: 1vw auto;
            padding: 0.1vw;
        }
        .message {
            display: flex;
            align-items: flex-start;
            margin-bottom: 0.2vw;
        }
        .avatar {
            width: 3vw;
            height: 3vw;
            border-radius: 50%;
            margin-right: 1vw;
        }
        .message-content {
            background-color: #40444B;
            padding: 0.5vw;
            border-radius: 5px;
        }
        .username {
            font-weight: bold;
            color: #ffffff;
        }
        .timestamp {
            font-size: 0.8em;
            color: #b9bbbe;
            margin-left: 5px;
        }
        .embed {
            background-color: #2f3136;
            padding: 0.5vw;
            border-radius: 0.2vw;
            margin-top: 0.5vw;
        }
        .embed-title {
            font-weight: bold;
            color: #ffffff;
        }
        .embed-description {
            color: #b9bbbe;
        }
        .embed a {
            color: #00aff4;
        }
		.mention {
			color: #00aff4;
			font-weight: bold;
		}
		
		.datetime-container {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            background: hsla(0, 0%, 15%, 0.623);
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
			margin: 1vw;
        }

        input[type="datetime-local"] {
            padding: 12px 15px;
            font-size: 16px;
            color: hwb(0 100% 0%)!important;
            background-color: hsl(0, 0%, 11%);
            border: 2px solid hsl(0, 0%, 11%);
            border-radius: 6px;
            outline: none;
            transition: border-color 0.3s, box-shadow 0.3s;
            width: 250px;
        }

        input[type="datetime-local"]:focus {
            border-color: #4CAF50;
            box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
        }

        input[type="datetime-local"]:hover {
            border-color: #888;
        }

        label {
            font-size: 18px;
            color: #333;
            margin-right: 15px;
            font-weight: 500;
        }
        .bg-home{
            background: rgba(50,20,50,0.4);
        }