/*fonts*/
        @import url('https://fonts.googleapis.com/css2?family=Play&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Rajdhani&display=swap');
        @import url("https://fonts.googleapis.com/css?family=Orbitron:bold");
        @import url('https://fonts.googleapis.com/css2?family=Jura:wght@500&display=swap');
        /*icons*/

        @import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded");
        @import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined");

        /*styles*/
        /*----------------------------------------------------------*/
        :root {
            --color-background: rgb(230, 240, 243);
            --color-background2: rgb(240, 250, 251);
            --color-palite0: rgb(61, 108, 131);
            --color-palite3: #077CA3;
            --color-palite2: #F0326360;
            --color-palite1: #1BBCF0;
            --color-palite4: #F0E002;
            --color-palite5: #A3990A;
            --color-palite6: rgb(25, 60, 70);
            --color-palite7: rgb(80, 102, 113, 0.4);
            --color-palite8: #00FF9920;
            --color-palite9: #F03263;
            --color-palite10: #13f09b;
            --color-palite11: #71BCF0;
            --color-palite12: rgb(190, 200, 203);
        }

        :root.dark_mode {
            --color-background: rgb(15, 23, 42);
            --color-background2: rgb(22, 30, 54);
            --color-palite0: rgb(155, 175, 185);
            --color-palite1: #077CA3;
            --color-palite2: #F0326399;
            --color-palite3: #1BBCF0;
            --color-palite4: #F0E002;
            --color-palite5: #A3990A;
            --color-palite6: rgb(207, 226, 249);
            --color-palite7: rgb(155, 175, 185, 0.4);
            --color-palite8: #00FF9930;
            --color-palite9: #F03263;
            --color-palite10: #13f09b;
            --color-palite11: #71BCF0;
            --color-palite12: rgb(5, 13, 32);
        }

        /*-------------------------------------- global ----------------------------------------*/
        ::-webkit-scrollbar {
            width: 0;
        }

        * {
            padding: 0px;
            margin: 0px;
            color: var(--color-palite6);
            font-size: 24px;
        }

        @media (max-width: 992px) {
            * {
                font-size: 20px;
            }
        }

        html {
            background-color: var(--color-background);
            font-family: 'Play', sans-serif;
        }

        body {
            padding-top: 60px;
        }

        .container {
            max-width: 1080px;
            margin-left: auto;
            margin-right: auto;
        }

        .content-container {
            margin: 5px;
        }

        .full_height {
            min-height: 80vh;
        }

        .middle_height {
            min-height: 50vh;
        }

        .content {
            border-radius: 7px;
            background-color: var(--color-background2);
            box-shadow: 2px 2px 8px 2px var(--color-palite12);
        }

        .content.widget {
            padding: 10px;
            flex-grow: 1;
        }

        .text_end {
            float: right;
        }

        .text_center {
            text-align: center;
        }

        .title {
            font-family: 'Jura', sans-serif;
            font-size: 20px;
            color: var(--color-palite0);
            padding: 5px;
        }

        .title.small {
            font-size: 18px;
            padding-right: 10px;
        }

        .small {
            font-size: 18px;
        }

        @media (max-width: 992px) {
            .title.small {
                font-size: 16px;
                padding-right: 6px;
            }

            .small {
                font-size: 16px;
            }
        }

        @media (max-width: 768px) {
            .title.small {
                font-size: 14px;
                padding-right: 6px;
            }

            .small {
                font-size: 14px;
            }
        }

        .title.error {

            color: var(--color-palite9);

        }

        .title.message {

            color: var(--color-palite10);

        }

        .resourse {
            color: var(--color-palite1);
            text-decoration: none;
        }

        .resourse:hover {
            color: var(--color-palite3);
        }

        .flex-container {
            display: flex;
            flex-wrap: wrap;
        }

        .blur_bg {
            filter: blur(5px);

        }

        input:-webkit-autofill,
        input:-webkit-autofill:hover,
        input:-webkit-autofill:focus,
        textarea:-webkit-autofill,
        textarea:-webkit-autofill:hover,
        textarea:-webkit-autofill:focus,
        select:-webkit-autofill,
        select:-webkit-autofill:hover,
        select:-webkit-autofill:focus {
            -webkit-text-fill-color: var(--color-palite0);
            -webkit-box-shadow: 0 0 px 1000px var(--color-background) inset;
            transition: background-color 5000s ease-in-out 0s;
        }

        .text-input {
            background-color: var(--color-background2);
            color: var(--color-palite0);
            padding: 5px;
            border: solid 2px var(--color-palite1);
            border-radius: 5px;
            width: fit-content;
            font-size: 18px;
            height: 20px;
        }

        .text-input:focus {
            outline: 0;
            background-color: var(--color-background2);
        }

        .buttons:hover {
            /*border: 2px solid var(--color-palite3);*/
            box-shadow: 0px 0px 3px var(--color-palite3);
        }

        .material-symbols-outlined {
            font-size: 26px;
            vertical-align: bottom;
            color: var(--color-palite3);
        }

        .buttons {
            cursor: pointer;
            margin-left: 5px;
            min-width: 43px;
            padding-left: 5px;
            padding-right: 5px;
            padding-top: auto;
            padding-bottom: auto;
            height: 34px;
            background-color: var(--color-background2);
            border: solid 2px var(--color-palite1);
            border-radius: 5px;
            /*margin-bottom: 2px;*/
            transition: 0.2s;
        }

        .buttons.set {
            box-shadow: inset 0px 0px 1px 1px var(--color-palite3);
            border: solid 2px var(--color-palite3);
        }

        .buttons:hover {
            /*border: 2px solid var(--color-palite3);*/
            box-shadow: 0px 0px 3px var(--color-palite3);
        }

        .buttons:active {
            box-shadow: inset 0px 0px 3px var(--color-palite3);
        }

        .diver {
            /*box-shadow: 1px 1px 2px 2px var(--color-background);*/
            box-shadow: 2px 2px 6px 1px var(--color-palite12);
        }