* { /* NXD CSS Reset 2.0 */
    
    margin: 0;
    padding: 0;
    outline: 0;
    border: 0;

    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;
    text-size-adjust: none;

    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    
    box-sizing: border-box;
    
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	
}

:root {

    --default-purple: #6c47ff;
    --default-red: color(display-p3 1 .25 .39); /* #ff1b5f */ 
    --default-green: color(display-p3 .2824 .8353 .5922); /* #00d992 */ 
    --default-green-dark: color(display-p3 0.07 0.22 0.16);
    --default-green-hover: color(display-p3 0.11 0.38 0.27);
    --default-green-active: color(display-p3 0.29 1 0.69);
    --default-yellow: color(display-p3 1 0.73 0.27);
    --default-blue: #3ed1ff;
    
    --txt-primary: #c5c6dd;
    --txt-secondary: #8b8b9f;
    --txt-dark: #3c3c49;
    --txt-hover: #e3e4f5;
    --txt-light: #4a4a58;
    --txt-disabled: #353540;

    --bg-primary: #1c1c23;
    --bg-dark: #111117;

    --element-bg: #272730;
    --element-bg-hover: #30303b;
    --element-bg-active: #4e4e5d;
    --element-border: #303039;
    --element-border-hover: #41414c;
    --element-border-active: #5e5e70;
    
    --menu-bg-hover: #30303b;
    --menu-bg-active: #41414c;

    --border-radius-default: 0.65rem;
    --border-radius-small: 0.45rem;
    
    --border-light: #303039;

    --spacing-tiny: 0.25rem;
    --spacing-small: 0.5rem;
    --spacing-default: 1.25rem;
    --spacing-large: 2rem;
    --spacing-button: 1rem 1.25rem;
    --spacing-button-small: 0.65rem 1rem;

    --badge-bg: #303039;
    --badge-border: #3c3c47;

    --scrollbar-handle: rgba(255, 255, 255, 0.10);
    --scrollbar-handle-hover: rgba(255, 255, 255, 0.15);  

    --modal-backdrop: rgb(0 0 0 / 50%);

}

::-webkit-scrollbar {

    width: 20px;
    background: #1f1f27;
    border-left: 1px solid rgb(37 37 49); 

}

textarea::-webkit-scrollbar {

    width: 25px;

}

::-webkit-scrollbar-track {

    background-color: transparent;

}

::-webkit-scrollbar-thumb {
    
    background-color: var(--scrollbar-handle);
    border-radius: 20px;
    border: 7px solid transparent;
    background-clip: content-box;
    cursor: default;

}

::-webkit-scrollbar-thumb:hover {
    
    background-color: var(--scrollbar-handle-hover);

}

textarea::-webkit-scrollbar-thumb {
    
    background-color: var(--scrollbar-handle);
    border: 9px solid transparent;

}

textarea::-webkit-scrollbar-thumb:hover {
    
    background-color: var(--scrollbar-handle-hover);

}

img {

    pointer-events: none;

}

a {

    color: var(--default-green);
    text-decoration: none;
    
}

a:hover {

    color: var(--default-green);
    text-decoration: none;
    
}

a:active {

    color: var(--default-green-active);
    
}

a[href^="tel"] {

    color: inherit;
    text-decoration: none;
    
}

html,
body {

    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 100vh;
    font-family: "Geist","Arial","Helvetica Neue","Helvetica",sans-serif;
    cursor: default;
    font-size: 16px;
    line-height: 100%;
    background: var(--bg-dark);
    color: var(--txt-primary);
    transition: padding 0.5s;
    font-weight: 400;

}

.txt-green { color: var(--default-green); }
.txt-red { color: var(--default-red) !important; }

.txt-code {

    font-family: 'Geist Mono', 'Courier New', Courier, monospace;
    color: var(--default-yellow);

}

.modal-window {

    display: none;
    position: absolute;

}

.modal-wrapper {

    position: fixed;
    display: flex;
    align-items: flex-start;
    width: 100%;
    min-height: 100vh;
    height: 100%;
    top: 0;
	left: 0;
    z-index: 9;
    overflow-y: auto;
    background: var(--modal-backdrop);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);

}

