* {
    margin: 0;
    padding: 0;
    font-family: 'Roboto-Regular';
}

@font-face {
    font-family: 'Roboto-Regular';
    src: url('fonts/Roboto-Regular.ttf');
}

@font-face {
    font-family: 'Roboto-Bold';
    src: url('fonts/Roboto-Bold.ttf');
}

p {
    margin: 0;
    padding: 0;
}

:root {
    /*colors*/
    /*background colors*/
    --primary-background-color: #FFFFFF; /*white*/
    --primary-background-color-transparent: rgba(255,255,255,0.9); /*white*/
    --secondary-background-color: #000000; /*black*/
    --secondary-background-color-transparent: rgba(0,0,0,0.8); /*black*/
    --tertiary-background-color: F7F7F7; /*grey*/
    /*text colors*/
    --primary-text-color: #000000; /*black*/
    --secondary-text-color: #FFFFFF; /*white*/
    --success-text-color: #37BC77; /*green*/
    --error-text-color: #F97777; /*red*/
    --select-text-color: #3C82F7; /*blue*/
    /*buttons colors*/
    --success-button-color: #37BC77; /*green*/
    --error-button-color: #F97777; /*red*/
    --primary-button-color: #3C90CE; /*blue*/
    --secondary-button-color: #DADDDF; /*grey*/
    /*border colors*/
    --border-color: #000000; /*black*/
    /*highlight colors*/
    /*success*/
    --highlight-success-text-color: #37BC77;
    --highlight-success-bg-color: #E8F7F0;
    /*failure*/
    --highlight-failure-text-color: #F06273;
    --highlight-failure-bg-color: #FDEDEF;
    /*select*/
    --highlight-select-text-color: #3C82F7;
    --highlight-select-bg-color: #EEF6FF;
    /*unimportant*/
    --highlight-unimportant-text-color: #B0B0B0;
    --highlight-unimportant-bg-color: #F7F7F7;
}

.regular-text {
    font-size: 14px;
    font-family: 'Roboto-Regular';
}

.header-text {
    font-size: 16px;
    font-family: 'Roboto-Regular';
}

.bold-text {
    font-size: 16px;
    font-family: 'Roboto-Bold';
}

.success-text {
    color: var(--success-text-color);
}

.error-text {
    color: var(--error-text-color);
}

.success-highlight {
    color: var(--highlight-success-text-color);
    background-color: var(--highlight-success-bg-color);
}

.failure-highlight {
    color: var(--highlight-failure-text-color);
    background-color: var(--highlight-failure-bg-color);
}

.select-highlight {
    color: var(--highlight-select-text-color);
    background-color: var(--highlight-select-bg-color);
}

.unimportant-highlight {
    color: var(--highlight-unimportant-text-color);
    background-color: var(--highlight-unimportant-bg-color);
}

.primary-input {
    border-radius: 5px;
    border: 1px solid var(--border-color);
    font-size: 14px;
    font-family: 'Roboto-Regular';
    color: var(--primary-text-color);
    text-align: center;
    padding: 5px;
    width: 100%;
}

.primary-checkbox[type=checkbox] {
    border-radius: 5px;
    border: 1px solid var(--border-color);
    height: 20px;
    width: 20px;
}

.primary-button {
    font-size: 14px;
    font-family: 'Roboto-Regular';
    color: var(--secondary-text-color);
    background-color: var(--primary-button-color);
    text-align: center;
    border: none;
    border-radius: 5px;
    padding: 5px;
    cursor: pointer;
    text-decoration: none;
}

.secondary-button {
    font-size: 14px;
    font-family: 'Roboto-Regular';
    color: var(--primary-text-color);
    background-color: var(--secondary-button-color);
    text-align: center;
    border: none;
    border-radius: 5px;
    padding: 5px;
    cursor: pointer;
    text-decoration: none;
}

.danger-button {
    font-size: 14px;
    font-family: 'Roboto-Regular';
    color: var(--secondary-text-color);
    background-color: var(--error-button-color);
    text-align: center;
    border: none;
    border-radius: 5px;
    padding: 5px;
    cursor: pointer;
    text-decoration: none;
}

.success-label {
    font-size: 14px;
    font-family: 'Roboto-Regular';
    color: var(--secondary-text-color);
    background-color: var(--success-button-color);
    text-align: center;
    border: none;
    border-radius: 5px;
    padding: 5px;
}

.error-label {
    font-size: 14px;
    font-family: 'Roboto-Regular';
    color: var(--secondary-text-color);
    background-color: var(--error-button-color);
    text-align: center;
    border: none;
    border-radius: 5px;
    padding: 5px;
}

.primary-label {
    font-size: 14px;
    font-family: 'Roboto-Regular';
    color: var(--secondary-text-color);
    background-color: var(--primary-button-color);
    text-align: center;
    border: none;
    border-radius: 5px;
    padding: 5px;
}

.secondary-label {
    font-size: 14px;
    font-family: 'Roboto-Regular';
    color: var(--primary-text-color);
    background-color: var(--secondary-button-color);
    text-align: center;
    border: none;
    border-radius: 5px;
    padding: 5px;
}

.none-btn {
    background: none;
    border: none;
    cursor: pointer;
}

.primary-img {
    height: 28px;
}

.point {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
}

.contextmenu {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 5px;
}