@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,800&subset=cyrillic');

* {
    margin: 0;
    padding: 0;

    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}

html, body{
    height: 100%;
    min-height: 100%; !important;

    font-size: 13px;
}

.base-wrapper{
    background-color: #f1f1f1;
}

.base-wrapper .header-wrapper{
    padding: 20px;
    margin-bottom: 30px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    background-color: rgba(42, 80, 83, 1);
}
.base-wrapper .header-wrapper .navigation-wrapper{}
.base-wrapper .header-wrapper .navigation-wrapper ul{
    list-style: none;

    display: flex;
    align-items: center;
}
.base-wrapper .header-wrapper .navigation-wrapper ul li{
    margin-right: 20px;

}
.base-wrapper .header-wrapper .navigation-wrapper ul li a{
    text-decoration: none;
    transition: all .2s ease;
    color: white;
}
.base-wrapper .header-wrapper .navigation-wrapper ul li a:hover{
    opacity: .7;
}

.base-wrapper .header-wrapper .navigation-wrapper ul li.orders-button{}
.base-wrapper .header-wrapper .navigation-wrapper ul li.orders-button a{
    padding: 5px 15px;
    border-radius: 4px;
    border: none;

    background-color: rgba(50, 227, 227, 1);
    transition: all .2s ease;

    text-decoration: none;

    cursor: pointer;
    color: white;

    display: flex;
    align-items: center;
}
.base-wrapper .header-wrapper .navigation-wrapper ul li.orders-button a:hover{
    opacity: .7;
}
.base-wrapper .header-wrapper .navigation-wrapper ul li.orders-button a i{
    margin-top: 0px;
    margin-right: 5px;
}
.base-wrapper .header-wrapper .navigation-wrapper ul li.orders-button a span{
    margin: 0 10px 0 5px;
}

.base-wrapper .header-wrapper .log-info{
    display: flex;
    align-items: center;
    color: white;
}
.base-wrapper .header-wrapper .log-info .log-logout{
    margin-left: 15px;
}
.base-wrapper .header-wrapper .log-info .log-logout a{
    padding: 10px 30px;
    border-radius: 4px;
    border: none;

    background-color: rgba(50, 227, 227, 1);
    transition: all .2s ease;

    text-decoration: none;

    cursor: pointer;
    font-weight: bold;
    font-size: 10px;
    text-transform: uppercase;
    color: #2a5053;

    display: flex;
    align-items: center;
}
.base-wrapper .header-wrapper .log-info .log-logout a:hover{
    opacity: .7;
}
.base-wrapper .header-wrapper .log-info .log-logout a i{
    margin-right: 3px;
}


.base-wrapper .content-wrapper{
    padding: 0 20px 20px;
}

.base-wrapper .content-wrapper .order-container{
    background-color: white;
    border-radius: 4px;

    margin-bottom: 20px;
    padding: 10px;
}
.order-container .info-container{
    display: flex;
}
.order-container .info-container .order-counter-box{
    width: 10%;
    padding: 10px;
}
.order-container .info-container .order-counter-box .counter{
    font-size: 26px;
    font-weight: bold;

    color: #2a5053;

    display: flex;
    align-items: center;

    margin-bottom: 10px;
}
.order-container .info-container .order-counter-box .counter span{
    margin-left: 10px;
    overflow: hidden;
    border-radius: 4px;
    display: flex;
    max-width: 50px;
}
.order-container .info-container .order-counter-box .counter span img{
    width: 100%;
    height: auto;
}

.order-container .info-container .order-contacts-box{
    width: 40%;
    padding: 10px;
}
.order-container .info-container .order-contacts-box table{
    width: 100%;
    border-collapse: collapse;

    font-size: 12px;
    border-radius: 4px;
}
.order-container .info-container .order-contacts-box table tr td{
    padding: 5px;
    background-color: rgba(50, 227, 227, .1);
    border: 2px solid #FFFFFF;
}
.order-container .info-container .order-contacts-box table tr td.contacts-table-dark{
    background-color: #2a5053;
    color: white;
    font-weight: bold;
    font-size: 10px;
}
.order-container .info-container .order-products-box{
    width: 50%;
    padding: 10px;
}
.order-container .info-container .order-products-box table{
    width: 100%;
    border-collapse: collapse;

    font-size: 12px;
    border-radius: 4px;
}
.order-container .info-container .order-products-box table tr td{
    padding: 5px;
    background-color: rgba(50, 227, 227, .1);
    border: 2px solid #FFFFFF;
}

