@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

:root {
    --color-text-primary-light: #1a2024;
    --color-text-secondary-light: #6e7c87;
    --color-text-tertiary-light: #a6afb4;
    --color-text-extra-light: #ffffff;
    --color-text-tooltip-light: #ffffff;
    --color-text-info-light: #7932B8;
    --color-text-success-light: #119c2b;
    --color-text-error-light: #f2271c;
    --color-text-warning-light: #d29404;
    --color-text-run-light: #7e10e5;

    --color-icon-primary-light: #84919a;
    --color-icon-secondary-light: #1a2024;
    --color-icon-extra-light: #ffffff;
    --color-icon-info-light: #7932B8;
    --color-icon-success-light: #119c2b;
    --color-icon-warning-light: #d29404;
    --color-icon-error-light: #f2271c;
    --color-icon-run-light: #7e10e5;

    --color-button-normal-primary-light: #B96AFF;
    --color-button-hover-primary-light: #A142F4;
    --color-button-pressed-primary-light: #7932B8;
    --color-button-normal-secondary-light: #ffffff;
    --color-button-hover-secondary-light: #f6f8f9;
    --color-button-pressed-secondary-light: #e5e9eb;
    --color-button-normal-tertiary-light: #f76659;
    --color-button-hover-tertiary-light: #f2271c;
    --color-button-pressed-tertiary-light: #8d0104;

    --color-success-primary-light: #119c2b;
    --color-success-secondary-light: #22c348;
    --color-info-primary-light: #B96AFF;
    --color-info-secondary-light: #C480FF;
    --color-warning-primary-light: #d29404;
    --color-warning-secondary-light: #f8c41b;
    --color-error-primary-light: #f2271c;
    --color-error-secondary-light: #f76659;
    --color-run-primary-light: #7e10e5;
    --color-run-secondary-light: #c479f3;

    --color-bg-primary-light: #f6f8f9;
    --color-bg-secondary-light: #ffffff;
    --color-bg-tertiary-light: #393939;
    --color-bg-opacity-light: #1a202433;
    --color-bg-success-light: #ebfff1;
    --color-bg-error-light: #ffefeb;
    --color-bg-warning-light: #fffeeb;
    --color-bg-info-light: #fbebff;
    --color-bg-run-light: #fcf0ff;

    --color-divider-primary-light: #dde1e4;
    --color-border-primary-light: #dde1e4;
    --color-border-secondary-light: #b0babf;
    --color-border-tertiary-light: #5b6871;

    --color-hover-primary-light: #faf6ff;
    --color-active-primary-light: #ebf7ff;
    --color-hover-tertiary-light: #f1e2ff;
    --color-active-tertiary-light: #EEDBFF;
    --color-hover-secondary-light: #f6f8f9;
    --color-active-secondary-light: #eef0f2;

    --color-text-primary-dark: #fdfdfd;
    --color-text-secondary-dark: #b8b9bc;
    --color-text-tertiary-dark: #88898d;
    --color-text-extra-dark: #fdfdfd;
    --color-text-tooltip-dark: #151820;
    --color-text-info-dark: #7932B8;
    --color-text-success-dark: #8ad598;
    --color-text-error-dark: #faa9a4;
    --color-text-warning-dark: #fce7a4;
    --color-text-run-dark: #7e10e5;

    --color-icon-primary-dark: #9e9fa1;
    --color-icon-secondary-dark: #75767a;
    --color-icon-extra-dark: #fdfdfd;
    --color-icon-info-dark: #809cc7;
    --color-icon-success-dark: #127528;
    --color-icon-warning-dark: #d7c68d;
    --color-icon-error-dark: #d5918d;
    --color-icon-run-dark: #5f12ab;

    --color-button-normal-primary-dark: #1058b7;
    --color-button-hover-primary-dark: #336fb8;
    --color-button-pressed-primary-dark: #094196;
    --color-button-normal-secondary-dark: #343a46;
    --color-button-hover-secondary-dark: #4b5058;
    --color-button-pressed-secondary-dark: #404650;
    --color-button-normal-tertiary-dark: #b0231d;
    --color-button-hover-tertiary-dark: #b54f48;
    --color-button-pressed-tertiary-dark: #6a080c;

    --color-success-primary-dark: #127528;
    --color-success-secondary-dark: #1e913d;
    --color-info-primary-dark: #1058b7;
    --color-info-secondary-dark: #5184ba;
    --color-warning-primary-dark: #9b6f0d;
    --color-warning-secondary-dark: #b5911d;
    --color-error-primary-dark: #b0231d;
    --color-error-secondary-dark: #b54f48;
    --color-run-primary-dark: #5f12ab;
    --color-run-secondary-dark: #905db5;

    --color-bg-primary-dark: #151820;
    --color-bg-secondary-dark: #1e2028;
    --color-bg-tertiary-dark: #f3f4f6;
    --color-bg-opacity-dark: #4d587452;
    --color-bg-success-dark: #0d3b11;
    --color-bg-error-dark: #5c1d27;
    --color-bg-warning-dark: #58430c;
    --color-bg-info-dark: #0c1f58;
    --color-bg-run-dark: #3d195c;

    --color-divider-primary-dark: #404650;
    --color-border-primary-dark: #404650;
    --color-border-secondary-dark: #828a91;
    --color-border-tertiary-dark: #3b434c;

    --color-hover-primary-dark: #06254f;
    --color-active-primary-dark: #061b39;
    --color-hover-tertiary-dark: #294d7e;
    --color-active-tertiary-dark: #0c356c;
    --color-hover-secondary-dark: #1e2028;
    --color-active-secondary-dark: #24262f;

    --shadow-primary-light: 2px 4px 16px 0px #1a20240f, 0px 0px 8px 0px #1a202405;
    --shadow-secondary-light: -6px 8px 32px 0px #1a20241f, 0px 4px 12px 0px #1a202414;
    --shadow-tertiary-light: 0px 4px 8px 0px #1a20243d, 2px 0px 8px 0px #1a202429;

    --shadow-primary-dark: 2px 4px 28px 0px #00000014, 0px 0px 16px 0px #00000014;
    --shadow-secondary-dark: -6px 8px 16px 0px #00000033, 0px 0px 8px 0px #00000014;
    --shadow-tertiary-dark: 0px 4px 8px 0px #0000003d, 2px 0px 8px 0px #00000029;
}

