/* =============================================================== */

/* Начало RulerPaidPeriod стиля Линейки оплаченных периодв */

.RulerPaidPeriod {
    display: flex;
    justify-content: center;
    align-content: stretch;
    align-items: stretch;
    cursor: default;

    /*height: 3.0em;*/
    }

.ChartList .Item .RulerPaidPeriod,
.CardsBZ .RulerPaidPeriod {
    margin: -0.6em -0.8em 0.8em -0.8em;
    flex: 1 0 100%;
    border-bottom: 1px solid #d0d8df;
    }

.CardsBZ .MLToken_Wrapper {
    margin-left: 0;
    margin-right:0;
}

.ui-autocomplete .CardsBZ .RulerPaidPeriod {
    margin: 0;
}

.ScheduleMonth .RulerPaidPeriod	{
    border-top: 1px solid #d0d8df;
    margin: 0.4em 0 -0.4em 0;
    border-bottom: none;
    }

.ScheduleMonth .RulerPaidPeriod dd:first-of-type div { border-left: 0; }

.RulerPaidPeriod dd {
    display: flex;
    flex: 1 0;
    flex-direction: column;

    /* выравнивание контента по вертикали */
    justify-content: flex-end;
    align-content: stretch;
    align-items: stretch;

    position: relative;

    color: #708090;

    text-align: center;
    line-height: 1em;
    margin-right: -1px;

     }

.CardsBZ .RulerPaidPeriod div:not(.CurentM):last-of-type {
    filter: saturate(70%);
    -webkit-filter: saturate(0.7);
    -moz-filter: saturate(0.7);

    opacity: 0.6; }

.RulerPaidPeriod dd .yearStart, .RulerPaidPeriod dd .yearEnd,
.RulerPaidPeriod dd .month, .RulerPaidPeriod dd div:last-of-type {
    display: flex;
    flex: 50% 1 auto;
    justify-content: center;

    box-sizing: border-box;  }

.RulerPaidPeriod dd .yearStart, .RulerPaidPeriod dd .yearEnd {
    align-items: flex-start;

    font-weight: bold;
    color: #4a5560;
    line-height: inherit;
    border-left: 1px solid #4a5560;
    padding-bottom: 0.2em;

    font-size: 0.8em;}

.RulerPaidPeriod dd .month,
.RulerPaidPeriod dd div:last-of-type {
    align-items: center;

    border-left: 1px solid #d0d8df;
    border-right: 1px solid #d0d8df;
    border-top: 1px solid #d0d8df;

    padding-top: 0.2em;}

.CardsBZ .RulerPaidPeriod dd {
    font-size: 0.7em;
}

.Chart .RulerPaidPeriod dd div:last-of-type,
.CardsBZ .RulerPaidPeriod dd div:last-of-type {
   border-top: none;
   padding-bottom: 0.2em;
   line-height: 1.4em;
}

.CardsBZ .RulerPaidPeriod dd:last-of-type div:last-of-type {
    border-right: none;
}
.CardsBZ .RulerPaidPeriod dd:first-of-type div:last-of-type {
    border-left: none;
}

.RulerPaidPeriod dd .yearStart+.month, .RulerPaidPeriod dd .yearEnd+.month,
.RulerPaidPeriod dd .yearStart+div, .RulerPaidPeriod dd .yearEnd+div { border-left-color: #4a5560;  }

.ScheduleMonth .RulerPaidPeriod dd div:last-of-type {font-size: 0.8em; }


#powerTip .RulerPaidPeriod dd { border-bottom: none; }
#powerTip .RulerPaidPeriod dd:first-of-type div {
    border-left:none;
    border-bottom-left-radius:  0.4em;
    }

#powerTip .RulerPaidPeriod dd:last-of-type div {
    border-right:none;
    border-bottom-right-radius:  0.4em;
    }

#powerTip .RulerPaidPeriod { margin: 0.5em -11px -6px; }

#powerTip .RulerPaidPeriod dd .month,
#powerTip .RulerPaidPeriod dd div:last-of-type {
    padding: 0.1em 0.2em;
    background-color: #fff; }

.RulerPaidPeriod dd.Paid .month,
#powerTip .RulerPaidPeriod dd.Paid .month,
.RulerPaidPeriod dd.Paid div:last-of-type,
#powerTip .RulerPaidPeriod dd.Paid div:last-of-type {
    background-color: #2072cf;
    color: #fff;
    text-shadow: -1px -1px 0px rgba(0, 82, 175, 0.5); }


/* стили для персональго варианта карт */

