.btn, .form-control { border-radius: 0 !important; }

.text-success { color: #76aea1 !important; }
.bg-success { background-color: #76aea1 !important; }
.btn-success { color: #fff; background-color: #76aea1 !important; border-color: #76aea1 !important; }
.btn-outline-success { color: #76aea1 !important; background-color: transparent; background-image: none; border-color: #76aea1 !important; }
.btn-outline-success:hover { color: #fff !important; background-color: #76aea1 !important; border-color: #76aea1 !important; }

.page-item.active .page-link {
    background-color: #76aea1 !important;
    border-color: #76aea1 !important;
    color: #ffffff !important;
}

.loading { background: transparent url('images/icon/loader.gif') center center no-repeat; }

.page-link, .page-link:hover { color: #76aea1 !important; }

.iconbtn { width: 162px; height: 116px; }

.icon-lg { font-size: 3rem; }
.icon-md { font-size: 1.6rem; }
.icon-sm { font-size: 1.3rem; }

.tagbtn { transform: rotate(-90deg); z-index: 10000; top: 50vh; left: -30px; position: fixed; }

.imgDesc    { z-index: 2; bottom: 32px; position: absolute; padding: 5px 0 5px 0; text-align: center; width: 86%; background-color: rgba(118, 174, 161, 0.8); color: #014233; display: none; }

.astBox  { height: 17rem; overflow: hidden; }
.astTop  { width: 360px; margin: -58px 0 0 -91px; }
.astBtm  { width: 310px; margin: -164px 0 0 -62px; }
.astShoe { width: 440px; margin: -418px 0 0 -125px; }

.astBox:hover~.imgDesc { display: block; transition: .01s; }

.img-icon { width: 20%; }

.form-control:focus {
    border-color: #76aea1 !important;
    box-shadow: 0 0 0 0.2rem #76aea140 !important;
}

.custom-control-input:checked~.custom-control-label::before{
    background-color: #76aea1 !important;
    border-color: #76aea1 !important;
}

.custom-select:focus {
    border-color: #76aea1 !important;
    outline: 0;
    box-shadow: 0 0 0 0.2rem #76aea138 !important;
}

.custom-select:focus > option:checked { box-shadow: 0 0 10px 100px #76aea1 inset !important; }

/* index.php */

#index .form-control {
    border-radius: 0 !important;
}

/* capture.php */

#capture .nav-pills .nav-link {
    border-radius: 0rem !important;
    color: #76aea1 !important;
}

#capture .nav-pills .nav-link.active, #capture .nav-pills .show>.nav-link {
    color: #fff !important;
    background-color: #76aea1 !important;
}

.border, .img-thumbnail {
    border-color: #76aea1 !important; }
}

.border-selected { border: 1.5px solid #76aea1 !important; }
.border-muted { border: 1px solid #dee2e6 !important; }
.border-muted { border: 1px solid #dee2e6 !important; }


#capture .s-box {
    position: absolute !important;
    z-index: 999 !important;
    top: -3px !important;
    width: 13% !important;
    margin: 3px 3px !important;
}

#capture .s-box {
    position: absolute;
    z-index: 999;
    top: -19px;
    width: 100%;
    margin: 18px 3px
}

#capture .custom-control-label::before { 
    height: 1.3rem !important; 
    width: 1.3rem !important;
    border: 1px solid #76aea1;
}

#capture .custom-control-label::after { 
    height: 1.3rem !important; 
    width: 1.3rem !important;
}

#capture .s-drop { 
    position: absolute;
    z-index: 999;
    top: 246px;
    width: 84%;
    margin: 0px 2px;
}

#manage_role .custom-control-label::before { 
    height: 1.3rem !important; 
    width: 1.3rem !important;
    border: 1px solid #76aea1;
}

#manage_role .custom-control-label::after { 
    height: 1.3rem !important; 
    width: 1.3rem !important;
}

.border-dashed {
    border: 2px dashed #76aea1;
}

.drag-drop .form-control-file {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 6em;
    outline: none;
    visibility: hidden;
    cursor: pointer;
    background-color: #c61c23;
}

.drag-drop .form-control-file:before {
    content: attr(data-title);
    position: absolute;
    top: 0.5em;
    left: 0;
    width: 100%;
    min-height: 6em;
    line-height: 2em;
    padding-top: 1.5em;
    opacity: 1;
    visibility: visible;
    text-align: center;
    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
    overflow: hidden;
}

/* Style.php */

.col-4 .card {
    border: none !important;
}

.list-group-item {
    border: none !important;
    padding: .25rem 1rem !important;
}

.list-group-item .col-9 {
    padding: 0px !important;
}

.list-group-item .col-3 {
    padding-right: 4px !important;
    padding-left: 4px !important;
}

#bg, #shdw, #pose, #head, #top, #bottom, #dress, #access, #foot { position: absolute; }

#bg { z-index: 995; }
#shdw { z-index: 996; }
#pose { z-index: 997; }
#top { z-index: 1000; }
#bottom { z-index: 999; }
#dress { z-index: 1000; }
#access { z-index: 1005; }
#foot { z-index: 998; }

#lipstick, #eyeshd, #eyemkp, #blush { position: absolute; }
#lipstick { z-index: 998; }
#eyeshd { z-index: 998; }
#eyemkp { z-index: 998; }
#blush { z-index: 998; }

#accbr, #accer, #accnc, #accrn { position: absolute; }
#accbr { z-index: 1001; }
#accer { z-index: 1002; }
#accnc { z-index: 1003; }
#accrn { z-index: 1004; }

@media (min-width: 1024px) {
    .accbg { width: 5rem; height: 6rem; right: .9rem; background-repeat: no-repeat !important; background-position: top right !important; background-size: 17.8rem !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .accbg { width: 4rem; height: 6rem; right: .9rem; background-repeat: no-repeat !important; background-position: top right !important; background-size: 11rem !important; }
}

#select-style .nav-tabs .nav-link {
    border: 2px solid transparent !important;
    color: #76aea1 !important;
}

#select-style .nav-tabs .nav-link.disabled {
    color: #acacac !important;
}

