body{
    font-family:Roboto !important;
}

/** Notes Comment Stream **/
.notecontainer {
    max-height: 4.5rem; /* Approximately 3 lines of text */
    overflow: scroll; /* was hidden */
    position: relative;
    font-size: .8em;
    cursor: pointer;
    line-height: 1.0;
    transition: max-height 0.3s ease;
}
.notecontainer.expanded {
    max-height: 100rem;
}
.notecontainer-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1rem; /* Overlay height to improve visibility */
    background: linear-gradient(to bottom, transparent, white);
    display: none;
}
.notecontainer:not(.expanded) .comment-overlay {
    display: block;
}
.comment-toggle {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: #007bff;
    cursor: pointer;
}
.comment-toggle span {
    margin-left: 0.5rem;
    transition: transform 0.3s ease;
}
.notecontainer.expanded .comment-toggle span {
    transform: rotate(180deg); /* Rotate arrow */
}






/** carousel cards **/
/*.card-flip {*/
/*    perspective: 1000px;*/
/*}*/

/*.card-flip-inner {*/
/*    position: relative;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    transform-style: preserve-3d;*/
/*    transition: transform 0.6s;*/
/*}*/

/*.card-flip:hover .card-flip-inner {*/
/*    transform: rotateY(180deg);*/
/*}*/

/*.card-flip-front,*/
/*.card-flip-back {*/
/*    position: absolute;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    backface-visibility: hidden;*/
/*}*/

/*.card-flip-back {*/
/*    transform: rotateY(180deg);*/
/*    background-color: #f8f9fa;*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*    padding: 1rem;*/
/*    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);*/
/*    border-radius: 15px;*/
/*}*/

/*#multiModal .modal-dialog {*/
/*    max-width: 90vw;*/
/*    height: 90vh;*/
/*}*/

/*#multiModal .modal-content {*/
/*    height: 100%;*/
/*}*/

/*.carousel-item {*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*}*/

/*.carousel-inner {*/
/*    height: 100%;*/
/*}*/

/*#multiModal .card {*/
/*    height: 90%;*/
/*    width: 18rem;*/
/*    border-radius: 15px;*/
/*    overflow: hidden;*/
/*    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);*/
/*}*/

/*#multiModal .card img {*/
/*    height: 30%;*/
/*    object-fit: cover;*/
/*}*/

/*#multiModal .card-body {*/
/*    padding: 1rem;*/
/*}*/



