html {
    box-sizing: border-box;
    font-size: 16px;
    scroll-behavior: smooth !important;
    height: 100%;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
ol,
ul {
    margin: 0;
    padding: 0;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    text-decoration: none;
    color: inherit;
}

.subtitle {
    font-weight: bold;
    margin-bottom: 10px;
}

:root {
    --text-color: #FFFFFF;
    --sub-text-color: #AAAAAA;
    --placeholder-text-color: #cfcfcf;
    --bg-color: #121212;
    --card-bg-color: #1D1D1D;
    --sub-card-bg-color: #2D2D2D;
    --activated-color: #00AF3A;
    --filter--black-to-white: invert(100%) sepia(0%) saturate(0%) hue-rotate(31deg) brightness(100%) contrast(101%);

    --shadow-medium: 0 4px 6px -1px rgb(205 207 255 / 10%), 0 2px 4px -1px rgb(19 0 149 / 6%);
}


body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-size: 14px;
    margin-bottom: 100px;
    background-color: var(--bg-color);
    color: var(--text-color);
}

* {
    font-family: "Arial", sans-serif;
    list-style: none;
    box-sizing: border-box;
}

.container {
    max-width: 75rem;
    height: auto;
    margin: 0 auto;
    padding: 0 1.25rem;
}

.edit_inputs {
    color: black !important;;
    background-color: white;
    padding: 0px 1em;
    border-radius: 5px;
    height: 2.5em;
    border: 1px solid rgb(200, 200, 200);
}

.back_btn:hover {
    color: white !important;
    background-color: black;
}

input[type=text], input[type=url], input[type=email], input[type=tel], input[type=password], input[type=datetime-local], input[type=date], textarea, select, .inputs {
    color: var(--text-color);
    width: 100%;
    background-color: var(--sub-card-bg-color);
    padding: 0px 1em;
    border-radius: 5px;
    height: 2.5em;
    /*border: 1px solid rgb(200, 200, 200);*/
    border: 1.5px solid var(--placeholder-text-color);
    font-size: 16px;

}

textarea {
    padding-top: 10px !important;
}

/*input[type=button], input[type=submit], .buttons {*/
/*    background-color: #F87575;*/
/*    color: white;*/
/*    border: 0;*/
/*    padding: 10px 60px;*/
/*    border-radius: 5px;*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*    gap: 5px;*/
/*    cursor: pointer;*/
/*    font-size: 16px;*/
/*    box-shadow: 0px 0px 0px grey;*/
/*}*/


.modal_YN {
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 400px;
    /*height: 30%;*/
    height: auto;
    z-index: 5;
    background-color: white;
    border-radius: 10px;
    padding: 25px;
    flex-direction: column;
    align-items: center;
}


.modal_YN > span {
    font-size: large;
    font-weight: 500;
}


.Y_button {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid red;
    cursor: pointer;
}

.Y_button:hover {
    background-color: red !important;
    color: white;
}

.N_button {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid black;

}

.N_button:hover {
    background-color: black;
    color: white;
}


.O_button {
    background-color: #007aff;
    color: white;
    border: 0;
    padding: 10px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    transition: opacity 0.4s;
}

form > textarea {
    max-height: 101px;
}


.modal-container {
    position: fixed;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    left: 0;
    top: 70px;
    z-index: 20;
    pointer-events: none;
}

.modal {
    margin: 0 10px;
    max-width: 350px;
    padding: 25px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 1px 1px #fff inset;
    -webkit-box-shadow: 0 1px 1px #fff inset;
    box-shadow: 0 1px 1px #fff inset;
    cursor: pointer;
    pointer-events: all;
}

.error {
    background-color: pink;
    border: 1px solid #ff0000;
}

.success {
    border: 1px solid #a2d246;
    background-color: #ebf8a4;
}


.form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 30px;
    /*box-shadow: 0px 0px 20px grey;*/
    border-radius: 10px;
    margin-top: 25px;
    text-align: center;
    align-items: center;
}


/*input[type=text],input[type=email],input[type=tel],input[type=password],input[type=date], textarea, select{*/

/*	background-color: white;*/
/*	padding: 0px 1em;*/
/*	border-radius: 5px;*/
/*	height: 2.5em;*/
/*	border: 1px solid rgb(200, 200, 200);*/
/*	font-size:16px;*/
/*	font-family: Arial, sans-serif;*/

/*}*/


