html, body {
    background: #fff;
    color: #333;
}

.header {
    background-color: #fff;
}

.footer {
    background: #f2f2f2;
}

.active {
    color: #666;
}

.nav__link {
    color: #333;
}

.darkmode {
    display: none
}
    
.fas, .fa-solid {
    color: #333;
}
    
@media screen and (min-width: 1023px) {
    .nav__link {
         color: #767676;
    }
    
    .dropdown__menu {
        background: #fff;
    }
}

@media screen and (max-width: 1023px) {
    .nav {
        background-color: #f2f2f2;
        }
}


/* Avatar Generator */


.svga-no-touch.svga-boys .svga-bodyzones:hover, .svga-boys .svga-bodyzones.svga-active, .svga-no-touch.svga-boys .svga-blocks:hover, .svga-boys .svga-blocks.svga-active, .svga-no-touch.svga-girls .svga-bodyzones:hover, .svga-girls .svga-bodyzones.svga-active, .svga-no-touch.svga-girls .svga-blocks:hover, .svga-girls .svga-blocks.svga-active{
    color: #333;
}

.svga-light .svga-elements {
    background-color: #ecf0f1b3;
}

#svga-container.svga-light, .svga-light .svga-glob-controls, .svga-light .svga-col-left .sp-replacer, .svga-light #svga-footermenu ul li ul li, .svga-light #svga-start-overlay, .svga-light #svga-gender, .svga-light #svga-dialog, .svga-light #svga-gravatar, .svga-light #svga-message, .svga-light #svga-gravatar-message, .svga-light #svga-ios, .svga-light #svga-share-block {
    background-color: #ffffff;
}

.svga-light .svga-colors-set > div, .svga-light .svga-elements {
    border-color: #eeeeee;
}

img.smallmyicon {
    filter:opacity(0.3);
}

.svga-active img.smallmyicon, .svga-bodyzones:hover img {
    filter: invert(44%) sepia(41%) saturate(2323%) hue-rotate(14deg) brightness(100%) contrast(95%);
}

svg.svga-control-icon {
    filter: invert(44%) sepia(41%) saturate(2323%) hue-rotate(14deg) brightness(100%) contrast(95%);
}

.svga-col-left {
    background: #ecf0f1;
}

#svga-container.svga-boys, #svga-container.svga-girls {
    border-color: #fff;
}

.svga-light #svga-dialog-ok, .svga-light #svga-dialog-cancel, .svga-light #svga-gravatar-ok, .svga-light #svga-gravatar-cancel, .svga-light .svga-close {
    border-color: #ecf0f1;
    background: #ea8a00;
    color: #fff;
    font-weight: 900;
}

svg.svga-menu-icon {
    filter: brightness(0.3);
}

.svga-light #svga-footermenu ul li ul li {
    background-color: #f7f7f7;
}

.svga-no-touch.svga-light .svga-blocks:hover,  .svga-no-touch.svga-dark .svga-blocks:hover {
    background: none;
}

.svga-light .svga-blocks.svga-active, .svga-light .svga-blocks.svga-active:hover, .svga-dark .svga-blocks.svga-active, .svga-dark .svga-blocks.svga-active:hover
{
    background: #ecf0f1 !important;
}



div#svga-start-overlay {
    background: url(/tools/avatar-generator/myicons/collage.JPG) #DDD !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    filter: opacity(1) !important;
}

div#svga-gender {
    background-color: #b65818 !important;
    color: #fff;
    box-shadow: 0px 0px 35px 25px #ffffff;
}

.svga-light .svga-icon-boy, .svga-light .svga-icon-girl {
    fill: #fff;
}

#svga-start-boys:hover .svga-icon-boy {
    fill: #7ed3ff;
}

#svga-start-girls:hover .svga-icon-girl {
    fill: #f493f4;
}

#svga-loader {
    font-size: 20px;
    font-color: #fff;
    height: fit-content;
    width: 240px;
    background-color: #b65818 !important ;
    box-shadow: 0px 0px 35px 25px #ffffff;
    text-align: center;
    padding: 20px 10px 40px 10px !important;
}

#svga-container.svga-boys, #svga-container.svga-girls, pixie-editor {
    box-shadow: 0 0 30px #0000005c;
}


/* Photo Editor */

.ri-xl {
    color: #000 !important;
}
       
     
       
.layout .sidebar .menu .menu-item a {
    color: #000000 !important;
}
       
.sidebar {
    background-color: #ffffff !important;
}

.darko{
    display: none !important;
}

.be-dark-mode .canvas-wrapper {
    background-color: #fff !important;
}

toolbar.ng-star-inserted {
    color: #333 !important;
    background: #f4f5f6 !important;
    box-shadow: 2px 3px 24px -10px rgb(117 117 117 / 64%) !important;
}