/* Experimental */
/* Make badges stand out */
/* Adjust badges to avoid squishing and maintain uniform spacing */
.btn-icon {
    width: 50px; /* Fixed button size for uniformity */
    height: 50px; /* Fixed button size for uniformity */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.btn-icon:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Ensure the row-cols-5 behavior aligns with full-width designs */
.row-cols-5 > .col {
    flex: 1 1 20%; /* Ensure equal width distribution */
    max-width: 20%; /* Prevent items from exceeding 20% of row */
    text-align: center;
}


/* Save for later */
.goalChartColors.goalCompleted { color: #43A047}
.goalChartColors.goalAssigned { color: #DC3545}

.goalChartColors.goalAssigned-success { color: #CCD3E8 }
.goalChartColors.goalAssigned-warning { color: #ffe69c }
.goalChartColors.goalAssigned-danger { color: #f1aeb5 }

.goalChartColors.goalAssigned-secondary { color: #6c757d}

.goalChartColors.targetCompleted { color: #6c757d}
.goalChartColors.targetIncomplete { color: #ffffff}
.goalChartColors.notNeeded { color: #CCD3E8}

.goalChartColors.completeScored { color: #43A047}
.goalChartColors.completeUnscored { color: #4CAF50}
.goalChartColors.ratio90 { color: #4CAF50}
.goalChartColors.ratio50 { color: #A5D6A7}
.goalChartColors.ratioLow { color: #E8F5E9}
.goalChartColors.ratioZero { color: #EF5350}



/*.offcanvas {*/
/*    transition: none !important;*/
/*}*/

/*.offcanvas-backdrop {*/
/*    transition: none !important;*/
/*}*/
/*
 THIS IS A GLOBAL STYLESHEET FOR BOTH TEACHER AND STUDENT SHARED RESOURCES
*/
.mylc-resp-font{
    font-size:1rem;
}

.italic-placeholder::placeholder {
    font-style: italic;
}


 /*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
    .mylc-resp-font{
        font-size:1.5rem;
    }
}

 /*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
    .mylc-resp-font{
        font-size:1.5rem;
    }
}

 /*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
    .mylc-resp-font{
        font-size:1rem;
    }
}

 /*X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
    .mylc-resp-font{
        font-size:1rem;
    }
}

 /*XX-Large devices (larger desktops, 1400px and up)*!*/
@media (min-width: 1400px) {
    .mylc-resp-font{
        font-size:1rem;
    }
}
/*** offcanvas mobile navbar menu **/
@media (max-width: 991.98px) {

    #teacherNavigationCanvas{
        padding-right: 1rem;
        padding-left: 1rem;
        overflow-y: auto;
        visibility: hidden;
        /*background-color: #606464;*/
        background-color: #ffffff;
        transition: transform 0.3s ease-in-out, visibility 0.3s ease-in-out;
    }
    #studentNavigationCanvas{
        padding-right: 1rem;
        padding-left: 1rem;
        overflow-y: auto;
        visibility: hidden;
        background-color: #e0e6ec;
        transition: transform 0.3s ease-in-out, visibility 0.3s ease-in-out;
    }


}

/** Styles for creating icons **/
/* HOVER ELEMENTS FOR CHILD BUTTONS **/

.student-btn-container .edit-child-btn{
    background-color:#28a745;
}
.student-btn-container .add-child-btn{
    background-color:#007bff ;
}
.student-btn-container .remove-child-btn{
    background-color:#dc3545 ;
}
.student-btn-container .view-child-btn{
    background-color:#6c757d ;
}

/******* IF Touchscreen *******/
@media (hover: hover) {

/*********************************/
.student-btn-container .edit-child-btn{
  background-color:#f8f9fa;
}

.student-btn-container:hover .edit-child-btn{
  background-color:#28a745 ;
}

.student-btn-container .edit-child-btn:hover{
    background-color:#28a745 ;
}
/*********************************/
.student-btn-container .add-child-btn{
    background-color:#f8f9fa ;
}

.student-btn-container:hover .add-child-btn{
    background-color:#007bff ;
}

.student-btn-container .add-child-btn:hover{
    background-color:#007bff ;
}
/*********************************/
.student-btn-container .remove-child-btn{
    background-color:#f8f9fa ;
}

.student-btn-container:hover .remove-child-btn{
    background-color:#dc3545 ;
}

.student-btn-container .remove-child-btn:hover{
    background-color:#dc3545 ;
}

/*********************************/
.student-btn-container .view-child-btn{
    background-color:#f8f9fa ;
}

.student-btn-container:hover .view-child-btn{
    background-color:#6c757d ;
}

.student-btn-container .view-child-btn:hover{
    background-color:#6c757d ;
}


}

/** MYLC FRAMERWORK ELEMENTS **/
.mylc-expand-btn{
    position: absolute;
    right: .65rem;
    z-index: 10;
    display: block;
    /*color: #0d6efd;*/
    /*border: 1px solid;*/
    border-radius: .25rem;
}
.mylc-new-badge{
    position: absolute;
    display: block;
    left: -2em;
    top: -1em;
}

.mylc-help-body img{
    max-width: 100%;
    max-height: 100%;
 }

/** Help Text - image styled by ckeditor **/
.mylc-help-body .image-style-side,
.mylc-help-body .image-style-align-left,
.mylc-help-body .image-style-align-center,
.mylc-help-body .image-style-align-right {
      max-width: 50%;
  }

.mylc-help-body .image-style-side {
      float: right;
      /*margin-left: var(--ck-image-style-spacing);*/
  }

.mylc-help-body .image-style-align-left {
      float: left;
      /*margin-right: var(--ck-image-style-spacing);*/
  }

.mylc-help-body .image-style-align-center {
     margin-left: auto;
     margin-right: auto;
 }

.mylc-help-body .image-style-align-right {
      float: right;
      /*margin-left: var(--ck-image-style-spacing);*/
  }

.mylc-new-feature{
    color: #dc3545!important;
}

/** MYLC FRAMERWORK ELEMENTS **/

/*
  hr hack  - for multiple hr elements that disappear in boostrap 4
 */
hr {
    clear:both;
    display:block;
    width: 96%;
    height: 1px;
}

.hr-sm{
    margin-top:.4rem;
    margin-bottom:.4rem;
}

/**
  Shim for select2 input to match Bootstrap form-control styles
  consider using themed fork
 */
.shimSelect2Input .select2-selection__rendered {
    line-height: 36px !important;
}
.shimSelect2Input .select2-container .select2-selection--single {
    height: 38px !important;
}
.shimSelect2Input .select2-container .select2-selection--multiple {
    height: 48px !important;
}

.shimSelect2Input .select2-container--default{
    height: 38px !important;
}

.shimSelect2Input .select2-selection__arrow {
    height: 34px !important;
}

/*
Make Select2 boxes match Bootstrap5 heights:
Disabled if using allowClear: Boolean( $( this ).data( "allow-clear" ) ),

*/
/*.select2-selection__rendered {*/
/*    line-height: 32px !important;*/
/*}*/

/* Fix selected items in multi-select being shown in block instead of inline,
 this MAY only be an issue inside a flex container*/
.select2-container .select2-selection--multiple .select2-selection__rendered{
    display:flex!important;
}



    /*
    NavBar Top Level Navigation
     */
#studentNavBar a{
    font-size: .9em;
}


.notify-list{
}

.notify-link{
   display: inline-block !important;
   /*padding-right:.2rem !important;*/
    font-size:.8rem !important;

}

#studentHomeNav .nav-link{
   /*#width:120px;*/
    margin-left: 2px;
    margin-right:2px;
}

/**
   Editor Modal Window. Transformed by
   $( $.fn.DataTable.Editor.display.bootstrap.node() ).addClass( 'resource-modal-window' );
 */
.resource-modal-window .modal-dialog{
    max-width: 750px !important;
}


/* TARGET PICKER CSS */
#targetPicker5_container table{
    width:100%
}
#targetPicker5_container .leftcol{
    width:75%
}
#targetPicker5_container .rightcol{
    width:25%
}


/* Student Dashboard */

/*.mylc-dash .nav-link{*/
/*    color:#6c757d !important; !**secondary **!*/
/*}*/
/*.mylc-dash .nav-link .active{*/
/*    color: #0d6efd!important;*/
/*    background-color: #ffffff!important;*/
/*}*/


/* Bootstrap Toggle v2.2.2 corrections for Bootsrtap 4*/
/*.toggle-off {*/
/*    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);*/
/*}*/
/*.toggle.off {*/
/*    border-color: rgba(0, 0, 0, .25);*/
/*}*/

/*.toggle-handle {*/
/*    background-color: white;*/
/*    border: thin rgba(0, 0, 0, .25) solid;*/
/*}*/



/* TARGET PICKER CSS */
.material-btn-group{
    position: fixed;
    text-align:right;
    padding-right: 25px;
    padding-left: 15px;
    padding-bottom: 6px;
    padding-top: 0px;
    z-index: 1000;
    max-width:500px;
    bottom: 10px;
    right: 20px;
}
.material-modal-footer{
    position: absolute;
    text-align:right;
    padding-right: 25px;
    padding-left: 15px;
    padding-bottom: 6px;
    padding-top: 0px;
    z-index: 1000;
    max-width:500px;
    bottom: 0px;
    right: 20px;
}
#evidence_loader{
    margin-bottom: 20px;
}
.modal-sticky-footer {
    position: fixed;
    bottom: 10px; /* Adjust this value as needed to control the distance from the bottom of the window */
    right: 20px;
}

.material-btn{
    margin:4px;
}

.material-btn-save{

}
.material-btn-close{

}
.material-btn-cancel{

}




/****
Card Stuff
*/
.custom-card-deck{
    margin-right:9px;
    margin-bottom:9px;
    width:230px;
}

.custom-card-deck-mylc{

    margin-bottom:9px;

 }
.custom-card-mylc{
    height:100%!important;
    width:100%!important;
}


.custom-card-deck-big{

    width:100%;
    height: 100%;
}

.color-swatch {
    width: 30px;
    height: 30px;
    margin: 5px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-block;
}
.color-swatch.selected-color {
    border: 2px solid black; /* Add a black border to the selected color */
}

/**
Bullet list for cards with a smaller padding
 */
.displayCardUrl{padding-inline-start: 15px}


/**********************/
/* Implement Flexible Sidebar System
* https://bootstrapious.com/p/bootstrap-sidebar
*/
/**********************/
.sidebar_wrapper{
    display: flex;
    width: 100%;
    align-items: stretch;

}

/**********************/
/* Smaller Font Tables
/**********************/


.sidebar_sidebar {
    min-width: 300px;
    max-width: 300px;
    min-height: 100vh;
}
.sidebar_sidebar.active {
    margin-left: -300px;
}
@media (max-width: 768px) {
    #sidebar_sidebar {
        margin-left: -300px;
    }
    #sidebar_sidebar.active {
        margin-left: 0;
    }
}

/*************
  Child Tables
 */
.child-table th{
  font-size: .8em;
    color:#6c757d;
}

#targetHistory .dt-hasChild{
    background-color:#9bc9f1;
}


#resourceTable tr.child{
    background-color: rgba(211, 211, 211, 0.35);
}
/**********************/
/* Style the Teacher Seminars Details
/**********************/

/*#seminarDetailNav > li > a.active{*/
/*    !* set opacity to allow icons to use text-primary *!*/
/*    background-color:rgba(0,123,255,0.6);*/
/*    color:#ffffff;*/
/*}*/
#seminarDetailNav > li > span.active > i{
    /* set opacity to allow icons to use text-primary */
     color:#ffffff !important;
}




/**********************/
/* Build Seminar Front Page
/**********************/
.lower-right-set{
    text-align:right;
}

.dropdown-menu {
    max-height: 600px;
    overflow-y: auto;
}




/**********************/
/* ICONS
/**********************/
.icon_seminar{
    color:#fd7e14
}
.icon_place{
    color:#20c997
}
.icon_legacy{
    color:#17a2b8
}
.icon_ind{
    color:#6f42c1
}
.icon_branded{
    color:#17a2b8
}
/**********************/
/* Bootstrap Button Overrides
/**********************/
.btn.hasForm{
    color: #6610f2;
    background-color: transparent;
    background-image: none;
    border-color: #6610f2;

}
.hasForm{
    color: #6610f2;
}

/** DATATABLES OVERRIDES  **/

/** Allow width of dropdown buttons to be wider **/
/* Ensure dropdown items don't wrap */
/*.dt-button-collection .dropdown-item {*/
/*    white-space: nowrap;*/
/*}*/


/**
When using makeButtonNice() adds padding to the dropdown menus.
 */
div.dt-button-collection div.dropdown-menu{
    padding:4px;
    width:400px!important;
}

.dt-button-collection{
    padding: 8px 8px 4px 8px !important;  /* makes sure dropdowns get some padding */
    min-width: 400px!important; /* Make the dropdown menu wider */


}

/**
Remove primary highlighting from DataTables. There are too many links and buttons in myLC rows. THe default color looks better.
*/
/*table.dataTable tbody tr.highlight {*/
/*     !*background-color: #B0BED9!important;*!*/
/*     background-color: #96C6EF !important;*/
/*}*/

/*table.dataTable td.highlight {*/
/*    background-color: whitesmoke !important;*/
/*}*/
/*table.dataTable > tbody > tr.selected > * {*/
/*    box-shadow: inset 0 0 0 9999px rgb(13 110 253 / 25%) !important;*/
/*    color: white;*/
/*}*/


/** patch to give some space after bootstrap buttons in DataTables. **/
.dt-buttons.btn-group {
    margin-bottom: 8px;
}


/**********************/
/* Adds back the standard DataTables buttons
   Bootstrap buttons can be removed by calling
    $.fn.dataTable.Buttons.defaults.dom.button.className = 'btn  btn-outline-secondary';
    before initializing the editor.
    But you could similarly add dt-button as the class.

 */
/**********************/



.light-button .active{
    /* makes sure dropdowns get some padding */
   background-color: #E0E0E0 !important;
   color:black !important;
}



/*
TargetPicker Class CSS
 */
#targetPicker6_container .SumoSelect{
    width:100%
}

.targetPickerTable{
    font-size: .8em;
}

.tiny-font{
    font-size:.7em;
}
.smaller-font{
    font-size:.8em;
}

/*
   modal styles for bootbox loadNotifications
   jsindex.V4
 */
.notifications-modal{
    font-size:.8em
}
/**
Pie Charts
 */
.piechart {
    width: 40px; /* Adjust as needed */
    height: 40px; /* Adjust as needed */
    border-radius: 50%;
    background-image: conic-gradient(
        #198754 0% 0%, /* Default to 0% fill */
        #acf1d2 0% 100% /* Remaining fill */
    );
    margin: 0px;
    display: inline-block;
}

/*
  Table Classes, Bootstrap Extensions
 */


.text-table-light{
    /* allows for a muted effect in a striped table */
    color:#ddd
}
.btn-group-sm>.btn, .btn-tiny {
    padding: .2rem .5rem .2rem .3rem;
    font-size: .7rem;
    line-height: 1;
    border-radius: .2rem;
}
.btn-tiny {
    padding: .2rem .5rem .2rem .3rem !important;
    font-size: .7rem!important;
    line-height: 1!important;
    border-radius: .2rem!important;
}
.btn-smaller {
    padding: .2rem!important;
    font-size: .9rem!important;
    line-height: 1!important;
    border-radius: .2rem!important;
}
/**
 Additional Text Classes
 */
.bg-orange{
    background-color:#fd7e14!important;
}
.bg-indigo{
    background-color:#6610f2!important;
}

/** moved to scss **/
/*.text-indigo{*/
/*    color:#6610f2!important;*/
/*}*/

.table-indigo{
    background-color: #d8cbef;
}

.text-orange{
    color:#fd7e14!important;
}
.text-pink{
    color:#e83e8c;
}
.text-teal{
    color:#20c997;
}

.text-lighter{
    color:#ccc!important;
}
.table-lighter{
    background-color: #e8ecf0;
}
.bg-lighter{
    background-color: #dee2e6;
}
.alert-lighter{
    background-color: #dee2e6;
}

/****
Evidence
**/
#studentEvidenceCanvas {
    /*set width on evidence canvas to make sure it fills a larger
     portion of the screen but at least 400px on mobile*/
    width: 50%;
    min-width: 400px;
}

#modal_scoreInfo{
    font-size: .9em;
}
.EvidenceDataTable th{
    font-size: .8em;
}
.EvidenceDataTable td{
    font-size: .9em;
}
.EvidenceDataTable .child{
    font-size: .8em;
    /*background-color: #c2e2ff;*/
    padding:4px;
}
/**
 * override padding in li items in datatabls responsive (table.dataTable>tbody>tr.child ul.dtr-details>li)
 * for list items in the child rows. These details will be much smaller
 */