#select-style .nav-tabs .nav-item.show .nav-link, #select-style .nav-tabs .nav-link.active {
    border-color: #ffffff #ffffff #76aea1 !important;
}

#do-make-up .nav-tabs .nav-link{
    border: 2px solid transparent !important;
    color: #76aea1 !important;
    font-weight: 500;
}

#do-make-up .nav-tabs .nav-item.show .nav-link, #do-make-up .nav-tabs .nav-link.active {
    /*border-color: #76aea1 #ffffff #ffffff  !important;*/
    background-color: #76aea133 !important;
}

#nav-tabContent .c-box {
    position: absolute;
    z-index: 999;
    top: -19px;
    width: 100%;
    margin: 18px 3px
}


#settings .c-box, #backgrounds .c-box, #shadow_client .c-box {
    position: absolute;
    z-index: 999;
    top: -19px;
    width: 100%;
    margin: 18px 3px
}

#settings .custom-control-label::before, #settings .custom-control-label::after { 
    height: 1.3rem !important; 
    width: 1.3rem !important;
    border: 1px solid #76aea1;
    border-radius: 50px;
}

#backgrounds .custom-control-label::before, #backgrounds .custom-control-label::after { 
    height: 1.5rem !important; 
    width: 1.5rem !important;
}

#shadow_client .custom-control-label::before, #shadow_client .custom-control-label::after { 
    height: 1.5rem !important; 
    width: 1.5rem !important;
}

#nav-tabContent .custom-control-label::before, #nav-tabContent .custom-control-label::after { 
    height: 1.3rem !important; 
    width: 1.3rem !important;
    border: 1px solid #76aea1;
    border-radius: 50px;
}

#master-autopose .mcbox {
    position: absolute;
    z-index: 999;
    bottom: 50%;
    left: 42%;
    margin: 0px 2px;
    text-align: center;
}

#master-autopose .mlbox {
    position: absolute;
    z-index: 998;
    top: -19px;
    width: 100%;
    margin: 0px 2px;
}

#master-autopose .m-chkbox {
    position: absolute;
    top: .25rem;
    display: block;
    content: "";
    background-color: #76aea1 !important;
    color: #ffffff !important;
    height: 1.3rem !important;
    width: 1.3rem !important;
    border-radius: 50% !important;
}

#master-autopose .m-chklbl {
    width: 90%;
    line-height: 160px;
    margin-left: -22px;
}

#master-autopose .mpcbox {
    position: absolute;
    z-index: 999;
    top: -0.5%;
    margin: 0px 2px;
    text-align: center;
}

#master-autopose .mplbox {
    position: absolute;
    z-index: 998;
    top: -19px;
    width: 100%;
    margin: 0px 2px;
}