input[type=button], input[type=submit], button[type=submit], button[type=button], .force_button_style {
    background-color: var(--activated-color);
    color: var(--text-color);
    padding: 10px 25px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 16px;
    box-shadow: 0 0 0 grey;
    -webkit-appearance: none !important;
    border: 2px solid transparent;
    transition: all 0.3s;
}
input[type=button][disabled], input[type=submit][disabled], button[type=submit][disabled], button[type=button][disabled], .force_button_style[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

input[type=button]:hover, input[type=submit]:hover, button[type=submit]:hover, button[type=button]:hover, .force_button_style:hover {
    background-color: var(--bg-color)!important;
    border: 2px solid var(--activated-color);
    color: var(--activated-color);
}

input[type=button][disabled]:hover, input[type=submit][disabled]:hover, button[type=submit][disabled]:hover, button[type=button][disabled]:hover , .force_button_style[disabled]:hover {
    background-color: var(--activated-color);
    color: red;
    border: 2px solid red;

}

button[type=button].button_warning{
    background-color: var(--bg-color);
    border: 2px solid red;
    color: red;
}
button[type=button].button_warning:hover{
    background-color: red!important;
    color: white;
    border: 2px solid red;
}
input.button-inverted, button.button-inverted , .force_button_style.button-inverted {
    background-color: var(--bg-color);
    border: 2px solid var(--activated-color);
    color: var(--activated-color);
}
input.button-inverted:hover, button.button-inverted:hover, .force_button_style.button-inverted:hover{
    background-color: var(--activated-color)!important;
    color: var(--text-color);
}

input[type=color] {
    padding: 0;
    border: 0;
}

input[type=button]:hover, input[type=submit]:hover {
    opacity: 0.8;
}


input.apple-switch {
    position: relative;
    appearance: none;
    outline: none;
    min-width: 50px;
    min-height: 30px;
    background-color: #ffffff;
    border: 1px solid #D9DADC;
    border-radius: 50px;
    box-shadow: inset -20px 0 0 0 #ffffff;
    transition-duration: 200ms;
    cursor: pointer;
}

input.apple-switch:after {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    width: 26px;
    height: 26px;
    background-color: transparent;
    border-radius: 50%;
    box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.2);
}

input.apple-switch:checked {
    border-color: #4ED164;
    box-shadow: inset 20px 0 0 0 #4ED164;
}

input.apple-switch:checked:after {
    left: 20px;
    box-shadow: -2px 4px 3px rgba(0, 0, 0, 0.05);
}

.more_txt {
    margin-left: auto;
    margin-top: -10px;
    cursor: pointer;
    font-size: 14px;
}

.input_container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.input_container label {
    margin-bottom: 8px;
}


canvas {
    /*prevent interaction with the canvas*/
    pointer-events: none;
}


button {
    -webkit-appearance: none;
}


.full_screen_alert {
    z-index: 4;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    width: 100%;
    height: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
}


.searchbar {
    display: flex;
    flex-direction: row;
    border: 1px solid lightgray;
    border-radius: 5px;
    justify-content: space-between;

}


.searchbar input {
    width: 100%;
    border: 0;
}

.searchbar button {
    scale: 1.08;
}

.searchbar button:hover {
    opacity: 1;
    background-color: black;
}


.col-card {
    display: flex;
    flex-direction: column;
    background-color: var(--card-bg-color);
    border-radius: 5px;
    padding: 1rem;
    align-items: center;
    gap: 1rem;
}

.row-card {
    display: flex;
    flex-direction: row;
    background-color: var(--card-bg-color);
    border-radius: 5px;
    padding: 1rem;
    align-items: center;
    gap: 1rem;
}

.col-sub-card {
    display: flex;
    flex-direction: column;
    background-color: var(--sub-card-bg-color);
    border-radius: 5px;
    padding: 1rem;
    align-items: center;
    gap: 1rem;
}

.row-sub-card {
    display: flex;
    flex-direction: row;
    background-color: var(--sub-card-bg-color);
    border-radius: 5px;
    padding: 1rem;
    align-items: center;
    gap: 1rem;
}

.card-title {
    font-size: 1.5rem;
    font-weight: bold;
}

.card-desc {
    color: var(--sub-text-color);
}

.card-icon {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.card-title {
    font-size: 1rem;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-external-icon {
    width: 1.5rem;
    height: 1.5rem;
    object-fit: contain;
    margin-left: auto;
    filter: var(--filter--black-to-white);
}

.filter-black-to-white {
    filter: var(--filter--black-to-white);
}

.no-filter {
    filter: none;
}


.profile_title {
    font-size: 1.5rem;
    font-weight: bold;
}

.profile_icon {
    width: 7rem;
    height: 7rem;
    object-fit: cover;
    border-radius: 100px;
}

.fc {
    display: flex;
    flex-direction: column;
}

.fr {
    display: flex;
    flex-direction: row;
}

.p5{
    padding: 5px;
}
.p10{
    padding: 10px;
}
.g5 {
    gap: 0.5rem;
}

.g10 {
    gap: 1rem;
}
.g15 {
    gap: 1.5rem;
}

.fw {
    flex-wrap: wrap;
}

.w100 {
    width: 100%;
}

.bold{
    font-weight: bold;
}




.context-menu {
    /*display: none;*/
    position: absolute;
    background-color: var(--card-bg-color);
    border-radius: 7px;
    padding: 5px;
    z-index: 100;
    top: 35px;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}

.context-menu button {
    width: 100%;
    text-align: left;
    border: none;
    background: none;
    padding: 10px;
    cursor: pointer;
    color: var(--text-color);
    font-size: 16px;
    display: flex;
    gap: 10px;
    white-space: nowrap;
    justify-content: space-between;
}

.context-menu button:hover {
    background-color: var(--sub-card-bg-color);
}

.context-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0);
    z-index: 1000;
}

a:not([data-id]):not(.row-card){
    transition: all 0.2s;
}
a:not([data-id]):not(.row-card):active, input[type=submit]:not([data-id]):not(.row-card):active, input[type=button]:not([data-id]):not(.row-card):active, button[type=submit]:not([data-id]):not(.row-card):active, button[type=button]:not([data-id]):not(.row-card):active{
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
}