/*===============================
	GENERIC CSS
================================*/
body{background-color: #e9ebee;}
.content-wrapper{background-color: #e9ebee;}
.main-header .navbar .nav>li>a>.label{
    position: absolute;
    top: 9px;
    right: 7px;
    text-align: center;
    font-size: 9px;
    padding: 3px 2px;
    line-height: .9;
    width: 15px;
    border-radius: 50% !important;
}

/* Login Wrapper */
#ctu-login-wrapper .col-md-6{padding: 0;}
#ctu-login-wrapper .ctu-login-panel{background: transparent;border: none;box-shadow: none;margin-bottom: 0;}
#ctu-login-wrapper .ctu-table{display: table;width: 100%;height: 100vh;}
#ctu-login-wrapper .ctu-table-cell{display: table-cell;vertical-align: middle;}
#ctu-login-wrapper .ctu-login-box{width: 380px;margin: auto;}
#ctu-login-wrapper .ctu-logo{width: 150px;margin: auto auto 20px auto;}
#ctu-login-wrapper .ctu-login-body-panel{background: transparent;border: none;padding: 0;}
#ctu-login-wrapper .ctu-login{background: #fff;padding: 15px;}
#ctu-login-wrapper .ctu-register{background: #fff;padding: 15px;}
#ctu-login-wrapper label{font-weight: 400;font-size: 12px;}
#ctu-login-wrapper .ctu-login-form-control{border-radius: 3px;}
#ctu-login-wrapper .ctu-login-btn{border-radius: 3px;margin-bottom: 5px;transition: all 0.5s ease-in-out;}
#ctu-login-wrapper .checkbox label{padding-left: 0;}
#ctu-login-wrapper .icheckbox_square-blue{margin-right: 5px;}
#ctu-login-wrapper .ctu-login-peripheral{margin-top: 10px;}
#ctu-login-wrapper .checkbox{display: inline-block;margin-bottom: 0;margin-top: 0;}
#ctu-login-wrapper .login-forgot-pass{font-size: 12px;color: #0070d2;}
#ctu-login-wrapper .field-validation-error{font-size: 12px;}
#ctu-login-wrapper .ctu-login-footer-panel{background: transparent;padding: 30px 15px;}
#ctu-login-wrapper .signup{
    display: inline-block;
    border: 1px solid #D8DDE6;
    color: #0070d2;
    padding: 15px;
    background: #fff;
    border-radius: 3px;
    margin-left: 15px;
}
#ctu-login-wrapper .pb-login-right{
    position: fixed;
    background: url("/dist/img/background.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    width: 100%;
    height: 100%;
    opacity: 0.5;
}

/* Authentication Wrapper */
#ctu-authentication-wrapper{background: #fff;}
#ctu-authentication-wrapper .authentication-box{display: table;width: 100%;height: 100vh;}
#ctu-authentication-wrapper .authentication-table-cell{display: table-cell;vertical-align: middle;}
#ctu-authentication-wrapper .ctu-panel-heading{position: relative;}
#ctu-authentication-wrapper .ctu-heading-logo{position: absolute;top: 7px;right: 0;}
#ctu-authentication-wrapper .ctu-heading-logo img{width: 70px;}
#ctu-authentication-wrapper .authentication-login-box{width: 400px;margin: auto;}
#ctu-authentication-wrapper .authentication-register-box{width: 500px;margin: auto;}
#ctu-authentication-wrapper .authentication-register-box .ctu-panel-heading{padding: 10px 30px;}
#ctu-authentication-wrapper .authentication-register-box .ctu-heading-logo{right: 30px;}
#ctu-authentication-wrapper .authentication-register-box .ctu-register .modal{bottom: auto;}
#ctu-authentication-wrapper .authentication-login-box .ctu-login-panel{
    margin-bottom: 0;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
    padding: 35px 15px;
}
#ctu-authentication-wrapper .authentication-login-box .ctu-panel-heading h2{
    margin-top: 0;
    margin-bottom: 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #807979;
}
#ctu-authentication-wrapper .authentication-login-box .ctu-panel-heading h3{
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
}
#ctu-authentication-wrapper .authentication-login-box .ctu-panel-heading span{
    font-size: 12px;
    font-weight: 400;
    color: #505050;
    font-family: 'Montserrat', sans-serif;
}
#ctu-authentication-wrapper .authentication-login-box .thank-you-form p{
    font-size: 12px;
    font-weight: 400;
    color: #505050;
    font-family: 'Montserrat', sans-serif;
}
#ctu-authentication-wrapper .authentication-login-box .input-field{margin-bottom: 0;}
#ctu-authentication-wrapper .authentication-login-box .form-group{padding-bottom: 10px;margin-bottom: 10px;}
#ctu-authentication-wrapper .authentication-login-box .input-field label{
    font-size: .8rem;
    color: #9e9e9e;
    margin-bottom: 0;
    font-weight: 400;
}
#ctu-authentication-wrapper .authentication-login-box input[type="text"]:not(.browser-default):focus:not([readonly]),#ctu-authentication-wrapper .authentication-login-box input[type="password"]:not(.browser-default):focus:not([readonly]){border-bottom: 1px solid #4285f4;}
#ctu-authentication-wrapper .authentication-login-box input{font-size: 12px;}
#ctu-authentication-wrapper .validation-summary-errors{font-size: 12px;color: #e22b27;}
#ctu-authentication-wrapper .input-validation-error{border-bottom: 2px solid #e22b27;}
#ctu-authentication-wrapper .field-validation-error{font-size: 11px;color: #e22b27;}
#ctu-authentication-wrapper .ctu-login-peripheral .checkbox{display: inline-block;margin: 0;}
#ctu-authentication-wrapper .ctu-login-peripheral .checkbox .label{padding-left: 0;}
#ctu-authentication-wrapper .ctu-login-peripheral .login-forgot-pass{font-size: 12px;margin-top: 2px;}
#ctu-authentication-wrapper .ctu-form-buttons{margin-top: 20px;}
#ctu-authentication-wrapper .ctu-form-buttons h5{
    font-size: 12px;
    margin: 0;
    display: inline-block;
    margin-top: 12px;
}
#ctu-authentication-wrapper .ctu-form-buttons button{background: #4285f4;float: right;}
#ctu-authentication-wrapper .ctu-form-buttons button:hover,
#ctu-authentication-wrapper .ctu-form-buttons button:focus,
#ctu-authentication-wrapper .ctu-form-buttons button:visited{color: #fff;}

