html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block
}

body {
    line-height: 1.2
}

ol {
    padding-left: 1.4em;
    list-style: decimal
}

ul {
    padding-left: 1.4em;
    list-style: square
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

ul {
    padding-left: 30px;
    margin: 10px
}

h3 {
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 15px
}

div {
    text-align: left
}

img, table {
    border: 0
}

form {
    margin: 0
}

* {
    box-sizing: border-box;
    outline: none
}


@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto-Regular.eot?#iefix') format('embedded-opentype'), url('/fonts/Roboto-Regular.woff') format('woff'), url('/fonts/Roboto-Regular.ttf') format('truetype'), url('/fonts/Roboto-Regular.svg#Roboto-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap
}


@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto-Regular.eot');
    src: url('/fonts/Roboto-Regular.eot?#iefix') format('embedded-opentype'),
   /* url('/fonts/Roboto-Regular.woff2') format('woff2'),*/
    url('/fonts/Roboto-Regular.woff') format('woff'),
    url('/fonts/Roboto-Regular.ttf') format('truetype'),
    url('/fonts/Roboto-Regular.svg#Roboto-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/*
@font-face {
    font-family: 'Unbounded';
    src: url('/fonts/Unbounded-Regular.eot');
    src: url('/fonts/Unbounded-Regular.eot?#iefix') format('embedded-opentype'),
        url('/fonts/Unbounded-Regular.woff2') format('woff2'),
        url('/fonts/Unbounded-Regular.woff') format('woff'),
        url('/fonts/Unbounded-Regular.ttf') format('truetype'),
        url('/fonts/Unbounded-Regular.svg#Unbounded-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter-Regular.eot');
    src: url('/fonts/Inter-Regular.eot?#iefix') format('embedded-opentype'),
        url('/fonts/Inter-Regular.woff2') format('woff2'),
        url('/fonts/Inter-Regular.woff') format('woff'),
        url('/fonts/Inter-Regular.ttf') format('truetype'),
        url('/fonts/Inter-Regular.svg#Inter-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto-Bold.eot');
    src: url('/fonts/Roboto-Bold.eot?#iefix') format('embedded-opentype'),
    url('/fonts/Roboto-Bold.woff2') format('woff2'),
    url('/fonts/Roboto-Bold.woff') format('woff'),
    url('/fonts/Roboto-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
*/

html, body {
    height: 100%;
    font-weight: 400
}

html {
    font-size: 100%;
    color: #37474F
}

body {
    margin: 0;
    padding: 0;
    /* background: rgba(15, 23, 177, 1); */
    background: #0073b5;
    overflow: scroll;
    overflow-x: hidden;
    font-family: Roboto
}

textarea, placeholder, select, option, select option {

    font-family: Roboto
}


.user_menu, .user_menu2 {
    display: block;
    z-index: 999;
    text-align: left;

    float: right;
    position: absolute;
    right: 50px;
    top: 170px;
max-width:300px;

    padding: 20px;
    box-shadow: rgba(0,0,0,.3) 0 0 1px;border-radius: 10% 13% 88% 14% / 15% 3% 10% 12%;
  /*  border-radius: 20px;

    border: 0px solid #9E9E9E;
    box-shadow: 0 0 4px rgba(102, 110, 119, 0.1);*/
    background: #fff;
    overflow: hidden;
}

.user_menu a, .user_menu2 a {
    font-size: 90%
}


.home_header {
    margin: auto;
    width: 200px;
    margin-top: 50px;
    font-size: 200%;
    background: url(/favicon.png) top left no-repeat;
    background-size: contain;
    padding-left: 70px;
}

.pale, .pale:hover {
    /* color: #A3A3A3; */
    color: #A3A3A3;font-size:70%;
    cursor: default;
    text-transform: none;
}


/*
.submit{width:100px;background:#e67e22;color:#fff;border:0;color:#ecf0f1;padding:6px;cursor:pointer;}

input{font-size:90%;padding:5px;border:1px solid #7f8c8d;background:#ecf0f1;transition:1s;box-shadow:0px 0px 0px 0px #2c3e50;}

input[type=password]:focus,input[type=email]:focus,input[type=url]:focus,input[type=number]:focus,input[type=date]:focus,input[type=text]:focus,select:focus,textarea:focus

{
    transition: 1s
;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3)
;
    background: #f1c40f
;
}
*/

hr {
    background: #95a5a6;
    color: #95a5a6;
    border: 0;
    height: 1px;
    clear: both;
    text-align: left;
}

.divider {
    display: block;
    border: 0;
    clear: both;
    /*border-bottom: 1px solid #0F17B1; /* #3498db */
    border-bottom:1px dashed #575757;
    margin-top: 10px;
    margin-bottom: 10px;
    width:90%;

}

strong {
    font-weight: 400
}

.h5 {
    height: 5px;
}

.h10 {
    height: 10px;
}

.h15 {
    height: 15px;
}


.h20 {
    height: 20px;
}

.h40 {
    height: 40px;
}

.h60 {
    height: 60px;
}

.w50{width:50%}


.bb {
    border-bottom: 1px solid #c0392b
}

.cp {
    cursor: pointer
}

.pf {
    position: fixed
}

.w80 {
    width: 80%
}
.w100 {
    width: 100px
}
.w170 {
    width: 170px !important
}
.ml20 {
    margin-left: 20px;
}

.mr20 {
    margin-right: 20px;
}

.cb {
    clear: both
}

.track_search {
    float: right
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(240,242,245,var(--fade)),
        rgba(240,242,245,0)
    );
    z-index: 999999;
}

#mobile_menu {
display:none;
    position: fixed;
    left: 20px;
    top: 20зч;

    width: 30px;
    height: 30px;
    border-radius: 10% 13% 88% 14% / 15% 3% 10% 12%;

    background: #455A64 url(/mobile_menu.png) 50% 50% no-repeat;
    background-size: 20px auto;

    box-shadow: 0 0 4px rgba(255, 255, 255, 1);
    cursor: pointer;

    z-index: 1000000;
}




#left_menu {
    z-index: 1000000;
    text-align: left;
    display: none;
    position: fixed;
    margin: 20px;margin-top:0;
    margin-left: 40px;
    top:20px;
    padding: 20px;
    min-width: 250px;
    border: 0px solid #9E9E9E;border-radius: 10% 13% 88% 14% / 15% 3% 10% 12%;
    box-shadow: 0 0 4px rgba(102, 110, 119, 0.1);
    background: #fff;
    overflow: hidden;
}

