.bop-body, .bop-body * {box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;font-size: 14px;line-height: 18px;}

.bop-perms-sel {float:left;width: 100%;}
.bop-perms-sel h2 {font-size:20px;margin: 15px 0 5px 0;}
.bop-perms-sel .bop-sec {float:left;width: 33.33%;height: auto;margin: 0 0 10px 0;padding: 7px;}
.bop-perms-sel .bop-sec label.seclab {font-weight:bold;color:#222;font-size: 15px;/* line-height:18px; */float:left;width:100%;clear:both;text-align:left;}
.bop-perms-sel .bop-sec .bop-ps {float:left;display: flex;flex-direction: column;width:100%;clear:both;border-top:1px solid #ddd;margin-top: 9px;padding-top: 1px;}
.bop-perms-sel .bop-sec .bop-ps label {display: block;float: left;position: relative;align-items: center;width:auto;padding:0;font-weight: normal;margin: 0 0 5px 0;font-size: 14px;cursor: pointer;}
.bop-perms-sel .bop-sec input {width: 19px;height: 19px;position: relative;top: 5px;}

.bop-user-img {z-index:1;position: relative;width:60px;height:60px;border-radius: 100px;}
.bop-user-img > img {transition:0.2s;border: 2px solid #3b49df;padding: 2px;position:absolute;width:100%;height:100%;top:0;left:0;max-width:inherit;max-height:inherit;object-fit:cover;border-radius: 100px;}
.products .bop-user-img {position: absolute;right: 15px;bottom: 50px;}

.bop-create h2 {font-size:20px;margin: 0 0 15px 0;}
.bop-create {float:left;display:block;clear:both;width:100%;margin: 0px 0 30px 0;border: 1px solid #ccc;border-radius: 8px;padding:20px;background: #fff;}
.bop-create .bop-row {float:left;display: block;clear:both;width:100%;margin: 0;}
.bop-create .bop-row-clr {width: calc(27% - 12px);margin: 0 12px 0 0;float: left;clear: none;}
.bop-create .bop-inputs {margin:0;}
.bop-create input {width: 100%;padding: 6px 12px;float: left;border: 1px solid #ccc;border-radius: 6px;height: 40px;}

.bop-btn {float: left;clear: none;margin: 0;width: 19%;height: 40px;line-height: 14px;font-size: 14px;font-weight:bold;color:#fff;background: #3b49df;padding: 2px 8px;border:none;border-radius: 6px;}
.bop-btn:not(.bop-disabled):hover {/* background:#0695d6; *//* color:#fff; *//* text-decoration:none; */}
.bop-btn.bop-disabled {opacity:0.6;cursor:not-allowed;}

.bop-comp {float:left;width:23%;margin: 0 1% 20px 1%;padding:0 0 20px 0;border: 1px solid #ccc;box-shadow: 2px 2px 10px rgba(0,0,0,0.15);border-radius: 10px;background:#fff;text-align:center;}
.bop-comp:hover {border-color:rgba(0,0,0,0.15);box-shadow:3px 3px 20px rgba(0,0,0,0.2);}
.bop-comp .bop-icon-wrap {float:left;width:100%;z-index:4;margin: 25px 0 5px 0;}
.bop-comp .bop-info {float:left;clear:both;width:100%;padding:0 15px;}
.bop-comp .bop-name {max-width:100%;display:inline-block;clear:both;font-size:18px;color:#111;text-decoration:none;font-weight:bold;margin:0 0 8px 0;line-height:20px;height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break: break-all; word-wrap: break-word;}
.bop-comp .bop-phone {max-width:100%;display:inline-block;clear:both;font-size: 16px;color: #3b49df;width:100%;margin:0 0 12px 0;white-space:nowrap;height:18px;overflow:hidden;text-overflow:ellipsis;word-break: break-all;word-wrap: break-word;}
.bop-comp .bop-labels {display:inline-block;clear:both;width:auto;margin:0 auto;}
.bop-comp .bop-count {float:left;width:auto;clear:none;font-size: 12px; margin:0; background: #eee; color: #777; padding: 0 4px; border-radius: 4px; line-height: 20px;}
.bop-comp .bop-user-img {position: relative;width: 130px;height: 130px;margin: 0 auto;}

/* USER PROFILE */
.body-ua .container.primary {margin-top:10px; margin-bottom:35px;align-items: flex-start; justify-content: space-between; flex-direction: row;}

.bop-box h2 {font-size: 20px;font-weight: bold;margin-bottom: 15px;}
.bop-box input {width:100%;font-size: 15px;padding: 10px 12px;}
.bop-box .bop-line {display: flex;align-items: center;width:100%;padding: 5px 0;}
.bop-box .bop-line span {width: 110px;font-weight: bold;}
.bop-box label {font-size:14px;margin: 0 0 3px 0;display:block;}
.bop-box .row {display:block;width:100%;float: left;}
.bop-box .input-box {margin: 0 0 15px 0;}
.user-buttons {margin:20px 0 10px 0;display: block;float: left;width: 100%;}

/* SIMPLE BOP SELECT */
.bop-select {float:left;width:100%;clear:both;position:relative;}
.bop-select .bop-text {cursor:pointer;float:left;width:100%;clear:both;background:#fff;padding: 10px 12px;font-size: 15px;line-height: 18px;border: 1px solid #ccc;border-radius: 3px;box-shadow: none;outline: none;}
.bop-select .bop-text span {/* display: flex; *//* align-items: center; */}
.bop-select:hover .bop-text, .bop-select.opened .bop-text {border-color:#bbb;}
.bop-select.opened {z-index:20;}
.bop-select .bop-list-btn {margin-top: 15px;}
.bop-select .bop-option.bold {font-weight: bold;}
.bop-select .bop-list {display:none;max-height:320px;overflow-y:auto!important;z-index:3;position:absolute;width:100%;top: calc(100% + 5px);left:0;background:#fff;border: 1px solid #ccc;padding:0px;border-radius: 5px;}
.bop-select .bop-list-empty {display: inline-block;padding: 20px;}
.bop-select .bop-option {cursor:pointer;display: flex;align-items: center;width:100%;padding: 8px 12px;}
.bop-select .bop-option:hover {background: #eeedee; color: #000;}
.bop-select .bop-text .bop-user-img {position: relative;width: 60px;height: 60px;}
.bop-select .bop-list .bop-user-img {position: relative;width: 44px;height: 44px;}
.bop-select .bop-user-info {margin-left:12px;display: flex;flex-direction: row;flex: auto;}
.bop-select .bop-user-info p {font-size: 15px;padding-right: 20px;}
.bop-select .bop-user-name {font-size: 15px;font-weight:600;}
.bop-select .bop-arrow-icon {position: absolute;right: 10px;top: calc(50% - 13px);}
.bop-select.disable .bop-text {opacity:0.4;}
.bop-select.disable .bop-text {color:transparent;}

/* BUSSINESS TIME */
.bop-from-to {display: flex;justify-content: space-between;align-items: center;width:100%;padding: 5px 0;}
.bop-from-to .bop-day {width: 40%;font-weight: 700;}
.bop-from-to .bop-between {margin: 0 5%;font-size: 30px;}
.bop-from-to .bop-time-select {display: flex;width:100%;align-items: center;/* justify-content: flex-end; */}
.bop-from-to .bop-select {width: 43%;}
.bop-from-to .bop-select .bop-arrow-icon {position: absolute;right: 4px;top: calc(50% - 11px);}
.bop-from-to .bop-select .bop-arrow-icon svg {width: 24px;height: 24px;fill: #777;}
.bop-from-to .or {text-align:center;padding: 0 10px;font-size:13px;color:#999;white-space:nowrap;}
.bop-from-to .bop-selection {width: 70%;float:left;}
.bop-from-to .bop-selection a {transition:0.1s;float:left;text-decoration:none;padding:10px;width:50%;text-align:center;font-weight:bold;background:rgba(0,0,0,0.08);border:1px solid rgba(0,0,0,0.1);font-size:13px;line-height:14px;color:#888;margin:0 0 0 -1px;}
.bop-from-to .bop-selection a:first-child {border-top-left-radius:50px;border-bottom-left-radius:50px;}
.bop-from-to .bop-selection a:last-child {border-top-right-radius:50px;border-bottom-right-radius:50px;}
.bop-from-to .bop-selection a:hover {background:rgba(0,0,0,0.13);}
.bop-from-to .bop-selection a.active {color: #fff;background: #3b49df;}

.bop-items {float:left;clear:both;width:100%;margin:0 0 10px 0;}
.bop-empty {float:left;clear:both;width:100%;padding:25px 10px;border-bottom: 1px solid #ccc !important;background:rgba(0,0,0,0.05);margin: 10px 0;font-size: 14px;color:rgba(0,0,0,0.5);text-align:center;border-radius:3px;}

.bop-user-box {display: block;float: left;width: 100%;padding: 20px;background: #f0f0f0;}
.bop-user-box .user-img {z-index:1;position: relative;width: 62px;height: 62px;border-radius: 100px;}
.bop-user-box .user-img > img {transition:0.2s;border: 2px solid #3b49df;padding: 2px;position:absolute;width:100%;height:100%;top:0;left:0;max-width:inherit;max-height:inherit;object-fit:cover;border-radius: 100px;}
.bop-user-box .user-top {display: flex;flex-direction: row;align-items: center;margin-bottom: 10px;}
.bop-user-box .user-info {display: flex;flex-direction: column;margin-left: 12px;}
.bop-user-box .user-info .user-name {font-size: 17px;font-weight:600;}
.bop-user-box .user-info .user-email {font-size: 14px;}
.bop-user-box .user-phone {width: 100%;text-align: center;font-size: 18px;line-height: 25px;}

/* TABLE */
.bop-table-row {display: inline-block;width:100%;border:1px solid #ccc;color:#222;position:relative;border-bottom:none;}
.bop-table-row:first-child, .bop-table-row:first-child .bop-user {border-top-left-radius:8px;border-top-right-radius:8px;}
.bop-table-row:last-child {border-bottom-left-radius:8px;border-bottom-right-radius:8px;}
.bop-table-row:not(.opened):last-child .bop-user {border-bottom-left-radius:8px;border-bottom-right-radius:8px;border-bottom:1px solid #ccc;}
.bop-table-row.opened:last-child .bop-perms {border-bottom-left-radius:8px;border-bottom-right-radius:8px;border-bottom:1px solid #ccc;}
.bop-table-row .bop-user {display: flex;align-items: center;cursor: pointer;width:100%;font-size:16px;font-weight:bolder;color:#222;text-decoration:none;transition:0.1s;padding: 16px 68px 16px 16px;}
.bop-table-row:not(.opened) .bop-user:hover {background:#f0f0f0;text-decoration:none;color:#000;}
.bop-table-row .bop-arrow-icon {position: absolute;right: 30px;top: 34px;}
.bop-user-details .bop-email {font-weight: normal;}
.bop-item-count {margin-left: auto;padding-right: 100px;}
.bop-table-row .bop-perms {display:inline-block;width:100%;line-height:26px;font-size:15px;padding:16px;background:#f0f0f0;}
.bop-table-row .bop-buttons {display: block;background: #fff;width: 100%;padding: 20px 20px 10px 20px;margin-bottom: 20px;border-radius: 6px;}
.bop-table-row .bop-buttons > a {display: inline-block;color: #111;padding: 8px 16px;background: #ddd;border-radius: 4px;margin: 0 10px 10px 0;}
.bop-table-row .bop-buttons > a:hover {text-decoration:none;}
.bop-table-row .bop-user-img {margin: 0 12px 0 0;}
.bop-row-empty {text-align:center;padding:30px 25px 20px 25px;}
.bop-row-empty i {color: #dedede; display: block; clear: both; font-size: 80px; text-shadow: #fff 1px 1px 0;}
.bop-row-empty span {text-align: center; display: block; color: #999;font-size:14px;}

.bop-arrow-icon svg {width: 30px;height: 30px;fill:#1a73e8;display:block;}
.bop-arrow-icon svg.bop-up {display:none;}
.opened .bop-arrow-icon svg.bop-up {display:block;} 
.opened .bop-arrow-icon svg.bop-down {display:none;} 

/* BASE STYLES */
.bop-profile {width: 100%;max-width: 577px;}
.bop-box {width: 100%;display: block;float: left;padding: 20px;background: #eee;border-radius: 10px;margin: 15px 0;}
.bop-row {width:100%;display:inline-block;margin:5px 0;clear:both;}
.bop-body {box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;font-size:14px;line-height:18px;}


@media screen and (max-width: 1024px) {
  .bop-comp {width: 31.333%;}
}

@media screen and (max-width: 767px) {
  .bop-select .user-info {margin-left:12px;display: flex;flex-direction: column;flex: unset;}
  .bop-select .user-info p {font-size: 13px;line-height: 16px;padding-right: 0;}
  .bop-comp {width: 48%;}
}

@media screen and (max-width: 540px) {
  .bop-item-count {display:none;}
  .bop-perms-sel .bop-sec {width:100%;}
  .bop-from-to .bop-between {margin: 0 2%;font-size: 30px;}
  .bop-box {padding:15px;}
}