/* Картотека */

/*
.wrapper_settings_cards #WorkArea:not(.Old):not(.Profile_Registration)
*/
/*.Charts_Index, */
.Notes_Index {
    display: grid;

    grid-template-rows: repeat(3, min-content);
    grid-auto-columns: 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
}

/*.Charts_Index {
    grid-template-columns: 22% 1fr;
}

.Charts_Index {
    grid-template-areas:
        "SuportMenu SuportMenu"
        "MenuFlex Charts"
        "ML_TFoot ML_TFoot";
}*/

.Controls + .Cards_Index {
    margin-top: 1.5em;
}

.Cards_Index,
.Charts_Index {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5em;
}

.Cards_Index .Controls,
.Charts_Index .SuportMenu {
    flex: 1 100%;
    order: 1;
}

.Cards_Index .MenuFlex,
.Charts_Index .MenuFlex {
    flex: 1;
    order: 2;
}

.Charts_Index .Charts,
.Cards_Index .Card_List {
    flex: 3;
    order: 3;
}

.Charts_Index .ML_TFoot,
.Cards_Index .ML_TFoot {
    order: 4;
}

.Cards_Index .Card_List {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(40%, 1fr));
    gap: 1.6em;
}

.Card_List .Card_Robe {
    display: inherit;
    position: relative;
}

.Card_Robe .Badge + .Card{
    border-top-right-radius: 0;
}

.Card_Robe .Badge {
    position: absolute;
    bottom: 100%;
    left: 100%;
    border-radius: var(--border-radius-s) var(--border-radius-s) 0 0;
    padding: 0.1em 0.4em 0.2em 0.4em;
    white-space: nowrap;

    opacity: 0.8;

    color: #fff;
    transform: rotate(90deg);
    transform-origin: bottom left;
    pointer-events: none;

    box-shadow: 0 -0.6em 0.5em -0.4em rgba(0, 0, 0, 0.6) inset;
}

.Card_Robe .Badge .text {
    text-transform: uppercase;
    font-size: 0.8em;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
}

.Card_Robe .Badge.Bazi {
    background-color: var(--color-Fire);
}

.Card_Robe .Badge.FSI {
    background-color: var(--OffLine);
}

.Card_Robe .Badge.PCalendar {
    background-color: var(--OnLine);
}

.Card_Robe .Badge.QMDJ {
    background-color: var(--FullTime);
}

.Card_Robe .Badge.ZWDS {
    background-color: var(--Free);
}


.Cards_Index .Card_List .Card {
    display: inline-flex;
    flex-direction: column;
    grid-area: unset;
    align-items: unset;
    justify-content: flex-start;
    padding-bottom: 2.6em;
}

.Card figure.Chart swiper-container,
.Card figure.Chart img {
    width: 10em;
}

.Card figure.Chart img {
    object-fit: contain;
}

.Cards_Index .Card_List .Card .NoteIco {
    margin: -1px;
}

.Card .text {
    line-height: 1.2em;
}

.Cards_Index .Card .RulerPaidPeriod {
    font-size: 0.85em;
    margin: -1px -1px 0 -1px;
}

.Chart .RulerPaidPeriod dd .PaidMonth,
.Chart .RulerPaidPeriod dd .CurentM {
    border-top-left-radius: unset;
    border-top-right-radius: unset;
}

.Chart .RulerPaidPeriod dd .CurentM {
    padding-top: 0;
    border-top: unset !important;
}

.Card_List .Card .ChartFolder {
    padding: 0 0.8em;
}
.Card_List .Card .Details {
    display: grid;
    grid-template-columns: 1fr min-content;
    padding: 0 0.8em 0 0.8em;
    gap: 0.6em;

    grid-template-areas:
        "Main Chart"
        "Comment Comment";
}

.Card_List .Card .Details .Main {
    grid-area: Main;
    min-width: 10em; /* Нужно чтобы у заголовка появилось многоточие */
}

.Card_List .Card .Details .Chart {
    grid-area: Chart;
    order: 2;
}

.Card_List .Card .Chart thead td {
    font-size: 0.8em;
    text-transform: capitalize;
}

.Card_List .Card .Details .Chart .CL_GenMonth_H {
    font-size: 1.4em;
}

.Card_List .Card .Details .Comment {
    grid-area: Comment;
    margin: 0;
    order: 3;
}