#ctu-authentication-wrapper .authentication-bg-wrapper{padding: 0;}
#ctu-authentication-wrapper .authentication-bg{
    background: url('/dist/img/background.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
}
#ctu-authentication-wrapper .overlay{
    background: rgba(255,255,255,0.5);
    height: 100vh;
}



/* Tools */
.tools{margin: -5px;}
.tools a{
    border-radius: 2px;
    color: #C5C5CA;
    float: left;
    padding: 10px;
    text-decoration: none;
    font-size: 11px;
}
.panel-timeline .tools{display: inline-block;}
.panel-timeline .tools a{display: table-cell;float: none;}

/* Refresher */
.refresh-block{
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,.8);
    -webkit-transition: all .05s ease;
    transition: all .05s ease;
    top: 0px;
    left: 0px;
    position: absolute;
    z-index: 1000;
    border-radius: 2px;
}
.refresh-block .refresh-loader{
    display: inline-block;
    position: absolute;
    text-align: center;
    top: 50%;
    left: 50%;
    margin-left: -16px;
    margin-top: -16px;
}
.refresh-block .refresh-loader i{
    display: inline-block;
    line-height: 32px;
    color: #000;
    font-size: 16px;
}

/* Carousel */
.carousel-indicators li{border-radius: 50% !important;}
.carousel-inner img{margin: auto;}

/* Slim Scroll */
.slimScrollDiv{height: auto !important;}
.inner-content-div{height: auto !important;}
.slimScrollBar{border-radius: 7px !important;width: 3px !important;}

