.gray-strip {
    height: 1px;
    width: 100%;
    background: #cdd2d5;
}
.list-body-content{
    border-right: 1px solid #eee !important; min-height: 108px;}

.text-orange{ color: #ff6600;}
.poptt h3{ font-size: 20px; line-height: 28px;}
.catlog-bg img {
    height: auto;
    width: 100%;
    text-align: center;
}

.catlog-bg{ padding: 8px;}
.catlog-content { position: relative; height:100px !important;     padding: 10px 30px;}
.info-c{  font-size: 22px; color: #666; display: inline-block; 
          padding: 6px 12px;
          line-height: 1.42857143;
          text-align: center;
          white-space: nowrap;
          vertical-align: middle;
          -ms-touch-action: manipulation;
          touch-action: manipulation;
          cursor: pointer;
}
.info-c:hover{color: #999;}
.my-catlog-btn {
    padding: 3px 12px 4px 12px;
    border-top: 1px solid #efefef;
}
.catlog-content h4{ height: 45px;}
.panel-pos {
    position: inherit; 
    bottom: auto; 
    left: auto; 
    width: 100%;
}
.date-time-wrap-2 {
    background:#fff;}
.datewrapbox {
    border: 1px solid #dfdfdf;
    padding:10px;
    min-height: 72px;
}
.datewrapbox i{     background: #ff6600;
                    color: #fff;
                    width: 35px;
                    height: 35px;
                    border-radius: 50%;
                    line-height: 35px;
                    margin-right: 15px !important;
                    text-align:center;
                    font-size: 16px;}
.poptt{ border-left: 4px solid #ff6600; padding: 0px 0px 0px 15px; margin-bottom: 12px;}
.modal{z-index: 105000;}
.modal .close{ font-size: 38px; margin-top: -8px; font-weight: 300;}
.catlog-content h4 {
    font-size: 16px;
    margin: 0 0 15px 0;
    line-height: 23px;
    font-weight: 600;
}
.box-cat-height {
    height:auto;}
.space {
    display: inline-block;
    width: 5px;
}
/*.catalog-thumbnail img {
    width: 131px;
    height: 104px;
}*/
.red_elearning, .green_classroom, .blue_webinar {
    width: 4px;
    border-right: 1px solid #fff;
    height: 104px;
    float: left;
}
.list-body-content {
    padding: 0px 12px;}
.width-set-list {
    min-height: 130px;
    padding: 12px;
    height: auto !important;
    width: 100%;
}
.enroll-warp {
    padding: 14px 0px !important;
}
.enroll-warp .info-c{    height: 80px;
                         float: left;
                         padding: 24px 20px;
}
.pricecourse {font-size: 22px;
              color: #ff6600;
              font-weight: 500;
              padding: 36px 0px 0px 0px;}
.list-body-content h2 {
    margin-bottom: 8px;
}
.priceDiv {
    background: #ececec;
    padding: 1px;
    right: 8px;
    line-height: 16px;
    top: 198px;
    padding: 6px 10px 6px 10px;
    text-align: center;
    position: absolute;
    color: #ff6600;
    font-size: 22px;
    font-weight: 500;
    opacity: 1;
}
.priceDiv:before {
    border-width: 0 10px 10px 0;
    border-right-color: #222!important;
    right: 0;
}
.list-body-content h2 {
    line-height: 22px;}
.btnopen, .btnlaunch{float: left;
         margin: 22px 0px 0px;}
.pricetop{ font-size:24px;}
.course-side-img img {
    width: 100%;
    height: auto;
    float: left;
    position: inherit; 
}
.course-content h1 {
    font-size: 18px;
    font-weight: 600;
    color: #333 !important;
    margin: 0;
}
.course-content {
    background-color: #fff;
    padding: 15px!important;
}
.btn-black{
    color:#333;
    border: 1px solid #f6f6f6;
    background: #fff;
    border-radius: 0px;
    padding: 12px;
}
.btn-black:hover{
    color:#999;
    border: 1px solid #f6f6f6;
    background: #fff;
}
.course-side {
    height: auto;}
.learningobject_box{ padding: 15px 15px 1px 15px;}
.learningobject_box .collapse.in {
    display: block;
    margin-bottom:0px;
}
.learningobject_box h3{ font-size: 20px; color: #333; margin: 0px;}
#accordion .panel{
    border:0px none;
    box-shadow:none;
}
#accordion .panel-heading{
    padding:0;
    background: #fff;
    height: 48px;
    line-height:48px;
    border: 1px solid #d3d3d3;
    margin-bottom: 10px;

}
.learningobject_box.course-side.pb15 .collapse.in{
    background: #ffffff;
    margin-bottom: 10px;
}

#accordion .panel-title a{
    display: block;
    position: relative;
    background:#f3f3f3;
    color:#212121 !important;
    font-size:16px;
        border-bottom: 1px solid #d3d3d3;
    font-weight: bold;
    padding:15px 20px 15px 55px;
    transition:all 0.10s linear 0s;
    min-height: 47px;
}
#accordion .panel-title a.collapsed{
    color:#808080;
    border-bottom:1px solid #d3d3d3;
    margin: 0;
}
#accordion .panel-title a i {
    color: #212121;
    border-right: 1px solid #d3d3d3 !important;
    border-left: 0px !important;
    border-top: 0px !important;
    border-bottom: 0px !important;
    position: absolute;
    background: #f3f3f3 !important;
    padding: 7px 14px;
    top: 9px;
    left: 0px;
}
.accordarrow .panel-title a:before,
.accordarrow .panel-title a.collapsed:before{
    content:"";
    position: absolute;
    bottom: -14px;
    left: 16px;
    border: 7px solid transparent;
    /*    border-top: 7px solid #ff6600;*/
}
.accordarrow .panel-title a.collapsed:before{
    content:"";
    border: 0px none;
}
.accordarrow .panel-title a.collapsed:hover{
    color: #6a6060;
}
.accordarrow .panel-title a:after,
.accordarrow .panel-title a.collapsed:after{
    content: "\f106";
    font-family: FontAwesome;
    /*color: #ff6600;*/
    font-size: 20px;
    line-height: 20px;
    position: absolute;
    top: 10px;
    right: 15px
}
.accordarrow .panel-title a.collapsed:after{
    content: "\f107";
    color:#808080;
}
.infoaccord{
    display: inline-block;
    position: absolute;
    right: 0;
    margin: 12px 52px 0px 30px;
}
#accordion .panel-body{
    border-top:0 none; padding: 0px 0px 0px 0px;
}
.statustop{ margin-top: 3px; float: right; margin-right: 15px; font-size: 16px;}
.status-time-wrap-2 .statuswrapbox, .status-time-wrap-2 .statuswrapbox1{
    /*border-right: 1px solid #dfdfdf;*/ padding-right: 15px; min-height: 40px; width:100%;
    display: inline-block; line-height: 16px;  }
.statuswrapbox i {
    float: left;
    font-size: 14px;
}
.statuswrapbox .headstatus{    margin: 0px;
                               font-size: 15px;
                               font-weight: 400;
                               padding: 5px 0px 0px 0px;}

.statuswrapbox h3, .statuswrapbox1 h3{
    font-size: 14px;
    margin: 0px;
}
.statuswrapbox .btn-sm {
    padding: 1px 5px;     font-size: 12px;
    letter-spacing: 0.6px;     border-radius: 14px; }
/*.statuswrapbox1 i{ color:#333; }*/
.fa.pull-left {
    margin: 3px 10px 0px 0px;
}
.statuswrapbox .fa-pie-chart{ margin: 0px 40px 0px 0px;}