.modal-container {

    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: var(--spacing-large);

}

.modal {

    display: block;
    position: relative;
    text-align: left;
    width: 30em;
    max-width: 30em;
    margin: auto;
    padding: var(--spacing-large);
    background: var(--bg-primary);
    box-shadow: inset 0px 0px 0px 1px var(--border-light);
    color: var(--txt-primary);
    border-radius: var(--border-radius-default); 
    transition: all ease-out 0.15s;

}

.modal-window-top {

    z-index: 99 !important;

}

.modal-scale {

    transform: scale(0.9);

}

.modal-head {

    display: block;
    color: var(--txt-primary);
    font-weight: 500;
    margin-bottom: var(--spacing-default);
    line-height: 120%;

}

.modal-head svg {

    margin-right: 0.5em;

}

.modal-desc {

    display: block;
    color: var(--txt-secondary);
    margin-bottom: var(--spacing-default);
    line-height: 120%;

}

.modal-desc:last-child {

    margin-bottom: 0;

}

.modal-progress-wrapper {

    display: block;
    width: 100%;
    background: var(--txt-light);
    height: 0.5em;
    border-radius: 0.5em;

}

.modal-progress-wrapper-bar {

    display: block;
    background: var(--default-green);
    height: 0.5em;
    border-radius: 0.5em;
    transition: width 0.5s;

}

#form-login {

    display: block;

}

#form-register {

    display: none;

}

.login-wrapper {

    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100vw;
    height: 100vh;

}

.login-ui {

    flex-basis: 50%;
    height: 100%;
    padding: 7%;
    background: var(--bg-dark);
    color: var(--txt-primary);
    border-right: 1px solid var(--border-light);
    align-content: center;

}

.login-ui-form {

    display: block;
    position: relative;
    text-align: left;
    max-width: 30em;
    margin: auto;

}

.login-ui-form-head {

    padding: 1.5em var(--spacing-large);
    background: var(--bg-primary);
    box-shadow: inset 0px 0px 0px 1px var(--border-light);
    color: var(--txt-primary);
    border-top-left-radius: var(--border-radius-default);
    border-top-right-radius: var(--border-radius-default);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: -1px;

}

.login-ui-form-head-title {

    display: block;
    color: var(--txt-primary);
    font-weight: 500;
    line-height: 120%;

}

.login-ui-form-head-title svg {

    color: var(--default-green);
    margin-right: 0.5em;

}

.login-ui-form-content {

    padding: var(--spacing-large);
    background: var(--bg-primary);
    box-shadow: inset 0px 0px 0px 1px var(--border-light);
    color: var(--txt-primary);
    border-radius: var(--border-radius-default); 
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: var(--border-radius-default);
    border-bottom-right-radius: var(--border-radius-default);    

}

.login-hero {

    flex-basis: 50%;
    height: 100%;
    padding: 7%;
    background: var(--bg-primary);
    color: var(--txt-primary);
    align-content: center;

}

.login-hero-logo {

    display: block;
    margin-bottom: var(--spacing-default);

}

.login-hero-logo img {

    display: block;
    max-width: 9em;
    
}

.login-hero-title {

    display: inline-block;
    line-height: 120%;
    font-weight: 800;
    font-size: 1.5em;
    color: var(--default-green);
    margin-bottom: var(--spacing-default);

}

.login-hero-title-sub {

    display: block;
    line-height: 120%;
    font-weight: 500;
    color: var(--txt-secondary);
    margin-bottom: var(--spacing-default);

}

.login-hero-title-bullet-point {

    display: block;
    line-height: 120%;
    font-weight: 500;
    color: var(--txt-primary);
    margin-bottom: var(--spacing-tiny);

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;      

}

.login-hero-title-bullet-point svg {

    color: var(--default-green);
    margin-right: 0.5em;

}

.login-hero-example {

    display: block;
    line-height: 120%;
    font-weight: 500;
    color: var(--txt-primary);
    margin-top: var(--spacing-default);

}

.login-create-account-wrapper {

    display: block;

}