.EvidenceDataTable .child li{
    padding: 0.2em 0 !important;
}
/**
   override DataTables active color so we can use bs formatted buttons in the table
 */
.EvidenceDataTable .selected{
    /*background-color: #E0E0E0 !important;*/
    color:#000000 !important;
}

#courseTargetDetailTank  .form-floating>label{
    overflow: visible!important;
}
 .targets-child-container{
    margin: 4px;
    padding: 10px;
    background-color: #f0f0f0;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}
/*.targets-child-standards{*/
/*    background-color: #f0f0f0;*/
/*    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);*/
/*}*/
#allTasksTank .dtr-details {
    margin-left:24px;
}

.offcanvas .DTE_Footer{
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 9999; /* Adjust the z-index as needed to ensure it is on top of other elements */
    /** background-color: #f8f9fa; /* Set the background color of the footer */
    padding: 10px; /* Add padding as desired */
}

.offcanvas-resize-handle {
    position: absolute;
    left: 10;
    top: 10;
    height:100%;
    width: 10px;
    cursor: ew-resize; /* East-West resize cursor */
}

.ap, .addPointer{
    cursor:pointer;
    text-decoration: none;
}

.add-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
}

.bottom-close-button {
    position: fixed;
    bottom: 20px;
    right: 80px;
    z-index: 9999;
}