.Notes_Index {
    grid-template-columns: 17% 1fr;
}

.Notes_Index {
    grid-template-areas:
        "SuportMenu SuportMenu"
        "MenuFlex Notes"
        "ML_TFoot ML_TFoot";
}

.Notes_Index .Notes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(48%, 1fr));
    gap: 1.2em 1em;

    margin-bottom: 2em;
}

.Notes_Index .Notes .Note .ChineseHour {
    display: inline-flex;
    gap: 0.2em;
}

.Notes_Index .Notes .Note .Time + .ChineseHour,
.Notes_Index .Notes .Note .ChineseHour + .Time {
    margin-left: 0.4em;
}

.Notes_Index .Notes .Note .ChineseHour > * {
    font-size: 1.3em;
}

.Card_Index .SuportMenu,
.Charts_Index .SuportMenu,
.Notes_Index .SuportMenu { grid-area: SuportMenu; }

.Charts_Index .TabBar.Charts {
    grid-area: Charts;
    margin-top: 0;
    align-items: flex-start;}

.Charts_Index .TabBar.Charts ~ .MenuFlex {
    margin-right: 1em;
}

.Charts_Index .TabBar.Charts ~ .MenuFlex li {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.Notes_Index .Notes { grid-area: Notes; }

.MenuFlex .ULCloadTegs li #AddFolder {
    margin-top: 1em;
}

#FoldersMenu li .Edit_ChartList,
#FoldersMenu li .Edit_FolderList {
    opacity: 0.5;
}

#FoldersMenu li:hover .Edit_ChartList,
#FoldersMenu li:hover .Edit_FolderList {
    opacity: unset;
}

.Charts_Index .TabBar.Charts ~ .MenuFlex li .DragAndDrop {
    font-size: 1.4em;
    position: absolute;
    right: 100%;
    margin-right: 0.1em;
}

.Charts_Index .TabBar.Charts ~ .MenuFlex li input {
    margin-bottom: 0;
    margin-top: 0;
}

nav #FoldersMenu li input.FolderName {
    display: inline-flex;
    font-size: 0.9em;
    padding-top: 0.4em;
    padding-bottom: 0.4em;
    flex: 1;
    overflow: hidden;
}

.Card_Index .Card_List ~ .MenuFlex li .Amount,
.Charts_Index .TabBar.Charts ~ .MenuFlex li .Amount,
.Notes_Index .MenuFlex li .Amount,
ul.ULSubMenu li a .Amount {
    font-size: 0.6em;
    position: relative;
    top: -0.8em;
    padding-left: 0.1em;
}

ul.ULSubMenu li:not(.Sel) a .Amount {
    color: #fffcf8;
}

.Card_Index .Card_List ~ .MenuFlex li .Amount,
.Charts_Index .TabBar.Charts ~ .MenuFlex li .Amount,
.Notes_Index .MenuFlex li .Amount {
    margin-left: 0.3em;
    color: var(--color-Gray-Dark);
}

.Card_Index .Card_List ~ .MenuFlex li .Amount + svg,
.Charts_Index .TabBar.Charts ~ .MenuFlex li .Amount + svg {
    margin-left: 0.3em;
}

.Card_Index .Card_List ~ .MenuFlex li .Delete,
.Charts_Index .TabBar.Charts ~ .MenuFlex li .Delete {
    cursor: pointer;
}

.Card_Index .Card_List .TabBar_Content_Wrap,
.Charts_Index .TabBar.Charts .TabBar_Content_Wrap {
    padding-top: 1.5em;
}

.Notes_Index .MenuFlex { grid-area: MenuFlex; }

.Card_Index .MenuFlex,
.Charts_Index .MenuFlex {
    grid-area: MenuFlex;
    position: sticky;
    top: 8em;
    align-self: flex-start;
    }

.Card_Index .ML_TFoot,
.Charts_Index .ML_TFoot,
.Notes_Index .ML_TFoot { grid-area: ML_TFoot; }


input.ChartSelector {
	display: none;
}

.Card_List .Item .DragAndDrop,
.ChartList .Item .DragAndDrop,
.CardsBZ .DragAndDrop {
    display: none;
    font-size: 1.6em;
    position: absolute;
    top: 0;
    left: 0;
}

