@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-Black.woff2") format("woff2"), url("../fonts/Poppins-Black.woff") format("woff"); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins"; src: url("../fonts/Poppins-BlackItalic.woff2") format("woff2"), url("../fonts/Poppins-BlackItalic.woff") format("woff"); font-weight: 900; font-style: italic; font-display: swap; } @font-face { font-family: "Poppins"; src: url("../fonts/Poppins-Bold.woff2") format("woff2"), url("../fonts/Poppins-Bold.woff") format("woff"); font-weight: bold; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins"; src: url("../fonts/Poppins-BoldItalic.woff2") format("woff2"), url("../fonts/Poppins-BoldItalic.woff") format("woff"); font-weight: bold; font-style: italic; font-display: swap; } @font-face { font-family: "Poppins"; src: url("../fonts/Poppins-ExtraBoldItalic.woff2") format("woff2"), url("../fonts/Poppins-ExtraBoldItalic.woff") format("woff"); font-weight: bold; font-style: italic; font-display: swap; } @font-face { font-family: "Poppins"; src: url("../fonts/Poppins-ExtraLight.woff2") format("woff2"), url("../fonts/Poppins-ExtraLight.woff") format("woff"); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins"; src: url("../fonts/Poppins-ExtraBold.woff2") format("woff2"), url("../fonts/Poppins-ExtraBold.woff") format("woff"); font-weight: bold; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins"; src: url("../fonts/Poppins-LightItalic.woff2") format("woff2"), url("../fonts/Poppins-LightItalic.woff") format("woff"); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: "Poppins"; src: url("../fonts/Poppins-Light.woff2") format("woff2"), url("../fonts/Poppins-Light.woff") format("woff"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins"; src: url("../fonts/Poppins-ExtraLightItalic.woff2") format("woff2"), url("../fonts/Poppins-ExtraLightItalic.woff") format("woff"); font-weight: 200; font-style: italic; font-display: swap; } @font-face { font-family: "Poppins"; src: url("../fonts/Poppins-SemiBold.woff2") format("woff2"), url("../fonts/Poppins-SemiBold.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins"; src: url("../fonts/Poppins-Regular.woff2") format("woff2"), url("../fonts/Poppins-Regular.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins"; src: url("../fonts/Poppins-Medium.woff2") format("woff2"), url("../fonts/Poppins-Medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins"; src: url("Poppins-MediumItalic.woff2") format("woff2"), url("../fonts/Poppins-MediumItalic.woff") format("woff"); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: "Poppins"; src: url("../fonts/Poppins-Thin.woff2") format("woff2"), url("../fonts/Poppins-Thin.woff") format("woff"); font-weight: 100; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins"; src: url("../fonts/Poppins-ThinItalic.woff2") format("woff2"), url("../fonts/Poppins-ThinItalic.woff") format("woff"); font-weight: 100; font-style: italic; font-display: swap; } @font-face { font-family: "Poppins"; src: url("../fonts/Poppins-SemiBoldItalic.woff2") format("woff2"), url("../fonts/Poppins-SemiBoldItalic.woff") format("woff"); font-weight: 600; font-style: italic; font-display: swap; } *, html, body { margin: 0; padding: 0; box-sizing: border-box; font-family: "Poppins"; font-weight: normal; font-style: normal; } p, h1, h2, h3, h4, h5, h6, ol, ul { margin: 0; } button:focus, textarea:focus, input:focus, select:focus { outline: 0; } /******************HEADER*********************/ header { display: flex; padding: 30px 0 15px; justify-content: space-between; } .search-bar-wrap { width: 75%; padding: 0; position: relative; } .user-login-section { width: 16%; display: flex; justify-content: center; align-items: center; margin-left: 5%; } .search-bar-wrap input[type="text"] { border: 1px solid #868383; border-radius: 7px; width: 99%; padding: 10px; height: 32px; } .search-bar-wrap:after { position: absolute; right: 20px; top: 4px; font-family: "Font Awesome 5 Free"; content: "\f002"; font-weight: 900; } .notification-icon-wrap { box-shadow: 0px 3px 6px #00000029; border-radius: 6px; padding: 5px 10px; height: 32px; position: relative; cursor: pointer; transition: 0.5s; } .notifications-wrap { position: absolute; right: -14px; display: none; top: 28px; } .notifications { position: absolute; width: 315px; color: white; background: #032da1; padding: 15px; border-radius: 12px; transition: 3s; z-index: 3; right: 0; top: 20px; } .notifications ul li { list-style-type: none; margin-bottom: 10px; padding: 5px; transition: 0.5s; border-bottom: 1px solid #ffffff61; display: flex; align-items: center; color: #ffffffe0; } .notifications ul li:hover { border-bottom: 1px solid #fff; transition: 0.5s; color: white; } .attendance-main .start-class-wrap .syllabus-tab { width: 100%; margin-right: 0; min-height: 145px; margin-bottom: 10px; } .syllabus-tab { width: 180px !important; } .notifications ul li h5 { font-size: 14px; } .notifications ul li p { font-size: 13px; width: 85%; margin-right: 9%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .notification-icon-wrap:hover .notifications-wrap { display: block; transition: 0.5s; } .notification-icon-wrap:after { position: absolute; content: ""; background: red; height: 5px; width: 5px; border-radius: 50%; right: 5px; top: 5px; } .notifications h4 { font-size: 15px; padding: 0px 0 7px; } .fa-trash-alt { width: 10px; } .notifications:after { position: absolute; content: ""; top: -15px; right: 20px; border-bottom: 15px solid #032da1; border-left: 12px solid transparent; border-right: 12px solid transparent; } .user-wrap { box-shadow: 0px 3px 6px #00000029; border-radius: 6px; margin-left: 10px; height: 32px; cursor: pointer; width: 180px; } .user-login-head { display: flex; justify-content: center; align-items: center; padding: 8px 6px; } .user-wrap img { background: #032da1; width: 17px; border-radius: 50%; padding: 0; margin-right: 10px; } .user-wrap h5 { font-size: 15px; display: flex; } .user-wrap h5 span { font-weight: 500; margin-right: 6px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: inline-block; font-size: 13px; vertical-align: top; max-width: 120px; } .user-login-head .fa-caret-up { display: none; } .login-wrap-open { background: #f6f7f9; padding: 5px 10px; border-radius: 6px; display: none; transition: 0.5s; z-index: 1; position: relative; } .login-wrap-open ul li { list-style-type: none; font-size: 12px; transition: 0.5s; padding: 2px 2px; margin: 5px 0; border-radius: 5px; } .login-wrap-open ul li a { color: #000; } .login-wrap-open ul li:hover a { color: #fff; } .login-wrap-open ul li span { margin-right: 6px; font-size: 14px; } .login-wrap-open ul li:hover { transition: 0.5s; background: #032da1; color: #fff; } .login-wrap-open ul li:nth-child(2):hover { background: red; } .user-wrap-expand { box-shadow: none; background: #f6f7f9; } .user-wrap:hover { box-shadow: none; background: #f6f7f9; transition: 0.5s; } .user-wrap:hover .fa-caret-down { display: none; transition: 0.5s; } .user-wrap:hover .fa-caret-up { display: inline-block; transition: 0.5s; } .user-wrap:hover .login-wrap-open { display: block; transition: 0.5s; } /*****password*****/ .form-control::placeholder { font-size: 13px; } .form-control { width: 202px !important; } .form-group label { margin-bottom: 2px; font-size: 14.5px; } .passwrd-icon { position: absolute; top: 4px; right: 8px; cursor: pointer; } .icon-y:after { position: absolute; content: ""; background: #212529; height: 1px; width: 25px; transform: rotate(36deg); top: 10px; left: -3px; } .con-pass { position: absolute; top: 4px; right: 8px; cursor: pointer; } /**********************ASIDE***************************/ .sideMenu { height: 100%; width: 220px; position: fixed; z-index: 2; top: 0; left: 0px; background-color: #032da1; color: #fff; transition: 0.5s; overflow-x: hidden; white-space: nowrap; border-radius: 0px 15px 15px 0px; padding-left: 10px; } .mobileMenu { display: none; } .logo-wrap { padding: 20px 15px; display: flex; align-items: center; margin-bottom: 20px; } .sideMenu ul li.list { font-weight: 700; font-size: 13px; transition: 0.5s; margin: 5px 0; cursor: pointer; border-radius: 10px 0px 0px 10px; list-style-type: none; } .sideMenu ul li.list a { color: #ffffff; text-decoration: none; padding: 10px 15px; display: block; } .sideMenu ul li img { margin-right: 5px; width: 20px; } .sideMenu ul li.active { background: #fafafa; color: #032da1; border-radius: 10px 0px 0px 10px; transition: 0.5s; } .sideMenu ul li.active a { color: #032da1; } .sideMenu ul li .icon-active { filter: brightness(0) invert(1); } .sideMenu ul li.active .icon-inactive { display: none; } .sideMenu ul li.active .icon-active { display: inline-block; filter: brightness(1) invert(0); } .sideMenu ul li.list:hover { background: #fafafa; color: #032da1 !important; transition: 0.5s; } .sideMenu ul li.list:hover a { color: #032da1 !important; } .sideMenu ul li.list:hover .icon-active { display: inline-block; filter: brightness(1) invert(0); } .sideMenu ul li.list:hover .icon-inactive { display: none; } /************************MAIN***************************/ main { margin-left: 130px; padding: 40px 0; margin-bottom: 80px; display: flex; justify-content: space-between; flex-wrap: wrap; } .main-wrap { position: relative; width: 100%; } .class-head { display: flex; justify-content: space-between; margin-bottom: 15px; position: relative; } .common-heading { font-size: 20px; font-weight: 600; margin: 8px; } .common-heading .fa-long-arrow-alt-left { margin-right: 10px; } .common-heading span { font-size: 15px; font-weight: 600; } .view-more-link { background: none; border: 0; text-decoration: underline; color: #032da1; font-size: 14px; font-weight: 500; cursor: pointer; } .view-more-link a { color: #032da1; } /*****************CLASSES SECTION************************/ .class-section-main { display: flex; /*justify-content: space-between;*/ margin: 20px 0; } .class-tab { width: 18%; cursor: pointer; } .class-tab-img { background: #032da1; width: 106px; border-radius: 50%; margin: auto; height: 106px; border: 0px solid #032da1; padding: 3px; display: flex; justify-content: center; align-items: center; } .class-tab-img img { width: 96%; border-radius: 50%; transition: 0.5s; } .class-tab:hover img { transition: 0.5s; transform: scale(1.06); } .class-tab-details h4 { color: #032da1; font-size: 15px; margin-bottom: 5px; } .class-tab-details { padding: 10px 0; text-align: center; } .class-tab-details p { font-size: 13px; margin-bottom: 5px; text-overflow: ellipsis; width: 125px; overflow: hidden; white-space: nowrap; margin: 0 auto 8px; } .join-class-btn { background: #032da1; border: 0; color: #fff; padding: 6px 40px; font-size: 12px; border-radius: 5px; cursor: pointer; } .class-tab-details h6 { font-size: 13px; padding: 6px 0; } /************************ASSIGNMENTS SECTION************************/ .todays-assignments-main { display: flex; margin: 20px 0; /*justify-content: space-between;*/ flex-wrap: wrap; } .todays-assignments-tab { box-shadow: 0px 3px 6px #00000029; border-radius: 12px; width: 48%; padding: 15px; display: flex; justify-content: center; align-items: flex-start; margin-bottom: 25px; } .todays-assignments-tab img { width: 50px; } .todays-assignments-tab-details h4 { font-size: 18px; } .todays-assignments-tab-details p { font-size: 13px; } .todays-assignments-tab-details { margin-left: 15px; } .date-month-picker input[type="month"] { border: 0; width: 150px; } input[type="month"]::-webkit-calendar-picker-indicator { color: rgba(0, 0, 0, 0); opacity: 1; display: block; width: 20px; height: 25px; border-width: thin; zoom: 0.8; } .date-month-picker img { width: 20px; } input[type="month"]::-webkit-calendar-picker-indicator { background: transparent; bottom: 0; zoom: 0.8; color: transparent; cursor: pointer; height: auto; background: url(../images/calendar2.png) no-repeat right center; left: 0; position: absolute; right: 0; top: 0; width: auto; } .date-month-picker input[type="date"] { border: 0; width: 150px; position: relative; } input[type="date"]::-webkit-calendar-picker-indicator { color: rgba(0, 0, 0, 0); opacity: 1; display: block; zoom: 0.8; width: 20px; height: 25px; border-width: thin; } input[type="date"]::-webkit-calendar-picker-indicator { background: transparent; bottom: 0; zoom: 0.8; color: transparent; cursor: pointer; height: auto; background: url(../images/calendar2.png) no-repeat right center; left: 0; position: absolute; right: 0; top: 0; width: auto; } /********************ATTENDANCE & GRADE SECTION***********************/ .att-grade-section { width: 100%; display: flex; justify-content: space-between; } .att-section-wrap { width: 60%; } .att-progress-bar { box-shadow: 0px 3px 6px #00000029; border-radius: 12px; padding: 15px; min-height: 160px; } .att-row { display: flex; align-items: center; margin-bottom: 10px; } .att-subject img { width: 18px; } .att-subject { display: flex; justify-content: flex-start; align-items: center; } .att-subject h5 { font-size: 13px; margin-left: 10px; width: 50px; } .att-bar { margin-left: 50px; background-color: #00000029; border-radius: 15px; width: 240px; } .att-bar .progress { background-color: #032da1; color: white; padding: 1%; text-align: right; font-size: 20px; border-radius: 15px; height: 6px; } .att-bar .physics-att { width: 73%; } .att-bar .biology-att { width: 60%; } .att-bar .chemistry-att { width: 80%; } .att-bar .maths-att { width: 73%; } .att-number { text-align: center; font-size: 14px; margin: auto 30px; } .grade-section-wrap { width: 33%; } .grade-view { box-shadow: 0px 3px 6px #00000029; border-radius: 12px; padding: 15px; min-height: 160px; } .grade-wrap { display: flex; justify-content: center; align-items: center; } .grade-wrap img { width: 48px; } .grade-wrap .grade-achieved img { width: 52px; } .grade-achieved { margin-left: 7px; } .grade-progress-bar p { text-align: center; font-size: 14px; font-weight: 500; margin: 8px 0; } .grade-bar { margin: auto; width: 190px; } .grade-got { width: 83%; } .grade-bar .progress { height: 10px; } /******************MY CLASSES*************************/ .check-syllabus { border: 0; background: none; display: flex; cursor: pointer; } .check-syllabus img { width: 15px; } .check-syllabus h5 { font-size: 15px; margin-left: 8px; color: #032da1; } .syllabus-head { display: flex; justify-content: space-between; } /***************************BREADCRUMB***************************************/ .breadcrumb-section .breadcrumb { padding: 0; list-style: none; background: none; } .breadcrumb-section .breadcrumb-item { display: inline; font-size: 18px; } .breadcrumb-section .breadcrumb li:before { padding: 8px; color: black; content: "<<"; } .breadcrumb-section .breadcrumb-item a { color: #2e4053; text-decoration: none; } /**********************SYLLABUS SECTION****************************/ .syllabus-main { display: flex; margin-top: 20px; flex-wrap: wrap; } .syllabus-tab { box-shadow: 0px 3px 6px #00000029; border-radius: 12px; padding: 15px; text-align: center; margin-right: 25px; cursor: pointer; margin-bottom: 20px; } .syllabus-image img { width: 40px; } .syllabus-image { height: 66px; } .class_time { font-size: 13px; margin: 3px 0; font-weight: 600; } .syllabus-tab h5 { font-size: 14px; margin-bottom: 5px; } .syllabus-tab span { font-size: 13px; display: block; } .syllabus-tab .join-class-btn { padding: 6px 25px; } .syllabus-head .date-month-picker { margin-right: 0; } /*********SYLLABUS MODAL**********/ .modal-content .close { position: absolute; right: -41px; top: 0; color: #131212; opacity: 1; background: white; border-radius: 15px; padding: 2px 10px; font-size: 20px; } .modal-content .dowload-sylla { background: #fdc00f; border: 0; color: #fff; bottom: 0; padding: 3px 6px; border-radius: 5px; font-size: 13px; cursor: pointer; } .container { margin-top: 10px; } .num { background: #000; color: #fff; padding: 10px; width: 50px; text-align: center; } .page-number { margin-bottom: 12px; display: flex; } .down-btn-wrap { position: absolute; right: -137px; bottom: 5px; } .page-number span { margin-left: 10px; color: #fff; font-size: 13px; } .slider-counter, .slider-counter1, .slider-counter3 { color: #fff; font-size: 13px; display: flex; align-items: center; margin-bottom: 5px; } .slider-no1, .slider-no, .slider-no3 { background: #fff; color: #000; padding: 0 5px; border-radius: 4px; margin-right: 4px; font-size: 12px; } .tot-slider1, .tot-slider, .tot-slider3 { font-size: 14px; } .modal-content .owl-prev, .modal-content .owl-next { position: absolute; } .owl-prev span, .owl-next span { font-size: 42px; line-height: 16px; background: #fff; height: 24px; width: 24px; display: block; border-radius: 50%; padding: 1px; } .owl-prev { left: -40px; top: 46%; } .owl-next { right: -40px; top: 46%; } .owl-carousel1 img { display: block; width: 100%; } /****************************assignment section******************************/ .assignment-main { display: flex; flex-wrap: wrap; } .assignment-subj { margin-right: 35px; width: 40%; } .assignment-sub-tab { box-shadow: 0px 3px 6px #00000029; border-radius: 12px; padding: 15px; margin-bottom: 20px; } .assignment-sub-tab { position: relative; } .assignmnt-tab-head { display: flex; align-items: center; } .assignmnt-tab-head img { width: 22px; } .assignmnt-tab-head h3 { font-size: 20px; margin-left: 12px; } .assignmt-detail { margin: 10px 0; font-size: 13px; line-height: 18px; word-break: break-word; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; max-height: 60px; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .assignmt-bott { display: flex; justify-content: space-between; font-size: 13px; color: #585469; } .select-tab { position: absolute; top: 16px; right: 16px; font-size: 10px; background: #032da1; color: white; border-radius: 50%; height: 16px; width: 16px; display: flex; justify-content: center; align-items: center; } .assignment-detail-main { width: 55%; } .assignment-detail { box-shadow: 0px 3px 6px #00000029; border-radius: 8px; padding: 20px; } .assignmt-detail-top { display: flex; justify-content: space-between; margin-bottom: 10px; } .assignmt-sub-name h5 { font-size: 16px; } .assignmt-sub-name p { font-size: 13px; } .assignmt-date { font-size: 14px; } .assignmt-sub-detail h4 { font-size: 14px; } .assignmt-sub-detail p { font-size: 13px; } /**********************UPLOAD BUTTON***********************/ .upload-btn-wrap { position: relative; display: inline-block; overflow: hidden; cursor: pointer; } .upload-btn { color: white; background-color: #032da1; padding: 8px 10px; border-radius: 8px; font-size: 12px; border: 0; font-weight: bold; } .upload-btn span { margin-right: 10px; } .upload-btn-wrap input[type="file"] { font-size: 100px; position: absolute; left: 0; top: 0; opacity: 0; } .re-upload-btn { display: none; } .uploaded-assignmnts { display: flex; justify-content: space-between; } .uploaded-img { width: 17%; height: auto; margin-right: 10px; cursor: pointer; } .uploaded-assignmnts img { width: 100%; padding: 5px 10px; background: #efefef; } .uploaded-assignmnts { margin-bottom: 20px; } .assignmt-remark { box-shadow: 0px 3px 6px #00000029; border-radius: 8px; padding: 20px; margin-top: 25px; } .assignmt-remark-head { display: flex; margin-bottom: 10px; } .assignmt-remark-head h5 { margin-right: 10px; font-size: 16px; margin: 0 10px 0 0; } .assignmt-remark-head p { font-size: 13px; } .remark-detail { font-size: 13px; } /**********************************/ .calendar-section-wrap { display: flex; flex-wrap: wrap; } .calendar-main { width: auto; position: relative; } .calendar-cover { padding: 10px; box-shadow: 0px 3px 6px #00000029; border-radius: 13px; padding-top: 18px; width: 100%; } .calendar-cover .calendar-btn { color: #151515; text-align: center; font-size: 12pt; padding: 2px; position: relative; cursor: pointer; transition: 0.5s background-color; border-radius: 13px; margin-right: 3px; line-height: 20px; position: relative; } .calendar-main .ui-datepicker .ui-datepicker-header { position: absolute; top: 0; right: 0; background: none; border: 0; width: 150px; } .ui-datepicker .ui-datepicker-prev { left: -24px; } .calendar-main .ui-datepicker-month { border: 0; } .calendar-main .ui-datepicker-year { border: 0; } .ui-widget-header .ui-icon { background: #fff; position: relative; cursor: pointer; } .ui-widget-header .ui-datepicker-next .ui-icon:after, .ui-widget-header .ui-datepicker-next .ui-icon:before { border-right: 2px solid; content: ""; display: block; height: 8px; margin-top: -6px; position: absolute; -moz-transform: rotate(135deg); -o-transform: rotate(135deg); -webkit-transform: rotate(135deg); transform: rotate(135deg); right: 10px; top: 50%; width: 0; } .ui-widget-header .ui-datepicker-next .ui-icon:after { margin-top: -1px; -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); } .ui-widget-header .ui-datepicker-prev .ui-icon:after, .ui-widget-header .ui-datepicker-prev .ui-icon:before { border-right: 2px solid; content: ""; display: block; height: 8px; margin-top: -6px; position: absolute; -moz-transform: rotate(222deg); -o-transform: rotate(222deg); -webkit-transform: rotate(222deg); transform: rotate(222deg); right: 10px; top: 50%; width: 0; } .ui-widget-header .ui-datepicker-prev .ui-icon:after { margin-top: -1px; -moz-transform: rotate(136deg); -o-transform: rotate(136deg); -webkit-transform: rotate(136deg); transform: rotate(136deg); } .ui-widget-header select { -webkit-appearance: none; } .ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year { width: auto; cursor: pointer; font-size: 13px !important; background: #fff; } .ui-datepicker .ui-datepicker-next { right: 10px; } .calendar-date-year img { width: 20px; margin-right: 0px; } .calendar-date-year { position: absolute; display: flex; top: 5px; right: 114px; } .ui-datepicker .ui-datepicker-prev span { left: 80%; } .ui-datepicker-next:hover, .ui-datepicker-prev:hover { background: none; border: 0; top: 2px; } .ui-widget.ui-widget-content { border: 0; } .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active { border: 0; background: none; font-weight: normal; text-align: center; } .ui-datepicker td { padding: 1px 5px; } .ui-datepicker { width: 100%; } .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover { color: #fff; background: #032da1 !important; border-radius: 50%; height: 40px; } .ui-datepicker td span, .ui-datepicker td a { display: block; text-align: right; text-decoration: none; font-size: 15px; height: 40px; display: flex; justify-content: center; align-items: center; padding: 0px; margin: auto; } .ui-datepicker th span { font-weight: 600; } /********************UPCOMING CLASSES************************/ .upcoming-section-wrap { margin-left: 30px; width: 50%; } .upcoming-tab { box-shadow: 0px 3px 6px #00000029; border-radius: 12px; padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; cursor: pointer; } .upcoming-sub-img { width: 10%; } .upcoming-subject { width: 43%; } .upcoming-date { width: 37%; text-align: right; } .upcoming-tab img { width: 30px; } .upcoming-subject h4 { font-size: 17px; } .upcoming-subject p { font-size: 13px; } .upcoming-date { font-size: 12px; } .owl-carousel1 .owl-stage { position: relative; -ms-touch-action: pan-Y; touch-action: manipulation; } /************************ATTENDANCE**************************/ .attendance-table th, .attendance-table td { padding: 5px 15px; text-align: center; font-size: 14px; text-align: left; } .attendance-table th { font-weight: 500; } .attendance-table table { width: 45%; } .attendance-table td:last-child { text-align: center; } .attendance-table th:last-child { text-align: center; } .att-present { color: #06d629; font-weight: 500; } .att-absent { color: #d60606; font-weight: 500; } .start-btn-wrap-st a:hover { color: #ffffff; text-decoration: none; } a.join-class-btn:hover { color: #fff; text-decoration: none; } /**********************************TEACHERS FLOW********************************************/ /************************classes***************************/ .upcoming-classes-tab { padding: 0; align-items: stretch; overflow: hidden; } .class-Sec { height: 100%; background: #efefef; text-align: center; padding: 15px 10px; width: 23%; } .class-Sec h4 { font-size: 14px; width: 100%; margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .class-Sec p { font-size: 12px; margin-bottom: 10px; } .upcoming-classes-tab .class-Sec img { width: 58px; } .class-det { padding: 10px 20px; width: 78%; } .class-det h5 { font-size: 16px; } .class-det .start-btn-wrap { margin-top: 4px; } .class-det p { font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .class-time-cover { padding: 10px; display: flex; flex-direction: column; justify-content: space-between; } .class-time { font-size: 12px; display: flex; } .class-time span { margin-left: 5px; } .start-btn-wrap .join-class-btn { padding: 6px 22px; } .class-det-head { display: flex; justify-content: space-between; margin-bottom: 2px; margin-top: 5px; } .date { color: red; } .next-class p { width: 100%; display: inline-block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .start-btn-wrap { width: 25%; display: inline-block; margin-top: 10px; } .class-det p.mt-3 { margin-top: 5px !important; } /*************************ATTENDANCE*******************************/ .attendance-main .syllabus-tab { margin-bottom: 20px; cursor: pointer !important; } .attendance-main .syllabus-image { height: auto; margin-bottom: 12px; } .attendance-main .syllabus-image img { width: 58px; height:58px; } .attendance-main .syllabus-tab h5 { margin-bottom: 0; } .syllabus-tab a { text-decoration: none; color: #000; width: 100%; height: 100%; display: block; cursor: pointer !important; } /************************ATTENDANCE MARK****************************/ .mark-btn-wrap { margin-top: 10px; text-align: right; } .mark-btn-wrap .join-class-btn { padding: 6px 20px; } /***********************************ATTENDANCE_LIST**********************************/ .attendance-list { width: 70%; margin-top: 20px; box-shadow: 0px 3px 6px #00000029; border-radius: 8px; padding: 20px; } .attendance-head { display: flex; justify-content: space-between; margin-bottom: 20px; } .att-heading h4 { font-size: 18px; margin-bottom: 5px; } .att-heading h5 { font-size: 14px; } .re-submit-btn .join-class-btn { border-radius: 15px; padding: 6px 25px; } .att-main .att-row { justify-content: space-between; border-left: 6px solid #032da1; padding: 0 20px; border-radius: 8px; margin-bottom: 13px; } .re-submit-btn { text-align: center; } .att-name-div, .att-present, .att-absent { width: 33.33%; text-align: left; font-size: 14px; padding: 5px 0; } .att-name-div { font-size: 15px; } .att-name-div b { font-weight: 500; font-size: 14px; } .att-name-div p { font-size: 13px; } .att-main .att-row:first-child { border-left: 6px solid #ffffff; } /******radio btn customization******/ /********PRESENT*******/ .att-present [type="radio"]:checked, .att-present [type="radio"]:not(:checked) { position: absolute; left: -9999px; } .att-present [type="radio"]:checked + label, .att-present [type="radio"]:not(:checked) + label { position: relative; padding-left: 28px; cursor: pointer; line-height: 20px; display: inline-block; color: #666; } .att-present [type="radio"]:checked + label:before, .att-present [type="radio"]:not(:checked) + label:before { content: ""; position: absolute; left: 0; top: 0; width: 16px; height: 16px; border: 1px solid #032da1; border-radius: 100%; background: #fff; } .att-present [type="radio"]:checked + label:after, .att-present [type="radio"]:not(:checked) + label:after { content: ""; width: 10px; height: 10px; background: #032da1; position: absolute; top: 3px; left: 3px; border-radius: 100%; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } .att-present [type="radio"]:not(:checked) + label:after { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } .att-present [type="radio"]:checked + label:after { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } /***********ABSENT*************/ .att-absent [type="radio"]:checked, .att-absent [type="radio"]:not(:checked) { position: absolute; left: -9999px; } .att-absent [type="radio"]:checked + label, .att-absent [type="radio"]:not(:checked) + label { position: relative; padding-left: 28px; cursor: pointer; line-height: 20px; display: inline-block; color: #666; } .att-absent [type="radio"]:checked + label:before, .att-absent [type="radio"]:not(:checked) + label:before { content: ""; position: absolute; left: 0; top: 0; width: 16px; height: 16px; border: 1px solid #ff0000; border-radius: 100%; background: #fff; } .att-absent [type="radio"]:checked + label:after, .att-absent [type="radio"]:not(:checked) + label:after { content: ""; width: 10px; height: 10px; background: #ff0000; position: absolute; top: 3px; left: 3px; border-radius: 100%; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } .att-absent [type="radio"]:not(:checked) + label:after { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } .att-absent [type="radio"]:checked + label:after { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } /********************create assignment************************/ .assignment-class-main .assignment-sub-tab { border-left: 5px solid #032da1; padding: 10px; } .assignment-class-main .assignment-sub-tab .assignmnt-tab-head h3 { font-size: 14px; margin-left: 0; } .view-btn { border: 0; font-size: 12px; background: none; border: 1px solid #032da1; border-radius: 5px; padding: 2px 20px; cursor: pointer; } .assignmt-head { position: relative; } .assignmt-head .date-month-picker { position: absolute; right: -4px; top: -48px; } .assignmt-submit-head { background: #032da1; color: #fff; overflow: hidden; display: flex; justify-content: space-between; padding: 12px 10px; } .assignmt-submit-list { overflow: hidden; box-shadow: 0px 3px 6px #00000029; border-radius: 8px; width: 60%; margin-top: 54px; } .assignmt-submit-head h3 { font-size: 18px; } .assignmt-submit-head p { font-size: 13px; text-overflow: ellipsis; width: 95px; overflow: hidden; white-space: nowrap; } .assignmt-submit-head span { font-size: 13px; text-overflow: ellipsis; width: 135px; overflow: hidden; white-space: nowrap; } .assignmt-submit-head h3 { text-overflow: ellipsis; width: 150px; overflow: hidden; white-space: nowrap; } .assignment-class-main .assignment-subj { margin-right: 30px; width: 35%; } .assignmt-submit-table table { margin: 10px 0 50px; width: 100%; } .assignmt-submit-table table.assignmt-submit-table table th, .assignmt-submit-table table.assignmt-submit-table table td { padding: 10px; font-size: 12px; } .assignmt-submit-table table td, .assignmt-submit-table table th { font-size: 13px; padding: 10px; text-align: left; } .assignmt-submit-table table td:first-child { font-weight: 500; } .assignmt-submit-table table th { font-weight: 600; } .assignmt-submit-table table th .join-class-btn { padding: 6px 20px; } .assignmt-submit-table .join-class-btn { padding: 6px 4px; height: 28px; width: 82px; font-size: 11px; } .assignmt-submit-table thead { border-bottom: 1px solid #e6e5e5; } .assignmt-submit-table table td:nth-child(4) { text-align: center; } .assignment-class-main { align-items: flex-start; } .create-assignment-cover h3 { font-size: 20px; } .create-assignment-cover { font-size: 13px; padding: 10px; } .create-assignmt-head { margin: 20px 0 10px 0; display: flex; justify-content: space-between; } .subject { display: flex; justify-content: space-between; } .due-date input[type="number"] { width: 54px; background: #f1f1f1; border: 0; border-radius: 5px; padding: 2px 5px; } .subject select#subject { border: 0; width: 150px; border: 1px solid #b9b9b9; border-radius: 5px; padding: 4px 2px; } .trName { margin-top: 10px; } .subject label { margin: 0; font-weight: 500; margin-right: 10px; margin-top: 4px; } .due-date-div input[type="date"] { width: 150px; border-radius: 5px; padding: 2px 2px; } .create-assignmt-details textarea { border: 0; background: #f1f1f1; width: 100%; border-radius: 5px; padding: 10px; } .due-date label { margin: 0; font-weight: bold; } .create-assignmt-details textarea:first-child { height: 40px; } .create-assignmt-details textarea:last-child { height: 200px; } .create-btn { margin: 20px 0; } .assignment-review { display: flex; justify-content: space-between; flex-wrap: wrap; } .assignment-view { width: 50%; position: relative; } .assignment-view img { width: 100%; } .assignment-view .down-btn-wrap { position: initial; text-align: center; } .assignment-view .down-btn-wrap .slider-counter1, .assignment-view .page-number span { color: #171717; font-size: 13px; } .assignment-view .page-number { display: flex; justify-content: center; align-items: center; } .assignment-view .owl-nav .owl-prev, .assignment-view .owl-nav .owl-next { position: absolute; top: 40%; } .assignment-review-cover { width: 45%; } .assignment-review-cover .create-assignment-cover { padding: 30px 0; } .assignment-review-cover .subject h5 { font-size: 15px; } .assignment-review-cover .due-date h5 { font-size: 12px; font-weight: 400; } .assignment-review-cover .create-assignmt-details h4 { font-size: 12px; margin: 10px 0; } .assignment-review-cover .create-assignmt-details { margin: 20px 0 0; } .assignment-review-cover .create-assignmt-details textarea { box-shadow: 0px 3px 6px #00000029; border-radius: 6px; background: #fff; height: 130px; } .main-right-evaluate { position: absolute; right: 0; top: 0; } /************************TEXT/EXAM******************************/ .test-tab { box-shadow: 0px 3px 6px #00000029; border-radius: 12px; display: flex; overflow: hidden; width: auto; margin-bottom: 40px; margin-right: 20px; padding-right: 10px; position: relative; flex-basis: 48%; } .test-wrap { display: flex; flex-wrap: wrap; margin-top: 20px; width: 80%; } .test-wrap-new { width: 100% !important; } .test-tab-img { background: #f9f9f9; display: flex; align-items: center; padding: 10px; width: 70px; } .test-tab-img img { margin: auto; width: 70%; } .test-details { padding: 11px 20px; flex-basis: 76%; } .test-subj h4 { font-size: 15px; text-overflow: ellipsis; width: 220px; overflow: hidden; white-space: nowrap; cursor: pointer; } .test-subj p { font-size: 13px; } .test-footer { display: flex; margin-top: 3px; } .test-footer h5 { font-size: 12px; align-items: center; margin-right: 20px; } .test-footer .join-class-btn { padding: 6px 15px; } /****************************TEACHERS-MY-CLASSES**************************/ .start-class-wrap { flex-basis: 17%; margin-right: 25px; text-align: center; margin-bottom: 20px; } .start-class-wrap .syllabus-tab h4 { font-size: 16px; margin-bottom: 5px; text-overflow: ellipsis; width: 130px; overflow: hidden; white-space: nowrap; text-align: center; margin: 5px auto; } .start-class-wrap .syllabus-tab h5 { font-size: 12px; } .start-btn-wrap-st a { color: #fff; } .start-btn-wrap-st { margin-top: 8px; } .my-class-btn-wrap { margin: 20px 0; } .my-class-btn-wrap h5 { font-size: 14px; margin-top: 25px; } .my-class-btn-wrap .join-class-btn { padding: 6px 20px; } /************************LOGIN*************************/ header.login-header { display: flex; padding: 0; margin: 0; width: 100%; justify-content: space-between; padding: 30px 50px; position: relative; } .login-header .logo-wrap { color: #032da1; padding: 0; } .header-menu-wrap ul li { display: inline-block; font-size: 13px; padding: 0 20px; } .header-menu-wrap ul li a { color: #292727; font-weight: 600; } .login-body { display: flex; justify-content: flex-end; padding: 30px 140px; align-items: center; } .login-box { box-shadow: 0px 3px 6px #00000029; padding: 40px; width: 380px; margin: auto; border-radius: 10px; position: relative; z-index: 1; background: #fff; } .login-box-wrap { width: 50%; float: right; } .main-container { height: 100vh; } .login-box h3 { font-size: 23px; margin-bottom: 15px; } .login-form-row input[type="text"], .login-form-row input[type="password"] { border: 1px solid #b7b4b4; width: 100%; padding: 5px; font-size: 14px; border-radius: 3px; } .login-form-row label { display: block; margin: 0; font-size: 15px; font-weight: 500; margin-bottom: 5px; cursor: pointer; } .login-form-row { margin-bottom: 10px; position: relative; } .login-form-row a { text-decoration: none; } .forgotPswd { font-size: 13px; color: #005c82; display: block; } .rem-paswd { font-size: 13px; } .rem-paswd label { margin-left: 5px; margin-bottom: 0; vertical-align: top; display: initial; } .login-header:after { content: ""; display: inline-block; width: 525px; height: 525px; -moz-border-radius: 7.5px; -webkit-border-radius: 7.5px; border-radius: 50%; background-color: #c4dce666; position: absolute; right: -70px; bottom: -185px; z-index: 0; } .container-fluid { position: relative; z-index: 1; overflow: hidden; height: 100vh; } .header-menu-wrap { position: relative; z-index: 6; } .header-menu-wrap .join-class-btn { padding: 10px 15px; border-radius: 11px; } .login-form-row .join-class-btn { border-radius: 4px; padding: 8px 40px; font-size: 16px; } .login-form-row:last-child { text-align: center; margin-top: 20px; } .login-form-row p { margin-bottom: 20px; font-size: 14px; } .login-form-row h5 { font-size: 12px; margin-top: 8px; color: #707070; } .reset-passsword-btn { margin: 20px 0; } .login-image { position: absolute; top: 20%; left: 6%; width: 30%; } .login-video { position: absolute; bottom: 15%; left: 6%; width: 30%; } .login-mob-menu { display: none; } .login-box .alert { font-size: 14px; padding: 10px 14px 10px 10px; } .login-box .alert button.close { padding: 10px; top: -9px; position: absolute; } /********SH********/ .main-inner-content-note { width: 100%; } .main-inner-content-new { width: 80%; margin-top: 10px; } .content-box-scroll { height: 90vh; overflow: auto; padding: 1rem; width: 70%; background-color: #f9f9f9; border-radius: 10px; } h5.content-heading-sec a { color: #000; } .content-box-scroll-less { width: 60%; } .content-heading-sec, .content-heading-sec-two { font-weight: 600; color: #3d3d3d; padding-bottom: 1rem; } .content-heading-sec-two { padding-bottom: 0; } .content-exam-box-one, .content-exam-box-blue { width: 100%; box-shadow: 0px 3px 6px #00000029; background-color: #fff; border-radius: 8px; padding: 10px; margin: 2% 0 0 0; transition: 0.5s; border-left: 5px solid #fff; } .notif-active { border-left: 5px solid #032da1; transition: 0.5s; } .content-exam-box-one:hover { box-shadow: 0 2px 6px #00000029; } .content-exam-box-blue { border: 1.5px solid #032da1 !important; } .content-box-one-inner { display: flex; width: 100%; } .blue-tick { background-color: #032da1; height: 20px; width: 20px; border-radius: 100%; color: #fff; padding: 2px 5px; font-size: 12px; } .content-right-side { width: 90%; justify-content: flex-start; } .content-right-side h6 { font-weight: 600; } .content-left-side { width: 10%; justify-content: flex-end; display: flex; } .content-mid-text p { font-size: 13px; width: 90%; padding: 5px 0; line-height: 15px; color: #000; } .content-last-sec { display: flex; justify-content: space-between; margin: 0; } .content-last-sec li b { font-weight: 600; } .content-last-sec-new li { display: inline-block; width: 29%; } .content-last-sec-new { display: block; margin-top: 10px; font-size: 13px; } .content-last-sec-new ul { display: flex; justify-content: space-between; align-items: center; } .content-last-sec li { list-style-type: none; color: #585469; font-size: 13px; width: 31%; } .exam-last-sec-btn, .grade-inner-btn, .view-grade-btn, .phy-evlauate, .tabl-evl-btn { background-color: #032da1; color: #fff; border: none !important; padding: 5px 15px; border-radius: 5px; font-size: 12px; cursor: pointer; } .exam-detail-btn { margin: 2% 0; width: auto; } .upper-pagination { display: flex; font-size: 14px; } .pagination-left { width: 50%; font-weight: 600 !important; } .question-wrap h6 { padding: 20px 0 5px 0; font-weight: 600; color: #3d3d3d; font-size: 15px; } .question-wrap { width: 100%; } .question-wrap p { padding: 0.2rem 0 1rem 0; font-size: 14px; } .option-select-sec { display: flex; margin: 1% 0; } .option-select-right { width: 3%; } .option-select-left { font-size: 14px; } .btn-previous-sec { display: flex; width: 70%; } .btn-pre-one { margin: 0 0.5rem; } .btn-pre-inner, .btn-next-inner, .view-detail-notify, .list-end-btn, .tf-noti-btn { background-color: #fff; border: 1.5px solid #032da1; outline: none !important; padding: 3px 10px; font-weight: 500; font-size: 13px; border-radius: 5px; cursor: pointer; } .btn-next-inner { background-color: #032da1; color: #fff; } .bt-skip { background-color: transparent !important; color: #000; border: none !important; } .btn-pre-sec-outter { display: flex; margin: 40px 0 0 40px; justify-content: space-between; } .text-sec { width: 85%; height: 200px; overflow: auto; padding: 10px; margin: 10px 0 0 0; border: 1.5px solid #032da1; border-radius: 3px; } .grade-container-sec { display: flex; } .my-grade-sec-one { width: 22%; background-color: #f3f3f3; padding: 28px 10px 10px 10px; margin: 0 20px 0 0; text-align: center; height: 150px; border-radius: 12px; } .grade-btn { display: flex; justify-content: center; margin: 15px 0 0 0; } .my-grade-sec-one p { font-weight: 600; } .my-grade-detail-sec { padding: 10px; border-radius: 5px; background-color: #f3f3f3; width: 65%; } .grade-detail-table { display: flex; background-color: #032da1; border-radius: 35px; color: #fff; } .grade-table-mark-blue { background-color: #032da1; color: #fff; width: 145px; text-align: center; padding: 5px 0; } .grade-table-heading { text-align: center; padding: 4px; margin: 0 35px 0 30px; } .grade-detail-table-marks { list-style-type: none; font-size: 14px; } .grade-table-mark { width: 145px; text-align: center; margin: 25px 0px 0px 0px; } .grade_box_outter { display: flex; margin: 17px 0 0 0; justify-content: center; } .message-sec-outter { display: flex; width: 95%; } .mesage-sec-left { width: 70%; } .mesage-sec-right { width: 30%; } .chat-box-sec { width: 95%; } .chat-box-header { width: 100%; background-color: #032da1; border-radius: 10px 10px 0 0px; padding: 10px; display: flex; } .chat-profile-pic { width: 18%; } .chat-name-sec { color: #fff; padding: 0 10px; } .chat-name-sec-chat { color: #000; width: 55%; } .chat-name-sec p { font-size: 9px; } .chat-name-sec h6 { font-weight: 600; } .chat-name-sec-chat h6 { padding: 5px 10px; font-weight: 600; color: #222222; font-size: 1.1rem; } .chat-name-sec-chat p { color: #3d3d3d; font-size: 12px; line-height: 14px; padding: 3px 10px; } .Chat-box-header-left { display: flex; width: 30%; } .chat-header-right-outter { display: flex; justify-content: flex-end; width: 70%; padding: 0 1rem; color: #fff; position: relative; } .menu-chat { font-size: 22px; margin: 5px 0 0 0; } .chat-dropdown { height: 70px; width: 150px; background-color: #fff; position: absolute; margin: 40px 0 0 -130px; padding: 10px 15px; list-style-type: none; color: black; box-shadow: 0 0 5px #00000029; display: none; } .chat-box-header-right:hover .chat-dropdown { display: inline-block; } .chat-box-header-right { display: inline-block; position: relative; } .arrow { position: absolute; z-index: 5; margin: -26px 0 0 110px; color: #fff; font-size: 25px; } .chat-box-left { padding: 1rem; width: 100%; overflow: auto; height: 65vh; } .chat_box_whole_outter { display: flex; justify-content: flex-start; } .chat_box_whole_outter-replay { display: flex; justify-content: flex-end; } .chat-box-left-inner { width: 100%; display: flex; } .chat-box-whole { background-color: #fff; width: 50%; } .chat-user-photo { width: 15%; padding: 5px; border-radius: 100%; border: 1px solid #fff; } .chat-box-user-message-left { border: 2px solid #032da1; width: 80%; padding: 5px; margin: 5px; border-radius: 5px; font-size: 12px; } .chat-info { font-size: 10px; margin: 5px 0 0 55px; padding: 2px 0 5px 0; } .chat-date { margin: 0 0px 0 26px; font-weight: 600; } .send_message { border: 1.5px solid #032da1; border-radius: 30px; display: flex; } .sending-text { border: none !important; margin: 3px 0 0 10px; background-color: transparent; width: 85%; } /*------------------------------*/ .syllabus-tab .join-class-btn a { color: #fff; } .chat-searc { border: none !important; width: 90%; } .subj-container-sec { margin: 0 !important; } /*==============================teacher-flow==========================*/ .teacher-flow-class-one { background-color: #fff; width: 180px; box-shadow: 0px 3px 6px #00000029; text-align: center; padding: 1rem; border-radius: 10px; margin: 0 1%; } .t-flow-class-img img { width: 65px; } .t-flow-class-img { padding: 0 0; } .teacher-flow-class-one a { color: #000; text-decoration: none; } .teacher-flow-class-one p { font-weight: 600; margin: 10px 0 0 0; font-size: 12px; } .teacher-flow-class-one:hover { background-color: #f5f5f5; } .calender-push { width: 45%; display: flex; justify-content: flex-end; margin: 0 0 1% 0; } .date-month-shower input[type="month"] { border: 0; } .cal-push-inner { width: 15%; height: 20px; } .cal-assinment { width: 100%; display: flex; justify-content: center; } .cre-assing { width: 24%; margin: 0 6% 0 0; display: flex; justify-content: flex-end; } .assing-sub { background-color: #032da1; color: #fff; padding: 5px 10px; border-radius: 30px; border: none !important; cursor: pointer; } .chat-box-left::-webkit-scrollbar { display: none; } .sub-box-sec { display: flex; box-shadow: 0 0 3px #00000029; width: auto; border-radius: 10px; margin: 10px; } .sub-box-rightside { width: 350px; padding: 5px; } .sub-box-leftside { width: 75px; background-color: #f9f9f9; padding: 25px 0 0 0; } .sub-box-rightside h6 { font-weight: 600; } .sub-box-rightside p { padding: 5px 0 5px 0; } .sub-box-rightside { line-height: 14px; font-size: 14px; padding: 5px 10px; } .sub-box-rightside ul { display: flex; list-style-type: none; justify-content: space-between; margin: 5px 0; } .sub-quest-btn, .done-btn { background-color: #032da1; border: none !important; color: #fff; padding: 5px 8px; border-radius: 5px; cursor: pointer; } /*=================================*/ .mid-paper-sec { display: flex; width: 100%; margin-top: 20px; } .mid-paper-sec-left { flex-basis: 45%; box-shadow: 0 0 6px #00000029; margin: 0 3% 0 0; } .quest-box-header { display: flex; background-color: #f5f5f5; border-radius: 5px 5px 0 0; margin: 8px; padding: 8px; } .quest-box-footer { display: flex; background-color: #f5f5f5; border-radius: 0 0 5px 5px; margin: 8px; padding: 8px; } .quest-box-header p:nth-child(2) { width: 40%; display: flex; justify-content: flex-end; font-size: 12px; font-weight: 600; margin-top: 4px; } .quest-box-header p:first-child { width: 60%; justify-content: flex-start; font-weight: 600; font-size: 14px; } .quest-box-body-scroll { overflow-y: auto; height: 60vh; } .quest-box-body-scroll::-webkit-scrollbar { display: none; } .quest-added-row { display: flex; margin: 10px; } .quest-added-one { display: flex; background-color: #f5f5f5; padding: 4px 6px; list-style-type: none; border-radius: 5px; width: 100%; justify-content: space-between; } .quest-added { width: 20px; color: #c4c4c4; cursor: pointer; display: flex; align-items: center; } .quest-added-green { color: forestgreen; } .quest-added-one li:nth-child(2) { font-size: 12px; width: 70%; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; height: 20px; } .quest-added-one li:nth-child(1) { width: 8%; font-weight: 600; display: flex; align-items: center; justify-content: center; } .quest-added-one li:nth-child(3) { width: 6%; display: flex; align-items: center; cursor: pointer; font-size: 12px; } .quest-added-one li:nth-child(4) { width: 16%; font-weight: 600; text-align: right; font-size: 12px; display: flex; align-items: center; justify-content: flex-end; } .marks_text{ font-weight: 600; text-align: right; font-size: 14px; } .sel-quest-type { margin-top: 12px; } .add-tec-quest { border-radius: 100%; width: 20px; height: 20px; background-color: #3d3d3d; color: #fff; border: none; margin: 0 5px; cursor: pointer; } .quest-foot-marks { display: flex; list-style-type: none; justify-content: space-between; width: 100%; } .sub-quest-paper { background-color: #032da1; color: #fff; padding: 2px 8px; border: none; border-radius: 5px; font-size: 12px; } .mark-around { height: 15px; width: 15px; background-color: #bfbfbf; border-radius: 100%; padding: 3px; color: #fff; cursor: pointer; } .mark-green { background: forestgreen; } .mid-paper-sec-right { box-shadow: 0 0 6px #00000029; flex-basis: 50%; padding: 10px; } .quest-info-header { display: flex; } .sel-quest-type label { font-size: 13px; } .quest-foot-marks li { font-size: 13px; } .quest-info-header p:nth-child(1) { width: 50%; display: flex; justify-content: flex-start; font-weight: 600; font-size: 15px; } .quest-info-header p:nth-child(2) { width: 50%; display: flex; justify-content: flex-end; font-weight: 600; font-size: 15px; } .sel-multiple { background-color: #032da1; color: #fff; padding: 3px; border-radius: 5px 5px 0 0; border: none; margin: 0 5px; outline: none; font-size: 14px; } select > option { background-color: #f3f3f3; color: #000; } .quest-add-inside { margin: 0px; width: 100%; border-radius: 5px; padding: 5px; height: 150px; font-size: 14px;; } .enter-quest-place { } .input-image { color: blue; margin-left: 10px; text-decoration: underline; cursor:pointer; } .insert-prop { text-align: right; margin: 10px; font-size: 13px; } .add-opt-ans { background-color: #f6f6f6 !important; border: none !important; border-radius: 5px; width: 90%; margin: 5px 0; font-size: 13px; padding: 2px 7px; } .selected-ans-type { margin: 10px 0; font-weight: 600; font-size: 15px; } .correct-opt { border: none; font-weight: 600; outline: none; margin: 0 5px; } .opt-footer-btns { display: flex; justify-content: flex-end; } .stud-drade-wrap { display: flex; } .stud-drade-wrap h4 { width: 70%; } .stud-dev-wrap { display: flex; width: 95%; } .stud-dev-wrap-new { width: 100%; } .stud-wrap-left { flex-basis: 40%; } .stud-wrap-right { flex-basis: 55%; box-shadow: 0px 3px 6px #00000029; margin: 0 0 0 30px; border-radius: 5px; } .eval-wrap-right { flex: 50%; margin: 0 0 0 50px; } .stud-row-one h6 { width: 72%; font-size: 13px; margin: 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .stud-row-one { display: flex; border-left: 6px solid #032da1; border-radius: 6px; padding: 5px; margin: 0 0 20px; box-shadow: 1px 1px 4px #00000029; align-items: center; justify-content: space-between; } .stud-exam-detail-header { background-color: #032da1; padding: 8px; color: #fff; border-radius: 5px 5px 0 0px; font-weight: 500; font-size: 15px; } .student-info-wrap { display: flex; padding: 8px 16px; box-shadow: 0px 0px 3px #00000029; } .student-info-wrap h6 { width: 50%; font-size: 14px; font-weight: 600; } .student-info-wrap h6:nth-child(2) { display: flex; justify-content: flex-end; } .stud-info-list { height: 60vh; overflow-y: auto; } .stud-info-list::-webkit-scrollbar { display: none; } .stud-info-list li { display: flex; list-style-type: none; padding: 10px 16px; } .stud-info-list li p { width: 50%; font-size: 14px; } .end-btn-grd { display: flex; justify-content: flex-end; width: 50%; } .stud-table-wrap { width: 70%; box-shadow: 0px 3px 6px #00000029; padding: 20px 10px; border-radius: 10px; } .stud-table-wrap h4 { padding: 5px 0; font-weight: 600; font-size: 15px; margin-bottom: 4px; } .stud-table-wrap h6 { font-size: 13px; font-weight: 500; } .total-bold td { font-weight: 600; color: #3d3d3d; } .eval-sub li { display: flex; box-shadow: 0 0 6px #00000029; margin: 20px; padding: 10px 10px 10px 0; border-radius: 12px; justify-content: space-between; align-items: center; } .phy-sec-start { width: 20%; } .phy-sec-start img.mx-auto.d-block.img-fluid { width: 27px; } .phy-sec-mid { width: 55%; } .phy-sec-mid p:nth-child(1) { font-weight: 600; font-size: 16px; } .phy-sec-mid p:nth-child(2) { font-size: 12px; } .phy-sec-last { width: 25%; } .stud-evalutaion-detail-header { font-weight: 600; padding: 0 20px; } .exam-evl-action { width: 65%; } .action-sec { box-shadow: 0 0 8px #0000001a; margin: 0 !important; width: 100%; } .action-sec tr { height: 40px; } .action-sec th { color: #000; border-bottom: 1px solid #00000029; background-color: #fff; font-weight: 600; padding: 10px; } .action-tab-heading { height: auto !important; font-size: 14px; font-weight: 600; } .exam-eval-action-header { background-color: #032da1; padding: 12px 15px; color: #fff; border-radius: 10px 10px 0 0; } .name-strong { font-weight: 600; font-size: 14px; } .action-sec td { font-size: 14px; padding: 12px 10px; } .tabl-evl-btn { width: 110px; } .scrg { height: 60vh; } .main-right-wrap { display: flex; margin-right: 2%; } .main-right-ques .fa-plus-circle { color: #032da1; } .main-right-ques { margin-right: 15px; } .main-right-evaluate img { width: 16px; } .main-right-wrap button { background: none; font-weight: 600; font-size: 14px; cursor: pointer; } .noti-wrap-sec { display: flex; } .noti-wrap-sec-left { width: 45%; margin: 0 3% 0 0; } .noti-wrap-sec-right { width: 45%; box-shadow: 0px 3px 6px #00000029; padding: 10px; margin: 1% 0 0 0; border-radius:8px; } p.dis-notif-desc { font-size: 13px; } .noti-wrap-sec-right-inner { display: flex; margin: 3px 10px 20px 0; justify-content: space-between; background: #f5f5f5; padding: 10px; } .noti-wrap-sec-right-inner p:nth-child(1) { font-weight: 600; font-size: 14px; width: 50%; } .noti-wrap-sec-right-inner p:nth-child(2) { color: #585469; font-size: 12px; width: 25%; display: flex; justify-content: flex-end; font-weight: 600; } .content-heading-sec a { color: #000; } .pagination-left a { color: #000; } .conten-breadcrum a { color: #000; } tr#heading-height { height: 30px; } .syllabus-wrap-me { width: 80%; } .syllabus-wrap-me { width: 96%; } .question-wrap-me { width: 85%; } .content-last-sec-noti { display: flex; list-style-type: none; justify-content: space-between; } .content-last-sec-noti li:nth-child(1) { font-size: 14px; color: #585469; } .content-last-sec-noti li:nth-child(2) { font-size: 14px; color: #585469; } .main-noti-sec { width: 85%; } .content-right-side-noti h6 { font-size: 14px; font-weight: 600; } .content-right-side-noti, .content-left-side-noti { width: 50%; } .content-left-side-noti { font-size: 13px; font-weight: 600; display: flex; justify-content: flex-end; margin: 3px 0 0 0; } .noti-wrap-sec-right-inner p:nth-child(1) { font-weight: 600; font-size: 14px; width: 175px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .noti-wrap-sec-right-inner p:nth-child(2) { color: #585469; font-size: 12px; width: 132px; display: flex; justify-content: flex-end; font-weight: 600; } .noti-wrap-sec-right-inner p:nth-child(3) { color: #585469; font-size: 12px; width: 25%; display: flex; justify-content: flex-end; font-weight: 600; } .noti-wrap-sec-right h6 { font-size: 14px; text-align: right; margin-top: 30px; } .my-info-header { display: flex; list-style-type: none; justify-content: space-between; border-bottom: 2px solid #ddd; margin: 0 0 30px 0; } .my-info-inner { padding: 0px; width: 50%; } .my-info-wraper { margin: 35px 0px; width: 100%; } .my-info-header li { font-size: 18px; font-weight: 600; } .my-info-header li a:hover { color: #032da1 !important; } .reset-code { color: #032da1; font-size: 12px; color: #1492e6; } .emergency-heading { margin: 20px 0 25px; } .user-info-row-two { margin: 0 0 40px 0; } .blue-line { color: #032da1 !important; border-bottom: 5px solid #032da1; } .blue-line a { color: #032da1 !important; } .my-info-header a { color: #000; text-decoration: none; } .text-background-two { background-color: #f2f0f0; border: none; margin: 0 10px; padding: 3px 6px; font-size: 12px; } .user-info-one-fees { display: flex; width: 100%; } .user-info-one-fees p:nth-child(1) { width: 30%; margin: 10px 0; font-weight: 600; font-size: 14px; } .user-info-one-fees p:nth-child(2) { width: 70%; margin: 10px 0 0 0; } .sele-sub-opt li { font-size: 14px; line-height: 25px; display: flex; margin: 0; width: 100%; } .sele-sub-opt-two li { font-size: 14px; line-height: 25px; display: flex; margin: 10px 0; width: 100%; } .sele-sub-opt { list-style-type: none; margin: 10px 0 0 0; } /*************** new styles ****************/ .teacher-login-wrap { overflow: hidden; } .common_margin { margin-left: 260px; } /**************common-datepicker*****************/ .common-datepicker .ui-datepicker-calendar { display: none; } .common-datepicker { position: relative; } .common-datepicker .ui-datepicker-calendar { display: none; } .common-datepicker { position: relative; } .common-datepicker .ui-widget-header { background: none; border: 0; } .common-datepicker select.ui-datepicker-month { border: 0; } .common-datepicker select.ui-datepicker-year { border: 0; } .common-datepicker .calendar-date-year { top: 9px; } /*************** new styles ****************/ .teacher-login-wrap { overflow: hidden; } /*new*/ .No_data { height: 150px; text-align: center; display: flex; align-items: center; justify-content: center; color: #cecece; } .no_data_div { margin: 0 auto 20px; height: 100px; display: flex; justify-content: center; align-items: center; border-left: 5px solid #032da1; box-shadow: 0px 3px 6px #00000029; border-radius: 12px; } .due-date-div { margin-bottom: 6px; } .tr_error { margin-top: -4px; display: block; color: red; margin-bottom: 10px; } .stud-dev-wrap { width: 100% !important; } /*******11 oct********/ .assignment-modal .modal-content .close { right: 5px; top: 6px; } .create-assignmt-details .tr_error { margin-bottom: 12px !important; float: left; } .assignmt-head .common-datepicker { position: absolute; top: -45px; right: -28px; } .cleate-assignmt { position: absolute; right: 9px; } .datepicker-notif .date-month-picker { position: relative; width: 172px; } .date-month-shower { position: relative; } .date-month-shower input[type="month"] { border: 0 !important; } .logo-wrap img { max-width: 200px; width: 100%; } .ui-state-default { height: 38px; width: 38px; } .date-month-picker { position: absolute; right: 10px; margin: auto; } .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: auto; position: absolute; right: 7px; top: -14px; } .test-btn-wrap { margin: 10px auto; } /* table th:last-child { border-radius: 50px 0 0 50px } */ table th:last-child { /* border-radius: 50px 0 0 50px; */ border-radius: 0 50px 50px 0; } ***************accept/reject modal******************/ .accept-modal-wrap .modal-content { border-radius: 10px; } .accept-modal-wrap .close { position: absolute; right: 4px; } .accept-modal p { text-align: center; margin-bottom: 10px; width: 80%; margin: 0 auto 10px; font-size: 13px; } .accept-modal .delete-modal-btn { text-align: center; position: relative; margin-bottom: 25px; } .accept-modal .delete-modal-btn .subject_addbtn { border: 1px solid #5b5959; background: none; color: #000; border-radius: 7px; width: 120px; cursor: pointer; } .accept-modal .delete-modal-btn .subject_addbtn_cancel { background: #343434; color: #fff; margin-left: 6px; } .accept-modal-wrap .modal-dialog { width: 400px; } .modal-msg { position: absolute; bottom: -29px; font-size: 13px; } .accept-modal { padding: 15px 20px 0; } .accept-modal h3 { margin-bottom: 8px; } .accept-modal-wrap .modal-dialog { margin: auto; height: 90vh; display: flex; align-items: center; } /**********************************/ .delete-modal { text-align: center; padding: 20px; } .delete-modal-wrap .close { position: absolute; right: 8px; top: 3px; } .delete-modal .fa-times-circle { color: red; font-size: 40px; } .delete-modal h4 { font-size: 20px; margin: 10px 0; } .delete-modal p { font-size: 13px; margin: 0 0 15px; } .delete-modal-btn .subject_addbtn { padding: 6px 26px; font-size: 12px; cursor: pointer; } .delete-modal-btn { margin-bottom: 15px; } .subject_addbtn_cancel { background: #c6c3c3; } ***************accept/reject modal******************/ .accept-modal-wrap .modal-content { border-radius: 10px; } .accept-modal-wrap .close { position: absolute; right: 4px; } .accept-modal p { text-align: center; margin-bottom: 10px; width: 80%; margin: 0 auto 10px; font-size: 13px; } .accept-modal .delete-modal-btn { text-align: center; position: relative; margin-bottom: 25px; } .accept-modal .delete-modal-btn .subject_addbtn { border: 1px solid #5b5959; background: none; color: #000; border-radius: 7px; width: 120px; cursor: pointer; } .accept-modal .delete-modal-btn .subject_addbtn_cancel { background: #343434; color: #fff; margin-left: 6px; } .accept-modal-wrap .modal-dialog { width: 400px; } .modal-msg { position: absolute; bottom: -29px; font-size: 13px; } .accept-modal { padding: 15px 20px 0; } .accept-modal h3 { margin-bottom: 8px; } .accept-modal-wrap .modal-dialog { margin: auto; height: 90vh; display: flex; align-items: center; } /**********************************/ .delete-modal { text-align: center; padding: 20px; } .delete-modal-wrap .close { position: absolute; right: 8px; top: 3px; } .delete-modal .fa-times-circle { color: red; font-size: 40px; } .delete-modal h4 { font-size: 20px; margin: 10px 0; } .delete-modal p { font-size: 13px; margin: 0 0 15px; } .delete-modal-btn .subject_addbtn { padding: 6px 26px; font-size: 12px; margin: 10px; border: none; } .delete-modal-btn { margin-bottom: 15px; } .subject_addbtn_cancel { background: #c6c3c3; } button#delete_asgn { background: red; color: #fff; /* border: 1px solid red; */ } .syllabus-wrap { position: relative; } .check-syllabus { position: absolute; right: 0; top: 21px; } .ui-state-default { height: 38px !important; width: 38px !important; margin: 10px auto !important; } .notif-active { border-left: 5px solid #032da1; } .syllabus-modal .modal-dialog { display: flex; align-items: center; justify-content: center; height: 75vh; } .notification-row a.text-white { width: 93%; } .test-exam-datepicker .ui-datepicker-calendar { display: none; } .test-exam-datepicker .calendar-cover { box-shadow: none; width: auto !important; } .test-exam-datepicker { width: auto; } .test-exam-datepicker { width: auto !important; position: absolute; right: 0; } .date-month-shower .test-exam-datepicker { top: 11px; right: -20px; } .breadcrumb-section .breadcrumb a { color: #000; text-decoration: none; } .modal.show .modal-dialog { z-index: 9; } .modal-backdrop.show { opacity: .5; z-index: 6; } .date-month-picker .test-exam-datepicker { right: -20px; } .delete-modal-wrap .modal-dialog { height: 75vh; display: flex; align-items: center; } /***********Exam evalutaion****************/ .evaluation_head { display: flex; justify-content:flex-start; margin-bottom: 15px; } .test_score { margin-left: 60px; } .test_heading h6 { font-size: 13px; font-weight: 300; } .evaluation-wrap { width: 80%; margin-bottom: 40px; } .evaluation_q { font-size: 14px; } .evaluation_q h5 { font-size: 14px; margin-top: 30px; font-weight: 600; } .score_sec { margin-top: 30px; background: #032da12b; margin-bottom: 40px; width: 300px; border-radius: 7px; padding: 16px; display: flex; justify-content: space-between; } .score { background: #fff; width: 41px; text-align: center; } .score_submit { background: #08A103; color: #fff; border-radius: 5px; font-size: 13px; padding: 3px 12px; } .option-select-sec { margin: 2% 0 !important; } .score_correct { color: #08A103; } .score_display { margin-top: 25px; } .score_wrong { color: red; } .score_submit { background: #08A103; color: #fff; border-radius: 5px; font-size: 13px; padding: 3px 12px; } .po-calendar { position: relative; } .ndp-nepali-calendar { width: 100% !important; font-size: 13px; } .cal-icon { position: absolute; right: 10px; top: 7px; font-size: 18px; } .my-leaves-heading { font-size: 21px; font-weight: 600; margin: 10px 0px 20px 0px; } .submit-btn { background-color: #032da1; color: #fff; border: none; height: 35px; font-size: 14px; padding: 3px 20px !important; border-radius: 5px; cursor: pointer; font-weight: 400; } .submit-btn:focus { background-color: #050c24; color: #fff; border: none; height: 35px; font-size: 14px; padding: 5px 20px !important; border-radius: 3px; cursor: pointer; } .submit-btn:hover { background-color: #030370; color: #fff; border: none; height: 35px; font-size: 14px; padding: 5px 20px !important; border-radius: 5px; cursor: pointer; } .submit-btn img { width: 12px; height: 12px; } .select-box { padding: 3px 10px !important; width: 100%; border-radius: 5px; border: 1px solid #ccc !important; font-size: 15px; color: black; height: calc(1.85rem + 8px) !important; } .select-head { font-size: 13px; font-weight: 500; } .submit-btn img { filter: brightness(0) invert(1); } .leaves-filter-label { font-size: 15px; margin-bottom: 0.2rem !important; font-weight: 550; } .filter-head { display: flex; align-items: center; } .my-leaves-filter { display: flex; align-items: center; } .filter-selects { display: flex; width: 100%; align-items: center; } .my-leaves-top { display: flex; width: 100%; justify-content: space-between; } .icons-wrap { display: flex; text-align: center; justify-content: center; cursor: pointer; } i.fa-solid.fa-pen { color: #032da1; font-size: 14px; } i.fa-solid.fa-trash.px-2 { color: #ff0000; font-size: 14px; } .rejection-icon { color: #032da1; cursor: pointer; } .date-filter { position: relative; } .date-filter > img { position: absolute; right: 18px; top: 44px; } .button.close:focus { border: 0px !important; outline: 0px !important; } .leave-modal-header { border: 0px !important; } .leave-process-btns { display: flex; } .reject-btn { background-color: #ff0000; color: #fff; border: none; height: 35px; font-size: 14px; padding: 3px 20px !important; border-radius: 5px; cursor: pointer; font-weight: 400; } .reject-btn:focus { background-color: #000000; color: #fff; border: none !important; height: 35px; font-size: 14px; padding: 5px 20px !important; border-radius: 5px; cursor: pointer; } .reject-btn:hover { background-color: #811304; color: #fff; border: none; height: 35px; font-size: 14px; padding: 5px 20px !important; border-radius: 5px; cursor: pointer; } .leave-app-row { padding-top: 5px; } .leave-app-row h6 { font-size: 13px; font-weight: 700; margin-bottom: 5px !important; } .leave-app-row p { font-size: 13px; font-weight: 400; margin: auto !important; } .leave-app-row-reason p { font-size: 13px; font-weight: 400; margin: auto !important; text-align: justify; } .leave-app-row-reason h6 { font-size: 13px; font-weight: 700; margin-bottom: 5px !important; } .button.close:focus { border: 0px !important; outline: 0px !important; } .leave-modal-header h5 { font-size: 15px !important; font-weight: 600; } .modal-footer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center !important; -webkit-box-pack: center; -ms-flex-pack: end; justify-content: center; padding: 1rem; border-top: 1px solid #e9ecef; } .btn-dark a { text-decoration: none; color: white !important; } .my-leaves-heading { font-size: 21px; font-weight: 600; margin: 10px 0px 20px 0px; } .submit-btn { background-color: #032da1; color: #fff; border: none; height: 35px; font-size: 14px; padding: 3px 20px !important; border-radius: 5px; cursor: pointer; font-weight: 400; } .submit-btn:focus { background-color: #050c24; color: #fff; border: none; height: 35px; font-size: 14px; padding: 3px 20px !important; border-radius: 3px; cursor: pointer; } .submit-btn:hover { background-color: #27272b; color: #fff; border: none; height: 35px; font-size: 14px; padding: 3px 20px !important; border-radius: 3px; cursor: pointer; } .submit-btn-table { background-color: #032da1; color: #fff; border: none; height: auto; font-size: 14px; padding: 3px 20px !important; border-radius: 5px; cursor: pointer; font-weight: 400; } .submit-btn-table:focus { background-color: #050c24; color: #fff; border: none; height: auto; font-size: 14px; padding: 3px 20px !important; border-radius: 3px; cursor: pointer; } .submit-btn-table:hover { background-color: #2e2e31; color: #fff; border: none; height: auto; font-size: 14px; padding: 3px 20px !important; border-radius: 3px; cursor: pointer; } .submit-btn img { width: 12px; height: 12px; } .select-box { padding: 3px 10px !important; border-radius: 5px; border: 1px solid #ccc !important; font-size: 15px; color: black; height: calc(1.85rem + 8px) !important; } .select-head { font-size: 13px; font-weight: 500; } .submit-btn img { filter: brightness(0) invert(1); } .leaves-filter-label { font-size: 15px; margin-bottom: 0.2rem !important; } .filter-head { display: flex; align-items: center; } .my-leaves-filter { display: flex; align-items: center; } .filter-selects { display: flex; width: 100%; align-items: center; } .my-leaves-top { display: flex; width: 100%; justify-content: space-between; } .icons-wrap { display: flex; text-align: center; justify-content: center; cursor: pointer; } i.fa-solid.fa-pen { color: #032da1; font-size: 14px; } i.fa-solid.fa-trash.px-2 { color: #ff0000; font-size: 14px; } .rejection-icon { color: #032da1; cursor: pointer; } .date-filter { position: relative; } .date-filter > img { position: absolute; right: 18px; top: 44px; } .button.close:focus { border: 0px !important; outline: 0px !important; } .leave-modal { padding: 20px !important; } .leave-modal-footer { border: 0px !important; } .submit-btn-table a { text-decoration: none !important; color: #fff !important; } tfoot { display: table-header-group !important; } table.dataTable.example tfoot th, table.dataTable tfoot td { padding: 0px 18px 12px 18px !important; border-top: 0 !important; border-bottom: 1px solid black !important; } table.example thead th { border-bottom: 0 !important; }