.add-button-menu {
    position: fixed;
    bottom: 70px; /* Adjust this value as needed */
    right: 20px;
}

/**
Comment classes for duotone icons
**/
.comments-teacher-only{
    --fa-primary-color:#28a745;
    --fa-secondary-color: #6c757d
}
.comments-student-only{
    --fa-primary-color: #6c757d;
    --fa-secondary-color:#007bff
}
.comments-both{
    --fa-primary-color:#28a745;
    --fa-secondary-color:#007bff
}


/**
DataTables set min-width on targetGrid table columns
 */
#targetGrid th{
    min-width: 40px;
}
#targetGrid_wrapper th{
    min-width: 40px;
}

/*
  Evaluate pages
 */

/*  Archive Table List View format */
/*#seminarArchiveTable td{*/
/*    font-size: .8em;*/
/*}*/

#seminarArchiveTable .selected{
    background-color: #E0E0E0 !important;
    color:#000000 !important;
}
/*
  Inputs and Grading
 */
/*#evaluateOffCanvas*/
.full-canvas{
    width: 95% !important;
    /*min-width: 750px !important;*/
}

.large-canvas{
    width: 75% !important;
    min-width: 600px !important;
}
/*#evaluateOffCanvas*/
.medium-canvas{
    width: 50% !important;
    min-width: 500px !important;
}
#evaluateOffCanvas .small-canvas{

}