.Card_List .Item:hover .DragAndDrop,
.ChartList .Item:hover .DragAndDrop,
.CardsBZ:hover .DragAndDrop {
    display: inline-block;
}

.Card_List .Item .DragAndDrop:hover,
.ChartList .Item .DragAndDrop:hover,
.CardsBZ .DragAndDrop:hover {
    display: inline-block;
}

.ChartList .Item .Details {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
}

.ChartList .Item .Details .Main {
    display: inline-flex;
    flex: 1;
    flex-direction: column;
}

.ChartList .Item .Details .Chart {
    order: 1;
}

.ChartList .Item .Details .Footer {
    display: flex;
    flex: 1 0 100%;
    order: 2;
}


.CardsBZ > Label {
    margin: -0.6em -0.8em -0.8em;
    padding: 0.6em 0.8em 0.8em;
    flex: 1;

    display: block;
}


.CardsBZ input.ChartSelector[type="checkbox"]+ Label,
input.ChartSelector[type="checkbox"] + .CardsBZ > Label {
	margin: -0.6em -0.8em -0.8em;
	padding: 0.6em 0.8em 0.8em;
    flex: 1;

    display: block;
}

input.ChartSelector[type="checkbox"]:checked + Label,
input.ChartSelector[type="checkbox"]:checked + .CardsBZ,
.CardsBZ.checked {
	border-color: #00b000;
	box-shadow: 0 0 0 1px #00b000;

	opacity: 1;
}

input.ChartSelector[type="checkbox"]:checked + Label:hover,
input.ChartSelector[type="checkbox"]:checked + .CardsBZ:hover,
.CardsBZ.checked:hover {
	border-color: #00b900;

	opacity: 1;

	-webkit-animation: AlphaMediumFIn 0.3s ease-out;
	animation: AlphaMediumFIn 0.3s ease-out;
}


@keyframes AlphaMediumFIn {
    0%{opacity:0.7;}
    100%{opacity:1;}
}

@-webkit-keyframes AlphaMediumFIn {
    0%{opacity:0.7;}
    100%{opacity:1;}
}

@keyframes AlphaMediumOut {
    0%{opacity:1;}
    100%{opacity:0.7;}
}

@-webkit-keyframes AlphaMediumOut {
    0%{opacity:1;}
    100%{opacity:0.7;}
}


.ChartList .Item {
    display: inline-flex;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}

.ChartList,
.Card_List,
.TabBar.Charts .TabBar_Content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(45%, 49%));
    gap: 1.2em 1em;

    /*
    display: flex;
    flex-wrap: wrap;
    gap: 0 1em;
    */
}


.CardsBZ, .CardsConnect {
	margin: 0 0.5em 1em 0.5em;
}

 .Card_List .Card,
 .ChartList .Item,
 .CardsBZ, .CardsConnect,
 .Notes .Note {
    border: 1px solid #efe8e0;
	border-radius:var(--border-radius-norm);

	background-color: #ffffff;
	text-align: left;
	text-decoration: none !important;
	line-height: 1.4em;
	position: relative;
	vertical-align: top;
 }


.Card.Bazi,
.Card_List .Card.Bazi {
    background-image: var(--Bazi-gradient);
    border-color: var(--Bazi);
    /*background-color: var(--Bazi-Trans);
    box-shadow: 0 0 0em 0.5em var(--Bazi-Trans) inset;*/
    }

.Card.FSI,
.Card_List .Card.FSI {
    border-color: var(--OffLine);
    background-image: var(--OffLine-gradient);
    /*background-color: var(--OffLine-Trans);
    box-shadow: 0 0 0em 0.5em var(--OffLine-Trans) inset;*/
    }

.Card.QMDJ,
.Card_List .Card.QMDJ {
    border-color: var(--FullTime);
    background-image: var(--FullTime-gradient);
    /*background-color: var(--FullTime-Trans);
    box-shadow: 0 0 0em 0.5em var(--FullTime-Trans) inset;*/
    }

.Card.ZWDS,
.Card_List .Card.ZWDS {
    border-color: var(--Free);
    background-image: var(--Free-gradient);
    /*background-color: var(--FullTime-Trans);
    box-shadow: 0 0 0em 0.5em var(--FullTime-Trans) inset;*/
    }