.login-create-account-head {

    display: block;
    color: var(--txt-light);
    line-height: 120%;
    font-size: 0.85em;

}

.login-create-account-action {

    display: block;
    color: var(--txt-secondary);
    line-height: 120%;
    font-size: 0.85em;
    font-weight: 600;
    cursor: pointer;

}

.login-create-account-action:hover {

    color: var(--txt-primary);

}

.login-create-account-action:active {

    color: #ffffff;

}

.btn-primary {

    color: var(--default-green);
    background: var(--default-green-dark);
    box-shadow: inset 0px 0px 0px 1px var(--default-green), 0px 0px 0px 0px color(display-p3 0.28 0.84 0.59 / 0.25);
    transition: box-shadow 0.5s, background 0.5s;
    text-align: center;
    cursor: pointer;

}

.btn-primary:hover {

    color: var(--default-green);
    background: var(--default-green-hover);
    box-shadow: inset 0px 0px 0px 1px var(--default-green), 0px 0px 0px 0px color(display-p3 0.28 0.84 0.59 / 0.25);
    transition: box-shadow 0s, background 0s;

}

.btn-primary:active {

    color: var(--default-green-dark);
    background: var(--default-green);
    box-shadow: inset 0px 0px 0px 1px var(--default-green), 0px 0px 50px 0px color(display-p3 0.28 0.84 0.59 / 0.25);
    transition: box-shadow 0s, background 0s;

}

.btn-secondary {

    color: var(--txt-primary);
    background: var(--element-bg);
    box-shadow: inset 0px 0px 0px 1px var(--element-border);
    padding: var(--spacing-button);
    text-align: center;
    border-radius: var(--border-radius-small);
    cursor: pointer;
    transition: box-shadow 0.5s, background 0.5s;

}

.btn-secondary:hover {

    color: var(--txt-primary);
    background: var(--element-bg-hover);
    box-shadow: inset 0px 0px 0px 1px var(--element-border-hover);
    transition: box-shadow 0s, background 0s;

}

.btn-secondary:active {

    color: var(--txt-primary);
    background: var(--element-bg-active);
    box-shadow: inset 0px 0px 0px 1px var(--element-border-active);
    transition: box-shadow 0s, background 0s;

}

.btn-fullwidth {

    width: 100%;
    padding-left: 0;
    padding-right: 0;

}

.btn-disabled,
.btn-disabled:hover,
.btn-disabled:active {

    background: none !important;
    color: var(--txt-disabled) !important;
    pointer-events: none !important;

}

.btn-regular {

    display: inline-block;
    padding: var(--spacing-button);
    border-radius: var(--border-radius-small);
    font-weight: 500;

}

.btn-regular svg {

    margin-right: 0.25em;

}

.header {

    display: flex;
    align-items: center;
    gap: var(--spacing-default);
    background: var(--bg-primary);
    padding: var(--spacing-default) var(--spacing-large);
    border-bottom: 1px solid var(--border-light);

}

.header-logo {

    display: block;
    width: 6em;
    margin-top: var(--spacing-tiny);
    flex-shrink: 0;
    
}

.header-logo img {

    display: block;
    width: 100%;
    
}

.header-items {

    flex-basis: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-default);
    color: var(--txt-secondary);
}

.header-credits {

    display: inline-block;
    padding: var(--spacing-button-small);
    font-size: 0.85em;
    text-transform: uppercase;
    color: var(--txt-primary);
    background: var(--badge-bg);
    box-shadow: inset 0px 0px 0px 1px var(--badge-border);
    border-top-left-radius: var(--border-radius-small);
    border-top-right-radius: 0;
    border-bottom-left-radius: var(--border-radius-small);
    border-bottom-right-radius: 0;

}

.header-credits-count {

    font-weight: 500;
    color: #ffffff;

}

.header-credits-add {

    display: inline-block;
    padding: var(--spacing-button-small);
    font-size: 0.85em;
    font-weight: 500;
    text-transform: uppercase;
    border-top-left-radius: 0;
    border-top-right-radius: var(--border-radius-small);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: var(--border-radius-small);
    cursor: pointer;
    margin-left: -1px;

}

