/* TRISITE CSS 4.2  */
/* (C) 2023 TRISITE */
/* Initialize       */

@import "https://trisite.net/services/css/v4.2/basic.css";
@import "https://trisite.net/services/css/v4.2/header.css";
@import "https://trisite.net/services/css/v4.2/grid.css";
@import "https://trisite.net/services/css/v4.2/button.css";
@import "https://trisite.net/services/css/v4.2/table.css";
@import "https://trisite.net/services/css/v4.2/form.css";
@import "https://trisite.net/services/css/v4.2/form_file.css";
@import "https://trisite.net/services/css/v4.2/paging.css";

:root {
    --width-limit: 1400px;
	--section-space: 60px;
	--margin: 40px;
	--padding: 20px;
	--input-width: 260px;

	--radius: 40px;
	--radius-inner: 30px;
    --radius-inner-2: 15px;

	--font-size: 16px;
	--step: 1.15;
	--line-height: 1.8;
	--transition: 0.4s;
	--small: 0.6em;
	--large: 1.4em;

	--brightness: 1.1;
	--outline: 1px;

	--trigger-size: 48px;
	--trigger-bar: 4px;

	--gap: 20px;
	--header-offset: 100px;

	--color-light-glass:rgba(255, 254, 254,0.3);
	--color-dark-glass:rgba(38, 32, 32,0.4);

	--color-super-white: #fff;
	--color-white: #F6F5F4;
	--color-blue: #3071b9;
	--color-skyblue: rgb(141, 201, 236);
	--color-red: rgb(191,84,94);
	--color-pink: #ed7889;
	--color-green: rgb(134,176,112);
	--color-cream: #ffe9c0;
	--color-yellow: #f6c25e;
	--color-orange: rgb(247, 166, 45);
	--color-gray: #666;
	--color-lightgray: rgb(243, 240, 240);
	--color-black: #443;

	--shadow: 0 0 5px -4px rgba(3,2,2,0.1) , 0 0 20px -4px rgba(3,2,2,0.3);
	--shadow-light: 0 4px 4px -1px rgba(3,2,2,0.1);


	--color-body: var(--color-white);
	--color-text: var(--color-black);
	--color-border: var(--color-black);
	--color-table: var(--color-white);
	--color-table-odd: var(--color-lightgray);

	--color-agree-bg: var(--color-super-white);
	--color-agree-fr: var(--color-text);
	--color-disagree-bg: var(--color-red);
	--color-disagree-fr: var(--color-white);
	--color-cancel-bg: var(--color-lightgray);
	--color-cancel-fr: var(--color-black);

	--color-trigger-bg: var(--color-blue);
	--color-trigger-fr: var(--color-white);

	--color-outline: var(--color-gray);
	--color-outline-focus: var(--color-blue);
	--color-outline-text: var(--color-black);
	--color-outline-focus-text: var(--color-white);
	--color-link: var(--color-blue);
	--color-hover: var(--color-red);
	--color-form: var(--color-white);

	--input-object-fit: cover;
}

@media (width <= 920px) {
    :root {
        --padding: 16px;
    }
}
@media (width <= 520px) {
    :root {
        --padding: 10px;
        --section-space: 40px;
    }
}