.Card.PCalendar,
.Card_List .Card.PCalendar {
    border-color: var(--OnLine);
    background-image: var(--OnLine-gradient);
    /*background-color: var(--OnLine-Trans);
    box-shadow: 0 0 0em 0.5em var(--OnLine-Trans) inset;*/
    }

  .ChartList .Item,
  .CardsBZ, .CardsConnect,
  .Notes .Note {
	padding: 0 0.8em 0.8em;
 }

 .Charts .CardsBZ,
 .Card_List .Card,
 .Notes .Note {
	overflow: hidden;
 }

 .PersonalChart_Ico img,
 img.PersonalChart_Ico {
     width: 1.0em;
     vertical-align: bottom;
 }

  .Chart:not(.PCh_Only) .PersonalChart_Ico,
  .CardsBZ:not(.PCh_Only) .PersonalChart_Ico {
    display:none;
    margin-left: 0.2em;
    margin-top: -0.1em;
 }

  .flex .CardsBZ,
  .ML_Table .CardsBZ,
  .TabBar_Content_Wrap .CardsBZ {
    flex: 1 0 auto;
    align-self: stretch;
	min-width: 15em;
    }

    .flex .CardsBZ,
    .ML_Table .CardsBZ {
        padding: 0.6em 0.8em 0.8em;
    }

    .TabBar_Content_Wrap .CardsBZ {
        width: unset;
        padding: 0.6em 0.8em 2.6em;
    }

  .ui-autocomplete .CardsBZ {
      border-radius: unset;
  }

 .flex.CardsBZ {
    flex: 1 0 auto;
    align-content: flex-start;
    flex-wrap: wrap;
   
	min-width: 15em;
    box-sizing: border-box;
    }

    .flex.CardsBZ .NoteIco {
        font-size: 0.8em;
    }

    .Chart .NoteIco a,
    .flex.CardsBZ .NoteIco a {
        padding-top: 0.3em;
    }

    .flex.CardsBZ .NoteIco:hover {
        font-size: 0.9em;
        backdrop-filter: var(--backdrop-filter-Menu);
        background-color: var(--color-BG-backdrop-White_Lite);

        -webkit-animation: ZoomIn_1em 0.3s ease-out;
    	animation: ZoomIn_1em 0.3s ease-out;
    }

    @keyframes ZoomIn{
	0%{
	    font-size: 0.8em;
    }
 	100%{
	    font-size: 0.9em;
    }
	}

.ui-dialog .flex.CardsBZ {
    flex: 0;
    margin: 1em 0 0 0;
    min-width: -webkit-calc(50% - 0.5em);
    min-width: calc(50% - 0.5em);
}

.ui-dialog #PMCardListDiv.flex {
    justify-content: space-between;
    padding-bottom: 0.5em;
}

.Card .MLToken_Wrapper,
.CardsBZ .MLToken_Wrapper {
    font-size: 0.9em;
}


.ChartsDescr {
    display: grid;
    grid-auto-flow: row dense;
    grid-template-columns: 1fr min-content;
    grid-template-rows: repeat(6, min-content);
    gap: 0em 1em;
    grid-template-areas:
        "Create Chart"
        "Title Chart"
        "BirthDay Chart"
        "LocaleSunTime LocaleSunTime"
        "BirthPlace BirthPlace"
        "UInfDat UInfDat";
}

.Create { grid-area: Create; }
.Chart { grid-area: Chart; }
.Title { grid-area: Title; }
.LocaleSunTime { grid-area: LocaleSunTime; }
.BirthDay { grid-area: BirthDay; }
.BirthPlace { grid-area: BirthPlace; }
.UInfDat { grid-area: UInfDat; }


.ChartList .Item .Chart,
.CardsBZ .Chart {
    font-size: 0.9em;
}


.ChartList .Item figure.Chart,
.CardsBZ figure.Chart {
    display: inline-flex;
    max-width: 9em;
    max-height: 9em;
    overflow: hidden;
}

.ChartList .Item figure.Chart img,
.CardsBZ figure.Chart img {
    width: 100%;
}

.ChartList .Item .Chart thead td,
.CardsBZ .Chart thead td {
    font-size: 0.8em;
    text-transform: capitalize;
}