.RulerPaidPeriod dd.ByChart div:last-of-type,
.RulerPaidPeriod dd.ByChart div.CurentM:last-of-type {
    color: #FFF;
    background-color: #00b900;}

/*
Если оплата за карту
*/
.RulerPaidPeriod dd.Paid.ByChart .month,
#powerTip .RulerPaidPeriod dd.Paid.ByChart .month,
#powerTip .RulerPaidPeriod dd.Paid.ByChart div:last-of-type {
    background-color: #00d000;
    text-shadow: -1px -1px 0px rgba(52, 139, 46, 0.5);}

input.ML_ByChart + label,
.checkable-list.inline-buttons input.ML_ByChart + label,
.checkable-list.inline-buttons input.ML_ByChart[type="checkbox"]:checked + label,
.checkable-list.inline-buttons input.ML_ByChart[type="checkbox"]:checked + label {
    color: #FFF;
    text-shadow: #348b2e -1px -1px 0px;
    background-color: rgba(32, 169, 26, 0.7);}

.checkable-list.inline-buttons input.ML_ByChart + label:before,
.checkable-list.inline-buttons input.ML_ByChart + p label:before { border-color: #c0ffd0; }

.checkable-list.inline-buttons input.ML_ByChart + label:hover:before,
.checkable-list.inline-buttons input.ML_ByChart + p label:hover:before {
    border-color: #fff;
}

.checkable-list.inline-buttons input.ML_ByChart + label { border-color: rgba(32, 169, 26, 0.7); }

.checkable-list.inline-buttons input.ML_ByChart + label:hover {
    background: none;
    background-color: rgba(32, 189, 26, 0.9);
    border-color: rgba(32, 169, 26, 0.9); }


input.ML_ByChart[type="checkbox"]:checked + label:after { border-color: #00b000;}
input.ML_ByChart[type="checkbox"]:checked + label:hover:before { border-color: #fff; }
/* Конец стили для персональго варианта карт */


/* Стиль для неоплаченного периода персона */
/*ul.checkable-list li:first-of-type > input.CheckBox[type="checkbox"] + label*/
input.ChGlowOrange:not(:checked) + label{
    border-style: solid;
    border-width: 1px; }

input.ChGlowOrange:not(:checked) + label,
.checkable-list.inline-buttons input.ChGlowOrange + label,
.checkable-list.inline-buttons input.ChGlowOrange[type="checkbox"]:checked + label {
    border-style: solid;
    border-width: 1px; }

select.ChGlowOrange,
input.ChGlowOrange:not(:checked) + label,
.checkable-list.inline-buttons input.ChGlowOrange + label,
.checkable-list.inline-buttons input.ChGlowOrange[type="checkbox"]:checked + label {
    border-color: #ff7d00;
    box-shadow: 0 0 0.4em rgba(255, 125, 0, 0.3) inset;
}

/* Конец Стиль для неоплаченного периода персона */

.RulerPaidPeriod dd.Paid:before {
    content: none;
}

.RulerPaidPeriod dd.Paid .CurentM {  background-color: #0082ff;
    color: #54606c; }

.CardsBZ:hover .RulerPaidPeriod div:last-of-type,
.CardsBZ .RulerPaidPeriod .CurentM div:last-of-type,
.CardsBZ .RulerPaidPeriod dd .CurentM {
    filter: saturate(100);
    -webkit-filter: saturate(1);
    -moz-filter: saturate(1);
    opacity: 1;
    }


/*
.RulerPaidPeriod .CurentM div:last-of-type,
.RulerPaidPeriod dd .CurentM {
    border: 1px solid #fff;
    box-shadow: 0 0 0.4em rgba(112, 128, 144, 0.7);
    border-radius:  0.4em;

    font-size: 1.3em;
    margin:0em -0.15em -0.2em -0.15em;

    height: 1.7em;
    line-height: 1em;

    z-index: 1;
    }
*/

.CardsBZ .RulerPaidPeriod .CurentM div:last-of-type,
.CardsBZ .RulerPaidPeriod dd .CurentM {
    border-radius: var(--border-radius-s);
    border: inherit;
    margin: 0 0 -0.2em 0;
    height: inherit;
    font-size: inherit;
    font-weight: bold;
}

/*.RulerPaidPeriod dd:before {
    content: "";
    display: block;

    position: absolute;

    margin: -0.1em -50%;

    bottom: 50%;
    left: 50%;

    border-top: 0.4em solid #d0d8df;
    width: 100%;
    height: 0;}

.RulerPaidPeriod dd.Paid:before { border-top-color: #00d000;  }*/

/* Конце стиля Линейки оплаченных периодв */