:root {
    --blue: #5e72e4;
    --indigo: #5603ad;
    --purple: #8965e0;
    --pink: #f3a4b5;
    --red: #f5365c;
    --orange: #fb6340;
    --yellow: #ffd600;
    --green: #2dce89;
    --teal: #11cdef;
    --cyan: #2bffc6;
    --white: #ffffff;
    --gray: #6c757d;
    --gray-dark: #32325d;
    --light: #ced4da;
    --lighter: #e9ecef;
    --primary: #e14eca;
    --secondary: #f4f5f7;
    --success: #00f2c3;
    --info: #1d8cf8;
    --warning: #ff8d72;
    --danger: #fd5d93;
    --light: #adb5bd;
    --dark: #212529;
    --default: #344675;
    --white: #ffffff;
    --neutral: #ffffff;
    --darker: black;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --themeColor: #27293D;
    --scrollColor: #27293D;
    --lightDarkTheme: #1E1E2E;
    --box-shadow: 2px 2px 5px #181717, -2px -2px 5px #181717;
    --switch-button: #1E1E2E;
    --box-shadow-switchBttn: inset 1px 1px 5px #151521, inset 1px 1px 5px #151521;
    --mySkinSelectorBackgroundColor: rgba(30, 30, 46, 0.4);
    --mySkinSelectorBackgroundColorFireFox: rgba(30, 30, 46, 0.9);
    /*--mySkinSelectorBackgroundColor: rgba(211, 215, 233, 0.15);*/
    --modalBG: #27293d;
}  


        .switch
        {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 22px;
        }
         
        .switch input
        {
            opacity: 0;
        }
         
        .slider
        {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: var(--switch-button);
            box-shadow: var(--box-shadow-switchBttn);
            -webkit-transition: .4s;
            transition: .4s;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 14px;
            width: 14px;
            left: 5px;
            bottom: 4px;
            /*background-color: var(--themeColor);*/
            -webkit-transition: .4s;
            transition: .4s;
        }


/*******************************************/

input:checked + .slider {
    background-color: var(--switch-button);
    /*box-shadow: inset 1px 1px 5px #151521, inset 1px 1px 5px #151521;*/
    box-shadow: var(--box-shadow-switchBttn);
}

            input:checked + .slider.primary:before, .slider.primary:before {
                background-color: #e14eca;
                box-shadow: 1px 1px 8px #bf42ac, -1px -1px 8px #bf42ac;
                border: 1px solid #ff5ae8;
            }

            input:checked + .slider.danger:before, .slider.danger:before {
                background-color: #fd5d93;
                box-shadow: 1px 1px 8px #a12750, -1px -1px 8px #a12750;
                border: 1px solid #fd5d93;
            }

            input:checked + .slider.info:before, .slider.info:before {
                background-color: #1d8cf8;
                box-shadow: 1px 1px 8px #1977d3, -1px -1px 8px #1977d3;
                border: 1px solid #21a1ff;
            }

            input:checked + .slider.warning:before, .slider.warning:before {
                background-color: #ff8d72;
                box-shadow: 1px 1px 8px #d97861, -1px -1px 8px #d97861;
                border: 1px solid #ffa283;
            }

            input:checked + .slider.success:before, .slider.success:before {
                background-color: #00f2c3;
                box-shadow: 1px 1px 8px #00cea6, -1px -1px 8px #00cea6;
                border: 1px solid #00ffe0;
            }

.btnSavePrefferences {
    background-image: linear-gradient(to bottom left, var(--switch-button), var(--themeColor), white) !important;
    background-color: white !important;
    background: var(--switch-button) !important;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 6px 10px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    color: var(--themeColor);
    /*color: var(--lightDarkTheme);*/
}
    .btnSavePrefferences:hover, .btnSavePrefferences:focus, .btnSavePrefferences:active, 
    .btnSavePrefferences.active, .btnSavePrefferences.active:focus, 
    .btnSavePrefferences:active:focus, .btnSavePrefferences:active:hover {
        background-image: linear-gradient(to bottom left, var(--switch-button), var(--themeColor)) !important;
        background-color: var(--switch-button) !important;
        background: var(--switch-button) !important;
        color: var(--themeColor);
        /*color: var(--lightDarkTheme);*/
    }
    .btnSavePrefferences a.active:hover, .btnSavePrefferences a.active:focus, .btnSavePrefferences a:active:hover,
    .btnSavePrefferences a:active:focus, .btnSavePrefferences a.active, .btnSavePrefferences a:active,
    .btnSavePrefferences a:focus, .btnSavePrefferences a:hover {
        color: var(--themeColor);
    }
