/* Custom Stylesheet */
/**
 * Use this file to override Materialize files so you can update
 * the core Materialize files in the future
 *
 * Made By MaterializeCSS.com
 */

.icon-block {
  padding: 0 15px;
}
.icon-block .material-icons {
	font-size: inherit;
}

.str_bg_green {
background: repeating-linear-gradient(
  45deg,
  rgba(0, 0, 0, 0.025),
  rgba(0, 0, 0, 0.025) 10px,
  rgba(0, 0, 0, 0.05) 10px,
  rgba(0, 0, 0, 0.05) 20px
),
rgba(210, 255, 210);
}

body {
  background-color: #eee;
  -webkit-transition: color 1s ease, background-color 1s ease;
  transition: color 1s ease, background-color 1s ease;
}

.collapsible-body {
    background-color: #fff4e4; 
    b-g-c: rgb(255, 224, 178);
}

body.dark .collapsible-body {
  background-color: rgb(52, 49, 44);
}

body.dark {
  background-color: #202123;
  color: #fff;
}
body.dark nav {
  background-color: #26A69A;
}
body.dark .card {
  background-color: rgba(255, 255, 255, 0.2);
}
body.dark .btn {
  background-color: #EE6F73;
}
body.dark .divider {
  opacity: 0.2;
}
body.dark .sidenav {
  background-color: #2D2D31;
}
body.dark .modal-content {
  background-color: #2D2D31;
  color: #9AA0A6;
}
body.dark .card-action {
  background-color: #2D2D31;
  color: #9AA0A6;
}
body.dark .collapsible-header {
  background-color: #2D2D31;
  color: #9AA0A6;
  border-bottom: 1px solid #222;
    
}