#master-autopose .mp-chkbox {
    position: absolute;
    top: .25rem;
    display: block;
    content: "";
    background-color: #76aea1 !important;
    color: #ffffff !important;
    height: 1.3rem !important;
    width: 1.3rem !important;
    border-radius: 50% !important;
}

#master-autopose .mp-chklbl {
    width: 81%;
    line-height: 230px;
    margin-left: -34px;
    margin-top: 18px;
}

#master-autopose .crop {
    height: 135px;
    overflow: hidden;
}

#style .container-fluid{width: 96%;}

.falert {
    position: absolute;
    z-index: 999;
    top: 30%;
    width: 85%;
}

/*@media (min-width: 1366px){*/
    .col-lg-2.col-md-3.col-6 .prop { position: absolute; width: 9.5rem; top: 4px; }
    .col-lg-4.col-md-6 .prop { position: absolute; width: 21.4rem; top: 4px; }
/*}*/

/*@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
    .col-lg-2.col-md-3.col-6 .prop { position: absolute; width: 9.5rem; top: 4px; }
    .col-lg-4.col-md-6 .prop { position: absolute; width: 21.4rem; top: 4px; }
}

@media (min-width: 1024px) and (max-width: 1366px) and (orientation: portrait) {
    .col-lg-2.col-md-3.col-6 .prop { position: absolute; width: 7.6rem; top: 4px; }
    .col-lg-4.col-md-6 .prop { position: absolute; width: 17.6rem; top: 4px; }
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .col-lg-2.col-md-3.col-6 .prop { position: absolute; width: 7.6rem; top: 4px; }
    .col-lg-4.col-md-6 .prop { position: absolute; width: 17.6rem; top: 4px; }
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .col-lg-2.col-md-3.col-6 .prop { position: absolute; width: 8.9rem; top: 4px; }
    .col-lg-4.col-md-6 .prop { position: absolute; width: 20.15rem; top: 4px; }
}

@media (min-width: 360px) and (max-width: 768px) and (orientation: landscape) {
    .col-lg-2.col-md-3.col-6 .prop { position: absolute; width: 14.5rem; top: 4px; }
    .col-lg-4.col-md-6 .prop { position: absolute; width: 31.4rem; top: 4px; }
}

@media (min-width: 360px) and (max-width: 768px) and (orientation: portrait) {
    .col-lg-2.col-md-3.col-6 .prop { position: absolute; width: 8.9rem; top: 4px; }
    .col-lg-4.col-md-6 .prop { position: absolute; width: 20.15rem; top: 4px; }
}*/

/*#sku-listing #skutable_filter { display: none; }*/

/*makeup position*/
.klad-img { width: 200%; margin: -46px 0 0 -310px; }
.klad { width: 200%; margin: -57px 0 0 -340px; }
.klad-eyesh { width: 190.5%; margin: -46px 0 0 -311px; }
.klad-eyemk { width: 200%; margin: -54px 0 0 -341px; }
.klad-blu { width: 200%; margin: -60px 0 0 -340px; }

.klada-img { width: 200%; margin: -46px 0 0 -310px; }
.klada { width: 200%; margin: -55px 0 0 -337px; }
.klada-eyesh { width: 191%; margin: -45px 0 0 -308px; }
.klada-eyemk { width: 200%; margin: -53px 0 0 -335px; }
.klada-blu { width: 191%; margin: -45px 0 0 -309px; }

.kladb-img { width: 200%; margin: -46px 0 0 -310px; }
.kladb { width: 200%; margin: -58px 0 0 -340px; }
.kladb-eyesh { width: 191%; margin: -45px 0 0 -313px; }
.kladb-eyemk { width: 200%; margin: -53px 0 0 -342px; }
.kladb-blu { width: 191%; margin: -45px 0 0 -309px; }

.kladc-img { width: 200%; margin: -46px 0 0 -310px; }
.kladc { width: 200%; margin: -58px 0 0 -339px; }
.kladc-eyesh { width: 191%; margin: -47px 0 0 -313px; }
.kladc-eyemk { width: 200%; margin: -53px 0 0 -335px; }
.kladc-blu { width: 191%; margin: -47px 0 0 -312px; }

.kri-img { width: 200%; margin: -46px 0 0 -340px; }
.kri { width: 200%; margin: -75px 0 0 -378px; }
.kri-eyesh { width: 200%; margin: -75px 0 0 -378px; }
.kri-blu { width: 200%; margin: -75px 0 0 -378px; }

