@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css');

.mithril-image-editor{
    font-family: sans-serif;
}

/* =============================== Loader CSS START =============================== */
.mithril-image-editor .__loader__container{position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.1);z-index: 99999999;}
.__loader__container > div{position: absolute;left: 0;right: 0;top: 0;bottom: 0;height: 16px;margin: auto;}
@keyframes kn-dc {from{opacity:0}to{opacity:1}}
@keyframes kn-dc-d {20%{opacity:1;transform:scale(2)}}
/* =============================== Loader CSS END =============================== */

.tui-image-editor {
    width: 100%;
    height: 160px;
    overflow: hidden;
}
.tui-image-editor-canvas-container {
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    overflow: hidden;
}
.crop__menu,
.crop__submenu {
    color: #fff;
    padding: 10px;
    font-size: 14px;
    cursor: pointer;
    display: inline-block;
    user-select: none;
}
.crop__menu:hover,
.crop__submenu:hover {
    color: #000;
    background-color:#f3f3f3;
}

.community__popupboxcover{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #00000073;
    z-index: 99999;
}
.community__popupboxcover.community__confirmpopup{
    z-index: 9999999;
}
.community__popupbox{
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 550px;
    max-width: 90%;
    color: #000;
    background-color: #fff;
    border-radius: 4px;
    z-index: 9999999;
}
.community__popupbox.community__confirmpopup{
    width: unset;
}
.community__popupbox--head{padding: 15px 30px;font-size: 20px;line-height: 30px; border-bottom: 1px solid #e7e7e7;}
.community__popupbox--content{padding: 30px 30px 0 30px;text-align: center;}
.community__popupbox--image{padding-top: 20px;}
.community__popupbox--crop{padding: 2px; background-color: #000;}
.community__popupbox--footer{padding:15px 30px;font-size:20px;color:#000;line-height:30px; border-top: 1px solid #e7e7e7;}
.community__popupbox--submit{display:flex;justify-content: space-between;margin-top:15px;text-align: center;}
.community__popupbox--submit-right{justify-content:flex-end;}
.community__popupbox--submit button{margin-left:15px; padding: 0 20px; min-width: 90px; border-radius:3px;height:50px;font-size: 14px;line-height: 20px; border:1px solid #FCB414;background:#ffffff;color:#000!important;cursor: pointer;}
.community__popupbox--submit button:first-child{margin-left: 0;}
.community__popupbox--submit button.active{background:#FCB414;}
.community__popupbox--submit label{margin-left: 0;padding: 0 20px;min-width: 90px;border-radius: 3px;height: 50px;font-size: 14px;line-height: 50px;border: 1px solid #FCB414;background: #ffffff;color: #000!important; margin-bottom: 15px;cursor: pointer;}
.community__popupbox--submit label input{display: none;}
.community__popupbox--error{height: 30px;color: red;font-size: 14px;line-height: 30px;}

@media screen and (max-width:600px){
	.community__popupbox{top: 5%;left: 5%;transform: translate(0,0);}
	.community__popupbox--submit{display: block;}
	.community__popupbox--submit-left,.community__popupbox--submit-right{margin-bottom: 15px; text-align: center;}
}


.replace__image {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    align-items: center;
    margin-bottom: 50px;
}

.replace__item {
    display: flex;
    font: 400 16px 'Mager';
    height: 40px;
    cursor: pointer;
}

.replace__select {
    background-color: white;
    color: #FCB414;
    padding: 10px;
    border-radius: 3px;
    width: 165px;
}

.replace__select img {
    margin-right: 10px;
}

.replace__remove {
    background-color: transparent;
    align-items: center;
    color: #FCB414;
    margin-left: 15px;
}