.CardsBZ .Chart .CL_GenMonth_H,
.ChartList .Item .Chart .CL_GenMonth_H,
.CardsBZ .Chart .Hieroglyph,
.ChartList .Item .Chart .Hieroglyph {
    font-size: 1.4em;
    display: inline-block;
    padding: 0.05em;
}

.CardsBZ .Chart .EarthBranch .CL_GenMonth_H,
.ChartList .Item .EarthBranch .CL_GenMonth_H,
.CardsBZ .Chart .EarthBranch .Hieroglyph,
.ChartList .Item .Chart .EarthBranch .Hieroglyph {
    margin-top: 0.05em;
}

.CardsBZ .Chart .SkyColumn .CL_GenMonth_H,
.ChartList .Item .SkyColumn .CL_GenMonth_H {
    margin-top: 0.1em;
}

.CardsBZ .Create.Date,
.ChartList .Item .Create.Date {
    color: var(--color-Beige);
    font-size: 0.8em;
    }

.CardsBZ time,
.ChartList .Item time {
    font-size: 0.9em;
    }

.Notes_Index .Date {
    color: var(--color-Beige);
    font-size: 1em;
    margin-top: 0.8em;
    display: flex;
    align-items: center;
    }

.Notes_Index .Date .label {
    width: auto;
}

.Notes_Index .Comment textarea {
    flex: 1;
}

.Notes_Index .Title .NoteTitle {
    font-size: 1.2em;
    flex: 1;
}

