/* -----------------------

Primary color - #3F51B5;

Background color - #E8EAF6;

Accent color - #F44336;

Dark primary font color - #1B1B1B;
Dark secondary font color - #7B7B7B;

Light primary font color - #FFFFFF;

------------------------ */

@font-face {
    font-family: 'Roboto';
	font-weight: 400;
    src: local("Roboto-Regular"), 
         url(/css/Roboto-Regular.ttf);
}
@font-face {
    font-family: 'Roboto';
	font-weight: 700;
    src: local("Roboto-Bold"), 
         url(/css/Roboto-Bold.ttf);
}
@font-face {
    font-family: 'Roboto';
	font-weight: 300;
    src: local("Roboto-Light"), 
         url(/css/Roboto-Light.ttf);
}
@font-face {
    font-family: 'Roboto';
	font-weight: 400;
	font-style: italic;
    src: local("Roboto-Italic"), 
         url(/css/Roboto-Italic.ttf);
}
@font-face {
    font-family: 'Roboto';
	font-weight: 700;
	font-style: italic;
    src: local("Roboto-BoldItalic"), 
         url(/css/Roboto-BoldItalic.ttf);
}
@font-face {
    font-family: 'Roboto';
	font-weight: 500;
    src: local("Roboto-Medium"), 
         url(/css/Roboto-Medium.ttf);
}
@font-face {
    font-family: 'Roboto';
	font-weight: 500;
	font-style: italic;
    src: local("Roboto-MediumItalic"), 
         url(/css/Roboto-MediumItalic.ttf);
}
@font-face {
    font-family: 'Roboto';
	font-weight: 300;
	font-style: italic;
    src: local("Roboto-LightItalic"), 
         url(/css/Roboto-LightItalic.ttf);
}