#naverh {
    transition: 0.4s;
    z-index: 9989;
    display: none;
    margin: 10px;
    float: right;
    bottom: 100px;
    right: -10px;
    width: 60px;
    height: 60px;
    background: url(/up.png) top center no-repeat;
    background-size: 40px auto
}

.cancel {
    transition: .5s;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    outline: none;
    padding: 10px;
    height: 40px;
    float: right;
    position: relative;
    cursor: pointer;
    color: #e74c3c;
    font-size: 120% !important;
    padding-top: 8px;
    margin-top: -13px;
    right: 0;
    margin-right: -13px
}

.cancel:hover {
    transition: .5s;
    color: #c0392b
}

a, a:visited {
    transition: .5s;
    text-decoration: none;
    color: #01579B;
}

a:hover, .lang a:hover {
    transition: .5s;
    text-decoration: none;
    color: #263238;
}

.lang {
    font-size: 80%;
    text-transform: lowercase;
}

.lang a {
    font-size: 100%;
    color: #0277BD;
}

.h10 {
    height: 10px
}

.h20 {
    height: 20px
}

.shapka {
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
    width: 100%;
    height: auto;
    background: #0073b5;
    padding: 20px;
    padding-bottom: 40px;
}


#content {
    padding: 20px;
    background: rgba(240, 242, 245, 1);
    border-radius: 20px;


    z-index: 997;
    position: relative;
/*    top: -20px; */
top:20px;
    width: auto;
    max-width: 100%;
    width: 100%;
    min-width: 60%;
    margin: 0;
    min-height: 50%;
    border: 0px solid red;

}

.content {
    font-size: 80%;
}

#title {
    text-transform: uppercase;
    font-family: Roboto;
    font-size: 100%;
    width: 100%;
}

#title::first-letter, .lang::first-letter {
    text-transform: uppercase
}

#title_comment {
    font-size: 80%;
    width: 80%;
    border-bottom: 0px solid #9E9E9E;
    margin-bottom: 20px;
}

.db_setup a {
    font-size: 80%
}

input, textarea, select, input[type=date] {
    font-size: 80%;
    background: #fff;
    transition: 0.5s;
    padding: 10px;
    border: 0;
    box-shadow: 0 0 4px rgba(102, 110, 119, 0.1);
    outline: none;
    border-bottom: 2px solid transparent;
    border-radius: 20px;
}


input[type=button], input[type=submit], input[type=reset],.submit {
    color: #fff;
    border-radius: 100px;
    background: #3498db;
    padding-left: 40px;
    padding-right: 40px;
    text-transform: uppercase;
    cursor: pointer;
    outline: none
}

input[type=date] {
    font-size: 120%;
}

input[type=password]:focus, input[type=button]:focus, textarea:focus, input[type=submit]:focus, input[type=reset]:focus, input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover, input[type=text]:focus, input[type=search]:focus {
    box-shadow: 0 0 4px rgba(102, 110, 119, 0.1);
    outline: none;
    transition: 1s;
    border-bottom: 2px solid #3498db;
}

input[type=submit]:focus, input[type=reset]:focus, input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover {
    background: #2980b9 !important;
    color: #fff;
    border-bottom: 2px solid transparent;
    transition: 2s
}

input[type=radio]:checked + label, input[type=checkbox]:checked + label {
    color: #008040;
    transition: .5s
}

.comment {
    font-size: 80%;
}

form * {
    font-size: 100%;
}

.db_setup_form input[type=text] {
    width: 50%;
    min-width: 350px;
}

#notice_red, #notice_green,.notice_red, .notice_green {
    display: none;
    width: fit-content;
    padding: 20px;
    margin: 20px;
    margin-left: 0;
    margin-right: 0;
    font-size: 90%;
    box-shadow: 0 0 4px rgba(102, 110, 119, 0.1);
}

#notice_red,.notice_red {
    color: #b71c1c;
    background-color: #ffebee;
}

