.my-right {float: right;}
.my-left {float: left;}
.my-clear {clear: both;}
.my-single {width:100%; text-align: center;}
.my-link {color:blue !important; text-decoration: underline; cursor: pointer;}
.my-fixed {position: fixed !important;}
.my-absolute {position: absolute !important;}
.my-center {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block;}
.my-hide {display: none;}

/*          Фон                                                                                                       */
#my-shadow, .my-shadow {position: fixed; top:0; left:0; right:0; bottom:0; background: rgba(0,0,0,.5); z-index:100;}
.my-shadow {z-index:500;}
#my-wait {position: fixed; top:0; left:0; right:0; bottom:0; background: rgba(0,0,0,.5) url(ico-wait.gif) center center no-repeat; z-index:1000;}
.my-wait {position: fixed; top:0; left:0; right:0; bottom:0; background: rgba(0,0,0,.5) url(ico-wait.gif) center center no-repeat; z-index:1000;}

/*          стилизация чекбокса                                                                                       */
body.jQuery .my-checkbox {position: absolute; z-index: -1; opacity: 0; margin: 10px 0 0 20px;}
body.jQuery .my-checkbox + label {position: relative; padding: 0 0 0 60px; cursor: pointer;}
body.jQuery .my-checkbox + label:before {content: ''; position: absolute; top: -4px; left: 0; width: 50px; height: 26px; border-radius: 13px; background: #CDD1DA; box-shadow: inset 0 2px 3px rgba(0,0,0,.2); transition: .2s; }
body.jQuery .my-checkbox + label:after {content: ''; position: absolute; top: -2px; left: 2px; width: 22px; height: 22px; border-radius: 10px; background: #FFF; box-shadow: 0 2px 5px rgba(0,0,0,.3); transition: .2s;}
body.jQuery .my-checkbox:checked + label:before {background: #9FD468;}
body.jQuery .my-checkbox:checked + label:after {left: 26px;}
body.jQuery .my-checkbox.unsigned + label:after {left: 13px;}

/*          Диалоговое окно                                                                                           */
.my-dialog
{
    max-width: 100%; max-height: 100%; margin: 0 auto 1em auto; box-sizing: border-box; position: relative; z-index:+1; overflow: hidden;
    background: #fff; border: 1px solid #fff; border-radius: .5em; box-shadow: .2em .2em .4em rgba(0, 0, 0, 0.25);
}
.my-dialog.center {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.my-dialog>.my-title {background-color: #0096c3; color: #fff; font-size: 1.2em; padding: .5em 2em; line-height: 1em; font-style: italic; white-space: nowrap; overflow: hidden; position: absolute; top:0; left:0; right:0; z-index: 50;}
.my-dialog>.my-title:before {content: '\a0';}
.my-dialog-content {padding: .5em; overflow-x: hidden; overflow-y: auto; background: #fff}
.my-dialog-content.my-bottom-button-box {position: absolute; top:0; left:0; right:0; bottom:3.5em; width: auto; height: auto;}

.my-dialog>.my-title~div.my-dialog-content {padding-top: 2.4em;}
.my-dialog > iframe {width: 100%; min-height: 100%; border: none; overflow: auto; box-sizing: border-box; background: transparent;}
.my-dialog>.my-title~iframe {padding-top: 2.4em;}

/*          Кнопки управленя                                                                                          */
.my-button-box {padding-top: 1em; text-align: center;}
.my-dialog-content.my-bottom-button-box .my-button-box {position: fixed; bottom: 0; left:0; right:0; width: auto; padding: 0;}
.my-dialog-content.my-bottom-button-box .my-button-box span {padding: 0;}
.my-dialog-content.my-bottom-button-box .my-button-box .my-button {width: 100%; border-radius: 0 0 .5em .5em;}

.my-button
{
    padding: 0.6em 1.2em;
    display: inline-block;
    box-sizing: border-box;
    text-align: center;
    max-width: 100%;
    font-weight: 600;
    line-height: 1em;
    text-decoration: none !important;
    letter-spacing: 0.075em;
    white-space: nowrap;
    outline: none;
    cursor: pointer;
    background: #fff;
    position: relative;
    border: 2px solid #005293;
    border-radius: 9px;
    font-size: 14px;
}
/*.my-button::before {display:block; position: absolute; bottom:0; right:0; border: 6px solid #005293; border-top-color: transparent; border-left-color: transparent;  content: '';}
.my-button::after {display:block; position: absolute; bottom:-2px; right:-2px; border: 6px solid #fff; border-top-color: transparent; border-left-color: transparent;  content: '';}*/
.my-button.my-select {background:#005293; color: #fff;}
.my-button.my-select:hover {background:#fff; color:#005293;}

.my-button.my-blue {border-color: #005293; color: #005293;}
.my-button.my-blue::before {border-color: #005293; border-top-color: transparent; border-left-color: transparent;}
.my-button.my-blue.my-select {background:#005293;; color: #fff;}
.my-button.my-blue.my-select:hover {background:#fff; color: #005293;}

.my-button.my-red {border-color: #e44100; color:#e44100;}
.my-button.my-red::before {border-color: #e44100; border-top-color: transparent; border-left-color: transparent;}
.my-button.my-red.my-select {background:#e44100; color: #fff;}
.my-button.my-red.my-select:hover {background-color: #fff; color: #e44100;}

.my-button.my-single {padding: .75em 0;}

.my-button.my-small {padding: .5em;}
.my-button:hover {}

.my-button.my-close {position: absolute; top:0; right:0; bottom:0; padding: .5em  2em; font-size: 1em; box-shadow: none; background: #6bb721;}
.my-button.my-close:hover {border-color: #6bb721;}
.my-button.my-close:before {content:"\2573"; font-style: normal; font-weight: bold; border: none; background: none; position: unset;}
.my-button.my-close::after {display: none;}
.my-button.my-cancel {}

/*********************************************************************************
/*********************************************************************************
/*********************************************************************************
/*********************************************************************************
/*********************************************************************************

.my-content {padding: .5em; margin: .5em; background: #fff; border-radius: .5em; height: 100%; }
.my-content p {text-indent:2em;}

b.red {color:red;}

/*********************************************************************************
                                Диалоговое окно
*********************************************************************************/




.my-divider {border-bottom: 1px dashed #c9dce8; height:.5em; margin-bottom: .5em}

.my-header {padding: .5em;}
.my-footer {border-top: 1px solid #0096c3; padding: .5em;}

/*********************************************************************************
                                Формы
*********************************************************************************/
.my-form {color:#3f474d;}
.my-form > .title {padding: .5em;}
.my-form > .title span {font-weight: bold; font-size: 1.2em;}

.my-form-box {display: inline-block; vertical-align: top; box-sizing: border-box; width:100%;}
.my-form-box.half {width:50%;}
.my-form-box.third  {width:33.33%;}
.my-form-box.fourth {width:25%;}

ul.my-form-box {list-style: none; padding: 0; margin: 0;  }
div.my-form-box {color:#585a5a;}
.my-form-box > li, 
.my-form-box > div {position: relative; padding: 0;}
.my-form-box > li > span, 
.my-form-box > div > span,
.my-button-box > span {display: inline-block; vertical-align: middle; padding: .5em .25em; width:100%; box-sizing: border-box; position: relative;}
.my-form-box > li > span.title, 
.my-form-box > div > span.title {font-weight: bold;}
.my-form-box > li > span.title > input,
.my-form-box > div > span.title > input {float:right; vertical-align: middle; margin: 0;}
.my-form-box > li.title {text-align: center; font-weight: bold;}
.my-form-box > .title {padding: .5em;}
.my-form-box > .title > span {text-align: center !important; font-weight: bold;}
.my-form-box > .half > span.title {width:30%;}
.my-form-box > .half > span.value {width:70%;}

.my-form input[type=text],
.my-form input[type=number],
.my-form input[type=password], 
.my-form textarea, 
.my-form select {width:100%; padding: .5em 1em; border: 1px solid #3288c9; box-sizing: border-box;}
.my-form select {padding: .5em 2.25em .5em 1em;}
.my-form input[type=checkbox],
.my-form input[type=radio] {border: 1px solid #585a5a; border-radius: .3em;}
.my-form input[type=submit] {display: none;}
.my-form input.error, .my-form textarea.error, .my-form select.error {border-color: red;}

/*********************************************************************************
                                Списки
*********************************************************************************/
.my-list {white-space: nowrap; border: 1px solid #83a9c8;}
ul.my-list {list-style: none; margin: 0; padding: 0;}
ul.my-list > li {padding: .25em; background: top left no-repeat; background-size: auto 100%; position: relative;  }
ul.my-list > li.my-title {border-bottom: 1px solid #83a9c8; background: #f6f6f6;}
ul.my-list > li.my-title span {text-align: center !important; font-weight: bold; color:#000;}

ul.my-list > li > a {display: block;}
ul.my-list > li.my-data:nth-child(2n) {background-color: rgba(7,115,205,.1)}
ul.my-list > li.my-data:hover {background-color: rgba(7,115,205,0.5); color:#fff;}
ul.my-list > li span {display:inline-block; overflow: hidden; padding: .25em; vertical-align: top; white-space: nowrap; box-sizing: border-box;}

ul.my-list > li.my-title > span > a.my-sort {display: block; position: relative; padding-right: 2em; border-right:1px solid #999;}
ul.my-list > li.my-title > span:last-child > a.my-sort {border-right:none;}
ul.my-list > li.my-title > span > a.my-sort:after {display: block; position: absolute; top:0; right:0; text-align: right; width:1em;  color:#666;}
ul.my-list > li.my-title > span > a.my-sort.asc:after {content: '\25bc';}
ul.my-list > li.my-title > span > a.my-sort.desc:after {content: '\25b2';}

table.my-list {border-collapse: collapse;}
table.my-list th {text-align: center !important; font-weight: bold; color:#000; border-bottom: 1px solid #83a9c8; background: #f6f6f6; padding: .5em;}
table.my-list tr.my-data:nth-child(2n) td {background-color: rgba(7,115,205,.1)}

/*********************************************************************************
                                Закладки
*********************************************************************************/
.my-tabs {position: relative;}
.my-tabs > input {display:none;}
.my-tabs > label {font-size: 1.2em; height: 2.7em; line-height: 1em; color:#1a1a1a; padding: .75em 0; cursor: pointer; box-sizing: border-box; display: inline-block; vertical-align: bottom; text-align: center; font-weight: bold}
.my-tabs.half > label {width:50%;}
.my-tabs.third > label {width:33.33%;}
.my-tabs.fourth > label {width:25%;}
.my-tabs.fifth > label {width:20%;}
.my-tabs > label:hover {}

.my-tabs > input:checked + label {
    background: #f6f6f6;
    /* border: 1px solid #3288c9; */
    border-bottom: 2px solid #005293;
    position: relative;
    box-sizing: border-box;
}
/*.my-tabs > input:checked + label::before {display:block; position: absolute; top:0; right:0; border: 8px solid #3288c9; border-bottom-color: transparent; border-left-color: transparent;  content: '';}
.my-tabs > input:checked + label::after {display:block; position: absolute; top:-1px; right:-1px; border: 8px solid #fff; border-bottom-color: transparent; border-left-color: transparent;  content: '';}
*/
.my-tabs > input.hide {display:none;}
.my-tabs > input.hide + label {display:none;}
.my-tabs > input.half + label {width:50%;}
.my-tabs > div {
    display:none;
    /*border: 1px solid #3288c9;*/
    border-top: 1px solid #D7D8DA;
    margin-top: -1px;
    padding: 1em;
    box-sizing: border-box;
    background: #f6f6f6;
}
.my-tabs.noborder > div {border: none; padding: 1em 0;}
.my-tabs > input:nth-of-type(1):checked ~ div:nth-of-type(1),
.my-tabs > input:nth-of-type(2):checked ~ div:nth-of-type(2),
.my-tabs > input:nth-of-type(3):checked ~ div:nth-of-type(3),
.my-tabs > input:nth-of-type(4):checked ~ div:nth-of-type(4),
.my-tabs > input:nth-of-type(5):checked ~ div:nth-of-type(5),
.my-tabs > input:nth-of-type(6):checked ~ div:nth-of-type(6),
.my-tabs > input:nth-of-type(7):checked ~ div:nth-of-type(7),
.my-tabs > input:nth-of-type(8):checked ~ div:nth-of-type(8),
.my-tabs > input:nth-of-type(9):checked ~ div:nth-of-type(9),
.my-tabs > input:nth-of-type(10):checked ~ div:nth-of-type(10) {display:block;}
.my-tabs.vertical > label {width: 100%; border:1px solid #3288c9; border-bottom: none;}
.my-tabs.vertical > input:checked + label::before {display: none;}
.my-tabs.vertical > input:checked + label::after {display: none;}
.my-tabs.no-tab > input {display: inline; float:left;}
.my-tabs.no-tab > label {display: inline; border: none; font-weight: normal; background: none; padding: 0 0 0 1em; font-size: 1em;}
.my-tabs.no-tab > input:checked + label {border: none; font-weight: normal; background: none;}
.my-tabs.no-tab > input:checked + label::before {display: none;}
.my-tabs.no-tab > input:checked + label::after {display: none;}

/*********************************************************************************
                                Позиция фиксированных столбцов
*********************************************************************************/
.my-form-box > .half > span,
.my-form > .half > span,
.my-button-box.half > span,
.my-list > .half > span,
.my-list > .half > a > span {width:50%;}
.my-form-box > .third > span,
.my-form > .third > span, 
.my-button-box.third > span,
.my-list > .third > span,
.my-list > .third > a > span {width:33.33%;}
.my-form > .fourth > span,
.my-form > .fourth > span, 
.my-button-box.fourth > span,
.my-list > .fourth > span,
.my-list > .fourth > a > span {width:25%;}

/***********************************************************************************************************************
                                Меню
***********************************************************************************************************************/
.my-menu, .my-menu ul  {list-style: none; padding: 0; margin: 0;}
.my-menu li {position: relative; margin-left: 1.25em; line-height: 1em;}

.my-menu li > a, .my-menu li > span {display: block; padding: .35em; white-space: nowrap; overflow: hidden; margin-right: 2em;}
.my-menu li.hidden > a, .my-menu li.hidden  > span {opacity: .5;}
.my-menu.folder li > a, .my-menu.folder li > span {padding-left: 2em; background: url(ico-menu-folder.png) center left no-repeat; background-size: auto 100%;}
.my-menu.folder li > input:checked ~ a,  .my-menu.folder li > input:checked ~ span {background-image: url(ico-menu-folder-open.png);}

.my-menu li > input {display: none;}
.my-menu li > label {position: absolute; top:.2em; left:-1.25em; width: 2.5em; height: 1.5em; display: block; }
.my-menu li > label::before {content: '\3e'; font-size: 1.25em; transform: scaleY(1.5); transition: transform .3s ease-in-out; position: absolute; top:0; left:0; width: .66em; height: 1em; line-height: 1em; text-align: center; display: block;}
.my-menu.folder li > label {}
.my-menu li > input:checked + label::before {transform: scaleX(1.6) rotate(90deg);}

.my-menu li > ul {max-height:0; opacity: 0; overflow: hidden; transition: all .3s linear;}
.my-menu li > input:checked ~ ul {max-height:100%; opacity: 1;}

.my-menu li > a:hover, .my-menu li.select > a, .my-menu li > span:hover  {background-color: rgba(7,115,205,.5); color:#fff;}
.my-menu li > span > input {position: absolute; right:0; top:.25em;}

/***********************************************************************************************************************
                                Контекстное меню
***********************************************************************************************************************/
.my-context-menu {position: fixed; display: none; list-style: none; padding: 0; margin: 0; background: #fff; border:1px solid #0096c3; z-index: 1000;}
.my-context-menu.select {display: block; top:2em; left:2em;}
.my-context-menu > li {color: #000;}
.my-context-menu > li:hover {background: rgba(7,115,205,0.5); color: #fff;}
.my-context-menu > li > a {display: block; height:1em; margin: .25em .5em; padding: .5em 0 .5em 2.5em; cursor: pointer; background: no-repeat left center; background-size: auto 100%;}
.my-context-menu > li > a > span { text-align: left !important; width: auto !important; }

/***********************************************************************************************************************
                                Страницы
***********************************************************************************************************************/
.my-control {list-style: none; margin: .25em; padding: 0; color:#666;}
.my-control > li {display: inline-block; vertical-align: top; box-sizing: border-box; min-width: 1.75em; height: 1.75em; padding: 0 .25em; margin: 0 .25em; font-size: 1.4em; }
.my-control > li > ul {margin: 0;}
.my-control > li.right-box, .my-control > li.left-box {display: inline-block; vertical-align: top; width: 50%; padding: 0; margin: 0; font-size: 1em; height: auto;}
.my-control > li.right-box {text-align: right;}
.my-control form {display: inline-block; vertical-align: middle; margin: 0; padding: 0; border: 1px solid #80bb25; border-radius: .3em; overflow: hidden;}
.my-control select {border: none; font-size: 1em; padding: 0 .2em; line-height: 1em; height:1.3em; box-sizing: border-box; color:#666;}
.my-control input[type='text'] {border: none; font-size: 1em; padding: 0 .2em; line-height: 1em; height:1.25em; width:2em; text-align: center; box-sizing: border-box; color:#666;}
.my-control input[type='submit'] {border: none; background: none; box-sizing: border-box; color:#666;}

.my-control form.choises {border: none;}
.my-control form.choises > input {display: none;}
.my-control form.choises > input + label {opacity: .5;}
.my-control form.choises > input:hover + label, .my-control form.choises > input:checked + label {opacity: 1;}
.my-control .button {min-width:1.5em; height:1.5em; padding: 0 .25em; margin: 0 .05em; background: center center no-repeat; background-size: 70%; border: 1px solid #80bb25; border-radius: .3em; display: inline-block; vertical-align: top; box-sizing: border-box;}
.my-control .button.add {background-image: url(ico-add-icon.png);}
.my-control .button.list {background-image: url(ico-list.png);}
.my-control .button.table {background-image: url(ico-table.png);}
.my-control .button.grid {background-image: url(ico-grid.png);}
.my-control .button.filter3d {background-image: url(ico-view360.png); background-size: 100% auto;}

/***********************************************************************************************************************
                                Страницы
***********************************************************************************************************************/
.my-pagelist {list-style: none; margin: .25em; padding: 0; text-align: center; font-size: 1.4em; color:#1a1a1a;}
.my-pagelist > li {display: inline-block; vertical-align: top; box-sizing: border-box;  min-width: 1.75em; height: 1.75em; padding: 0 .25em; margin: 0 .25em; text-align: center; line-height: 1.7em;}
.my-pagelist > li.noselect {border-color: transparent;}
.my-pagelist > li.select {background: #5a99c9;}

.my-pagelist > li > a {display: block;}
.my-pagelist > li > a > span, .my-pagelist > li > span {font-size: 1.5em; line-height: .5em; height: .5em;}
.my-pagelist > li.choises {border-color: transparent; padding: 0;}
.my-pagelist form {display: inline-block; vertical-align: middle; margin: 0; padding: 0; border: 1px solid #80bb25; border-radius: .3em; overflow: hidden;}
.my-pagelist select {border: none; font-size: 1em; padding: 0 .2em; line-height: 1em; height:1.3em; box-sizing: border-box; color:#666;}
.my-pagelist input[type='text'] {border: none; font-size: 1em; padding: 0 .2em; line-height: 1em; height:1.25em; width:2em; text-align: center; box-sizing: border-box; color:#666;}
.my-pagelist input[type='submit'] {border: none; background: none; box-sizing: border-box; color:#666;}

/***********************************************************************************************************************
                                Отображение контента
***********************************************************************************************************************/
.my-show-panel {display: inline-block; vertical-align: top;}
.my-show-panel > a {display: inline-block; vertical-align: top; width: 2em; height: 2em; margin: 0 .25em; background: no-repeat; background-size: 100% 100%; }
.my-show-panel > a.my-content-isshow {background-image: url(ico-isshow.png);}
.my-show-panel > a.my-content-noshow {background-image: url(ico-noshow.png);}
.my-show-panel > a.my-content-ishide {background-image: url(ico-ishide.png);}
.my-show-panel > a.my-content-islock {background-image: url(ico-islock.png);}
.my-show-panel > a.off {opacity: .5;}

/***********************************************************************************************************************
                                    Страницы
***********************************************************************************************************************/
.my-breadcrumbs {list-style: none; margin: 0; padding: 0;}
.my-breadcrumbs > li {display: inline-block; color:#666; padding-right: .25em; vertical-align: top;}
.my-breadcrumbs > li:after {content:'/'; display: inline-block; vertical-align: top; padding: 0 .25em;}
.my-breadcrumbs > li:last-child:after {content:'';}
.my-breadcrumbs > li > a {display: inline-block; color:#095baf;}
.my-breadcrumbs > li > a.filter {padding-right: 1.5em; background: url(ico-close.png) no-repeat top right; background-size: auto 100%;}

/***********************************************************************************************************************
                                Блок фото в карточке товара
***********************************************************************************************************************/
.my-img-box {position: relative; width: 100%; max-width:100%; height: 0; padding: 104% 0 20% 0; margin: 0 auto; text-align: center;}
.my-img-box.no-preview {padding: 104% 0 0 0;}
.my-img-box > input {display: none;}
.my-img-box > label {display:inline-block; position: relative; width: 17.25%; height:auto; margin: 0 1% 1% 1%; border:1px solid #dbdbdb; opacity: 0.5; background: url(ico-wait.gif) no-repeat center center; background-size: 70%; transition: opacity .5s ease-in-out; cursor: pointer;}
.my-img-box > label:hover {opacity: 1;}
.my-img-box > label > img {width: 100%; height: auto;}
.my-img-box.no-preview > label {display:none;}
.my-img-box > input:checked + label {opacity: 1; background-color: #19639e;}
.my-img-box > img {position: absolute; top:0; right:0; width:100%; height:auto; opacity: 0; transition: opacity .5s ease-in-out; border: 1px solid #075796; box-sizing: border-box;}
.my-img-box > input:nth-of-type(1):checked ~ img:nth-of-type(1),
.my-img-box > input:nth-of-type(2):checked ~ img:nth-of-type(2),
.my-img-box > input:nth-of-type(3):checked ~ img:nth-of-type(3),
.my-img-box > input:nth-of-type(4):checked ~ img:nth-of-type(4),
.my-img-box > input:nth-of-type(5):checked ~ img:nth-of-type(5) {opacity:1; z-index: 10;}

/*********************************************************************************
                                Блок фото в карточке товара
*********************************************************************************/
.my-galery > img {cursor: zoom-in;}
#my-galery {display:none;}
#my-galery > div {background: #fff; top:0; left: 0; right: 0; bottom:0; width: 1500px; height: 1080px; max-height:100%; max-width: 100%; min-width: 320px; min-height: 320px; margin: auto; padding: 2em; position: absolute; border-radius: .3em; box-sizing: border-box;}
#my-galery .my-close {top: .5em; right: 1em; z-index: 20; font-size: 1.5em;}
#my-galery ul {list-style: none; margin:0; padding:0;}

#my-galery .my-galery-img-box {position: absolute; top:2em; left: 2em; bottom: 2em; right: 22em; overflow: hidden;}
#my-galery .my-galery-img-box li {position: absolute; top:0; left:0; bottom: 0; right:0; background: url(ico-wait.gif) no-repeat center center; background-size: 25% auto; opacity: 0; text-align: center; transition: opacity .5s ease-in-out;}
#my-galery .my-galery-img-box li.select {opacity: 1; z-index: 10;}
#my-galery .my-galery-img-box li img{max-width: 100%; max-height: 100%; margin: auto; top:0; left:0; right:0; bottom:0; position: absolute;}

#my-galery .my-galery-preview {position: absolute; top:2em; right: 2em; bottom: 2em; width: 19em;}
#my-galery .my-galery-preview ul {}
#my-galery .my-galery-preview li {width:4em; height:4em; background: url(ico-wait.gif) no-repeat; background-size: 100%; display: inline-block; vertical-align: top; margin: .25em; border: 1px solid #dbdbdb; opacity: .5; transition: opacity .3s ease-in-out; cursor: pointer;}
#my-galery .my-galery-preview li img {width:100%; height:100%;}
#my-galery .my-galery-preview li:hover,
#my-galery .my-galery-preview li.select {opacity: 1;}
#my-galery .my-galery-title {text-transform: uppercase; color: #095baf; font-size: 1.2em; padding: 1em 0;}
#my-galery .my-tools {right:2.5em; bottom: 1em;}

/*********************************************************************************
                                Карусель
*********************************************************************************/
.my-carousel {position:  relative; user-select: none; overflow: hidden;}
.my-carousel > ul {list-style: none; margin: 0; padding: 0; overflow: hidden; -ms-overflow-style: none; scrollbar-width: none;} 
.my-carousel > ul::-webkit-scrollbar {width: 0; background: transparent;}
.my-carousel > ul > li {display: inline-block;}
.my-carousel > .my-arrow {position: absolute; z-index: 10; width: 3em; height: 2em; background: #fff; top:1em; }
.my-carousel > .my-arrow > span {
    display: inline-block;
    font-size: 3em;
    font-weight: 600;
    width: 1em;
    height: 1em;
    top: 0px;
    left: 0;
    line-height: .8;
    text-align: center;
    color: #005293;
    border: 2px solid #005293;
    box-sizing: border-box;
    position: relative;
    border-radius: 25%;
}
.my-carousel > .my-arrow > span:hover, .my-carousel > .my-arrow > span:focus {}
.my-carousel > .my-arrow.hide {}
.my-carousel > .my-arrow.left {
    /*right: 3.25em;*/
    text-align: right;
    padding-right: .25em;
}
.my-carousel > .my-arrow.right {right:0; padding-left: .25em;}
/*.my-carousel > .my-arrow.left > span::before {display:block; position: absolute; top:0; left:0; border: 4px solid #005293; border-bottom-color: transparent; border-right-color: transparent;  content: '';}
.my-carousel > .my-arrow.left > span::after {display:block; position: absolute; top:-2px; left:-3px; border: 5px solid #fff; border-bottom-color: transparent; border-right-color: transparent;  content: '';}
.my-carousel > .my-arrow.right > span::before {display:block; position: absolute; bottom:0; right:0; border: 4px solid #005293; border-top-color: transparent; border-left-color: transparent;  content: '';}
.my-carousel > .my-arrow.right > span::after {display:block; position: absolute; bottom:-2px; right:-3px; border: 5px solid #fff; border-top-color: transparent; border-left-color: transparent;  content: '';}
 */
.my-carousel > .my-arrow.top {top:0; left:0; width:100%; height:2em;}
.my-carousel > .my-arrow.top > span {transform: rotate(90deg);}
.my-carousel > .my-arrow.bottom {bottom:0; left:0; width:100%; height:2em;}
.my-carousel > .my-arrow.bottom > span {transform: rotate(270deg);}

/*********************************************************************************
                                Карусель
*********************************************************************************/
.my-process-bar {text-align: center; border: 1px solid #5aa40f; color:#5aa40f; font-weight: bold;}
.my-process-bar > div {color:#fff; background: #5aa40f; padding: .25em 0;}
.my-process-bar > span {display: block; padding: .25em 0;}

/*********************************************************************************
                                Кнопки управления
*********************************************************************************/
.my-close {position: absolute;}
.my-close:before {content:"\2573"; font-style: normal; font-weight: bold;}

.my-tools {height: 2em; position: absolute; bottom:.25em; margin: 0; padding: 0; list-style: none; z-index: 20; text-align: center;}
.my-tools li {display: inline-block; width: 2em; height: 2em; margin: 0 .5em; vertical-align: top; background: no-repeat; background-size: 100% 100%;}
.my-tools li.my-pause {background-image: url(ico-pause.png);}
.my-tools li.my-back {background-image: url(ico-next.png); transform: rotate(180deg);}
.my-tools li.my-next {background-image: url(ico-next.png);}
.my-tools li.my-play {background-image: url(ico-play.png);}
.my-tools li.my-playback {background-image: url(ico-play.png); transform: rotate(180deg);}

/*  Android, iPhone */
@media only screen and (max-width: 767px)
{
    #my-galery > div {width:100%; height: 100%; border-radius: 0; margin: 0;}
    #my-galery .my-galery-img-box {top: 2em; bottom: 4em; left:0; right:0;}
    #my-galery .my-galery-preview {left:0; right:0; bottom:.5em; width: auto; height:4em; top: auto; text-align: center;}
    #my-galery .my-galery-title {display:none;}
    #my-galery .my-tools {display:none;}

    .my-tabs > label {display: block; width: 100% !important; border: 1px solid #3288c9; border-bottom: none;}
    .my-tabs > input:checked + label::before {display:none;}
    .my-tabs > input:checked + label::after {display:none;}

    .my-button-box > span {width:100% !important; display: block;}
    .my-button-box > span > .my-button {width:100%;}

    .my-form-box, .my-form-box > .half > span.title, .my-form-box > .half > span.value {width: 100% !important;}
}

/*  Планшеты в режиме portrait */
@media only screen and (min-width: 768px) and (max-width: 1103px)
{
    .my-banner li img {border-radius: 0;}
    
    #my-galery > div {width:100%; height: 100%; border-radius: 0;}    
    #my-galery .my-galery-img-box {top: 2em; bottom: 4em; left:0; right:0;}
    #my-galery .my-galery-preview {left:0; right:0; bottom:.5em; width: auto; height:4em; top: auto; text-align: center;}
    #my-galery .my-galery-title {display:none;}
    #my-galery .my-tools {display:none;}

    .my-button {padding: .75em; }
}