/* Reset CSS */
*, *::before, *::after{
    box-sizing: border-box; 
}

*{
    margin: 0; 
    padding: 0; 
}

ul[role='list'], ol[role='list']{
    list-style: none; 
}

html:focus-within{
    scroll-behavior: smooth; 
}

a:not([class]){
    text-decoration-skip-ink: auto; 
}

img, picture, svg, video, canvas{
    max-width: 100%;
    height: auto; 
    vertical-align: middle; 
    font-style: italic; 
    background-repeat: no-repeat; 
    background-size: cover;
}

input, button, textarea, select{
    font: inherit; 
}

@media (prefers-reduced-motion: reduce){
    html:focus-within {
        scroll-behavior: auto;
    }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
        transition: none;
    }
}

body, html{
    height: 100%; 
    scroll-behavior: smooth;
    
}

/* General */
*:root {
    --primary-color: #111827;
    --white-color: #ffffff;
    --light-gray-color: #9ca3af;
    --hover-background-color: #1f2937;
    --border-color: #d1d5db;
    --btn-color: #4f46e5;
    --btn-hover-color: #6366f1;
    --btn-seconday-hover-color: #f9fafb;
    --btn-error-bg: #ef4444;
    --btn-error-hover-bg: #f87171;
    --success-bg-color: #f0fdf4;
    --succes-icon-color: #4ade80;
    --success-text-color: #166534;
    --error-bg-color: #fef2f2;
    --error-icon-color: #f87171;
    --error-text-color: #b91c1c;
    --warning-bg-color: #fefce8;
    --warning-icon-color: #facc15;
    --warning-text-color: #a16207;
}

body{
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    color: var(--primary-color);
    font-size: 1rem;
    line-height: 1.5rem;
}

.ves_container{
    display: flex;
    background-color: var(--white-color);
    min-height: 100vh;
    max-height: 100vh;
    box-sizing: border-box;
}

.sidenavigation{
    display: flex;
    flex-direction: column;
    width: 18rem;
    min-width: 18rem;
    padding: 1.5rem;
    background-color: var(--primary-color);
    color: var(--light-gray-color);
    row-gap: 1.25rem;
    overflow-y: auto;
}

.sidenavigation_content {
    flex-grow: 1;
    row-gap: 20px;
    display: flex;
    flex-direction: column;
    font-weight: 500;
    justify-content: space-between;
}

.logo a {
    display: inline-block;
}

.logo img {
    max-width: 40px;
    width: 100%;
}

.nav_top {
    display: flex;
    flex-direction: column;
    row-gap: 30px;
}

.sidenavigation_content ul {
    list-style: none;
}

.sidenavigation_content li {
    margin-top: 4px;
}

.sidenavigation_content li a, .sidenavigation_content .nav_footer a {
    color: var(--light-gray-color);
    line-height: 1.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    padding: 0.5rem;
    display: flex;
    border-radius: 0.375rem;
    -moz-column-gap: 0.75rem;
    column-gap: 0.75rem;
}

.sidenavigation_content li a:hover, .sidenavigation_content li a:focus, .sidenavigation_content li a:active, .sidenavigation_content li a.current, .sidenavigation_content .nav_footer a:hover, .sidenavigation_content .nav_footer a:focus, .sidenavigation_content .nav_footer a:active {
    background-color: var(--hover-background-color);
    color: var(--white-color);
}

/* Content Screens */
.ves_content_container{
    flex-grow: 1;
    padding: 2.5rem;
    overflow-y: auto;
}

.ves_content_container h1 {
    letter-spacing: -0.025em;
    font-size: 1.875rem;
    line-height: 2.25rem;
    color: var(--primary-color);
    font-weight: 700;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 30px;
}

.ves_btn {
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    color: var(--white-color);
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    padding-left: 0.875rem;
    padding-right: 0.875rem;
    background: var(--btn-color);
    border-radius: 0.375rem;
    -webkit-appearance: button;
    background-image: none;
    border: none;
    cursor: pointer;
    margin-top: 20px;
}

.ves_btn:hover {
    background: var(--btn-hover-color);
}

.ves_btn_secondary {
    color: var(--primary-color);
    background: var(--white-color);
    border: 1px solid var(--border-color);
}

.ves_btn_secondary:hover {
    background: var(--btn-seconday-hover-color);
}

.tox-promotion, span.tox-statusbar__branding {
    display: none !important;
}

.ves_notification {
    padding: 1rem;
    border-radius: 0.375rem;
    margin-bottom: 20px;
    display: flex;
    background-color: var(--warning-bg-color);
    color: var(--warning-text-color);
}

.notif_icon svg {
    width: 1.25rem;
    height: 1.25rem;
    display: block;
    vertical-align: middle;
    color: var(--warning-icon-color);
}

