/* 
 * SIMAI Framework - Документация 
 *
 */
.sf-doc-area .sf-title{
margin-bottom: 1rem
}

.sf-code {
	background: rgba(0,0,0,.02);
	padding: 1rem;
	margin-bottom: 2rem;
}

.sf-title-bage {
	padding: 0.25rem .5rem;
	background: rgba(0,0,0,.05);
	border-radius: 5rem;
	vertical-align: super;
	font-size: .875rem;
}

.sf-clipboard {
    position: relative;
    float: right
}

.sf-clipboard+.sf-code {
    margin-top: 0
}

.btn-clipboard {
    position: absolute;
    top: .5rem;
    right: .5rem;
    z-index: 10;
    display: block;
    padding: .25rem .5rem;
    color: rgba(0,0,0,.5);
    cursor: pointer;
    background-color: transparent;
    border: 0;
    border-radius: .25rem
}

.btn-clipboard:hover {
    color: #F44336;
}

code:not([class]) {
    color: #c92a2a !important;
    background: #f1f3f5 !important;
	padding: 0.125rem 0.25rem;
	border-radius: 0.25rem;
}

.hljs {
    padding: 0 !important;
    color: inherit !important;
    background: transparent !important;
}

.hljs-string, .hljs-doctag {
    color: #bd4147 !important;
}


/* Удалить в версии 4.1. */


.sf-example-row .row+.row {
    margin-top: 1rem
}

.sf-example-row .row>.col,
.sf-example-row .row>[class^=col-] {
    padding-top: .75rem;
    padding-bottom: .75rem;
    background-color: rgba(68, 148, 211, .15);
    border: 1px solid rgba(68, 148, 211, .2);
}

.sf-example-row .flex-items-bottom,
.sf-example-row .flex-items-middle,
.sf-example-row .flex-items-top {
    min-height: 6rem;
    background-color: rgba(255, 0, 0, .1)
}

.sf-example-row-flex-cols .row {
    min-height: 10rem;
    background-color: rgba(68, 148, 211, .1)
}

.sf-sf-code {
    background-color: rgba(37, 129, 220, 0.15);
    border: 1px solid rgba(37, 129, 220, 0.15)
}
.example-container {
    width: 800px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 15px;
    padding-left: 15px;
    width: 100%
}

.example-row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px
}

.example-content-main {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px
}

@media (min-width:576px) {
    .example-content-main {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%
    }
}

@media (min-width:992px) {
    .example-content-main {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%
    }
}

.example-content-secondary {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px
}

@media (min-width:576px) {
    .example-content-secondary {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%
    }
}

@media (min-width:992px) {
    .example-content-secondary {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%
    }
}

.sf-example-container {
    min-width: 16rem;
    max-width: 25rem;
    margin-right: auto;
    margin-left: auto
}

.sf-example-container-header {
    height: 3rem;
    margin-bottom: .5rem;
    background-color: #fff;
    border-radius: .25rem
}

.sf-example-container-sidebar {
    float: right;
    width: 4rem;
    height: 8rem;
    background-color: #80bdff;
    border-radius: .25rem
}

.sf-example-container-body {
    height: 8rem;
    margin-right: 4.5rem;
    background-color: #957bbe;
    border-radius: .25rem
}

.sf-example-container-fluid {
    max-width: none
}

.sf-example {
    position: relative;
    padding: 1rem;
    margin: 1rem -15px;
    border: solid #f1f3f5;
	background: #fff;
    border-width: 1px 0 0
}

.sf-example::after {
    display: block;
    clear: both;
    content: ""
}

@media (min-width:576px) {
    .sf-example {
        padding: 1.5rem;
        margin-right: 0;
        margin-bottom: 0;
        margin-left: 0;
        border-width: 1px
    }
}

.sf-example+.clipboard+.sf-code,
.sf-example+.sf-code {
    margin-top: 0
}

.sf-example+p, .sf-example+h2, .sf-example+h3, .sf-example+h4, .sf-example+h5,  .sf-example+h5, .sf-example+h6 {
    margin-top: 2rem
}

.sf-code+p, .sf-code+h2, .sf-code+h3, .sf-code+h4, .sf-code+h5,  .sf-code+h5, .sf-code+h6 {
    margin-top: 2rem
}

.sf-example .pos-f-t {
    position: relative;
    margin: -1rem
}

@media (min-width:576px) {
    .sf-example .pos-f-t {
        margin: -1.5rem
    }
}

.sf-example>.form-control+.form-control {
    margin-top: .5rem
}

.sf-example>.alert+.alert,
.sf-example>.nav+.nav,
.sf-example>.navbar+.navbar,
.sf-example>.progress+.btn,
.sf-example>.progress+.progress {
    margin-top: 1rem
}

.sf-example>.dropdown-menu:first-child {
    position: static;
    display: block
}

.sf-example>.form-group:last-child {
    margin-bottom: 0
}

.sf-example>.close {
    float: none
}

.sf-example-type .table .type-info {
    color: #999;
    vertical-align: middle
}

.sf-example-type .table td {
    padding: 1rem 0;
    border-color: #eee
}

.sf-example-type .table tr:first-child td {
    border-top: 0
}

.sf-example-type h1,
.sf-example-type h2,
.sf-example-type h3,
.sf-example-type h4,
.sf-example-type h5,
.sf-example-type h6 {
    margin: 0
}

.sf-example-bg-classes p {
    padding: 1rem
}

.sf-example>img+img {
    margin-left: .5rem
}

.sf-example>.btn-group {
    margin-top: .25rem;
    margin-bottom: .25rem
}

.sf-example>.btn-toolbar+.btn-toolbar {
    margin-top: .5rem
}

.sf-example-control-sizing input[type=text]+input[type=text],
.sf-example-control-sizing select {
    margin-top: .5rem
}

.sf-example-form .input-group {
    margin-bottom: .5rem
}

.sf-example>textarea.form-control {
    resize: vertical
}

.sf-example>.list-group {
    max-width: 400px
}

.sf-example .fixed-top,
.sf-example .sticky-top {
    position: static;
    margin: -1rem -1rem 1rem
}

.sf-example .fixed-bottom {
    position: static;
    margin: 1rem -1rem -1rem
}

@media (min-width:576px) {
    .sf-example .fixed-top,
    .sf-example .sticky-top {
        margin: -1.5rem -1.5rem 1rem
    }
    .sf-example .fixed-bottom {
        margin: 1rem -1.5rem -1.5rem
    }
}

.sf-example .pagination {
    margin-top: .5rem;
    margin-bottom: .5rem
}

.sf-example-modal {
    background-color: #fafafa
}

.sf-example-modal .modal {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    z-index: 1;
    display: block
}

.sf-example-modal .modal-dialog {
    left: auto;
    margin-right: auto;
    margin-left: auto
}



.sf-code {
    padding: 1rem;
    margin: 0 -15px 1rem -15px;
    background-color: #f1f3f5;
    -ms-overflow-style: -ms-autohiding-scrollbar
}

@media (min-width:576px) {
    .sf-code {
        padding: 1.5rem;
        margin-right: 0;
        margin-left: 0
    }
}

.sf-code pre {
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
    background-color: transparent;
    border: 0
}

.sf-code pre code {
    font-size: inherit;
    color: #212529
}

.table-responsive .sf-code pre {
    white-space: normal
}

.fa-check{
    color: #96c13c;
}

/* Ринат */

.flex-style{
    background-color: rgba(68, 148, 211, .15);
    border: 1px solid rgba(68, 148, 211, .2);
}