body { margin:0; font-family:"Roboto", Arial, sans-serif, "Open Sans"; color:#1B1B1B; background-color:#E8EAF6; min-width:264px; }

.clear {height:0;overflow:hidden;font-size:1px;clear:both;visibility:hidden;}

.animated { -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }
.animated_all * { -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }

a { outline:none; border:none; }
a.default { text-decoration:none; color:inherit; }
a.default:hover { text-decoration:underline; }

.header { height:48px; background-color:#3F51B5; color:#FFFFFF; font-size:0; font-weight:500; text-transform:uppercase; box-shadow: 0 2px 4px rgba(0,0,0,0.20); position:fixed; width:100%; z-index:110; top:0; left:0; overflow:hidden; white-space:nowrap; }
.header .tabs { padding-right:48px; overflow-x:auto; }
.header .tab { width:33%; padding:16px 0 15px 0; display:inline-block; font-size:14px; text-align:center; opacity:0.7; color:#FFFFFF; text-decoration:none; }
.header .tab:last-child { width:34%; }
.header .tab.selected { border-bottom:2px solid #E8EAF6; padding:16px 0 13px 0; opacity:1; }
.header .user { position:absolute; top:0; right:0; padding:12px 12px 6px 12px !important; cursor:pointer; width:24px; }

#main_content { margin-top:48px; display:none; }



#validation_form .error { color:#EC1919; border-bottom: 1px solid #EC1919; }
#validation_form input[type=submit] { font-family:"Roboto", Arial, sans-serif; padding:16px 0 15px 0; border:none; background:#3F51B5; font-weight:500; font-size:14px; text-align:center; width:100%; display:block; position:relative; box-sizing:border-box; cursor:pointer; outline:none; color:#FFF; text-transform:uppercase; }


#user_info .current_user { padding:15px; border:none; border-bottom:1px solid #ECECEC; background:#FFF; width:100%; overflow:hidden; display:block; position:relative; box-sizing:border-box; }
#user_info .exit { padding:15px; border:none; border-bottom:1px solid #ECECEC; background:#FFF; width:100%; overflow:hidden; display:block; position:relative; box-sizing:border-box; cursor:pointer; text-align:center; color:#999; }


.dictionary { padding:0 15px; }
/*.dictionary .order { font-weight:500; font-size:14px; padding:0 0 12px 0; width:100%; text-transform:capitalize; color:#7D7D7D; }
.dictionary .orderButton { font-size:14px; font-weight:700; padding:8px 10px 10px 10px; color:#3F51B5; display:inline-block; margin-left:5px; cursor:pointer; }*/
.dictionary .order {
    text-transform: capitalize;
    color: #7D7D7D;
    border: none;
    border-bottom: 1px solid #ECECEC;
    background: #FFF;
    width: 100%;
    overflow: hidden;
    display: block;
    position: relative;
    padding: 15px 11px;
    text-align: left;
    font-size: 16px;
    box-sizing: border-box;
}
.dictionary .orderButton {
    font-weight: 700;
    padding: 0 10px 0 10px;
    line-height: 51px;
    color: #3F51B5;
    margin: -16px 0 -16px 5px;
    display: inline-block;
    cursor: pointer;
}
.dictionary .showFilter { font-weight:500; font-size:14px; padding:9px 0 0 0; width:100%; text-transform:capitalize; color:#7D7D7D; }
.dictionary .langFilter { font-weight:500; font-size:14px; padding:0 0 11px 0; width:100%; text-transform:capitalize; color:#7D7D7D; }
/*.dictionary .select { font-size:14px; padding:8px 0 10px 0; background-color:transparent; border:none; outline:none; color:#3F51B5; display:inline-block; margin-left:11px; cursor:pointer; font-weight:700; cursor:pointer; }*/
.dictionary .letter { font-size:20px; text-transform:uppercase; border-radius:50%; line-height:42px; width:42px; font-weight:bold; text-align:center; float:left; margin-top:5px; }
.dictionary .small { font-size:16px; }
.dictionary .words { padding-left:47px; width:100%; box-sizing:border-box; }
.dictionary .words.date-view { padding-left:72px; }
.dictionary .word { font-size:16px; width:100%; cursor:pointer; }
.dictionary .word.no_translation { opacity:0.5; }
.dictionary .word:first-letter { text-transform:uppercase; }
.dictionary .word .original_word { padding:16px 0 20px 10px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }
.dictionary .word .description { display:none; cursor:default; font-weight:normal; font-size:14px; text-transform:none; margin-left:30px; }
.dictionary .word .description .no_translation { font-size:16px; font-style:italic; padding-bottom:15px; margin-bottom:15px; }
.dictionary .word .description .translation { font-size:16px; font-style:italic; font-weight:500; padding-bottom:15px; }
.dictionary .word .description .transcription { font-weight:normal; /*font-style:normal;*/ font-size:14px; margin-left:5px; color:#555; letter-spacing:1px; }
.dictionary .word .description .translation:first-letter { text-transform:uppercase; }
.dictionary .word .description ul { margin:0; padding:0; list-style-type:decimal; }
.dictionary .word .description ul.unstyled { list-style-type:none; }
.dictionary .word .description ul .translation_li { margin-bottom:15px; }
.dictionary .words_group .word .description ul .translation_li:last-child { margin-bottom:0; }
.dictionary .words_group .word .description ul .translation_li:last-child .translation { padding-bottom:10px; }
.dictionary .word .description .examples { margin:0 0 0 15px; padding:0; list-style-type:lower-alpha; }
.dictionary .word .description .examples .example { font-style:italic; margin-bottom:15px; }
.dictionary .word .description .examples .example:last-child { margin-bottom:0; }
.dictionary .word .description .examples .example .original:after { content:""; font-style:normal; display:block; color:#7B7B7B; }
.dictionary .words_group { margin-bottom:35px; }

.dictionary .input-line { padding:0 15px; border:none; border-bottom:1px solid #ECECEC; background:#FFF; width:100%; overflow:hidden; display:block; position:relative; box-sizing:content-box; margin-left:-15px; }
.dictionary .input-line input { border:none; margin:0; display:inline-block; width:30px; text-align:left; font-size:16px; font-family:"Roboto"; box-sizing:border-box; padding-right:6px; height:51px; width:100%; outline:none; }

.dictionary .addButton { width:56px; line-height:34px; padding:11px 0; font-size:30px; font-family:Arial; color:#FFF; position:fixed; right:16px; bottom:16px; background-color:#F44336; text-align:center; border-radius:50%; box-shadow:0 1px 4px rgba(0,0,0,0.7); cursor:pointer; }
.dictionary .addButton:hover { background-color:#DE3C31; }

.dictionary .select-outer { }
.dictionary .filters { margin: 0 -15px; }

.dictionary-edit-button {
    line-height: 40px;
    width: 40px;
    margin: -11px 0;
    text-align: center;
    cursor: pointer;
    opacity: 0.5;
}




.testing {  }
.testing .select_line { padding:12px 15px; font-size:0; }
.testing .radioselect { width:50%; box-sizing:border-box; display:inline-block; }
.testing .radioselect label { font-size:16px; display:block; vertical-align:middle; line-height:26px; }
.testing .radioselect label input { display:inline-block; vertical-align:middle; margin:0 7px 0 0; }
.testing .select { font-size:14px; padding:8px 0 10px 0; background-color:transparent; border:none; outline:none; color:#3F51B5; display:inline-block; margin-left:11px; cursor:pointer; font-weight:700; cursor:pointer; }
.testing div.category { padding-left:15px; }
.testing div.category input { margin-left:0; }
.testing .game { text-align:center; position: relative; }
.testing .game .not_found { text-align:center; margin:30px 0 0 0; padding:0 15px; font-size:18px; }
.testing .game .original { text-align:center; margin:0; padding:0 80px; font-size:18px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }
.testing .game .original span { display:block; padding:30px 0 0 0; cursor:pointer; line-height:30px; }
.testing .game .original .example { padding:15px 0 5px 0; display:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }
.testing .game .equal { text-align:center; margin:10px 0; padding:0 15px; font-size:18px; }
.testing .game .translation { text-align:center; padding:0 15px; font-size:18px; font-style:italic; }
.testing .game .transcription { text-align:center; padding:0 15px; font-size:18px; font-style:normal; color:#999; font-size:16px; font-family: "Arial" }
.testing .game .showButton { padding:8px 10px 10px 10px; font-size:16px; padding:8px 15px 10px 15px; background-color:#3F51B5; color:#FFFFFF; border-radius:5px; display:inline-block; margin:10px 6px 0 6px; width:40px; text-align:center; cursor:pointer; text-decoration:none; }
.testing .game .exampleButton { padding:8px 10px 10px 10px; font-size:16px; padding:8px 15px 10px 15px; background-color:#3F51B5; color:#FFFFFF; border-radius:5px; display:inline-block; margin:10px 6px 0 6px; text-align:center; cursor:pointer; text-decoration:none; }
.testing .game .exampleButton.disabled { opacity:0.3; }
.testing .game .buttons .sayButton { padding:3px 15px 4px 15px; font-size:16px; background-color:#3F51B5; color:#FFFFFF; border-radius:5px; display:inline-block; margin:0px 6px 0 6px; width:40px; text-align:center; cursor:pointer; text-decoration:none; background-image:url(/img/content/sound_white.svg);  }
.testing .game .nextButton { padding:8px 10px 10px 10px; font-size:16px; padding:8px 15px 10px 15px; background-color:#3F51B5; color:#FFFFFF; border-radius:5px; display:inline-block; margin:10px 6px 0 6px; width:40px; text-align:center; cursor:pointer; text-decoration:none; }
.testing .game .knowButton { padding:8px 10px 10px 10px; font-size:14px; padding:8px 15px 10px 15px; background-color:#3F51B5; color:#FFFFFF; border-radius:5px; display:inline-block; margin:30px 6px 0 6px; text-align:center; cursor:pointer; width:80px; text-decoration:none; }
.testing .game .showImage { padding:8px 10px 10px 10px; font-size:16px; padding:8px 15px 10px 15px; background-color:#3F51B5; color:#FFFFFF; border-radius:5px; display:inline-block; margin:10px 6px 0 6px; text-align:center; cursor:pointer; text-decoration:none; }
.testing .game .image { display:none; margin-top: 15px; }
.testing .game .translation_block { display:none; }
.testing .game .sayButton { margin:0 -40px 0 10px; height:30px; width:30px; cursor:pointer; background-image:url(/img/content/sound.svg); background-repeat:no-repeat; background-position:center center; background-size:18px 18px; display:inline-block; vertical-align:middle; }
.testing .game .sayButton.inline { display:none; }
.testing .game .play { padding:8px 10px 10px 10px; font-size:16px; padding:8px 15px 10px 15px; background-color:#3F51B5; color:#FFFFFF; border-radius:5px; display:inline-block; margin:30px 10px 15px 10px; text-align:center; cursor:pointer; width:110px; text-decoration:none; }
.testing .game .congratulations { margin-top:30px; }
.testing .game .buttons { margin-bottom:15px; margin-top:20px; }
.testing .remain { 
    padding: 15px;
    text-align: center;
    font-size: 13px;
    margin-top: 15px;
}

.testing .game .finishButton { padding:8px 10px 10px 10px; font-size:14px; padding:8px 12px; border:1px solid #999; border-radius:5px; display:inline-block; margin:15px 10px 15px 10px; text-align:center; cursor:pointer; width:90px; text-decoration:none; color:#999; }


.testing .settings { /*padding-top:15px;*/ }
.select-outer select { outline:none; border:none; margin:0; display:block; width:100%; height:50px; padding:15px 11px; text-align:left; font-size:16px; font-family:"Roboto"; box-sizing:border-box; cursor:pointer; position:relative; background:transparent; z-index:100; color:#1B1B1B; }
.select-outer { border:none; border-bottom:1px solid #ECECEC; background:#FFF; width:100%; overflow:hidden; display:block; position:relative; }
.select-outer .select-button { background:#FFF; height:10px; width:18px; position:absolute; right:0; top:20px; z-index:101; }
.select-outer .select-button:after { content:"0"; font-size:0; border:6px solid transparent; border-top:6px solid #676767; width:0; height:0; position:absolute; top:0; right:23px; margin-top:3px; }

.testing .input-line { padding:15px; border:none; border-bottom:1px solid #ECECEC; background:#FFF; width:100%; overflow:hidden; display:block; position:relative; box-sizing:border-box; }
.testing input { border:none; margin:0; display:inline-block; width:30px; text-align:left; font-size:16px; font-family:"Roboto"; box-sizing:border-box; padding-right:6px; height:20px; width:100%; outline:none; }
.testing .words_count label { margin-left:-15px; color:#999; }



.upload .input-line { padding:15px; border:none; border-bottom:1px solid #ECECEC; background:#FFF; width:100%; overflow:hidden; display:block; position:relative; box-sizing:border-box; }
.upload input { border:none; margin:0; display:inline-block; width:30px; text-align:left; font-size:16px; font-family:"Roboto"; box-sizing:border-box; padding-right:6px; height:20px; width:100%; outline:none; }
.upload input[type=file] { font-size:13px; }
.upload .input-line a { }
.upload .input-line.submit-line { padding:0; }
.upload input[type=submit] { font-family:"Roboto", Arial, sans-serif; padding:16px 0 15px 0; border:none; background:#3F51B5; font-weight:500; font-size:14px; text-align:center; width:100%; display:block; position:relative; box-sizing:border-box; cursor:pointer; outline:none; color:#FFF; text-transform:uppercase; height:50px; }




.loader { width:22px; height:22px; position:fixed; top:48px; left:100%; margin:15px 0 0 -37px; background-size:contain; background-image:url(/img/content/loader.gif); display:none; z-index:9999999; }

.footer { display:none; }

.up_button { cursor:pointer; display:inline-block; position:fixed; right:20px; border-radius:50%; bottom:20px; text-indent:-9999px; font-size:0; display:none; }


.md-modal { position:fixed; top:0; left:0; width:100%; height:100%; z-index:2000; visibility:hidden; background-color:#E8EAF6; }
.md-container { overflow-y:auto; height:100%; width:100%; position:absolute; top:48px; left:0; padding-bottom:48px; box-sizing:border-box; }
.md-show { visibility:visible; display:block !important; }
.md-overlay { position:fixed; width:100%; height:100%; visibility:hidden; top:0; left:0; z-index:1000; opacity:0; background:rgba(0,0,0,0.8); transition:all 0.3s; display:none; }
.md-show ~ .md-overlay { opacity:1; visibility:visible; }
.md-show + .md-overlay + .dictionary { display:none !important; }

.md-modal .md-close-style { border: none; padding: 8px 15px 8px 15px; background: transparent; color: #3F51B5; font-size: 14px; font-weight:bold; letter-spacing: 1px; cursor: pointer; display: inline-block; margin: 3px 2px 12px 2px; border-radius: 3px; outline:none; }

#modal_default { display:none; }

.md-modal .md-header { height:48px; background-color:#3F51B5; color:#FFFFFF; font-size:0; font-weight:500; text-transform:uppercase; box-shadow: 0 2px 4px rgba(0,0,0,0.20); position:relative; }
.md-modal .md-header .title { width:100%; padding:17px 48px 14px 72px; display:inline-block; font-size:14px; text-align:left; color:#FFFFFF; text-decoration:none; }
.md-modal .md-header .back-btn { cursor:pointer; width:16px; height:16px; padding:16px 19px; display:inline-block; position:absolute; top:0; left:0; z-index:10; }
.md-modal .md-header .back-btn span { width:16px; height:2px; display:inline-block; background-color:#FFFFFF; position:absolute; top:12px; left:20px; }
.md-modal .md-header .back-btn span:nth-child(1) { top:20px; left:18px; transform:rotate(-40deg); -moz-transform:rotate(-40deg); -ms-transform:rotate(-40deg); -o-transform:rotate(-40deg); -webkit-transform:rotate(-40deg); width:11px; }
.md-modal .md-header .back-btn span:nth-child(2) { top:23px; }
.md-modal .md-header .back-btn span:nth-child(3) { top:26px; left:18px; transform:rotate(40deg); -moz-transform:rotate(40deg); -ms-transform:rotate(40deg); -o-transform:rotate(40deg); -webkit-transform:rotate(40deg); width:11px; }

.md-modal .md-header .md-add { cursor:pointer; width:20px; height:20px; padding:14px 14px; display:block; position:absolute; top:0; right:0; z-index:10; background-color:transparent; border:none; margin:0; box-sizing:content-box; outline:none; }
.md-modal .md-header .md-add span { width:18px; height:2px; display:inline-block; background-color:#FFFFFF; position:absolute; }
.md-modal .md-header .md-add span:nth-child(1) { top:24px; left:17px; transform:rotate(-46deg); -moz-transform:rotate(-46deg); -ms-transform:rotate(-46deg); -o-transform:rotate(-46deg); -webkit-transform:rotate(-46deg); width:18px; }
.md-modal .md-header .md-add span:nth-child(2) { top:28px; left:14px; transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); -webkit-transform:rotate(45deg); width:8px; }
.md-modal .md-header .md-add-submit { cursor:pointer; width:20px; height:20px; padding:14px 14px; display:block; position:absolute; top:0; right:0; z-index:10; background-color:transparent; border:none; margin:0; box-sizing:content-box; outline:none; }

.md-modal .md-header .md-delete { cursor:pointer; width:20px; height:20px; padding:14px 14px; display:block; position:absolute; top:0; right:48px; z-index:10; background-color:transparent; border:none; margin:0; box-sizing:content-box; outline:none; background-image:url(/img/content/delete.svg); background-position:center center; background-repeat:no-repeat; background-size:20px; }


.md-header { height:48px; background-color:#3F51B5; color:#FFFFFF; font-size:0; font-weight:500; text-transform:uppercase; box-shadow: 0 2px 4px rgba(0,0,0,0.20); position:fixed; width:100%; z-index:110; top:0; left:0; overflow:hidden; white-space:nowrap; }
.md-header .tabs { overflow-x:auto; }
.md-header .tab { width:50%; padding:16px 0 15px 0; display:inline-block; font-size:14px; text-align:center; opacity:0.7; color:#FFFFFF; text-decoration:none; }
.md-header .tab.selected { border-bottom:2px solid #E8EAF6; padding:16px 0 13px 0; opacity:1; }



.md-modal label { margin:0 auto 10px auto; display:block; width:80%; text-align:center; }
.md-modal input[type=text],.md-modal input[type=email],.md-modal input[type=password] { outline:none; border:none; border-bottom:1px solid #ECECEC; margin:0; display:block; width:100%; padding:20px; background:#FFF; text-align:left; font-size:16px; font-family:"Roboto"; box-sizing:border-box; height:60px; padding-right:56px; }
.md-modal input[type=text]:first-letter,.md-modal input[type=email]:first-letter,.md-modal input[type=password]:first-letter { text-transform:uppercase; }
.md-modal input[type=text].error,.md-modal input[type=email].error,.md-modal input[type=password].error { }
.md-modal textarea { outline:none; border:none; border-bottom:1px solid #ECECEC; margin:0; display:block; min-width:100%; width:100%; max-width:100%; padding:20px; text-align:left; font-size:16px; font-family:"Roboto"; box-sizing:border-box; min-height:120px; padding-right:56px; }
.md-modal textarea:first-letter { text-transform:uppercase; }
.md-modal .md-content.words textarea { min-height:80px !important; }

.md-modal select { outline:none; border:none; margin:0; display:block; width:100%; height:20px; padding:20px 16px; text-align:left; font-size:16px; font-family:"Roboto"; box-sizing:content-box; cursor:pointer; position:relative; background:transparent; z-index:100; color:#1B1B1B; }
.md-modal .select-outer { border:none; border-bottom:1px solid #ECECEC; background:#FFF; width:100%; overflow:hidden; display:block; position:relative; }
.md-modal .select-button { background:#FFF; height:60px; width:18px; position:absolute; right:0; top:0; z-index:101; }
.md-modal .select-button:after { content:"0"; font-size:0; border:6px solid transparent; border-top:6px solid #676767; width:0; height:0; position:absolute; top:25px; right:23px; margin-top:3px; }

.md-modal .input-line { position:relative; }
.md-modal .input-line .mic { position:absolute; right:0; top:0; height:60px; width:56px; cursor:pointer; background-image:url(/img/content/mic.svg); background-repeat:no-repeat; background-position:center center; background-size:26px 26px; }

.md-modal .input-line.transcription { display:none; }







.graph {
    display: inline-block;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 30px;
    left: 15px;
    color: #8BC34A;
}
.graph span.t {
    color: #8BC34A;
}
.graph .showed {
    width: 100%;
    height: 100%;
    background: #CCC;
}
.graph .translated {
    width: 100%;
    background: #8BC34A;
    position: absolute;
    bottom: 0;
    left: 0;
}
.graph.warn, .graph.warn span.t {
    color: #FFB300;
}
.graph.warn .translated {
    background: #FFB300;
}
.graph.danger, .graph.danger span.t {
    color: #D84315;
}
.graph.danger .translated {
    background: #D84315;
}
.graph .ratio {
    width: 100%;
    text-align: center;
    margin-top: 3px;
    font-size: 11px;
    font-weight: bold;
}
.graph span {
    position: absolute;
    top: 0;
    left: 100%;
    height: 50%;
    line-height: 15px;
    font-size: 11px;
    font-weight: bold;
    color: #777;
    margin-left: 5px;
    text-align: center;
    width: 20px;
}
.graph span.t {
    top: 50%;
    border-top: 1px solid #CCC;
}



#modal .images {
    background: #FFF;
    position: relative;
    display: none;
}
#modal .images .image {
    padding: 15px;
    min-height: 50px;
    box-sizing: border-box;
}
#modal .images .image img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 200px;
    max-height: 200px;
    margin: 0 auto;
}
#modal .images .button {
    height: 100%;
    width: 30px;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
}
#modal .images .button:hover {
    background: #F3F3F3;
}
#modal .images .button:after {
    content: "\f105";
    font-family: FontAwesome;
    color: #888;
    font-size: 22px;
    display: block;
    line-height: 1;
    position: absolute;
    top: 50%;
    margin-top: -11px;
    width: 100%;
    text-align: center;
}
#modal .images .button.next {
    left: auto;
    right: 0;
}
#modal .images .button.next:after {
    content: "\f105";
    left: auto;
    right: 0;
}
#modal .images .button.prev:after {
    content: "\f104";
}

#modal .without_image{
    width: 30px;
    height: 30px;
    position: absolute;
    top: 100%;
    right: 0;
    text-align: center;
    cursor: pointer;
}
#modal .without_image:after {
    content: "\f00d";
    font-family: FontAwesome;
    font-size: 12px;
    color: #888;
    line-height: 30px;
}


.image-edit {
    display: block;
    width: 100%;
    background: #FFF;
    padding: 15px;
    box-sizing: border-box;
}

.image-edit img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 200px;
    max-height: 200px;
    margin: 0 auto;
}