#content_grading .ts-dropdown-content{
    max-height: 600px;
}

#gradeBookTools{
    font-size: .7em;
}

.act_btn_label{
    font-size:.7em
}

.dtb_tScoreInput{
    min-width:100px
}
table .name-col{
    min-width:120px;
}

.tag-view-off .dt-hasChild .evidence-inline-buttons{
    display: none;
}

/** Get the fa-lg button size just right on the feed  **/
.evidence-inline-buttons{
    font-size: 1.4em;
}


.feed-tool { /** use smaller button  **/
    padding: .5rem!important;
    font-size: .85rem!important;
    line-height: 1!important;
    border-radius: .2rem!important;
}



/** This class is a listener function! **/
.targetScoreInput{
    display:inline!important;
    width:50%;
    min-width: 50px;
    max-width: 60px;
}

/** This class is a listener function! **/
.eScoreInput{
    display:inline!important;
    width:50%;
    min-width: 50px;
    max-width: 100px;
}

.modalEvidenceRowGroup{
    background-color: #ddd !important;
}

/****************************************************
* Heirarchy for modal windows when bootbox is created on top
* of bootstrap modal. Note this is NOT recommended.
* modal_showevidence uses z-index:1062 when creating an evidence window
* generic modal-content window is z-index: 2001 in bootstrap 5
****************************************************/
.tag-dialog .modal-content{
    background-color: #f8f9fa;
    /**  modal_showevidence is z-index: 1061 **/
}
.tag-dialog{
    z-index:1062;
}