.valnk-img { width: 200%; margin: -46px 0 0 -308px; }
.valnk { width: 200%; margin: -57px 0 0 -338px; }
.valnk-eyesh { width: 191%; margin: -45px 0 0 -310px; }
.valnk-eyemk { width: 200%; margin: -55px 0 0 -338px; }
.valnk-blu { width: 191%; margin: -45px 0 0 -309px; }


#imgtag
{
position: relative;
min-width: 300px;
min-height: 300px;
float: none;
border: 3px solid #FFF;
cursor: crosshair;
text-align: center;
}
.tagview
{
border: 1px solid #F10303;
width: 100px;
height: 100px;
position: absolute;
/*display:none;*/
opacity: 0;
color: #FFFFFF;
text-align: center;
}
.square
{
display: block;
height: 79px;
}
.person
{
background: #282828;
border-top: 1px solid #F10303;
}
#tagit
{
position: absolute;
top: 0;
left: 0;

}
#tagit .box
{
border: 1px solid #F10303;
width: 100px;
height: 100px;
float: left;
}

#tagit DIV.text
{
margin-bottom: 5px;
}
#tagit INPUT[type=text]
{
margin-bottom: 5px;
}
#tagit #tagname
{
width: 110px;
}
.tagtitle
{
font-size: 14px;
text-align: center;
width: 100%;
float: left;
}
.editor {
line-height: normal;
padding:0px 0px 2px 0px;
background-color:#f2f2f2;
color:#000;
opacity:0.97;
border:1px solid #ccc;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
-moz-box-shadow:0px 5px 15px #111; 
-webkit-box-shadow:0px 5px 15px #111; 
box-shadow:0px 5px 15px #111; 
}

.editor-text {
border-width:0px 0px 1px 0px;
border-style:solid;
border-color:#ccc;
line-height: normal;
background-color:#fff;
width:240px;
height:50px;
outline:none;

font-size:11px;
padding:4px;
margin:0px; 
color:#000;
text-shadow:none;
overflow-y:auto;
display:block;
}


