body{font-family:Arial, Helvetica, sans-serif}
.ustsag{-webkit-border-top-right-radius: 10px;-moz-border-top-right-radius: 10px;border-top-right-radius: 10px;}
.ustsol{-webkit-border-top-left-radius: 10px;-moz-border-top-left-radius: 10px;border-top-left-radius: 10px;}
.altsag{-webkit-border-bottom-right-radius: 10px;-moz-border-bottom-right-radius: 10px;border-bottom-right-radius: 10px;}
.altsol{-webkit-border-bottom-left-radius: 10px;-moz-border-bottom-left-radius: 10px;border-bottom-left-radius: 10px;}


@font-face {font-family: 'Amiri';src: url(../font/Amiri.woff2) format('woff2');}
@font-face {font-family: 'Arabic';src: url(../font/Arabic.woff2) format('woff2');}
@font-face {font-family: 'Scheherazade';src: url(../font/Scheherazade.woff2) format('woff2');}
@font-face {font-family: 'Lateef';src: url(../font/Lateef.woff2) format('woff2');}
@font-face {font-family: 'Markazi';src: url(../font/Markazi.woff2) format('woff2');}
@font-face {font-family: 'Mirza';src: url(../font/Mirza.woff2) format('woff2');}
@font-face {font-family: 'Katibeh';src: url(../font/Katibeh.woff2) format('woff2');}
@font-face {font-family: 'Harmattan';src: url(../font/Harmattan.woff2) format('woff2');}
@font-face {font-family: 'Kufi';src: url(../font/Kufi.woff2) format('woff2');}
@font-face {font-family: 'Dubai';src: url(../font/Dubai.woff2) format('woff2');}
@font-face {font-family: 'Uighursoft';src: url(../font/Uighursoft.woff2) format('woff2');}
@font-face {font-family: 'Wessam';src: url(../font/Wessam.woff2) format('woff2');}
@font-face {font-family: 'NizarAldhabi';src: url(../font/NizarAldhabi.woff2) format('woff2');}


.highlight{color: white;text-shadow:grey 1px 1px 1px;background-color:black;font-size: 14pt;border-radius: 5px;}

.abolum{position: relative;border:inset 1px black;padding: 20px;margin-bottom:10px;text-align:center;box-shadow: 0 0 10px gray;}
.atext{padding: 0 0 20px 0}
.abaslik{text-align:left;margin-top: -10px;}
.abadres{font-size:15pt;}
.abbuton{opacity: 0.5;font-size: 9pt;font-weight: bold;cursor: pointer; display: inline-block}
.abbuton:hover{opacity: 1}

.ayet{font-size: 50pt;padding-bottom: 20px}
.akceviri{padding-bottom: 5px;padding-top: 5px; border: 2px solid white;border-radius: 5px}
.akceviri:hover{border: 2px solid black}
.adceviriler{display: none}

.agceviri{font-size: 16pt;padding-bottom: 5px}

.adceviri:hover{background-color: burlywood}
.agmeal{}
.admealler{display: none;}
.admeal:hover{background-color: burlywood}

.aabuton{font-size: 25pt;width: 100px;margin-bottom: 10px}


.ayetceviri{padding:15px;overflow-y:hidden;overflow-x:hidden;resize:none;text-align:center;font-size:18pt; font-family:arial; font-weight: bold;margin: auto;border-radius: 15px 15px 0px 0px}
.kmenu{z-index: 999999;position: fixed;opacity:0.99;border:ridge;display:none;width: 400px;background-color: cornflowerblue;border-radius: 10px;left: 43%;top: 200px;text-align:center;font-size:20pt}
.kelimeler{float: left; position: absolute; background-color: white; left: 65px; text-align: left; width: 260px; overflow: auto;max-height: 200px;border-radius:5px}
.bkelime{border:inset black 1px; padding: 5px; margin: 5px; border-radius: 10px;display:inline-block;font-size: 10pt}
.kcekimler{border:inset black 1px; padding: 10px 5px 5px 15px; margin: 5px; border-radius: 10px;display:inline-block;font-size: 25pt;font-weight: bold; direction: ltr}
.buton1{cursor:pointer; opacity: 0.5;font-weight: bold;font-size: 9pt; margin: auto;display: inline-block}
.akelime {position: relative;display: inline-block; margin-top:7px}
.akelime2 {text-shadow:1px 1px 2px darkgreen;}
.akelime .akbaslik {visibility: hidden; box-shadow: 0 0 10px black;z-index: 99999 ;width: 200px;font-size: 12pt;background-color: lightskyblue;color: black;text-align: center;border-radius: 6px;padding: 9px;position: absolute;bottom: 90%;left: 50%;margin-left: -90px;font-family: Arial}
.akelime .akbaslik::after {content: ""; position: absolute;top: 100%;left: 50%;margin-left: -5px;border-width: 5px;border-style: solid;border-color: lightskyblue transparent transparent transparent;}
.akelime:hover .akbaslik {visibility: visible;}


.ayetler{margin: auto; text-align: center; width: 90%;}
.ayet2{font-size: 35pt;margin: auto;margin-bottom:60px;text-align: center; border-radius: 20px;}
.ayetceviri2{}
.metin{border: 1px black solid; background-color:lightcyan; border-radius: 15px 15px 0px 0px;padding: 20px}
.ceviributon{border: 1px black outset; border-radius: 0px 0px 15px 15px; background-color: beige; font-size: 12pt; font-weight: bold;padding: 10px;cursor: pointer;vertical-align: top}
.bolum{margin: auto; font-size:12pt;top: 20px;margin-bottom: 10px;margin-top: 5px ;border: 1px gray solid; border-radius: 10px;padding: 13px}
.uyari{border-radius: 50px; border: greenyellow 2px solid;font-size: 12pt;padding: 5px;color: green}
.ayetyukle{font-size: 15px;text-align: center}
.ceviri{width: 98%; margin: auto; opacity: 0.5; font-weight:bold;font-size:10pt;top: 20px;margin-bottom: 10px;margin-top: 5px ;border: 1px gray solid; border-radius: 10px;padding: 10px;background-color: beige}
.meal{width: 98%; margin: auto; opacity: 0.5; font-weight:bold;font-size:10pt;top: 20px;margin-bottom: 10px;margin-top: 5px ;border: 1px gray solid; border-radius: 10px;padding: 10px}
[contenteditable][placeholder]:empty:before {content: attr(placeholder);color: #bababa;}