.surah-container::before, .surah-container::after{content:"";display:block;width:100%;height:21px;background:url("../../images/img_BorderHor.png") repeat-x;background-position:center}
.inner-container{position:relative;margin:-21px 0;padding:21px 40px;direction:rtl;}.inner-container .col-auto{margin:-21px 0;width:21px;padding:0;}
.inner-container::before, .inner-container::after, .inner-container .col-auto::after{content:"";display:block;width:21px;background:url("../../images/img_BorderVer.png") repeat-y;background-position:center;position:absolute;left:0;top:0;bottom:0;}
.inner-container::after{right:0;left:auto}
.surah-container.container-fluid{padding:0;direction:rtl;font-family:'CoconNextRegular';font-size:14px;}
#adminDashboardSec .adminDashboardSec .adminDashboardSecTable .surah-container.container-fluid .inner-container .row{margin:0 -15px !important;}
.inner-container .col table{width:100%;border-color:#eee !important;border:1px solid #eee;margin:0 -1px}
.para-content .inner-container .col .row > .col:last-child{display:none;}
#adminDashboardSec .adminDashboardSec .adminDashboardSecTable .surah-container.container-fluid .inner-container .col table td{padding:2px 10px !important;text-align:center;border-color:#eee}
#adminDashboardSec .adminDashboardSec .adminDashboardSecTable .surah-container.container-fluid .inner-container .col table td:first-child{width:50%;text-align:right;font-size:14px}
.inner-container .col table td:nth-child(2) {color:#a03f40}
.inner-container .col table td:nth-child(3) {color:#206cb8}
.inner-container .col table td:nth-child(4) {color:#75a87a} 
.inner-container .col table td:nth-child(5) {color:#ff775f}
    .inner-container .col table th {
        background: #fffcda;
        background: -moz-linear-gradient(top, #fffcda 0%, #f8c98d 100%);
        background: -webkit-linear-gradient(top, #fffcda 0%,#f8c98d 100%);
        background: linear-gradient(to bottom, #fffcda 0%,#f8c98d 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffcda', endColorstr='#f8c98d',GradientType=0 );
        color: #9b6437;text-align:center;line-height:14px;padding:10px 0;border-color:#9b6437;
    }
    .inner-container .col table tr:hover td:first-child{background:#f8c98d !important}
    .para-content .inner-container .col table td:first-child{width:50px !important;text-align:center !important;}
    .para-content .inner-container .col table td:nth-child(2){text-align:left !important;}
    .para-content .inner-container .col table td:nth-child(3){width:110px !important;text-align:right !important;}
    .para-content .inner-container .col table tr:hover td:first-child{background:none !important;}
    .para-content .inner-container .col table tr:hover td:nth-child(2){background:#f8c98d !important}
    .para-content .inner-container .col table tr:hover td:nth-child(3){background:#f8c98d !important}
    .tab button{float:right !important;}    
    #StartCourse .relative{display:flex;align-items:center;padding:15px 0;text-align:center;}
    #StartCourse .relative .rel{position:relative;margin-left:5px;width:50%;max-width:250px}
    #StartCourse .rel i{position:absolute;right:5px;top:9px;z-index:0;}
    #StartCourse .relative input[type="text"]{width:100%;border-radius:0;height:30px;line-height:30px;background:transparent;position:relative;z-index:1;}
    #StartCourse .relative label{padding-left:10px;margin:0;}
    #sliderCourseLevelRange .slider-selection {background: #daa520;border: none;box-shadow: none !important;}
    #sliderCourseLevelRange .slider-handle{background:#6a3a1d;}
   .adminDashboardSec .adminDashboardSecTable{padding-bottom:30px;direction:rtl;text-align:right}
   #ManageTeacherpopUp{direction:rtl;}
.selected-person{color:#000;text-transform:capitalize;text-align:left;align-items:center;font-size:13px;padding:20px 15px;display:flex;djustify-content:space-between;border:none !important;}
.selected-person .person, .selected-person .personNot{color:#000;font-size:13px;text-transform:capitalize;display:block;width:50%;}
.selected-person .person h3, .selected-person .personNot h3{font-size:18px;display:block;width:100%;margin:0;}
.tabcontent{border:none !important;padding:6px 10px 10px !important;background:#f6f6f6}
.selected-person input[type="button"]{margin:0 !important;}
#ManageTeacher .teacher-list-table{max-height:300px;overflow-y:auto}
.selected-person input{margin-right:10px}
.selected-person + .teacher-list-table{max-height:calc(100vh - 280px);overflow-y:auto;width:100%;}
.selected-person + .teacher-list-table table{width:100%;table-layout:fixed;}
.selected-person + .teacher-list-table table td{word-break:break-all;}
.ui-dialog-titlebar-close::before{content:"X";color:#FFF}
#ManageStudentpopUp{direction:rtl !important;}
.student-list-table table th.jtable-column-header-selecting:first-child{width:30px !important;text-align:left !important;padding:5px 10px !important;}
.ui-widget.ui-widget-content[aria-describedby="ManageStudentpopUp"]{top:30px !important;max-height:calc(100vh - 60px) !important;}
.ui-dialog .ui-dialog-content{max-height:calc(100vh - 112px) !important;overflow-y:auto;}
.ui-dialog .ui-dialog-content::-webkit-scrollbar{width:10px;}
div.jtable-main-container{overflow:initial;}
.student-list-table{overflow:unset;}
.ui-dialog-content .student-list-table div.jtable-main-container > div.jtable-bottom-panel div.jtable-right-area{top:13px !important;right:calc(50% + 120px) !important;width:auto}
.ui-dialog-content .student-list-table div.jtable-main-container > div.jtable-bottom-panel span.jtable-page-info{margin:0 !important;}
.ui-dialog-content .student-list-table div.jtable-main-container > div.jtable-bottom-panel span.jtable-goto-page{margin-right:calc(50% - 230px);}
.ui-dialog-content .student-list-table div.jtable-main-container > div.jtable-bottom-panel{background:#f9f9f9;padding:15px 0;margin-top:0}
.ui-dialog-content .student-list-table div.jtable-main-container > div.jtable-bottom-panel>div{display:flex;flex-wrap:wrap;width:100%}
.ui-dialog-content .student-list-table div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list{order:3;width:100%;text-align:center}
.ui-dialog-content .student-list-table + .buttonsSection{padding-left:10px;padding-right:10px}
    @media (max-width:1092px){
        .inner-container .col-auto {
            margin:  10px -20px;
            height: 21px;width:calc(100% + 40px);
            padding: 0;
        }
        .inner-container .col-auto::after {
            background: url("../images/img_BorderHor.png") repeat-x;
            width: 100%;
            height: 21px;
        }
    }
@media (max-width:576px) {
    .inner-container .col {
        flex-wrap: wrap;
        font-size:13px;
    }

        .inner-container .col table td:first-child {
            font-size: 13px;
        }

        .inner-container .col table {
            width: 100%;
            margin: 0;
        }

    .container-fluid {
        padding: 0 10px;
    }

    .inner-container .col table:last-child thead {
        display: none;
    }
}
.selectedTD {
    background: #9de0ab !important;
}
.table-data{padding:0 !important;float:none;}
.course-list-search-form{display:flex;justify-content:flex-start;width:100%;margin:10px 0;}.course-list-search-form input[type="text"]{width:220px;height:30px;}
.btnAssignStudent, .btnAssignTeacher,.course-list-search-form input[type="button"], #CourseSettings .ButtonsSection input[type="button"], #CourseContent input[type="button"]{width:auto;min-width:100px;padding:0 10px;border:none;font-size:13px;font-family: CoconNextRegular;color: #FFF;background: #2c3e50;height:30px;line-height: 27px;display: block;text-align: center;}
.courses-list-table table{position:static;}
#CourseSettings .ButtonsSection {margin-bottom:0 !important;}#ManageTeacher{padding:6px 10px !important;}
.organization-dashboard-page table td{padding:7px 10px !important;line-height:normal;}
.course-list-search-form div{display:flex;justify-content:space-between;width:100%}
#StartCourse .buttonsSection{margin-top:0;}

#adminDashboardSec .adminDashboardSec .adminDashboardSecTable .fieldsTable tr td {
padding: 15px 7px 0 !important;
}
#CourseContent .aCourseContent>div:last-child{text-align:left}
#ManageTeacher .course-list-search-form{justify-content:flex-end;margin-bottom:0 !important;padding-bottom:0 !important;border:none}
.para_contentBoxLabels {
color: #000;
font-size: 14px;
}
table.fieldsTable td input, table.fieldsTable td textarea {
height: 34px;
width: 100%;
padding: 0 10px;
}
table.fieldsTable td textarea {
height: 100px;
}
table.fieldsTable + .buttonsSection {
padding: 0 8px;
}.buttonsSection.right{text-align:right}
input#btnCreateCourse, .buttonsSection input {
min-width: 100px;
border: none;
font-size:13px;
font-family: CoconNextRegular;
color: #FFF;
background: #2c3e50;
height: 30px;
line-height: 27px;
display: inline-block;
text-align: center;padding:0 15px;
}
input[type="button"] + input[type="button"] {
    margin-left: 5px;
}
.formcontainer {
    background: #f6f6f6;
    padding: 15px 15px 0;
    display: flex;
    flex-wrap: wrap;
}
.table-data.course-tab .tab + div{display:block;}
#CourseSettings[style="display: block;"]{display:flex !important;flex-wrap:wrap}
#CourseSettings>div:nth-child(3){width:100%;}
#CourseSettings>div>span{width:100%;display:block}
#CourseSettings>div>span input[type='text'], #CourseSettings>div>span select{width:100%;display:block;border:1px solid #666;height:34px;margin:0 !important;padding:0 5px;}
#CourseSettings>div:nth-child(4)>span input[type='text'], #CourseSettings>div:nth-child(4)>span select{width:calc(50% - 5px);float:left}
#CourseSettings>div:nth-child(4)>span select{float:right}
#CourseSettings>div:nth-child(6){order:11;}
#CourseSettings>div:nth-child(8){order:10;}
#CourseSettings>div:nth-child(12){order:12;}
#CourseSettings .range-counter{display:flex;justify-content:space-between}
#CourseSettings>div .slider.slider-horizontal{width:calc(100% - 10px) !important;}
/*.organization-dashboard-page table th:first-child, #ManageTeacher .organization-dashboard-page table th:nth-child(2), #anageTeacherpopUp .organization-dashboard-page table th:nth-child(2){width:70px}
.organization-dashboard-page table th:last-child{width:100px}*/
.organization-dashboard-page table th:last-child, .organization-dashboard-page div.jtable-main-container > table.jtable > thead th.jtable-column-header:last-child div.jtable-column-header-container{text-align:center !important;}
.organization-dashboard-page table td:first-child, .organization-dashboard-page table td:last-child{text-align:center}
.ayahConditionTrue .card-header{padding:0;background:#daa520}
.ayahConditionTrue .card-header h5 button{color:#FFF;display:block;width:100%;text-align:right;text-decoration:none}
.ayahConditionTrue .card{border-color:#daa520;margin-bottom:5px}
.tab{background:#f39c12 !important;border-bottom:none}
.tab button{color:#FFF;border-top:2px solid #f39c12}
.tab button:hover, .tab button.active{background:#FFF;color:#f39c12;border-top:2px solid #f39c12}
#CourseSettings .ButtonsSection input[type="button"], #CourseContent input[type="button"]{display:inline-block;width:auto;min-width:70px}
.card-body {display:flex;flex-wrap:wrap;}span.count{height:40px;width:40px;border-radius:50%;background: #f9fcf7;display:flex;margin:10px;text-align:center;align-items:center;justify-content:center;cursor:pointer;
background: -moz-linear-gradient(top,  #f9fcf7 0%, #f5f9f0 100%);
background: -webkit-linear-gradient(top,  #f9fcf7 0%,#f5f9f0 100%);
background: linear-gradient(to bottom,  #f9fcf7 0%,#f5f9f0 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9fcf7', endColorstr='#f5f9f0',GradientType=0 );border:1px solid #ccc;}
span.count:hover {background: #e0f3fa;
background: -moz-linear-gradient(top,  #e0f3fa 0%, #b6dffd 100%);
background: -webkit-linear-gradient(top,  #e0f3fa 0%,#b6dffd 100%);
background: linear-gradient(to bottom,  #e0f3fa 0%,#b6dffd 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0f3fa', endColorstr='#b6dffd',GradientType=0 );}
.ayahConditionTrue{direction:rtl;}
.ayahConditionTrue .showAyahTextClicked{display:flex;text-align:right;width:100%;border-bottom:1px solid #f6f6f6}
.ayahConditionTrue .showAyahTextClicked:last-child{border-bottom:none} 
.ayahConditionTrue .innerBody .lblAyah{line-height:40px;font-size:15px;max-width:calc(100% - 60px)}
.ayahConditionTrue .showAyahTextClicked .lblAyah{padding:10px;}
.ayahConditionTrue .card-body>.clearfix{width:100%;background:#f6f6f6;padding:8px;}
.ayahConditionTrue .card-body{padding:8px;}
.ayahConditionTrue .card{border-radius:0 !important;}
.course-sec-incomplete-msg,.course-sec-incomplete-msgg{width:100%;margin:0;}
.course-sec-incomplete-msg span,.course-sec-incomplete-msgg span{display:block;margin:0;float:none;}
.alert{text-align:right;}
.selected-person{color:#000;text-transform:capitalize;text-align:right;align-items:center;font-size:13px;display:flex;justify-content:space-between}
.selected-person .person{color:#000;padding:20px 15px;font-size:13px;text-transform:capitalize;text-align:right;display:block;}
.selected-person .person h3{font-size:18px;display:block;width:100%;margin:0;}
.tabcontent{border:none !important;padding:6px 0 10px !important;background:#f6f6f6}
.selected-person input[type="button"]{margin:0 !important;}
#ManageTeacher .teacher-list-table{max-height:300px;overflow-y:auto}
#ManageTeacher .organization-dashboard-page table td:last-child{text-align:right !important;}
#ManageTeacher .organization-dashboard-page table td:last-child[colspan="6"], #ManageTeacher .organization-dashboard-page table td:last-child[colspan="5"]{text-align:center !important;}
.alert .close{float:left !important;}
.formcontianer {
    background: #f6f6f6;
    padding: 15px;
    display: flex;
    flex-wrap: wrap;
}
.selected-person input{margin-left:10px}
.divCourseSearch + .organization-dashboard-page table#myTableCourses th:last-child, #myTableTeachers th:last-child {
    width: auto !important;
    text-align: right;
}
#CourseSettings {
    background: #F6f6f6;
}
#CourseSettings .formrow {
    width: calc(50% - 5px) !important;
    float: right;
}
.formrow>span:first-child {
    display: block;
    font-weight: bold;
    color: #000;font-size:14px;
}
#CourseSettings .aCourseSettings > div > span input[type='text'], #CourseSettings .aCourseSettings > div > span select {
    width: 100%;
    display: block;
    border: 1px solid #666;
    height: 34px;
    margin: 0 !important;
    padding: 0 5px;
}

.formrow select {
    display: block;
    width: 100%;
    padding: 0;
    color: #000;
    margin: 4px 0;
        font-family:CoconNextRegular;
    background: transparent;
    border: none !important;
    outline: none;
    font-size:13px;
    transition: all linear .3s;
}
#CourseSettings .aCourseSettings > div:nth-child(3) > span input[type='text'], #CourseSettings .aCourseSettings > div:nth-child(3) > span select {
    width: calc(50% - 5px);
    float: right;
}

#CourseSettings .aCourseSettings > div > span input[type='text'], #CourseSettings .aCourseSettings > div > span select {
    width: 100%;
    display: block;
    border: 1px solid #666;
    height: 34px;
    margin: 0 !important;
    padding: 0 5px;
}
#CourseSettings .ButtonsSection{width:100%;float:left;margin:10px 0;text-align:left;}
.course-sec-incomplete-msg,.course-sec-incomplete-msgg {
    width: 100% !important;
    margin: 25px 0;
    display: block;
    font-size: 16px;
    text-align: center;float:left;
}
.formrow .bouble span input {
    width: 60px !important;
}
#CourseSettings .aCourseSettings > div:nth-child(3) > span select {
    float: right;
}
#CourseSettings .formrow:nth-child(odd) {
    margin-left: 10px;
}
.formrow .bouble span{float:right}
#CourseSettings .formrow input[type="radio"]{margin-right:20px;margin-left:5px;margin-top:0px;display:inline-block;vertical-align:middle}
#CourseSettings .formrow input[type="radio"]:first-child{margin-right:0px;}
.v-align-middle.d-inline-block{vertical-align:middle}
.formrow .bouble span input {
    width: 60px !important;
}
#ddlCourseDuration {
    width: calc(100% - 60px) !important;
}
.formrow {
    display: inline-block;
    margin-bottom: 0 !important;
    background: #fff;
    min-height: 73px;
    margin-top: 10px;
    box-shadow: 1px 1px #e4e4e4;
    border: none;
    position: relative;
    padding: 10px 15px !important;
    width: 100% !important;
}
    .formrow input[type="text"] {
        display: inline-block;
        position: relative;
        width: 100%;
        height: 27px;
        line-height: 27px;
        padding: 2px 5px 3px;
        border: none !important;
        outline: none;
        color: #000;
        font-size:13px;
        font-family:CoconNextRegular;
        transition: all linear .3s;
    }
.formrow input[type="text"]::-webkit-input-placeholder{opacity:1;color:#000}
.organization-dashboard-page table{table-layout:fixed;text-align:right !important;}
#ManageTeacherpopUp .teacher-list-table{max-height:calc(100vh - 250px);overflow-y:auto}
.ui-dialog .ui-dialog-titlebar-close{right:auto;left:0;}
#ui-datepicker-div + div.ui-dialog, #adminDashboardSec{direction:rtl}
.formrow span[style="color: red;"]{position:absolute;left:15px;top:10px;}.formrow textarea{border:none;font-size:13px;padding:0 !important;}
#CourseSettings .range-counter{font-size:11px;line-height:13px;}
#txtAssignmentDuration{width:60px !important;display:inline-block !important;}
.courseSearch.course-list-search-form div{justify-content:flex-end;line-height:30px;align-items:center}
.courseSearch.course-list-search-form div input[type="radio"]{margin:0px 20px 0 10px;display:inline-block;vertical-align:middle;width:auto}
.courseSearch.course-list-search-form div input:first-child{margin-left:0}
.courseSearch.course-list-search-form div input[type="text"]{margin-left:20px}
#tblCoursesBody a{display:inline-block;white-space:nowrap}
#courseInfo, .divCourseSearch{background:#f6f6f6;}#courseInfo .formrow{margin:0;}.buttonsSection{margin-top:10px;font-size:0;direction:ltr;}.buttonsSection.left{text-align:left}
.divCourseSearch{flex-wrap:wrap;padding:15px;}.divCourseSearch .formrow, .aManageTeacher .formrow{width:calc(50% - 7px) !important;justify-content:flex-start !important;flex-wrap:wrap !important;}
.divCourseSearch .formrow:nth-child(odd), .aManageTeacher .formrow:nth-child(2){margin-left:14px;}.formrow>label{color:#000;display:block;width:100%;font-weight:bold;text-align:right;font-size:14px}
.divCourseSearch .formrow input:nth-child(2){margin-right:0 !important;}

#courseInfo .buttonsSection input{margin-right:auto}
.organization-dashboard-page{max-height:unset;}
.formcontianer{background:#f6f6f6;padding:15px;display:flex;flex-wrap:wrap;}
.aManageTeacher .formrow:nth-child(1){width:100% !important;}
.formcontianer .course-list-search-form{margin:10px 0 0 !important;justify-content:flex-end !important;border:none;}
#ManageTeacher .organization-dashboard-page + .course-list-search-form{justify-content:flex-end !important;border-top:1px solid #ddd;padding-top:10px;}
a.worldmap {
    width: 16px;
    float: left;
    height: 16px;
    border-radius: 100%;
    color: #fff !important;
    font-size: 14px;
    line-height: 18px;
    text-align: center;
    background: #00baba;
    position: relative;
    top: 3px;
    right: 0px;
    cursor: pointer;
}
#ddlTimeZones1{width:calc(100% - 30px) !important;display:inline-block !important;vertical-align:middle}
#ddlTimeZones1 + a{margin-top:5px}
.formrow input[type="radio"], .formrow input[type="checkbox"]{margin:0 0px 0 5px}
#divCourseName{padding: 10px 0;font-weight: bold;text-transform: uppercase;color: #FC9312;}#divCourseName + div.table-data{margin-top:0;}
#divCourseName span{color: #000;text-transform: none;font-weight: normal;}
.divCourseName{padding: 10px 5px;font-weight: bold;text-transform: uppercase;color: #FC9312;direction:rtl;}.divCourseName + div.table-data{margin-top:0;}
.divCourseName span{color: #000;text-transform: none;font-weight: normal;}
#timeZoneWorldMapModal .modal-dialog .modal-content .modal-header {
    background: #3498DB !important;
    display: inline-block !important;
}

    #timeZoneWorldMapModal .modal-dialog .modal-content .modal-header .modal-title {
        color: #fff !important;
        font-size: 20px !important;
        float: left;
        width: 100%;
    }

    #timeZoneWorldMapModal .modal-dialog .modal-content .modal-header .modal-title-note {
        color: #fff !important;
        font-size: 14px !important;
        float: left;
        width: 100%;
        display: none;
    }
    .copylinkBox {
    line-height: 0 !important;
    font-size: 13px;
}

#alertDialogClipboard .modal-header {
    background: #8FE9D8;
}

.shareJoinCourseLink, .copylink {
    cursor: pointer;
}