.mat-button.mat-accent[disabled], .mat-button.mat-primary[disabled], .mat-button.mat-warn[disabled], .mat-button[disabled][disabled], .mat-icon-button.mat-accent[disabled], .mat-icon-button.mat-primary[disabled], .mat-icon-button.mat-warn[disabled], .mat-icon-button[disabled][disabled], .mat-stroked-button.mat-accent[disabled], .mat-stroked-button.mat-primary[disabled], .mat-stroked-button.mat-warn[disabled], .mat-stroked-button[disabled][disabled] {
    color: rgb(145 145 145 / 30%) !important;
}

.ri-xl {
    color: #5a5757 !important;
}

.sidebar {
    background-color: #f4f5f6 !important;
}

.sidebar {
    color: #6f6f6f !important;
}

.layout.fixed-sidebar .sidebar {
    border-right: 1px solid #f4f5f6;
}

.layout .sidebar .menu .menu-item a {
    color: #5b5b5b !important;
}

.layout .sidebar .menu .menu-item a:hover, .layout .sidebar .menu .menu-item a:hover .menu-title, .layout .sidebar .menu .menu-item a:hover .menu-icon {
    color: #000000 !important;
}

.layout .sidebar .menu .menu-item a:hover::after {
    border-color: #000000 !important;
}

.layout .sidebar .menu > ul > .sub-menu > .sub-menu-list {
    background-color: #eaeaea !important;
}

.sidebar .sidebar-layout .sidebar-header {
    border-bottom: 0px solid rgb(210 210 210 / 30%) !important;
}

.sidebar .sidebar-layout .sidebar-footer {
    border-top: 1px solid rgb(210 210 210 / 30%) !important;
}

.layout .sidebar.has-bg-image:not(.collapsed) .menu > ul > .sub-menu > .sub-menu-list {
    background-color: rgb(212 212 212 / 60%) !important;
}

editor-controls {
    box-shadow: 2px -3px 24px -10px rgb(117 117 117 / 64%) !important;
    background: #f4f5f6;
}

.mat-icon {
    fill: #666666 !important;
}

navigation-bar .separator {
    background-color: #cdcdcd !important;
}

pixie-editor button.no-style {
    color: #777 !important;
}

editor-controls .button-with-image {
    background-color: #e6e6e7 !important;
    color: #303030 !important;
}


.mat-fab, .mat-flat-button, .mat-mini-fab, .mat-raised-button {
    background-color: #797878 !important;
}

.mat-fab.mat-accent, .mat-flat-button.mat-accent, .mat-mini-fab.mat-accent, .mat-raised-button.mat-accent {
    background-color: #0464d1 !important;
}

pixie-editor .input-container .fake-input, pixie-editor .input-container input, pixie-editor .input-container select, pixie-editor .input-container textarea {
    color: #333 !important;
    caret-color: #333 !important;
    border: 1px solid rgb(81 81 81 / 38%) !important;
    background-color: #b8b8b836 !important;
}

.mat-checkbox-frame {
    background-color: #4848486b !important;
}

crop-drawer .custom-ratio-container .input-container>input {
    height: 20px !important;
}

google-fonts-panel {
    background-color: #fffbfb !important;
    color: #e4e2e2 !important;
}


google-fonts-panel .header {
    color: rgb(60 60 60);
    background-color: #fefbfb !important;
}

google-fonts-panel .many-inputs .input-container input {
    background-color: #efeded;
    border-color: rgb(135 132 132 / 12%) !important;
}

text-font-selector {
    border: 1px solid rgb(98 94 94 / 19%) !important;
}

editor-controls .round-action-button {
    border: 1px solid rgb(10 10 10 / 12%) !important;
}

.mat-slider-horizontal .mat-slider-track-wrapper {
    background: #fdb9b9 !important;
}

floating-object-controls {
    background-color: #e3e3e3 !important;
}

pixie-editor.be-dark-mode .floating-panel-item {
    background-color: #ebeaea;
    color: #000;
}

image-editor {
    color: #4e4e4e;

}

.mat-slider-min-value:not(.mat-slider-thumb-label-showing) .mat-slider-thumb {
    border-color: rgb(70 70 70 / 30%);
    background-color: #00000075;
}

.mat-button-toggle-appearance-standard {
    background: #e5e5e5;
}

.mat-button-toggle-checked {
    background-color: #b5b5b5;
}

pixie-editor .floating-panel {
    background-color: #ffffff;
}

open-sample-image-panel .separator .text {
    background-color: #eae7e7;
}

.mat-stroked-button:not([disabled]) {
    border-color: rgb(176 176 176 / 69%);
}