#notice_green,.notice_green {
    color: #1B5E20;
    background-color: #E8F5E9;
}

#notice_red i {
    color: #263238
}

.comment i {
    color: #000;
    font-style: normal
}

.tree:not(input) {
    cursor: pointer
}

.required {
    background: url(/required.png) 96% 50% no-repeat #fff;
    border-radius: 100px;
}

.required:focus {
    background: url(/required.png) 110% 50% no-repeat #fff !important
}

.red2 {
    background: url(/required.png) 50% 50% no-repeat;
    width: 6px;
    height: auto;
    min-height: 6px;
    margin-right: 5px;
    float: left;
}
.warn{color:red;}
.radios_checkboxes {
    font-size: 110%
}

.fields {
    font-size: 110%;
    border-spacing: 2px;
    border-collapse: separate;
    width: 80%;
    min-width: 350px;
}

.fields td {
    font-size: 100%;
    text-align: left;
    padding: 10px;
    border: 1px solid #a3a3a3;
}

.td_header {
    font-size: 110% !important;
    background-color: #FFF8E1;
}

.fields_position {
    width: 100px;
}

.fields input[type=text] {
    width: 50px;
}

.fields label {
    font-size: 100%;
}

label.warn {
    color: #b71c1c;
}


.hidden {
    display: none !important
}

::placeholder {
    color: rgba(146, 146, 146, 1);
    font-size: 100%;
}


.header {
    font-size: 120%;
}

.mw200 {
    min-width: 200px;
}

.small {
    font-size: 70%;text-transform:none;font-weight:normal
}


.title {

    font-size: 130%;
    width: 80%;
    font-family: Roboto;
    text-transform: uppercase;
    margin-bottom: 20px;


}

.menu_title {

    font-size: 120%;

}

.manager {

    font-size: 90%;

}

.user {

    font-size: 110%;

}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    grid-auto-rows: min-content;
    grid-gap: 15px;
}


.cargo {
    z-index: 999;
    text-align: left;
    display: block;
    float: left;
    position: relative;
    padding: 20px;
    min-width: 270px;
    border: 0px solid #9E9E9E;
    box-shadow: 0 0 4px rgba(102, 110, 119, 0.1);
    background: #fff;
    overflow: hidden;
    border-radius: 20px;
}

.cargo .small {
    font-size: 83%;
}

.bull {
    color: rgba(85, 85, 85, 1);
}

.arrow2 {
    color: #263238;
    text-align: center;
    width: 100%;
    font-size: 170%;
    padding: 1px;
    clear: both;
}

.arrow1 {
    color: #546E7A;
    float: left;
    height: 20px;
    background: url(/transit_arrow.png) 1px 50% no-repeat;
    background-size: contain;
    width: 12px;
    padding: 1px;
    clear: both;
}

.status1 {
    background: url(/endpoint.png) 1px 50% no-repeat;
    padding: 5px;
    padding-left: 20px;
    text-align: left;
    font-size: 90%

}

.status2 {
    background: url(/in_transit.png) 0% 50% no-repeat;
    padding: 5px;
    padding-left: 20px;
    text-align: left;
    font-size: 90%
}

.status3 {
    background: url(/endpoint.png) 1px 50% no-repeat;
    padding: 5px;
    padding-left: 20px;
    text-align: left;
    font-size: 90%
}

.status0_div {

    background: #fff;
    border-left: 5px solid #000
}

.status1_div {

    background: #fff;
    border-left: 5px solid #F01414
}

.status2_div {
    background: #fff;
    border-left: 5px solid #FBC814

}

.status3_div {
    background: #fff;
    border-left: 5px solid #80C947
}

.status_admin_div {
    background: #fff;
    border-left: 5px solid #3498db
}

.bg1 {
    background: #E0F2F1;
    /*
    padding: 10px;
    box-shadow: 0 0 4px rgba(102, 110, 119, 0.1);
    */
}

.bg2 {
    background: #E0F7FA;
    /*
    padding: 10px;
    box-shadow: 0 0 4px rgba(102, 110, 119, 0.1);
    */
}


.red {
    color: red
}

.green {
    color: green
}


.m {
    border-radius: 100px;
}

#content .required, #content .m {
    margin-top: 3px;
}

@media screen and (min-width: 0) and (max-width: 1890px) {
    .track_search {
        float: left;
        width: 100%
    }


}

@media screen and (min-width: 763px) and (max-width: 1015px) {
    .track_search {
        float: left;
        width: 100%
    }
/*
    .m, .required {
        width: 100%
    }
*/

        #mobile_menu {
            display: block
        }

    .user_menu {
        display: none
    }

    .title, #title, #content {
        width: 100%
    }
/*
    #content .required, #content .m {
        width: 100%;
        margin-top: 3px;
    }
*/
    .home_header {
        margin-top: 90px;
        width: 300px;
    }

    input[type=submit] {
        margin-top: 10px;

    }

    #notice_red, #notice_green {
        width: 100%;
    }


}


.trash {
    filter: grayscale(100%);
    position: absolute;
    top: 5px;
    margin: 5px;
    margin-top: 15px;
    right: 5px;
    width: 20px;
    height: 20px;
    background: url(/trash.png) 50% 50% no-repeat;
    background-size: contain;
}

