:root {
            --dark-color: #060405;
            --light-color: #fbf9fa;
            --main-background: #ffffff;
            --primary-background: #e1e9f5;
            --primary-textColor: #52144b;
            --secondary-background: #52144b;
            --secondary-textColor: #ffffff;
            --secondary-color:  #fbf9fa;
            --accent-background: #800060;
            --accent-textColor: #ffffff;
            --primary-gradient: linear-gradient(180deg, #52142b, #210811);
            --secondary-gradient: linear-gradient(180deg, #52144b, #21081e);
        }
         body {
            background: var(--main-background); 		/* фон вашего сайта */
            color: var(--main-color); 		/* цвет вашего сайта */
        }

        a {
            color: var(--secondary-background); /* цвет ссылок */
        }

        .container-header {
            background-color: var(--primary-background); /* Сплошной фон ваших заголовков */
            background-image: var(--primary-gradient);  /* Установите значение "none", если вы хотите отключить градиент */
        }


        .mod-articlesnews-horizontal li, .no-card .newsflash-horiz li {
            background-color: var(--primary-background); /* Solid background of your articlesnews or newsflash modules */
            color: var(--primary-color);  /* Color of your articlesnews or newsflash modules */
			border: 1px solid var(--primary-background); /* Border of your articlesnews or newsflash modules */
        }

        .btn.btn-primary {
            background-color: var(--primary-background); /* background of your primary buttons */
            border-color: var(--primary-background); /* border color of your primary buttons */
            color: var(--primary-textColor); /* text color of your primary buttons */
        }

        .mod-articlesnews-horizontal li .btn.btn-secondary, .no-card .newsflash-horiz li .btn.btn-secondary {
            background-color: var(--accent-background); /* background of your primary buttons */
            border-color: var(--accent-background); /* border color of your primary buttons */
            color: var(--dark-color); /* text color of your primary buttons */
        }

        .btn.btn-secondary {
            background-color: var(--secondary-background); /* background of your secondary buttons */
            border-color: var(--secondary-background); /* border color of your secondary buttons */
            color: var(--secondary-textColor); /* text color of your secondary buttons */
        }

        .bg-info {
            color: var(--accent-textColor);
            background-color: var(--accent-background) !important;
        }

        .card {
            border: 1px solid var(--primary-background); /* border color of your cards */
	        border-radius: 0; /* border radius of your cards */
	        background-color: var(--primary-background); /* background color of your cards */
        }

        .card-header {
            background-color: var(--primary-background); /* background color of your card headers */
            border-bottom: 1px solid var(--primary-background); /* border color of your card headers */
            color: var(--primary-textColor); /* text color of your card headers */
        }

        .card-body {
            background-color: var(--primary-background); /* background color of your card bodies (Joomla Modules) */
            border-bottom: 3px solid var(--accent-background); /* border color of your card bodies */
            color: var(--primary-textColor); /* text color of your card bodies */
        }

        .card-body a {
            color: var(--primary-textColor); /* text color of your card body links */
        }

        .card.secondary {
            border: 1px solid var(--secondary-background); /* border color of your secondary cards */
            border-radius: 0; /* border radius of your secondary cards */
            background-color: var(--secondary-background); /* background color of your secondary cards */
        }

        .card-header.secondary {
            background-color: var(--secondary-background); /* background color of your secondary card headers */
            border-bottom: 1px solid var(--secondary-background); /* border color of your  secondary card headers */
            color: var(--secondary-textColor); /* text color of your card headers */
        }

        .card-body.secondary {
            background-color: var(--secondary-background); /* background color of your secondary card bodies (Joomla Modules) */
            border-bottom: 3px solid var(--secondary-background); /* border color of your secondary card bodies */
            color: var(--secondary-textColor); /* text color of your secondary card bodies */
        }

        .card-body.secondary a {
            color: var(--secondary-textColor); /* text color of your secondary card body links */
        }

        .plg_system_webauthn_login_button svg {
            fill: var(--primary-color); /* color of your webauthn login button icon */
        }

        .footer {
            background-color: var(--secondary-background); /* background color of your footer */
            background-image: var(--secondary-gradient);  /* Set to none if you want to disable the gradient */
            color: var(--secondary-color); /* text color of your footer */
        }

        ::selection {
	        background-color: var(--accent-background); /* background color of your text selection */
			color: var(--dark-color); /* text color of your text selection */
        }

        .metismenu.mod-menu .metismenu-item > ul {
			background-color: var(--secondary-background); /* background color of your dropdown menu */
			border: 1px solid var(--secondary-background); /* border color of your dropdown menu */
	        color: var(--secondary-color); /* text color of your dropdown menu */
		}

        .metismenu.mod-menu .metismenu-item > ul a {
	        color: var(--secondary-color); /* text color of your dropdown menu links */
        }

        .main-top.card.colorpicker-module {
	        background-color: var(--main-background); /* if you want to change the background color of a specific module add a Module Class in the advanced module settings and define it in your css */
	        color: var(--dark-color); /* if you want to change the background color of a specific module add a Module Class in the advanced module settings and define it in your css */
            border: none;
        }

        .colorpicker-module .card-header, .colorpicker-module .card-body  {
            background-color: var(--main-background); /* if you want to change the background color of a specific module add a Module Class in the advanced module settings and define it in your css */
            color: var(--dark-color); /* if you want to change the background color of a specific module add a Module Class in the advanced module settings and define it in your css */
        }

        .article-info {
	        background-color: var(--main-background); /* background color of your article info */
	        padding: 2px 2px; /* Расстояние между строками в подробностях материала. В моём случае между строками тегов. */
        }

        .article-info dd {
	        color: #000000; /* text color of your article info */
		}

        .btn.btn-info {
	        background-color: #52144b; /* background color of your info buttons */
            border: 1px solid var(--main-background); /* border width, style and color of your info buttons */
	        color: #ffffc0; /* Цвет шрифта подробностей материалов. В моём случае тегов */
          	padding: 2px 2px; /* Отступ от шрифта до рамки у тегов */
            font-size: 11px; /* Размер шрифта тегов */
        }

        .btn-primary .icon-white:before {
	        color: var(--primary-textColor); /* text color of your info buttons in primary */
        }

        .btn-secondary .icon-white:before {
            color: var(--secondary-textColor); /* text color of your info buttons in primary */
        }

        .form-control {
	        background-color: var(--main-background); /* background color of your form controls */
	        border: 1px solid var(--main-color); /* border color of your form controls */
	        color: var(--primary-color); /* text color of your form controls */
	        border-radius: 0; /* border radius of your form controls */
        }

        label {
	        font-weight: bold; /* font weight of your labels */
        }

        /* generate a clamp font size for h1, in small viewports it should have 18px in large viewports 28px */
		h1, .h1 {
			font-size: 30px;
            color: #52144b;
		}

		/* generate a clamp font size for h2, in small viewports it should have 16px in large viewports 26px */
		h2, .h2 {
			font-size: 22px;
            text-decoration: none;
		}

		/* generate a clamp font size for h3, in small viewports it should have 14px in large viewports 24px */
		h3, .h3 {
			font-size: 22px;
            color: #52144b;
            padding: 15px 15px;
            margin: 1.3em 0 .6em 0;
            text-shadow: 2px 2px 4px rgba(179, 147, 211, 0.1),
                       3px 4px 4px rgba(179, 147, 211, 0.15),
                       4px 6px 4px rgba(179, 147, 211, 0.2),
                       5px 8px 4px rgba(179, 147, 211, 0.25);
		}

		/* generate a clamp font size for h4, in small viewports it should have 12px in large viewports 20px */
		h4, .h4 {
			font-size: 21px;
            text-align: center;
            color: #52144b;
            padding: 15px 15px;
            text-shadow: 3px 4px 4px rgba(179, 147, 211, 0.1),
                       3px 4px 4px rgba(179, 147, 211, 0.15),
                       3px 4px 4px rgba(179, 147, 211, 0.2),
                       3px 4px 4px rgba(179, 147, 211, 0.25);          
		}

		/* Стиль для h5 */
		h5, .h5 {
			 font-size: 20px;          
             text-align: center;         
		}

		/* Стиль для Источника */
		h6, .h6 {
			font-size: 12px;
            font-weight: 400;
            color: #cccccc;
		}

/* Цвет ссылок SeoLinks */
.linkss {
   /* RESET */
   text-decoration: none;
   line-height: 1;
   
   position: relative;
   z-index: 0;
   display: inline-block;
   padding: 4px 4px;
   overflow: hidden;
   color: #600040;
   vertical-align: bottom;
   transition: color .3s ease-out;
}

.linkss:before {
   content: "";
   position: absolute;
   z-index: -1;
   top: 0;
   left: 0;
   transform: translateY(calc(100% - 2px));
   width: 100%;
   height: 100%;
   background-image: linear-gradient(60deg, #600040 0%, #c000ff 100%);
   transition: transform .25s ease-out;
}

.linkss:hover { 
   color: #fff; 
}
.linkss:hover::before {
   transform: translateY(0);
   transition: transform .25s ease-out;
}

/* Тень вокруг модулей */
.card {
    box-shadow: 12px 4px 18px 0px rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: 12px 4px 18px 0px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 12px 4px 18px 0px rgba(0, 0, 0, 0.35);
}