:root {
    --bg-main: #ececec;
    --bg-header: #ffffff;
    --bg-menu: #ffffff;
    --bg-login: #f6f6f6;
    --bg-menu-hover: #9bbdf8;
    --bg-sidebar: #ffffff;
    --bg-editor: #fff;
    --bg-tab: #e4ebff;
    --bg-tab-active: #cbd7ff;
    --bg-tab-hover: #d6ddff;
    --bg-tab-sidebar: #e4ebff;


    --bg-modal: #fff;
    --bg-modal-btn: #0f6cff;


    --bg-setting: #e4ebff;
    --bg-setting-btn: #aac0ff;
    --bg-setting-font: #ffffff;
    --bg-menu-mobile: #467de8;
    --bg-terminal: #ffffff;
    --bg-terminal-menu: #f5f8ff;

    --border-color: #e3e3e3;
    --icon-color: #171717;
    --text-primary: #171717;
    --bg-hover: #e5eff6;
    --tooltip: #c0d0ff;
    --menuWorkspace: #ffffff;
    --menuWorkspace-ac: #0060c0;


    --message: #3498db;
    --message-text: #ffffff;
    --message-border: #3498db;

    --success: #22c55e;
    --succes-text: #ffffff;
    --succes-border: #22c55e;

    --error: #f1aeb5;
    --error-text: #ffffff;
    --error-border: #f1aeb5;

    --warning: #f1c40f;
    --warning-text: #ffffff;
    --warning-border: #f1c40f;

    --primary-color: #2072EF;
    --secondary-color:#161943;
}


/*
===================
----header Menu----
===================
*/
.link-active {
    background: radial-gradient(124.68% 74.52% at 50.43% 49.09%, #4772ff 0%, #6583ff 100%);
    opacity: 1 !important;
    color: white !important;
}

.link-active:hover {
    background: radial-gradient(124.68% 74.52% at 50.43% 49.09%, #4772ff 0%, #659bff 100%) !important;
    border: 1px solid transparent !important;
}

.header-nav__manu-link:hover {
    background: var(--bg-tab-active);
    border: 1px solid #0356a9;
    opacity: 1;
}

.header__login-btn:hover {
    background: var(--bg-tab-active);
    border: 1px solid #0356a9;
}


/*
===============
----Run Btn----
===============
*/
.editor__top-btn-run {
    background: radial-gradient(123.16% 73.61%, rgb(57, 120, 255) 0%, rgb(60, 119, 255) 68.1%);
    box-shadow: rgba(16, 24, 40, 0.1) 0px 2.4px 4.8px -1.2px, rgba(16, 24, 40, 0.06) 0px 1.2px 2.4px -1.2px;
    border: 0.5px solid rgba(76, 87, 108, 0.22);
    color: white;
}

.editor__top-btn-run:hover {
    background: radial-gradient(123.16% 73.61%, rgb(60, 117, 227) 0%, rgb(46, 102, 224) 68.1%);
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 4px -1px, rgba(0, 0, 0, 0.14) 0px 4px 5px 0px, rgba(0, 0, 0, 0.12) 0px 1px 10px 0px;
}


/*
=================
-----Tab Btn-----
=================
*/
.editor__file-btn {
    border: 1px solid rgb(174, 191, 234);
}

.editor__file-btn:hover {
    border: 1px solid rgb(127, 156, 252);
    background-color: var(--bg-tab-hover);
}

.editor__file-btn.active {
    background-color: var(--bg-tab-active);
    border: 1px solid #9db8ff;
    transition: all 0.2s ease;
}

.editor__file-btn.active:hover {
    background-color: var(--bg-tab-active);
    border: 1px solid #7895e8;
}