:root {
    --main-bg: #112233;
    --main-blue: #00DCFF;
    --secondary-blue: #1b99af;

    --main-orange: #FF8800;
    --secondary-orange: #FFBB22;


    --main-bg-color: #AAAAAA;
    --main-bg-color2: #FFFFFF;
    --main-bg-color3: #cccccc;
    --main-text-color: #000000;
    --main-text-color2: #333333;
    --main-text-color3: #ffffff;
    --cal-border: #CCCCCC;
    --cal-non-business: hsla(0,0%,84%,.3);
    --loading-grey: #ededed;
}

html, body {
    background: var(--main-bg);
    padding:0;
    margin:0;
    width:100%;
    display: block;
}

.main-navbar {
    background: #ffffff;
    border: 0;
    border-bottom-left-radius: 1em;
    border-bottom-right-radius: 1em;
    box-shadow: 0 5px 0 rgba(0,0,0,0.2);
}
.nav-link:focus, .nav-link, .nav-link:visited, .nav-link:hover {
    color: #005b9a;
    font-family: 'ArialRounded', Arial, ui-rounded;
    font-weight: normal;
    font-size: 1.3em;
    transition: ease 0.5s;
}
.nav-link:hover {
    color: #d57310;
}

.diff-container ins { color: #00cc00 !important; font-weight: bold; }
.diff-container del { color: #cc0000 !important; text-decoration-line: line-through; }

html, body {
    padding: 0;
    margin: 0;
    background: var(--main-bg-color);
    width: 100%;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    height: 100%;
}

a:focus {
 outline: none;
}

.centeredContainer {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-control-user {
    font-size: 1em;
    border-radius: 10rem;
    padding: 1.1rem 1rem;
    margin-top: 1em;
    margin-bottom: 1em;
    max-width: 100%;
}

.btn-user {
    font-size: 1em;
    border-radius: 10rem;
    padding: 0.75rem 1rem;
    width: 100%;
}

.card-rounded {
    border-radius: 15px;
}

.errorTitle {
    display: block;
    margin-bottom: 5px;
    font-family: 'ArialRounded', "Arial Black", system-ui;
    color: #f12626;
    font-size: 1.3em;
}

.errorMessage {
    font-size: 1em;
    line-height: 1.1;
}

@font-face {
    font-family: 'ArialRounded';
    src: url('/fonts/arialrounded/ArialRoundedMTBold.eot');
    src: url('/fonts/arialrounded/ArialRoundedMTBold.eot?#iefix') format('embedded-opentype'),
    url('/fonts/arialrounded/ArialRoundedMTBold.woff2') format('woff2'),
    url('/fonts/arialrounded/ArialRoundedMTBold.woff') format('woff'),
    url('/fonts/arialrounded/ArialRoundedMTBold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'handlee';
    src: url('/fonts/Handlee-Regular.eot');
    src: url('/fonts/Handlee-Regular.eot?#iefix') format('embedded-opentype'),
    url('/fonts/Handlee-Regular.woff2') format('woff2'),
    url('/fonts/Handlee-Regular.woff') format('woff'),
    url('/fonts/Handlee-Regular.ttf') format('truetype'),
    url('/fonts/Handlee-Regular.svg#Handlee-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'ArialRounded';
    font-style: normal;
}

.dropdown.no-arrow .dropdown-toggle::after {
    display:none
}

.placeholder-text {
    color: rgba(0, 0, 0, 0);
    display: inline-block;
    background-color: rgba(119,119,119,0.5);
    margin-bottom: 3px;
}

.edit-group .edit-link { display: none; }
.edit-group:hover .edit-link { display: inline; }

.email-list {
    overflow-y: scroll;
    background: rgba(119,119,119,0.2);
    width: 100%;
}

.email-container {
    overflow-y: scroll;
    display: inline-block;
}

.ql-editor{outline: none!important;}

@media (min-width: 576px) {
    .email-list {
        height: calc(100vh - 200px);
    }

    .email-container {
        height: calc(100vh - 200px);
    }
}

.tab-list {
    overflow-y: scroll;
    background: rgba(119,119,119,0.2);
    width: 100%;
}

.tab-list-container {
    width: 100%;
}

.wiki-card table, .wiki-card td, .wiki-card th {
    border: 1px solid #999;
}

    .tab-list, .tab-list-container {
        height: calc(100vh - 200px);
    }

    .tab-container, .tab-container-long {
        height: calc(100vh - 200px);
    }

    .tab-container .card, .tab-container-long .card, .tab-list-container .card {
        height: calc(100vh - 200px);
    }

    .tab-container .card-body, .tab-container-long .card-body, .tab-list-container .card-body {
        overflow-y: scroll;
    }

@media (max-width: 400px) {
    .tab-container-long {
        height: 50000px;
    }

    .tab-container .card {
        height: calc(100vh - 200px);
    }

    .tab-container .card-body {
        height: calc(100vh - 200px);
    }

    .tab-container-long .card {
        height: 100%;
    }

    .tab-container-long .card-body, .tab-container .card-body  {
        overflow-y: scroll;
    }
}

.loading .image,
.loading h4,
.loading h5,
.loading small,
.loading span,
.loading a,
.loading badge,
.loading strong,
.loading .description {
    color: rgba(0, 0, 0, 0);
    background-color: var(--loading-grey);
    background: linear-gradient(
            100deg,
            rgba(255, 255, 255, 0) 40%,
            rgba(255, 255, 255, .5) 50%,
            rgba(255, 255, 255, 0) 60%
    ) var(--loading-grey);
    background-size: 200% 100%;
    background-position-x: 180%;
    animation: 1s loading ease-in-out infinite;
}

@keyframes loading {
    to {
        background-position-x: -20%;
    }
}

.loading h4, .loading h5 {
    border-radius: 4px;
    animation-delay: .05s;
}

.loading .small, .loading .span, .loading p {
    border-radius: 4px;
    animation-delay: .06s;
}

header.page-big-head {
    position: relative;
    margin-bottom: 3rem;
    padding-top: calc(8rem + 57px);
    padding-bottom: 8rem;
    background: no-repeat center center;
    background-color: rgba(108, 117, 125, 0.2);
    background-size: cover;
    background-attachment: scroll;

}
header.page-big-head:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(33, 37, 41, 0.2);
    opacity: 0.5;
}
header.page-big-head .page-heading,
header.page-big-head .post-heading,
header.page-big-head .site-heading {
    color: #fff;
}
header.page-big-head .page-heading,
header.page-big-head .site-heading {
    text-align: center;
}
header.page-big-head .page-heading h1, header.page-big-head .page-heading .h1,
header.page-big-head .site-heading h1,
header.page-big-head .site-heading .h1 {
    font-size: 3rem;
}

.page-article-content p {
    color: var(--main-text-color);
    font-size: 1.2em;
    text-align: justify;
}

.page-article-content h2 {
    color: var(--main-text-color);
    font-size: 2em;
}

.tag-list {
    max-height: 40px;
    overflow: hidden;
    margin-top: 5px;
    width: 100%;
    display: block;
}

.tag-list-container {
    width: 100%;
    display: inline-block;
    margin-top: 10px;
}

@media (min-width: 576px) {
    .tag-list-container {
        float: right;
        width: 230px;
        max-width: 50%;
        margin: 0;
    }
}

.difftext del {
    color: #F5005D;
}
.difftext ins {
    color: #7ab30c;
}

#calendar-holder td, #calendar-holder th, #calendar-holder table, .fc-timegrid-divider {
    border-color: var(--cal-border) !important;
}

.fc-non-business {
    background: var(--cal-non-business);
}




.cbp_tmtimeline {
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative
}

.cbp_tmtimeline:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--main-bg-color3);
    left: 20%;
    margin-left: -6px
}

.cbp_tmtimeline>li {
    position: relative;
}

.cbp_tmtimeline>li:first-child .cbp_tmtime span.large {
    color: var(--main-text-color2);
    font-size: 17px !important;
    font-weight: 700
}

.cbp_tmtimeline>li:first-child .cbp_tmicon {
    background: var(--main-bg-color3);
    color: var(--main-bg-color2);
}

.cbp_tmtimeline>li:nth-child(odd) .cbp_tmtime span:last-child {
    color: var(--main-text-color2);;
    font-size: 13px
}
.cbp_tmlabel {
    min-height: 200px;
}
.cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel {
    background: var(--main-bg-color3);
}

.cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel:after {
    border-right-color: var(--main-bg-color3);
}

.cbp_tmtimeline>li .empty span {
    color: var(--main-text-color2);
}

.cbp_tmtimeline>li .cbp_tmtime {
    display: block;
    width: 23%;
    padding-right: 70px;
    position: absolute
}

.cbp_tmtimeline>li .cbp_tmtime span {
    display: block;
    text-align: right
}

.cbp_tmtimeline>li .cbp_tmtime span:first-child {
    font-size: 15px;
    color: var(--main-text-color);
    font-weight: 700
}

.cbp_tmtimeline>li .cbp_tmtime span:last-child {
    font-size: 14px;
    color: var(--main-text-color);
}

.cbp_tmtimeline>li .cbp_tmlabel {
    margin: 0 0 15px 25%;
    background: var(--main-bg-color3);
    padding: 1.2em;
    position: relative;
    border-radius: 5px
}

.cbp_tmtimeline>li .cbp_tmlabel:after {
    right: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-right-color: var(--main-bg-color3);
    border-width: 10px;
    top: 10px
}

.cbp_tmtimeline>li .cbp_tmlabel blockquote {
    font-size: 16px
}

.cbp_tmtimeline>li .cbp_tmlabel .map-checkin {
    border: 5px solid rgba(235, 235, 235, 0.2);
    -moz-box-shadow: 0px 0px 0px 1px var(--main-bg-color3);
    -webkit-box-shadow: 0px 0px 0px 1px var(--main-bg-color3);
    box-shadow: 0px 0px 0px 1px var(--main-bg-color3);
    background: var(--main-bg-color3); !important
}

.cbp_tmtimeline>li .cbp_tmlabel h2 {
    margin: 0px;
    padding: 0 0 10px 0;
    line-height: 26px;
    font-size: 16px;
    font-weight: normal
}

.cbp_tmtimeline>li .cbp_tmlabel h2 a {
    font-size: 15px
}

.cbp_tmtimeline>li .cbp_tmlabel h2 a:hover {
    text-decoration: none
}

.cbp_tmtimeline>li .cbp_tmlabel h2 span {
    font-size: 15px
}

.cbp_tmtimeline>li .cbp_tmlabel p {
    color: var(--main-text-color2);
}

.cbp_tmtimeline>li .cbp_tmicon {
    width: 40px;
    height: 40px;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    font-size: 1.4em;
    line-height: 40px;
    -webkit-font-smoothing: antialiased;
    position: absolute;
    color: var(--main-bg-color3);
    background: #46a4da;
    border-radius: 50%;
    box-shadow: 0 0 0 5px var(--main-bg-color3);
    text-align: center;
    left: 20%;
    top: 0;
    margin: 0 0 0 -25px
}

@media screen and (max-width: 992px) and (min-width: 768px) {
    .cbp_tmtimeline>li .cbp_tmtime {
        padding-right: 60px
    }
}

@media screen and (max-width: 65.375em) {
    .cbp_tmtimeline>li .cbp_tmtime span:last-child {
        font-size: 12px
    }
}

@media screen and (max-width: 47.2em) {
    .cbp_tmtimeline:before {
        display: none
    }
    .cbp_tmtimeline>li .cbp_tmtime {
        width: 100%;
        position: relative;
        padding: 0 0 20px 0
    }
    .cbp_tmtimeline>li .cbp_tmtime span {
        text-align: left
    }
    .cbp_tmtimeline>li .cbp_tmlabel {
        margin: 0 0 30px 0;
        padding: 1em;
        font-weight: 400;
        font-size: 95%
    }
    .cbp_tmtimeline>li .cbp_tmlabel:after {
        right: auto;
        left: 20px;
        border-right-color: transparent;
        border-bottom-color: var(--main-bg-color3);
        top: -20px
    }
    .cbp_tmtimeline>li .cbp_tmicon {
        position: relative;
        float: right;
        left: auto;
        margin: -64px 5px 0 0px
    }
    .cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel:after {
        border-right-color: transparent;
        border-bottom-color: var(--main-bg-color3);
    }
}

.dashboard-line-title {
    display: table;
    white-space: nowrap;
    text-align: center;
    color: var(--main-text-color3);
    font-size: 1.2em;
}

.dashboard-line-title:before, .dashboard-line-title:after {
    content: "";
    display: table-cell;
    width: 50%;
    background: linear-gradient(var(--main-text-color3), var(--main-text-color3)) repeat-x left center;
    background-size: 1px 1px;
}

.wiki-card table {
    width: 100%;
}

.wiki-card td img {
    max-width: 100%;
}

.card-full-screen-opt {
    position: absolute;
    top: 58px;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: calc(100vh - 58px) !important;
    border-radius: 0 !important;
    z-index: 999999;
}

.app-card, .app-card:hover {
    transition-duration: 0.2s;
    box-shadow: 0 8px 12px rgba(0,0,0,.15)!important;
}
.app-card:hover {
    transform: translate(-3px, -3px);
    box-shadow: 2px 14px 14px rgba(0,0,0,.15)!important;
}



.mainBlock, .secondBlock, .thirdBlock, .supporters {
    display: block;
    width: 100%;
    margin: 0;
    text-align: center;
}
.secondBlock h2, .thirdBlock h2 {
    font-size: 2em;
    font-family: 'ArialRounded', Arial, ui-rounded;
}
.secondBlock h2 {
    color: #fa7324;
}
.thirdBlock h2 {
    color: #ffffff;
    padding-bottom: 1em;
}
.supporters h2 {
    color: #ffffff;
    padding-top: 1em;
    padding-bottom: 0;
}
.supporters p {
    color: #ffffff;
}
.secondBlock p, .thirdBlock p {
    text-align: justify;
}
.mainBlock {
    padding-top: 2.5em;
    padding-bottom: 0;
}
.secondBlock {
    padding-top: 4em;
    background: white;
    padding-bottom: 10em;
    margin-bottom: -5em;
}
.partGroup {
    display: inline-block;
    background: rgba(255,255,255,0.8);
    border-radius: 2em;
    width: 100%;
    height: 100%;
    padding: 0.5em;
}
.partGroup h3 {
    color: #005b9a;
}
.partGroup p {
    padding-left: 0.5em;
    padding-right: 0.5em;
}
.thirdBlock {
    padding-top: 3em;
    background: #3892c2;
    padding-bottom: 10em;
    margin-bottom: -9em;
}
.transition1, .transition2, .transition3 {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    margin-bottom: -2px;
}
.transition1 {
    aspect-ratio: 95/14;
}
.transition2 {
    aspect-ratio: 190/7;
}
.transition3 {
    aspect-ratio: 171/20;
}
#Logo {
    width: min(70vh, 70vw);
    height: min(70vh, 70vw);
    position: relative;
    display: inline-block;
    margin-bottom: -10%;
}

