/*
 * tutorAdmin.css
 * Tutor Admin
 *
 */

html {
    position: relative;
    min-height: 100%;
    height: 100%;
}

body {
    overflow: hidden;
    height: 100%;
}

body > .container-fluid {
    padding: 45px 0 0 0;
    height: calc(100% - 45px);
}

header > .navbar {
    height: 45px;
}

.alertArea {
    margin-top:90px;
    padding-left:30px;
    padding-right:30px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width:calc(100% - 60px);
}

.navbar-toggler-icon {
    background-image: url('exlib/images/icons8-menu.svg');
    background-repeat: no-repeat;
}

.filltop {
    height: calc(100% - 45px);
    width: 100%;
    padding-bottom: 12px;
    position:absolute;
}

.ta_content {
    padding: 0.5em 0.5em 0.5em 0.5em;
}

.ta_spacer {
    padding: 0.5em 0 0 0;
}

.dropdown-checkable-item {
    padding-left: 2rem;    
}

.dropdown-item-checked::before {
  position: absolute;
  left: .4rem;
  content: '✓';
  font-weight: 600;
}

#splitter {
    position: absolute;
    pointer-events: none;
    z-index: 10;
    background-color: transparent;
    padding-top: 34px;
    margin-top: 8px;
}

.split_upper {
    height: 50%;
}

.split_adj {
    pointer-events: auto;
    height: 5px;
    width: 100%;
    cursor: row-resize;
}

.split_lower {
    height: 50%;
}

.dragRowResizeFiller {
   position:absolute;
   z-index:900;
   left:0;
   top:0;
   width:100%;
   height:100%;
   background-color:transparent;
   cursor:row-resize;
}

/*
 * the following btn-group style fixes a defect in Boostrap 5.2 where it adds a -1 left margin
 * to group items if they are not the first one, but in a radio button group the input radio
 * is first so it inappropriately triggers. This reverses that problem.
 *
 */

.btn-group {
    margin-left: 1px;
}


/*
 * Media-dependent classes
 *
 */

/*
 * smallest
 */

.svgi {
    max-width: 48px;
    max-height: 48px;
}
.svgi-b {
    max-width: 48px;
    max-height: 48px;
    background-color: black;
}
.svgi-w {
    max-width: 48px;
    max-height: 48px;
    background-color: white;
}
.text-large {
    font-size: 34px;
    font-weight: 700;
}
.text-head {
    font-size: 26px;
    font-weight: 600;
}
.text-medium {
    font-size: 18px;
    font-weight: 500;
}
.text-small {
    font-size: 10px;
    font-weight: 500;
}
.crp_size {
    width: 48px;
    height: 198px;
    border-radius: 24px;
    margin-right: 26px;
}
.ca_size {
    height: 28px;
}
.cp_size {
    height: 56px;
    width: 56px;
    margin-right: 22px;
    background-size: 48px;
}

/*
 * images
 *
 */

.spinner-icon {
    width: 36px;
    height: 36px;
    background-image: url('exlib/images/icons8-iphone-spinner2_transparent.gif');
    background-repeat: no-repeat;
    background-size: 36px;
}
.svg_clipboard {
    width: 24px;
    height: 24px;
    -webkit-mask: url('exlib/images/clipboard-copy.svg') no-repeat 50% 55% / 16px 16px;
}

.svg_menu {
    width: 48px;
    height: 48px;
    -webkit-mask: url('exlib/images/icons8-menu.svg') no-repeat 50% 55% / 24px 24px;
}
.svg_back {
    width: 24px;
    height: 48px;
    -webkit-mask: url('exlib/images/icons8-back.svg') no-repeat 50% 55% / 24px 24px;
}
.svg_plusbox {
    width: 48px;
    height: 48px;
    -webkit-mask: url('exlib/images/icons8-add-new.svg') no-repeat 50% 55% / 24px 24px;
}
.svg_search {
    width: 48px;
    height: 48px;
    -webkit-mask: url('exlib/images/icons8-search.svg') no-repeat 50% 55% / 24px 24px;
}
.svg_menu {
    width: 48px;
    height: 48px;
    -webkit-mask: url('exlib/images/icons8-menu.svg') no-repeat 50% 55% / 24px 24px;
}
.svg_like {
    width: 48px;
    height: 48px;
    -webkit-mask: url('exlib/images/icons8-cuff-like.svg') no-repeat 50% 55% / 24px 24px;
}
.svg_speech_bubble {
    width: 48px;
    height: 48px;
    -webkit-mask: url('exlib/images/icons8-speech-bubble.svg') no-repeat 50% 55% / 24px 24px;
}
.svg_share {
    width: 48px;
    height: 48px;
    -webkit-mask: url('exlib/images/icons8-share-rounded.svg') no-repeat 50% 55% / 24px 24px;
}
.svg_ellipsis {
    width: 48px;
    height: 48px;
    -webkit-mask: url('exlib/images/icons8-ellipsis.svg') no-repeat 50% 55% / 24px 24px;
}

