@charset "utf-8";
/* CSS Document */
html {height: 100%;}
body {margin: 0; font-family: Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif"; height: 100%;}

input {	padding: 7px; font-size: 16px;}
select {padding: 7px; font-size: 16px;}
h1 {font-weight: normal;}

div {
	box-sizing: border-box;
	-moz-box-sizing: border-box; 
	-webkit-box-sizing: border-box;
}

a {text-decoration: none; color: #000;}
a:hover {color: #555;}

.green {color: #5C981F;}
.red {color: #B40003;}
.clear {clear: both;}
.height-15 {height: 15px;}
.float-left {float: left; margin-right: 20px;}
.float-right {float: right; margin-left: 20px;}

/* výsledek změny řazení */
#response {	position: fixed;
	top: calc(50% - 25px); left: calc(50% - 150px); width: 300px; padding: 20px 20px; font-size: 20px; background-color:#5C981F; color: #fff; display: none; text-align: center; z-index: 1;}


/* Tabs */
.tabs {
	display: flex;
	flex-wrap: wrap; /* make sure it wraps*/
}
.tabs label {
	order: 1; /*Put the labels first*/
	display: block;
	padding: 10px 30px;
	margin-right: 0.2rem;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	cursor: pointer;
  background: #999;
  color: #fff;
  transition: background ease 0.2s;
}


.tabs .tab {
  order: 99; /*Put the tabs last*/
  flex-grow: 1;
	width: 100%;
	display: none;
  padding: 1rem;
  background: #efefef;
  padding: 20px 20px 30px 20px;
}
.tabs input[type="radio"] {
	display: none;
}
.tabs input[type="radio"]:checked + label {
	background: #efefef;
	color: #cc0000;
	font-weight: bold;
}
.tabs input[type="radio"]:checked + label + .tab {
	display: block;
}

@media (max-width: 45em) {
  .tabs .tab,
  .tabs label {
    order: initial;
  }
  .tabs label {
    width: 100%;
    margin-right: 0;
    margin-top: 0.2rem;
  }
}

.block-header { margin: 10px 0 10px 0; padding-top: 10px; font-size: 20px; border-top: 1px solid #aaa;}

/* end Tabs */


.wrapper {background-color: #425F6C; width: 100%; min-height: 100%; margin: 0; padding: 20vh 10px;}

.login-containter {    
	max-width: 400px;
	widows: 100%;
	margin: auto;
}
.login {background-color: #efefef; width: 400px; padding: 30px; text-align: center; border-radius: 20px; border: 1px solid #999;}

.login-button-div {
	margin: 20px;
}

.header { width: 100%; background-color: #415C6E; height: 80px;}
.header .title {color: #eee; font-size: 30px; float: left; padding: 20px;}
.header .logout {color: #999; float: right; padding: 30px 40px 20px 20px;}
.header .logout:hover {color: #fff; cursor: pointer;}
.header .language {color: #aaa; float: right; padding: 23px 20px 20px 20px;}

.menu-and-component {display: flex; min-height: calc(100% - 80px); background-color:  #ccd;}

.menu {float: left; width: 200px; background-color: #333; padding: 10px; color: #eee; }
.menu .sticky {position: -webkit-sticky; /* Safari */ position: sticky; top: 20px;}
.menu .group {margin-bottom: 20px;}
.menu .group-name {font-size: 20px;}
.menu .item {border-bottom: 1px dashed #777; padding: 5px 0;}
.menu .item:hover {cursor: pointer; color: #71B3B8;}
.menu .active {color: #DFD769;}

.component {float: right; width: calc(100% - 150px); background-color: #fff; padding: 20px;}
.component .index {padding: 20px; background-color: #fff; }
.component .index .add-new {padding: 10px 20px; background-color: #5C981F; color: #fff; float: right;}
.component .index .add-new:hover {background-color: #72D535; cursor: pointer;}
.component .list {margin-top: 20px;}

.list .items {width: 100%;}
.list .items td, th {padding: 10px;}

.list-header th {border-bottom: solid 1px #71B3B8; color: #71B3B8; text-align: left;}
.list-item td {border-bottom: solid 1px #ccc;}
.list-item .name, .list-header .name {text-align: left; width: 20%;}
.list-item .move, .list-header .move {text-align: center; width: 20%;}
.list-item .display, .list-header .display {text-align: center; width: 20%;}
.list-item .delete, .list-header .delete {text-align: left; width: 20%;}
a.delete {color: #AA0000;text-decoration: none;}
.component .list table {width: 100%;}
.list-item .name:hover {cursor: pointer;}
.list-item {background-color: #F7F7F7;}
.list-item:hover {background-color: #eee;}
.page-item {background-color: #fff;}
.page-item:hover {background-color: #fff;}
.page-item .name:hover {cursor: auto;}
.move-ico:hover {cursor: pointer;}

/*list categories*/
.categories .name {width: 45%;}
.categories .display {width: 15%; text-align: center;}
.categories .move {width: 10%; text-align: center;}
.categories .products {width: 15%;}
.categories .delete {width: 15%;}

/*list order status*/
.order_status .display {width: 10%;}

/*list orders*/
.orders .number {cursor: pointer;}
.orders .price {text-align: right;}

/*payment statuses*/
.payment-wait {color: #D8720D}
.payment-done {color: #4A880B}
.payment-canceled {color: #4A880B}

.order-sent {color: #4A880B}


/*order detail*/
.order-top {width: calc(25% - 40px); padding: 20px;}
.order-top .field-name {font-size: 18px; font-weight: 400; margin-bottom: 15px;}


/*list products*/

.products .name {width: 30%;}
.products .price {width: 10%; text-align: right;}
.products .category {width: 15%;}
.products .display {width: 10%; text-align: center;}
.products .move {width: 10%; text-align: center;}
.products .delete {width: 10%;}

.pagination {float: right;}
.page-plus {font-size: 26px; width: 35px; height: 35px; text-align: center; float: left; background-color: #ccc; color: #fff;}
.page-select {float: left;}
.page-minus {font-size: 26px; width: 35px; height: 35px; text-align: center; float: left; background-color: #ccc; color: #fff;}
.button-allowed {background-color: #71B3B8; cursor: pointer;}

/*product detail*/
.variant-holder {background-color: #ddd; margin-bottom: 15px;}
.variant-name {padding: 10px; background-color: #ccc;}
.variant-name-add {padding: 10px; background-color: #ccc; cursor: pointer;}
.variant-values {padding: 10px;}


.component .edit .head {margin-bottom: 20px; font-size: 20px;}
.component .edit .head span {color: #c00;}

.component .edit .field-name {}
.component .edit .field {margin-bottom: 10px;}
.component .edit .button {margin: 20px 0 30px 0; width: 200px;}
.component .add-content .button {margin: 10px 0 0 0; width: 100%;}

.component .edit .select-item {padding-top: 10px;}
.tabs .tab label {order: 1; /*Put the labels first*/
	display: block;	padding: 0;	border-top-left-radius: 0px; border-top-right-radius: 0px; cursor: pointer;	background: none; color: #555; }
.tabs .tab input[type="radio"] { display: block; float: left;}
.tabs .tab input[type="radio"]:checked + label {background: none;color: #000;font-weight: normal;}
.tabs .tab input[type="checkbox"] {float: left;}

.component .edit  {float: left; width: 100%;}
.component .edit .top {margin-bottom: 30px; width: calc(100% - 170px); float: left;}
.component .edit #flexi-content {width: calc(100% - 170px); float: left;}
.component .edit #flexi-content .one-block {background-color: #fff; margin-bottom: 10px; display: flex; }

.image-thumb {position: relative; width: auto;}
.image-thumb .remove-image {color: #c00; position: absolute; top: 8px; left: 10px; cursor: pointer;}
.image-thumb img {max-height: 200px; max-width: 600px;}

.one-block .left {float: left; width: 80%; padding: 15px;}
.one-block .left .move-ico {float: left;}
.one-block .left .item-type {padding-left: 20px; font-size: 18px; margin-top: -3px;}
.one-block .left .item-content {padding-top: 10px;}
.one-block .left .item-content .multiple-upload {padding-top: 20px;}
.item-content .item-menu {background-color: rgba(0,0,0,0.10);}

.images-view {padding: 10px 0; margin-left: -5px;}
.one-image {width: auto; height: auto; display: inline-block; margin: 5px; outline: solid 1px #ccc;}
.one-image .image-box {width: 200px; height: 200px; background-position: center center; background-size: cover; border-bottom: solid 1px #ccc;}
.one-image .remove-image {float: right; color: #c00; font-size: 20px; margin: 3px 5px 5px 5px; cursor: pointer;}
.one-image .move-ico {float: left; margin: 8px;}
.one-image .checkbox {float: right; margin-top: 5px;}
.one-image .checkbox input[type=checkbox] {width: 15px; height: 15px;}
.one-image .description input[type=text] {border: 0; width: calc(100% - 14px);}

.files-view {padding: 10px 0; margin-left: -5px;}
.one-file {width: 300px; height: auto; background-position: center center; background-size: cover; display: inline-block; margin: 5px; outline: solid 1px #ccc;}
.one-file .file-box {width: 100%; height: 70px; border-bottom: solid 1px #ccc;}
.one-file .file-name {padding: 5px;}

.one-file .remove-image {float: right; color: #c00; font-size: 20px; margin: 3px 5px 5px 5px; cursor: pointer;}
.one-file .move-ico {float: left; margin: 8px;}
.one-file .checkbox {float: right; margin-top: 5px;}
.one-file .checkbox input[type=checkbox] {width: 15px; height: 15px;}
.one-file .description input[type=text] {border: 0; width: calc(100% - 14px);}

.videos-view {padding: 10px 0; margin-left: -5px;}
.one-video {width: 400px; height: auto; background-position: center center; background-size: cover; display: inline-block; margin: 5px; outline: solid 1px #ccc;}
.one-video .video-box {width: 100%; border-bottom: solid 1px #ccc;}
.one-video .video-view {padding: 0px; width: 100%; height: 200px;}

.one-video .remove-image {float: right; color: #c00; font-size: 20px; margin: 3px 5px 5px 5px; cursor: pointer;}
.one-video .move-ico {float: left; margin: 8px;}
.one-video .checkbox {float: right; margin-top: 5px;}
.one-video .checkbox input[type=checkbox] {width: 15px; height: 15px;}
.one-video .description input[type=text] {border: 0; width: calc(100% - 14px);}

.one-field {width: 100%; height: auto; background-position: center center; background-size: cover; display: inline-block; margin: 5px 0; outline: solid 1px #ccc;}
.one-field .remove-image {float: right; color: #c00; font-size: 20px; margin: 3px 5px 5px 5px; cursor: pointer;}
.one-field .move-ico {float: left; margin: 8px;}
.one-field .checkbox {float: right; margin-top: 5px;}
.field-float {width: auto; float: left; padding: 0px 5px;}
.field-add {cursor: pointer;}

.one-block .right {float: right; width: 20%; border-left: 1px solid #71B3B8; padding: 15px;}
.one-block .right .remove-block {float: right; color: #c00; cursor: pointer; font-size: 30px; margin-top: -5px;}
.one-block .right .settings-item {margin-top: 15px;}

.component .edit .add-content {float: right; background: #fff; padding: 10px; font-size: 18px; width: 150px;
position: -webkit-sticky; /* Safari */
position: sticky; top: 20px; }
.component .edit .add-item {background: #5C981F; margin-top: 5px; padding: 10px; color: #fff; }
.component .edit .add-item:hover {background-color: #72D535; cursor: pointer;}

/*variants*/
.item-inline {float: left; padding-right: 10px;}

/*point of interest*/
.name-poi {cursor: pointer;}
.display-poi, .delete-poi {text-align: center;}
th.display-poi, th.delete-poi {text-align: center;}