.edit-evidence-modal{
    z-index: 1063;
}



/** must sit on top of buildEvidence3**/
#mylc_feedback_modal{
    z-index: 1063;
}
#mylc_media_modal{
    z-index: 1064;
}
#mylc-confirm-delete{
    z-index: 1065;
}
.confirm-removetag{
    z-index:1065;
}


/* make sure select2 is above modal backdrops set at 1060 */
.modal .select2-container{
    z-index: 1101;
}
.select2-dropdown{
    z-index: 1102;
}

/** Datepicker dropdown.  Make sure it shows above modals **/
.datepicker.dropdown-menu {
    z-index: 2000;
}

.picker-dialog{
    z-index: 2001 !important;
}
#mylc-modal-confirm{
    z-index: 2002 !important;
}
.modal-content{
    z-index: 2001
}
.tag-all-alert{
    z-index:2002;
}
.target-info-modal{
    z-index: 2003 !important;
}
#target-info-modal{
    z-index: 2003 !important;
}

.modal-comment-dialog{
    z-index: 2002
}
.modal-video-dialog{
    z-index: 2003
}

.modal-target-history{
    z-index: 2003
}

.modal-confirm-delete{
    z-index: 2004
}


.modal-dialog .tooltip{
    z-index: 2003
}

.picker-dialog-bg {
    z-index: 20000 !important;
}
.picker-dialog {
    z-index: 20001 !important;
}

/* modal evidence viewer full size */





.modal-full > .modal-dialog {
    max-width: 95% !important;
}

.modal-full .modal-content {
    min-height: 90vh;
}
.modal-input-small{
    max-width: 60px;
}
.modal-input-50{
    max-width: 50%;
}


/*
  hack to prevent flickering on tooltips in google charts. See bug here:
  Fix: https://github.com/google/google-visualization-issues/issues/2162
  Issue https://issuetracker.google.com/u/2/issues/77888335
  */
.google-visualization-tooltip { pointer-events:none; }


/**
DataTable Overrides
Experimental
 */
.myLCDT_filter_left{
    text-align: left !important;
}

.myLCDT_filter_left  input{
    width:100%;
}
.myLCDT_filter_big{
   width:100%;
    min-width: 300px;
}





/***
Student and Teacher
message container
*/

.processing_message_container{
    width:100%;
    position:fixed;
    bottom:0px;
    left:0;
    text-align: center;
    z-index:1001;
}