.editor-button {

line-height: normal;
display:inline-block;
text-align:center;
text-decoration:none;
font-size:10px; 
border:1px solid #777;
color:#ddd;
padding:3px 8px;
margin:8px -19px 10px 36px;
cursor:pointer;
cursor:hand;
background:-webkit-gradient(linear, left top, left bottom, from(#888), to(#555));
background:-moz-linear-gradient(top, #888, #555);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#555555');
-moz-border-radius:2px;
-webkit-border-radius:2px;
-khtml-border-radius:2px;
border-radius:2px;
}

.editor-button:hover {
background:#999;
}

.editor-field {
border-bottom:1px solid #ccc;
margin:0px;
background-color:#fff;
padding:3px;

font-size:12px; 
}
.hint-msg {
background-color:rgba(0,0,0,0.6);
margin:4px;
padding:8px 15px 8px 30px;

line-height:normal;
font-size:12px;
color:#fff;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
-khtml-border-radius:4px;
}

.hint-icon {
position:absolute;
top:6px;
left:5px;
background:url(feather_icon.png);
background-repeat:no-repeat;
width:19px;
height:22px;
margin:2px 4px 0 6px;
}

.opacity-fade {
-moz-transition-property:opacity;
-moz-transition-duration:.5s;
-moz-transition-delay:0;
-webkit-transition-property:opacity;
-webkit-transition-duration:.5s;
-webkit-transition-delay:0;
-o-transition-property:opacity;
-o-transition-duration:.5s;
-o-transition-delay:0;
transition-property:opacity;
transition-duration:.5s;
transition-delay:0;
}

.item-focus {
opacity:1.0;
}

.item-unfocus {
opacity:0.4;
}

.popup {
/* position:absolute;*/
top:0;
left:0;
width:220px;
min-height:26px;
margin-top: 29px;
background-color:#383838;
border:1px solid #000;
outline:none;
padding:5px;
-moz-transition-property:opacity;
-moz-transition-duration:.5s;
-moz-transition-delay:0;
-ms-transition-property:opacity;
-ms-transition-duration:.5s;
-ms-transition-delay:0;
-webkit-transition-property:opacity;
-webkit-transition-duration:.5s;
-webkit-transition-delay:0;
-o-transition-property:opacity;
-o-transition-duration:.5s;
-o-transition-delay:0;
transition-property:opacity;
transition-duration:.5s;
transition-delay:0;
-moz-border-radius:8px;
-webkit-border-radius:8px;
-khtml-border-radius:8px;
border-radius:8px;
-o-box-shadow:0 5px 5px rgba(0,0,0,0.7),inset 0 1px 1px rgba(255,255,255,0.25);
-ms-box-shadow:0 5px 5px rgba(0,0,0,0.7),inset 0 1px 1px rgba(255,255,255,0.25);
-moz-box-shadow:0 5px 5px rgba(0,0,0,0.7),inset 0 1px 1px rgba(255,255,255,0.25);
-webkit-box-shadow:0 5px 5px rgba(0,0,0,0.7),inset 0 1px 1px rgba(255,255,255,0.25);
box-shadow:0 5px 53px rgba(0,0,0,0.7),inset 0 1px 1px rgba(255,255,255,0.25);
}



.editor:after {
content:url(../images/annotation-icon/Indicator.png);
position:absolute;
left:15px;
top:-14px;
height:18px;
width:19px;
display:block;
}

.popup:after {
content:url(../images/annotation-icon/Indicator.png);
position:absolute;
right: 64px;
top: 96px;
height:18px;
width:19px;
display:block; 
}

.popup-field {
margin:0px;
padding:6px;

font-size:12px;
}

.editor {
position:absolute;

margin-top:115px;
background-color:#383838;
color:#F2F2F2;
border:1px solid #000;
border-radius:8px;
-o-border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
-khtml-border-radius:8px;
-o-box-shadow:0 5px 5px rgba(0,0,0,0.7),inset 0 1px 1px rgba(255,255,255,0.25);
-ms-box-shadow:0 5px 5px rgba(0,0,0,0.7),inset 0 1px 1px rgba(255,255,255,0.25);
-moz-box-shadow:0 5px 5px rgba(0,0,0,0.7),inset 0 1px 1px rgba(255,255,255,0.25);
-webkit-box-shadow:0 5px 5px rgba(0,0,0,0.7),inset 0 1px 1px rgba(255,255,255,0.25);
box-shadow:0 5px 53px rgba(0,0,0,0.7),inset 0 1px 1px rgba(255,255,255,0.25);
z-index:2;
}


.editor-text {
border-bottom:1px solid gray;
background-color:#383838;
line-height:150%;
margin:10px 0px 4px 0px;
padding:0px 10px;
min-height:50px;
width:100%;
min-width:200px;
outline:none;

font-weight:400;
font-size:12px;
color:#eee;
text-shadow:none;
overflow-y:auto;
display:block;

}

.editor-text a:hover {
color:#eee;
background-color:transparent;
}

.editor-button {
float:right;
line-height:normal;
display:inline-block;
text-align:center;
text-decoration:none;

font-size:.625em;
border:1px solid #000;
color:#f2f2f2;
padding-top:5px;
padding-bottom:5px;
margin:7px 2px 10px 0px;
cursor:pointer;
width:60px;
-moz-box-shadow:inset 0 1px 1px rgba(255,255,255,0.25),0 1px 1px rgba(255,255,255,0.25);
-webkit-box-shadow:inset 0 1px 1px rgba(255,255,255,0.25),0 1px 1px rgba(255,255,255,0.25);
box-shadow:inset 0 1px 1px rgba(255,255,255,0.25),0 1px 1px rgba(255,255,255,0.25);
-moz-border-radius:3px;
-webkit-border-radius:3px;
-khtml-border-radius:3px;
border-radius:3px;
opacity:1;
}


.editor-button:hover {
color:rgba(242,2423,242,1);
text-shadow:0 0 6px rgba(242,242,242,0.6);
-o-text-shadow:0 0 6px rgba(242,242,242,0.6);
-moz-text-shadow:0 0 6px rgba(242,242,242,0.6);
-webkit-text-shadow:0 0 6px rgba(242,242,242,0.6);
}

.editor-button:active {
-moz-box-shadow:inset 0 3px 3px rgba(0,0,0,0.7),0 1px 1px rgba(255,255,255,0.25);
-webkit-box-shadow:inset 0 3px 3px rgba(0,0,0,0.7),0 1px 1px rgba(255,255,255,0.25);
box-shadow:inset 0 3px 3px rgba(0,0,0,0.7),0 1px 1px rgba(255,255,255,0.25);
}

.editor-field {
margin:0px;
padding:6px 0px;

font-size:12px; 
}

/* OpenLayers module */
.ol-boxmarker-outer {
border:1px solid #000;
}

.ol-boxmarker-inner {
border:1px solid #fff;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

.ol-hint {
line-height: normal;

font-size:16px;
color:#fff;
background-color:rgba(0,0,0,0.7);
margin:0px;
padding:9px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
}