/*.imgview{ height: 247px;}*/
.imgview img {
    width: 100%;
    height: auto;
    float: left;
}
.imgview .titleimgbg{ background: rgba(0,0,0,0.8);
                      color: #fff;
                      font-size: 16px;
                      padding: 6px 15px;
                      z-index: 99;
                      display: inline-block;
                      position: relative;
                      width: 100%;
                      /*height: 55px;*/
                      float: left;
                      margin-bottom: 10px;

}
.object li{
    background: #fff;
    padding:13px 10px;
    font-size: 14px;
    border-top: 1px solid #dfdfdf;
    border-bottom: 1px solid #dfdfdf;
    margin: -1px 0px 0px 0px;
    border-left: 3px solid #fff;
    float: left;
    width: 100%;
}
.object li:hover, .object .active{
    background: #f1f1f1;
    border-top: 1px solid #dfdfdf;
    /*border-left: 3px solid #ff6600;*/
}
.object li .btn{
    margin: 0px 3px 0px 3px;
    margin-bottom: 0px;
    padding: 2px 8px;
    height: 26px;
}
.object li a{ color: #333;}
.object li a:hover{ color: #666;}
.object li i{ font-size: 18px;}
.discontent {
    width:100%;  
    font-size:14px;
    height:38px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.toggleHide{ margin: 0px; font-size: 16px; text-align: right; cursor: pointer; display: inline-block; float: right;}

.toggleHide   i {
    background: #333;
    color: #fff;
    border-radius: 50%;
    font-size: 24px;
    width: 25px;
    line-height: 22px;
    margin: -4px 0px 0px 10px;
    float: right;
    height: 25px;
    text-align: center;
    display: inline-block;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
.toggleHide i:hover{ opacity: 0.7;}

.toggleHide .up {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}

.toggleHide .down {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
}
@media screen and (max-width: 767px){
    #request_modal_classroom .modal-body{
        height: inherit;
        min-height: 320px;
    }
    /*    .course-side-img {
            height: 135px;
        }*/
    /*    .course-side-img img {
            width: 168px;
            height: 126px;
            float: left;
        }*/
    .btn-black {
        padding: 9px;
    }

    .status-time-wrap-2 .statuswrapbox, .status-time-wrap-2 .statuswrapbox1{
        border-right: 0px solid #dfdfdf; padding-right: 0px;   border-bottom: 1px solid #dfdfdf; padding-bottom: 15px; min-height: 40px; width:100%;
        display: inline-block;   }
    .modal-body{ padding: 15px;}
    .imgview{ height: 128px;}
    .imgview img {
        width: 100%;
        /*        height: 128px;*/
        float: left;
    }
}
@media screen and (max-width: 992px) and (min-width: 768px) {
    .info-c{  padding: 1px 12px !important; vertical-align: top !important;
    }
    .heading{ height: 82px;}
    #request_modal_classroom .modal-body{
        height: inherit;
        min-height: 430px;
    }
    .dis-content-text-courses{
        width: 96% !important;
    }
    .status-time-wrap-2 .col-lg-4, .status-time-wrap-2 .col-md-4, .status-time-wrap-2 .col-sm-4{
        padding: 0px 4px !important;
    }
}
.ml10{
    margin-left: 10px;
}
.panel-default > .panel-heading {

    background-color: #fff;
    border-color: #e5e8e8;
    color: #00b2e4;
    height: auto;
    padding: 10px 0px;
    border-radius: 0px;

}

.item {
    position: relative;
    margin: 0px;
    border-left: 1px solid #dfdfdf;
    padding: 5px 0px 5px 30px;
}

.item > span {
    position: absolute;
    width: 26px;
    height: 26px;
    font-size: 20px;
    text-align: center;
    line-height: 26px;
    border-radius: 100%;
    left: -14px;
    top:55px;
    background: #fff;
    color: #999;
    border:1px solid #dfdfdf;;
}

.item > .complete {
    background: rgba(255, 102, 0, 0.22);
    color: #ff6600;
}

.progress-circle {
    width: 50px;
    height: 50px;
    line-height: 50px;
    background: none;
    margin: -9px 0px 0px 0px;
    box-shadow: none;
    position: relative;
    display: inline-block;
}

.progress-circle:after {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid #eee;
    position: absolute;
    top: 0;
    left: 0;
}

.progress-circle > span {
    width: 50%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    z-index: 1;
}

.progress-circle .progress-left {
    left: 0;
}

.progress-circle .progress-bar {
    width: 100%;
    height: 100%;
    background: none;
    border-width: 2px;
    border-style: solid;
    position: absolute;
    top: 0;
    border-color: #ffb43e;
}

.progress-circle .progress-left .progress-bar {
    left: 100%;
    border-top-right-radius: 75px;
    border-bottom-right-radius: 75px;
    border-left: 0;
    -webkit-transform-origin: center left;
    transform-origin: center left;
}

.progress-circle .progress-right {
    right: 0;
}

.progress-circle .progress-right .progress-bar {
    left: -100%;
    border-top-left-radius: 75px;
    border-bottom-left-radius: 75px;
    border-right: 0;
    -webkit-transform-origin: center right;
    transform-origin: center right;
}

.progress-circle .progress-value {
    display: flex;
    border-radius: 50%;
    font-size: 18px;
    text-align: center;
    line-height: 20px;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-weight: 300;
}


/* This for loop creates the necessary css animation names Due to the split circle of progress-left and progress right, we must use the animations on each side. */

.progress-circle[data-percentage="10"] .progress-right .progress-bar {
    animation: loading-1 1.5s linear forwards;
}

.progress-circle[data-percentage="10"] .progress-left .progress-bar {
    animation: 0;
}

.progress-circle[data-percentage="20"] .progress-right .progress-bar {
    animation: loading-2 1.5s linear forwards;
}

.progress-circle[data-percentage="20"] .progress-left .progress-bar {
    animation: 0;
}

.progress-circle[data-percentage="30"] .progress-right .progress-bar {
    animation: loading-3 1.5s linear forwards;
}

.progress-circle[data-percentage="30"] .progress-left .progress-bar {
    animation: 0;
}

.progress-circle[data-percentage="40"] .progress-right .progress-bar {
    animation: loading-4 1.5s linear forwards;
}

.progress-circle[data-percentage="40"] .progress-left .progress-bar {
    animation: 0;
}

.progress-circle[data-percentage="50"] .progress-right .progress-bar {
    animation: loading-5 1.5s linear forwards;
}

.progress-circle[data-percentage="50"] .progress-left .progress-bar {
    animation: 0;
}

.progress-circle[data-percentage="60"] .progress-right .progress-bar {
    animation: loading-5 1.5s linear forwards;
}

.progress-circle[data-percentage="60"] .progress-left .progress-bar {
    animation: loading-1 1.5s linear forwards 1.5s;
}

.progress-circle[data-percentage="70"] .progress-right .progress-bar {
    animation: loading-5 1.5s linear forwards;
}

.progress-circle[data-percentage="70"] .progress-left .progress-bar {
    animation: loading-2 1.5s linear forwards 1.5s;
}

.progress-circle[data-percentage="80"] .progress-right .progress-bar {
    animation: loading-5 1.5s linear forwards;
}

.progress-circle[data-percentage="80"] .progress-left .progress-bar {
    animation: loading-3 1.5s linear forwards 1.5s;
}

.progress-circle[data-percentage="90"] .progress-right .progress-bar {
    animation: loading-5 1.5s linear forwards;
}

.progress-circle[data-percentage="90"] .progress-left .progress-bar {
    animation: loading-4 1.5s linear forwards 1.5s;
}

.progress-circle[data-percentage="100"] .progress-right .progress-bar {
    animation: loading-5 1.5s linear forwards;
}

.progress-circle[data-percentage="100"] .progress-left .progress-bar {
    animation: loading-5 1.5s linear forwards 1.5s;
}

@keyframes loading-1 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(36);
        transform: rotate(36deg);
    }
}

@keyframes loading-2 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(72);
        transform: rotate(72deg);
    }
}

@keyframes loading-3 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(108);
        transform: rotate(108deg);
    }
}

@keyframes loading-4 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(144);
        transform: rotate(144deg);
    }
}

@keyframes loading-5 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(180);
        transform: rotate(180deg);
    }
}

.progress-circle{
    margin-bottom: 1em;
}