.wrapper {

    display: flex;
    align-items: stretch;
    min-height: 100%;

}

.sidebar {

    display: flex;
    flex-direction: column;
    flex-basis: 18em;
    flex-shrink: 0;
    gap: var(--spacing-default);
    background: var(--bg-dark);
    padding: var(--spacing-large);
    min-height: 100%;
    border-right: 1px solid var(--border-light);
    z-index: 9;

}

.sidebar-navigation {

    display: block;

}

.sidebar-navigation-item {

    display: block;
    background: var(--bg-dark-secondary);
    color: var(--txt-primary);
    padding: var(--spacing-button);
    border-radius: var(--border-radius-small);
    margin-bottom: var(--spacing-small);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.5s, color 0.5s;

}

.sidebar-navigation-item-alt {

    margin-bottom: 0;

}

.sidebar-navigation-item svg {

    margin-right: 0.5em;

}

.sidebar-navigation-item:hover {

    background: var(--menu-bg-hover);
    color: var(--txt-primary);
    transition: background 0s, color 0s;

}

.sidebar-navigation-item:active {

    background: var(--menu-bg-active);
    color: var(--txt-primary);
    transition: background 0s, color 0s;

}

.sidebar-navigation-item-selected,
.sidebar-navigation-item-selected:hover,
.sidebar-navigation-item-selected:active {

    position: relative;
    color: var(--default-green);
    background: var(--default-green-dark);
    box-shadow: inset 0px 0px 0px 1px var(--default-green), 0px 0px 100px 0px color(display-p3 0.28 0.84 0.59 / 0.25);
    z-index: 9;
    transition: box-shadow 0.5s, color 0s;

}

.sidebar-navigation-separator {

    display: block;
    margin-bottom: var(--spacing-default);
    padding-bottom: var(--spacing-default);
    border-bottom: 1px solid var(--border-light);

}

.sidebar-footer {

    margin-top: auto;

}

.sidebar-footer-info {

    display: block;
    color: var(--txt-dark);
    font-size: 0.85em;
    font-weight: 500;

}

.sidebar-footer-info a {

    text-decoration: underline;
    color: var(--txt-dark);

}

.sidebar-footer-info a:hover {

    text-decoration: underline;
    color: var(--txt-dark);

}

.sidebar-footer-info a:active {

    text-decoration: underline;
    color: var(--txt-secondary);

}

.sidebar-footer-logo {

    display: block;
    width: 5em;
    margin-bottom: var(--spacing-default);

}

.sidebar-footer-logo img {

    display: block;
    width: 100%;

}

.content {

    flex-basis: 100%;
    background: var(--bg-primary);
    padding: var(--spacing-large);

}

.section {

    max-width: 60em;

}

.section-box {

    display: block;
    margin-bottom: var(--spacing-large);

}

.video-grid {

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-default);

}

.video-item {

    display: block;
    width: 100%;

}

.video-item-preview {

    display: block;
    background: none;
    color: var(--txt-primary);
    border-radius: var(--border-radius-small);
    width: 100%;
    aspect-ratio: 9/12;
    overflow: hidden;

}

.video-preview {

    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--border-radius-small);
    transition: transform 0.2s ease;

}

.video-preview:hover {

    transform: scale(1.02);

}

.video-item-generating {

    background: none;
    box-shadow: inset 0px 0px 0px 1px var(--default-green);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--spacing-large);

}

.video-item-generating-icon {

    display: block;
    text-align: center;
    margin-bottom: var(--spacing-small);

}

.video-item-generating-icon img {

    max-width: 2em;

}

.video-item-generating-text {

    display: block;
    color: var(--default-green);
    font-weight: 500;
    text-align: center;
    font-size: 0.85em;

}

.video-item-generating-text-sub {

    display: block;
    color: var(--txt-secondary);
    text-align: center;
    margin-top: var(--spacing-small);
    font-size: 0.75em;
    line-height: 120%;

}

.video-item-controls {

    display: flex;
    gap: var(--spacing-small);
    margin-top: var(--spacing-small);

}

