@font-face {
    font-family: 'roboto-regular';
    src: url(fonts/Roboto/Roboto-Regular.ttf);
}
@font-face {
    font-family: 'roboto-light';
    src: url(fonts/Roboto/Roboto-Light.ttf);
}
@font-face {
    font-family: 'roboto-medium';
    src: url(fonts/Roboto/Roboto-Medium.ttf);
}
body {
}
h1, h2, h3, h4, h5, h6 {
    line-height: inherit;
    margin: 0;
}
.page-content {
    padding: 12px 24px;
}
.page-content #my-grid {
    margin-left: auto;
    margin-right: auto;
}
.page-content-header-text-after-go-back {
    margin-top: 6px;
    margin-left: 2px;
    display: inline;
}

a, a:link, a:visited {
    color: var(--common-color-text-highlight);
    text-decoration: none;
}
a:hover, a:active {
    text-decoration: underline;
}

a.secondary-link, a.secondary-link:link, a.secondary-link:visited {
    color: var(--common-color-secondary);
}
/*a:focus {
    outline: 2px solid #4C9AFF;
    outline-offset: 2px;
}*/

#my-container .normal-text-link, #my-container .normal-text-link:link, #my-container .normal-text-link:visited {
    color: black;
    text-decoration: none;
}
#my-container .normal-text-link:hover {
    color: var(--common-color-text-highlight) /*var(--my-blue-text)*/ /*#0065FF*/;
    text-decoration: none;
}

#my-container .white-text-link, #my-container .white-text-link:link, #my-container .white-text-link:visited {
    color: white;
    text-decoration: none;
}
#my-container .white-text-link:hover {
    color: lightskyblue /*var(--my-blue-text)*/ /*#0065FF*/;
    text-decoration: none;
}

#my-container .text-block-link, #my-container .text-block-link:link, #my-container .text-block-link:visited {
    color: var(--common-color-main);
    text-decoration: none;
}
#my-container .text-block-link:hover {
    color: var(--common-color-text-highlight);
    background-color: #ddf0ea;
    text-decoration: none;
}

#my-container .my-icon-link {
    border-radius: 50%;
    padding: 6px 7px 5px 7px;
}
#my-container .my-icon-link i, #my-container .my-icon-link i::before {
    font-size: 1em;
}
#my-container .my-icon-link, #my-container .my-icon-link:visited, #my-container .my-icon-link:hover, #my-container .my-icon-link:active {
    text-decoration: none !important;
}
#my-container .my-icon-link:hover, #my-container .my-icon-link:active {
    background-color: rgba(128, 128, 128, 0.1);
}
#my-container .my-icon-link, #my-container .my-icon-link:visited {
    color: lightgray;
}
#my-container .my-icon-link:hover {
    color: var(--common-color-main-light);
}
#my-container .my-icon-link:active {
    color: var(--common-color-main);
}

#my-container .my-icon-link-20 {
    font-size: 20px !important;
}
#my-container .my-icon-link-20 > i::before {
    font-size: 20px !important;
}
#my-container .danger-link, #my-container .danger-link:visited {
    color: lightgray !important;
    text-decoration: none !important;
}
#my-container .danger-link:hover, #my-container .danger-link:hover, #my-container .danger-link:active {
    color: red!important;
    text-decoration: none !important;
}
#my-container .my-normal-link, #my-container .my-normal-link:visited {
    color: lightgray !important;
    text-decoration: none !important;
}
#my-container .my-normal-link:hover, #my-container .my-normal-link:hover, #my-container .my-normal-link:active {
    color: var(--common-color-main-light)!important;
    text-decoration: none !important;
}


.my-icon-link-light {
    border-radius: 50%;
    padding: 7px 8px 5px 8px;
}
.my-icon-link-light i, .my-icon-link-light i::before {
    font-size: 1em !important;
}
.my-icon-link-light:link, .my-icon-link-light:visited, .my-icon-link-light:hover, .my-icon-link-light:active {
    text-decoration: none !important;
}
.my-icon-link-light:link, .my-icon-link-light:visited {
    color: rgba(255, 255, 255, 0.6);
}
.my-icon-link-light:hover, .my-icon-link-light:active {
    color: white;
    background-color: rgba(255, 255, 255, 0.2);
}

.circle-link {
    margin-left: -10px;
    border-radius: 50%;
    font-size: 28px;
}
.circle-link, .circle-link:link, .circle-link:visited {
    color: #303030;
}
.circle-link:hover {
    background-color: #ddd;
    color: black;
}
.circle-link:active {
    background-color: #ccc;
    color: black;
}
.circle-link .bi {
    margin-top: -2px;
    margin-left: 4px !important;
    margin-right: 4px !important;
    margin-bottom: 2px !important;
}
.circle-link .bi::before {
    font-size: 28px !important;
    font-weight:300;
}


