*, html, body { margin: 0; padding: 0; box-sizing: border-box; font-family: "Roboto"; font-weight: normal; font-style: normal; } .container{ max-width: 1500px; margin: auto; } .containers{ max-width: 1500px; margin: auto; } .login-row{ height: 80vh; margin: 0px !important; } .login-bg{ display: flex; align-items: flex-end; } .login-right{ margin: auto; } .login-box { box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; border-radius: 10px; } .login-fields { padding: 15% 10%; } .login-fields h3{ font-size: 25px; text-align: left; line-height: 30px; color: black; font-weight: 550; } .login-fields a{ color: #01405A; text-decoration: none; font-size: 15px; } .login-input{ margin-bottom: 0%; padding: 2%; } .login-btn{ width: 151px; background-color: #032DA1; color: white; padding: 2%; border: none; border-radius: 10px; font-size: 21px; margin: auto;; } .login-btn:hover{ box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px; cursor: pointer; } .login-btn:active{ border: 1px solid #032DA1; background-color: white; color: #032DA1; } .login-button { margin: auto; text-align: center; } .lg-img { width: 100%; height: auto; } .main-logo { padding: 2% 0% 0% 2%; } .remember { color: #707070; font-size: 15px; margin-top: 2%; } .error-message{ font-size:13px !important; color:red !important; margin-bottom:2% !important; } /* forgot-password */ .forgot-box { box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; border-radius: 10px; } .forgot-fields { padding: 15% 10%; } .forgot-fields h3{ font-size: 25px; text-align: left; line-height: 30px; color: black; font-weight: 550; } .forgot-fields a{ color: #01405A; text-decoration: underline; font-size: 18px; } .forgot-redirection { text-align: center; } .forgot-btn{ width: auto; background-color: #032DA1; color: white; padding: 2% 6%; border: none; border-radius: 10px; font-size: 21px; margin: auto;; } .forgot-btn:hover{ box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px; cursor: pointer; } .forgot-btn:active{ border: 1px solid #032DA1; background-color: white; color: #032DA1; } .forgot-button { text-align: center; margin: 7% auto 5% auto; } .forgot-btn a{ text-decoration: none; color: white; } .forgot-fields p{ font-size: 15px; color: #707070; line-height: 22px; text-align: left; } .forgot-fields input::placeholder{ font-size: 15px; color: #707070; } /* reset-password */ .input-label{ font-size: 15px; color: black !important; line-height: 35px; text-align: left; margin-bottom: 0.5% !important; } .reset-input{ margin-bottom: 1%; } .forgot-fields h6{ font-size: 15px; color: black; font-weight: 400; } /* reset-modal */ .modal-body{ text-align: center; padding: 7% 3% 3% 3%; } .modal-footer{ text-align: center; margin-bottom: auto; justify-content: center; border-top: none; } .modal-footer a { color: white; border: none; border-radius: 10px; font-size: 16px; text-decoration: none; } .modal-btn{ background-color: #032DA1; color: white; text-align: center; padding: 1% 8%; font-size: 16px; margin-bottom: 4%; } .modal-btn:hover{ box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px; cursor: pointer; } .modal-body h4{ font-size: 25px; color: #404040; margin-top: 5%; } .modal-body p{ font-size: 14px; color: black; line-height: 18px; margin-bottom: 0% !important; } /* dashboard page */ /* Sidebar styles */ /******************HEADER*********************/ header { display: flex; padding: 30px 30px 15px 0; margin-left: 5%; justify-content: space-between; transition: 0.5s; width: 100%; } .search-btn{ background-color: #032DA1; padding: 0% 2%; border: none; color: white; border-radius: 0px 10px 10px 0px; cursor: pointer; } .search-bar-wrap { margin: 0px 6% 0 0; width: 65%; padding: 0; position: relative; display: flex; } .user-login-section { width: 100%; display: flex; justify-content: flex-end; align-items: center; margin-left: 0%; } .search-bar-wrap input[type="text"],.search-bar-wrap input[type="password"],.search-bar-wrap input[type="date"],.search-bar-wrap input[type="number"] { border: 1px solid #868383; border-radius: 10px 0px 0px 10px; width: 99%; padding: 10px; height: 32px; outline: none; } .search-bar-wrap:after { top: 4px; font-family: "Font Awesome 5 Free"; 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; } .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: 170px; } .user-login-head { display: flex; justify-content: center; align-items: center; padding: 5px 10px; } .user-wrap img { background: #032DA1; width: 17px; border-radius: 50%; padding: 0; margin: 0px 6px 8px 0px; } .user-wrap:hover .login-wrap-open { display: block; transition: 0.5s; } .user-wrap h5 { font-size: 15px; display: flex; align-items: center; margin-bottom:0; } .login-wrap-open li a{ color: #000; } .user-wrap h5 span { font-weight: 500; margin-right: 12px; text-overflow: ellipsis; width: 100px; white-space: nowrap; display: inline-block; overflow: hidden; } .profileImage { width: 20px; padding: 2px 10px; border-radius: 50%; background: #032da1; font-size: 10px; color: #fff; display: flex; align-items: center; justify-content: center; margin-right: 7px; } .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: 14px; transition: 0.5s; padding: 2px 10px; margin: 5px 0; border-radius: 5px; } .login-wrap-open ul li span { margin-right: 8px; font-size: 15px; } .login-wrap-open ul li:hover { transition: 0.5s; background: red; color: #fff; } .login-wrap-open ul li:hover a{ color: #fff; } .login-wrap-open ul { margin-bottom: 0px !important; } .login-wrap-open ul li:nth-child(2):hover { background: rgb(230, 229, 229); } .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; } /**********************ASIDE***************************/ .sideMenu { height: 100%; /*width: 68px; */ 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; overflow: -moz-scrollbars-none; -ms-overflow-style: none; overflow: hidden; } ul.side-list { width: 135%; height: 76%; overflow-y: scroll; padding-right: 15px; box-sizing: content-box; overflow-x: hidden; list-style-type: none; } .sideMenu::-webkit-scrollbar{ width: 0 !important } .mobileMenu { display: none; } .logo-wrap { padding: 8px 23px; display: flex; align-items: center; margin-top: 30px; cursor: pointer; } .logo-name h3 { line-height: 23px; } .logo-name p { font-size: 12px; } .logo-name { margin: 22px 0px 0px 9px; } .logo-wrap img { width: 32px; } .sideMenu ul li.list { padding: 10px 15px; font-weight: 500 !important; font-size: 15px; transition: 0.5s; margin: 5px 0; cursor: pointer; border-radius: 10px 0px 0px 10px; list-style-type: none; } .sideMenu ul li.list span{ font-size:18px; font-weight: 550; } .sideMenu ul li.list a { color: #ffffff; text-decoration: none; } .sideMenu ul li img { /*margin-right: 25px;*/ margin: -5px 12px 0px 9px; 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 { display: none; } .sideMenu ul li.active .icon-inactive { display: none; } .sideMenu ul li.active .icon-active { display: inline-block; } .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; } .sideMenu ul li.list:hover .icon-inactive { display: none; } /************************MAIN***************************/ main { padding: 0 0 40px; margin-bottom: 80px; display: flex; margin-left: 12%; justify-content: space-between; flex-wrap: wrap; transition: 0.5s; width: 100%; } .main-wrap { width: 100%; margin-left: 0; display: flex; } .main-left { width: 50%; } .main-right { width: 50%; } .common-heading { margin-bottom: 20px; position: relative; } .common-heading h2 { font-size: 22px; font-weight: 600; } /* //dashboard-sec */ .col-md-3.dashboard-box { width: auto; height: auto; background: var(--unnamed-color-ffffff) 0% 0% no-repeat padding-box; background: #FFFFFF 0% 0% no-repeat padding-box; box-shadow: 0px 3px 6px #00000029; border-radius: 12px; } .dashboard-boxes{ display: flex; justify-content: space-between; flex-wrap: wrap; } .dash-img { width: 100px; height: 100px; margin: auto; } .dash-img.dash-student-img { width: 85px; height: 85px; margin: 0% 0% 8% 0%; } .dash-img.dash-room-img { margin: -11% 0% 11% 0%; } .dashboard-box { width: 173px; background: var(--unnamed-color-ffffff) 0% 0% no-repeat padding-box; background: #FFFFFF 0% 0% no-repeat padding-box; box-shadow: 0px 3px 6px #00000029; border-radius: 12px; opacity: 1; text-align: center; padding: 10px 0px; } .dash-main-row { margin-left: 5%; } .dash-head { font-size: 22px; text-align: left; padding: 5px 0px; font-weight: 550; } .dash-no { font-size: 33px; font-weight: 550; margin-top: 5%; } .dash-name { font-size: 15px; font-weight: 550; } .block-details-head{ margin-top:5%; } .dash-tab-head { font-size: 22px; text-align: left; padding: 35px 0px 11px 0px; font-weight: 550; } .dash-th { font-size: 18px; text-align: left; font-weight: 550; } .dash-th-action { font-size: 18px; text-align: center; font-weight: 550; } .dash-table td{ font-size: 15px; } .preview-img { text-align: center; cursor: pointer; } .table th { border-top: none !important; border-bottom: 1px solid #000 !important; } .table-footer{ display: flex; justify-content: space-between; border-top: 1px solid black; padding-top: 1%; } .table-footer-left p{ font-size: 15px; text-align: left; } .table-footer-right{ display: flex; justify-content: end; } .table-footer-right p{ font-size: 15px; text-align: left; } .tab-footer-count{ border: 1px solid #707070; border-radius: 5px; padding: 1% 7%; opacity: 1; cursor: pointer; } .tab-footer-count:hover{ background-color: #032da1; color: white; } .footer-right-prev { margin-right: 10%; cursor: pointer; } .footer-right-next { margin-left: 10%; cursor: pointer; } /* ____________________________________________dashboard-ends_______________________________ */ /*------------------------------------------- manage-rooms ----------------------------------*/ .rooms-sections{ display: flex; justify-content: space-around; border: 1px solid #707070; border-radius: 5px; width: 100%; margin-left: 0%; margin: 4% 0% 4% 0%; } .section-sec { cursor: pointer; } .section-sec:hover .sec-head{ background-color: #032DA1; color: white !important; } .section-sec:active { padding: 5px 0px; background-color: #032DA1; color: white; } .nav-link:active{ background-color: #032DA1 ; color: white ; } .sec-head{ margin-bottom: 0px; text-align: center; border-radius: 5px; font-weight: 400; color: #000 !important; } .nav-pills .nav-link.active { color: #fff !important; background-color: #032DA1 !important; } .block-head{ display: flex; justify-content: space-between; width: 100%; } .dash-tab-deleted{ font-size: 14px; color: #2100FF; text-decoration: underline; font-weight: 400; cursor: pointer; padding: 35px 0px 11px 0px; } .action-img { margin-right: 10%; } .rooms-td { text-align: center !important; } .dash-th.rooms-th { text-align: center !important; } .nav-link { display: block; padding: .3rem 0.5rem !important; } .block-head-left{ display: flex; width: 80%; } .block-heads-left{ display: flex; width: 80%; } .block-head-left-2-2-filter { margin-bottom: 0px; font-size: 15px; font-weight: 550; } .block-head-left-2 { display: flex; margin-left: 2%; padding: 10px 0px 0px 0px; } .block-head-left-2.bed-left-select { margin-right: 1%; } .col-md-10.col-lg-10.p-0.table-width { max-width: 100%; } .block-head-right { width: 30%; text-align: right; } .block-heads-right{ width: 20%; text-align: right; } #inputState { width: 100px; height: 30px; border: 1px solid black; } .block-head-left-2-1 { margin: 22% 5% 0% 0%; } .filter-img { margin-right: 3%; } .add-block-body p{ font-size: 14px; color: black; line-height: 18px; margin: 0.5% 0% !important; text-align: left !important; } .add-block-header { background-color: #EBEBEB; justify-content: center; padding: 10px 10px; } .add-icon { margin:0% 2%; } .add-block-header h5 { font-size: 16px; text-align: center !important; } .add-block-input { margin-bottom: 0.3% !important; } .add-floor-inputs { display: flex; justify-content: space-between; width: 90%; } .svg-inline--fa.fa-w-14 { width: 0.875em; margin: auto 2%; cursor: pointer; } .add-block-inputs { margin-bottom: 2%; width: 95%; } .add-block-blue { background-color: #032DA1; color: white; padding: 5px 35px; } .add-block-blue:hover { background-color: #183ea7; color: white; padding: 5px 35px; } .add-block-cancel { background-color: #000000; color: white; padding: 5px 45px; } .add-block-cancel:hover { background-color: #3a3939; color: white; padding: 5px 45px; } .add-block-footer { display: flex; justify-content: center !important; } .edit-block-input { display: flex; justify-content: space-between; width: 100%; } .edit-delete-ico { width: 3%; cursor: pointer; margin-left: 1%; } .edit-floor-input { display: flex; width: 100%; justify-content: space-between; } .edit-floor-left { display:flex; width: 80%; } .edit-floor-right { width: 20%; margin-top: 1%; } .edit-floors-input { margin-bottom: 0%; } .edit-delete-icon { cursor: pointer; margin-left: 10%; } .edit-floor-titles { display: flex; justify-content: space-between; width: 90%; margin-bottom: 0%; margin-top: 2%; } .edit-floor-checkbox { margin-top: 1.5%; } .edit-rooms-input{ display: flex; justify-content: space-between; width: 50%; } .edit-rooms-ico{ width: 5%; cursor: pointer; } .add-rooms-inputs{ margin-bottom: 2%; width: 85%; } /*-------------------------------------- //manage-rooms-end ----------------------------------*/ /*--------------------------------------deleted-blocks-start----------------------------------*/ .deleted-btn{ background-color: #000000 !important; margin-top: 3%; font-family: Roboto; } /*--------------------------------------deleted-blocks-end----------------------------------*/ /*--------------------------------------student-start----------------------------------*/ .student-view{ display: flex; color: #032DA1; text-align: center; justify-content: center; cursor: pointer; } .student-view p{ margin-bottom: 0px; margin-left: 3%; } .student-edit-btn{ border: 1px solid #032DA1; border-radius: 5px; color: black; padding: 5px 25px !important; } .student-edit-btn:hover{ background-color: #032DA1; color: white; padding: 5px 25px !important; } .student-update-btn{ background-color: #032DA1; color: white; } .student-update-btn a{ color: white !important; text-decoration: none !important; } .student-update-btn:hover{ background-color: #032DA1; color: white; } .block-head-left-select { display: flex; } .block-head-right-search { display: flex; } .right-search-input{ padding: 5px 10px !important; height: 35px; margin-left: 2%; } .block-head-left-2-students{ margin: 5% 5%; } .block-head-left-2-students-full { display: flex; padding: 0px 0px 0px 0px; width: 85%; flex-wrap: wrap; margin-top: -1%; } .student-select{ width: 62px !important; height: 30px; border: 1px solid black; margin-left: 5%; margin-right: 5%; } .student-select-titles{ margin-top: 2%; } .block-head-left-2-2-students{ margin: 0px 0px 10px 20px; } .block-head-left-2-students { margin: 2% 0% 0% 8%; } .students-select-box{ width: 135px !important; height: 30px; } .right-search-title{ margin-top: 2%; } .student-view a{ text-decoration: none; color: #032DA1; font-size: 18px; font-weight: 400; margin-left: 2%; } /*--------------------------------------student-end----------------------------------*/ /*--------------------------------------student-details-start----------------------------------*/ .student-sections { display: flex; justify-content: space-around; border: 1px solid #707070; border-radius: 5px; width: 100%; margin-left: 0%; margin: 0% 0% 4% 0%; } .student-info-fields{ display: flex; justify-content: space-between; width: 60%; margin-bottom: 0px; } .student-fields-left{ width: 50%; margin-bottom: 8px; font-weight: 500; } .student-fields-right{ width: 50%; margin-bottom: 8px; } .student-info-img{ max-width: 150px; height: auto; object-fit: contain; } .student-emergency-title{ font-size: 18px; text-align: left; margin: 5% 0% 2% 0%; font-weight: 600; } .course-details{ margin: 3% 0% 2% 0%; } .course-info-fields{ display: flex; justify-content: space-between; width: 80%; margin-bottom: 0px; } .course-fields-left{ width: 30%; margin-bottom: 8px; font-weight: 500; } .course-fields-right{ width: 70%; margin-bottom: 8px; display: block; } .fields-right-1{ width: 40%; display: flex; margin-bottom: 0px !important; } .fields-right-2{ width: 60%; display: flex; margin-bottom: 0px !important; } .student-check-img{ width: 8%; margin-right: 10%; } .course-fields-right p{ margin-bottom: 0px !important; } .course-fields-right_block { display: flex; margin: 0px 0px 20px 0px; } .assign-select-box{ width: 90% !important; border: none !important; background-color: #F2F0F0 !important; margin: 3px 3px 10px 0px; font-size: 15px !important; } .assign-btn{ padding: 2px 15px !important; font-size: 14px !important; } .assign-modal-head{ border: none !important; padding: 0.5rem !important; } .assign-modal-body{ padding: 0.5rem !important; } .assign-modal { max-width: 315px !important; margin: 1.75rem auto; } .assign-modal-body p{ font-size: 18px; font-weight: 500; margin-top: 3%; } .hidesidebar{ text-align: right; padding: 10px 10px 0px 0px; cursor: pointer; display: none; } .hidethediv{ display: none; transition: .3s; } .collapse { display: none !important; } .collapse.show { display: block !important; } .dropdown-item:hover{ text-decoration: none; background-color: #032DA1 !important; color: white !important; border-radius: 30px; } #Authorization-submenu a:hover{ color: white !important; } a.dropdown-item.roles-item.active{ text-decoration: none; background-color: #032DA1 !important; color: white !important; border-radius: 30px; } a.dropdown-item .users-item .active{ text-decoration: none; background-color: #032DA1 !important; color: white !important; border-radius: 30px; } .row.dash-main-row.details-row { padding-bottom: 3%; } .fade p { margin-bottom: 0; } /*****START - Login*****/ .login-eye-pos{ position: relative; } .login-eye { position: absolute; right: 10px; cursor: pointer; top: 10px; } .login-eye-icon:after { position: absolute; content: ""; background: #212529; height: 1px; width: 25px; transform: rotate(36deg); top: 10px; left: -3px; } /*****END OF - Login*****/ /*****START - reset password*****/ .rp-eye-one, .rp-eye-two { position: absolute; right: 10px; cursor: pointer; top: 32px; } .rp-eye-pos{ position: relative; } .rp-eye-one-icon:after, .rp-eye-two-icon:after { position: absolute; content: ""; background: #212529; height: 1px; width: 25px; transform: rotate(36deg); top: 10px; left: -3px; } /*****END OF - reset password*****/ 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; } thead input { width: 100%; } .dataTables_wrapper { margin-top: 30px; } .sub_tabbtnsec{ display: flex; } .sub_tabbtnsec a { margin: 0 8px; } .svg-inline--fa.fa-pencil-alt.fa-w-16{ color: darkblue !important; } .svg-inline--fa.fa-trash.fa-w-14{ color:red !important; } table.dataTable { border-bottom : 1px solid black; } #add-btn { margin-bottom: 25px; } label.form_err { color: red; } .password-wrp { position: relative; } .password-wrp .passwrd-icon { position: absolute; top: 8px; right: 8px; cursor: pointer; color: #878a8d; } .password-wrp .icon-y:after { position: absolute; content: ""; background: #878a8d; height: 1px; width: 25px; transform: rotate(36deg); top: 10px; left: -3px; } .user-role td { width : 150px; }