/* That file is style, that could be the same for every our component without editing*/

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
img {
    max-width: 100%;
    vertical-align: middle;
    border: 0;
}
#vueproducts{
	text-align:right;
	direction:rtl;
}
input:focus {
    outline: none;
}
ul {
    list-style: none; /* Убрать маркеры у всех списков ul */
}
ul li {
    list-style: none; /* Убрать маркеры у элементов li внутри списка ul */
}

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
    float: right;
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}
.col-xs-1 {width: 8.33333333%;}.col-xs-2{width: 16.66666667%;}.col-xs-3{width:25%;}.col-xs-4{width:33.333333%;}
.col-xs-5 {width: 41.66666667%;}.col-xs-6 {width: 50%;}.col-xs-7 {width: 58.33333333%;}.col-xs-8 {width: 66.66666667%;}
.col-xs-9 {width: 75%;}.col-xs-10 {width: 83.33333333%;}.col-xs-11 {width: 91.66666667%;}.col-xs-12 {width: 100%;}

#vueproducts .cont.row{
    padding: 0 15px 15px;
    height: 100%;
    margin: 0;
}
#vueproducts .flex{
    display: flex;
}
#vueproducts #files{
    direction: ltr;
}
#vueproducts a:hover{
	text-decoration:none;
}
#vueproducts .menu ul {
    margin: 0;
    padding: 0;
}
#vueproducts .menu li {
    list-style: none;
    margin: 0;
}
#vueproducts .in-cont, #vueproducts .in-cont > .col-xs-12, #vueproducts .inside-content > div {
    height: 100%;
}
#vueproducts .inside-content {
    text-align: center;
    font-size: 14px;
    color: #183247;
    height: 100%;
}
#vueproducts .table {
    box-shadow: 0px 4px 10px #EAF2F7;
    padding: 0;
    height: 100%;
    margin: 0;
}
#vueproducts .wrapper {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 2%;
}
#vueproducts label {
    font-weight: 300;
    margin: 0 0 8px;
}
#vueproducts .sort select {
    width: auto;
    margin: 0 10px 0 0;
}
#vueproducts .popup input,#vueproducts input[type="color"],#vueproducts input[type="month"], #vueproducts input[type="text"], #vueproducts input[type="number"], #vueproducts input[type="email"], #vueproducts input[type="date"], #vueproducts input[type="datetime-local"], #vueproducts input[type="password"], #vueproducts select {
    height: 32px;
    min-width: 32px;
    border-radius: 4px;
    display: inline-block;
    border: 1px solid #cfd7df;
    color: #12344d;
    cursor: pointer;
    padding: 0 5px;
    font-size: 14px;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
    transition: .1s ease-in;
    background: #fff;
    width: 100%;	
}
#vueproducts input[type="file"]{
    background-color: #3B8CFF;
    border-color: #3B8CFF !important;
    color: #FFFFFF !important;
    transition: background 0.2s ease;
    -webkit-transition: background 0.2s ease;
}
#vueproducts .content .panel .btn, #vueproducts .panel .btn, #vueproducts #new, #vueproducts #export, #vueproducts #check {
    height: 32px;
    min-width: 60px;
    text-align: center;
    border-radius: 4px;
    display: inline-block;
    border: 1px solid #cfd7df;
    color: #12344d;
    cursor: pointer;
    padding-top: 5px;
    padding-left: 5px;
    padding-right: 5px;
    margin-left: 2px;
    font-size: 14px;
    font-weight: bold;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
    transition: .1s ease-in;
    background-image: linear-gradient(to bottom,#fff,#f3f5f7);
    background-color: #ececec;	
}
#spinner{
    background:#1382b940 url(../images/spinner.gif) no-repeat;
    background-position: center;
    background-size:50px;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
#vueproducts .panel .search {
    margin: 0;
    float: right;
    position: relative;	
}
#vueproducts .panel .search input[name="q"] {
    font-size: 16px;
    width: 90px;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    border: 1px solid transparent;
    background: transparent;
	box-shadow: initial;
    padding-right: 25px;
}
#vueproducts .search .btn {
    padding: 0;
    width: 20px;
    height: 20px;
    background: url(../images/search.png) no-repeat;
    background-size: 15px;
    border: none;
    font-size: 0;
    cursor: pointer;
    display: block;
    position: absolute;
    right: 0;
    top: 8px;
    box-shadow: none;
    min-width: auto;
}
#vueproducts .panel .search input[name="q"]:focus, #vueproducts .panel .search input[name="q"]:valid {
    width: 200px;
    border: 1px solid #cfd7df;
    background: #fff;
	padding-right: 40px;
}
#vueproducts .panel .search input[name="q"]:focus + .btn, #vueproducts .panel .search input[name="q"]:valid + .btn{
	right: 12px;
}
#vueproducts input::placeholder{
    color: #12344d;	
}
#vueproducts .pan {
    position: relative;
    float: right;
    margin: 0 0 0 15px;
    color: #12344d;	
}
#vueproducts .pan-head {
    font-size: 16px;
    padding: 7px 10px;
    cursor: pointer;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