/* Panel Ctu */
.panel-ctu{position: relative;}
.panel-ctu-heading{border-bottom: 1px solid #f3f3f3;}

/* Panel Medical Form */
.ctuDescription{margin: 10px 0px 20px;font-size: 12px;line-height: 18px;}
.ctuMedicalForm .table-responsive{margin-bottom: 0;}
.ctuMedicalForm .table{margin-bottom: 0;}
.ctuMedicalForm .table table td{vertical-align: middle;border: none;}
.ctuMedicalForm .table .form-control{
    position: relative;
    height: 35px;
    border-radius: 20px !important;
}
.ctuMedicalForm .table textarea{
    resize: none;
}
.ctuMedicalForm .table .btn{
    width: 100px;
    border-radius: 20px !important;
}

.panel-timelineComposer{border: 1px solid #dddfe2;}
.panel-timelineComposer-heading{
    background: #f6f7f9;
    border-bottom: 1px solid #dddfe2;
    border-radius: 2px 2px 0 0;
    padding-top: 5px;
    padding-bottom: 5px;
    font-weight: 600;
    font-size: 12px;
    position: relative;
}
.panel-timelineComposer-footer{
    padding-top: 8px;
    padding-bottom: 8px;
    border: none;
    background: transparent;
}
.panel-timelineComposer-body{padding-bottom: 0;}
.panel-timelineComposer-heading i{margin-right: 8px;}
.timelineArrow{
    border-bottom: 8px solid #e9ebee;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    bottom: 0px;
    font-size: 0;
    height: 0;
    left: 55px;
    line-height: 0;
    position: absolute;
    width: 0;
}
.timelineArrow::after{
    border-bottom: 8px solid #fff;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    content: '';
    left: -8px;
    position: absolute;
    top: 1px;
}
.timelineComposerTextArea{border-bottom: 1px solid #e9ebee;}
.timelineComposerTextArea .timelineMediaLeft img{width: 40px;height: 40px;border-radius: 50% !important;}
.timelineComposerTextArea .timelineMediaBody textarea{
    border: none;
    resize: none;
    overflow-y: hidden;
}

/* Post Button */
.post-btn{
    border: none;
    background: #3c8dbc;
    color: #fff;
    border-radius: 15px !important;
    width: 100px;
    transition: all 0.5s ease-in-out;
    font-weight: 600;
}
.post-btn:hover,
.post-btn:focus,
.post-btn:active{background: #5b86dc !important;color: #fff !important;}
.post-photo-btn{
    border: none;
    background: #efefef;
    color: #333;
    border-radius: 15px !important;
    width: 90px;
    transition: all 0.5s ease-in-out;
    font-weight: 600;
}
.post-file-btn{
    border: none;
    background: #efefef;
    color: #333;
    border-radius: 15px !important;
    width: 100px;
    transition: all 0.5s ease-in-out;
    font-weight: 600;
}

.panel-timeline .panel-timeline-heading .media-left img{width: 40px;height:40px;border-radius: 50% !important;object-fit: cover;}
.panel-timeline .panel-timeline-heading .media-body a{cursor: pointer;color: #3c8dbc;}
.panel-timeline .panel-timeline-heading .media-body .name{font-weight: 600;font-size: 15px;}
.panel-timeline .panel-timeline-heading .media-body h5{margin-top: 0;color: #616770;margin-bottom: 0;}
.panel-timeline .panel-timeline-heading .media-body .time{margin-bottom: 0;font-size: 12px;color: #616770;}
.panel-timeline-btn{display: flex;margin-top: 15px;border-top: 1px solid #efecec;border-bottom: 1px solid #efecec;}
.icon-btn{flex: 1 100%;text-align: center;}
.btn-link-icon{margin: 5px 0;}
.btn-link-icon a{display: block;padding: 8px 0;transition: all 0.3s ease-in-out;color: #616770;}
.btn-link-icon a:hover{background: rgba(29, 33, 41, .08);}
.status{padding: 10px 0;border-bottom: 1px solid #efecec;}

/*===============================
	TIMELINE COMMENT
================================*/
.timelineCommentWrapper{margin-top: 15px;}
.timelineCommentWrapper .media-comment .commentProfile{width: 35px;height: 35px;border-radius: 50% !important;}
.timelineCommentWrapper .commentContent{
    display: inline-block;
    padding: 5px 10px;
    background: #eff1f3;
    border-radius: 20px !important;
}
.timelineCommentWrapper .commentContent .commentName a{color: #3c8dbc;font-weight: 600;}
.timelineCommentWrapper .commentContent .commentText{font-size: 13px;word-break: break-all;}
.timelineCommentWrapper .commentDate{padding-left: 10px;}
.timelineCommentWrapper .commentDate span{font-size: 12px;}

.typeComment{margin-top: 10px;}
.typeComment img{width: 35px !important;height: 35px !important;border-radius: 50% !important;object-fit: cover;}
.typeComment .img-sm+.img-push{margin-left: 53px;}
.typeComment textarea.form-control{height: 30px;background: #f2f3f5;border-radius: 20px !important;box-sizing: border-box;resize: none;}

/*===============================
	TIMELINE ABOUT
================================*/
.timelineAbout .table{margin-bottom: 0;}
.timelineAbout .table table td{vertical-align: middle;border: none;}
.timelineAbout .table .form-control{
    position: relative;
    height: 35px;
    border-radius: 20px !important;
}
.timelineAbout .aboutFormEmail{background: transparent;border: none;}
.timelineAbout .panel-ctu{border: 1px solid #ced0d4;}
.timelineAbout .panel-ctu-heading{background: #f6f7f9;border-bottom: 1px solid #ced0d4;font-weight: 600;color: #1d2129;}
.timelineAbout .fa-user,
.timelineAbout .fa-users,
.timelineAbout .fa-sitemap,
.timelineAbout .fa-briefcase-medical,
.timelineAbout .fa-calendar-check,
.timelineAbout .fa-th,
.timelineAbout .fa-clipboard-list,
.timelineAbout .fa-cogs,
.timelineAbout .fa-pencil-alt{color: #adb3bc;margin-right: 10px;}
.timelineAbout .aboutBtn{
    border: none;
    background: #4267b2;
    color: #fff;
    width: 100px;
    border-radius: 15px !important;
    transition: all 0.5s ease-in-out;
    font-weight: 600;
}

/*===============================
	FOR APPROVAL
================================*/
.ctuApproval .nav-tabs{background: #fff;border: 0;box-shadow: 2px 2px 8px #ccc;margin-bottom: 20px;}
.ctuApproval .nav-tabs li{float: none;display: inline-block;margin-bottom: 0;border-right: 1px solid #efefef;}
.ctuApproval .nav-tabs li:last-child{border-right: 0;}
.ctuApproval .nav-tabs li i{font-size: 20px;}
.ctuApproval .nav-tabs li a{margin-right: 0;border: 0;}
.ctuApproval .nav-tabs li h5{margin-bottom: 0;}
.ctuApproval .nav-tabs li a:hover{background: transparent;border: 0;}
.ctuApproval .nav-tabs>li.active>a,
.ctuApproval .nav-tabs>li.active>a:focus,
.ctuApproval .nav-tabs>li.active>a:hover{
    border: 0;
}
.timelineApproval form select.form-control{
    height: 30px;
    font-size: 12px;
    border-radius: 20px !important;
    width: 300px;
}
.ctuFormInside{position: relative;}
.approvalButton{position: absolute;top: 0;left: 320px;}
.approvalButton input.btn,
.approvalButton .btn{border-radius: 20px !important;}

.ctuFormInside .timelineTable{margin-top: 20px;}

/*===============================
	SETUP
================================*/
.timelineSetup tbody .btn{border-radius: 20px !important;}
.ctuEditUserForm .form-group input[type="checkbox"]{display: block;}

/* Time Block Enlistment */
.timelineBlockEnlistment .ctuFormInside form{position: absolute;}
.timelineBlockEnlistment .ctuFormInside form select.form-control{display: inline-block;}
.timelineBlockEnlistment .ctuFormInside form .approvalButton{position: relative;left:0;top:-1px;display: inline-block;margin-left: 20px;}
#preregistration_filter input.form-control,
#Profile_Users_filter input.form-control{height: 30px;font-size: 12px;border-radius: 20px !important;}
#preregistration_filter label,
.dataTables_info,
.dataTables_paginate .pagination,
#Profile_Users_filter label{font-size: 12px;}
.dataTables_paginate .pagination{border-radius: 20px !important;}
.ctuEnlistment .ctuEnlistmentBtn{border-radius: 20px !important;width: 100px;}

/* Timeline Student */

.timelineButton{margin-top: -5px;}
.timelineButton a{border-radius: 20px !important;}
.timelineButton button{border-radius: 20px !important;}
.timelineSearchButton{display: block;margin-bottom: 10px;}
.timelineSearchButton select{height: 30px;display: inline-block;width: 200px;font-size: 12px;border-radius: 20px !important;}
.timelineSearchButton .btn-group-sm{display: inline-block;position: relative;top: -2px;}
.timelineSearchButton .btn-group-sm input{border-radius: 20px !important;}
.timelineSearchButton .searchButton input{
    border-top-left-radius: 20px !important;
    border-bottom-left-radius: 20px !important;
}
.timelineSearchButton .searchButton button{
    border-top-right-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
}
.dropdownForm{display: inline-block;}
.searchForm{display: inline;}
.timelineTable table{font-size: 12px;}
.timelineStudents .pagination{margin-top: 10px;margin-bottom: 0;font-size: 12px;}
.ctu-label{font-size: 12px;color: #505050;}
.panel-ctu-sub-title{
    padding: 10px 0;
    width: calc(100% + 30px);
    position: relative;
    left: -15px;
    top: -15px;
    background-color: #e7e9ea
}
.panel-ctu-sub-title h6{margin: 0;}
.studentInfoForm input.form-control,
.studentInfoForm select.form-control,
.ctuMedicalForm input.form-control,
.ctuMedicalForm select.form-control,
.ctuEnlistment select.form-control,
.ctuEnlistment input.form-control{
    height: 30px;
    font-size: 12px;
    border-radius: 20px !important;
}
#bootstrap-duallistbox-nonselected-list_enlisted,
#bootstrap-duallistbox-selected-list_enlisted{border-radius: 0 !important;}
.timelineModalForm input.form-control,
.timelineModalForm select.form-control{
    height: 30px;
    font-size: 12px;
    border-radius: 20px !important;
}
.timelineModalForm textarea.form-control,
.ctuMedicalForm textarea.form-control{
    height: 100px;
    font-size: 12px;
    resize: none;
}
.ctuMedicalForm .btn{border-radius: 20px !important;}
.studentInfoForm .spacer-top{margin-top: 20px;}
.ctu-save-btn-group input{
    border: none;
    background: #4267b2;
    color: #fff;
    width: 100px;
    border-radius: 15px !important;
    transition: all 0.5s ease-in-out;
    font-weight: 600;
}

#Medical__c-notes .panel-ctu-heading::before,
#Medical__c-notesModal .panel-ctu-heading::before{
    content: "\f481";
    font-family: "Font Awesome 5 Free";
    color: #adb3bc;
    margin-right: 10px;
    display: inline;
}
#Admission__c-notes .panel-ctu-heading::before,
#Admission__c-notesModal .panel-ctu-heading::before{
    content: "\f46d";
    font-family: "Font Awesome 5 Free";
    color: #adb3bc;
    margin-right: 10px;
    display: inline;
}
#Registrar__c-notes .panel-ctu-heading::before,
#Registrar__c-notesModal .panel-ctu-heading::before{
    content: "\f2b9";
    font-family: "Font Awesome 5 Free";
    color: #adb3bc;
    margin-right: 10px;
    display: inline;
}

/*===============================
	TIMELINE TOP SECTION
================================*/
.timelineTopSection{position: relative;border:1px solid #d3d6db;margin-bottom: 15px;}
.timelineTopSection .coverPhoto img{height: 315px;width: 100%;object-fit: cover;}
.timelineTopSection .coverPhoto .updateCover{position: absolute;top: 20px;left: 20px;}
.timelineTopSection .coverPhoto .updateBtn{
    background: rgba(0,0,0,0.8);
    color: #ffffff;
    border: 1px solid #fff;
    padding: 5px 12px;
    display: inline-block;
    box-shadow: 0 0 6px rgba(0, 0, 0, .6);
    border-radius: 2px;
    transition: all 0.5s ease-in-out;
    cursor: pointer;
    opacity: 0;
}
.hideHover{
    display: inherit;
    margin-top: -26px;
    margin-left: 13px;
    transition: all 0.5s ease-in-out;
    color: #c1c1c1;
}
.timelineTopSection .coverPhoto:hover .hideHover{opacity: 0;display: none;}
.timelineTopSection .coverPhoto:hover .updateBtn{opacity: 1;}
.timelineTopSection .coverPhoto .updateBtn .fa-camera{margin-right: 10px;color: #c1c1c1;}
.timelineTopSection .coverPhoto .updateBtn .updateText{font-size: 13px;}
.profileName{position: absolute;bottom: 50px;left: 0;padding-left: 205px;}
.profileName h2{margin: 0;color: #fff;font-weight: 600;text-shadow: 0 0 3px rgba(0,0,0,.8);text-transform: capitalize;}
.profileName-showMobile{display: none;}

#timelineFixedScroll{
    box-sizing:border-box;
	-moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    width: auto !important;
    /* padding-bottom: 55px; */
}

/*===============================
	TIMELINE HEADLINE
================================*/
.timelineHeadline{padding-left: 215px;background: #fff;}
.timelineHeadline .coverProfile{position: absolute;bottom: 15px;left: 20px;}
.timelineHeadline .coverProfile img{width: 160px;height: 160px;object-fit: cover;}
.timelineHeadline .coverImage{
    position: relative;
    border: 4px solid #fff;
    border-radius: 2px !important;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .07);
}
.timelineHeadline .coverImage .profileBtn{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 8px;
    color: #fff;
    background: rgba(0, 0, 0, .6);
    transition: all 0.5s ease-in-out;
    opacity: 0;
}
.timelineHeadline .coverImage .profileBtn .fa-camera{margin-right: 10px;color: #c1c1c1;}
.timelineHeadline .coverImage .profileBtn .profileText{font-size: 12px;}
.timelineHeadline .coverImage:hover .profileBtn{opacity: 1;}

.timelineHeadline .timelineNav ul{margin-bottom: 0;}
.timelineHeadline .timelineNav ul li{padding: 0;border-left: 1px solid #d3d6db;margin-left: -4px;}
.timelineHeadline .timelineNav ul li a{
    display: inline-block;
    padding: 10px 20px;
    font-size: 15px;
    font-weight: 600;
    color: #365899;
    transition: all 0.5s ease-in-out;
}
.timelineHeadline .timelineNav ul li a:hover{background: #f6f7f9;}
.timelineHeadline .timelineNav ul li:last-child{border-right: 1px solid #d3d6db;}

/*===============================
	GROUPS IMAGE SECTION
================================*/
.groupImage{margin-bottom: 0;margin-left: 0;}
.groupImage .groupImageList{padding: 0;}
.groupImage .groupImageList img{width: 101px;height: 101px;object-fit: cover;}
.sidebar-collapse .groupImage{text-align: center;}

/*===============================
	MENU HEADER MESSAGE
================================*/
.dropdown-menu .header{padding: 0 !important;}
.message-header{padding: 15px 10px;}
.message-header h5{margin: 0;display: inline-block;font-size: 13px;color: #797979;font-weight: 600;}
.message-header .view-all{
    float: right;
    background: #3c8dbc;
    padding: 2px 10px;
    border-radius: 20px !important;
    color: #fff;
    font-size: 12px;
}
.ctu-message-media img{
    width: 30px;
    height: 30px;
    border-radius: 50% !important;
}
.ctu-message-media .ctu-message-body{padding-bottom: 0;}
.ctu-message-media .ctu-message-body h5{
    margin-top: 0;
    margin-bottom: 4px;
    font-weight: 700;
    color: #333;
    font-size: 13px;
}
.ctu-message-media .ctu-message-body p{
    margin-bottom: 0;
    font-size: 12px;
    color: #afadad;
    word-wrap: break-word;
    white-space: pre-wrap;
}
.ctu-message-media .ctu-message-body .time{
    font-size: 12px;
    font-weight: 300;
    color: #afadad;
    margin-left: 10px;
}
.ctu-user-menu .user-image{border-radius: 50% !important;}
.ctuMenuMessages li a{padding: 15px 10px !important;}

/* Side Bar */
.main-sidebar{background: #f5f5f5 !important;}
.sidebarUser{padding: 20px 0 0px 0;}
.sidebarUser .image{display: inline-block;position: relative;margin-bottom: 10px;}
.sidebarUser .image::after{
    content: "";
    position: absolute;
    right: 10px;
    bottom: 7px;
    background: rgb(66, 183, 42);
    width: 10px;
    height: 10px;
    border-radius: 50% !important;
}
.sidebarUser .image img{width: 88px;height: 88px;border-radius: 50% !important;object-fit: cover;}
.sidebarUser p{margin-bottom: 0;}
.sidebarUser .userName{font-weight: 600;}
.sidebarUser .userCourse{font-size: 12px;}
.userBtn{margin-top: 10px;}
.userBtn ul{margin-bottom: 0;}
.userBtn a{
    display: table;
    width: 35px;
    height: 35px;
    background: #eaeaea;
    border-radius: 50% !important;
}
.userBtn .icon{
    position: relative;
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
    text-align: center;
}
.userBtn .icon i{font-size: 14px;color: #b9b9b9;}
.ctu-SideBarForm{border: none !important;margin: 0 !important;padding: 10px 15px 15px;}
.ctu-SideBarForm .btn{
    background: #eaeaea !important;
    border-top-right-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
}
.ctu-SideBarForm input[type="text"]{
    background: #eaeaea !important;
    border-top-left-radius: 20px !important;
    border-bottom-left-radius: 20px !important;
    font-size: 12px;
}
.ctu-sidebarMenu .header{background: #eaeaea !important;padding: 10px 15px !important;}
/* .ctu-sidebarMenu li{border-bottom: 1px solid #eaeaea;} */
.ctu-sidebarMenu li a{padding: 10px 5px !important;}
.ctu-sidebarMenu li i{width: 30px !important;text-align: center;}
.ctu-sidebarMenu li.active a{color: #444444;font-weight: 500;}
.sidebar-collapse .sidebarUser .image img{width: 40px;height: 40px;}
.sidebar-collapse .sidebarUser .image::after{right: 0;bottom: 0px;}
.sidebar-collapse .sidebarUser .userName,
.sidebar-collapse .sidebarUser .userCourse,
.sidebar-collapse .sidebarUser .userBtn{display: none;}

/* User Header */
.ctuUserHeader{padding: 15px;border-bottom: 1px solid #f7f7f7;}
.ctuUserHeader img{width: 40px;height: 40px;border-radius: 50% !important;}
.ctuUserHeader .media-body{padding: 0;}
.ctuUserHeader .ctuUserName{
    margin-top: 0;
    margin-bottom: 0px;
    color: #515365;
    font-weight: 600;
    font-size: 14px;
}
.ctuUserHeader .ctuUserCourse{
    margin-top: 0px;
    margin-bottom: 0;
    color: rgba(138, 138, 138, 0.7);
    font-size: 14px;
    text-transform: uppercase;
}
.ctuUserMenu a{padding: 10px 15px !important;}
.ctuUserMenu i{width: 20px;text-align: center;}
.ctuUserMenu a:hover,
.ctuUserMenu a:focus,
.ctuUserMenu a:visited{background-color: #f7f7f8 !important;}
.ctuUserMenu .fa-cog,
.ctuUserMenu .fa-user{font-size: 18px;}
.ctuUserMenu .fa-envelope{font-size: 15px;}
.ctuUserMenu .fa-power-off{font-size: 17px;}
.ctuUserMenu .badge{border-radius: 50% !important;background: #3c8dbc !important;}

/* Control SideBar */
.nav-tabs.nav-justified>.active>a, .nav-tabs.nav-justified>.active>a:focus, .nav-tabs.nav-justified>.active>a:hover{border: 0px;}
.ctuControlSideBar{right: -300px;width: 250px;background: #f5f5f5 !important;}
.quickView .quickView-tabs{border-bottom: 1px solid #e9eaec !important;}
.quickView .quickView-tabs li a{padding: 15px 15px !important;border:0px;color: #8a8a8a;font-weight: 600;}
.quickView-tabs>.active>a{border-bottom: 2px solid #3c8dbc !important;background: transparent !important;}
.quickView-tabs>.active>a,
.quickView-tabs>.active>a:focus,
.quickView-tabs>.active>a:hover{border: 0;background: transparent !important;color: #515365;}
.quickViewChat{padding: 15px 0;}
.quickViewChat .chatUserList .chatTitle{margin: 0;padding: 15px 15px;text-transform: uppercase;font-weight: 600;}
.chatUserList .media-list{margin-bottom: 0;}
.chatUserList .media-list li{margin-top: 0;}
.chatUserList .media-list li a{display: inline-block;padding: 15px;transition: all 0.3s ease-in-out;}
.chatUserList .media-list li a:hover{background: #eee;}
.chatUserList .chatImg{position: relative;}
.chatUserList .chatImg .ctu-status{
    right: 0;
    bottom: 0;
    position: absolute;
    top: auto;
}
.ctu-status{
    width: 10px;
    height: 10px;
    background-color: #ffffff;
    border-radius: 50px !important;
    border: 3px solid;
    border-color: #c0c3c9;
    display: inline-block;
}
.ctu-status.online{border-color: rgb(66, 183, 42);}
.ctu-status.away{border-color: #fecd2f;}
.ctu-status.busy{border-color: #fd3259;}
.chatUserList .chatImg img{width: 40px;height: 40px;border-radius: 50% !important;object-fit: cover;}
.chatUserList .chatName{margin-bottom: 0;color: #515365;font-weight: 600;}
.chatUserList .chatText{margin-bottom: 0;color: rgba(138, 138, 138, 0.7);font-weight: 500;}

.activityUserList .media-list{margin-bottom: 0;}
.activityUserList .media-list li{margin-top: 0;}
.activityUserList .media-list li a{display: inline-block;padding: 15px;transition: all 0.3s ease-in-out;}
.activityUserList .media-list li a:hover{background: #eee;}
.activityUserList .chatImg img{width: 40px;height: 40px;border-radius: 50% !important;object-fit: cover;}
.activityUserList .chatName{margin-bottom: 0;color: #515365;font-weight: 600;}
.activityUserList .chatText{margin-bottom: 0;color: rgba(138, 138, 138, 0.7);font-weight: 500;font-size: 13px;}
.activityUserList .chatDate{margin-bottom: 0;color: rgba(138, 138, 138, 0.7);font-weight: 500;font-size: 12px;}
.ctuControlSideBar::-webkit-scrollbar{width:3px;}
.ctuControlSideBar::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 2px rgba(234,234,234,1);-webkit-border-radius:0px;border-radius:0px;}
.ctuControlSideBar::-webkit-scrollbar-thumb{-webkit-border-radius:0px;border-radius:0px;background:rgba(234,234,234,1);-webkit-box-shadow:inset 0 0 2px rgba(234,234,234,1);}
.ctuControlSideBar::-webkit-scrollbar-thumb:window-inactive{background:rgba(234,234,234,1);}

/* Enrollment Process */
.ctuEnrollmentProcess .timeline{margin-bottom: 0;}
.ctuEnrollmentProcess .timeline li:last-child{margin-bottom: 0;}
.ctuEnrollmentProcess .timeline-header{font-size: 14px !important;}
.ctuEnrollmentProcess .timeline-body{font-size: 12px;}
.ctuEnrollmentProcess .timeline-footer .btn{border-radius: 20px !important;}
.ctuEnrollmentProcess .timeline>li>.fa{border-radius: 50% !important;}
.ctuEnrollmentProcess .timeline:before{bottom: 10px;}


/*===============================
	CHAT BOX
================================*/
#chat-sidebar .chatTitle h4{
    margin: 0;
    font-size: 14px;
    text-transform: uppercase;
    text-align: center;
    padding: 15px;
    background: #e4e4e4;
    font-weight: 700;
}
#sidebar-user-box{
    padding: 10px;
    cursor: pointer;
    position: relative;
    transition: all 0.5s ease-in-out;
    border-bottom: 1px solid #efefef;
    margin-top: 0px;
}
#sidebar-user-box:hover{
    background: #efefef;
    border-bottom: 1px solid #efefef;
}
#sidebar-user-box img{
    width: 30px;
    height: 30px;
    border-radius: 50% !important;
}
#status{
    background: rgb(66, 183, 42);
    border-radius: 50% !important;
    height: 6px;
    width: 6px;
    position: absolute;
    right: 10px;
    top: 25px;
}
.chatStatus{
    background: rgb(66, 183, 42);
    height: 6px;
    width: 6px;
    position: absolute;
    top: 11px;
    left: 6px;
    border-radius: 50% !important;
}

.msg_box{
	position:fixed;
	bottom:-5px;
	width:250px;
	background:white;
	border-radius:5px 5px 0px 0px !important;
}

.msg_head{	
	background:#3c8dbc;
	color:white;
	padding:5px 8px 5px 15px;
	cursor:pointer;
    border-radius:5px 5px 0px 0px !important;
    font-size: 13px;
}

.msg_body{
	background:white;
	height:250px !important;
	font-size:12px;
	padding:15px;
	overflow:auto;
    overflow-x: hidden;
    border-left: 1px solid #efefef;
    border-right: 1px solid #efefef;
}
.msg_input{
	width:100%;
	height: 40px;
	border: 1px solid white;
	border-top:1px solid #DDDDDD;
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box;   
    box-sizing: border-box;
    resize: none;
    padding: 8px;
    font-size: 12px;
}
.close{
	float:right;
    cursor:pointer;
    font-size: 16px;
}
.minimize{
	float:right;
	cursor:pointer;
	padding-right:5px;
	
}

.msg-left{
	position:relative;
	background:#f1f0f0;
	padding:5px 10px;
	min-height:10px;
	margin-bottom:5px;
	margin-right:10px;
	border-radius:20px !important;
    word-break: break-all;
    display: table;
}
.msg-bubble{
    display: inline-block;
    width: 100%;
}
.msg-right{
	background:#3578e5;
	padding:5px 10px;
	min-height:15px;
	position:relative;
	margin-left:10px;
	border-radius:20px !important;
    word-break: break-all;
    color: #fff;
    float: right;
}
.msg_box textarea:focus{outline: none;}


/* Post Loader */
#loadingDiv{
    zoom:1;/* Increase this for a bigger symbole*/
    display:block;
    width:16px;
    height:16px;
    margin:10px auto;
    text-align: center;
    animation: wait .80s steps(1, start) infinite;
    background: linear-gradient(0deg, #f4f5fa 1px, transparent 0, transparent 8px, #f4f5fa 8px),   /* 6  */
                linear-gradient(90deg, #f4f5fa 1px, #f6f9fb 0, #f6f9fb 3px, #f4f5fa 3px),
      
                linear-gradient(0deg, #ececf5 1px, transparent 0, transparent 8px, #ececf5 8px),   /* 5  */
                linear-gradient(90deg, #ececf5 1px, #f2f3f9 0, #f2f3f9 3px, #ececf5 3px),
      
                linear-gradient(0deg, #e7eaf4 1px, transparent 0, transparent 8px, #e7eaf4 8px),   /* 4  */
                linear-gradient(90deg, #e7eaf4 1px, #eef1f8 0, #eef1f8 3px, #e7eaf4 3px),
      
                linear-gradient(0deg, #b9bedd 1px, transparent 0, transparent 10px, #b9bedd 10px), /* 3  */
                linear-gradient(90deg, #b9bedd 1px, #d0d5e8 0, #d0d5e8 3px, #b9bedd 3px),
                
                linear-gradient(0deg, #9fa6d2 1px, transparent 0, transparent 15px, #9fa6d2 15px), /* 2  */
                linear-gradient(90deg, #9fa6d2 1px, #c0c5e1 0, #c0c5e1 3px, #9fa6d2 3px),
                
                linear-gradient(0deg, #8490c6 1px, transparent 0, transparent 15px, #8490c6 15px), /* 1  */
                linear-gradient(90deg, #8490c6 1px, #aeb5da 0, #aeb5da 3px, #8490c6 3px);  
    background-repeat: no-repeat;
    background-size: 4px 9px,   /* 6 */
                     4px 9px,
                     4px 9px,   /* 5 */
                     4px 9px,
                     4px 9px,   /* 4 */
                     4px 9px,
                     4px 11px,  /* 3 */
                     4px 11px,
                     4px 16px,  /* 2 */
                     4px 16px,
                     4px 16px,  /* 1 */
                     4px 16px;
    background-position:-4px 3px, -4px 3px, -4px 3px, -4px 3px, -4px 3px, -4px 3px, -4px 2px, -4px 2px, -4px 0, -4px 0, -4px 0, -4px 0;
  }
  @keyframes wait{
    12.5%{
      background-position:   -4px,  /* 6 */
                             -4px,
                             -4px,  /* 5 */
                             -4px,
                             -4px,  /* 4 */
                             -4px,
                             -4px,  /* 3 */
                             -4px,
                             -4px,  /* 2 */
                             -4px,
                                0 ,  /* 1 */
                                0 ;
    }
    25%{
      background-position: -4px,  /* 6 */
                             -4px,
                             -4px,  /* 5 */
                             -4px,
                             -4px,  /* 4 */
                             -4px,
                             -4px,  /* 3 */
                             -4px,
                                0,  /* 2 */
                                0,
                              6px,  /* 1 */
                              6px;
    }
    37.5%{
      background-position: -4px,  /* 6 */
                             -4px,
                             -4px,  /* 5 */
                             -4px,
                             -4px,  /* 4 */
                             -4px,
                                 0,  /* 3 */
                                 0,
                               6px,  /* 2 */
                               6px,
                              12px,  /* 1 */
                              12px;
    }
    50%{
      background-position: -4px,  /* 6 */
                             -4px,
                             -4px,  /* 5 */
                             -4px,
                                 0,  /* 4 */
                                 0,
                               6px,  /* 3 */
                               6px,
                              12px,  /* 2 */
                              12px,
                              -4px,  /* 1 */
                              -4px;
    }
    62.5%{
      background-position: -4px,  /* 6 */
                             -4px,
        
                                 0,  /* 5 */
                                 0,
                     
                               6px,  /* 4 */
                               6px,
                             
                              12px,  /* 3 */
                              12px,
        
                              -4px,  /* 2 */
                              -4px,
        
                              -4px,  /* 1 */
                              -4px;
    }
    75%{
      background-position:     0,  /* 6 */
                                 0,
        
                               6px,  /* 5 */
                               6px,
                     
                              12px,  /* 4 */
                              12px,
                             
                              -4px,  /* 3 */
                              -4px,
        
                              -4px,  /* 2 */
                              -4px,
        
                              -4px,  /* 1 */
                              -4px;
    }
    87.5%{
      background-position:   6px,  /* 6 */
                               6px,
        
                              12px,  /* 5 */
                              12px,
                     
                              -4px,  /* 4 */
                              -4px,
                             
                              -4px,  /* 3 */
                              -4px,
        
                              -4px,  /* 2 */
                              -4px,
        
                              -4px,  /* 1 */
                              -4px;
    }
    100%{
      background-position:    12px,  /* 6 */
                              12px,
        
                              -4px,  /* 5 */
                              -4px,
                     
                              -4px,  /* 4 */
                              -4px,
                             
                              -4px,  /* 3 */
                              -4px,
        
                              -4px,  /* 2 */
                              -4px,
        
                              -4px,  /* 1 */
                              -4px;
    }
  }