body.dark .collapsible-body {
  border-bottom: 1px solid #222;
}
body.dark .modal-footer {
  background-color: #2D2D31;
  color: #9AA0A6;
}
body.dark .modal-footer .btn-flat {
  background-color: #2D2D31;
  color: #9AA0A6;
}
body.dark .dropdown-content {
  background-color: #2D2D31;
}
body.dark .dropdown-content .disabled span {
  color: #9AA0A6;
}
body.dark .sidenav li a:not(.subheader) {
  color: #89B2F5;
}
body.dark .sidenav li a:not(.subheader):hover {
  background-color: #3B4043;
}
body.dark .sidenav li a.subheader {
  color: #9AA0A6;
}
body.dark .input-field input, body.dark label {
  color: rgba(255, 255, 255, 0.2);
}
body.dark .file-path-wrapper input, body.dark span {
  color: #9AA0A6;
}
body.dark .input-field textarea {
  color: #9AA0A6;
}
body.dark .sidenav li a .material-icons {
  color: #9AA0A6;
}
body.dark .collection {
  border: 1px solid rgba(255, 255, 255, 0.2);
}
body.dark .collection .collection-item {
  background-color: rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
body.dark .lmenu option {
  background-color: rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
body.dark .str_bg_green {
    background: repeating-linear-gradient(
  45deg,
  rgba(0, 0, 0, 0.025),
  rgba(0, 0, 0, 0.025) 10px,
  rgba(0, 0, 0, 0.05) 10px,
  rgba(0, 0, 0, 0.05) 20px
),
rgba(50, 55, 50);
}
.lmenu {
    margin: 0;
    padding: 0 !important;
    border: 0 !important;
    background-color: #37474f !important;
}
.lmenu .collection-item {
  background-color: #37474f !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff !important;
}
.lmenu .collection-item:hover {
  background-color: #263238 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff !important;
}
.row-flex {
  display: flex !important;
  margin: 0;
}
.row-flex .col-flex {
  min-height: 100% !important;
}

.lmenu .collapsible-body {
    padding: 0  !important;
}

.dropdown-content{ 
    width: 240px !important;
}

.dropdown-content li a{ 
    color: #444  !important;
}

body.dark .dropdown-content li a{
  ba-ckground-color: #2D2D31;
  color: #9AA0A6 !important;
}
body.dark .dropdown-content li a:hover{
  color: #2D2D31 !important;
}
.btn i img {
    height:1.3rem;
    vertical-align:middle;
    margin-bottom:5px;
}
.btn-large i img {
    height:1.6rem;
    vertical-align:middle;
    margin-bottom:8px;
}
.btn-small i img {
    height:1.2rem;
    vertical-align:middle;
    margin-bottom:4px;
}

blockquote {
    border-left: 5px solid rgb(239, 108, 0);
}

.no-margin-b {margin-bottom: 0;}
.no-margin {margin: 0; padding: 0 !important;}

.stat-block {
    text-align: center;
    padding: 20px;
    border-radius: 5px;
    color: white;
    font-size: 24px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Легкий тінь для більш елегантного вигляду */
}
.total-visitors {
    background-color: #80e27e; /* Легкий зелений */
}
.monthly-visitors {
    background-color: #64b5f6; /* Легкий блакитний */
}
.total-orders {
    background-color: #ffcc80; /* Світлий помаранчевий */
}
.monthly-orders {
    background-color: #ff8a80; /* Легкий червоний */
}

        /* Динамічні кольори теми з налаштувань бізнесу */
        :root {
            --primary-color: #616161;
            --accent-color: #f77;
        }

        .b-first-bg, .btn, .btn-large, .btn-small, .btn-floating,
        .tabs .indicator, .collection .collection-item.active,
        .pagination li.active {
            background-color: var(--primary-color) !important;
            color: white !important;
        }
        .b-first-bg:hover, .btn:hover, .btn-large:hover, .btn-small:hover, .btn-floating:hover {
            background-color: color-mix(in srgb, var(--primary-color) 80%, black) !important; /* Затемнення основного кольору */
        }
        .b-first, .b-first-text, nav .brand-logo,
        .breadcrumb, .breadcrumb:before,
        .input-field label.active, .input-field input[type=text]:focus + label,
        .input-field input[type=email]:focus + label, .input-field input[type=password]:focus + label,
        .input-field input[type=number]:focus + label, .input-field textarea.materialize-textarea:focus + label,
        .input-field .prefix.active {
            color: var(--primary-color) !important;
        }
        .input-field input[type=text]:focus, .input-field input[type=email]:focus,
        .input-field input[type=password]:focus, .input-field input[type=number]:focus,
        .input-field textarea.materialize-textarea:focus {
            border-bottom: 1px solid var(--primary-color) !important;
            box-shadow: 0 1px 0 0 var(--primary-color) !important;
        }

        .b-second-bg {
            background-color: var(--accent-color) !important;
        }
         .b-second-bg:hover {
            background-color: color-mix(in srgb, var(--accent-color) 80%, black) !important; /* Затемнення акцентного кольору */
        }
        .b-second-text, .secondary-content,
        .input-field input[type=text]:focus.valid ~ .prefix, .input-field input[type=email]:focus.valid ~ .prefix,
        .input-field input[type=password]:focus.valid ~ .prefix, .input-field input[type=number]:focus.valid ~ .prefix,
        .input-field textarea.materialize-textarea:focus.valid ~ .prefix {
            color: var(--accent-color) !important;
        }
         .input-field input[type=text]:focus.valid, .input-field input[type=email]:focus.valid,
        .input-field input[type=password]:focus.valid, .input-field input[type=number]:focus.valid,
        .input-field textarea.materialize-textarea:focus.valid {
            border-bottom: 1px solid var(--accent-color) !important;
            box-shadow: 0 1px 0 0 var(--accent-color) !important;
        }


        .gradient-background {
            background: linear-gradient(60deg, var(--primary-color), var(--accent-color));
        }
        .nav-wrap--per, .page-fo--oter {
             background-color: var(--primary-color) !important;
        }
        .section-title i {
            color: var(--primary-color) !important;
        }
        .active-breadcrumb {
            color: var(--primary-color) !important;
            font-weight: bold;
        }
        .cart-count-badge {
            background-color: var(--accent-color);
            color: white;
            border-radius: 50%;
            padding: 1px 6px;
            font-size: 0.7rem;
            position: relative;
            top: -10px;
            left: -3px;
        }