.trash:hover {
    filter: unset;
}

.trash_for_notice {
    position: relative;
    float: left;
    width: 20px;
    height: 20px;
    background: url(/trash.png) 50% 50% no-repeat;
    background-size: contain;
}

.a {
    display: table;
    width: 100%; /* Set the width as needed */
    height: 30px; /* Set your desired height */

}

.a span, .b {
    display: table-cell;
    vertical-align: middle; /* Vertically center the text */
    /*margin: 0;*/
}

.logo {
position:absolute;
    float: left;
    width: 100px;
}

.logo img {
    width: 100%;
    height: auto;
}

.exit {
    float: right;
    margin-top: 40px;
    margin-right:50px;
}

.exit a {
    border: 0;
    color: #fff;
    padding: 0;
    padding-right: 30px;
    background: url(/exit.png) 100% 50% no-repeat;
    background-size: contain;
    height: 20px;
}

.edit {
    float: right;
    margin-top: 40px;
    margin-right: 50px;
}

.edit a {
    border: 0;
    color: #fff;
    padding: 0;
    padding-left: 30px;
    background: url(/edit.png) 0% 50% no-repeat;
    background-size: contain;
    height: 20px;
}

.lang_switcher {

    float: right;
    margin-top: 40px;
    margin-right: 100px;
}

.lang_switch {
    text-transform: none;
    border: 1px solid #fff;
    border-radius: 20px;
    padding: 6px;
    padding-left: 10px;
    padding-right: 10px;
    color: #fff
}

.lang_switch:hover {
    color: #fff
}

.ui1 {
    float: left;
    margin-top: 13px;
    margin-left: 200px;
    font-family: Roboto;
    color: #fff
}

.ui1 div {
    clear: both;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
    margin-bottom: 5px;
}

.ui2 {
    float: left;
    margin-top: 23px;
    margin-left: 50px;
    font-family: Roboto;
    color: #fff
}

.ui2 div {
    clear: both;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
    margin-bottom: 5px;
}

.ui3 {
    float: left;
    margin-top: 13px;
    margin-left: 50px;
    font-family: Roboto;
    color: #fff
}

.ui3 div {
    clear: both;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
    margin-bottom: 5px;
}

.sklad {
    font-family: Roboto;
    text-transform: uppercase;
    font-size: 110%
}

.mt2 {
    margin-top: 2px;
}

.active_status {
    border-bottom: 2px solid #3498db;
    padding: 3px;
}

.parcel_date, .status1 span, .status2 span, .status3 span {
    color: rgba(20, 28, 197, 1)
}

.parcel_add_date {
    color: rgba(134, 134, 134, 1)
}

.parcel_finished {
color:#2E7D32;
}

.pc {
    display: block
}

.mobile {
    display: none
}

    .status_link {

        margin-right:20px;
    }

@media screen and (min-width: 0) and (max-width: 1400px) {

    .ui1 {
        margin-left: 50px;
    }

    .lang_switcher {
        margin-right: 50px;
    }
/*
    .edit {
        clear: both;
        float: right;
        margin-right: 0;
        margin-top: 10px;
    }

 */
    .user_menu{margin-top: 50px;}

}




@media screen and (min-width: 763px) and (max-width: 1015px) {

.exit{margin-top:-20px;margin-right:0px;}
.edit{margin-top:-55px;margin-right:0px;}



    .pc {
        display: none
    }

    .mobile {
        display: block
    }

    .lang_switcher {
    margin-top:-100px;
        margin-right: 0px;
    }

    .login_reg{margin-top:-60px !important}

    .pale {
        display: none
    }

    .status_links {
        line-height: 200%;

    }



    .lang_switch, .exit a, .shapka_mobile, .edit {
        font-size: 80%
    }

    .shapka_mobile {
        padding: 10px;
        margin: auto;
        border-radius: 20px;
        background: rgba(45, 52, 200, 1);
        width: 100%
    }

    .ui1_mob {
        margin: 5px;
        float: left;;
        font-family: Roboto;
        color: #fff;
        width: 45%
    }

    .ui1_mob div {
        clear: both;
        color: rgba(255, 255, 255, 0.5);
        font-weight: 500;
        margin-bottom: 5px;
    }

    .ui2_mob {
        margin: 5px;
        float: left;
        font-family: Roboto;
        color: #fff;
        width: 45%
    }

    .ui2_mob div {
        clear: both;
        color: rgba(255, 255, 255, 0.5);
        font-weight: 500;
        margin-bottom: 5px;
    }

    .ui3_mob {
        margin: 5px;
        float: left;
        font-family: Roboto;
        color: #fff;
        width: 45%
    }

    .ui3_mob div {
        clear: both;
        color: rgba(255, 255, 255, 0.5);
        font-weight: 500;
        margin-bottom: 5px;
    }

    .edit_mob {
        margin: 5px;
        float: left;
        color: #fff;
        width: 45%
    }

    .edit_mob a {
        border: 0;
        color: #fff;
        padding: 0;
        padding-left: 30px;
        background: url(/edit.png) 0% 50% no-repeat;
        height: 20px;
    }

    .sklad_mob {
        display: block;
        z-index: 999;
        text-align: left;

        padding: 20px;
        border-radius: 20px;
        /*min-width: 300px;*/
        border: 0px solid #9E9E9E;
        box-shadow: 0 0 4px rgba(102, 110, 119, 0.1);
        background: #fff;

    }

    .sklad_mob_title {
        font-family: Roboto;
        text-transform: uppercase;
        font-size: 130%
    }


}

