:root {
    --gr-border: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #ffa470 100%)
}

#theme.dark4 {
    background-color: #4158D0 !important;
    background-image: linear-gradient(90deg, #4158D0 0%, #C850C0 46%, #ffa470 100%) !important;
}
/* navbar */
.dark4 .my_navbar {
    background-color: #00000090 !important;
}
.dark4 .my_navbar .item:hover {
    background: #ffffff1c;
    cursor: pointer;
}
.dark4 .bg_color_light, .dark4 .body, .dark4 #right_part,.dark4 #text_compare .box {
    background-color: #00000090 !important;
}
.dark4 .txt_color {
    color: #ffffffc0 !important;
}


.dark4 .btn_color {
    background-image: linear-gradient(135deg, #4c0ba0 0%, #f3618d 100%) !important;
    color: #ffffff !important;
}

.dark4 .btn_color i {
    color: #ffffffc0 !important;
}

.dark4 .btn_color:hover {
    background-image: linear-gradient(43deg, #7a5ff1  51%, #7d45b2  100%) !important;
}

.dark4 .ui.label.button.icon {
    background: #00000033 !important;
    color: #ffffffc0;
}

.dark4 .btn_color_light {
    background: #00000034 !important;
    color: #ffffffc0 !important;
}

.dark4 .btn_color_light:hover {
    background-image: linear-gradient(43deg, #7a5ff1  51%, #7d45b2  100%) !important;
}
.dark4 input, .dark4 textarea{
    background-color: #00000052 !important;  
    /* background-image: linear-gradient(to right, #4776E6 0%, #8E54E9  51%, #4776E6  100%) !important; */
    border: 1px solid rgba(255, 255, 255, 0.158) !important;
    color: #ffffffc0 !important;
    /* border-image: var(--gr-border) !important;
    border-width: 1px;
    border-style: solid; */
}

.dark4 .text_fixed_color {
    color: #ffffffc0 !important;
}
.CodeMirror-dialog.CodeMirror-dialog-top {
    background: white;
}

.dark4 .CodeMirror{
    /* border-image: var(--gr-border) !important;
    border-width: 1px;
    border-style: solid; */
    border: 1px solid rgba(255, 255, 255, 0.158) !important;
    border-radius: 7px;
    background-color: #00000052 !important;
}


.dark4 .CodeMirror-gutters, .dark4 .CodeMirror-gutter {
    background: none !important;
    border: none;
}


/* Change the focus color for Semantic UI input fields */
.dark4 input:focus,
.dark4 textarea:focus,
.dark4 .ui.selection.active.dropdown,
.dark4 .ui.selection.active.dropdown .menu {
    /* border-image: var(--gr-border) !important; 
    border-width: 1px;
    border-style: solid; */
    /* border: 1px solid white !important; */
    box-shadow: none !important
}

.dark4 label {
    color: #ffffff !important;
}


.dark4 i {
    color: #ffffffc0;
}

.dark4 #setting_box label {
    color: #ffffffc0 !important;
}

.dark4 #md_type .text {
    color: #ffffffc0 !important;
}

.dark4 .text {
    color: #ffffffc0;
}

.dark4 .cm-s-material-ocean .cm-property {
    color: #ffffffc0 !important;
}

.dark4 .CodeMirror-linenumber {
    color: #c49ee7 !important;
}

.dark4 #save_data_rec small {
    color: #ddc5f3 !important;
}

.dark4 .mini_menu {
    background: #7d45b2;
}

.dark4 .ui.dropdown.selection, .dark4 .ui.menu .dropdown.item .menu {
    background: #00000052 !important;
    border: 1px solid rgba(255, 255, 255, 0.158) !important;
}

.dark4 .menu.transition {
    background: #000000 !important;
    border: 1px solid rgba(255, 255, 255, 0.158) !important;
}

.dark4 .menu.transition .item:hover, .dark4 .ui.menu .ui.dropdown .menu>.item:hover {
    background: #1d1d1d !important;
}

.dark4 .ui.dropdown i {
    color: #ffffffc0;
}

.dark4 .ui.selection.dropdown .menu>.item{
    border-top: 1px solid rgba(255, 255, 255, 0.158) !important;
}

.dark4 .ui.dropdown .menu .item {
    color: #ffffffc0 !important;
}
.dark4 .ui.dropdown .text {
    color: #ffffffc0 !important;
}
.dark4 .ui.menu .ui.dropdown .menu>.item {
    color: #ffffffc0 !important;
}
.dark4 .CodeMirror-merge-l-chunk {
    background: #ffffff10 !important;
    border: none;
}
.dark4 #grid_line {
    color: #ffffff15 !important;
}
.dark4 .icon.grey {
    color: white !important;
}
.dark4 .ui.message {
    box-shadow: none !important;
    background: rgba(0, 0, 0, 0.11) !important;
    color: rgba(255, 255, 255, 0.76)
}
.dark4 .ui.info.message .header{
    color: rgba(86, 255, 255, 0.692) !important;
}
.dark4 .ui.info.message {
    color: rgba(86, 255, 255, 0.692) !important;
}

.dark4 #bg-img-modal {
    border: 1px solid rgba(255, 255, 255, 0.158) !important;
    border-radius: 7px;
}

.dark4 .ui.menu .item {
    color: white;
}

.dark4 .mini_setting {
    background: #000000 !important;
}