.notif_text {
    margin-left: 0.75rem;
}

.notif_text p {
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.25rem;
    margin: 0;
}

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

.ves_notification.success svg{
    color: var(--succes-icon-color);
}

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

.ves_notification.error svg{
    color: var(--error-icon-color);
}

.ves_content_container hr {
    margin: 30px 0px;
    border-color: var(--border-color) !important;
    border: none;
    border-top: 1px solid;
}

.ves_content_container h2 {
    letter-spacing: -0.025em;
    font-size: 1.575rem;
    line-height: 2rem;
    color: var(--primary-color);
    font-weight: 700;
    margin-bottom: 30px;
}

.ves_btn_error {
    background: transparent;
    color: var(--btn-error-bg);
    margin: 0;
    align-self: flex-end !important;
    justify-self: flex-end !important;
    margin-left: auto;
    border: none !important;
    box-shadow: none !important;
    padding: 5px 10px;
    text-decoration: underline;
}

.ves_btn_error:hover {
    background: var(--btn-error-bg);
    color: var(--white-color);
    text-decoration: none;
}

input[type="text"], textarea, input[type="password"] {
    line-height: 1.5rem;
    font-size: 0.875rem;
    border: 1px solid var(--border-color);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    border-radius: 0.375rem;
    width: 100%;
    background-color: var(--white-color);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

input[type="text"]:focus, textarea:focus, input[type="password"]:focus {
    border-color: var(--btn-color) !important;
    outline: none !important;
}

.repeater_box {
    background-color: var(--btn-seconday-hover-color);
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tox.tox-edit-focus .tox-edit-area::before{
    border: 1px solid var(--btn-color);
}

.tox .tox-tbtn:focus::after, .tox .tox-mbtn:focus:not(:disabled)::after{
    box-shadow: 0 0 0 2px var(--btn-color) !important;
}

.tox .tox-collection--list .tox-collection__item--active:not(.tox-collection__item--state-disabled){
    background-color: var(--btn-color) !important;
}

.tox .tox-tbtn--active, .tox .tox-tbtn--enabled, .tox .tox-tbtn--enabled:focus, .tox .tox-tbtn--enabled:hover{
    background-color: var(--btn-hover-color) !important;
}

.tox .tox-tbtn--active svg, .tox .tox-tbtn--enabled svg, .tox .tox-tbtn--enabled:focus svg, .tox .tox-tbtn--enabled:hover svg{
    fill: var(--white-color) !important;
}

.tox .tox-mbtn--active, .tox .tox-mbtn:not(:disabled).tox-mbtn--active:focus{
    background-color: var(--btn-hover-color) !important;
    color: var(--white-color) !important;
}

/* Login */
.login_page .ves_container {
    justify-content: center;
    align-items: center;
    padding: 2em;
}

.ves_login_container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.form_group label {
    line-height: 1.25rem;
    font-weight: 500;
    font-size: 0.875rem;
    display: block;
    margin-bottom: 0.5rem;
}

.form_group {
    margin-bottom: 20px;
}

.ves_login_container .ves_btn {
    display: block;
    text-align: center;
    width: 100%;
}

.ves_login_container form {
    width: 100%;
    margin-top: 1.5rem;
}

.ves_login_container {
    width: 100%;
    max-width: 24rem;
}

.ves_login_container h1 {
    text-align: center;
    margin-top: 0.5rem;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
    letter-spacing: -0.025em;
}

.ves_login_logo img {
    max-width: 200px;
}

/* Dashboard */
.ves_container p:not(:last-child) {
    margin-bottom: 1rem;
}

.ves_container p + h2, .ves_container div + h2{
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.ves_container h3{
    margin-bottom: 0.5rem;
}

.ves_container a{
    color: var(--btn-color);
    text-decoration: none;
}

.ves_container a:hover{
    color: var(--btn-hover-color);
}

.endpoint_label{
    line-height: 1.25rem;
    font-weight: 700;
    font-size: 0.875rem;
    display: block;
    margin-bottom: 0.5rem;
}

.endpoint_item_url{
    background-color: var(--btn-seconday-hover-color);
    padding: 0.5rem;
    border-radius: 0.375rem;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
}

.endpoint_item_url span {
    background-color: var(--btn-color);
    color: var(--white-color);
    font-weight: 600;
    font-size: 12px;
    line-height: 15px;
    padding: 0.3rem 0.5rem;
    border-radius: 0.375rem;
    margin-right: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.endpoint_item_url p {
    font-size: 14px;
    color: var(--hover-background-color);
}

.shortcodes .endpoint_item_url span {
    background-color: var(--primary-color);
}