/* homepage slider */

.slider_pages {
    padding: 1px;
    text-align: center;
}

.slider_pages div {
    transition: .5s;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    padding: 5px;
    margin: 8px;
    color: #fff;
    border: none;
    background: #fff;
    cursor: pointer;
    font-size: 15px;
    display: inline-block;
    border: 1px solid #b2b2b2
}

.active_page {
    transition: .5s;
    background: #3498db !important;
}


/* homepage from here to the bottom */

#trans_div {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    background: url(/skin/top_bg1.png) 50% 50% repeat;
    z-index: 1000
}


#forms{
display:none;
position:absolute;
top:170px;
    margin: auto;
    width: 100%;
    max-width: 400px;
z-index: 1001;
  left: 50%;
  transform: translateX(-50%);
}



#login_form {
    display: block;
}


#reg_ok_form{
display: none;
}

.login_form {
display: block;
    position: relative;
    top:10%;
    font-size: 80%;
    background: rgba(240, 242, 245, 1);
    color: #2c3e50;
    padding: 20px;
    margin: auto;
    width: 100%;
    max-width: 400px;
    /*margin-top: 50px;*/
    box-shadow: 0 0 4px rgba(102, 110, 119, 0.1);
    border-radius: 10px;
    z-index: 1001;
}

.login_form input {
    width: 100%;
    border-radius: 100px;
}

.login_form input[type=radio] {
    width: unset;
    border-radius: unset;
}


.login_form_header {
    font-size: 120%;
    font-family: Roboto;
    text-transform: uppercase
}

.sub_menu {
    margin-top: 20px;
    padding-bottom: 35px
}

.sub_menu a {
    color: #0F17B1;

    font-size: 110%;
    transition: 2s
}

.sub_menu a:hover {
    transition: 2s;
    color: #3498db;

}

.block {
    width: 100%;
    margin: 0;
    padding: 0;
}

.home_content {
    margin: auto;
    width: 100%;
    max-width: 1200px;
}

.home_shapka {
  /* background: url(/skin/top_bg2.png) 50% 50% repeat; */
}

.block1 {
  /*  background: url(/skin/top_bg1.png) 50% 50% repeat; */
    padding: 20px;
}


.home_logo {margin-top:10px;
    float: left;
    width: 100px;
}

.home_logo img {
    width: 100%;
    height: auto;
}

.home_social {
    float: left;
    margin-left: 100px;
    margin-top: 36px;
}

.home_phone {
    float: left;
    margin-top: 38px;
 /*   margin-left: 100px; */
  margin-left: 20px;
}

.home_phone a {
    border: 0;
    color: #fff;
    padding: 0;
/*    padding-left: 40px;
    background: url(/skin/phone.png) 0% 50% no-repeat;
    background-size: auto 100%; */
    height: 30px;
}

.login_reg {
    float: right;
    margin-top: 25px;
    background: #fff;
    padding: 15px;
    border-radius: 50px;
    color: #000;
    font-family: Roboto;
}

.login_reg a {
    color: #000;
    font-family: Roboto;
    text-transform: uppercase;
    font-size: 90%
}

.login_reg a:hover {
    text-decoration: none;
    transition: 1s;
    color: rgba(30, 160, 255, 1)
}

.block1a {
    text-align: center;
    padding: 60px;
    color: #fff
}

.block1a h1 {
    text-transform: uppercase;
    font-size: 300%;
    font-family: Roboto
}

.block1a h4 {
    text-transform: uppercase;
    font-size: 100%;
    font-family: Roboto
}

.marketplaces {
    background: #fff;
    padding: 15px;
    padding-left: 30px;
    padding-right: 30px;
    border-radius: 50px;
    margin: auto;
    text-align: center;
    width: fit-content;
}

.home_video {
    background: url(/skin/video_bg1.png) 0% 121% no-repeat;
    background-size: auto 86%
}

.home_video .home_content {
    padding: 60px;
    text-align: center
}

.home_video .home_content img {
    margin: auto;
    max-width: 70%
}

.home_video .home_content h4 {
    text-transform: uppercase;
    font-size: 180%;
    font-family: Roboto;
    color: #0F17B1
}

.home_video .home_content h5 {
    font-size: 90%;
    color: #575757;
    font-weight: 500
}


.home_why {
    background: url(/skin/why_bg2.png) no-repeat, url(/skin/why_bg1.png);
    background-size: auto 40%, cover;
    background-position: calc(50% + 300px) 0%, 50% 50%
}

.home_why .home_content {
    padding: 60px;
    text-align: center;
    padding-left: 140px;
    padding-right: 140px
}

.home_why .home_content h4 {
    text-transform: uppercase;
    font-size: 280%;
    font-family: Roboto;
    color: #fff
}

.home_why .home_content h5 {
    font-size: 90%;
    color: #fff;
    font-weight: 500
}

.home_why_block1 {
    border-radius: 20px;
    float: left;
    background: url(/skin/why_frame1.png) 50% 100% no-repeat;
    background-size: 92% auto
}

