@font-face {
    font-family: 'CoconNextRegular';
    src: url('../../fonts/Cocon/CoconNextRegular.eot');
    src: url('../../fonts/Cocon/CoconNextRegular.eot') format('embedded-opentype'), url('../../fonts/Cocon/CoconNextRegular.woff') format('woff'), url('../../fonts/Cocon/CoconNextRegular.ttf') format('truetype'), url('../../fonts/Cocon/CoconNextRegular.svg#CoconNextRegular') format('svg');
} 
@font-face {
    font-family: 'Lato-Regular';
    src: url('../../fonts/Lato-Regular.eot');
    src: url('../../fonts/Lato-Regular.eot') format('embedded-opentype'), url('../../fonts/Lato-Regular.woff') format('woff'), url('../../fonts/Lato-Regular.ttf') format('truetype'), url('../../fonts/Lato-Regular.svg#CoconNextRegular') format('svg');
}
@font-face {
    font-family: 'Lato-Semibold';
    src: url('../../fonts/Lato-Semibold.eot');
    src: url('../../fonts/Lato-Semibold.eot') format('embedded-opentype'), url('../../fonts/Lato-Semibold.woff') format('woff'), url('../../fonts/Lato-Semibold.ttf') format('truetype'), url('../../fonts/Lato-Semibold.svg#CoconNextRegular') format('svg');
}
@font-face {
    font-family: 'Lato-Black';
    src: url('../../fonts/Lato-Heavy.eot');
    src: url('../../fonts/Lato-Black.eot') format('embedded-opentype'), url('../../fonts/Lato-Black.woff') format('woff'), url('../../fonts/Lato-Black.ttf') format('truetype'), url('../../fonts/Lato-Black.svg') format('svg');
}
body{font-size:14px;color:#666666 !important;letter-spacing:0.5px;min-height:100vh;background:RGBA(241, 215, 104, 0.60) url("../../images/bg.png") repeat;font-family: 'Lato-Regular';}
header{background:#9AEAD8;height:70px;display:flex;align-items:center;justify-content:center;margin-bottom:5px}
.form-control{border-radius:0;min-width:70px;font-family: 'CoconNextRegular';height:30px !important;padding-top:0 !important;padding-bottom:0 !important;line-height:30px;}
.content .form-row > * {padding:0 !important;}
.form-row > .con-col {display:flex;flex-direction:column;max-height:692px}
span[style="font-weight: bold;"] {margin-left:5px}
.highlightColor {background-color: #99E9BA !important;}
section.content .container-fluid{padding:0 5px}
.player-area{height:43px;flex:0 0 43px;width:100%;background:url("../../images/bar.png") repeat-x;padding:2px 0 0;position:relative;background-position:bottom;display:flex;}
.player-area>a{height:25px;width:25px;line-height:25px;text-align:center;background:#F6E7A4;border-radius: 50%;border: 1px solid #D2B677;margin:5px 10px;}
.player-area>a i{color:#936F40;font-size:18px;line-height:25px}
.player-area .d-flex{color: #FFF;direction: rtl;justify-content: space-between;align-items: center;}.player-area .d-flex .col{display:flex;color:#F6EFD5;justify-content: space-between;line-height: 41px;padding:0 25px;font-size:13px;font-family: 'CoconNextRegular';}
.player-area select{width:100px;height:20px !important;border-radius:10px;background-position: 7px;padding: 0.375rem 0.75rem 0.375rem 1.25rem;background:none;border:none;color:#FFF;line-height:20px;}
.small-visible{display:none}
.labels {background: #C7AC6C;color: #FFF;padding: 5px 10px;margin: 0;font-size: 13px;flex-grow: 1;flex-basis: 0;}
.labels>span{display:inline-block}
.large-toggle-btn {margin-bottom: -32px;margin-top: 3px;}
body .container .player .large-toggle-btn .play-btn {
    cursor: pointer;
    display: inline-block;
    position: relative;
    top: -14%;
    background: #eac75a;
    background: -moz-linear-gradient(top, #eac75a 0%, #f2d786 12%, #ecead6 100%);
    background: -webkit-linear-gradient(top, #eac75a 0%,#f2d786 12%,#ecead6 100%);
    background: linear-gradient(to bottom, #eac75a 0%,#f2d786 12%,#ecead6 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eac75a', endColorstr='#ecead6',GradientType=0 );
    height: 34px;
    width: 34px;
    border-radius: 50%;
    text-align: center;
    border: 2px solid #784E1A;
    color: #80541D;
}
body .container .player .large-toggle-btn .play-btn:before {
    content: "\f04b";
    font: 1em/30px "FontAwesome";
    display: block;
    margin: 0 9px;
}
body .container .player .large-toggle-btn .large-pause-btn {
    cursor: pointer;
    display: inline-block;
    position: relative;
    top: -13%;
    background: #eac75a;
    background: -moz-linear-gradient(top, #eac75a 0%, #f2d786 12%, #ecead6 100%);
    background: -webkit-linear-gradient(top, #eac75a 0%,#f2d786 12%,#ecead6 100%);
    background: linear-gradient(to bottom, #eac75a 0%,#f2d786 12%,#ecead6 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eac75a', endColorstr='#ecead6',GradientType=0 );
    height: 34px;
    width: 34px;
    border-radius: 50%;
    text-align: center;
    border: 2px solid #784E1A;
    color: #80541D;
}
body .container .player .large-toggle-btn .large-pause-btn:before {
    content: "\f04c";
    font: 0.9em/32px "FontAwesome";
    display: block;
    margin: 0 auto;
}  
.show {
    display: inline-block !important;
}
body .container .player .controls-box .previous-track-btn {
    cursor: pointer;
    display: inline-block;
    background: #eac75a;
    background: -moz-linear-gradient(top, #eac75a 0%, #f2d786 12%, #ecead6 100%);
    background: -webkit-linear-gradient(top, #eac75a 0%,#f2d786 12%,#ecead6 100%);
    background: linear-gradient(to bottom, #eac75a 0%,#f2d786 12%,#ecead6 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eac75a', endColorstr='#ecead6',GradientType=0 );
    height: 29px;
    width: 29px;
    border-radius: 50%;
    text-align: center;
    border: 2px solid #784E1A;
    color: #80541D;
}
body .container .player .controls-box .previous-track-btn:before {
    content: "\f049";
    font: 0.7em/25px "FontAwesome";
    display: block;
    margin: 0 7px;
}
body .container .player .controls-box .next-track-btn {
    cursor: pointer;
    display: inline-block;
    background: #eac75a;
    background: -moz-linear-gradient(top, #eac75a 0%, #f2d786 12%, #ecead6 100%);
    background: -webkit-linear-gradient(top, #eac75a 0%,#f2d786 12%,#ecead6 100%);
    background: linear-gradient(to bottom, #eac75a 0%,#f2d786 12%,#ecead6 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eac75a', endColorstr='#ecead6',GradientType=0 );
    height: 29px;
    width: 29px;
    border-radius: 50%;
    text-align: center;
    border: 2px solid #784E1A;
    color: #80541D;
}
.controls-box.text-center {
    display: flex;
    justify-content: space-between;
    width: 90px;
}
body .container .player .controls-box .next-track-btn:before {
    content: "\f050";
    font: 0.7em/25px "FontAwesome";
    display: block;
    margin: 0 7px;
}
.disabled {
    background: #d2ae63 !important;
    background: -moz-linear-gradient(top, #d2ae63 0%, #e0c278 12%, #b29773 100%) !important;
    background: -webkit-linear-gradient(top, #d2ae63 0%,#e0c278 12%,#b29773 100%) !important;
    background: linear-gradient(to bottom, #d2ae63 0%,#e0c278 12%,#b29773 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2ae63', endColorstr='#b29773',GradientType=0 ) !important;
    border-color: #C09F59 !important;
    color: #885F2D !important;
    cursor: default !important;
    pointer-events: none !important;
}
.row.pgDivSelectOdd, .row.pgDivSelectEven {position: relative;margin:0;padding: 0 5px;}
.row.pgDivSelectOdd>span, .row.pgDivSelectEven>span {min-width: 60px;border-radius:10px;height:20px !important;line-height:20px !important;padding:0;text-align:center;background:none;color:#FFF}
.row.pgDivSelectOdd ul, .row.pgDivSelectEven ul {
    position: absolute;
    bottom: 100%;
    background: #FFF;
    list-style-type: none;
    left: 0;
    z-index: 100;
    border: 1px solid #ccc;
    max-height: 300px;
    overflow-y: auto;
    max-width: 80px;
    width: 160px;padding: 0;
}
.row.pgDivSelectOdd ul + ul, .row.pgDivSelectEven ul + ul {
    left: 79px;
    width: 39px;
    padding: 0;
    background: #eee;
    text-align: center;
}
.row.pgDivSelectOdd ul + ul li + li, .row.pgDivSelectEven ul + ul li + li {
    border-top: 1px solid #ccc;
    padding: 0 5px;
}
.row.pgDivSelectOdd ul + ul li, .row.pgDivSelectEven ul + ul li {
    padding: 0;
}
.row.pgDivSelectOdd ul li,.row.pgDivSelectEven ul li {
    cursor: default;
    padding: 0 15px;line-height:22px;color:#000;font-weight:300;
}
.row.pgDivSelectOdd ul li:hover, .row.pgDivSelectEven ul li:hover {
    background: #C5A43C;
    color: #FFF;
}
.content.sidebar {background: #80541D;border-right: 12px solid #80541D;position:relative;z-index:10;min-height:100vh;width:0px;flex:0 0 245px;overflow:hidden}
.content.sidebar.slide{left:0px;flex:0 0 0px;}
.img-con.d-flex {background:#FFF;width:100%;max-height: calc(100% - 86px);height:100%;flex-grow:1}
.img-con.d-flex .imgarea {width:50%;flex:0 0 50%;background: #e9d5ba;background: -moz-linear-gradient(left,  #e9d5ba 0%, #e3cbaf 50%, #e3cdb1 93%, #8e7351 100%);background: -webkit-linear-gradient(left,  #e9d5ba 0%,#e3cbaf 50%,#e3cdb1 93%,#8e7351 100%);background: linear-gradient(to right,  #e9d5ba 0%,#e3cbaf 50%,#e3cdb1 90%,#8e7351 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e9d5ba', endColorstr='#8e7351',GradientType=1 );padding: 20px;border-right: 1px solid #ceb986;}
.img-con.d-flex .imgarea + .imgarea{width:50%;flex:0 0 50%;padding: 20px;background: #8e7351;background: -moz-linear-gradient(left,  #8e7351 0%, #e3cdb1 7%, #e3cbaf 50%, #e9d5ba 100%);background: -webkit-linear-gradient(left,  #8e7351 0%,#e3cdb1 7%,#e3cbaf 50%,#e9d5ba 100%);background: linear-gradient(to right,  #8e7351 0%,#e3cdb1 10%,#e3cbaf 50%,#e9d5ba 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8e7351', endColorstr='#e9d5ba',GradientType=1 );border-left: 1px solid #80541D;}
    .img-con.d-flex .imgarea div {
        border-radius: 25px;
        overflow: hidden;
        text-align: center;
        max-height: 100%;
        max-width: 100%;
    } 
.img-con.d-flex .imgarea div img, .img-con.d-flex .imgarea div canvas {max-width:100%;height:100% !important;object-fit:contain;}
#pageImageEven, #pageImageOdd {max-width: 100%;max-height: 100%;display: block;}
/*#middleCol {
    padding: 20px;
    width: 100%;
    resize: both;
    overflow: auto;
    background: #cfb983;
    max-height:calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    min-width: 670px;
    min-height: 570px;
}*/
#toggleLeftPanel {
    font-size: 22px;
    background: #80541D;
    width: 20px;
    height: 255px;
    border: none;
    color: #FFF;
    position: absolute;
    left: 245px;
    top: calc(50% - 128px);
    border-radius: 0 20px 20px 0;
    padding: 0;
    z-index:99;
    line-height: 255px;
}
.content.sidebar.slide + #toggleLeftPanel {left: 10px;}
#leftPanel.slide + .fa-angle-left:before {content: "\f105";}
#translationDiv, #tafseerDiv {
    position: absolute;
    z-index: 9;
    background-color: #fffbeb;
    min-height:200px;
    border: 1px solid #d3d3d3;
    width:calc(100% - 15px);
    left:0;
    resize:both;
    overflow:auto;
    border: 1px solid #b69257;
    border-top: 0;
}
#translationDiv i, #tafseerDiv i{color:#f6e9ae;}
#tafseerDiv {top:210px;}
#translationDivHeader, #tafseerDivHeader {
    padding: 10px;
    cursor: move;
    z-index: 10;
    background: url("../../images/bar.png") repeat-x;
    color: #fff;
}
section.content.col-auto {
padding:15px 15px 15px 50px !important;width:70%;}
#ManageTafseerPopUp, #ManageTranslationPopUp {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(45,33,19,0.90);
    z-index: 99;
    height: 100%;
    display:flex;
    align-items:center;
    justify-content:center;
}
.modal-body {
    max-height: calc(100vh - 100px);
    overflow: auto;
    text-align: right;
}
#ManageTafseerPopUp .modal-content, #ManageTranslationPopUp .modal-content {
    width: 360px;
    background: #fffbeb;
    border-radius: 0;
    border-color: #b69257;
}
#ManageTafseerPopUp .modal-header, #ManageTranslationPopUp .modal-header {
    background: url("../../images/bar.png") repeat-x;
    padding: 0;
    height: 43px;
}
.ui-dialog-title {
    float: left;
    margin: 0px 15px;
    white-space: nowrap;
    width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #FFF;
    font-size: 16px;
    line-height: 43px;
}
.ui-dialog-titlebar-close {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
#tafseerDivHeader a, #translationDivHeader a {color:#FFF;}
#translationDivContent, #tafseerDivContent {
padding:10px;max-height:300px;height:100%;overflow:auto;text-align:right;font-family:'CoconNextRegular';}
.modal-header button{
    font-size: 18px;
    color: #FFF;
    background: none;
    border: none;
    line-height: 43px;
}
#tafseerLangAuthors input{float:right;margin:5px 0px 0 10px;}
#tafseerLangAuthors span:first-child, #tafseerLangAuthors hr + span{font-family:Lato-Semibold;color:#4a351e}
hr{border-color:rgba(141,102,58,0.23);}
#btnTafseerPopUp, #btntranslationPopUp{border:none;background:#926a39;width:100px;height:30px;display:inline-block;color:#FFF;float:left}
#translationDivContent>div>div:first-child, #tafseerDivContent>div>div:first-child{background:#fbeeb1;display:flex;padding:10px;margin-bottom:10px;}
#translationDivContent>div>div:first-child span, #tafseerDivContent>div>div:first-child span{display:block;font-family: 'Lato-Regular';color: #4a351e;}
#translationDivContent>div>div:first-child span + span, #tafseerDivContent>div>div:first-child span + span{font-family:'Lato-Black';font-size:14px;color:#4a351e;}
#translationDivContent>div>div:first-child>div:first-child, #tafseerDivContent>div>div:first-child>div:first-child{width:100px;flex:0 0 100px;text-align: left;border-right: 1px solid #d2c794;margin-right: 15px;}
#translationDivContent>div>div:first-child>div:last-child, #tafseerDivContent>div>div:first-child>div:last-child{text-align: left;flex-grow:1}
p.translation, p.tafseer{padding:10px;border:5px solid #f5e6a3}
.ui-dialog-titlebar-close::before{content: "\f057";}
#ManageTranslationPopUp .col{text-align:left;max-height: calc(100vh - 180px);overflow: auto;margin-bottom: 15px;margin-right:10px}
::-webkit-scrollbar {width: 10px;}
::-webkit-scrollbar-track {background: #fff0cb;}
::-webkit-scrollbar-thumb {background: #8a6337;}
::-webkit-scrollbar-thumb:hover {background: #8a6337;}
.media-player .player{margin-top: -7px !important;}
.langTranslator::after, .langTafseer::after{display:block;content:'';width: 100%;}
#translationLangAuthors>div, #tafseerLangAuthors>div{border:1px solid #f5cfa1;margin-bottom:15px;}
.langTransHead, span.langTranslator, .langTafsHead, span.langTafseer{background: #8a6337;display:inline-block;margin: 0px 0px 10px 0px;padding:5px 10px;color: #fffbeb !important;flex-grow: 1;width: 85px;flex: 0 0 85px;font-family:'Lato-Regular' !important;font-size:14px}
#translationLangAuthors>div>div, #tafseerLangAuthors>div>div{display: flex;flex-wrap: wrap; padding-bottom: 10px;position: relative;text-align:left}
span.translatorPopUp,span.tafseerPopUp {width: calc(100% - 40px); display: inline-block; vertical-align: top;}
span.langTranslator, span.langTafseer {
    width: calc(100% - 85px);
    flex: 0 0 calc(100% - 85px);
    padding-left: 0;
}
input.chkTranslator.mr-2,input.chkAuth.mr-2 {
    margin-left: 10px;
    margin-top: 5px;
    display: inline-block;
    vertical-align: top;
}
.contTafseerChildPopUp>div{width:100%;flex:0 0 100%;text-align:right}
#translationLangAuthors>div>div>div {display: block;width: 100%;}
span.tafseerPopUp.cocon, span.translatorPopUp.cocon {font-family: 'CoconNextRegular';}
.img-con.d-flex .imgarea{
   display: flex;
    align-items: center;
    justify-content: center;
}
.img-con.d-flex .imgarea div img {
    background: #FFF;
    border-radius: 25px;
}
section.content.col-auto{max-height:100vh}