.order-container .info-container .order-products-box table tr td a{
    text-decoration: none;
    color: rgba(42, 80, 83, 1);

    border-bottom: 1px solid #2a5053;
}

.order-container .info-container .order-products-box table tr td.products-table-dark{
    background-color: #2a5053;
    color: white;
    font-weight: bold;
    font-size: 10px;
}
.order-container .control-container{
    padding-top: 10px;
}
.order-container .control-container form{
    display: flex;
    align-items: center;
}
.order-container .control-container button{
    padding: 10px 30px;
    border-radius: 4px;
    border: none;

    background-color: rgba(50, 227, 227, .3);
    transition: all .2s ease;

    cursor: pointer;
    font-weight: bold;
    font-size: 10px;
    text-transform: uppercase;
    color: #2a5053;

    display: flex;
    align-items: center;

    margin-right: 10px;
}
.order-container .control-container button:hover{
    opacity: .8;
}
.order-container .control-container button i{
    margin-right: 3px;
}


.all-products-table{
    margin-bottom: 20px;
}

.all-products-table .sort-name{}
.all-products-table .sort-name button{
    background: transparent;
    border: 0;
    font-family: 'Montserrat', sans-serif;
    color: white;
    cursor: pointer;
    font-weight: bold;
    transition: all .2s ease;
}
.all-products-table .sort-name button:hover{
    opacity: .7;
}
.all-products-table .copy-button{}
.all-products-table .copy-button button{
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all .2s ease;
}
.all-products-table .copy-button button:hover{
    opacity: .7;
}

.all-products-table .trash-button{}
.all-products-table .trash-button button{
    background: transparent;
    border: none;
    color: red;
    cursor: pointer;
    transition: all .2s ease;
}
.all-products-table .trash-button button:hover{
    opacity: .7;
}

.all-products-table .ap-header{
    background-color: #2a5053;

    color: white;
    font-weight: bold;
}
.all-products-table .ap-header td{
    padding: 5px 10px;
    border: 1px solid white;
}
.all-products-table .ap-product{
    background-color: rgba(50, 227, 227, .1);;
}
.all-products-table .ap-product td{
    padding: 5px 10px;
    border: 1px solid white;
}

.all-products-table .ap-product a{
    text-decoration: none;
    color: #2a5053;
    border-bottom: 1px solid #2a5053;
}

.all-products-table .ap-product .product-name{
    font-weight: bold;
}
.all-products-table .ap-product .product-name a{
    text-decoration: none;
    color: #2a5053;
}

.product-edit-wrapper{

}