.home_why_block1 .inner1 {
    height: 95%;
    padding: 40px;
    border-radius: 20px;
    background: #fff url(/skin/div1_bg.png) 100% 70% no-repeat;
    background-size: auto 80%
}

.inner1 .text {
    float: left;
    width: fit-content;
    min-width: fit-content;
    width: 70%
}

.inner1 .text h4 {
    text-transform: uppercase;
    font-size: 90%;
    font-family: Roboto;
    color: #575757
}

.inner1 .text h3 {
    line-height: 10%;
    text-transform: uppercase;
    font-size: 200%;
    font-family: Roboto;
    font-weight: 800;
    color: #0F17B1
}

.inner1 .text h5 {
    font-size: 90%;
    color: #575757;
    font-weight: 500
}

.home_why_block2 {
    border-radius: 20px;
    float: right;
    background: url(/skin/why_frame1.png) 50% 100% no-repeat;
    background-size: 92% auto
}

.home_why_block2 .inner2 {
    height: 95%;
    padding: 40px;
    border-radius: 20px;
    background: #fff url(/skin/div2_bg.png) 100% 100% no-repeat;
    background-size: auto 90%
}

.inner2 .text {
    float: left;
    width: fit-content;
}

.inner2 .text h3 {
    margin: 0;
    padding: 0;
    line-height: 66%;
    text-transform: uppercase;
    font-size: 300%;
    font-family: Roboto;
    font-weight: 800;
    color: #0F17B1
}

.inner2 .text h4 {
    text-transform: uppercase;
    font-size: 90%;
    font-family: Roboto;
    color: #575757
}

.inner2 .text h5 {
    font-size: 90%;
    color: #575757;
    font-weight: 500
}

.center {
    text-align: center
}


.home_why_block3 {
    border-radius: 20px;
    width: 100%;
    margin: auto;
    background: url(/skin/why_frame2.png) 50% 100% no-repeat;
    background-size: 96% auto
}

.home_why_block3 .inner3 {
    padding: 40px;
    border-radius: 20px;
    background: #fff url(/skin/marketplaces2.png) 90% 50% no-repeat;
    background-size: auto 66%
}

.inner3 .text {
    float: left;
    width: fit-content;
}

.inner3 .text h3 {
    margin: 0;
    padding: 0;
    line-height: 66%;
    text-transform: uppercase;
    font-size: 200%;
    font-family: Roboto;
    font-weight: 800;
    color: #0F17B1
}

.inner3 .text h4 {
    text-transform: uppercase;
    font-size: 130%;
    font-family: Roboto;
    color: #575757
}

.inner3 .text h5 {
    font-size: 90%;
    color: #575757;
    font-weight: 500
}

.grid_why {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(48%, 1fr));
    grid-auto-rows: min-content;
    grid-gap: 2%;
}
.home_mobile,.mkt{display:none}

.home_feedback {
    background: url(/skin/feedback_bg1.png) no-repeat, url(/skin/feedback_bg2.png) no-repeat;
    background-size: auto auto, 260px auto;
    background-position: calc(50% - 300px) calc(0% - 300px), calc(50% + 50px) 100%
}

.home_feedback .home_content {
    padding: 60px;
    text-align: center;
    padding-left: 140px;
    padding-right: 140px
}

.home_feedback .home_content h4 {
    text-transform: uppercase;
    font-size: 280%;
    font-family: Roboto;
    color: #0F17B1
}

.home_feedback .home_content h3 {
    text-transform: uppercase;
    font-size: 120%;
    font-family: Roboto;
    color: #0F17B1
}

.reg_link,.reg_link:hover {
    background: #F01414;
    border-radius: 100px;
    color: #fff;
    font-family: Roboto;
    text-transform: uppercase;
    padding:15px;
    padding-left:50px;padding-right:50px;
}

.home_feedback .home_content h5 {
    font-size: 90%;
    color: #575757;
    font-weight: 500
}

.home_feedback .home_content .comment {
    display: block;
    height: 100%;
    width: 95%;
    align-items: center;
    position: relative;
    padding: 20px;
    border-radius: 20px;
    background: #fff;
    min-height: 200px;
    border: 1px solid #CFD8DC;
    /*box-shadow: 0 0 10px rgba(102, 110, 119, 0.5);*/
    overflow: hidden
}

.home_feedback .home_content .comment img {
    float: right;
    height: auto;
    max-width: 35%;
    position: absolute;
    /* top: 50%;*/
    right: 20px;
    /*transform: translateY(-50%);*/
    border-radius: 20px;max-height:calc(100% - 40px)
}

/*
.home_feedback .home_content .comment img {
    float: right;
    height: auto;
    max-width: 40%;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    border-radius: 20px;
}
*/


.home_feedback .home_content .comment .text {
    float: left;
    max-width: 55%;
    text-align: justify
}

.dashed {
    border-top: 1px dashed #575757;
    margin-top: 10px;
    padding-top: 10px;
    margin-bottom: 10px;
    text-align: left;
    width: fit-content;
}
.slider{padding-bottom:10px;}

/*
.slider {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(48%, 1fr));
    grid-auto-rows: min-content;
    grid-gap: 2%;
}
*/