#vueproducts .pan-head.active {
    background-color: #e5f4ff;
    color: #0085ff;
}
#vueproducts .pan-body.fil {
    width: 650px;
}
#vueproducts .pan-body {
    position: absolute;
    background: #FFFFFF;
    border: 1px solid #E8EFF2;
    box-shadow: 0px 4px 10px #EAF2F7;
    z-index: 9;
    right: 0;
    width: 322px;
    padding: 20px;
    display: none;
}
#vueproducts .pan-body.active {
    display: block;
}
#vueproducts .row{
	margin:0;
}
#vueproducts .btn i, #vueproducts #new i, #vueproducts #export i {
    margin: 0 5px;
}
#vueproducts .popup{
	display:none;
}
#vueproducts .table table, #vueproducts .popup table {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
    direction: rtl;
}
#vueproducts .table table td {
    color: #1E1F57;
    vertical-align: middle;
}
#vueproducts .table table th, #vueproducts .table table td, #vueproducts .popup table td, #vueproducts .popup table th {
    border: none;
    padding: 8px;
    margin: 0;
    text-align: center;
    color: #294254;
    font-size: 14px;
}
#vueproducts .table table th {
	border-bottom: 1px solid #E8EFF2;	
}
#vueproducts .table table tbody{
    border: 0;
}
#vueproducts .table table .gray td {
    background: #f9f9f9;
}
#vueproducts .table table .yellow td{
	background:#ffffad;
}
#vueproducts .table table .green td{
	background:#a4eaa4;
}
#vueproducts .table table .red td{
	background:#ffcbcb;
}
#vueproducts .table table td.total{
	font-weight:bold;
}
#vueproducts #products .table table .actions{
	width:8%;
}
#vueproducts .table table .ordering{
	width:4%;
}
#vueproducts textarea {
    font-size: 14px ;
    border: 1px solid #e5e5e5;
    padding: 12px;
    width: 100%;
    resize: none;
    height: 122px;
    color: #12344d;	
}
#vueproducts .popup input,#vueproducts .row-fluid select, #vueproducts .row-fluid input, #vueproducts .row-fluid textarea, #vueproducts .row-fluid .checkboxBox, #vueproducts .row-fluid > a {
    display: inline-block;
    width: 100%;
}
#vueproducts .row-fluid input[type="radio"],#vueproducts .row-fluid input[type="checkbox"]{
    display: initial;
    width: initial;	
    height: auto;
}
#vueproducts .row-fluid input[type="radio"]+label,#vueproducts .row-fluid input[type="checkbox"]+label{
    width: initial;
    margin: 4px 0 0;
}
#vueproducts .row-fluid {
    margin: 0 0 10px;
    position: relative;
    text-align: right;
}
#vueproducts .contfull .btn, #vueproducts .popup-basbox .btn, #vueproducts .head-user .user_oper a.btn, #vueproducts .table-in .btn {
    color: #fff;
    background-color: #264966;
    border: 1px solid #12344d;
    background-image: linear-gradient(to bottom,#264966,#12344d);
    transition: .1s linear;
}
#vueproducts .contfull .btn, #vueproducts .popup-basbox .btn, #vueproducts .head-user .user_oper a.btn, #vueproducts .btn {
    color: #fff;
    background-color: #264966;
    border: 1px solid #12344d;
    background-image: linear-gradient(to bottom,#264966,#12344d);
    transition: .1s linear;
}
#vueproducts .form .btn, #vueproducts .popup .btn{
    float: left;
    margin: 0;
}
#vueproducts .inside-content .alert {
    font-size: inherit;
    padding: 21px;
    text-align: right;
    position: absolute;
    height: auto;
    display: none;
    z-index: 999;
    top: -73px;
    width: calc(100% + 65px);
    left: -22px;
}
#vueproducts .row-fluid.total{
    font-size: 18px !important;
    color: #000;
    font-weight: bold;
}
#vueproducts .row-fluid.total label{
    font-size: 14px !important;
    color: #000;
    font-weight: bold;
}
#vueproducts .align-left{
	text-align:left;
}

#vueproducts .align-right{
	text-align:right;
}


#vueproducts .panel {
    background-color: #f5f7f9;
    border-bottom: 1px #cfd7df solid;
    box-shadow: 0 2px 4px 0 rgba(24,50,71,.08);
    padding: 14px 0;
    position: absolute;
    z-index: 999999;
    width: 100%;
    left: 0;
    top: 0px;
    height: 60px;
}

/*For gallery template*/
    #vueproducts .files .gallery .img{
        height: 80px;
        width: calc(50% - 10px);
    }
    #vueproducts .files .gallery .img .img-in{
        font-size: 10px;
    }
    #vueproducts .gallery .img{
        width: calc(33% - 25px);
        height: 180px;
        margin: 0 0 10px 10px;
        overflow: hidden;
        position:relative;
        display:inline-block;
        border-radius:4px;
        border:1px solid #183247;
    }
    #vueproducts .gallery .img img{
        max-height: 180px;	
    }
    #vueproducts #category .gallery .img{
        height: 120px;
    }
    #vueproducts #category .gallery .img img{
        max-height: 120px;
    }
    #vueproducts .gallery .img.main{
        border: 1px solid #c11515;	
    }
    #vueproducts .gallery .img .img-in{
        display:table;
        text-align:center;
        width:100%;
        height:100%;
    }
    #vueproducts .gallery .img a{
        display:table-cell;
        vertical-align:middle;
    }
    #vueproducts .gallery .img i.fa-trash{
        position:absolute;
        left:5px;
        top:5px;
        z-index:4;
        cursor:pointer;
    }
    #vueproducts .gallery .new{
        position:relative;
    }
    #vueproducts .gallery .new input{
        position:absolute;
        top:0;
        height:0;
        width:100%;
        height:100%;
        opacity:0;
        right: 0;
    }
    #vueproducts .gallery .img i.fa-plus{
        position:absolute;
        left:calc(50% - 5.5px);
        top:calc(50% - 7px);
        z-index:4;
        cursor:pointer;
    }
    .panel .col-xs-3, .panel .col-xs-6, .panel .col-xs-9{
        text-align: left;
    }
    .npr{
        padding-right: 0px;
    }
    .npl{
        padding-left: 0px;
    }