@media (max-width: 375px) and (min-width: 320px){
    .catalog-thumbnail img{ width: 100% !important;}
    .width-set-list .list-body-content {
        padding:12px; 
        width: 100%;
    }
    .catlearnfooter {
        border-top: 1px solid #dfdfdf;
        text-align: center;
        margin: 0px -8px -22px -8px;
    }


}
@media (max-width: 640px) and (min-width: 320px){
    /*    .dis-content-text-courses{
            width: 12% !important;
        }*/
    .object_hover .string-limit-details, .panel-body .string-limit-details{
        height: 22px;
    }
    .rating-cls { margin-bottom: 5px; }
}
#request_modal_classroom p {
    color: #3d3d3d !important;
    margin: 10px 0px;
}
@media (max-width: 1366px) and (min-width: 1024px){
   /* .item .list-body-content {
        width: 71% !important;
    }*/
    .enroll-warp {
        width: 14%;
    }
    #objectListDiv{width: 95%;}
    .sidepanel .lo-card{width: 96%; padding: 10px;}
}
@media (max-width: 1025px) and (min-width: 1023px){
    .enroll-warp .info-c {
        height: 80px;
        float: left;
        padding: 24px 10px 24px 0px;
    }
    .item .list-body-content {
        width: 65% !important;
    }
    .enroll-warp {
        width: 15%;
    }
    .course-side-img img {
        width: 210px;
        height: 155px;
        float: left;
    }
    .not-allowed-pointer{
        margin-left: 0px !important;
    }
}
@media (max-width: 1023px) and (min-width: 768px){
    .item .list-body-content {
        width: 74% !important;
    }
    .string-limit, .string-limit-details {
        overflow: hidden;
        text-overflow: inherit;
        display: inline-block;
        max-width: 100%;
    }
    .course-side-img img {
        width: 202px;
        height: 147px;
        float: left;
    }
    .not-allowed-pointer{
        margin-left: 0px !important;
    }
}

.StringLimittemp{
    overflow: hidden;
    text-overflow: ellipsis;
    /*    width: auto;*/
    white-space: nowrap;
}
.mb10{
    margin-bottom: 10px;
}
.red{ color: #ff0000;}
.status_icon-2 { /*text-align: left;*/ margin-top: 42px; font-size: 13px;}
#session p{
    color: inherit !important;
}
.mb30{
    margin-bottom: 15px !important; 
}
.noteArea textarea {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    border: none;
    flex-direction: column;
}

@media (max-width:980px) {
    .list-body-content { padding: 0px 12px;}
    .list-body-content .imp-class {    /*display: flex!important; width: 183px;   float: left; */}
    .list-body-content .imp-class a { margin-right: 15px;}
    .list-body-content .imp-class button#request_button { margin-top: 0!important}
    .list-body-content .status_icon-2 { float: right; margin-top: 10px !important;}
    .list-body-content .status_icon-2 P { margin-bottom: 0;}
    .learningobject_box { padding: 15px 5px 1px 5px !important;}
}

@media screen and (max-width: 992px) and (min-width: 768px) {
    .info-c{  padding:1px 12px 1px 5px !important; vertical-align: top !important;
    }
    .item .info-c{  padding:1px 12px 1px 15px !important; vertical-align: top !important;
    }
    .list-body-content .status_icon-2 {
        margin-top: 0px !important;
    }
}
@media screen and (max-width: 640px) and (min-width: 320px) {
    .datewrapbox{ margin-bottom: 10px;}
    .status-time-wrap-2 .col-lg-4, .status-time-wrap-2 .col-md-4, .status-time-wrap-2 .col-sm-4{
        padding: 0px 0px !important;
    }
    #session-accordion1 .panel-title a {padding: 13px 68px 13px 10px !important;}

}

@media (max-width: 479px) and (min-width: 320px){
    
    .item {  margin: 0px 0px 0px 10px;     padding: 5px 0px 5px 26px;}
    .catalog-thumbnail img{ width: 100% !important; height: auto !important;}
    .width-set-list .list-body-content {
        padding:12px; 
        width: 100%;
    }
    .catlearnfooter {
        border-top: 1px solid #dfdfdf;
        text-align: center;
        margin: 0px -8px -22px -8px;
    }
    .list-body-content .status_icon-2 {
        margin-top: 0px !important;
    }
}



/* This for loop creates the    necessary css animation names 
 Due to the split circle of progress-left and progress right, we must use the animations on each side. 
*/
.progress-circle[data-percentage="10"] .progress-right .progress-bar {
    animation: loading-1 1.5s linear forwards;
}
.progress-circle[data-percentage="10"] .progress-left .progress-bar {
    animation: 0;
}
.progress-circle[data-percentage="20"] .progress-right .progress-bar {
    animation: loading-2 1.5s linear forwards;
}
.progress-circle[data-percentage="20"] .progress-left .progress-bar {
    animation: 0;
}
.progress-circle[data-percentage="30"] .progress-right .progress-bar {
    animation: loading-3 1.5s linear forwards;
}
.progress-circle[data-percentage="30"] .progress-left .progress-bar {
    animation: 0;
}
.progress-circle[data-percentage="40"] .progress-right .progress-bar {
    animation: loading-4 1.5s linear forwards;
}
.progress-circle[data-percentage="40"] .progress-left .progress-bar {
    animation: 0;
}
.progress-circle[data-percentage="50"] .progress-right .progress-bar {
    animation: loading-5 1.5s linear forwards;
}
.progress-circle[data-percentage="50"] .progress-left .progress-bar {
    animation: 0;
}
.progress-circle[data-percentage="60"] .progress-right .progress-bar {
    animation: loading-5 1.5s linear forwards;
}
.progress-circle[data-percentage="60"] .progress-left .progress-bar {
    animation: loading-1 1.5s linear forwards 1.5s;
}
.progress-circle[data-percentage="70"] .progress-right .progress-bar {
    animation: loading-5 1.5s linear forwards;
}
.progress-circle[data-percentage="70"] .progress-left .progress-bar {
    animation: loading-2 1.5s linear forwards 1.5s;
}
.progress-circle[data-percentage="80"] .progress-right .progress-bar {
    animation: loading-5 1.5s linear forwards;
}
.progress-circle[data-percentage="80"] .progress-left .progress-bar {
    animation: loading-3 1.5s linear forwards 1.5s;
}
.progress-circle[data-percentage="90"] .progress-right .progress-bar {
    animation: loading-5 1.5s linear forwards;
}
.progress-circle[data-percentage="90"] .progress-left .progress-bar {
    animation: loading-4 1.5s linear forwards 1.5s;
}
.progress-circle[data-percentage="100"] .progress-right .progress-bar {
    animation: loading-5 1.5s linear forwards;
}
.progress-circle[data-percentage="100"] .progress-left .progress-bar {
    animation: loading-5 1.5s linear forwards 1.5s;
}
@keyframes loading-1 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(36);
        transform: rotate(36deg);
    }
}
@keyframes loading-2 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(72);
        transform: rotate(72deg);
    }
}
@keyframes loading-3 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(108);
        transform: rotate(108deg);
    }
}
@keyframes loading-4 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(144);
        transform: rotate(144deg);
    }
}
@keyframes loading-5 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(180);
        transform: rotate(180deg);
    }
}
.progress-circle{
    margin-bottom: 1em;
}