input[type='number'] {
    -moz-appearance:textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.product-edit-wrapper input[type="text"],
.product-edit-wrapper input[type="number"],
.product-edit-wrapper select{
    padding: 10px 20px;
    border: 1px solid #3A539B;
    color: #3A539B;
    border-radius: 3px;

    width: 50%;
    background-color: white;
}

.product-edit-wrapper .product-name{
    margin-bottom: 30px;

    color: #3A539B;
}
.product-edit-wrapper .product-line{
    margin-bottom: 20px;
}
.product-edit-wrapper .product-line .namer{
    font-weight: bold;
    color: #3A539B;

    margin-bottom: 10px;
}

.product-edit-wrapper .product-line .edit-image-wrapper{
    padding: 20px 0;
}
.product-edit-wrapper .product-line .edit-image-wrapper .image-box{
    width: 264px;
}
.product-edit-wrapper .product-line .edit-image-wrapper .image-box input[type="submit"]{
    display: block;
    width: 100%;

    cursor: pointer;
}

.pagination{
    text-align: center;
    padding-top: 0px;
}
.pagination ul{
    list-style: none;

    display: flex;
    align-items: center;
    justify-content: center;
}
.pagination ul li{
    padding: 10px;
}
.pagination ul li.page-item.active{
    font-weight: bold;

    color: white;
    background-color: #2a5053;
    border-radius: 4px;
}

.pagination ul li a{
    text-decoration: none;
    color: #2a5053;

    font-weight: 600;
}


.catalog-panel{
    margin-bottom: 30px;
    display: flex;
    align-items: center;
}
.catalog-panel .panel-buttons{
    margin-right: 10px;
}
.catalog-panel .panel-buttons a{
    padding: 10px 30px;
    border-radius: 4px;
    border: none;

    background-color: rgba(50, 227, 227, .16);
    transition: all .2s ease;

    cursor: pointer;
    font-weight: bold;
    font-size: 10px;
    text-transform: uppercase;
    color: #2a5053;

    display: flex;
    align-items: center;

    text-decoration: none;
}
.catalog-panel .panel-buttons a:hover{
    opacity: .7;
}
.catalog-panel .panel-buttons a i{
    margin-right: 3px;
}

.order-table{
    width: 100%;
}
.order-table .order-table-tr .order-table-td{
    padding: 10px;
}
.order-table .order-table-tr .order-table-td .order-i .order-number{
    font-weight: bold;
    font-size: 16px;

    color: #1d68a7;

    margin-bottom: 10px;
}
.order-table .order-table-tr .order-table-td .order-i .order-date{
    font-size: 12px;
}
.order-table .order-table-bott td{
    padding: 10px;
    border-bottom: 1px solid #1d68a7;
}

.order-table .contacts-table{
    width: 100%;
    border-collapse: collapse;

    font-size: 12px;
}
.order-table .contacts-table tr td{
    padding: 5px;
    background-color: #E4F1FE;
    border: 2px solid #FFFFFF;
}
.order-table .contacts-table tr td.contacts-table-dark{
    background-color: #1d68a7;
    color: white;
    font-weight: bold;
    font-size: 10px;
}
.order-table .products-table{
    width: 100%;
    border-collapse: collapse;

    font-size: 12px;
}
.order-table .products-table tr td{
    padding: 5px;
    background-color: #E4F1FE;
    border: 2px solid #FFFFFF;
}
.order-table .products-table tr td.products-table-dark{
    background-color: #1d68a7;
    color: white;
    font-weight: bold;
    font-size: 10px;
}

.search-panel{
    flex-grow: 1;
}
.search-panel form{
    display: flex;
    align-items: center;

    width: 100%;
}
.search-panel .search-box{
    width: 90%;
    padding-right: 5px;
}
.search-panel form input[type="text"]{
    display: block;
    width: 100%;
    border: 1px solid #dddddd;
    border-radius: 4px;
    padding: 8px;
    font-family: 'Montserrat', sans-serif;
}
.search-panel form button{
    padding: 10px 30px;
    border-radius: 4px;
    border: none;
    background-color: rgba(50, 227, 227, .16);
    transition: all .2s ease;
    cursor: pointer;
    font-weight: bold;
    font-size: 10px;
    text-transform: uppercase;
    color: #2a5053;
    display: flex;
    align-items: center;
    text-decoration: none;
    width: 100%;
}
.search-panel form button:hover{
    opacity: .7;
}
.search-panel form button i{
    margin-right: 3px;
}

.excel-panel{
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}
.excel-panel .currency-panel{
    display: flex;
    align-items: center;
}
.excel-panel .currency-panel div{
    margin: 0 10px;
}

.auth-container{
    display: flex;
    align-items: center;
    justify-content: center;

    height: 100vh;
}
.auth-container .auth-box{
    max-width: 360px;
}
.auth-container .auth-box .big-header{
    font-size: 16px;
    font-weight: bold;

    background-color: #2a5053;
    color: white;
    padding: 20px;
    margin-bottom: 20px;

    border-radius: 4px;
}
.auth-container .auth-box .big-header a{
    color: white;
    text-decoration: none;
    border-bottom: 1px solid white;
}
.auth-container .auth-box .small-header{
margin-top: 5px;
    font-size: 14px;
    font-weight: lighter;
}

.auth-container .auth-box .row{
    margin-bottom: 15px;
}

.auth-container .auth-box .row label{
    margin-bottom: 5px;
    display: flex;
}

.auth-container .auth-box .row .form-check{
    display: flex;
    align-items: center;
}
.auth-container .auth-box .row .form-check label{
    margin-left: 5px;
    margin-bottom: 0;
}

.auth-container .auth-box input[type="email"],
.auth-container .auth-box input[type="password"]{
    display: block;
    width: 100%;
    border: 1px solid #dddddd;
    border-radius: 4px;
    padding: 10px;
    font-family: 'Montserrat', sans-serif;
}

.auth-container .auth-box button{
    padding: 10px 30px;
    border-radius: 4px;
    border: none;

    background-color: rgba(50, 227, 227, .16);
    transition: all .2s ease;

    cursor: pointer;
    font-weight: bold;
    font-size: 10px;
    text-transform: uppercase;
    color: #2a5053;

    display: flex;
    align-items: center;
}
.auth-container .auth-box button:hover{
    opacity: .8;
}
.auth-container .auth-box button i{
    margin-right: 3px;
}

@media screen and (min-width:320px) and (max-width: 780px) {

    .mobile-hide{
        display: none;
    }

    .base-wrapper .header-wrapper{
        align-items: flex-start;
    }

    .base-wrapper .header-wrapper .navigation-wrapper ul{
        flex-direction: column;
        align-items: flex-start;
    }

    .base-wrapper .header-wrapper .navigation-wrapper ul li{
        margin-right: 0;
        margin-bottom: 10px;
    }

    .base-wrapper .header-wrapper .navigation-wrapper ul li.orders-button a{
        padding: 8px 15px;
    }

    .order-container .info-container{
        flex-direction: column;
    }

    .order-container .info-container .order-counter-box{
        width: 100%;
        padding: 0;
        margin-bottom: 20px;
    }

    .order-container .info-container .order-contacts-box{
        width: 100%;
        padding: 0;
        margin-bottom: 20px;
    }

    .order-container .info-container .order-products-box{
        width: 100%;
        padding: 0;
        margin-bottom: 20px;
    }

    .order-container .control-container button{
        width: 100%;
        justify-content: center;
    }

    .order-container .control-container button:last-child{
        margin-right: 0;
    }

}

.excel-container{}
.excel-container .excel-header{
    font-weight: bold;
    margin-bottom: 20px;
}
.excel-container .excel-file{
    margin-bottom: 20px;
}

.excel-container .excel-button{}
.excel-container .excel-button button{
    padding: 10px 30px;
    border-radius: 4px;
    border: none;
    background-color: rgba(50, 227, 227, .3);
    transition: all .2s ease;
    cursor: pointer;
    font-weight: bold;
    font-size: 10px;
    text-transform: uppercase;
    color: #2a5053;
    display: flex;
    align-items: center;
    margin-right: 10px;
}
.excel-container .excel-button button i{
    margin-right: 3px;
}


/* Toggle Button */
.toggle-button-cover
{
    position: relative;
    box-sizing: border-box;

    height: 36px;
}


.knobs, .layer
{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.button
{
    position: relative;
    width: 74px;
    height: 36px;
    overflow: hidden;
}

.button.r, .button.r .layer
{
    border-radius: 100px;
}

.button.b2
{
    border-radius: 2px;
}

.checkbox
{
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 3;
}

.knobs
{
    z-index: 2;
}

.layer
{
    width: 100%;
    background-color: #f1f1f1;
    transition: 0.3s ease all;
    z-index: 1;
}

/* Button 1 */
.button .knobs:before
{
    content: 'Да';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 10px;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    padding: 9px 4px;
    background-color: #2a5053;
    border-radius: 50%;
    transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
}

.button .checkbox:checked + .knobs:before
{
    content: 'Нет';
    left: 42px;
    background-color: #f44336;
}

.button .checkbox:checked ~ .layer
{
    background-color: #fcebeb;
}

.button .knobs, .button .knobs:before, .button .layer
{
    transition: 0.3s ease all;
}

.callback-container{
    display: flex;
}
.callback-container .callback-box{
    width: 70%;
    padding-right: 20px;
}

.callback{
    background-color: white;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 4px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}
.callback .id{
    font-weight: bold;
    font-size: 18px;

    color: #2a5053;
    padding-right: 20px;
}
.callback .date{
    padding-right: 20px;
}
.callback .name{
    flex-grow: 1;
    padding-right: 20px;
}
.callback .phone{
    padding-right: 20px;
}
.callback .phone a{
    text-decoration: none;
    font-weight: bold;
    color: #2a5053;
    border-bottom: 1px solid #2a5053;
}
.callback .status{}
.callback .status button{
    padding: 10px 30px;
    border-radius: 4px;
    border: none;
    background-color: rgba(50, 227, 227, .3);
    transition: all .2s ease;
    cursor: pointer;
    font-weight: bold;
    font-size: 10px;
    text-transform: uppercase;
    color: #2a5053;
    display: flex;
    align-items: center;
    margin-right: 10px;
}

.callback-container .bot-box{
    width: 30%;
}
.callback-container .bot-box .instruction{
    margin-bottom: 20px;
}
.callback-container .bot-box .instruction div{
    margin-bottom: 10px;
}
.callback-container .bot-box .user-box{
    margin-bottom: 20px;
}
.callback-container .bot-box .user-box .add-bot-user{
    margin-bottom: 20px;
}
.callback-container .bot-box .user-box .add-bot-user a{
    padding: 10px 30px;
    border-radius: 4px;
    border: none;
    background-color: rgba(50, 227, 227, 1);
    transition: all .2s ease;
    text-decoration: none;
    cursor: pointer;
    font-weight: bold;
    font-size: 10px;
    text-transform: uppercase;
    color: #2a5053;
    display: flex;
    align-items: center;
    justify-content: center;
}
.callback-container .bot-box .user-box .add-bot-user a:hover{
    opacity: .7;
}
.callback-container .bot-box .user-box .add-bot-user a i{
    margin-right: 3px;
}
.callback-container .bot-box .user-box .bot-table{
    border-collapse: collapse;
}
.callback-container .bot-box .user-box .bot-table .tr-header{
    background-color: #2a5053;
    color: white;
    font-weight: bold;
}
.callback-container .bot-box .user-box .bot-table .tr-header td{
    padding: 5px 10px;
    border: 1px solid white;
}
.callback-container .bot-box .user-box .bot-table .tr-base{
    background: rgba(50, 227, 227, .1);
}
.callback-container .bot-box .user-box .bot-table .tr-base td{
    padding: 5px 10px;
    border: 1px solid white;
}
.callback-container .bot-box .user-box .bot-table .delete-button{}
.callback-container .bot-box .user-box .bot-table .delete-button button{
    background: transparent;
    color: red;
    border: none;
    transition: all .2s ease;
    cursor: pointer;
}
.callback-container .bot-box .user-box .bot-table .delete-button button:hover{
    opacity: .7;
}
.callback-container .bot-box .test-message{}
.callback-container .bot-box .test-message button{

    padding: 10px 30px;
    border-radius: 4px;
    border: none;
    background-color: rgba(50, 227, 227, .16);
    transition: all .2s ease;
    cursor: pointer;
    font-weight: bold;
    font-size: 10px;
    text-transform: uppercase;
    color: #2a5053;
    display: flex;
    align-items: center;
    text-decoration: none;
}
.callback-container .bot-box .test-message button:hover{
    opacity: .7;
}
@media screen and (min-width:320px) and (max-width: 780px) {

    .callback-container .bot-box{
        display: none;
    }

    .callback-container .callback-box{
        width: 100%;
        padding-right: 0;
    }

    .callback{
        flex-wrap: wrap;
    }
    .callback .id,
    .callback .phone,
    .callback .name,
    .callback .date{
        margin-bottom: 10px;
    }
    .callback .phone,
    .callback .name{
        width: 100%;
    }
}

.product-add-similar{}
.product-add-similar .add-similar{
    margin-bottom: 20px;
}
.product-add-similar .add-similar input[type="text"]{
    display: block;
    width: 20%;
    border: 1px solid #dddddd;
    border-radius: 4px;
    padding: 8px;
    font-family: 'Montserrat', sans-serif;
}
.product-add-similar .add-similar .input{
    margin-bottom: 10px;
}
.product-add-similar .add-similar button{
    padding: 10px 30px;
    border-radius: 4px;
    border: none;
    background-color: rgba(50, 227, 227, .16);
    transition: all .2s ease;
    cursor: pointer;
    font-weight: bold;
    font-size: 10px;
    text-transform: uppercase;
    color: #2a5053;
    display: flex;
    align-items: center;
    text-decoration: none;
}
.product-add-similar .add-similar button:hover{
    opacity: .7;
}
.product-add-similar .add-similar button i{
    margin-right: 3px;
}
.product-add-similar .similars{}
.product-add-similar .similars .similars-table{
    border-collapse: collapse;
}
.product-add-similar .similars .similars-table .header-tr{
    background-color: #2a5053;
    color: white;
    font-weight: bold;
}
.product-add-similar .similars .similars-table .header-tr td{
    padding: 5px 10px;
    border: 1px solid white;
}
.product-add-similar .similars .similars-table .base-tr{
    background: rgba(50, 227, 227, .1);
}
.product-add-similar .similars .similars-table .base-tr td{
    padding: 5px 10px;
    border: 1px solid white;
}
.product-add-similar .similars .similars-table .base-tr .delete-button{}
.product-add-similar .similars .similars-table .base-tr .delete-button button{
    background: transparent;
    color: red;
    border: none;
    cursor: pointer;
}

.news-container{}
.news-container .news-panel{
    padding-bottom: 20px;
}
.news-container .news-panel a{
    padding: 10px 30px;
    border-radius: 4px;
    border: none;
    background-color: rgba(50, 227, 227, .16);
    transition: all .2s ease;
    cursor: pointer;
    font-weight: bold;
    font-size: 10px;
    text-transform: uppercase;
    color: #2a5053;
    display: flex;
    align-items: center;
    text-decoration: none;
}
.news-container .news-panel a:hover{
    opacity: .7;
}