.map{background:url(/skin/map.png) 50% 50%/cover no-repeat;min-height:495px;}



.footer{padding:60px;}

.login_reg_footer {
    float: right;
    background: #141CC5;
    padding: 15px;
    border-radius: 50px;
    color: #fff;
    font-family: Roboto;
}

.login_reg_footer a {
    color: #fff;
    font-family: Roboto;
    text-transform: uppercase;
    font-size: 90%
}

.login_reg_footer a:hover {
    text-decoration: none;
    transition: 1s;
    color: rgba(30, 160, 255, 1)
}


.bottom_logo {
    float: left;
    width: 100px;
}

.bottom_logo img {
    width: 100%;
    height: auto;
}
.address{text-align:center;margin:auto;width:fit-content;font-size:90%}
.login_store{display:none}

.mobile_home{display:none}
@media screen and (min-width: 0) and (max-width: 762px) {


  #content .required, #content .m {
    width: 100%;
    margin-top: 3px;
  }


.mobile_home,.mobile{display:block}
.pc_home,.pc{display:none}
/*
.home_social{ display:none;}
.home_phone{ display:none;}
*/

    .lang_switch, .exit a, .shapka_mobile, .edit,.login_reg {
        font-size: 70%
    }

.home_social,.home_phone{ float:right;margin-top:-10px; text-align:right}
.home_phone{ margin-right: 20px;}
.home_social{ margin-left: 2px;}

.lang_switcher{float:right;margin-right: 0px;margin-top:-20px;text-align:right;border:0px solid #fff}
.exit{margin-right: 0px;margin-top:-90px;}
.edit{margin-right: 0px;margin-top:-60px;}
.login_reg{margin-right: 0px;margin-top:-90px;}


.block1a h1{font-size:200%}
.marketplaces{width:90%}
.marketplaces img {width:100%;height:auto;}
.home_why .home_content h4{font-size:150%}
.home_why .home_content h5{font-size:80%}

.home_why .home_content {padding:unset;padding-top:40px;padding-bottom:40px;}


.grid_why {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
    grid-auto-rows: min-content;
    grid-gap: 0%;
    width:100%;
}
.grid_why .home_why_block1{position:relative;display:block;width:98%;margin:0;margin:auto;float:unset;}
.grid_why .home_why_block2{position:relative;display:block;width:98%;margin:0;margin:auto;float:unset;}
.home_why_block3{position:relative;display:block;width:98%;margin:0;margin:auto;float:unset;}
.grid_why,.home_why_block3{font-size:70%;}
.home_why_block3 .inner3{background: #fff}

.mkt{margin:auto;width:100%;margin-top:40px;display:block}
.mkt img{width:100%;height:auto;}

.home_feedback .home_content h4{font-size:150%}
.home_feedback{font-size:100%;}

.home_feedback .home_content {padding:unset;padding-top:40px;padding-bottom:40px;padding-left:10px;}
.home_feedback .home_content h3{font-size:100%}
.footer .home_content .bottom_logo{margin: auto;clear:both;text-align:center;display:block}
.bottom_logo{float:unset;display:block;margin: auto;clear:both;text-align:center;width:100%;}
.bottom_logo img{margin: auto;clear:both;text-align:center;max-height:40px;width:auto;margin-bottom:40px;}
.home_video .home_content h4{font-size:100%;}
.login_reg_footer{display:none}
}

#video-container {cursor:pointer;background:url(/skin/video_bg2.png) 50% 50% no-repeat;background-size:130% 132%;max-width:70%;width:70%;height:auto;display:block;margin:auto;overflow:hidden;border-radius:20px;}
#video-container video{display:block;width:100%;border-radius:20px;opacity:0;transition: opacity 1s;}

@media screen and (min-width: 0) and (max-width: 762px) {
        #mobile_menu {
            display: block
        }

    .user_menu {
        display: none
    }

.home_video .home_content{padding:20px;padding-top:60px;padding-bottom:60px;}
#video-container {width:100%;max-width:100%;background:url(/skin/video_bg2.png) 50% 50% no-repeat;background-size:130% 130%;}
}



.anketa{font-size:120%}
.small_anketa{font-size:90%}


.bold{font-weight:bold}