.example {
    text-align: center;
    padding: 0em;
    display: inline-block;
    margin: -8px 15px 0px 0px;
    height: auto !important;
    float:right !important;
}
.pie {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50%;
    background: #dfdfdf;
    background-image: linear-gradient(to right, transparent 50%, #ff6600 0);
    position: relative;
    display: inline-block;
    margin: -5px 0px;
}
.pie::before {
    content: '';
    display: block;
    margin-left: 50%;
    height: 100%;
    border-radius: 0 100% 100% 0 / 50%;
    background-color: inherit;
    transform-origin: left;
}
.pie::after {
    content: attr(data-value);
    position: absolute;
    width: 80%;
    height: 80%;
    margin: auto;
    border-radius: 50%;
    background-color: #fff;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    text-align: center;
    font-size:11.5px;
    line-height: 48px;
}
.pie[data-value="0%"]:before {
    transform: rotate(0turn);
}
.pie[data-value="1%"]:before {
    transform: rotate(0.01turn);
}
.pie[data-value="2%"]:before {
    transform: rotate(0.02turn);
}
.pie[data-value="3%"]:before {
    transform: rotate(0.03turn);
}
.pie[data-value="4%"]:before {
    transform: rotate(0.04turn);
}
.pie[data-value="5%"]:before {
    transform: rotate(0.05turn);
}
.pie[data-value="6%"]:before {
    transform: rotate(0.06turn);
}
.pie[data-value="7%"]:before {
    transform: rotate(0.07turn);
}
.pie[data-value="8%"]:before {
    transform: rotate(0.08turn);
}
.pie[data-value="9%"]:before {
    transform: rotate(0.09turn);
}
.pie[data-value="10%"]:before {
    transform: rotate(0.1turn);
}
.pie[data-value="11%"]:before {
    transform: rotate(0.11turn);
}
.pie[data-value="12%"]:before {
    transform: rotate(0.12turn);
}
.pie[data-value="13%"]:before {
    transform: rotate(0.13turn);
}
.pie[data-value="14%"]:before {
    transform: rotate(0.14turn);
}
.pie[data-value="15%"]:before {
    transform: rotate(0.15turn);
}
.pie[data-value="16%"]:before {
    transform: rotate(0.16turn);
}
.pie[data-value="17%"]:before {
    transform: rotate(0.17turn);
}
.pie[data-value="18%"]:before {
    transform: rotate(0.18turn);
}
.pie[data-value="19%"]:before {
    transform: rotate(0.19turn);
}
.pie[data-value="20%"]:before {
    transform: rotate(0.2turn);
}
.pie[data-value="21%"]:before {
    transform: rotate(0.21turn);
}
.pie[data-value="22%"]:before {
    transform: rotate(0.22turn);
}
.pie[data-value="23%"]:before {
    transform: rotate(0.23turn);
}
.pie[data-value="24%"]:before {
    transform: rotate(0.24turn);
}
.pie[data-value="25%"]:before {
    transform: rotate(0.25turn);
}
.pie[data-value="26%"]:before {
    transform: rotate(0.26turn);
}
.pie[data-value="27%"]:before {
    transform: rotate(0.27turn);
}
.pie[data-value="28%"]:before {
    transform: rotate(0.28turn);
}
.pie[data-value="29%"]:before {
    transform: rotate(0.29turn);
}
.pie[data-value="30%"]:before {
    transform: rotate(0.3turn);
}
.pie[data-value="31%"]:before {
    transform: rotate(0.31turn);
}
.pie[data-value="32%"]:before {
    transform: rotate(0.32turn);
}
.pie[data-value="33%"]:before {
    transform: rotate(0.33turn);
}
.pie[data-value="34%"]:before {
    transform: rotate(0.34turn);
}
.pie[data-value="35%"]:before {
    transform: rotate(0.35turn);
}
.pie[data-value="36%"]:before {
    transform: rotate(0.36turn);
}
.pie[data-value="37%"]:before {
    transform: rotate(0.37turn);
}
.pie[data-value="38%"]:before {
    transform: rotate(0.38turn);
}
.pie[data-value="39%"]:before {
    transform: rotate(0.39turn);
}
.pie[data-value="40%"]:before {
    transform: rotate(0.4turn);
}
.pie[data-value="41%"]:before {
    transform: rotate(0.41turn);
}
.pie[data-value="42%"]:before {
    transform: rotate(0.42turn);
}
.pie[data-value="43%"]:before {
    transform: rotate(0.43turn);
}
.pie[data-value="44%"]:before {
    transform: rotate(0.44turn);
}
.pie[data-value="45%"]:before {
    transform: rotate(0.45turn);
}
.pie[data-value="46%"]:before {
    transform: rotate(0.46turn);
}
.pie[data-value="47%"]:before {
    transform: rotate(0.47turn);
}
.pie[data-value="48%"]:before {
    transform: rotate(0.48turn);
}
.pie[data-value="49%"]:before {
    transform: rotate(0.49turn);
}
.pie[data-value="50%"]:before {
    transform: rotate(0.5turn);
}
.pie[data-value="51%"]:before {
    background-color: #ff6600;
    transform: rotate(0.01turn);
}
.pie[data-value="52%"]:before {
    background-color: #ff6600;
    transform: rotate(0.02turn);
}
.pie[data-value="53%"]:before {
    background-color: #ff6600;
    transform: rotate(0.03turn);
}
.pie[data-value="54%"]:before {
    background-color: #ff6600;
    transform: rotate(0.04turn);
}
.pie[data-value="55%"]:before {
    background-color: #ff6600;
    transform: rotate(0.05turn);
}
.pie[data-value="56%"]:before {
    background-color: #ff6600;
    transform: rotate(0.06turn);
}
.pie[data-value="57%"]:before {
    background-color: #ff6600;
    transform: rotate(0.07turn);
}
.pie[data-value="58%"]:before {
    background-color: #ff6600;
    transform: rotate(0.08turn);
}
.pie[data-value="59%"]:before {
    background-color: #ff6600;
    transform: rotate(0.09turn);
}
.pie[data-value="60%"]:before {
    background-color: #ff6600;
    transform: rotate(0.1turn);
}
.pie[data-value="61%"]:before {
    background-color: #ff6600;
    transform: rotate(0.11turn);
}
.pie[data-value="62%"]:before {
    background-color: #ff6600;
    transform: rotate(0.12turn);
}
.pie[data-value="63%"]:before {
    background-color: #ff6600;
    transform: rotate(0.13turn);
}
.pie[data-value="64%"]:before {
    background-color: #ff6600;
    transform: rotate(0.14turn);
}
.pie[data-value="65%"]:before {
    background-color: #ff6600;
    transform: rotate(0.15turn);
}
.pie[data-value="66%"]:before {
    background-color: #ff6600;
    transform: rotate(0.16turn);
}
.pie[data-value="67%"]:before {
    background-color: #ff6600;
    transform: rotate(0.17turn);
}
.pie[data-value="68%"]:before {
    background-color: #ff6600;
    transform: rotate(0.18turn);
}
.pie[data-value="69%"]:before {
    background-color: #ff6600;
    transform: rotate(0.19turn);
}
.pie[data-value="70%"]:before {
    background-color: #ff6600;
    transform: rotate(0.2turn);
}
.pie[data-value="71%"]:before {
    background-color: #ff6600;
    transform: rotate(0.21turn);
}
.pie[data-value="72%"]:before {
    background-color: #ff6600;
    transform: rotate(0.22turn);
}
.pie[data-value="73%"]:before {
    background-color: #ff6600;
    transform: rotate(0.23turn);
}
.pie[data-value="74%"]:before {
    background-color: #ff6600;
    transform: rotate(0.24turn);
}
.pie[data-value="75%"]:before {
    background-color: #ff6600;
    transform: rotate(0.25turn);
}
.pie[data-value="76%"]:before {
    background-color: #ff6600;
    transform: rotate(0.26turn);
}
.pie[data-value="77%"]:before {
    background-color: #ff6600;
    transform: rotate(0.27turn);
}
.pie[data-value="78%"]:before {
    background-color: #ff6600;
    transform: rotate(0.28turn);
}
.pie[data-value="79%"]:before {
    background-color: #ff6600;
    transform: rotate(0.29turn);
}
.pie[data-value="80%"]:before {
    background-color: #ff6600;
    transform: rotate(0.3turn);
}
.pie[data-value="81%"]:before {
    background-color: #ff6600;
    transform: rotate(0.31turn);
}
.pie[data-value="82%"]:before {
    background-color: #ff6600;
    transform: rotate(0.32turn);
}
.pie[data-value="83%"]:before {
    background-color: #ff6600;
    transform: rotate(0.33turn);
}
.pie[data-value="84%"]:before {
    background-color: #ff6600;
    transform: rotate(0.34turn);
}
.pie[data-value="85%"]:before {
    background-color: #ff6600;
    transform: rotate(0.35turn);
}
.pie[data-value="86%"]:before {
    background-color: #ff6600;
    transform: rotate(0.36turn);
}
.pie[data-value="87%"]:before {
    background-color: #ff6600;
    transform: rotate(0.37turn);
}
.pie[data-value="88%"]:before {
    background-color: #ff6600;
    transform: rotate(0.38turn);
}
.pie[data-value="89%"]:before {
    background-color: #ff6600;
    transform: rotate(0.39turn);
}
.pie[data-value="90%"]:before {
    background-color: #ff6600;
    transform: rotate(0.4turn);
}
.pie[data-value="91%"]:before {
    background-color: #ff6600;
    transform: rotate(0.41turn);
}
.pie[data-value="92%"]:before {
    background-color: #ff6600;
    transform: rotate(0.42turn);
}
.pie[data-value="93%"]:before {
    background-color: #ff6600;
    transform: rotate(0.43turn);
}
.pie[data-value="94%"]:before {
    background-color: #ff6600;
    transform: rotate(0.44turn);
}
.pie[data-value="95%"]:before {
    background-color: #ff6600;
    transform: rotate(0.45turn);
}
.pie[data-value="96%"]:before {
    background-color: #ff6600;
    transform: rotate(0.46turn);
}
.pie[data-value="97%"]:before {
    background-color: #ff6600;
    transform: rotate(0.47turn);
}
.pie[data-value="98%"]:before {
    background-color: #ff6600;
    transform: rotate(0.48turn);
}
.pie[data-value="99%"]:before {
    background-color: #ff6600;
    transform: rotate(0.49turn);
}
.pie[data-value="100%"]:before {
    background-color: #ff6600;
    transform: rotate(0.5turn);
}
@media screen and (max-width: 767px){
    /*    .course-side-img img {
            width: 100%;
            height: 136px;
            float: left;
        }*/
}
@media screen and (max-width: 768px){
    .btn-blue {
        margin-bottom: 5px;
    }

    .height-auto {
        height: auto !important;
    }
    .list-body-content{
        border-right: 0px solid #eee !important; min-height: 108px;}

    .enroll-warp{border-left: 0px solid #eee !important;}
}
@media screen  and (max-width: 768px) and (min-width: 320px){
    .statustop{ margin-top: 3px; float: left; margin-right: 15px; font-size: 16px;}
    .example{float:left !important;}
    .dis-content-text{
        width: 92% !important;
    }
}
@media (max-width: 1920px) and (min-width: 1600px){
    /*    .course-side-img img { width: 100%; height: 215px; float: left; }*/

}
@media (max-width: 1600px) and (min-width: 1366px){
    .list-body-content { width: 74%; } 

}
.con10{ padding: 0px 10px;
        display: block;}
.tab-content-details {
    float: left;
    margin: 0px 3px 0px 0px;
}
.dis-content-text{
    width: 96% ;
}
.dis-content-text-courses{
    width: 93% ;
}

.object li .string-limit-details {
    height: auto !important;
}

.categorybg{ background: #fff;
             border: 1px solid #dfdfdf;}
.categorybg h5{ margin:6px 0px;}
.categorybg i { color: #666;
                background: #ccc;
                width: 26px;
                height: 26px;
                border-radius: 50%;
                line-height: 26px;
                text-align: center;
                margin-right: 5px;}
.glyphicon{background: none !important; }

.keywordsTag span{
    background: #f8f8f8;
    padding: 2px 5px;
    border: 1px solid #d4d4d4;
    color: #676767;
    font-size: 12px;
    margin: 1.5px 0px;
    display: inline-block;
}
.keywordsTag {
    color: #666;
    font-weight: 400;
}

.enroll-warp{border-left: 0px solid #eee !important;}           
.sessionbreaks i{width: 30px;
                 height: 30px;
                 background: #fff;
                 border: 1px solid #dfdfdf;
                 border-radius: 50%;
                 line-height: 26px;}
.sessionbreaks .grybox, .sessiontab .grybox{ background: #dfdfdf; padding: 4px 10px; word-break: break-word; }
.locbox{min-height: 200px;}
.sessionbreaks .borderbox{ margin-top: -30px;}

.sessiontab h4{ margin: 0px 0px 20px 0px;}
.sessiontab .nav-tabs > li a i {
    display: inline-block; width: auto; color: #666; margin-right: 5px;
    font-size: 18px;}
.sessiontab .nav-tabs > li {
    margin: 0px 1px 0px 0px;
    width: auto;
}
.sessiontab .nav-tabs li a {
    padding: 8px 8px;
    border: 1px solid #dfdfdf;
    border-bottom: 0px;
    position: relative;
    bottom: -1px;
    color: #666;
}
.sessiontab .nav-tabs > li {
    border-bottom: 0px solid #c6c8c8;
    background-color: #f6f6f6;
}
.sessiontab .nav-tabs > li.active > a, .sessiontab .nav-tabs > li.active > a:focus, .sessiontab .nav-tabs > li.active > a:hover{
    /*    color: #ff6600;*/
    border-bottom: 0px;
}
.panel-body hr{margin-top: 25px !important;}
.sessiontab .nav-tabs > li.active > a i {
    color: #ff6600;}
.sessiontab .nav-tabs{ border-bottom: 0px solid #dfdfdf;}
.sessiontab .tab-content{ border: 0px solid #dfdfdf; border-top:0px solid #fff; margin-bottom: 20px; }
.sessiontab .or, #session-details .or { margin: 5px 10px;}
.sessiontab .input-with-icon, #session-details .input-with-icon{
    /* causes absolute icon div to be positioned correctly */
    position: relative;
    width: 20rem;
    float: right;
    box-sizing: border-box;
}

.sessiontab .input-with-icon .form-control, #session-details .input-with-icon .form-control {
    padding-right: 3.65rem;
    border: 1px solid #dfdfdf;
    height: 33px;
    text-align: left;
    font-size: 14px;
    border-radius: 2px !important;
}
#session-details .modal-header {
    padding: 11px 15px 11px 15px;
}
.sessiontab .input-with-icon .icon, #session-details .input-with-icon .icon{
    position: absolute;
    /* These are set relative to the height of the input box to bound the box neatly inside. This is aesthetic to me but you may change the dimensions of course. */
    right: 0.5rem;
    top: 0.5rem;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.3rem;
    /* content in the icon div is centered, without bootstrap or font-awesome you may wish to add your own text in the span */
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}
.morecontent span {
    display: none;
}
.sessiontab .no-p-left{padding-left: 0px !important;}
#session-accordion1 .panel-title a { padding: 13px 10px;
                                     font-size: 14px;
                                     border-top: 1px solid #dfdfdf;
                                     border-bottom: 1px solid #dfdfdf;
                                     border-right: 1px solid #fff !important;
                                     margin: 0px 0px 0px 0px;
                                     border-left: 3px solid #fff; color: #666 !important;
                                     float: left;
                                     width: 100%; background: #fff; }
#session-accordion1 .panel-title a:hover { color: #666 !important;}
#session-accordion1 .panel-body{
    background: #fff !important; 
}
#session-accordion1 .object li {
    background: #fff;
    padding: 0px 0px !important;}

#accordion2 .panel-title a, #accordion2-option .panel-title a{ background: #f2f2f2; border-left: 0px solid #fff;
                                                               border-right: 0px solid #fff;
                                                               border-top: 0px solid #fff;
                                                               min-height: 34px;
                                                               padding: 10px 10px;
}
#accordion2 .collapsed, #accordion2-option .collapsed{ border-bottom: 1px solid #dfdfdf !important;}
.sessiontt{background: #fff;
           border: 0px solid #dfdfdf;
           padding: 8px 8px;
           display: inline-block;
           width: 100%;}

#accordion2 .panel-title a::after, #accordion2 .panel-title a.collapsed::after
{
    top: 8px;
    right: 18px;
    background: transparent;
    color: unset;
}
#accordion2 .panel-heading, #accordion2-option .panel-heading{

    height: 36px !important;
    line-height: 36px;
}
.panel-group {
    margin-bottom: 5px;
}
#accordion2 .panel {
    display: inline-block;
    width: 97%;
    margin: 6px 0px -5px 6px !important;
}
.sessiontt a{ 
    border: 1px solid #dfdfdf;
    padding: 6px 10px;
    width: 100%;
    color: #666;
    display: inline-block;
    background: #fff;}
.sessiontt a:hover, .sessiontt .active{ 
    border: 1px solid #f60;
    padding: 6px 10px;
    width: 100%;
    color: #fff !important;
    display: inline-block;
    background: #f60;}
#accordion2-option .sessiontt a{ 
    border: 1px solid #dfdfdf;
    padding: 6px 10px;
    width: 100%;
    color: #666;
    display: inline-block;
    background: #fff;}
#accordion2-option .sessiontt a:hover, #accordion2-option .sessiontt .active{ 
    border: 1px solid #666;
    padding: 6px 10px;
    width: 100%;
    color: #fff !important;
    display: inline-block;
    background: #666;}
#accordion2-option .panel {
    display: inline-block;
    width: 100%;
    margin: 0px 0px -4px 0px !important;
}
#accordion2-option .circle-icon, .accordarrow .circle-icon {
    background: #f60;
    width: 20px;
    height: 20px;
    text-align: center;
    border-radius: 50%;
    line-height: 20px; color:#fff;
}
#accordion2-option .panel-title a::after, #accordion2-option .panel-title a.collapsed::after 
{
    top: 8px;
    right: 25px;
}
#session-details .modal-body {
    position: relative;
    padding: 15px 15px;
    display: inline-block;
    width: 100%;
}
#accordion2-option {
    margin-bottom: -7px;
}
@media screen and (max-width: 768px) and (min-width: 320px) {
    .sessionbreaks .borderbox {
        border-left: 1px solid #dfdfdf;
        margin: -8px 10px 0px 10px;
        padding: 7px 0px 2px 0px;

    }
    .sessionbreaks .borderbox .col-md-3 {margin: 10px 0px 10px -30px;}
    .sessiontab .no-p-left{padding-left: 15px !important; margin: 1px 0px;}
}
@media screen and (max-width: 1024px) and (min-width: 992px) {
    .sessiontab .input-with-icon, #session-details .input-with-icon{
        width: 14rem;
    }
    .sessiontab .nav-tabs li a {padding: 8px 6px;}
}
.object li .mobdetails{
    background: none;
    color: #666;
}
.object li .mobdetails:hover {
    background: none;
    border: none !important;
    color: #666 !important;
    opacity: 0.8;
}
.session-description p {
    padding-top: 0px !important;
    margin-top: 0px !important;
}
@media (max-width: 1920px) and (min-width: 1900px){
  /*  .item .list-body-content {
        width: 78% !important;
    }*/
    .enroll-warp .info-c {
        padding: 24px 20px !important;
    }
    .enroll-warp .btn-blue {
        float: left;
    }
    .enroll-warp .btn_popup{ margin-left: 0px; }
}

