/*
    CSS for edit_cover.asp
 */

/* main card image */
.ec_img_portrait {
    width: 465px;
    height: 651px;
}
.ec_img_landscape {
    width: 651px;
    height: 465px;
}
/* GCU mobile */
.ec_img_portrait_m {
    width: 215px;
    height: 301px;
}
.ec_img_landscape_m {
    width: 301px;
    height: 215px;
}

/* main container */
#edit_cover_div {
    border: 1px solid #DDD;
    background: #F8F8F8;
    padding: 5px 0px 15px 0px;
    margin: 5px 0px 0px 0px;
}

/* main UI containers */
#ec_ui {
    display: flex;
}
div.ec_ui {
    gap: 15px;
}
div.ec_ui_m {
    flex-flow: column;
    gap: 5px;
    align-items: center;
}

#ec_ui_options {
    min-width: 315px;
    max-width: 325px;
}
#ec_img_ui {
    padding: 0px 0px 5px 0px;
}

/* step image/icon div */
div.ec_img_head,
div.ec_msg_head {
    margin: 25px 0px 0px 0px;
    padding: 0px 0px 0px 5px;
    display: flex;
    align-items: center;
}
div.ec_img_head_m,
div.ec_msg_head_m {
    padding: 0px 0px 0px 10px;
}
div.ec_img_head img,
div.ec_msg_head img {
    padding: 0px 5px 0px 0px;
}

#ec_img_note,
#ec_txt_note {
    display: none;
    border: 1px solid #009900;
    background-color: #E0FFE0;
    padding: 3px;
    margin: 10px 10px 0px 5px;
}

div.ec_textarea div {
    margin: 0px 0px 5px 0px;
    line-height: 1;
}
div.ec_textarea_m {
    margin: 0px 0px 10px 0px;
    line-height: 1;
    padding: 5px;
    border: 1px solid #DDD;
    border-radius: 5px;
}
div.ec_textarea_m div {
    margin: 5px 0px 0px 0px;
}
div.ec_textarea_m a {
    font-size: 1.5em;
}

#text_pos {
    display: none;
}
#text_pos > div {
    margin: 10px 0px;
}

/* GCU mobile - image list elements */
div.ec_img_list_div_m {
    display: flex;
    gap: 5px;
}
div.ec_img_list_div_m > div {
    border: 1px solid #DDD;
    border-radius: 5px;
    padding: 2px;
}
div.ec_img_list_div_m img {
    max-width: 100px;
}
div.ec_img_list_filename {
    text-align: center;
    vertical-align: top;
    font-size: 0.75em;
}
div.ec_img_list_links {
    display: flex;
    justify-content: center;
    align-items: center;
}
div.ec_img_list_links div:first-child {
    margin: 0px 20px 0px 0px;
}
div.ec_img_list_links a {
    font-size: 1.5em;
}

div.ec_img_detail div {
    font-size: 0.65em;
}

/* image related elements */
#ec_ui_img {
    flex-grow: 2;
}

#ec_img {
    background: url(/images/common/emptyCheque.png) !important;
    position: relative;
    overflow: hidden;
    border: 1px solid #DDD;
}
.ec_img {
    margin: 5px 0px 15px 15px;
}
.ec_img_m {
    margin: 5px 0px 5px 0px;
}

/* safe frame - psuedo element */
#ec_ui_img_border,
.ec_img_border,
.ec_img_border_m {
    position: relative;
    width: fit-content;
    margin: auto;
}
.ec_img_border:before,
.ec_img_border_m:before {
    border: 2px dashed rgb(245, 158, 51);
    content: " ";
    position: absolute;
    z-index: 2;
}
.ec_img_border:before {
    top: 43px;
    left: 32px;
    right: 16px;
    bottom: 53px;
}
.ec_img_border_m:before {
    top: 30px;
    left: 7px;
    right: 7px;
    bottom: 33px;
}

#ec_img_status {
    text-align: center;
}

#cover_img_div {
    position: relative;
    z-index: 1;
}

.img_element,
.txt_element {
    position: absolute;
}
.txt_element {
    z-index: 2;
}

.edit_element {
    border: 1px dashed #000;
    z-index: 3;
    cursor: move;
}
img.edit_element:hover {
    opacity: .85;
}

.photo_div {
    position: absolute;
    padding: 5px 0px;
    width: 120px;
    height: 20px;
    z-index: 3;
}
.photo_div button {
    display: block;
    margin: 0 auto;
    cursor: pointer;
}
.add_img_button {
    background: #EC742E;
    border-radius: 6px;
    border: 1px solid #EEB44F;
    color: #FFF;
    font-size: 13px;
}
.add_img_button:hover {
    background: #FFAB33;
}
.add_img_button:active {
    position: relative;
    top: 1px;
}

/* image ui - right column */

/* move/resize image element ui */
div.ec_img_size_div {
    display: flex;
}
div.ec_img_size_div img {
    border: 1px solid #999;
    margin: 0px 20px 0px 0px;
    align-self: center;
}
div.ec_img_size_div div {
    margin: 8px 0px 5px 0px;
}
.ec_img_size_button {
    font-size: 16px;
    font-weight: bold;
    color: #FFF;
    cursor: pointer;
    border: none;
    width: 25px;
    height: 25px;
    padding: 0px 0px 5px 0px;
    box-shadow: 3px 3px 3px rgba(50, 50, 50, 0.51);
    background: linear-gradient(135deg, rgb(99,118,156) 0%, rgb(132,155,205) 100%);
}
.ec_img_size_button:disabled {
    background: #7D7D7D;
}

#preview_links {
    text-align: center;
}

#showsafeframe_div {
    margin: 0px 0px 0px 5px;
}
#showsafeframe_div > img {
    border-bottom: 2px dashed rgb(245, 158, 51);
    width: 20px;
    margin-bottom: 4px;
}

/* edit cover footer buttons - save/cancel */
#ec_ui_footer {
    margin: 0px 10px 0px 0px;
    text-align: right;
}
#footer_buttons input {
    margin: 5px 0px 0px 0px;
}

.box_style {
    margin: 0px 10px 0px 5px;
    padding: 5px;
    background: #FFF;
    border: 1px solid #EEE;
    border-radius: 5px;
}
.editlink {
    font-size: 11px;
}