.head-title {

    display: block;
    font-size: 1.25em;
    font-weight: 500;
    margin-bottom: var(--spacing-default);
    color: var(--txt-primary);
    line-height: 120%;

}

.head-title svg {

    color: var(--default-green);
    margin-right: 0.25em;

}

.head-title-alt {

    margin-bottom: 0;

}

.head-desc {

    display: block;
    color: var(--txt-secondary);
    line-height: 120%;

}

.section-title {

    display: block;
    font-size: 1em;
    font-weight: 500;
    margin-bottom: var(--spacing-tiny);
    color: var(--txt-primary);
    line-height: 120%;

}

.section-desc {

    display: block;
    font-size: 0.85em;
    margin-bottom: var(--spacing-small);
    color: var(--txt-light);
    line-height: 120%;

}

.ctrl-wrapper {

    display: block;
    margin-bottom: var(--spacing-default);

}

.ctrl-wrapper-split {

    display: flex;
    align-items: center;
    gap: var(--spacing-default);
    margin-bottom: var(--spacing-default);

}

.ctrl-wrapper-split div {

    flex-basis: 50%;

}

.ctrl-wrapper:last-child,
.ctrl-wrapper-split:last-child {

    margin-bottom: 0;

}

.ctrl-head {

    display: block;
    font-size: 0.85em;
    margin-bottom: var(--spacing-tiny);
    color: var(--txt-secondary);
    line-height: 120%;
    font-weight: 500;

}

.ctrl-txt {

    display: block;
    width: 100%;
    padding: var(--spacing-button);
    background: var(--element-bg);
    box-shadow: inset 0px 0px 0px 1px var(--element-border);
    border-radius: var(--border-radius-small);
    color: var(--txt-primary);  
    font-size: 1em;
    transition: box-shadow 0.5s, background 0.5s;
    
}

.ctrl-txt:hover {

    box-shadow: inset 0px 0px 0px 1px var(--element-border-hover);
    transition: box-shadow 0s;
    
}

.ctrl-txt:focus {

    box-shadow: inset 0px 0px 0px 1px var(--element-border-active);
    transition: box-shadow 0s;
    
}

.ctrl-file-input {

    display: none;

}

.ctrl-highlight {

    color: var(--default-red) !important;
    box-shadow: inset 0px 0px 0px 1px var(--default-red) !important;
    transition: box-shadow 0.5s;

}

.ctrl-message {

    display: none;

}

.ctrl-message-wrapper {

    display: flex;
    gap: var(--spacing-small);
    align-items: center;
    width: 100%;
    padding: var(--spacing-default);
    background: var(--element-bg);
    box-shadow: inset 0px 0px 0px 1px var(--element-border);
    border-radius: var(--border-radius-small);
    color: var(--txt-primary);  
    margin-bottom: var(--spacing-default);

}

.ctrl-message-icon {

    flex-shrink: 0;
    color: var(--default-yellow);

}

.ctrl-message-icon-secondary {

    color: var(--txt-secondary);

}

.ctrl-message-text {

    font-size: 0.85em;
    color: var(--txt-primary);
    line-height: 120%;

}

.ctrl-disabled {

    pointer-events: none !important;

}

.input-file {

    display: flex;
    gap: var(--spacing-default);
    align-items: center;
    width: 100%;
    padding: var(--spacing-default);
    background: var(--element-bg);
    box-shadow: inset 0px 0px 0px 1px var(--element-border);
    border-radius: var(--border-radius-small);
    color: var(--txt-primary);  
    cursor: pointer;  
    transition: box-shadow 0.5s, background 0.5s;

}

.input-file:hover,
.input-file.drag-over {

    background: var(--element-bg-hover);
    box-shadow: inset 0px 0px 0px 1px var(--element-border-hover);
    transition: box-shadow 0s, background 0s;

}

.input-file:active {

    background: var(--element-bg-hover);
    box-shadow: inset 0px 0px 0px 1px var(--element-border-active);
    transition: box-shadow 0s, background 0s;

}