.processing_message{
    width:500px;
    bottom:0px;
    min-height:32px;
    padding:4px;
    font-size: 1em;
    margin: 0 auto;
    text-align: center;
    display:none
}

/*.processing_message .message-text {  !* Or .processing_message h6 if using <h6> *!*/
/*    position: absolute;  !* Key for overlaying *!*/
/*    bottom: 5px; !* Or adjust as needed *!*/
/*    left: 0;*/
/*    width: 100%;*/
/*    text-align: center;*/
/*    color: white;  !* Or any color you want *!*/
/*    background-color: rgba(0, 0, 0, 0.5); !* Semi-transparent black background for contrast *!*/
/*    padding: 5px 0; !* Add some padding *!*/
/*    border-radius: 5px; !* Rounded corners *!*/
/*}*/


.text-open:hover  {
    color: #007bff;
    cursor: pointer;
}

/**
 DATEPICKR
 */

/*.dcalendarpicker .dudp__wrapper{*/
/*    bottom:0px!important;*/
/*    top:100px!important;*/
/*}*/
/**
TEACHER
 ****/

/** Feed **/
.teacherFeed_content .accordion-button{
    font-size: .9em;
}
.teacherFeed_content .accordion-body{
    font-size: .8em;
}
#feedTaskSelectContainer select{
    min-width:120px;
}

/** TEACHER COURSES **/
#course_editor .ul-list{font-size:10px;margin-top:0px}
#course_editor .li-list {font-size:10px}
#btnAddNewRow {margin-left:10px}
#recalculate_message{z-index:3000;}
#recalculate{z-index:3000;}
#course_editor .actionBtnSet {
    position: fixed;
    padding-right: 15px;
    padding-left: 15px;
    padding-bottom: 6px;
    padding-top: 6px;
    z-index: 1000;
    background-color: #808080;
    bottom: 20px;
    right: 100px;
    display:none;
}
/*#myTgtTable .child-row{*/
/*    font-size: .8em;*/
/*    border: none;*/
/*}*/
/*#myTgtTable .child-row td{*/
/*    font-size: .8em;*/
/*    border: none;*/
/*}*/
#myTgtTable .dt-hasChild td{
   background-color:#cfe2ff;
}

#myTgtTable th.extra-small{font-size:.7em}

#myTgtTable td:not(:first-child) {
    font-size:.8rem;
}

#course_editor .modal-dialog{
    max-width: 80%!important;
    min-width: 60%!important;
}
#customTargetForm textarea,input {
    font-size:.8rem
}



/* Controls sidebars when using Target editor on screen instead of modal*/

#course_editor .tgt-sidebar{
    width:100%;
}
#course_editor textarea{
    width:100%;
}

#course_editor .tgt-sidebar input{
    width:100%;
}

/* Fix the buttons on the bottom of the pagedo dynamically when the page scrols */

#course_editor .mylcdt-fixed-bottom {
    position: fixed;
    left: 20px;
    bottom: 20px;
}
#customTargetForm textarea  {padding: 4px}
#customTargetForm input     {padding: 4px}

/* Fix the buttons on the bottom of the page editor */
#mainTargetEditor .DTE_Form_Buttons {
    position: fixed;
    bottom:20px;
    right:20px;
}

/**
  evidence editor modal
 */

/*#student-evidence-modal .modal-footer {*/
/*    position: sticky;*/
/*    bottom: 0;*/
/*    background-color: #e2e3e5;//inherit; !* [1] *!*/
/*    z-index: 3055; !* [2] *!*/
/*}*/

#student-evidence-modal .modal-footer {
    /*new for jan 15*/
    position: sticky;
    bottom: 0;
    background-color: #e2e3e5;
    z-index: 3055;
    margin-left: auto;
    width: fit-content;
    padding: 8px;
    border-radius: 24px;
}

.mylc-tagging-footer {
    /*new for jan 15*/
    position: sticky;
    bottom: 0;
    background-color: #e2e3e5;
    z-index: 3055;
    margin-left: auto;
    width: fit-content;
    padding: 8px;
    border-radius: 24px;
}

/**
STUDENT
 ****/
.mylc-main-student{
    margin-bottom: 3rem;
}
.mylc-main-student #loadingmsg{
    width: 300px;
    height: 100px;
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    display:none
}
.mylc-main-student #errormsg{
    position:absolute;
    margin-top:30px;
    width:100%;
    display:none;
    margin: auto;
}