/* rubik-300 - latin */ @font-face { font-family: "Rubik"; font-style: normal; font-weight: 300; src: url("../fonts/rubik-v14-latin/rubik-v14-latin-300.eot"); /* IE9 Compat Modes */ src: local(""), url("../fonts/rubik-v14-latin/rubik-v14-latin-300.eot?#iefix") format("embedded-opentype"), url("../fonts/rubik-v14-latin/rubik-v14-latin-300.woff2") format("woff2"), url("../fonts/rubik-v14-latin/rubik-v14-latin-300.woff") format("woff"), url("../fonts/rubik-v14-latin/rubik-v14-latin-300.ttf") format("truetype"), url("../fonts/rubik-v14-latin/rubik-v14-latin-300.svg#Rubik") format("svg"); /* Legacy iOS */ } *, body { font-family: "Rubik", sans-serif; } body { background-color: #f3f2f2; } /* width */ ::-webkit-scrollbar { width: 0.8vw; } /* Track */ ::-webkit-scrollbar-track { background: #f3f2f2; border-radius: 0.5vw; } /* Handle */ ::-webkit-scrollbar-thumb { background: #ccc; border-radius: 0.5vw; } /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { background: #999; } .btn { border-radius: 2px; } .dim { /* For Internet Explorer */ -webkit-box-shadow: 0 0 0 10000px rgba(0, 0, 0, 0.5) !important; box-shadow: 0 0 0 10000px rgba(0, 0, 0, 0.5) !important; /* For other browsers */ -webkit-box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.5) !important; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.5) !important; } .page-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } #side-nav a:hover, a:hover { text-decoration: none; } .text-orange { color: #fd7e14; } a.text-orange:hover { color: #ffa63c; } .bg-orange { background: #fd7e14 !important; } .bg-error { background-color: rgba(220, 53, 69, 0.1); border-radius: 2em; } .bg-correct { background-color: rgba(41, 168, 71, 0.1); border-radius: 2em; } .main { padding-top: 80px; } .fa-1-5x { font-size: 1.3em; } .blue-gradient { background: linear-gradient(40deg, #45cafc, #303f9f) !important; } .blue-text { color: #2196f3 !important; } .bg-gray { background: #f3f2f2; } .table td, .table th { vertical-align: middle; } .table tbody > tr > td > a { display: -webkit-box; display: -ms-flexbox; display: flex; color: #2196f3; padding: 0.5rem 1rem; -webkit-transition: 0.2s; transition: 0.2s; } .table tbody > tr > td > a:hover { background-color: rgba(157, 220, 223, 0.3); border-radius: 0.2em; } .table tbody > tr > td > a:focus { -webkit-box-shadow: 0 0 0 0.3rem rgba(127, 190, 193, 0.5); box-shadow: 0 0 0 0.3rem rgba(127, 190, 193, 0.5); } .table input { padding: 10px; max-width: 130px; border-style: none; border: 1px solid #bbbbbb; border-radius: 0.25rem; -webkit-transition: 0.3s; transition: 0.3s; } .table input:focus { color: #495057; background-color: #fff; border-color: #80bdff; outline: 0; -webkit-box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); } .table .dropdown #dropdownMenuButton { color: #999; } .table-title { text-transform: uppercase; font-size: 16px; padding: 10px; margin: 10px 0; color: #2196f3; } #main { padding-top: 65px; padding-bottom: 3rem; padding-left: 300px; -webkit-transition: 0.5s; transition: 0.5s; } @media (max-width: 800px) { #main { padding-top: 115px; } } .header-title-xl { font-size: 2rem; font-weight: 300; line-height: 1.2; } .header-title-md { font-size: 1.5rem; font-weight: 300; line-height: 1.2; } #popup-box { position: absolute; } #popup-box { display: none; } #popup-box-messages { position: absolute; } .box-messages { position: fixed; width: auto; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 999; padding: 10px; overflow: hidden; border-radius: 0.3em; background: #fff; -webkit-box-shadow: 0 0 100px rgba(0, 0, 0, 0.5); box-shadow: 0 0 100px rgba(0, 0, 0, 0.5); -webkit-transition: 0.5s; transition: 0.5s; } @media (max-width: 700px) { .box-messages { width: 96%; } } .box-messages > #popup-btn-messages { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; float: right; } .bs-md { -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.1) !important; box-shadow: 0 0 15px rgba(0, 0, 0, 0.1) !important; } .quiz-wrapper { text-align: center; overflow: hidden; border-radius: 0.3em; background: #fff; -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); } .content-center { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; max-width: 1500px; } .fa-check-circle { color: #28a745; } .fa-exclamation-circle { color: #dc3545; } /* ########################## Search Form ########################## */ .search-form { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .search-form input { margin: 5px; } .search-btn { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-transform: uppercase; text-align: center; background-color: #4272d7; color: #fff; padding: 0 15px; height: 43px; cursor: pointer; border-radius: 3px; border-style: none; -webkit-transition: 0.25s; transition: 0.25s; } .search-btn i { font-size: 20px; margin: 0 auto; } .search-btn:hover { background: #3868cd; } .search-btn:focus, .search-btn.focus { -webkit-box-shadow: 0 0 0 0.2rem rgba(92, 106, 196, 0.5); box-shadow: 0 0 0 0.2rem rgba(92, 106, 196, 0.5); } .btn-flex { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 10px auto; } .btn-flex i { margin-right: 8px; font-size: 20px; } form > .btn-flex > a, form > .btn-flex > span, form > .btn-flex > button { margin: 0 10px; } form > .btn-flex i { margin-right: 8px; font-size: 24px; } .calender-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } .calender-header i { margin-right: 8px; font-size: 24px; } .calender-header span { margin-left: 8px; border-style: none; background: #fff; color: #fd7e14; -webkit-box-shadow: 0px 2px 5px 2px rgba(0, 0, 0, 0.2); box-shadow: 0px 2px 5px 2px rgba(0, 0, 0, 0.2); } @media screen and (max-width: 450px) { .calender-header { font-size: 12px; } .calender-header i { font-size: 14px !important; } .calender-header span { font-size: 8px; } } @media screen and (max-width: 400px) { .calender-header { display: none; } } li { list-style: none; } .text-danger i { font-size: 25px; } .text-muted-s { font-size: small; color: #8d8d8d; } .text-muted-xs { font-size: 12px; color: #8d8d8d; /* border-bottom: 1px solid #ddd; */ } .text-muted-xxs { font-size: xx-small; color: #8d8d8d; /* border-bottom: 1px solid #ddd; */ } .form-error { list-style: none; /* padding: 10px; */ display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 5px; } .danger-header { /* text-align: center; */ padding: 0.75rem 1.25rem; border-radius: 0.2em; background: #dc3545; color: #fff; /* margin: 0 auto; */ } .danger-header i { font-size: 20px; margin-right: 8px; } .checkbox { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 10px; list-style: none; color: #5c6ac4; } .box-shadows { -webkit-box-shadow: 0px 10px 10px 0px #dbdbdb; box-shadow: 0px 10px 10px 0px #dbdbdb; /* at the bottom */ -webkit-box-shadow: 10px 0px 10px 0px #dbdbdb; box-shadow: 10px 0px 10px 0px #dbdbdb; /* right side */ -webkit-box-shadow: 0px 5px 15px 5px #cacaca; box-shadow: 0px 5px 15px 5px #cacaca; /* left, right, bottom */ -webkit-box-shadow: 0px 2px 10px 0px #dbdbdb; box-shadow: 0px 2px 10px 0px #dbdbdb; /* full side shadow */ -webkit-box-shadow: 2px 0px 5px 0px rgba(0, 0, 0, 0.3); box-shadow: 2px 0px 5px 0px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0px 2px 5px 2px rgba(0, 0, 0, 0.3); box-shadow: 0px 2px 5px 2px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3); box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3); } .level-wrapper { position: absolute; left: 5px; top: 11.5px; } .date-wrapper { width: 100%; bottom: 0; padding: 10px; background: rgba(0, 0, 0, 0.03); } .info-text { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; padding: 5px 10px; font-size: 12px; color: #fff; background: #17a2b8; border-radius: 2em; /* box-shadow: 0px 2px 10px 2px #afafaf; */ -webkit-box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.3); box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.3); } .level-wrapper > .info-text { background: #dc3545; } .session .info-text { font-size: 14px; /* padding: 5px 10px; */ } /*====================================== //--//--> Top Navigation ======================================*/ #top-navbar { position: fixed; top: 0; right: 0; left: 300px; -webkit-margin-start: -10px; z-index: 90; /*padding: 0.4rem 1rem;*/ background: #f5f5f5; -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1); -webkit-transition: 0.3s; transition: 0.3s; } #top-navbar .nav-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #top-navbar .nav-wrapper .form-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 0.8; -ms-flex: 0.8; flex: 0.8; } #top-navbar .nav-wrapper .form-header .au-input { -webkit-box-flex: 0.9; -ms-flex: 0.9; flex: 0.9; } #top-navbar .nav-wrapper .form-header button { -webkit-box-flex: 0.1; -ms-flex: 0.1; flex: 0.1; } #top-navbar .nav-wrapper .toggle-btn { cursor: pointer; padding: 0.2rem 0.5rem; } #top-navbar .nav-wrapper .toggle-btn:hover { background-color: #fff; } #top-navbar.toggle-active { left: 0; } @media (max-width: 800px) { #top-navbar .nav-wrapper .form-header { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } #top-navbar .nav-wrapper .toggle-btn { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } #top-navbar .nav-wrapper .dropdown { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } } .manage-wrap { position: fixed; bottom: 0; right: 0; left: 300px; padding: 0.5rem; z-index: 10; background-color: rgba(255, 255, 255, 0.8); border-top: 1px solid #6c757d; -webkit-transition: 0.3s; transition: 0.3s; } .manage-wrap.toggle-active { left: 0; } /* ########################## Form ########################## */ .au-input { display: -webkit-box; display: -ms-flexbox; display: flex; width: auto; line-height: 40px; border: 1px solid #e5e5e5; font-family: inherit; font-size: 13px; color: #666; padding: 0 17px; border-radius: 3px; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } .au-input:focus { border: 1px solid #343a40; } .au-input--xl { min-width: 935px; } @media (max-width: 1600px) { .au-input--xl { min-width: 500px; } } @media (max-width: 1000px) { .au-input--xl { min-width: 150px; } } @media (max-width: 767px) { .au-input--xl { min-width: 150px; max-height: 45px; } } @media (max-width: 800px) { .nav-wrapper .form-header { -ms-flex-order: 1; -webkit-box-ordinal-group: 2; order: 1; width: 100%; } .nav-wrapper .form-header .au-input--xl { width: 100%; } .nav-wrapper .toggle-btn { -ms-flex-order: 2; -webkit-box-ordinal-group: 3; order: 2; } .nav-wrapper .dropdown { -ms-flex-order: 3; -webkit-box-ordinal-group: 4; order: 3; } } .au-btn--submit { position: relative; right: 0; min-width: 65px; line-height: 43px; border: 1px solid #e5e5e5; border-radius: 3px; /* background: #4272d7; */ background: #343a40; cursor: pointer; margin-left: -3px; } @media (max-width: 767) { .au-btn--submit { min-width: 45px; } } .au-btn--submit:hover { background: #52585e; } .au-btn--submit > i { /* font-size: 15px; */ color: #fff; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } /* #################################################################### */ .dropdown { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; /* cursor: context-menu; */ } .dropdown .profile-pic { /* flex: 1; */ width: 40px; max-width: 40px; max-height: 40px; min-width: 40px; min-height: 40px; border-radius: 50%; margin: 0px 5px; } /*.dropdown .profile-pic:hover { box-shadow: 0px 0px 0px 5px #ddd; transition: .2s; }*/ .dropdown .dropdown-item i { margin-right: 8px; } .dropdown .dropdown-item { padding-top: 8px; padding-bottom: 8px; } /*====================================== //--//--> Drop Down Navigation ======================================*/ .drop-down { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; /* cursor: context-menu; */ } .drop-down > i { margin-left: 10px; } .drop-down span:hover { color: #999; -webkit-transition: 0.2s; transition: 0.2s; } .drop-down:hover .content { display: block; -webkit-transition: 0.5s; transition: 0.5s; -webkit-animation: content 0.5s ease-in-out forwards; animation: content 0.5s ease-in-out forwards; } .content { position: absolute; top: 100%; min-width: 12rem; right: 0; z-index: 1; display: none; float: left; padding: 0.5rem 0; /* margin: 0.125rem 0 0; */ color: #212529; text-align: left; list-style: none; background-color: #fff; background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 0.25rem; } @-webkit-keyframes content { 0% { -webkit-transform: scale(0) translateY(30px); transform: scale(0) translateY(30px); } 100% { -webkit-transform: scale(1) translateY(0px); transform: scale(1) translateY(0px); } } @keyframes content { 0% { -webkit-transform: scale(0) translateY(30px); transform: scale(0) translateY(30px); } 100% { -webkit-transform: scale(1) translateY(0px); transform: scale(1) translateY(0px); } } /* @keyframes content-out { 0%{transform: scale(1);} 90%{transform: scale(1);} 100%{transform: scale(0);} } */ .content i { margin-right: 8px; } .content .content-a a { display: block; border: 1px solid #fff; text-decoration: none; padding: 10px; } .content .content-a a:hover { color: #fff; background-color: #007bff; border: 1px solid #007bff; -webkit-transition: 0.5s; transition: 0.5s; } .content .content-a a:focus, .content .content-a a.focus { color: #007bff; background-color: #fff; -webkit-transition: 0s; transition: 0s; } hr { margin: 10px 0px; border: 0.5px solid #f3f2f2; } .content .sign-out { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } /*====================================== //--//--> Side Navigation ======================================*/ #side-nav { width: 300px; position: fixed; left: 0; top: 0; bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; z-index: 100; overflow-y: auto; resize: horizontal; background-color: #fff; -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.16), 0px 2px 10px 0px rgba(0, 0, 0, 0.12); -webkit-transition: 0.3s; transition: 0.3s; } #side-nav i { margin-right: 8px; } #side-nav footer { margin-top: 4rem; } #side-nav .top-side { background: #f5f5f5; -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1); margin-bottom: 10px; padding: 0.5rem 2rem; } #side-nav .top-side .desktop-hide { display: none; } #side-nav .top-side .desktop-hide .toggle-btn { position: absolute; top: 0; right: 0; left: 0; background-color: #fff; color: #f2f2f2; padding: 0 1rem; border-radius: 2px; cursor: pointer; margin-left: auto; -webkit-transition: 0.5s; transition: 0.5s; } #side-nav .top-side .desktop-hide .toggle-btn i { color: #999; margin: 0 auto; } #side-nav .top-side .desktop-hide .toggle-btn i:hover { color: #666; -webkit-transition: 0.2s; transition: 0.2s; } #side-nav .top-side .logo img { width: 90%; } #side-nav ul { padding: 0; } #side-nav ul li { list-style: none; } #side-nav ul li:last-child { border-bottom: none; } #side-nav ul li a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 1rem 2rem; color: #666; border-radius: 0 2em 2em 0; -webkit-transition: 0.25s; transition: 0.25s; } #side-nav ul li a:hover { color: #007bff; background: rgba(0, 111, 255, 0.05); } #side-nav ul li.active a { background: #006fff; color: #fff; } #side-nav.toggle-active { -webkit-box-shadow: 0px 0px 0px 0px #dbdbdb; box-shadow: 0px 0px 0px 0px #dbdbdb; left: -300px; } @media screen and (max-width: 1150px) { #side-nav .top-side { padding-top: 3rem; } #side-nav .top-side .desktop-hide { display: block; } } #main.toggle-active { -webkit-box-shadow: 0px 0px 0px 0px #dbdbdb; box-shadow: 0px 0px 0px 0px #dbdbdb; padding-left: 0px; } @media screen and (max-width: 1150px) { #side-nav { left: -300px; } #side-nav.toggle-active { left: 0; -webkit-box-shadow: 0 0 0 10000px rgba(0, 0, 0, 0.5); box-shadow: 0 0 0 10000px rgba(0, 0, 0, 0.5); } #main { padding-left: 0; } #top-navbar { left: 0; } .manage-wrap { left: 0; } } /*====================================== //--//--> Input Navigation ======================================*/ #input-nav { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0.3rem 0.9rem; margin-bottom: 1rem; color: #fd7e14; border-radius: 3px; background-color: #fff !important; -webkit-box-shadow: inset 0 0 2.5rem rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 2.5rem rgba(0, 0, 0, 0.2); } #input-nav a { color: #007bff; } #input-nav a:hover { text-decoration: underline; } #input-nav a::after { content: ">"; color: #666; margin: 0 5px; vertical-align: middle; } /*====================================== //--//--> End Navigation ======================================*/ .footer { top: 100%; bottom: 0; display: block; text-align: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 0.75rem 1.25rem; margin-top: 4rem; background-color: rgba(0, 0, 0, 0.03); border-top: 1px solid rgba(0, 0, 0, 0.1); } .footer:last-child { border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px); } .web-link { padding: 2px 10px; margin: 15px 0px; display: inline-block; color: #fff; background: #6c757d; border-color: #6c757d; font-weight: bold; border-radius: 2em; -webkit-transition: 0.2s; transition: 0.2s; } .web-link:hover { background: #5c6066; } .web-link:focus, .web-link.focus { -webkit-box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5); box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5); } a { color: #666; text-decoration: none; } /*====================================== //--//--> Dashboard ======================================*/ .item-container { min-width: 180px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; background-color: #ffffff; border-radius: 0.3em; -webkit-box-shadow: 0px 0 10px 3px rgba(0, 0, 0, 0.15); box-shadow: 0px 0 10px 3px rgba(0, 0, 0, 0.15); } .col-md-2 i { margin-right: 8px; } .col-md-4 i { margin-right: 8px; } .col-md-8 i { margin-right: 8px; } .dashboard-img { width: 100%; border-top-left-radius: 0.3em; border-top-right-radius: 0.3em; } .img-round { width: 65px; height: 65px; overflow: hidden; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 100px; -webkit-box-shadow: 0px 0px 0px 5px rgba(0, 0, 0, 0.04); box-shadow: 0px 0px 0px 5px rgba(0, 0, 0, 0.04); } .img-round > img, .thumb > img { max-height: 110%; min-height: 100%; } .dashboard-description { padding: 10px; } .dashboard-description p { margin: 10px; } .program-description { position: relative; padding: 1rem 2rem; } .program-description::before { content: "*"; position: absolute; top: 0; left: 10px; color: #007bff; font-weight: bold; font-size: 30px; margin-right: 1rem; } /*====================================== //--//--> End Dashboard ======================================*/ /*====================================== //--//--> Admin panel ======================================*/ .admin-panel { color: #fff; } .admin-panel a { float: right; } .admin-panel p { color: #fff; padding: 0rem; font-size: 0.8rem; } .admin-panel span { margin-top: 10px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 1.5rem; } .bg-gradient-light { background: linear-gradient(100deg, #343a40, #fff) !important; } /* ######################################### */ .gray-color { background: #e2e2e2; } .update-delete { /* font-size: small; */ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .update { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; /* align-items: center; */ margin-right: 1px; padding: 5px; color: #007bff; border-radius: 0.3em; -webkit-transition: 0.2s; transition: 0.2s; } .update i { font-size: 20px; margin: 0 auto; } .delete i { font-size: 20px; margin: 0 auto; } .update:hover { background: #007bff; color: #fff; } .delete { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; /* align-items: center; */ padding: 5px; color: #dc3545; border-radius: 0.3em; -webkit-transition: 0.2s; transition: 0.2s; } .delete:hover { background: #dc3545; color: #fff; } .update:focus, .update.focus { -webkit-box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5); box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5); } .delete:focus, .delete.focus { -webkit-box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5); box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5); } .dropdown-menu .update, .dropdown-menu .delete { display: block; padding: 10px; } .pagination { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 16px; margin: 0 auto; padding: 5px 25px; border: 1px solid #ddd; border-radius: 2em; } .pagination > a { padding: 5px 10px; margin: 0 5px; color: #9e9e9e; border: 1px solid #ddd; border-radius: 2em; -webkit-transition: 0.5s; transition: 0.5s; } .pagination > a:hover { color: #5c6ac4; border: 1px solid #5c6ac4; border-radius: 2em; } .pagination > a > b { color: #fff; font-weight: 1000; } .pagination-active, .pagination > a:focus { color: #fff; background: #5c6ac4; } .btn i { margin-right: 8px; } .add-button { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-transform: uppercase; text-align: center; background: linear-gradient(-40deg, #45cafc, #303f9f); color: #fff; padding: 15px; margin-bottom: 10px; cursor: pointer; border-radius: 3px; -webkit-transition: 0.5s; transition: 0.5s; } .add-button .fa-plus { margin-right: 8px; } .add-button .fa-angle-down { margin-left: 8px; } .add-button:focus, .add-button.focus { -webkit-animation: zoom-in-out 0.4s ease-in-out forwards; animation: zoom-in-out 0.4s ease-in-out forwards; } @-webkit-keyframes zoom-in-out { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(0.85); transform: scale(0.85); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes zoom-in-out { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(0.85); transform: scale(0.85); } 100% { -webkit-transform: scale(1); transform: scale(1); } } .alert { position: relative; padding: 0.75rem 1.25rem; margin-bottom: 1rem; border: 1px solid transparent; border-radius: 0.25rem; } .alert i { font-size: 20px; margin-right: 8px; } .alert-dismissible { padding-right: 4rem; } .alert-dismissible .close { position: absolute; top: 0; right: 0; padding: 0.75rem 1.25rem; color: inherit; } .close { color: #dc3545; cursor: pointer; font-size: 20px; } .alert-success { color: #155724; background-color: #b0ddbb; border-color: #c3e6cb; } .alert-success hr { border-top-color: #b1dfbb; } .alert-success .alert-link { color: #0b2e13; } .alert-info { color: #0c5460; background-color: #d1ecf1; border-color: #bee5eb; } .alert-info hr { border-top-color: #abdde5; } .alert-info .alert-link { color: #062c33; } .alert-warning { color: #856404; background-color: #fff3cd; border-color: #ffeeba; } .alert-warning hr { border-top-color: #ffe8a1; } .alert-warning .alert-link { color: #533f03; } .alert-danger { color: #721c24; background-color: #f8d7da; border-color: #f5c6cb; } .alert-danger hr { border-top-color: #f1b0b7; } .alert-danger .alert-link { color: #491217; } .form-class { width: 100%; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .form-container { text-indent: 10px; border-radius: 0.3em; background-color: #ffffff; margin: 20px; width: 400px; min-width: 50%; display: inline-block; -webkit-box-shadow: 0px 10px 10px 5px #c3c3c3; box-shadow: 0px 10px 10px 5px #c3c3c3; } .form-group { margin-bottom: 1rem; } .form-group-btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 1rem; } .title-1 { position: relative; display: inline-block; font-family: inherit; text-transform: capitalize; font-weight: 400; font-size: 30px; border-radius: 0.2em; } .title-1::before { content: ""; position: absolute; bottom: 0; right: -5px; width: 50%; height: 15px; z-index: -1; border-radius: 1px; background-color: rgba(83, 126, 226, 0.2); } .title-1 i { margin-right: 8px; } .title-line { width: 30px; height: 5px; background-color: #537ee2; border-radius: 2em; margin: 10px auto; /* margin-bottom: 20px; */ } .title-info { font-weight: 400; font-size: 17px; padding: 10px; background: #f3f2f2; /* color: #fff; */ text-align: center; margin: 0px; } .title-success { color: #fff; background: #28a745; } .title-warning { color: #fff; background: #ffc107; } .title-danger { color: #fff; background: #dc3545; } .form-title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-weight: 400; font-size: 17px; padding: 10px; /* background-color: #33b5e5; */ background: linear-gradient(40deg, #45cafc, #303f9f); color: #fff; text-align: center; margin-bottom: 15px; } .form-title i { margin-right: 8px; } .aside-text { padding: 10px; background: linear-gradient(40deg, #45cafc, #303f9f); color: #fff; margin-bottom: 15px; } .aside-text a { padding: 0px 4px; color: #000; background-color: #f8f9fa; border-radius: 2em; } .news { background: linear-gradient(40deg, #45cafc, #303f9f) !important; color: #fff; } .events { background: linear-gradient(40deg, #ad86f6, #572ca7) !important; color: #fff; } .save-btn { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; font-family: "Poppins", sans-serif; font-size: 16px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 15px auto; text-align: center; color: #fff; /* background-color: #28a745; */ background: linear-gradient(40deg, #71e28b, #fff); border-color: #5c6ac4; border-style: none; border-radius: 0.2em; padding: 10px 25px; cursor: pointer; -webkit-transition: 0.5s; transition: 0.5s; /* box-shadow: 0px 5px 10px 5px #cecece; */ } .save-btn i { margin-right: 8px; } .save-btn:hover { background: #033768; } .save-btn:focus, .save-btn.focus { -webkit-box-shadow: 0 0 0 0.2rem rgba(92, 106, 196, 0.5); box-shadow: 0 0 0 0.2rem rgba(92, 106, 196, 0.5); } .edit-btn { font-family: inherit; text-align: center; width: auto; padding: 10px 20px; margin: 10px auto; cursor: pointer; color: #007bff; border: 1px solid #ddd; border-radius: 2rem; /* box-shadow: 0px 5px 10px 5px #e0e0e0; */ } .edit-btn:hover { background: #eeeeee; -webkit-box-shadow: 0px 0px 0px 0px #c8c8c8; box-shadow: 0px 0px 0px 0px #c8c8c8; -webkit-transition: 0.23s; transition: 0.23s; } .edit-btn:focus, .edit-btn.focus { -webkit-transition: 0.2s; transition: 0.2s; -webkit-box-shadow: 0 0 0 0.2rem rgba(92, 106, 196, 0.5); box-shadow: 0 0 0 0.2rem rgba(92, 106, 196, 0.5); } @media screen and (max-width: 500px) { .edit-btn { font-size: 12px; } .edit-btn i { font-size: 13px !important; } } .download-btn { font-family: "Poppins", sans-serif; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; text-align: center; width: auto; padding: 10px 20px; margin: 10px auto; cursor: pointer; color: #fff; background: #28a745; border-color: #28a745; border-radius: 2rem; -webkit-transition: 0.2s; transition: 0.2s; /* box-shadow: 0px 5px 10px 5px #c8c8c8; */ } .download-btn i { margin-right: 8px; } .download-btn:hover { background: #149331; } .download-btn:focus, .download-btn.focus { -webkit-box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5); box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5); } .flex { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .allocate-btn { /* flex: 1; */ text-align: center; width: auto; /* min-width: 50px; */ padding: 10px 20px; /* margin: 5px auto; */ cursor: pointer; color: #5c6ac4; border: 1px solid #ddd; border-radius: 2rem; -webkit-transition: 0.2s; transition: 0.2s; } .allocate-btn:hover { background: #ddd; } /* ############################################################################################################# login ############################################################################################################# */ #login { background: #fff; padding-bottom: 15px; overflow: hidden; border-radius: 0.3em; position: fixed; top: 50%; left: 50%; -webkit-transform: translate(-50%, -60%); transform: translate(-50%, -60%); z-index: 1; text-align: center; -webkit-box-shadow: 0px 2px 5px 2px rgba(0, 0, 0, 0.2); box-shadow: 0px 2px 5px 2px rgba(0, 0, 0, 0.2); -webkit-transition: 0.5s; transition: 0.5s; } @media screen and (min-width: 500px) { #login { width: 400px; } } @media screen and (max-width: 500px) { #login { width: 300px; } } @media screen and (max-width: 350px) { #login { width: 100%; } } #login i { margin-right: 10px; font-size: 18px; } #login .login-title { padding: 20px; font-size: 16px; background-color: #33b5e5 !important; color: #fff; text-align: center; margin-bottom: 20px; } .link { color: #2196f3; margin-top: 40px; -webkit-transition: 0.2s; transition: 0.2s; } .link:hover { color: #0b21ad; } .close { margin-right: 1rem; } #login .login-bottom { display: flex; justify-content: space-between; padding: 0 18px 0 18px; } #login .login-bottom > * { margin: 0; } /* ################################################################################################# */ .score-wrapper { position: relative; display: -ms-flexbox; display: -webkit-box; display: flex; width: 7rem; height: 7rem; overflow: hidden; font-size: 0.75rem; background-color: #d5dce4; border-radius: 50%; -webkit-box-shadow: 0px 0px 3px 10px #f0f0f0; box-shadow: 0px 0px 3px 10px #f0f0f0; /* full side shadow */ } .score-wrapper > .score-wrapper-bar { position: absolute; bottom: 0; width: 100%; -webkit-transition: width 6s ease; transition: width 6s ease; } .score-wrapper > .score-wrapper-text { position: absolute; font-size: 20px; height: 100%; width: 100%; z-index: 1; color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .score-wrapper .bg-success { background-color: #6cbd45 !important; } .score-wrapper .bg-warning { background-color: #ffc107 !important; } .score-wrapper .bg-danger { background-color: #f53d3d !important; } .bg-sub-info { background-color: #35b6cc !important; color: #fff; } .main-progress { -webkit-animation: main-progress1 7s ease-in-out forwards; animation: main-progress1 7s ease-in-out forwards; } @-webkit-keyframes main-progress1 { 0% { -webkit-transform: scale(0); transform: scale(0); } 95% { -webkit-transform: scale(0); transform: scale(0); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes main-progress1 { 0% { -webkit-transform: scale(0); transform: scale(0); } 95% { -webkit-transform: scale(0); transform: scale(0); } 100% { -webkit-transform: scale(1); transform: scale(1); } } #progress-card { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; overflow: hidden; background: #fff; } /* ############################################################### */ /* loader */ .loader { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; line-height: 5.6; -webkit-animation: loader-in-out 7s ease-in-out forwards; animation: loader-in-out 7s ease-in-out forwards; } @-webkit-keyframes loader-in-out { 0% { -webkit-transform: scale(0); transform: scale(0); } 10% { -webkit-transform: scale(1); transform: scale(1); } 95% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(0); transform: scale(0); } } @keyframes loader-in-out { 0% { -webkit-transform: scale(0); transform: scale(0); } 10% { -webkit-transform: scale(1); transform: scale(1); } 95% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(0); transform: scale(0); } } .progress-bar { -webkit-animation: loader-bar ease-in-out 7s forwards; animation: loader-bar ease-in-out 7s forwards; } @-webkit-keyframes loader-bar { 0%, 10% { width: 0%; } 50%, 70% { width: 50%; } 80%, 95% { width: 97%; } 100% { width: 100%; } } @keyframes loader-bar { 0%, 10% { width: 0%; } 50%, 70% { width: 50%; } 80%, 95% { width: 97%; } 100% { width: 100%; } } @media screen and (max-width: 500px) { .content-center { display: block; } .mobile-hide-500 { display: none; } .save-btn { font-size: 14px; } .title-1 { font-size: 20px; } } @media screen and (max-width: 450px) { .mobile-hide-450 { display: none; } /* .drop-down{ display: block; } */ } .edit-btn i { margin-right: 10px; } @media screen and (max-width: 450px) { .edit-btn i { margin-right: 0; } } /* =============================================== */ /* switch */ /* ================================================== */ .switch.switch-text { position: relative; display: inline-block; vertical-align: top; width: 48px; height: 24px; background-color: transparent; cursor: pointer; } .switch.switch-text .switch-input { position: absolute; top: 0; left: 0; opacity: 0; } .switch.switch-text .switch-label { position: relative; display: block; height: inherit; font-size: 10px; font-weight: 600; text-transform: uppercase; background-color: #dc3545; /* border: 1px solid #f2f2f2; */ border-radius: 2px; -webkit-transition: opacity background 0.15s ease-out; transition: opacity background 0.15s ease-out; } .switch.switch-text .switch-label::before, .switch.switch-text .switch-label::after { position: absolute; top: 50%; width: 50%; margin-top: -0.5em; line-height: 1; text-align: center; -webkit-transition: inherit; transition: inherit; } .switch.switch-text .switch-label::before { right: 1px; color: #e9ecef; content: attr(data-off); } .switch.switch-text .switch-label::after { left: 1px; color: #fff; content: attr(data-on); opacity: 0; } .switch.switch-text .switch-input:checked ~ .switch-label::before { opacity: 0; } .switch.switch-text .switch-input:checked ~ .switch-label::after { opacity: 1; } .switch.switch-text .switch-handle { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: #fff; border-color: #fff; border-radius: 1px; -webkit-transition: left 0.15s ease-out; transition: left 0.15s ease-out; } .switch.switch-text .switch-input:checked ~ .switch-handle { left: 26px; } .switch.switch-text.switch-lg { width: 56px; height: 28px; } .switch.switch-text.switch-lg .switch-label { font-size: 12px; } .switch.switch-text.switch-lg .switch-handle { width: 24px; height: 24px; } .switch.switch-text.switch-lg .switch-input:checked ~ .switch-handle { left: 30px; } .switch.switch-text.switch-sm { width: 40px; height: 20px; } .switch.switch-text.switch-sm .switch-label { font-size: 8px; } .switch.switch-text.switch-sm .switch-handle { width: 16px; height: 16px; } .switch.switch-text.switch-sm .switch-input:checked ~ .switch-handle { left: 22px; } .switch.switch-text.switch-xs { width: 32px; height: 16px; } .switch.switch-text.switch-xs .switch-label { font-size: 7px; } .switch.switch-text.switch-xs .switch-handle { width: 12px; height: 12px; } .switch.switch-text.switch-xs .switch-input:checked ~ .switch-handle { left: 18px; } .switch-pill .switch-label, .switch.switch-3d .switch-label, .switch-pill .switch-handle, .switch.switch-3d .switch-handle { border-radius: 50em !important; } .switch-pill .switch-label::before, .switch.switch-3d .switch-label::before { right: 2px !important; } .switch-pill .switch-label::after, .switch.switch-3d .switch-label::after { left: 2px !important; } .switch-success > .switch-input:checked ~ .switch-label { background: #28a745 !important; border-color: #1e7e34; } .switch-success > .switch-input:checked ~ .switch-handle { border-color: #1e7e34; } .switch-success-outline > .switch-input:checked ~ .switch-label { background: #fff !important; border-color: #28a745; } .switch-success-outline > .switch-input:checked ~ .switch-label::after { color: #28a745; } .switch-success-outline > .switch-input:checked ~ .switch-handle { border-color: #28a745; } .switch-success-outline-alt > .switch-input:checked ~ .switch-label { background: #fff !important; border-color: #28a745; } .switch-success-outline-alt > .switch-input:checked ~ .switch-label::after { color: #28a745; } .switch-success-outline-alt > .switch-input:checked ~ .switch-handle { background: #28a745 !important; border-color: #28a745; } /*# sourceMappingURL=style.css.map */