:root, [data-md-color-scheme="default"]{
    --color-text-primary: var(--color-text-primary-light);
    --color-text-secondary: var(--color-text-secondary-light);
    --color-text-tertiary: var(--color-text-tertiary-light);
    --color-text-extra: var(--color-text-extra-light);
    --color-text-tooltip: var(--color-text-tooltip-light);
    --color-text-info: var(--color-text-info-light);
    --color-text-success: var(--color-text-success-light);
    --color-text-error: var(--color-text-error-light);
    --color-text-warning: var(--color-text-warning-light);
    --color-text-run: var(--color-text-run-light);

    --color-icon-primary: var(--color-icon-primary-light);
    --color-icon-secondary: var(--color-icon-secondary-light);
    --color-icon-extra: var(--color-icon-extra-light);
    --color-icon-info: var(--color-icon-info-light);
    --color-icon-success: var(--color-icon-success-light);
    --color-icon-warning: var(--color-icon-warning-light);
    --color-icon-error: var(--color-icon-error-light);
    --color-icon-run: var(--color-icon-run-light);

    --color-button-normal-primary: var(--color-button-normal-primary-light);
    --color-button-hover-primary: var(--color-button-hover-primary-light);
    --color-button-pressed-primary: var(--color-button-pressed-primary-light);
    --color-button-normal-secondary: var(--color-button-normal-secondary-light);
    --color-button-hover-secondary: var(--color-button-hover-secondary-light);
    --color-button-pressed-secondary: var(--color-button-pressed-secondary-light);
    --color-button-normal-tertiary: var(--color-button-normal-tertiary-light);
    --color-button-hover-tertiary: var(--color-button-hover-tertiary-light);
    --color-button-pressed-tertiary: var(--color-button-pressed-tertiary-light);

    --color-success-primary: var(--color-success-primary-light);
    --color-success-secondary: var(--color-success-secondary-light);
    --color-info-primary: var(--color-info-primary-light);
    --color-info-secondary: var(--color-info-secondary-light);
    --color-warning-primary: var(--color-warning-primary-light);
    --color-warning-secondary: var(--color-warning-secondary-light);
    --color-error-primary: var(--color-error-primary-light);
    --color-error-secondary: var(--color-error-secondary-light);
    --color-run-primary: var(--color-run-primary-light);
    --color-run-secondary: var(--color-run-secondary-light);

    --color-bg-primary: var(--color-bg-primary-light);
    --color-bg-secondary: var(--color-bg-secondary-light);
    --color-bg-tertiary: var(--color-bg-tertiary-light);
    --color-bg-opacity: var(--color-bg-opacity-light);
    --color-bg-success: var(--color-bg-success-light);
    --color-bg-error: var(--color-bg-error-light);
    --color-bg-warning: var(--color-bg-warning-light);
    --color-bg-info: var(--color-bg-info-light);
    --color-bg-run: var(--color-bg-run-light);

    --color-divider-primary: var(--color-divider-primary-light);
    --color-border-primary: var(--color-border-primary-light);
    --color-border-secondary: var(--color-border-secondary-light);
    --color-border-tertiary: var(--color-border-tertiary-light);

    --color-hover-primary: var(--color-hover-primary-light);
    --color-active-primary: var(--color-active-primary-light);
    --color-hover-tertiary: var(--color-hover-tertiary-light);
    --color-active-tertiary: var(--color-active-tertiary-light);
    --color-hover-secondary: var(--color-hover-secondary-light);
    --color-active-secondary: var(--color-active-secondary-light);

    --shadow-primary: var(--shadow-primary-light);
    --shadow-secondary: var(--shadow-secondary-light);
    --shadow-tertiary: var(--shadow-tertiary-light);

    --tooltip-font-color: rgb(0, 1, 9) ;
    --tooltip-border-radius: 25px;
    --tooltip-background-color: rgb(218, 232, 255);
    --fslightbox-background-color: hsla(0,0%,100%,.92);
    --title-font-color: #1A2024;
    --border-main-color: #D5DADD;
    --border-hover-color: #0E73F6;
    --button-main-color: var(--color-button-normal-primary);
    --icon-main-color: #1A2024;
    --card-background-hover-color: #F6FCFF;
    --card-background-color: transparent;
    --nav-link-background-color: #EEE;
    --nav-link-text-color: #1A2024;
    --nav-link-active-background-color: var(--color-button-normal-primary);
    --button-background-main-color: #4094F7;
    --span-text-color: #1A2024;
    --text-main-color: #1A2024;
    --arrow-down: url('../assets/arrow-down.svg');
    --arrow-right: url('../assets/arrow-right.svg');
    --table-header-background: #fff;
}/*светлая тема!*/