@media (max-width: 1600px) and (min-width: 1200px){
    .enroll-warp .btn_popup{ margin-left: 0px; }
}
.modal-fullscreen .green{color: #197b11; background: transparent; padding: 0;
                         text-align: left; float: none;
                         width: auto;
                         height: auto;}

/* css for story 202 */
.modal-fullscreen {
    padding: 0 !important;
}
.modal-fullscreen .modal-dialog {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.modal-fullscreen .modal-content {
    height: 100vh;
    border: 0 none;
    border-radius: 0;
    box-shadow: none;
}
.modal-fullscreen .modal-header{ min-height: 50px; padding: 13px 15px 7px 10px;}
.btn-open-modal {
    margin-bottom: 0.5em;
}

.sidepanel  {
    width: 0;
    position: fixed;
    z-index: 1;
    height:  calc(100vh - 50px);
    /* top: 50px;*/
    left: -1px;
    background-color: #fff;
    box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2);
    border:1px solid #dfdfdf;
    overflow-x: hidden;
    overflow-y: hidden;
    transition: 0.5s;
    border-top: 0px;
}
.sidepanelright  {
    width: 0;
    position: fixed;
    z-index: 9999999 !important;
    height:  calc(100vh - 50px);
    top: 50px;
    right: -1px;
    background-color: #fff;
    box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2);
    border:1px solid #dfdfdf;
    overflow-x: hidden;
    overflow-y: hidden;
    transition: 0.5s;
    border-top: 0px;
}
#modbox{ transition: 0.5s;
         display: inline-block;
         width: 100%;
         height: calc(100% - 0px);}

