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

:root{
    --yt-spec-brand-background-solid: #212121;
    --yt-spec-brand-background-primary: rgba(33, 33, 33, 0.98);
    --yt-spec-brand-background-secondary: rgba(33, 33, 33, 0.95);
    --yt-spec-general-background-a: #181818;
    --yt-spec-general-background-b: #0f0f0f;
    --yt-spec-general-background-c: #030303;
    --yt-spec-text-primary: #fff;
    --yt-spec-text-primary_2: rgb(223, 223, 223);
    --yt-spec-text-secondary: #aaa;
    --yt-spec-text-disabled: #717171;

    --yt-spec-10-percent-layer: rgba(255, 255, 255, 0.1);

    /* SEARCH */

    --ytd-searchbox-border-color: hsla(0, 0%, 53.3%, 0.4);
    --ytd-searchbox-legacy-border-color: hsl(0, 0%, 18.82%);
    --ytd-searchbox-legacy-border-shadow-color: hsla(0, 0%, 0%, 0);
    --ytd-searchbox-legacy-button-color: hsla(0, 0%, 100%, 0.08);
    --ytd-searchbox-legacy-button-border-color: hsl(0, 0%, 18.82%);
    --ytd-searchbox-legacy-button-focus-color: hsla(0, 0%, 100%, 0.08);
    --ytd-searchbox-legacy-button-hover-color: hsla(0, 0%, 100%, 0.08);
    --ytd-searchbox-legacy-button-hover-border-color: hsl(0, 0%, 18.82%);
    --ytd-searchbox-legacy-button-icon-color: hsla(0, 100%, 100%, 0.5);
    --ytd-searchbox-background: hsl(0, 0%, 7%);
    --ytd-searchbox-text-color: hsla(0, 100%, 100%, 0.88);

    /* NOTIFYS */

    --success-bg: rgba(56, 139, 253, 0.15);
    --success-border: rgba(56, 139, 253, 0.4);

    --error-bg: rgba(187, 9, 9, 0.15);
    --error-border: rgba(187, 9, 9, 0.4);

    --warning-bg: rgba(187, 128, 9, 0.15);
    --warning-border: rgba(187, 128, 9, 0.4);   


}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
    font-display: swap;
}

body,
html {
    width: 100%;
    height: 100%;
    background: var(--yt-spec-general-background-a);
}

input,button{
    outline: 0;
    border: 0;
}

a{
    text-decoration: underline;
    color: #065fd4;
    font-weight: 0;
}

.error_msg{
    margin: 20px 0 0 0;
    width: 100%;
    height: 50px;
    background: var(--error-bg);
    border: solid 1px var(--error-border);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    color: var(--yt-spec-text-primary_2);
}

.success_msg{
    margin: 20px 0 0 0;
    width: 100%;
    height: 50px;
    background: var(--success-bg);
    border: solid 1px var(--success-border);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    color: var(--yt-spec-text-primary_2);
}

.warning_msg{
    margin: 20px 0 0 0;
    width: 100%;
    height: 50px;
    background: var(--warning-bg);
    border: solid 1px var(--warning-border);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    color: var(--yt-spec-text-primary_2);
}


/* MATERIAL ICONS */

@font-face {
    font-family: 'Material Icons Outlined';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/materialiconsoutlined/v100/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2) format('woff2');
}
  
.material-icons-outlined {
    font-family: 'Material Icons Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/materialicons/v125/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
  }
  
.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}