:root, [data-md-color-scheme="slate"] {
    --color-text-primary: var(--color-text-primary-dark);
    --color-text-secondary: var(--color-text-secondary-dark);
    --color-text-tertiary: var(--color-text-tertiary-dark);
    --color-text-extra: var(--color-text-extra-dark);
    --color-text-tooltip: var(--color-text-tooltip-dark);
    --color-text-info: var(--color-text-info-dark);
    --color-text-success: var(--color-text-success-dark);
    --color-text-error: var(--color-text-error-dark);
    --color-text-warning: var(--color-text-warning-dark);
    --color-text-run: var(--color-text-run-dark);

    --color-icon-primary: var(--color-icon-primary-dark);
    --color-icon-secondary: var(--color-icon-secondary-dark);
    --color-icon-extra: var(--color-icon-extra-dark);
    --color-icon-info: var(--color-icon-info-dark);
    --color-icon-success: var(--color-icon-success-dark);
    --color-icon-warning: var(--color-icon-warning-dark);
    --color-icon-error: var(--color-icon-error-dark);
    --color-icon-run: var(--color-icon-run-dark);

    --color-button-normal-primary: var(--color-button-normal-primary-light);
    --color-button-hover-primary: var(--color-button-hover-primary-light);
    --color-button-pressed-primary: var(--color-button-pressed-primary-light);
    --color-button-normal-secondary: var(--color-button-normal-secondary-dark);
    --color-button-hover-secondary: var(--color-button-hover-secondary-dark);
    --color-button-pressed-secondary: var(--color-button-pressed-secondary-dark);
    --color-button-normal-tertiary: var(--color-button-normal-tertiary-dark);
    --color-button-hover-tertiary: var(--color-button-hover-tertiary-dark);
    --color-button-pressed-tertiary: var(--color-button-pressed-tertiary-dark);

    --color-success-primary: var(--color-success-primary-dark);
    --color-success-secondary: var(--color-success-secondary-dark);
    --color-info-primary: var(--color-info-primary-light);
    --color-info-secondary: var(--color-info-secondary-light);
    --color-warning-primary: var(--color-warning-primary-dark);
    --color-warning-secondary: var(--color-warning-secondary-dark);
    --color-error-primary: var(--color-error-primary-dark);
    --color-error-secondary: var(--color-error-secondary-dark);
    --color-run-primary: var(--color-run-primary-dark);
    --color-run-secondary: var(--color-run-secondary-dark);

    --color-bg-primary: var(--color-bg-primary-dark);
    --color-bg-secondary: var(--color-bg-secondary-dark);
    --color-bg-tertiary: var(--color-bg-tertiary-dark);
    --color-bg-opacity: var(--color-bg-opacity-dark);
    --color-bg-success: var(--color-bg-success-dark);
    --color-bg-error: var(--color-bg-error-dark);
    --color-bg-warning: var(--color-bg-warning-dark);
    --color-bg-info: var(--color-bg-info-light);
    --color-bg-run: var(--color-bg-run-dark);

    --color-divider-primary: var(--color-divider-primary-dark);
    --color-border-primary: var(--color-border-primary-dark);
    --color-border-secondary: var(--color-border-secondary-dark);
    --color-border-tertiary: var(--color-border-tertiary-dark);

    --color-hover-primary: var(--color-hover-primary-light);
    --color-active-primary: var(--color-active-primary-light);
    --color-hover-tertiary: var(--color-hover-tertiary-light);
    --color-active-tertiary: var(--color-active-tertiary-light);
    --color-hover-secondary: var(--color-hover-secondary-dark);
    --color-active-secondary: var(--color-active-secondary-dark);

    --shadow-primary: var(--shadow-primary-dark);
    --shadow-secondary: var(--shadow-secondary-dark);
    --shadow-tertiary: var(--shadow-tertiary-dark);
    --tooltip-font-color: rgba(0, 1, 9);
    --tooltip-border-radius: 25px;
    --tooltip-background-color: rgb(218, 232, 255);
    --fslightbox-background-color: linear-gradient(rgba(30,30,30,.9),#000 1810%);
    --title-font-color: #1A2024;
    --card-background-color: rgba(77, 88, 116, 0.32);
    --card-background-hover-color: rgba(77, 88, 116, 0.55);
    --border-main-color: #404650;
    --border-hover-color: #828A91;
    --button-main-color: #FDFDFD;
    --icon-main-color: #fdfdfd;
    --nav-link-background-color: rgba(77, 88, 116, 0.32);
    --button-background-main-color: #4094F7;
    --nav-link-text-color: #1A2024;
    --nav-link-active-background-color: #EEDBFF;
    --text-main-color: #1A2024;
    --span-text-color: #1A2024;
    --arrow-down: url('../assets/arrow-down-white.svg');
    --arrow-right: url('../assets/arrow-right-white.svg');
    --table-header-background: #1e2129;
}/*темная тема!*/

/* Added rule to change active navigation item text color to white */
.md-nav__link--active .md-nav__link {
  color: white;
}

.fslightbox-toolbar-button:first-child{
    display: none !important;
}

.fslightbox-nav{
    margin: 20px 20px 0;
}

.fslightbox-slide-number-container{
    background-color: rgba(35,35,35,.65) !important;
    border-radius: 6px;
}

.fslightbox-slide-btn{
    border-radius: 6px;
}

.fslightbox-toolbar{
    right: 40px !important;
    border-radius: 6px !important;
}

.fslightbox-container{
    background: var(--fslightbox-background-color) !important;
}

.fslightbox-slide-btn-container-previous{
    padding-left: 20px !important;
}

.fslightbox-slide-btn-container-next{
    padding-right: 20px !important;
}

.content-icon{
    color: var(--icon-main-color) !important;
}

.content-stroke{
    stroke: var(--icon-main-color)
}

code{
    font-size: 17.6px !important;
    line-height: 28.1667px !important;
}

details{
    font-size: 17.6px !important;
    line-height: 28.1667px !important;
}
.admonition{
    font-size: 17.6px !important;
    line-height: 28.1667px !important;
}

font > code{
    font-size: 13px !important;
    line-height: 20px !important;
}

font > p > code{
    font-size: 13px !important;
    line-height: 20px !important;
}

td > code{
    font-size: 14.08px !important;
    line-height: 22.5333px !important;
}

td > strong > code{
    font-size: 14.08px !important;
    line-height: 22.5333px !important;
}

.content-wrapper{
    display: grid;
    justify-content: start;
    align-items: start;
    gap: 20px;
    grid-template-columns: 1fr 1fr;
    margin-top: 10px !important;
    @media(max-width: 900px){
        display: flex;
        flex-wrap: wrap;
    }
}

.main-page{
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
    align-content: stretch;
    row-gap:20px;
    column-gap: 27px;
}
.menu-figures{
    display:block;
}

.figure-block{
    display: flex !important;
    margin: 0 !important;
    flex-direction: column;
    flex: 1 280px;
    width: 100% !important;
    text-align: start !important;
    -webkit-box-shadow: rgba(0,0,0,.1) 0 1px 4px 0,rgba(211,216,223,.33) 0 15px 20px -1px;
    -moz-box-shadow: rgba(0,0,0,.1) 0 1px 4px 0,rgba(211,216,223,.33) 0 15px 20px -1px;
    box-shadow: rgba(0,0,0,.1) 0 1px 4px 0,rgba(211,216,223,.33) 0 15px 20px -1px;
    border-radius: 5px;
    padding: 24px;
    background-color: white;
}

.figure-block:hover{
    box-shadow: rgba(0,0,0,.15) 0 1px 4px 0,rgba(211,216,223,.53) 0 15px 20px -1px;
    -webkit-box-shadow: rgba(0,0,0,.15) 0 1px 4px 0,rgba(211,216,223,.53) 0 15px 20px -1px;
    -moz-box-shadow: rgba(0,0,0,.15) 0 1px 4px 0,rgba(211,216,223,.53) 0 15px 20px -1px;
}

.figure-title{
    margin: 0 !important;
    font-style: normal !important;
    font-size: 16px;
    font-weight: bold;
    line-height:19.2px !important;
    color: rgba(0, 0, 0, 0.87);
}

.figure-description{
    font-size: 14px;
    line-height: 24px !important;
}

.figure-block-upper{
    display:flex;
    column-gap: 10px;
    align-items: center;
}

.heading{
    font-family: Roboto, sans-serif;
    font-weight:600;
    font-size:18px;
}

.content-block{
    outline: 1px solid var(--border-main-color);
    border-radius: 8px;
    padding: 28px;
    flex: 1 280px;
    max-width: 1000px;
    transition: all .1s ease-in-out;
    box-sizing: border-box;
    background: var(--card-background-color);
}

.content-block:hover{
    background: var(--card-background-hover-color);
    outline: 2px solid var(--border-hover-color);
    border-radius: 8px;
    box-sizing: border-box;
}

.content-title{
    font-weight: 700;
    font-size: 20px;
    color: var(--button-main-color);
    line-height: 24px;
    margin-bottom: 16px !important;
    display: flex;
    column-gap: 8px;
    align-items: center;
    transition: all .3s ease-in-out;
}


.content-list{
    margin:0 !important;
    list-style-type: none !important;
    margin-left: 16px !important;
}

.first-level{
    font-weight: 600;
}

.second-level{
    margin-left: 30px !important;
    display: flex !important;
    flex-direction: column;
    row-gap: 12px;
    font-weight: 400;
}

.third-level{
    margin-left: 30px !important;
}

.list-unit{
    position: relative;
    color: var(--icon-main-color);
    padding-left: 18px;
    margin: 0 !important;
    font-size: 16px !important;
}
.list-unit:before{
    font-weight: 400;
    font-size: 15px;
    line-height: 18px;
    content: ".";
    width: 6px;
    height: 6px;
    border-radius: 100%;
    position: absolute;
    top: -.3em;
    left: 0;
    transition: all .15s;
    outline: none;
    box-sizing: border-box;
}
.list-unit:hover{
    font-weight: 500 !important;
    font-size: 15px !important;
    line-height: 18px !important;
    color: #EEDBFF !important;
}

.content-header-link{
    color: var(--button-main-color) !important;
    transition: all .3s;
}

.content-header-link:hover{
    color: #EEDBFF !important;
}

.list-unit > .md-nav__link{
    font-weight: 400;
    font-size: 15px;
    line-height: 18px;
    color: var(--button-main-color);
    padding: 0;
    transition: all .3s ease-in-out;
}

.list-unit > .md-nav__link:hover{
    color: #EEDBFF !important;
}

.list-link{
    margin-top: 0 !important;
}

.tooltip {
    position: fixed;
    background-color: var(--tooltip-background-color);
    color: var(--tooltip-font-color);
    padding: 15px;
    font-size: 14px;
    border-radius: 8px;
    max-width: 600px;
}

.cloudsTable th,
td {
    padding: 2px 4px;
    border: 0.5px solid #ccc;
    vertical-align: middle !important;
    white-space: normal;
    word-wrap: break-word;
}

.cloudsTable td{
    padding: 0;
}

.cloudsTable{
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;
    border: .05rem solid var(--md-typeset-table-color);
    border-top: 0;
}

.cloudsTable th {
    font-size: 14px;
    font-weight:600;
}

.cloudsTable thead th{
    min-width: 18% !important;
    padding: 12px 0;
}
.cloudsTable thead th:nth-child(1) {
    width: 46% !important;
}

.cloudsTable thead th:nth-child(1) {
    font-size: 16px;
}

.cloudsTable td:nth-child(1) {
    font-size: 16px !important;
    font-weight:600;
}

.cloudsTable td div{
    padding: 12px;
    font-size: 14px;
    font-weight: 400;
}

.cloudsTable td div span{
    font-weight: 600;
}

.collapse-header{
    cursor:pointer;
    margin: 10px 0 0 0 !important;
    transition: .3s all ease-in-out;
}

.collapse-header:before{
    content: var(--arrow-right);
    vertical-align: middle;
}

.collapse-header.open:before{
    content: var(--arrow-down);
    vertical-align: middle;
}

.collapse-header:hover{
    color: rgb(82, 108, 254);
}

.collapse-content {
    width: 100%;
    color: #262626;
    transition: all 0.2s ease-in-out;
    opacity: 0;
    height: auto;
    max-height: 0;
    overflow: hidden;
    padding: 0;
}

.collapse-content p{
    color: var(--text-main-color);
}

.collapse-content li{
    color: var(--text-main-color);
}

.active {
    padding: 15px 0 0 10px;
    opacity: 1;
    max-height: 1000000px;
}

blockquote > p {
    margin: 4px 0;
}

.md-nav__link{
    padding: 0 16px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    align-items: center;
}


.md-nav__item--nested > label{
    background-color: var(--nav-link-background-color);
    padding: 8px 16px;
    border-radius: 8px;
    text-transform: uppercase;
    display: flex;
    gap: 8px;
    font-weight: 600;
    color: var(--nav-link-text-color);
    font-size: 12px;
    line-height: 16px;
}

.md-nav__item--active > label{
    background-color: var(--nav-link-active-background-color);
    padding: 8px 16px;
    border-radius: 8px;
    text-transform: uppercase;
    display: flex;
    gap: 8px;
    font-weight: 600;
    color: #1A2024;
    font-size: 12px;
    line-height: 16px;
}

.md-nav__item--nested > label:hover{
    color: #48535B;
}

.md-nav__item--active > label:hover{
    color: #FFF !important;
}

.md-nav__item--nested > label:focus{
    color: #48535B;
}

.md-nav__item--active > label:focus{
    color: #FFF;
}

.md-nav--primary > .md-nav__list > .md-nav__item > a{
    background-color: var(--nav-link-background-color);
    padding: 8px 16px;
    border-radius: 8px;
    text-transform: uppercase;
    display: flex;
    gap: 8px;
    font-weight: 600;
    color: var(--nav-link-text-color);
    font-size: 12px;
    line-height: 16px;
}

.md-nav--primary > .md-nav__list > .md-nav__item--active > a{
    color: #FFFFFF;
    background-color: var(--nav-link-active-background-color);
}

@media screen and (max-width: 76.1875em){
    [dir="ltr"] .md-sidebar--primary {
        left: -12.1rem;;
    }
}

.md-header, .md-nav__title {
    background-color: var(--color-button-pressed-primary) !important;
}

.md-nav__link {
    background: transparent !important;
    color: var(--color-text-primary) !important;
}

.md-nav__link:hover {
    color: var(--color-text-info) !important;
    background-color: var(--color-hover-tertiary) !important;
}

.md-nav__link--active {
    background-color: var(--color-active-tertiary) !important;
    color: var(--color-text-info) !important;
}

.heading_title{
    margin: 29px 0 !important;
    font-weight: 400 !important;
    font-size: 24px !important;
    line-height: 29px !important;
    color: var(--title-font-color) !important;
}

.heading_title:first-child{
    margin: 0 0 29px 0 !important;
}

.md-nav__item > .md-nav__link{
    margin: 0 0 8px 0 !important;
}

.content-block-only{
    max-width: 100%;
    display: flex;
    flex-direction: column;
}

.content-list-only{
    display:flex !important;
    flex-direction: row !important;
    column-gap: 136px;
}

.content-list-only-many{
    display:flex !important;
    flex-direction: row !important;
    justify-content: space-between;
    column-gap: 1%;
}

.list-unit-only{
    width: 260.25px;
}

@media screen and (max-width: 76.1875em){
    .content-title{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.content{
    display: flex;
    flex-direction: column;
    row-gap: 12px;
}

.fullWidthNav{
    width: 100%;
    margin:0;
    overflow: initial !important;
}

.navFixed{
    position: initial !important;
}

.banner-wrapper{
    background: linear-gradient(180deg, #7932B8 0%, #EEDBFF 52.08%, #F4E7FF 100%);
    border-radius: 10px;
    height: 812px;
    padding: 35px 28px;
    display: flex;
    flex-direction: column;
    width: 256px;
}

.banner-description{
    margin-top: 16px;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;

    letter-spacing: 0.006em;
    text-transform: uppercase;

    color: #F6F8F9;
}

.earth-image{
    position: relative;
    width: 140px;
    height: 136px;
    left: 72.4px;
    top: 40.6px;
}

.moon-image{
    position: relative;
    width: 52px;
    height: 52px;
    left: 38.5px;
    top: 0.1px;
}

.rocket-image{
    position: relative;
    width: 532px;
    height: 531px;
    left: -156px;
    top: 18px;
}

.saturn-image{
    position: relative;
    width: 85px;
    height: 65px;
    left: 120px;
    top: -435px;
}

.blue-image{
    position: relative;
    width: 113px;
    height: 114px;
    left: -16px;
    top: -229px;
}

@media screen and (min-width: 76.25em){
    .md-sidebar {
        height: auto;
    }
    .md-nav__title{
        display: none;
    }
}

.azureTable th,
td {
    font-size: 14px !important;
}

.hide{
    display: none !important;
}

.tableHeader{
    position: sticky;
    top: 57.6px;
    background-color: var(--table-header-background);
}

.tableTitle{
    display: flex;
    padding: 8px 16px;
    align-items: flex-start;
    border: 1px solid #ccc;
    border-bottom: 0;
    font-size: 20px;
    font-weight: 600;
}

.tableLegend{
    display: flex;
    padding: 8px 16px;
    border: 1px solid #ccc;
    border-bottom: 0;
    justify-content: space-between;
}

.tableLegendLine{
    display: flex;
    column-gap: 8px;
    align-items: center;
}

.tableLegendText{
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.tableIcon{
    height: 8px !important;
    width: 8px !important;
}

.tableSections{
    display: flex;
    height:58px;
    border: 1px solid #ccc;
    border-right: 0;
}

.tableSection{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-align: center;
    border-right: 1px solid #ccc;
}

.costerLegend{
    justify-content: normal;
    column-gap: 12px;
}

.menu-img{
    margin: 0 !important;
}

.finops-framework-card {
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    outline: 1px solid var(--border-main-color);
    transition: outline .1s ease-in-out;
}

.finops-framework-card:hover {
    outline: 2px solid var(--border-hover-color)
}

.finops-framework-image {
    background: #EBF7FF;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    min-height: 200px;
    border-radius: 8px 8px 0 0;
    img {
        margin: 0;
        width: auto;
        height: 85%;
    }
}

.finops-framework-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.finops-framework-card-content {
    padding: 24px;
    gap: 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
}

.finops-framework-card-content-paragraph {
    margin: 0;
    font-weight: 600;
    font-size: 20px;
    color: var(--button-main-color);
    line-height: 1;
}

.finops-framework-card-content-span {
    font-size: 16px;
    font-weight: 400;
    flex: 1 0 auto;
    color: var(--span-text-color);
}

.finops-framework-card-content-button {
    font-size: 14px;
    font-weight: 600;
    padding: 12px 16px;
    border-radius: 8px;
    line-height: 18px;
    transition: background-color .2s ease-in-out !important;
    background-color: var(--button-background-main-color);
    color: #fff !important;
}

.finops-framework-card-content-button:hover {
    background-color: #1985f3;
}

.finops-scopes-wrapper {
    display: grid;
    grid-template-areas: 'a b'
    'c c';
    gap: 16px;
}

.finops-scopes-card {
    display: flex;
    border-radius: 8px;
    flex-direction: column;
    background: #EBF7FF;
    padding: 30px;
    gap: 16px;
}

.finops-scopes-card-logo {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.finops-scopes-card-title {
    color: #1A2024;
    font-weight: 600;
    font-size: 20px;
    margin: 0 !important;
}

.finops-scopes-card-content {
    font-size: 16px;
    font-weight: 400;
    color: #4D565E;
}

.finops-principles-heading {
    background: #EBF7FFE5;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 32px;
    border-radius: 8px;
}

.finops-principles-heading-content-title {
    margin: 0 !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #1A2024 !important;
}

.finops-principles-heading-content-span {
    font-size: 16px;
    color: #4D565E;
}

.finops-principles-heading-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.finops-principles-heading-image {
    margin: 0 !important;
    min-height: 250px;
    height: 250px;
    img {
        height: 100%;
        width: auto;
        max-width: none;
    }
}

.finops-principles-wrapper {
    display: grid;
    margin-top: 16px;
    grid-template-areas: 'a b'
    'c c'
    'd e'
    'f f';
    gap: 16px;
}

.finops-principles-card {
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: #EBF7FF;
    padding: 24px;
}

.finops-principles-card-image {
    width: 60px !important;
    height: 60px;
    margin: 0 !important;
    img {
        width: 100%;
        height: 100%;
    }
}

.finops-principles-card-heading {
    margin: 0;
    font-weight: 600;
    font-size: 20px;
    color: #1A2024;
}

.finops-principles-card-list-wrapper {
    margin: 0 !important;
}

.finops-principles-card-list {
    margin: 0 !important;
    margin-left: 20px !important;
    font-size: 16px;
    color: #4D565E;
}

.finops-maturity-heading {
    background: #EBF7FFE5;
    padding: 24px;
    display: flex;
    gap: 32px;
    border-radius: 8px;
}

.finops-maturity-card {
    padding: 24px;
    background: #EBF7FF;
    border-radius: 8px;
    gap: 8px;
    display: flex;
    flex-direction: column;
}

.finops-maturity-card-head {
    display: flex;
    align-items: center;
    gap: 16px;
}

.finops-maturity-card-image {
    margin: 0 !important;
    height: 60px;
    width: 60px !important;
    img {
        width: 100%;
        height: 100%;
    }
}

.finops-maturity-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
}

.finops-maturity-card-title {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

.finops-maturity-card-list-wrapper {

}

.finops-maturity-card-list {
    margin: 0 !important;
    font-size: 16px;
    color: #4D565E;
}

.finops-maturity-card-list-head {
    font-size: 16px;
    color: #4D565E;
    font-weight: 600;
}

.finops-maturity-card-list-elem {
    margin: 0 !important;
    margin-left: 20px !important;
    font-size: 16px;
    color: #4D565E;
}

.finops-capabilities-head-title {
    font-size: 32px;
    font-weight: 600 !important;
    color: var(--button-main-color) !important;
    margin: 0 !important;
    margin-bottom: 16px !important;
    text-align: center;
}

.empty-h1-plug {
    display: none;
}

.finops-capabilities-card-image {
    width: 48px;
    height: 48px;
    margin: 0 !important;
}

.finops-capabilities-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.finops-capabilities-card-title {
    color: #1A2024;
    font-weight: 600;
    font-size: 18px;
    margin: 0 !important;
}

.finops-capabilities-card-sub {
    padding: 8px 16px;
    border-radius: 12px;
    background-color: #fff;
    font-size: 12px;
    width: 100%;
    color: #1A2024;
}

.finops-capabilities-footer {
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: space-between;
    flex: 1 0 auto;
    align-items: flex-start;
}

.finops-domains-heading {
    background: #EBF7FFE5;
    padding: 24px;
    display: flex;
    gap: 16px;
    border-radius: 8px;
    flex-direction: column;
    align-items: flex-start;
}

.finops-domains-list-content {
    margin-bottom: 0 !important;
}

.finops-domains-main-wrapper {
    margin-top: 32px;
    margin-bottom: 32px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.finops-domains-main-subtitle {
    font-size: 18px;
    color: #4D565E;
    font-weight: 600;
}

.finops-domains-main-opportunities-card {
    padding: 8px;
    gap: 4px;
    border-radius: 4px;
    display: flex;
    font-size: 12px;
    font-weight: 600;
    color: #4D565E;
    background: #FFFFFF;
    line-height: 1;
    align-items: center;
}

.finops-domains-main-opportunities {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(auto-fit, 48px);
    gap: 4px;
    flex: 1 0 auto;
}

.finops-domains-main-opportunities-card-image {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px;
    margin: 0 !important;
    svg {
        width: 32px !important;
        height: 32px !important;
    }
}

.finops-roles-heading-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 32px 0;
}

.finops-roles-heading-content {
    font-size: 16px;
    color: var(--span-text-color);
}

.finops-roles-card-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.finops-roles-card-content {
    flex: 1 0 auto;
    font-size: 16px;
    font-weight: 400;
    color: #4D565E;
}


.md-sidebar__scrollwrap:hover {
    scrollbar-color: var(--color-text-info) #0000 !important;
}