.Card .Title,
.Chart .Title,
.CardsBZ .Title {
    display: flex;
    padding-top: 0.6em;
    overflow: hidden;
    gap: 0.2em;
 }

 .CardsBZ .title,
 .Card_List .Card .Title .Name,
 .CardsBZ .Title .Name {
    font-size: 1.5em;
    line-height: 1.2em;
    margin-bottom: 0.2em;
    }

 .CardsBZ .Title .Name,
 .Card_List .Card .Title .Name {
    display: inline-flex;
    gap: 0.4em;
    text-decoration: none;
    color: var(--color-Black);
    overflow: hidden;
 }

  .CardsBZ .Title .Name .text,
  .Card_List .Card .Name .text {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .Card_List .Card .Name .PersonalChart_Ico {
      line-height: inherit;
  }

  .CardsBZ .Title a.Name:hover,
  .Card_List .Card a.Name:hover {
      color: var(--color-Blue-hover);
      text-decoration: underline;
  }

 .CardsBZ .NoteIco.NI-TR ~ .Title,
 .Chart .NoteIco.NI-TR ~ .Title {
    padding-top: 1em;
    margin-bottom: 0.4em;
 }

 .CardsBZ .FormBlock {
    margin-left: 0;
    margin-bottom: 0;
 }

.CardsBZ .Comment,
.Card .Comment,
.Chart .Comment {
    margin: 1em 0 0 0;
}

.CardsBZ .Comment .label:not(.icon),
.Card .Comment .label:not(.icon),
.Chart .Comment .label:not(.icon) {
    font-size: 1.2em;
    width: auto;
    margin-bottom: 0.3em;
    justify-content: flex-start;
    align-items: baseline;
 }

.CardsBZ .Comment .label svg,
.Card .Comment .label svg,
.Chart .Comment .label svg {
    margin-right: 0;
    font-size: 1.0em;
    position: relative;
    bottom: -0.5em;
}

 .CardsBZ .Comment > .text,
 .Card .Comment > .text,
 .Chart .Comment > .text {
     display: block;
     hyphens: auto;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 14em;
    flex: 1 0 100%;
    padding-left: 2em;
    box-sizing: border-box;
    position: relative;
 }

 .CardsBZ .Comment > .text *,
 .Card .Comment > .text *,
 .Chart .Comment > .text * {
     display: contents;
 }

 .CardsBZ .Comment > .text:after,
 .Card .Comment > .text:after,
 .Chart .Comment > .text:after {
    content: "";
    display: block;
    position: sticky;
    width: 100%;
    height: 1em;
    left: 0;
    bottom: 0;
    background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
    background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
 }

 .CardsBZ .Title .Gender,
 .Card .Title .Gender,
 .Chart .Title .Gender {
    display: inline-flex;
    color: var(--color-Beige);
    position: relative;
 }


 .ChartFolder.FormBlock {
    align-items: baseline;
    margin-bottom: 0.5em;
 }

 .ChartFolder.FormBlock > .FormBlock {
     flex: 1 1;
 }

 .Chart .ChartFolder .label.icon,
 .Card .ChartFolder .label.icon,
 .TabBar.Charts .ChartFolder .label.icon {
     width: unset;
 }

.ChartFolder .AllBottonSimple {
    margin-left: 0.2em;
    align-self: center;
    opacity: 0.5;
 }

 .ChartFolder:hover .AllBottonSimple {
    opacity: 0.5;
 }

 .ChartFolder .AllBottonSimple svg {
    font-size: 1.4em;
    margin: 0;
 }

.ChartFolder .List {
    display: flex;
    margin-top: 0.2em;
    flex-wrap: wrap;
    flex: 1;
 }

.ChartFolder .List .Item {
    display: inline-flex;
    max-width: 30%;
    align-items: flex-end;
    align-self: center;
 }

.ChartFolder .List a {
    text-decoration: none;
 }

.ChartFolder .List .Item .text {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
 }

 .ChartFolder .List .Item:not(:first-child) {
     margin-left: 0.3em;
 }

.ChartFolder .List .Item:nth-last-child(n+3) .text:after {
    content: ",";
    color: var(--color-Black);
}

 .ChartFolder .List a:hover {
    text-decoration: underline;
 }

 .Chard_List .Card .Title .Gender svg,
 .ChartList .Item .Title .Gender svg,
 .CardsBZ .Title .Gender svg {
    font-size: 0.9em;
 }

 .ChartList .Item .BirthDay .label.icon svg,
 .Card_List .CArd .BirthDay .label.icon svg,
 .CardsBZ .BirthDay .label.icon svg {
     margin-top: -0.2em;
    font-size: 1.5em;
 }

.ChartList .Item .label {
    width: 9em;
    max-width: unset;
}

.ChartList .Item .Footer .label {
    width: unset;
}

.CardsBZ .label,
.Card_List .Card .label,
.TabBar .CardsBZ .label.icon,
.TabBar_Content_Wrap .TabBar_Content .CardsBZ .label {
    width: 7em;
    max-width: unset;
}

 .CardsBZ .BirthPlace .text {
    display: inline-flex;
    max-width: 51%;
    white-space: nowrap;
 }

 .Chart .FlagTxt,
 .Card .FlagTxt,
 .CardsBZ .FlagTxt {
    margin-right: 0.2em;
 }

.CardsBZ .BirthPlace .text .CityName {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
 }

.CardsBZ .BirthPlace .text .UTC {
    margin-left: 0.4em;
}

 .ChartList .Item .Correction,
 .CardsBZ .Correction {
     font-size: 0.8em;
     margin-left: 0.4em;
 }

 .ChartList .Item .title img,
 .ChartList .Item .Title img,
 .CArd_List .Card .Title img,
 .CardsBZ .title img,
 .CardsBZ .Title img {
    width: 1em;
    height: auto;
	height: -webkit-fill-available;
  	margin-bottom: -0.15em;
    margin-left: -0.2em;
    vertical-align: baseline;
    }

 .Chart:hover .title,
 .ChartList .Item:hover .title,
 .CardsBZ:hover .title {
 	color: var(--color-Blue-hover);
    }

 .ChartList .Item .Gender,
 .CardsBZ .Gender,
 .Chart .Gender {
     white-space: nowrap;
 }

 .ChartList .Item h3,  .ChartList .Item .h3,
 .CardsBZ h3, .CardsBZ .h3, .CardsConnect h3, .CardsConnect .h3 {
 	margin-top: 0.5em;
 }
 
 .CardsConnect {
    display: block;
 }

 .CardsBZ {
	display: inline-block;
	width: 30%;
}

.autocompletelist .CardsBZ {
    width: unset;
    display: block;
}

.ML_Table.Charts .CardsBZ {
    width: 43%;
}

.TabBar_Content .CardsBZ {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
    /*
    flex: 0 0 calc(50% - 2.3em);
    */
}

.ChartList .Item:hover,
 .CardsBZ, .CardsBZ:hover,
a.CardsBZ, a.CardsBZ:hover {
    color: var(--color-Black);
    }

.ChartList .Item:hover,
.Chart_List .Chart:hover,
.CardsBZ:hover {
	border: var(--border-style-Blue-hover);
	box-shadow: var(--box-shadow-Gray-Block);
}

.ChartList .Item:hover .NI-TR,
.Chart:hover .NoteIco,
.CardsBZ:hover .NI-TR {
    opacity: 1;
}

.ChartList .Item:focus,
.Chart_List .Chart:focus,
.CardsBZ:focus {
    pointer-events: auto;

	border: 2px solid #0082ff;
	box-shadow: 0px 0px 12px #d0d8df;
    }


.ChartList .Item:hover .NoteIco,
.NoteIco:hover,
.CardsBZ:hover .NoteIco {
	opacity: 1;

    -webkit-animation: AlphaFIn 0.3s ease-out;
    animation: AlphaFIn 0.3s ease-out;
}

 /* Конец Картотеки */

.ULMenuContent .NI-TR {
	top: 0
	right: 0;
}
.ULMenuContent .NI-TR *:last-of-type,
.ULMenuContent .NI-TR a:last-of-type  {
    border-radius: 0 var(--border-radius-inputs) 0 0;
 }

.ULMenuContent .NI-TR a:first-of-type,
.diplom-item .NI-TR,
.Avatar .NI-TR {
    border-radius: 0 0 0 var(--border-radius-inputs);
 }

.NI-TR2 a:last-of-type {
    border-radius: 0 var(--border-radius-inputs) var(--border-radius-inputs) 0;
 }

.NI-TR2 a:first-of-type {
    border-radius: var(--border-radius-inputs) 0 0 var(--border-radius-inputs);
 }

.NI-BR a:first-child {
    border-radius: var(--border-radius-inputs) 0 0 0;
 }


/* Когда телефон в режиме портрет */

@media screen
    and (max-width: 750px)
    and (max-aspect-ratio: 3 / 4)
    and (orientation: portrait) {


/*
@media screen
    and (orientation:portrait)
	and (-webkit-min-device-pixel-ratio: 1.25)
    and (min-width: 320px)
	and (max-width: 767px) {
*/

    .ML_Window #MPCDlgContentWrapper {
        /*
        flex-direction: column;
        */
        flex: 1 0 100%;
    }

    .ML_Window .flex.CardsBZ {
        width: auto;
        margin-right: 0.5em;
    }

    .flex.CardsBZ .NoteIco {
        font-size: 0.9em;
    }

    .Cards_Index .Card_List .Card,
	.wrapper_main_profile .CardsBZ,
    .Notes { font-size: 1.2em; }

    /*.Charts_Index {
        grid-template-areas:
        "SuportMenu"
        "Charts"
        "MenuFlex"
        "ML_TFoot";
        grid-template-columns: 1fr;
    }*/


    .Cards_Index .Card_List {
        display: flex;
        flex-direction: column;
        grid-template-columns: unset;
    }

    .Card_Robe .Badge {
        transform: unset;
        transform-origin: unset;
        left: unset;
        right: 0;
        padding: 0.2em 0.5em 0.2em 0.5em;
    }

    .Cards_Index .Card_List .Card {
        flex: 1 auto;
    }

    .Charts_Index #WorkArea {
        display: flex;
        flex-direction: column;
    }

    .Notes_Index .SuportMenu,
    .Card_Index .SuportMenu,
    .Charts_Index .SuportMenu {
        margin-bottom: 0;
    }

    .Charts_Index .TabBar.Charts .TabBar_Content_Wrap {
        padding-left: 0;
        padding-right: 0;
    }

    .TabBar.Charts .TabBar_Content {
        grid-template-columns: 1fr;
    }

    .TabBar.Charts .TabBar_Content .CardsBZ {
        width: unset;
    }

    .Notes_Index .SuportMenu #ContentSearchBlock,
    .Charts_Index .SuportMenu #ContentSearchBlock {
        max-width: none;
        padding-bottom: 0;
    }

    .TabBar_Content .CardsBZ {
        flex: 1;
    }

    .Notes_Index {
        grid-template-areas:
        "SuportMenu"
        "Notes"
        "MenuFlex"
        "ML_TFoot";
        grid-template-columns: 1fr;
    }

    .Notes_Index .Notes {
        grid-template-columns: 1fr;
        gap: 1em 0;
    }

}