.circle-link1 {
    border-radius: 50%;
    position: relative;
    display: inline-block;
    width: 2rem;
    height: 2rem;
    margin-bottom: -0.5rem;
}
.circle-link1, .circle-link1 .bi::before {
    font-size: 1.8rem;
    font-weight: 300;
}
.circle-link1, .circle-link1:link, .circle-link1:visited {
    color: var(--common-color-main) /*#303030*/;
}
.circle-link1:hover {
    background-color: #ddd;
    color: var(--common-color-main-light) /*black*/;
}
.circle-link1:active {
    background-color: #ccc;
    color: var(--common-color-main-light) /*black*/;
}
.circle-link1 i {
    position: absolute;
    left: 0.1rem;
    top: -0.35rem;
}


.gray-link-color, .gray-link, .gray-link:link, .gray-link:visited, .gray-link:focus {
    color: #476282 /*#6B778C*/;
}
.gray-link:hover, .gray-link:active {
    color: #707f99 /*#8993a4*/;
    text-decoration: underline;
    text-decoration-thickness: 8%;
}
.gray-link:active {
    color: #505f79;
}

.my-gray-line {
    border-top: 0.5px solid #eeeaea;
}

.my-divide {
    font: 10px/1 DXIcons;
    padding-left: 2px;
    padding-right: 2px;
}

.my-divide::before {
    content: '\f010';
}

.my-right-button-container {
    display: flex !important;
    flex-flow: row-reverse !important;
    padding-top: 0;
}

.navbar-brand {
    font-size: 0.6rem;
    font-weight: 600;
    text-align: center;
}

:root {
    --my-blue-text: #06c /*#00709c*/;
    --devsite-elevation-key-shadow-color: rgba(60,64,67,0.3);
    --devsite-elevation-ambient-shadow-color: rgba(60,64,67,0.15);
    --devsite-elevation-inset-shadow-color: rgba(154,160,166,0.5);
}

.dark-theme-container {
    --theme-color-bg: #000;
    --theme-color-bg-input: var(--fire-color-sidenav-bg-default);
    --theme-color-fg-primary: #fff;
    --theme-color-fg-secondary: rgba(255,255,255,0.7);
    --theme-color-fg-tertiary: rgba(255,255,255,0.5);
    --theme-color-fg-disabled: rgba(255,255,255,0.3);
    --theme-color-fg-placeholder: rgba(255,255,255,0.7);
    --theme-color-fg-default-border: rgba(255,255,255,0.2);
    --theme-color-fg-rgb: 255,255,255;
    --fire-color-primary-default: #8ab4f8;
    --theme-color-primary: #8ab4f8;
    --theme-color-primary-rgb: 138,180,248;
    --theme-color-primary-a11y: #8ab4f8;
    --theme-color-primary-2: #aecbfa;
    --theme-color-primary-3: #d2e3fc;
    --theme-color-on-primary: var(--fire-color-black-alpha-87);
    --theme-color-ink: #fff;
    --theme-color-ink-rgb: 255,255,255;
    --theme-color-ink-2: rgba(255,255,255,0.7);
    --theme-color-ink-3: rgba(255,255,255,0.5);
    --theme-color-ink-disabled: rgba(255,255,255,0.3);
    --theme-button-outline-color: rgba(255,255,255,0.2);
    --theme-opacity-highlight: .18;
    --theme-opacity-highlight-2: .24;
    --fire-focus-outline-color: rgba(var(--fire-color-primary-50-rgb),0.8);
    --fire-color-link: #8ab4f8;
}

:root {
    --my-gray-highlight: rgba(216, 216, 255, 0.15);
    --tree-sub-module-text-color: #ffd54f;
    --my-dark-blue-bg: #051e34;
}
.my-white-button.dx-button-mode-text {
    border-radius: 50%;
}
.my-white-button.dx-button-mode-text, .my-white-button.dx-button-mode-text.dx-state-focused, .my-white-button.dx-button-mode-text .dx-icon {
    color: rgba(255, 255, 255, 0.6);
    background-color: transparent;
}
.my-white-button.dx-button-mode-text.dx-state-hover {
    background-color: rgba(255, 255, 255, 0.2);
}
.my-white-button.dx-button-mode-text.dx-state-hover, .my-white-button.dx-button-mode-text.dx-state-hover .dx-icon {
    color: white;
}
.small-text.dx-button, .small-text.dx-button-has-icon, .small-text.dx-button-has-icon .dx-icon {
    font-size: 0.9rem;
}
.small-text.dx-button .dx-button-content, .small-text.dx-button-has-icon .dx-button-content {
    padding: 0.3rem;
}