/*
Калькулятор гематрии онлайн
*/

body { text-align: center; font-family: Monospace; margin: 0; }
body.white { background-image: url("/image/tile-white.png"); background-color: #FFFFFF; color: #121212; }
body.black { background-image: url("/image/tile-black.png"); background-color: #121212; color: #FFFFFF; }

.inline { display: inline-block; }
.tableChronology .inline { vertical-align: top; }
.tableChronology table { text-align: left;  margin: 0 auto; }

table { text-align: center; vertical-align: middle; display: inline-block; }

a { cursor: pointer; text-decoration: underline; }
body.white a { color: #0000EE; }
body.black a { color: #4169E1; }
a:hover { color: #FF0000; }

input[type="text"] { background: transparent; }
body.white input[type="text"] { border: 1px solid #121212; color: #121212; }
body.black input[type="text"] { border: 1px solid #FFFFFF; color: #FFFFFF; }


#divMenu { color: #FFFFFF; margin: 0px; padding-top: 3px; padding-bottom: 3px; }
body.white #divMenu { background-color: #229ED9; }
body.black #divMenu { background-color: #131862; }
#divMenu a { color: #FFFFFF; text-decoration: none; margin-left:2px; margin-right:2px; font-weight: bold; }

#main { padding-left: 8px; padding-right: 8px; }

.center { text-align: center; }

.tableGeneral {
    margin-top: 7px;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 3px;
    padding-right: 3px;
    background-color: rgba(171, 171, 171, 0.2);
    border: 1px solid #ABABAB;
}
.tableGeneral td {
    padding-left: 5px;
    padding-right: 5px;
    cursor: pointer;
}

.gemButton {
    padding: 2px;
}
.gemButton:hover {
    background-color: rgba(171, 171, 171, 0.8);
}

.click {
    cursor: pointer;
}
.click:hover {
    text-decoration: underline;
}


/* Цвета для текста */
body.white .gSimpleColor { color: #0000FF; text-shadow: 1px 0px 2px rgba(72, 72, 72); } /* Синий цвет для 1 гематрии */
body.black .gSimpleColor { color: #4169E1; text-shadow: 1px 0px 2px rgba(72, 72, 72); } /* Синий цвет для 1 гематрии */
.gReverseSimpleColor { color: #FF0000; text-shadow: 1px 0px 2px rgba(72, 72, 72); } /* Красный цвет для 2 гематрии */

body.white .gPythagoreanColor { color: #FF80AB; text-shadow: 1px 0px 2px rgba(34, 34, 34); } /* Розовый цвет для 5 гематрии */
body.black .gPythagoreanColor { color: #ffb6c1; text-shadow: 1px 0px 2px rgba(34, 34, 34); } /* Розовый цвет для 5 гематрии */
.gReversePythagoreanColor { color: #009FFF; text-shadow: 1px 0px 2px rgba(14, 14, 14); } /* Небесный цвет для 6 гематрии */

.gSumerianColor { color: #DCDC00; text-shadow: 1px 0px 2px rgba(14, 14, 14); } /* Желтый цвет для 3 гематрии */
.gReverseSumerianColor { color: #00AB00; text-shadow: 1px 0px 2px rgba(34, 34, 34); } /* Зеленый цвет для 4 гематрии */

.gStandartColor { color:#F7931A; text-shadow: 1px 0px 2px rgba(72, 72, 72); } /* Цвет биткоина для 7 гематрии */
.gReverseStandartColor { color:#AB00FF; text-shadow: 1px 0px 2px rgba(72, 72, 72); } /* Фиолетовый цвет для 8 гематрии */

.gFibonacciColor { color: #FFFFD0; text-shadow: 1px 0px 2px rgba(72, 72, 72); } /* Бежевый цвет для 9 гематрии */


/* Цвета подсветки фона сравнительной таблицы */
.gSimpleColorBackground { background-color: #0000FF; color: #FFFFFF; text-shadow: 1px 0px 2px rgba(72, 72, 72);  }
.gReverseSimpleColorBackground { background-color: #FF0000; color: #FFFFFF; text-shadow: 1px 0px 2px rgba(72, 72, 72); }

.gPythagoreanColorBackground { background-color: #FF80AB; color: #FFFFFF; text-shadow: 1px 0px 2px rgba(34, 34, 34); }
.gReversePythagoreanColorBackground { background-color: #009FFF; color: #FFFFFF; text-shadow: 1px 0px 2px rgba(14, 14, 14); }

.gSumerianColorBackground { background-color: #DCDC00; color: #FFFFFF; text-shadow: 1px 0px 2px rgba(14, 14, 14); }
.gReverseSumerianColorBackground { background-color: #00AB00; color: #FFFFFF; text-shadow: 1px 0px 2px rgba(34, 34, 34); }

.gStandartColorBackground { background-color:#F7931A; color: #FFFFFF; text-shadow: 1px 0px 2px rgba(72, 72, 72); }
.gReverseStandartColorBackground { background-color:#AB00FF; color: #FFFFFF; text-shadow: 1px 0px 2px rgba(72, 72, 72); }

.gFibonacciColorBackground { background-color: #FFFFD0; color: #272727; text-shadow: 1px 0px 2px rgba(72, 72, 72); }


/* Цвета для кнопок */
.divButtons { margin-top: 10px; padding: 10px; }
.divButtons button {
    border-radius: 10px;
    border: 0px;
    cursor: pointer;
    text-shadow: 1px 0px 2px rgba(13, 13, 13);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 10px;
}
body.white .divButtons button:hover { background: none; padding: 8px; }
body.black .divButtons button:hover { background: none; padding: 8px; }

.gStandartColorButton { background-color: #F7931A; color: #FFFFFF; } /* Цвет биткоина для кнопок 7 гематрии */
.divButtons button.gStandartColorButton:hover { border: 2px solid #F7931A; color: #F7931A; }

.gReverseStandartColorButton { background-color: #AB00FF; color: #FFFFFF; } /* Фиолетовый цвет для кнопок 8 гематрии */
.divButtons button.gReverseStandartColorButton:hover { border: 2px solid #AB00FF; color: #AB00FF; }

body.white .gPythagoreanColorButton { background-color: #FF80AB; color: #FFFFFF; } /* Розовый цвет для кнопок 5 гематрии */
body.black .gPythagoreanColorButton { background-color: #ffb6c1; color: #FFFFFF; } /* Розовый цвет для кнопок 5 гематрии */
body.white .divButtons button.gPythagoreanColorButton:hover { border: 2px solid #FF80AB; color: #FF80AB; }
body.black .divButtons button.gPythagoreanColorButton:hover { border: 2px solid #ffb6c1; color: #ffb6c1; }

.gReversePythagoreanColorButton { background-color: #009FFF; color: #FFFFFF; } /* Зеленый цвет для кнопок 4 гематрии */
.divButtons button.gReversePythagoreanColorButton:hover { border: 2px solid #009FFF; color: #009FFF; }

.gSumerianColorButton { background-color: #DCDC00; color: #FFFFFF; } /* Желтый цвет для кнопок 3 гематрии */
.divButtons button.gSumerianColorButton:hover { border: 2px solid #DCDC00; color: #DCDC00; }

.gReverseSumerianColorButton { background-color: #00AB00; color: #FFFFFF; } /* Небесный цвет для кнопок 6 гематрии */
.divButtons button.gReverseSumerianColorButton:hover { border: 2px solid #00AB00; color: #00AB00; }

.gSimpleColorButton { background-color: #0000FF; color: #FFFFFF; } /* Синий цвет для кнопок 1 гематрии */
.divButtons button.gSimpleColorButton:hover { border: 2px solid #0000FF; }
body.white .divButtons button.gSimpleColorButton:hover { color: #0000FF; }
body.black .divButtons button.gSimpleColorButton:hover { color: #4169E1; }

.gReverseSimpleColorButton { background-color: #FF0000; color: #FFFFFF; } /* Красный цвет для кнопок 2 гематрии */
.divButtons button.gReverseSimpleColorButton:hover { border: 2px solid #FF0000; color: #FF0000; }


/* Таблица словаря*/
.tableDictionary td, th { padding-left: 10px; padding-right: 10px; vertical-align: top; text-align: left; }
.tableDictionary thead th { background-color: rgba(200, 200, 200, 0.9); position: sticky; top: 0; }
.tableDictionary thead { background-color: rgba(200, 200, 200, 0.9); position: sticky; top: 0; }

.tableDictionaryStandart:hover { background-color: rgba(247, 147, 26, 0.1); } /* биткоин */
.tableDictionaryReverseStandart:hover { background-color: rgba(171, 0, 255, 0.1); } /* фиолетовый */
.tableDictionaryPythagorean:hover { background-color: rgba(255, 182, 193, 0.1); } /* розовый */
.tableDictionaryReversePythagorean:hover { background-color: rgba(0, 159, 255, 0.1); } /* небесный */
.tableDictionarySumerian:hover { background-color: rgba(220, 220, 0, 0.1); } /* желтый */
.tableDictionaryReverseSumerian:hover { background-color: rgba(0, 171, 0, 0.1); } /* зеленый */
.tableDictionarySimple:hover { background-color: rgba(0, 0, 255, 0.1); } /* синий */
.tableDictionaryReverseSimple:hover { background-color: rgba(255, 0, 0, 0.1); } /* красный */


/* Таблица с параметрами дня года */
.tableInfoDate { margin-left: 10px; margin-right: 10px; }
.tableInfoDate tr:hover { background-color: rgba(34, 34, 34, 0.2); }

.divBorder {
    display: inline-block;
    border: 1px solid;
    margin:10px;
    padding:5px;
}

/* Таблица сравнения гематрии */
.tableCompare th { background-color: rgba(72, 72, 72, 0.5); font-size:xx-small; padding:5px; text-align:center; }
.tableCompare tbody tr:nth-child(even) { background-color: rgba(72, 72, 72, 0.2); }

/* Скролл наверх */
.go-top {
    position: fixed; /* фиксированное позиционирование */
    left: 20px;      /* отступ слева 20px */
    top: 95%;        /* выравниваем по центру */
    transform: translateY(-50%); /* выравниваем по центру */
    cursor: pointer; /* при наведении меняем курсор */
    display: none;   /* по умолчанию скрываем кнопку */
    font-size: 20px;
    color: rgba(0, 51, 153, 0.5);
    border: 1px solid rgba(0, 51, 153, 0.5);
    background-color: rgba(0, 51, 153, 0.1);
    padding: 10px 10px;
}
.go-top:hover { color: rgba(0, 51, 153, 0.8); border: 1px solid rgba(0, 51, 153, 0.8); background-color: rgba(0, 51, 153, 0.15); }
.go-top--show { display: block; }

/* DIV с информацией о числе */
#divInfoNumber { max-width: 600px; display: inline-block; white-space: normal; vertical-align: middle; text-align: left; }
#divInfoNumber h2 { text-align: center; }

body.white .gamatriaLetter { color: #BBBBBB; }
body.black .gamatriaLetter { color: #727272; }
body.white .counterWord { color: #777777; }
body.black .counterWord { color: #727272; }

#textGematria { width: 80%; }


.page { display: flex; flex-direction: column; min-height: 100vh; } /* выравнивание подвала по низу страницы */
.width { text-align: left; display: inline-block; max-width: 1000px; min-width: 1000px; }
.footer { text-align: center; margin-top: auto; /* выравнивание подвала по низу страницы */ }
.footer .footerCopyright { padding-top: 3px; padding-bottom: 3px; }
.footer .copyright { display: inline-block; }
.footer .builder { display: inline-block; }
body.white .footer { color: #FFFFFF; background-color: #477a25; }
body.black .footer { color: #FFFFFF; background-color: #192b0d; }

@media screen and (max-width: 650px) {
    #textGematria {
        width: 96%;
    }
}