.tab-pane {
	display: none; /* по умолчанию прячем все блоки */
}
.tab-pane.active {
	display: block; /* по умолчанию показываем нужный блок */
}

.main-post {
	border-bottom: 1px solid #4fc3f7; padding-bottom: 25px; margin-bottom: 25px;
}

.btn-zils {
	border:2px solid #4fc3f7; margin: 5px;
	    text-transform: uppercase;
}

.btn-zils:hover{background-color:rgba(79,195,247,.15); cursor:pointer;}
.btn-zils.active{background-color:#4fc3f7;border-color:#4fc3f7; color:#fff}

.ramis {
    border: 2px solid #4fc3f7;
    padding: 30px 50px 40px;
 
}

.koda-bloks {
    padding: 30px 30px 40px 30px;
    background-color: #444;
    border: 2px solid #444;
    width: auto;
    position: relative;
    white-space: nowrap;
 
}

.koda-bloks code {
    color: #fff;
    background-color: #444;
	font-size: 100%;
	font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
}

.btn-copy {
    background-color: #4fc3f7;
    border: none;
    color: #fff;
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 20px;
    padding: 5px 10px;
    transition: 0.3s;
}

.copied{color:#c8314e;position:absolute;top:-29px;right:0;font-size:16px;display:none}

.koda-bloks mark {
    background-color: #4fc3f7;
    padding: .2em .5em;
    color: #fff;
}

.code-block .parent {
    display: flex;
    border: 1px dotted #a6a6a6;
}

.code-block .child {
    min-width: 2.5rem;
    min-height: 2.5rem;
    padding: .5rem;
    background-color: #97dffa;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    border: 1px solid #fff;
	text-align: center;
}

.code-block .parent-inline {
    display: inline-flex;
}

.apraksts {margin-top: 25px}
.apraksts dd {
    padding-left: 30px;
}

.p-5 {
	padding: 5px !important;
}

#row-reverse .parent {
    display: flex;
    flex-direction: row-reverse;
    height: 100%;
}

#column .parent {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#column-reverse .parent {
    display: flex;
    flex-direction: column-reverse;
    height: 100%;
}

#nowrap .parent {
    display: flex;
    align-items: flex-start;
    flex-wrap: nowrap;
    height: 100%;
}

#wrap .parent {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    height: 100%;
}

#wrap-reverse .parent {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap-reverse;
    height: 100%;
}

#nowrap .child, #wrap .child, #wrap-reverse .child {
    width: 40%;
}

#row-nowrap .parent {
    display: flex;
    flex-flow: row nowrap;
    height: 100%;
}

#ff-column-reverse .parent {
    display: flex;
    flex-flow: column-reverse;
    height: 100%;
}

#column-wrap .parent {
    display: flex;
    flex-flow: column wrap;
    height: 100%;
}

#row-reverse-wrap-reverse .parent {
    display: flex;
    flex-flow: row-reverse wrap-reverse;
    height: 100%;
}

#row-nowrap .child, #ff-column-reverse .child, #column-wrap .child, #row-reverse-wrap-reverse .child {
    width: 40%;
    height: 40%;
}

#one .child-active {
    order: -1;
    background-color: #00cc99;
}

#two .child-active {
    order: 0;
    background-color: #00cc99;
}

#three .child-active {
    order: 1;
    background-color: #00cc99;
}

#flex-start .parent {
    display: flex;
    justify-content: flex-start;
    height: 100%;
}

#flex-end .parent {
    display: flex;
    justify-content: flex-end;
    height: 100%;
}

#js-center .parent {
    display: flex;
    justify-content: center;
    height: 100%;
}

#space-between .parent {
    display: flex;
    justify-content: space-between;
    height: 100%;
}

#space-around .parent {
    display: flex;
    justify-content: space-around;
    height: 100%;
}

#space-evenly .parent {
    display: flex;
    justify-content: space-evenly;
    height: 100%;
}

#al-flex-start .parent {
    display: flex;
    align-items: flex-start;
    height: 100%;
}

#al-flex-end .parent {
    display: flex;
    align-items: flex-end;
    height: 100%;
}

#al-center .parent {
    display: flex;
    align-items: center;
    height: 100%;
}

#baseline .parent {
    display: flex;
    align-items: baseline;
    height: 100%;
}

#stretch .parent {
    display: flex;
    align-items: stretch;
    height: 100%;
}

#baseline .child-active {
    height: 80%;
}

#als-flex-start .parent, #als-flex-end .parent, #als-center .parent, #als-baseline .parent, #als-stretch .parent {
    display: flex;
    height: 100%;
}
#als-flex-start .child-active {
    align-self: flex-start;
}

#als-flex-end .child-active {
    align-self: flex-end;
}

#als-center .child-active {
    align-self: center;
}

#als-baseline .child-active {
    align-self: baseline;
}

#als-stretch .child-active {
    align-self: stretch;
}

#alc-flex-start .child, #alc-flex-end .child, #alc-center .child, #alc-space-between .child, #alc-space-around .child, #alc-space-evenly .child, #alc-stretch .child {
    width: 30%;
}

#alc-flex-start .parent {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    height: 100%;
}

#alc-flex-end .parent {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-end;
    height: 100%;
}

#alc-center .parent {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    height: 100%;
}

#alc-space-between .parent {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    height: 100%;
}

#alc-space-around .parent {
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
    height: 100%;
}

#alc-space-evenly .parent {
    display: flex;
    flex-wrap: wrap;
    align-content: space-evenly;
    height: 100%;
}

#alc-stretch .parent {
    display: flex;
    flex-wrap: wrap;
    align-content: stretch;
    height: 100%;
}

#gr-0 .parent, #gr-1 .parent {
    display: flex;
    height: 100%;
}

#gr-0 .child-active {
    flex-grow: 0;
    background-color: #4cb9d6;
}

#gr-1 .child-active {
    flex-grow: 1;
    background-color: #4cb9d6;
}

#fs-0 .parent, #fs-1 .parent {
    display: flex;
    height: 100%;
}

#fs-0 .child, #fs-1 .child {
    width: 40%;
}

#fs-0 .child-active {
    flex-shrink: 0;
    background-color: #4cb9d6;
}

#fs-1 .child-active {
    flex-shrink: 1;
    background-color: #4cb9d6;
}

#fb-30 .parent, #fb-50 .parent, #fb-content .parent {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    height: 100%;
}

#fb-30 .child-active {
    flex-basis: 30%;
    background-color: #4cb9d6;
}

#fb-50 .child-active {
    flex-basis: 50%;
    background-color: #4cb9d6;
}

#fb-content .child-active {
    flex-basis: content;
    background-color: #4cb9d6;
}