/* below 576 here ================================================================== Tool Css */
/* =============================================================Resets */
body {
    height: 100%;
    min-width: inherit ;
	background:#fff;
}
.area, .fluid {
    position: relative;
}
.area {
    width: 100%;
    max-width: 1220px;
    margin: 0 auto;
}

#content {
    min-height: unset;
}


#approvePage,
#finishOrderPage{
    margin-top: 20px;
}


span#myoc-lpu-special {
    font-size: 25px;
}
span.price-old {
    background-color: #fff !important;
    color: red;
    text-decoration: line-through;
}
span.price-old span#myoc-lpu-price {
    font-size: 19px;
    color: #929292;
    text-decoration: line-through;
}

.couple-img-gap{
    font-size:0;
}
#approvePage .container-fluid img{
    margin-top:20px;
}

/* =============================================================Editor Page */
.i-desktop-only{
display:none;
}
#editorFrame {
     border: 0;
}
#saveAndNextButtonsWrapper{
    text-align: right;
    padding: 10px 20px;
	width: 100%;
	margin: auto;
    background-color: #fff;
}
.editor-back-btn {
    width: 100px !important;
    float: left;
    display: block;
}

.editor-finish-btn {
    width: -webkit-calc(100% - 110px);
    width: -ms-calc(100% - 110px);
    width: -o-calc(100% - 110px);
    width: -moz-calc(100% - 110px);
    width: calc(100% - 110px);
    float: left;
    display: block;
    margin-left: 10px;
}
.editor-back-btn a{
    width: 100%;
    display:block;
    
}

/* =============================================================Approve Page */
#approveButtonWrapper  {
    text-align: right;
    padding: 20px;
    background-color: #fff;
}
#approveButtonWrapper input {
    max-width: 138px;
    width: 100%;
}
#lnkEditAgain  {
    float: left;
}
.container-fluid img {
    width: 50%;
    max-width: 250px;
}




/* =======================================================Finish Order Page */
#finishOrderPage h2 {
   font-size:25px;
}






/*|||||||||||||||||||||||||||||||||||||||||||||| Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
#editorFrame {
    height: 470px;
}
/* ==========Editor page====*/ 
.i-desktop-only{
display:block;
}
.i-mobile-only{
  display:none; 
}
#saveAndNextButtonsWrapper{
    background-color: #b6e2e0;
    width: 100%;
}
#saveAndNextButtonsWrapper input{
    max-width: 200px;
	border-radius: 0;
}


/* ==========Approve page====*/
#approveButtonWrapper  {
    background-color: #b6e2e0;
}
.container-fluid img {
    width: 50%;
    max-width: 250px;
}


/* ==========Finish page====*/
#finishOrderPage .previewImg{
        margin-top: 20px;
}
}


/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
    #editorFrame {
    height: 550px;
}
#editorPage{
    margin-top: 20px;
}
}


/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
    #editorFrame {
    height: 600px;
}
}


/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) { 
    #editorFrame {
 height:580px;
}

}

@media only screen and (min-width:480px) and (max-width:576px){
#editorFrame {
 height:83.45vh;
min-height:450px;
}
}
@media only screen and (min-width:361px) and (max-width:479px){
#editorFrame {
 height:74vh;
min-height:450px;
}
}

@media only screen and (min-width:320px) and (max-width:360px){
#editorFrame {
 height:80vh;
min-height:450px;
}
}