.input-file:hover .input-file-button,
.input-file.drag-over .input-file-button {

    color: var(--default-green);
    background: var(--default-green-hover);
    box-shadow: inset 0px 0px 0px 1px var(--default-green), 0px 0px 0px 0px color(display-p3 0.28 0.84 0.59 / 0.25);
    transition: box-shadow 0s, background 0s; 

}

.input-file:hover:active .input-file-button,
.input-file.drag-over:active .input-file-button {

    color: var(--default-green-dark);
    background: var(--default-green);
    box-shadow: inset 0px 0px 0px 1px var(--default-green), 0px 0px 50px 0px color(display-p3 0.28 0.84 0.59 / 0.25);
    transition: box-shadow 0s, background 0s;

}

.input-file-icon {

    flex-shrink: 0;
    color: var(--default-green);
    margin-left: var(--spacing-small);

}

.input-file-meta {

    flex-basis: 100%;

}

.input-file-meta-name {

    display: block;
    line-height: 120%;
    color: var(--txt-primary);
    font-size: 0.85em;

}

.input-file-meta-desc {

    display: block;
    line-height: 120%;
    color: var(--txt-secondary);
    font-size: 0.85em;

}

.input-file-button {

    flex-shrink: 0;
    padding: var(--spacing-button-small);
    font-size: 0.85em;
    font-weight: 500;
    border-radius: var(--border-radius-small);
    cursor: pointer;

}

.notice {

    display: flex;
    gap: var(--spacing-default);
    align-items: center;
    width: 100%;
    padding: var(--spacing-large);
    background: none;
    border: 2px dashed var(--element-border);
    border-radius: var(--border-radius-default);
    color: var(--txt-primary);  

}

.notice-icon {

    flex-shrink: 0;
    color: var(--default-yellow);

}

.notice-text {

    flex-basis: 100%;
    color: var(--txt-primary);
    line-height: 120%;

}

.notice-text-head {

    display: block;
    color: var(--txt-primary);
    line-height: 120%;
    font-weight: 500;
    margin-bottom: var(--spacing-tiny);

}

.notice-text-sub {

    display: block;
    font-size: 0.85em;
    color: var(--txt-secondary);
    line-height: 120%;
    font-weight: 500;

}

.notice-button {

    flex-shrink: 0;

}

@media screen and (max-width: 1200px) {

    .login-hero,
    .login-ui {

        padding: 5%;

    }

    .sidebar {

        flex-basis: max-content;

    }

    .sidebar-navigation-item {

        padding: var(--spacing-default);

    }

    .sidebar-navigation-item-alt {

        margin-bottom: auto;

    }    

    .sidebar-navigation-item-text {

        display: none;

    }

    .sidebar-navigation-item-icon svg {

        margin-right: 0;

    }

    .sidebar-footer {

        display: none;

    }

}

@media screen and (max-width: 1000px) {

    .login-wrapper {

        flex-direction: column-reverse;
        align-items: normal;
        height: auto;

    }

    .login-hero {

        padding: 8%;

    }    

    .login-ui {

        padding: 8%;
        border-right: none;
        border-top: 1px solid var(--border-light);

    }  
    
    .login-ui-form {

        max-width: 100%;

    }

}

@media screen and (max-width: 900px) {

    html,
    body {

        font-size: 14px;

    }

}

@media screen and (max-width: 800px) {

    .video-grid {

        grid-template-columns: repeat(3, 1fr);

    }  
    
}

@media screen and (max-width: 700px) {

    .wrapper {

        flex-direction: column-reverse;

    }

    .sidebar {

        position: fixed;
        bottom: 0;
        width: 100%;
        padding: var(--spacing-default) 0;
        min-height: min-content;
        border-right: none;
        border-top: 1px solid var(--border-light);

    }

    .sidebar-navigation {

        display: flex;
        justify-content: space-evenly;

    }

    .sidebar-navigation-separator {

        display: none;

    }    

}

@media screen and (max-width: 600px) {

    .header-item-mail {

        display: none;

    }

    .notice {

        flex-direction: column;
        text-align: center;
        align-items: center;

    }

}

@media screen and (max-width: 500px) {

    .video-grid {

        grid-template-columns: repeat(2, 1fr);

    }      

}