/*
 * colors
 *
 */

.green {
    color: mediumseagreen;
}

.blue {
    color: cornflowerblue;
}

.bgc_white {
    background-color: white;
}

.bgc_black {
    background-color: black;
}

.bgc_light {
    background-color: #f0f0f0;
}


/*
 * Modals
 *
 */

.grt_body {
    height: 50vh;
}

.grt_dialog {
    max-width: 90%;
}

.promo_input {
    max-width: 25%;
}

.promo_body .inactive {
    background-color: lightgrey;
}

.promo_body .subj_body .course-box {
    height: 250px !important;
}

.promo_body .flex-row {
    border-radius: 2px;
    padding: 2px;
}

.promo_body .flex-row:hover:has(> input){
    background-color: rgba(33, 150, 243, 0.3);
}
.promo_video, .promo_discount, .promo_membership {
    padding: 5px;
    border: 1px solid grey;
    border-radius: 5px;
}

/*
 * Pages
 *
 */

#pages_container {
    position: relative;
    overflow: hidden;
}

.crp_swipe {
    top: 0;
    left: 0;
    position: absolute;
    pointer-events: none;
}

.page-content {
    pointer-events: auto;
    overflow: hidden;
}


/*
 * searchPage
 *
 */

.sp_group {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
}

.sp_input {
    z-index: 2;
}

.sp_recentlabel {
    color: darkgrey;
}

.sp_recentbut {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp_recents {
}


/*
 * PageUsers
 *
 */
 
.uf_actiondrop {
     padding: 0;
     background-color: white;
     border-color: white;
}

.uf_actionicon {
    background-color: black;
    height: 30px;
    width: 20px;
    -webkit-mask: url('exlib/images/icons8-menu.svg') no-repeat 50% 55% / 24px 24px;
}

.TA_UserTab {
    position: absolute;
    pointer-events: none;
    padding-right: 24px;
    width:100%;
    height:100%;
}

.TA_UserInfo_Image {
    width: 100%;
    max-width: 25%;
    background-repeat: no-repeat;
    background-size: contain;
}

.TA_UserInfo_Detail {
    border-color: lightgray;
    border-width: 1px;
    border-style: solid;
    overflow-y: scroll;
}

.TA_UserLogin_Detail {
    overflow-y: scroll;
}

.TA_UserVideo_Detail {
    overflow-y: scroll;
}

.TA_UserCourse_Detail {
    overflow-y: scroll;
}

.TA_UserOwned_Detail {
    overflow-y: scroll;
}

.TA_Buyer_Detail {
    overflow-y: scroll;
}

.TA_Seller_Detail {
    overflow-y: scroll;
}


/*
 * PageVideos
 *
 */

.TA_VideoTab {
    position: absolute;
    pointer-events: none;
    padding-right: 24px;
    width:100%;
    height:100%;
}

.TA_VideoInfo_Video {
    width: 100%;
    max-width: 25%;
    background-repeat: no-repeat;
    background-size: contain;
}

.TA_VideoInfo_Detail {
    border-color: lightgray;
    border-width: 1px;
    border-style: solid;
    overflow-y: scroll;
}


/*
 * PageCourses
 *
 */

.TA_CourseTab {
    position: absolute;
    pointer-events: none;
    padding-right: 24px;
    width:100%;
    height:100%;
}

.TA_CourseInfo_Detail {
    border-color: lightgray;
    border-width: 1px;
    border-style: solid;
    overflow-y: scroll;
}

.TA_CourseVideos_Detail {
    border-color: lightgray;
    border-width: 1px;
    border-style: solid;
    overflow-y: scroll;
}

.TA_CourseViewers_Detail {
    overflow-y: scroll;
}

.TA_CoursePurchases_Detail {
    overflow-y: scroll;
}


/*
 * PagePayments
 *
 */

.TA_PaymentTab {
    position: absolute;
    pointer-events: none;
    padding-right: 24px;
    width:100%;
    height:100%;
}

.TA_PaymentInfo_Detail {
    border-color: lightgray;
    border-width: 1px;
    border-style: solid;
    overflow-y: scroll;
}

.TA_Payment_Detail {
    border-color: lightgray;
    border-width: 1px;
    border-style: solid;
    overflow-y: scroll;
}

.TA_CreditTab {
    position: absolute;
    pointer-events: none;
    padding-right: 24px;
    width:100%;
    height:100%;
}

/*
 * PageCredits
 *
 */

.TA_CreditInfo_detail {
    overflow-y: scroll
}

.TA_CreditUsage_detail {
    overflow-y: scroll
}

/*
* Fix for sort order display
*/

.ag-header-label-icon.ag-sort-order {
    display: none
}