.btnAdd {
    background-image: linear-gradient(to bottom, var(--themeColor), rgb(255 255 255 / 45%), var(--themeColor),var(--themeColor), var(--themeColor), rgb(255 255 255 / 45%), var(--themeColor)) !important;
    background-color: var(--themeColor) !important;
    /*background: var(--themeColor) !important;*/
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 6px 10px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    color: white;
    cursor: pointer;
    /*color: var(--lightDarkTheme);*/
}
    .btnAdd:active, .btnAdd:focus, .btnAdd.active, .btnAdd.active:focus, .btnAdd:hover,
    .btnAdd:focus, .btnAdd:active, .btnAdd.active, .btnAdd:active:focus, .btnAdd:active:hover, .btnAdd.active:focus,
    .btnAdd.active:hover, .navbar .navbar-nav > a.btnAdd:hover, .navbar .navbar-nav > a.btnAdd:focus,
    .navbar .navbar-nav > a.btnAdd:active, .navbar .navbar-nav > a.btnAdd.active, .navbar .navbar-nav > a.btnAdd:active:focus,
    .navbar .navbar-nav > a.btnAdd:active:hover,
    .navbar .navbar-nav > a.btnAdd.active:focus, .navbar .navbar-nav > a.btnAdd.active:hover {
        background-image: linear-gradient(to bottom, var(--themeColor), rgb(255 255 255 / 45%), var(--themeColor),var(--themeColor), var(--themeColor), rgb(255 255 255 / 45%), var(--themeColor)) !important;
        background-color: var(--themeColor) !important;
        cursor: pointer;
    }

.customBtnBoxShadow {
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 6px 10px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;

    cursor: pointer;
}
    }

/*******************************************/
/*        input:checked + .slider{
            background-color: #e14eca;
        }*/
/*        input:checked + .slider.primary {
            background-color: #e14eca;
        }*/
/*
        input:checked + .slider.danger {
                background-color: #fd5d93;
        }*/
/*
            input:checked + .slider.info {
                background-color: #1d8cf8;
            }

            input:checked + .slider.warning {
                background-color: #ff8d72;
            }


            input:checked + .slider.success {
                background-color: #00f2c3;
            }*/
input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}
         
        input:checked + .slider:before
        {
            -webkit-transform: translateX(36px);
            -ms-transform: translateX(36px);
            transform: translateX(36px);
        }


        /* Rounded sliders */
        .slider.round
        {
            border-radius: 34px;
        }
         
        .slider.round:before
        {
            border-radius: 50%;
        }



.btn-theme-icon {
    height: 1.375rem;
    min-width: 1.375rem;
    width: 1.375rem;
    padding: 0;
    font-size: 0.9375rem;
    overflow: hidden;
    position: relative;
    line-height: normal;

}

    .btn-theme-icon.round {
        border-width: 1px;
        border-radius: 30px;
    }


    
    /*
        .slider danger {
    background-color: #fd5d93;
}

.slider success {
    background-color: #00f2c3;
}

.slider info {
    background-color: #1d8cf8;
}

.slider warning {
    background-color: #ff8d72;
}*/




datalist {
    position: sticky;
    max-height: 15em;
    /*border: 0 none;*/
    overflow-x: hidden;
    overflow-y: hidden;
    left: 0px;
    border: 1px;
}

    datalist option {
        display: inline;
        color: #9A9A9A;
        font-size: 1.1em;
        padding: 0.4em 1em;
        /*background-color: #1e1e2f;*/
        cursor: pointer;
        border: 1px;
    }

        datalist option:hover, datalist option:focus {
            color: var(--themeColor);
            /*#e14eca;*/
            /*lightgray;*/
            /*#e14eca;*/
            /*background-color: #27293d;*/
            /*#036;*/
            /*#191f31;*/
            outline: 0 none;
            text-decoration: none;
        }

        .text-toogle[aria-expanded=false] .text-expanded {
            display: none;
        }

        .text-toogle[aria-expanded=true] .text-collapsed {
            display: none;
        }