.sidepanel .lo-card{padding: 15px; position: relative; float: left; width: 100%; white-space: normal;}
.sidepanel img{border:2px solid transparent;}
.sidepanel a:hover img, .sidepanel .on a img{ transition: 0.5s;}
.sidepanel .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
}
#objectListDiv{width: 95%; height: calc(100% - 70px); position: absolute; overflow-y: auto; overflow-x: hidden; background: #fff; padding-bottom: 40px;}
.openbtn, .closebtn {
    font-size: 14px;
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border:none;
    float: left;
    margin: 0px 15px 0px 0px;
    line-height: 19px;
}

.openbtn:hover, .closebtn:hover {
    opacity: 0.6;
}
.modal-fullscreen .modal-body{max-height: calc(100vh - 50px); }
.modal-open .modal-fullscreen.modal { overflow: hidden !important;}
.lo-card.on::before {
    content: "\f054";
    font-family: FontAwesome;
    display: inline-block;
    position: absolute;
    top: 75px;
    right: -1px;
}
.lo-card h4{font-size: 16px;
            margin: 10px 0 5px 0;
            color: #333 !important;
            line-height: 19px;
            font-weight: 600;}
.lo-card .inforgt{
    border-left: 1px solid #dfdfdf;
    min-height: 40px;
    margin: 10px 0 5px 0;
    line-height: 40px;
    padding-left:6px;
    font-size: 20px;}
    #learnig_object_tab .form-control.folder{height: 35px;  line-height: 18px;}
.imgicon{background: rgba(255,255,255,0.9);
         color: #fff;
         display: inline-block;
         width: 40px;
         height: 40px;
         position: absolute;
         left: 12px;
         text-align: center;
         font-size: 20px;
         line-height: 36px;
         border-radius: 50%;
         margin: 10px 0px 0px 10px;}
.modal-fullscreen .close{
    background: #757575;
    opacity: 1;
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin: 0px 0px 0px 0px !important;
    float: right;
    font-size: 14px !important;
    line-height: 19px;
}
.modal-fullscreen svg{
    width:32px;
    height: 32px;
    vertical-align: bottom;
    stroke-width: 1.2px;
    margin: 0px 5px -4px 0px;
    transform: scale(0.8);
}
.btn-margin{margin:-1px 12px 0px 0px; float: right;}
.imgicon{text-align: center;}
.imgicon svg{margin-top: 8px !important;
    stroke-width: 0.3px !important;
    transform: scale(0.7);
    fill: #101112 !important;
    stroke: #101112 !important;
    width: 35px !important;
    float: none !important;
    height: 35px !important;}