.blue,.blue_link{width:fit-content;box-shadow: rgba(0,0,0,.3) 0 0 1px;border-radius: 10% 13% 88% 14% / 15% 3% 10% 12%;background: #E0F7FA;padding:20px;margin-bottom:20px;}
.blue_link,.blue_link:visited{float:left;background:#3498db;margin-right:10px;padding:10px;color:#fff}
.blue_link:hover{background:#E74C3C;color:#fff}

.active{background:#2980b9;display:inline-block}
.active:hover{background:#2980b9}
.pointer{cursor:pointer}

label{display:inline-block; margin-left:5px; vertical-align:top;}

.abonement{cursor:pointer;width:fit-content;box-shadow: rgba(0,0,0,.3) 0 0 1px;border-radius: 10% 13% 88% 14% / 15% 3% 10% 12%;background: #FFFF8D;padding:20px;margin-bottom:20px;}

.popup21 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  padding: 15px;
  border-radius: 10px;
  display: none;
  z-index: 1000;
  width: 90%;
  max-width: 320px;
}

.popup2 {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
    background: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  padding: 15px;
  border-radius: 10px;
  display: none;
  z-index: 1000;
  width: 90%;
  max-width: 320px;
}

/* files_list.php */

.fl-page-wrap {
    padding: 20px;
    background: rgba(240, 242, 245, 1);
    border-radius: 20px;
    position: relative;
    top: 20px;
    width: calc(100% - 40px);
    max-width: 1200px;
    margin: 0 auto 40px auto;
    min-height: 50%;
    color: #37474F;
    font-family: Roboto, Arial, sans-serif;
    line-height: 1.2;
}

.fl-page-title {
    text-transform: uppercase;
    font-family: Roboto, Arial, sans-serif;
    font-size: 130%;
    margin-bottom: 20px;
    color: #37474F;
}

.fl-files-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    grid-auto-rows: min-content;
    grid-gap: 15px;
}

.fl-file-card {
    background: #fff;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 0 4px rgba(102, 110, 119, 0.1);
    transition: .5s;
    border-left: 5px solid #3498db;
    overflow: hidden;
    color: #37474F;
}

.fl-file-card.fl-clickable {
    cursor: pointer;
}

.fl-file-card.fl-clickable:hover {
    background: #E0F7FA;
}

.fl-file-card.fl-not-clickable {
    cursor: default;
    border-left-color: #CFD8DC;
}

.fl-file-card-title {
    font-size: 120%;
    text-transform: uppercase;
    margin-bottom: 10px;
    color: #37474F;
}

.fl-file-card-desc {
    font-size: 90%;
    color: #575757;
    max-height: 58px;
    overflow: hidden;
}

.fl-file-card-file {
    margin-top: 15px;
    font-size: 80%;
    color: rgba(134, 134, 134, 1);
    word-break: break-all;
}

.fl-empty-list {
    background: #fff;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 0 4px rgba(102, 110, 119, 0.1);
    color: #37474F;
}

.fl-info-overlay {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2147483647;
    background: rgba(0, 0, 0, 0.75);
}

.fl-info-box {
    position: absolute;
    left: 10%;
    top: 10%;
    width: 80%;
    height: 80%;
    background: rgba(240, 242, 245, 1);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
}

.fl-info-scroll {
    height: 100%;
    overflow-y: auto;
    padding: 30px;
    padding-top: 60px;
}

.fl-info-title {
    font-size: 160%;
    text-transform: uppercase;
    margin-bottom: 20px;
    color: #37474F;
}

.fl-info-description {
    display: none;
    background: #fff;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 0 4px rgba(102, 110, 119, 0.1);
    color: #37474F;
    font-size: 100%;
    line-height: 1.45;
}

.fl-info-video-wrap {
    display: none;
    margin-top: 20px;
    background: #000;
    border-radius: 20px;
    overflow: hidden;
}

.fl-info-description + .fl-info-video-wrap {
    margin-top: 20px;
}

.fl-info-description[style*="display: none"] + .fl-info-video-wrap {
    margin-top: 0;
}

.fl-info-video-wrap video {
    display: block;
    width: 100%;
    max-height: 55vh;
    background: #000;
}

.fl-modal-close {
    position: absolute;
    right: 10px;
    top: 8px;
    z-index: 4;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 32px;
    cursor: pointer;
    padding: 0;
    transition: .5s;

    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-family: Arial, sans-serif;
}

.fl-modal-close:hover {
    background: #b00000;
}

.fl-nav-btn {
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 48px;
    height: 48px;
    margin-top: -24px;
    border: 0;
    border-radius: 50%;
    background: rgba(52, 152, 219, 0.95);
    color: #fff;
    cursor: pointer;
    padding: 0;
    transition: .5s;

    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-family: Arial, sans-serif;
}

.fl-nav-btn:hover {
    background: #2980b9;
}

.fl-nav-btn::before {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 42px;
    line-height: 42px;
    height: 48px;
    margin-top: -2px;
}

.fl-nav-prev {
    left: 15px;
}

.fl-nav-next {
    right: 15px;
}

.fl-nav-prev::before {
    content: "‹";
}

.fl-nav-next::before {
    content: "›";
}

.fl-nav-btn.fl-disabled {
    display: none;
}

@media screen and (min-width: 0) and (max-width: 762px) {
    .fl-page-wrap {
        width: 100%;
        top: 0;
        margin: 0;
        border-radius: 0;
        padding: 10px;
    }

    .fl-files-grid {
        grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
        grid-gap: 10px;
    }

    .fl-file-card {
        padding: 15px;
    }

    .fl-info-box {
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        border-radius: 0;
    }

    .fl-info-scroll {
        padding: 20px;
        padding-top: 70px;
    }

    .fl-info-title {
        font-size: 130%;
    }

    .fl-info-video-wrap video {
        max-height: 45vh;
    }

    .fl-modal-close {
        right: 15px;
        top: 15px;
    }

    .fl-nav-btn {
        width: 42px;
        height: 42px;
        margin-top: -21px;
    }

    .fl-nav-btn::before {
        font-size: 36px;
        line-height: 36px;
        height: 42px;
        margin-top: -2px;
    }

    .fl-nav-prev {
        left: 8px;
    }

    .fl-nav-next {
        right: 8px;
    }
}