#Logo>div {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

#LogoTagLine {
    position: absolute;
    color: var(--main-blue);
    bottom: 0;
    width: inherit;
    font-family: "ArialRounded";
    font-size: min(5.2vh, 5.2vw);
}

#LogoCat {
    clip-path: url(#LogoCatClip);

    background-size: 50% 50%;
    background-image:
            repeating-linear-gradient(0deg, var(--main-blue), var(--secondary-blue) 50%, var(--main-blue) 100%);
    animation:
            cat-motion 0.7s,
            cat-color linear infinite 5s;
}

#LogoFox {
    clip-path: url(#LogoFoxClip);

    background-size: 50% 25%;
    background-image:
            repeating-linear-gradient(0deg, var(--main-orange), var(--secondary-orange) 50%, var(--main-orange) 100%);

    animation:
            fox-motion 0.7s,
            fox-color linear infinite 5s;
}

#LogoCatEyes {
    clip-path: url(#LogoCatEyesClip);

    background-size: 25% 25%;
    background-image:
            repeating-linear-gradient(0deg, var(--main-orange), var(--secondary-orange) 50%, var(--main-orange) 100%);

    transform-origin: 35% 35%;
    animation:
            cat-eyes-motion 1.5s,
            fox-color linear infinite 10s;
}
#LogoFoxEyes {
    clip-path: url(#LogoFoxEyesClip);

    background-size: 10% 10%;
    background-image:
            repeating-linear-gradient(0deg, var(--main-blue), var(--secondary-blue) 50%, var(--main-blue) 100%);

    transform-origin: 60% 38%;
    animation:
            fox-eyes-motion 1.5s,
            fox-color linear infinite 10s;
}