.modal-fullscreen .modal-header{border-bottom: 1px solid #eaeaea;}
.modal-fullscreen .modal-body{ padding: 0px !important; }
.modal-fullscreen .module-name, .modal-fullscreen .module-img{float: left; margin-top: 5px; margin-right: 10px;}
.lo-card .module-name{width: 100%;} 
.modal-fullscreen .form-control {
    position: relative;
    z-index: 2;
    float: left;
    width: 100%;
    margin-bottom: 0;
    border: 1px solid #dfdfdf;
    text-align: left;
    height: 35px;
}
.sessionbx .nav-tabs{  margin-bottom: 0px;   overflow-x: auto; height: 60px;
                       overflow-y: hidden;
                       display: -webkit-box;
                       display: -moz-box; }
.sessionbx .nav-tabs > a .active:after {
    content: "";
    position: absolute;
    bottom: 6px;
    left: 46%;
    border-width: 5px 5px 0px !important;
    border-style: solid;
    border-color: #c32033 transparent;
    display: block;
    width: 0;
} 
.sessionbx .nav-tabs > li {
    float: left;
    margin: 5px 5px 0px 0px;
    border-bottom: 0px;
    background: transparent;
    font-size: 16px;
    width: auto !important;
}
.sessionbx .nav-tabs > li a:hover, .sessionbx .nav-tabs > li.active > a, .sessionbx .nav-tabs > li.active > a:focus, .sessionbx .nav-tabs > li.active > a:hover {
    cursor: pointer;
    border-bottom-color: transparent;
}
.sessionbx .nav.nav-tabs li .loc_map_show{background: #fff; color: #101112;}
.sessionbx .nav.nav-tabs li a{ padding: 10px 15px; border-radius: 4px; /*color: #666; background: #fff;*/ margin:0px 10px 0px 0px !important; box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2); }
.sessionbx .nav-tabs > li a span { top: 1px;}
.subscriptionCard{background: #fff; padding: 10px;}
.marker {
    z-index: 1000;
    width: 45px;
    height: 45px;
    line-height: 45px;
    font-size: 22px;
    text-align: center;
}
.sessionbx .label{ font-size: 14px; color: #333; padding:0px;}
.timeline-icon {
    background: #fff ;
    border: 1px solid #f2f2f2;
}
.d-border{margin: -45px 0px 0px 0px;
          z-index: -1;
          position: inherit;}
.modal-fullscreen .popover{background: #fff;}
.overflow-hidden{overflow-y: hidden !important;}
.modal-fullscreen iframe{height: calc(100vh - 70px)!important; border: 0; text-align: left; }
.social-share a{
    text-decoration: none;
    background: #fff;
    margin: 0px 5px;
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 21px;
    border: 1px solid #dfdfdf;
    text-align: center;
}
.social-share .facebook{color: #3B5998; background:#fff;}
.social-share .twitter{color: #55ACEE; background:#fff;}
.social-share .linkedin{color: #007bb5; background:#fff;}
.social-share .mail{color: #dd4b39 !important; background:#fff;}
.social-share .fa-envelope{color: #dd4b39 !important;}

.social-share .facebook:hover{background: #3B5998; color:#fff; border: 1px solid #3B5998;}
.social-share .twitter:hover{background: #55ACEE; color:#fff; border: 1px solid #55ACEE;}
.social-share .linkedin:hover{background: #007bb5; color:#fff; border: 1px solid #007bb5;}
.social-share .mail:hover{background: #dd4b39; color:#fff !important; border: 1px solid #dd4b39;}
.social-share .mail:hover .fa-envelope{color: #fff !important;}

.sharesocial .copytext{border: 1px solid #dfdfdf; height: 40px; text-align: left;}
.sharesocial .modal-header {padding: 12px 15px 12px 15px;}
.sharesocial .modal-body {padding:20px;}
.sharesocial .modal-dialog{ width: 480px; }
.modal, .modal-open{ overflow-y:hidden !important;  }
.modal-header.modal-blue{ background: #fff;} /* this is added for mantis 5977 issue*/
.modal-fullscreen.in .modal-dialog{    transform: translateY(0%) !important;
                                       -webkit-transform: translateY(0%)!important; position: fixed !important; }
.ttwithclose {display: inline-block; width: 90%;}
#change-log-confirm-modal .btn-blue{padding:3.5px 9px; margin-bottom: 0px; }
#session_details_div .tab-content > .active{    float: left;}
.sessionborder hr{ border-top: 1px solid #d0d0d0; }
.sessionborder .d-border{ margin: -42px 0px 0px 0px; }
.sessionbx .tab-pane{padding: 10px 0px; background: transparent !important;}
#mySidepanel .thumb img{max-width: 309px;}
.popstar{
    background: #f89e23;
    color: #fff;
    width: 50px;
    height: 50px;
    font-size: 30px;
    border-radius: 50%;
    line-height: 46px;
    text-align: center;
    position: relative;
    top: -22px;
    z-index: 9999;
    display: inline-block;
    border: 3px solid #fff;
}
#rating_modal .modal-header{width: 100%;
                            background: transparent;
                            text-align: center;
                            padding: 0px !important;
                            float: left;
                            height: 15px; border: 0px;}
 #rating_modal .btn-blue{padding: 6px 9px !important;}
 #rating_modal .modal-sm{width: 400px !important;}
/*#rating_modal .ratingbtn{ margin-bottom: -15px; }*/
#rating_modal .modal-title{font-size: 20px;}
.rating-cls{ display: inline-block; }
.rating-cls .stars i{margin: 0px 1px;}
#rating_modal .modal-dialog{ top: 25%; }
#add_ratingID .fa.fa-star{ color: #fff;
                           -webkit-text-stroke-width: 2px;
                           -webkit-text-stroke-color: #f89e23;}
#add_ratingID .highlight .fa.fa-star, #add_ratingID .selected .fa.fa-star{ color: #f89e23;
                                                                           -webkit-text-stroke-width: 2px;
                                                                       -webkit-text-stroke-color: #f89e23;}
.launchtabs.nav-pills > li:last-child > a {border-right: 0px !important}
#mySidepanel .thumb img{width:380px; max-width: 380px;}
.launchtabs{ background:#212121; padding: 0px; width: 450px; }
.launchtabs.nav-pills > li.active > a, .launchtabs.nav-pills > li > a{
    border-top:0px; padding: 2px 10px 2px 10px !important; text-align: center; background: transparent !important; 
    color: #f9f9f9; font-size: 16px; font-weight: normal; border-right: 1px solid #939393;margin: 11px 0px;}
.launchtabs.nav-pills .removeborder{border-right: 0px !important;}
.launchtabs.nav-pills li.active::before {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: transparent;
    border-bottom-color: #fff;
    z-index: 9;
}
.launchtabs.nav-pills li.active::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: #fff;
}
.sidepanel .cke_top, .sidepanel .cke_bottom {
    background: #fff;
}
.sidepanel .cke_bottom{ display: none; }
.notedate{font-size: 13px; color: #333; font-weight: 600;}
.noteic a{ display: inline-block; color: #333; margin:0px 2px; width: 24px; height:24px; text-align: center; line-height: 23px; }
/*.noteic a:hover{ background: #dfdfdf; }*/
.bkmark li{
    border-bottom: 1px solid #dfdfdf;
    padding: 8px 4px 8px 6px;
    display: inline-block;
    width: 100%;
    border-left: 0px solid transparent;
    /*margin-bottom: -6px;*/
}
.bkmark .titlebk{
    font-size: 16px;
    margin: 2px 10px;
    display: inline-block;
}
.customscrollbox{ overflow: auto; position: absolute; height: calc(100% - 70px); width: 97%;}
.forum-wrap-pannel .course-side{ border: 1px solid #dfdfdf; padding: 10px 10px 0px 10px; }
.forum-wrap-pannel .activities {border:1px solid #dfdfdf; margin: 6px 3px; }
.forum-wrap-pannel .thumb-sm { width: 42px; margin: 0px 10px 10px 0px;}
.forum-wrap-pannel .event > footer {
    margin: 10px -15px 0;
    padding: 0px 18px 0px 20px;
    background-color: #fff;
    border: 1px solid #dfdfdf;
    border-bottom: 0px;
}
.listlearningobject .inforgt.moreInfo{right: unset !important; left: 10px !important;}
.forum-wrap-pannel .event .post-comments{ margin-bottom: 0px; }
.forum-wrap-pannel .post-comments .comment-body .form-control{ background: #f7f7f7; }
.forum-wrap-pannel .post-comments .avatar {  margin: 7px; width: 38px;}
.mylSides .jwplayer.jw-flag-aspect-mode{ height: calc(100% - 20px)!important; }
.lprefimage .learning-object{ max-width: 1600px; }
.lprefimage{overflow-y: auto; height: 100%;}
.modal-fullscreen .mylSides.active{ text-align: center; }
#session_details_section{ text-align: left; }
.ml-2 { margin-left: 5px; }

@media screen and (max-width: 768px){
    #checklist_form .table-responsive{border: auto !important;}
    .iframelaunch .boxfiles{ margin: 10.5% 8% !important; }
    .fancybox-opend{width: 90% !important; left: 15px !important;}
    .lprefimage .learning-object{ max-width: 100%; width: 100%; }
    .modal-fullscreen .mylSides.active{ top:0px; background:#eee;}
    #modbox{ top:0px; position: absolute; left: 0px;}
    #player.fScreen img{width: 100% !important;}
    .modal-fullscreen .modal-header .module-name{
        width: 38%;
        height: auto;
        font-size: 14px;
        margin: 5px 0px 0px 5px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    #checklist_form .table-responsive{border: auto;}
    .modal-fullscreen svg{transform: scale(0.7);}
    .openbtn, .closebtn{margin: 0px 5px 0px 0px;}
    .rightPartheader .mr5, .rightPartheader .mr5{ margin: 0px !important;}
    .modal-fullscreen .modal-header .custmBtnPrimary, .modal-fullscreen .modal-header .custmBtnDefault {padding: 5px 8px;}
    .frameoutmsg .boxdiv{width: 100% !important; margin: 10% 0% !important; text-align: center;}
    #mySidepanel .thumb img{ width: 100% !important; }
    .rating-mb{ margin: 10px 5px; width: 100%; }/*added for mantis-6377 issue*/
    #rating_modal .btn-blue, #rating_modal .btn-transperant-blue{ margin-bottom: 5px !important; padding:5px 12px !important;  }/*added for mantis-6349 issue*/
.learningobject_box .object li .mobdetails{margin:5px  6px 0px 0px !important; display: inline-block; }
.learningobject_box .object li{padding-right: 0px !important;}
.learningobject_box .panel-group{margin-right: 0px !important; margin-left: 0px !important;}
.filter-details-btn .btn{margin-bottom: 5px; padding: 5px 10px !important;}
.filter-details.row .col-xs-12.multiple{margin-bottom: 15px !important;}
}
.post-comments > li{  /*margin-bottom: 10px; */}
#discussion_forum_tab .replycommentcls {
    padding: 10px 10px 10px 40px !important;
}
/*#discussion_forum_tab .replySubcls{ padding: 0px 10px 0px 40px !important;}*/
#discussion_forum_tab .activities .event { margin-top: 0px; }
.frameoutmsg .boxdiv{width: calc(100% - 50%); margin: 15% 25%; text-align: center;}
.frameoutmsg h1{font-size: 18px; font-weight: 600;}
.img-comment{ padding: 5px;
              margin: 0px !important;
              width: 44px !important;
              border: 1px solid #dfdfdf; border-right: 0px;  }
.cke_top, .cke_bottom{ background: #fff; }
.enroll-warp button {  white-space: normal;}
.modal-fullscreen .custmBtnDefault.btn-margin-2{margin-right: 0px !important; padding: 6px 9px !important;}
.bookmark_object a i{font-size: 20px; margin: 2px 2px 0px 0px;}
@media screen and (min-width: 360px) and (max-width: 420px){
    /*
    * @Mantis: 
    * @Branch: ent_5_7_0
    * @Ticket: 9572 
    * @Author: Arjun Narale <arjun.narale@abaralms.com>
    * @Date: 04-05-2022 
    * @Resone: Removed !important css from sidepanel class. This cause a issue when open mobile browser.
    */
    .sidepanel{width: 100%; overflow-x: auto;}
    .launchtabs{ white-space: nowrap !important;
width: 450px !important;
overflow-x: auto !important;
display: inline-block;
position: relative;}
    .sidepanel .overflclass{overflow-x: auto; width: 100%; /*height: 60px;*/}
    #learnig_object_tab.tab-pane{padding: 0px !important;}
    #modbox{ word-wrap: break-word; }
}
.subscriptionCard .sessionDetails{margin-bottom: 0px !important;}
.imgicon{ z-index: 99 !important;}
.lo-card.on::before{right: 5px;}
/*css added by prashant*/
.folder_list{  height: calc(100% - 30px);
overflow: auto;
position: absolute;
width: 100%;
}
.folder_list #objectListDiv {
    width: 102% !important;
    height: calc(100% - 70px) !important;
    position: relative !important}

.mt12{margin-top: 12px}
.mt9{margin-top: 9px}
.mb0{margin-bottom: 0px}

.option-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  position: relative;
  top:0px;
  right: 0;
  bottom: 0;
  left: 0;
  height: 20px;
  width: 20px;
  transition: all 0.15s ease-out 0s;
  background: #fff;
  border: 2px solid #c8c8c8;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  margin-right: 0.5rem;
  outline: none;
  position: relative;
  z-index: 1000;
}
.option-input:hover {
  background: #fff;
}
.option-input:checked {
  background: #fff;
  border: none;
}
.option-input input[type=file]:focus, .option-input input[type=checkbox]:focus, .option-input input[type=radio]:focus{outline: none;}
.option-input[type=radio][disabled]{opacity: 0.5;}
.option-input:checked::before {
  width: 20px;
  height: 20px;
  display:flex;
  content: '';
  position: absolute;
  align-items:center;
  justify-content:center;
-webkit-mask:url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ctitle%3Echeck-circle%3C/title%3E%3Cpath d='M21 11.080v0.92c-0.001 2.485-1.009 4.733-2.64 6.362s-3.88 2.634-6.365 2.632-4.734-1.009-6.362-2.64-2.634-3.879-2.633-6.365 1.009-4.733 2.64-6.362 3.88-2.634 6.365-2.633c1.33 0.001 2.586 0.289 3.649 0.775 0.502 0.23 1.096 0.008 1.325-0.494s0.008-1.096-0.494-1.325c-1.327-0.606-2.866-0.955-4.479-0.956-3.037-0.002-5.789 1.229-7.78 3.217s-3.224 4.74-3.226 7.777 1.229 5.789 3.217 7.78 4.739 3.225 7.776 3.226 5.789-1.229 7.78-3.217 3.225-4.739 3.227-7.777v-0.92c0-0.552-0.448-1-1-1s-1 0.448-1 1zM21.293 3.293l-9.293 9.302-2.293-2.292c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414l3 3c0.391 0.391 1.024 0.39 1.415 0l10-10.010c0.39-0.391 0.39-1.024-0.001-1.414s-1.024-0.39-1.414 0.001z'%3E%3C/path%3E%3C/svg%3E%0A") no-repeat;
-mask:url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ctitle%3Echeck-circle%3C/title%3E%3Cpath d='M21 11.080v0.92c-0.001 2.485-1.009 4.733-2.64 6.362s-3.88 2.634-6.365 2.632-4.734-1.009-6.362-2.64-2.634-3.879-2.633-6.365 1.009-4.733 2.64-6.362 3.88-2.634 6.365-2.633c1.33 0.001 2.586 0.289 3.649 0.775 0.502 0.23 1.096 0.008 1.325-0.494s0.008-1.096-0.494-1.325c-1.327-0.606-2.866-0.955-4.479-0.956-3.037-0.002-5.789 1.229-7.78 3.217s-3.224 4.74-3.226 7.777 1.229 5.789 3.217 7.78 4.739 3.225 7.776 3.226 5.789-1.229 7.78-3.217 3.225-4.739 3.227-7.777v-0.92c0-0.552-0.448-1-1-1s-1 0.448-1 1zM21.293 3.293l-9.293 9.302-2.293-2.292c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414l3 3c0.391 0.391 1.024 0.39 1.415 0l10-10.010c0.39-0.391 0.39-1.024-0.001-1.414s-1.024-0.39-1.414 0.001z'%3E%3C/path%3E%3C/svg%3E%0A") no-repeat;
-webkit-mask-size:91%;
mask-size:91%;

}
.option-input:checked::after {
  -webkit-animation: click-wave 0.65s;
  -moz-animation: click-wave 0.65s;
  animation: click-wave 0.65s;
  background: #fff;
  content: '';
  display: block;
  position: relative;
  z-index: 100;
}
.option-input.radio {
  border-radius: 50%;
}
.option-input.radio::after {
  border-radius: 50%;
}
#checklist_form .form-control{border-radius: 2px;}
#checklist_form th{font-weight: 600;}
.ratingbox{min-width: 190px;}

#ask_the_expert_tab .filter-inpute-larg{   
 height: 38px !important;
    line-height: 23px !important;
    /*background: #fff;
    color: #666;*/}
    #ask_the_expert_tab .cke_top, #add_notes_tab .cke_top{width: 95.5% !important;}
    #ask_the_expert_tab .modal-note-sec svg{margin: 0px 5px 32px 5px !important;}
    #discussion_forum_tab .learningobject_box{padding: 3px 3px 3px 3px !important;}
    #closeforumside, #closetranscriptside{margin-top: 2px !important;}
    .prev_next_section svg{margin: 0px 0px 0px -4px !important;}
    li.bookmark_object.onbookmark  .module-img svg {  margin: -2px -1px !important;}
    #objectListDiv .togglelist svg{fill: #101112; margin: 2px 0px 0px 1px !important;}
      #objectListDiv .status-sec {
    text-align: left; padding-left: 0px; float: left;
}
.post-comments svg{width: 22px !important; height: 22px !important;}
.rightPartheader .fa-circle{display: inline-block;
    font-size: 6px;
    float: right;
    margin: 15px 15px 0px -5px;}
.lo-card .module-name .thumb{text-align: left ;}
@supports (-webkit-touch-callout: none) {
  /* CSS specific to iOS devices */
  .modal-title .fa, .rightPartheader .fa{margin-left: -6px !important;} 
}
.html_page_frame {    
    background: #fff;
    margin: 15px;
    width: calc(100% - 40px);
}
.html_page_frame .gjs-row{display: inline-block !important;}
.sessiontt a .fa-angle-right{  margin: 3px 15px 0px 0px !important;}