@keyframes cat-motion {
    0% {transform: translateY(-20%) translateX(-40%) scale(0.25); opacity: 0%;}
    100% {transform: translateY(0) translateX(0) scale(1); opacity: 100%;}
}
@keyframes fox-motion {
    0% {transform: translateY(20%) translateX(40%) scale(0.25); opacity: 0;}
    100% {transform: translateY(0) translateX(0) scale(1); opacity: 1;}
}
@keyframes cat-eyes-motion {
    0% {opacity: 0;}
    50% {transform: scaleY(0.25); opacity: 0;}
    100% {transform: scaleY(1); opacity: 1;}
}
@keyframes fox-eyes-motion {
    0% {opacity: 0;}
    40% {transform: scaleY(0.0);opacity: 0;}
    100% {transform: scaleY(1); opacity: 1;}
}
@keyframes cat-color {
    0% {background-position: 0 0;}
    100% {background-position: 0 100%;}
}
@keyframes fox-color {
    0% {background-position: 0 100%;}
    100% {background-position: 0 0;}
}

.typing {
    text-align: left;
    border-right: 0.1em transparent solid;
    padding-left: 2.6em;
    white-space: nowrap;
    overflow: hidden;
    animation: typing 2s steps(30, end), blink-caret 0.5s step-end -0.5s 7 alternate;
}
@keyframes typing {
    0% {width: 0;}
}
@keyframes blink-caret {
    0% {border-color: var(--main-blue);}
    50% {border-color: transparent;}
    100% {border-color: var(--main-blue);}
}

.supporters {
    background: #112233;
}
.supporters img {
    width: 80%;
}
.supporters a, .supporters a:hover, .supporters a:visited, .supporters a:active {
    color: white;
    text-decoration: underline;
}
.supporters a:hover {
    text-decoration: none;
}
.supporters hr {
    border: 1px solid #CCC;
}
.btn-outline-lime {
    --bs-btn-color: #749703;
    --bs-btn-border-color: #749703;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #749703;
    --bs-btn-hover-border-color: #749703;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #749703;
    --bs-btn-active-border-color: #749703;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #749703;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #749703;
    --bs-gradient:none
}
.btn-outline-steam {
    --bs-btn-color: #264274;
    --bs-btn-border-color: #264274;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #264274;
    --bs-btn-hover-border-color: #264274;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #264274;
    --bs-btn-active-border-color: #264274;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #264274;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #264274;
    --bs-gradient:none
}