@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');
@import url('../dist/bootstrap/css/bootstrap.min.css');
@import url('../dist/fontawesome/css/all.min.css');

:root {
    --primary-font: 'Manrope', sans-serif, Arial, Helvetica;
    --light-gray: #43425D;
    --royal-blue: #2A49D6;
    --green: #34AC90;
    --red: #BF1212;
    --dark-gold: #A88800;
    --light-violet: #F3F4FA;
}

body {
    color: var(--light-gray);
    font-family: var(--primary-font);
    font-weight: 400;
    overflow-x: hidden;
    position: relative;
}

a {
    color: var(--blue);
}

a,
a:hover {
    text-decoration: none;
}

a:focus {
    outline: none;
}

*:focus {
    outline: none;
}

button:active,
button:focus,
.btn:active,
.btn:focus {
    box-shadow: none !important;
    outline: none !important;
}

.img-responsive,
.navbar-brand>img {
    display: inline-block;
}

img {
    display: inline-block;
    height: auto;
    max-width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--light-gray);
    font-family: var(--primary-font);
    font-weight: 700;
}

h1 {
    font-size: 40px;
    font-weight: 500;
}

h2 {
    font-size: 20px;
}

p,
li {
    color: var(--light-gray);
    font: 400 14px/1.5 var(--primary-font);
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.clearfix {
    clear: both;
    margin: 0px;
    padding: 0px;
}

.log {
    /* The stock side-image was removed, so the form now owns the full width.
       Centre it in the viewport (both axes) for a clean, uncluttered sign-in. */
    background: #fff;
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.progress {
    background-color: #F3F4FA;
    border-radius: 5px;
    /* Bottom margin keeps the signup progress bar clear of the logo/heading
       below it (the sign-up page is the only place .progress is used). */
    margin: 30px auto 45px;
    height: 4px;
    max-width: 475px;
    width: 100%;
}

.progress .progress-bar {
    background-color: #43425D;
    border-radius: 5px;
    opacity: 80%;
}

.signin {
    /* Vertical position is handled by .log centring the column now, so no top
       margin is needed (it used to push the form down beside the side image). */
    margin: 0 auto;
    max-width: 410px;
    width: 100%;
}

.signin h4 {
    font-size: 16px;
    font-weight: 600;
}

.signin p {
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 50px;
}

.signin .form-control {
    border: none;
    border-radius: 0px;
    border-bottom: 1px solid var(--light-gray);
    color: var(--light-gray);
    font: 400 14px var(--primary-font);
    padding: .5rem 0rem;
}

.signin .form-control:focus {
    box-shadow: none;
}

.signin .form-control.active {
    border-color: var(--green);
}

.signin a {
    color: var(--light-gray);
    font: 400 14px var(--primary-font);
}

.signin a:hover {
    color: var(--green);
}

.signin img {
    vertical-align: text-bottom;
}

.signin .btn-primary {
    background-color: var(--royal-blue);
    border-radius: 15px;
    font: 700 14px var(--primary-font);
    padding: .625rem .5rem;
    width: 120px;
}

.signin .btn-primary:hover {
    background-color: var(--green);
    border-color: var(--green);
}

.signin .form-check-label {
    color: var(--light-gray);
    font: 400 14px var(--primary-font);
}

.signin .form-check-label strong {
    color: var(--light-gray);
    font: 600 16px var(--primary-font);
}

.signin .show {
    margin: 7px 7px 0px 0px;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}

.hilite {
    background-color: #F3F4FA;
    border-radius: 15px;
}

.hilite .form-check-input {
    background-color: transparent;
}

.form-check-input:focus {
    border-color: var(--green);
    box-shadow: none;
}

.form-check-input:checked {
    background-color: var(--green);
    border-color: var(--green);
    box-shadow: none;
}

.form-control {
    font-family: var(--primary-font);
}

.form-control:focus {
    box-shadow: none;
    border-color: #D8D8D8;
}

textarea.form-control {
    padding-right: 5%;
}

.form-check-label {
    font-size: 15px;
}

.form-control.calendar {
    background: url("../images/icn_calender.png") no-repeat 12px center;
    padding-left: 35px;
}

.form-control.pin {
    background: url("../images/icn_location.png") no-repeat 98% center;
}

.form-control.links {
    background: url("../images/icn_link.png") no-repeat 98% center;
}

.form-control.add {
    background: url("../images/icn_plus.png") no-repeat 98% center;
}

.foot {
    bottom: 15px;
    color: var(--light-gray);
    font: 400 10px var(--primary-font);
    left: 0;
    padding: 12px 12px 0px;
    position: absolute;
    text-align: center;
    width: 100%
}

.verify .form-control {
    border-color: #d2d2d7;
    border-width: 2px;
    font-size: 19px;
    font-weight: 700;
    text-align: center;
}

.verify .form-control:focus {
    border-color: var(--royal-blue);
}

/*-------------------
    Dashboard
---------------------------*/

.dash-wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
}

/*--- Sidebar Navigation ---*/
#sidebarCollapse {
    cursor: pointer;
}

.sidebar {
    background-color: var(--bs-white);
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);
    color: #000;
    left: 0;
    position: relative;
    min-height: 100vh;
    max-width: 80px;
    min-width: 80px;
    overflow-x: hidden;
    transition: all 0.3s;
    top: 0;
    z-index: 10;
}

.sidebar:hover {
    max-width: 220px;
    min-width: 220px;
    transition: all 0.3s;
}

.sidebar .brand {
    padding: 1.5rem 1.4rem;
    width: 220px;
}

.sidebar .brand span {
    margin-left: 5px;
    opacity: 0;
    transition: all ease-in-out 0.5s;
}

.sidebar:hover .brand span {
    opacity: 1;
    transition: all ease-in-out 0.5s;
}

.sidebar ul {
    list-style: none;
    margin: 13px 0px 0px;
    padding: 0px;
    width: 220px;
}

.sidebar ul li {
    position: relative;
    text-transform: capitalize;
    width: 100%;
}

.sidebar ul li a {
    color: #000;
    font-size: 15px;
    font-weight: 500;
    display: block;
    min-height: 20px;
    margin: 20px 0px;
    padding: 0px 4px 0px 22px;
}

.sidebar ul li a.active {
    font-weight: 700;
}

.sidebar ul li a picture {
    border-radius: 8px;
    display: inline-block;
    padding: 4px 7px;
    width: 38px;
}

.sidebar ul li a span {
    display: inline-block;
    margin-left: 20px;
    opacity: 0;
    max-width: 145px;
    transition: all ease-in-out 0.5s;
}

.sidebar:hover ul li a span {
    opacity: 1;
    transition: all ease-in-out 0.5s;
}

.sidebar ul li a img {
    max-width: 24px;
}

.sidebar.active {
    max-width: 220px;
    min-width: 220px;
    transition: all 0.3s;
}

.sidebar.active .brand span,
.sidebar.active ul li a span,
.sidebar.active .profile p {
    opacity: 1;
}

.sidebar .profile {
    clear: both;
    padding: 5px 15px;
    position: absolute;
    width: 220px;
}

.sidebar .profile:hover {
    background-color: var(--bs-white);
    border: none;
    border-radius: 20px;
    box-shadow: 0px 3px 12px #0000001F;
    height: 160px;
    position: absolute;
    bottom: 0;
    margin: 0px 0px -15px 12px;
    padding: 10px 0px;
    left: 0;
    width: 195px;
    z-index: 1;
}

.sidebar .profile img {
    width: 42px;
}

.sidebar .profile p {
    color: var(--light-gray);
    font-size: 13px;
    font-weight: 700;
    line-height: 17px;
    margin-bottom: 0px;
    opacity: 0;
}

.sidebar .profile p span {
    color: var(--light-gray);
    font-size: 10px;
    opacity: 0.7;
    transition: all ease-in-out 0.5s;
}

.sidebar .profile .overlay {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    display: none;
    opacity: 0;
    margin: 0px 10px 10px;
    padding: 0px 9px;
    transition: all ease-in-out 0.5s;
}

.sidebar .profile .overlay a {
    font-size: 12px;
    margin: 0px;
    padding: 9px 0px
}

.sidebar .profile:hover .row {
    padding: 0px 3px !important;
}

.sidebar .profile:hover .overlay {
    display: block;
    opacity: 1;
    transition: all ease-in-out 0.5s;
}

.sidebar:hover .profile p {
    cursor: pointer;
    opacity: 1;
    transition: all ease-in-out 0.5s;
}

.sidebar .profile .row {
    padding: 0px 1px;
}

.sidebar.open {
    max-width: 220px;
    min-width: 220px;
}

.sidebar.open span,
.sidebar.open .profile p {
    opacity: 1;
}

picture.green {
    background-color: #eaf6f4;
}

picture.violet {
    background-color: #eeddee;
}

picture.brown {
    background-color: #faeee8;
}

picture.yellow {
    background-color: #fff9e9;
}

picture.purple {
    background-color: #ecebf6;
}

picture.cyan {
    background-color: #e5f8ff;
}

.space {
    height: 44px;
}

.main {
    height: 100%;
    min-height: 100vh;
    margin-left: 0px;
    padding: 0px 0px;
    position: relative;
    transition: all 0.3s;
    width: 100%;
}

header {
    background: url("../images/ptn_01.png") no-repeat top right var(--light-violet);
    clear: both;
    padding: 40px 5%;
    width: 100%;
}

header p {
    font-weight: 700;
    opacity: 0.5;
}

header .btn-white {
    max-width: 140px;
}

header .nav-pills {
    margin-bottom: -40px;
}

header .nav-pills .nav-link {
    color: var(--light-gray);
    border-radius: 0px;
    font-size: 18px;
    font-weight: 700;
    opacity: 0.5;
    text-transform: capitalize;
}

header .nav-pills .nav-link.active {
    background-color: transparent;
    border-bottom: 3px solid var(--royal-blue);
    color: var(--royal-blue);
    opacity: 1;
}

header .dropdown-menu li {
    font-size: 11px;
    padding: 0px 12px;
}

.dashboard {
    background-color: var(--light-violet);
    clear: both;
    padding: 40px 5%;
    width: 100%;
}

.content {
    clear: both;
    padding: 10px 5% 40px 5%;
    position: relative;
    width: 100%;
}

.btn-white {
    background-color: var(--bs-white);
    border: none;
    border-radius: 12px;
    box-shadow: 0px 3px 12px #0000000F;
    color: rgba(67, 66, 93, 0.8);
    font-size: 13px;
    margin-bottom: 5px;
    text-transform: capitalize;
}

.btn-white:hover,
.btn-white:focus,
.btn-white.show {
    background-color: var(--bs-white) !important;
    box-shadow: 0px 3px 12px #0000000F !important;
}

.btn-white .badge {
    background-color: var(--red);
    border-radius: 100%;
    color: var(--bs-white);
    display: block;
    font-size: 9px;
    height: 15px;
    left: 5px;
    padding: 3px 5px;
    position: absolute !important;
    top: 0 !important;
    width: 15px;
    z-index: 1;
}

.btn-outline-dark {
    border-color: #D8D8D8;
    border-radius: 15px;
    color: var(--light-gray);
    font-size: 15px;
    font-weight: 700;
}

.btn-outline-dark:hover,
.btn-outline-dark:focus {
    background-color: var(--light-violet) !important;
    border-color: #D8D8D8 !important;
    color: var(--light-gray) !important;
}

.btn-add-new {
    background-color: var(--light-violet);
    border: none;
    color: var(--light-gray);
    border-radius: 12px;
    font-size: 15px;
    font-weight: 400;
}

.btn-add-new:hover,
.btn-add-new:focus {
    background-color: var(--light-violet) !important;
    border: none;
    color: var(--light-gray);
}

.btn-add-new.active {
    background-color: var(--light-violet) !important;
    border: 1px solid var(--royal-blue);
    color: var(--royal-blue);
}

.dropdown-menu {
    border: inherit;
    box-shadow: 0px 3px 12px #0000001F;
    border-radius: 16px;
    margin-top: 5px !important;
    max-width: 15rem;
}

.dropdown-menu li {
    font-size: 11px;
    padding: 0px 12px;
}

.dropdown-menu li span {
    color: var(--light-gray);
    font-size: 10px;
    opacity: 0.5;
}

.panel {
    background-color: var(--bs-white);
    border: none;
    border-radius: 20px;
    box-shadow: 0px 3px 12px #0000000F;
    margin-bottom: 1.5rem;
    padding: 15px 25px;
}

.panel a {
    color: rgba(67, 66, 93, 0.8);
    vertical-align: middle;
}

.table .form-check-input {
    border-radius: 5px;
    cursor: pointer;
    height: 18px;
    width: 18px;
}

.table tr th,
.table tr td {
    color: var(--light-gray);
    font-size: 14px;
    vertical-align: middle;
}

.table tr th:first-child,
.table tr td:first-child {
    padding-left: 0px;
}

.table tr td.today {
    color: var(--dark-gold);
    font-weight: 500;
}

.table tr:last-child td {
    border: inherit;
}

.table tr td.redtxt {
    color: #DB1C1C;
    font-weight: 500;
}

.strikethrough {
    opacity: 0.5;
    text-decoration: line-through;
}

.select .table tr td {
    opacity: 0.6;
}

.select .table tr.checked td {
    opacity: 0.8;
}

.select .table tr.checked td strong,
select .table tr.checked td img {
    opacity: 1;
}

.select .table tr.checked td .form-check-input {
    opacity: 1;
}

.calendar {
    width: 100%;
}

.calendar tr th,
.calendar tr td {
    color: var(--light-gray);
    font-size: 14px;
    font-weight: 700;
    padding: 3px 3px;
    text-align: center;
}

.calendar tr th {
    color: rgba(67, 66, 93, 0.3);
}

.calendar tr td span {
    background-color: var(--royal-blue);
    border-radius: 100%;
    color: var(--bs-white);
    display: block;
    height: 20px;
    line-height: 18px;
    width: 20px;
}

.calendar:hover tr td.blue {
    background-color: rgba(42, 73, 214, 0.1);
}

.calendar tr td.blue span {
    background-color: transparent;
    color: var(--light-gray);
}

.calendar:hover tr td.blue span {
    background-color: var(--royal-blue);
    color: var(--bs-white);
}

.num {
    border: 1px solid #80849580;
    border-radius: 7px;
    box-shadow: 1px 4px 0px #808495;
    color: var(--light-gray);
    font-size: 14px;
    font-weight: 700;
    display: inline-block;
    margin-left: 5px;
    padding: 2px 15px;
}

.key {
    background-color: var(--bs-white);
    border: 1px solid #80849580;
    border-radius: 5px;
    box-shadow: 1px 4px 0px #808495;
    color: var(--light-gray);
    font-size: 10px;
    font-weight: 700;
    display: inline-block;
    margin-left: 5px;
    padding: 2px 8px;
}

.widgets {
    border: 2px dashed #C9C9C9;
    border-radius: 20px;
    color: var(--light-gray);
    font-size: 14px;
    margin-bottom: 1.5rem;
    padding: 30px 20px;
    text-align: center;
    width: 100%;
}

.widgets a {
    color: var(--light-gray);
}

.notify {
    background-color: var(--bs-white);
    border: 1px solid #D8D8D8;
    border-radius: 15px;
    box-shadow: 0px 3px 12px #0000000F;
    margin-bottom: 1rem;
    padding: 10px 15px;
    color: var(--light-gray);
    font-size: 13px;
}

.notify span {
    color: var(--light-gray);
    font-size: 10px;
    opacity: 0.5
}

.greenbox {
    background-color: #eaf6f4;
    border-radius: 8px;
    display: inline-block;
    padding: 5px 5px;
    text-align: center;
    width: 57px;
}

.yellowbox {
    background-color: #fff9ea;
    border-radius: 8px;
    display: inline-block;
    padding: 5px 5px;
    text-align: center;
    width: 57px;
}

.violetbox {
    background-color: #ecebf5;
    border-radius: 8px;
    display: inline-block;
    padding: 5px 5px;
    text-align: center;
    width: 57px;
}

.modal-dialog {
    cursor: pointer;
}

.modal-dialog:not(.modal-xl){
    max-width: 700px;
}

.modal-content {
    border-radius: 20px;
    border: inherit;
}

.modal-content h4 {
    color: var(--light-gray);
    font-size: 15px;
    font-weight: 700;
}

.modal-content h4 span {
    font-size: 12px;
    font-weight: 400;
    margin-left: 10px;
    opacity: 0.5;
}

#searchModal .modal-content .form-control {
    background: url("../images/icn_search_01.png") no-repeat left center;
    border: inherit;
    color: var(--light-gray);
    font-size: 15px;
    text-indent: 30px;
}

.modal-content .form-control::placeholder {
    color: var(--light-gray);
    font-size: 14px;
    opacity: 0.5;
}

.modal-content .form-control:focus {
    box-shadow: inherit;
}

.modal-footer {
    border-radius: 0px 0px 18px 18px;
    display: block;
    background-color: var(--light-violet);
    color: var(--light-gray);
    font-size: 13px;
    opacity: 0.8;
}

.modal .file {
    border: 2px dashed #D8D8D8;
    border-radius: 12px;
    color: var(--light-gray);
    font-size: 15px;
    padding: 20px 10px;
    text-align: center;
    width: 100%;
}

.modal .file a {
    color: var(--light-gray);
    display: block;
}

.modal .file span {
    font-size: 13px;
    opacity: 0.5;
}

.myaccount .header {
    background-color: var(--light-violet);
    border-radius: 20px 20px 0px 0px;
    padding: 30px 40px;
}

.myaccount .avatar {
    border: 2px solid var(--bs-white);
    border-radius: 100%;
}

.myaccount .close {
    color: var(--light-gray);
    font-size: 14px;
    position: absolute;
    right: 35px;
    top: 25px;
}

.myaccount .close .btn-close {
    vertical-align: middle;
}

.myaccount h1 {
    font-size: 30px;
}

.myaccount h2 {
    font-size: 20px;
    margin-bottom: 1.5rem;
}

.myaccount .header .row {
    margin-bottom: -45px;
}

.myaccount .modal-body {
    padding: 40px 0px;
}

.myaccount .frame {
    clear: both;
    padding: 0px 40px;
    width: 100%;
}

.myaccount .box {
    font-size: 14px;
    text-transform: capitalize;
}

.myaccount .red {
    background-color: var(--bs-white);
    border-color: #D8D8D8;
    color: #DB1C1C;
}

.shortcuts,
.typestate {
    clear: both;
    width: 100%;
}

.typestate {
    height: 370px;
    overflow-y: scroll;
}

.breadcrumb {
    margin-bottom: 0.5rem
}

.breadcrumb-item {
    color: var(--light-gray);
    font-weight: 700;
    opacity: 0.5;
}

.breadcrumb-item+.breadcrumb-item::before {
    background: url("../images/arrow_rgt_01.png") no-repeat left center;
    content: "";
    height: 9px;
    margin-top: 8px;
    width: 18px;
}

.breadcrumb-item.active {
    color: var(--light-gray);
}

.company {
    border: 1px solid #D8D8D8;
    border-radius: 20px;
    margin-bottom: 1.2rem;
    width: 100%;
}

.company:hover {
    box-shadow: 0px 3px 12px #0000000F;
}

.company picture {
    display: grid;
    height: 130px;
    align-content: center;
    justify-items: center;
    text-align: center;
    width: 100%;
}

.company:hover picture img {
    opacity: 0;
    transition: all ease-in-out 0.5s;
}

.company:hover picture {
    background: url("../images/comp_01.png") no-repeat center;
}

.company .detail {
    background: url("../images/arrow_rgt.png") no-repeat 90% 15px;
    border-top: 1px solid #D8D8D8;
    padding: 12px 12px;
    width: 100%;
}

.company .detail h5 {
    color: var(--light-gray);
    font-size: 15px;
    font-weight: 700;
    margin: 0px;
    text-transform: capitalize;
}

.company .detail span {
    color: var(--light-gray);
    font-size: 11px;
    font-weight: 400;
    opacity: 0.5;
}

.filter {
    clear: both;
    width: 100%;
}

.filter h4 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 0;
}

.filter h4 span {
    margin-left: 20px;
    opacity: 0.75;
}

.sort {
    background-color: var(--bs-white);
    border: 1px solid #D8D8D8;
    border-radius: 12px;
    color: var(--light-gray);
    font-size: 14px;
    font-weight: 700;
    padding: 0px 6px 0px 12px;
    width: 100%;
}

.sort .form-select {
    border: inherit;
    cursor: pointer;
    font-size: 14px;
    height: 36px;
}

.sort .form-select:focus {
    box-shadow: none;
}

.search {
    background: url("../images/icn_search.png") no-repeat 12px center;
    border-radius: 12px;
    font-size: 15px;
    text-indent: 30px;
}

.movdown {
    margin-bottom: -55px;
    max-width: 980px;
}

.movdown .col:first-child {
    width: 300px;
}

.offcanvas.offcanvas-end {
    cursor: pointer;
    width: 600px;
}

.offcanvas-header {
    background-color: var(--light-violet);
    display: block;
    padding: 50px 35px 20px;
    position: relative;
}

.offcanvas-header .btn-close {
    background-color: var(--bs-white);
    left: 0;
    margin: 0px 0px 0px -60px;
    opacity: 1;
    padding: 12px;
    position: absolute;
    top: 40px;
    z-index: 1;
}

.offcanvas-header .dropdown-item {
    font-size: 12px;
}

.offcanvas-header .dropdown-item:hover,
.offcanvas-header .dropdown-item:focus {
    background-color: inherit !important;
}

.offcanvas-body {
    padding: 30px 35px;
}

.offcanvas-body .form-label {
    color: var(--light-gray);
    font-size: 14px;
    font-weight: 700;
    text-transform: initial;
}

.offcanvas-body .form-control,
.offcanvas-body .form-select {
    border-color: #D8D8D8;
    border-radius: 12px;
    cursor: pointer;
    font-size: 14px;
}

.offcanvas-body .form-control:focus,
.offcanvas-body .form-select:focus {
    box-shadow: none;
}

.offcanvas-body .file {
    border: 2px dashed #D8D8D8;
    border-radius: 12px;
    color: var(--light-gray);
    font-size: 15px;
    padding: 20px 10px;
    text-align: center;
    width: 100%;
}

.offcanvas-body .file a {
    color: var(--light-gray);
    display: block;
}

.offcanvas-body a img {
    vertical-align: text-bottom;
}

.offcanvas-body .file span {
    font-size: 13px;
    opacity: 0.5;
}

.offcanvas-body .btn-primary {
    background-color: var(--royal-blue);
    border-radius: 15px;
    font-size: 14px;
}

.offcanvas-body .input-group-text {
    background: var(--bs-white);
    border-right: none;
    border-radius: 12px 0px 0px 12px
}

.offcanvas-body .input-group .form-select {
    border-left: none;
}

.offcanvas-body .calendar {
    background: url("../images/icn_calender.png") no-repeat 12px center;
    padding-left: 35px;
}

.offcanvas .note {
    margin: 45% 0px 0px -75%;
    max-width: 340px;
}

.offcanvas .form-check-input {
    border-radius: 5px;
    cursor: pointer;
    height: 18px;
    width: 18px;
}

.offcanvas .cover {
    border: inherit;
    border-radius: 7px;
    height: 70px;
}

.col.collapsed img {
    transform: rotate(-180deg);
}

.form-control.company {
    background: url("../images/comp_01.png") no-repeat 12px center / 20px;
    padding-left: 45px;
}

.form-control:hover.company {
    box-shadow: none;
}

.add-note .form-control {
    height: 50px;
    padding-left: 60px;
}

.green-txt {
    color: #34AC90;
    font-weight: 400;
}

.red-txt,
.red-txt:hover {
    color: #DB1C1C;
    font-weight: 400;
}

.cover {
    background-color: var(--bs-white);
    border: 1px solid #D8D8D8;
    border-radius: 20px;
    display: grid;
    align-items: center;
    justify-content: center;
    height: 165px;
    padding: 20px 10px;
    position: relative;
    width: 100%;
}

.cover a {
    opacity: 0;
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 1;
}

.cover:hover a {
    opacity: 1;
}

.action {
    background-color: var(--bs-white);
    border: 1px solid #D8D8D8;
    border-radius: 15px;
    color: var(--light-gray);
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 1rem;
    min-height: 77px;
    padding: 15px 15px;
    width: 100%;
}

.action span {
    font-size: 12px;
    font-weight: 400;
    opacity: 0.5;
}

.welcome .modal-header {
    background-color: var(--royal-blue);
    border-radius: 20px 20px 0px 0px;
    padding: 1rem 40px;
}

.welcome .modal-title {
    color: var(--bs-white);
    font-size: 15px;
    font-weight: 700;
}

.welcome .modal-body {
    padding: 1rem 40px;
}

.welcome .btn,
.modaltour .btn {
    background-color: var(--royal-blue);
    border-color: var(--royal-blue);
    border-radius: 15px;
    font: 400 14px var(--primary-font);
    line-height: 26px;
}

.modaltour .modal-content {
    background-color: transparent;
}

.modaltour .frame {
    margin: 65px 0px 0px 0px;
    position: relative;
    width: 430px;
}

.modaltour .modal-dialog {
    max-width: 100%;
}

.tour {
    background-color: var(--bs-white);
    border-radius: 15px;
    box-shadow: 0px 3px 12px #0000000F;
    left: 240px;
    margin-top: -15px;
    padding: 20px 20px;
    position: absolute;
    max-width: 370px;
    top: 8px;
    width: 100%;
    z-index: 1;
}

.tour::before {
    border-width: 15px;
    border-color: transparent white transparent transparent;
    border-style: solid;
    content: "";
    height: 0px;
    left: -29px;
    position: absolute;
    top: 30px;
    width: 0px;
}

.button {
    width: 220px;
}

.button ul {
    list-style: none;
    margin: 13px 0px 0px;
    padding: 0px;
}

.button ul li {
    position: relative;
    text-transform: capitalize;
    width: 100%;
}

.button ul li a {
    background-color: var(--bs-white);
    border-radius: 12px;
    color: #000;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    display: block;
    min-height: 20px;
    padding: 9px 4px 9px 26px;
}

.button ul li a picture {
    border-radius: 8px;
    display: inline-block;
    padding: 4px 7px;
    width: 38px;
}

.button ul li a span {
    display: inline-block;
    margin-left: 19px;
    max-width: 145px;
}

.button ul li a img {
    max-width: 21px;
}

.activity {
    box-shadow: 0px 3px 12px #0000000F;
    border-radius: 15px;
    clear: both;
    padding: 15px 15px;
    width: 100%;
}

.activity .scroll {
    height: 335px;
    overflow-y: scroll;
    padding-right: 10px;
    width: 100%
}

.activity .cards {
    background-color: var(--light-violet);
    border-radius: 15px;
    margin-bottom: 1rem;
    padding: 12px 15px;
    width: 100%;
}

.activity .cards img {
    border-radius: 100%;
    margin-right: 5px;
    max-width: 38px;
}

.activity .cards .date {
    opacity: 0.5;
    text-align: right;
}

.activity .cards p {
    font-size: 14px;
    margin-bottom: 0;
}

.activity .cards a {
    color: var(--light-gray);
}

.note {
    background-color: var(--bs-white);
    border: 1px solid var(--green);
    border-radius: 15px;
    box-shadow: 0px 3px 12px #0000000F;
    margin: 1rem;
    padding: 12px 15px;
    position: absolute;
    max-width: 390px;
    width: 100%;
    z-index: 1;
}

.note.small {
    max-width: 290px;
}

.dissolve .modal-header {
    background-color: #DB1C1C;
    border-radius: 20px 20px 0px 0px;
    padding: 1rem 40px;
}

.dissolve .modal-title {
    color: var(--bs-white);
    font-size: 15px;
    font-weight: 700;
}

.dissolve .close {
    color: var(--bs-white);
    font-size: 14px;
    position: absolute;
    right: 35px;
    top: 25px;
    display: flex;
    align-items: center;
}

.dissolve .btn-close {
    filter: brightness(0) invert(1);
    opacity: 1;
}

.dissolve .modal-body {
    padding: 1rem 40px;
}

.dissolve .calender {
    background: url(../images/icn_calender.png) no-repeat 15px center;
    font: 400 14px var(--primary-font);
    line-height: 26px;
    padding-left: 40px;
}

.dissolve .btn {
    background-color: #DB1C1C;
    border-radius: 15px;
    font: 400 14px var(--primary-font);
    line-height: 26px;
}

.approve {
    background-color: var(--green);
    border-radius: 12px;
    color: var(--bs-white);
    font-size: 12px;
    display: inline-block;
    padding: 2px 10px;
    text-align: center;
}

.resigned {
    background-color: #DB1C1C;
    border-radius: 12px;
    color: var(--bs-white);
    font-size: 12px;
    display: inline-block;
    padding: 2px 10px;
    text-align: center;
}

.appointed .modal-header {
    background-color: var(--green);
    border-radius: 20px 20px 0px 0px;
    padding: 1rem 40px;
}

.appointed .modal-title {
    color: var(--bs-white);
    font-size: 15px;
    font-weight: 700;
}

.appointed .close {
    color: var(--bs-white);
    font-size: 14px;
    position: absolute;
    right: 35px;
    top: 25px;
    display: flex;
    align-items: center;
}

.appointed .btn-close {
    filter: brightness(0) invert(1);
    opacity: 1;
}

.appointed .modal-body {
    padding: 1rem 40px;
}

.appointed .calender {
    background: url(../images/icn_calender.png) no-repeat 15px center;
    font: 400 14px var(--primary-font);
    line-height: 26px;
    padding-left: 40px;
}

.appointed .btn-appoint {
    background-color: var(--green);
    border-color: var(--green);
    border-radius: 15px;
    color: var(--bs-white);
    font: 700 14px var(--primary-font);
    line-height: 26px;
}

.appointed .btn-appoint:focus {
    background-color: var(--green);
    border-color: var(--green);
    color: var(--bs-white);
}

.folder {
    background-color: var(--bs-white);
    border: 1px solid #D8D8D8;
    border-radius: 15px;
    color: var(--light-gray);
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 1rem;
    padding: 15px 15px;
    width: 100%;
}

.folder a,
.folder .required {
    font-weight: 400;
    text-align: right;
}

.showall a {
    margin: 0px 15px;
}

.showall a.active {
    border-bottom: 2px solid var(--royal-blue);
    color: var(--royal-blue);
    font-weight: 600;
}

.task {
    background-color: #F3F4FA;
    border-radius: 20px;
    font-size: 14px;
    clear: both;
    height: 100%;
    padding: 15px 15px;
    width: 100%;
}

.task h4 {
    font-size: 18px;
}

.task .box {
    background-color: var(--bs-white);
    border: 1px solid #D8D8D8;
    border-radius: 15px;
    box-shadow: 0px 3px 12px #0000000F;
    color: var(--light-gray);
    font-size: 15px;
    margin-bottom: 1rem;
    padding: 15px 15px;
    width: 100%;
}

.task .box span {
    font-size: 15px;
    opacity: 0.5;
}

.task .box.redbdr {
    border-color: #DB1C1C;
}

.task .box.redbdr .text {
    color: #DB1C1C;
    opacity: 0.8;
}

.task .box.brown {
    border-color: #A88800;
}

.task .box.brown .text {
    color: #A88800;
    opacity: 0.8;
}

.task .box.greybdr {
    border-color: #B0B0B0;
}

.task .box.greybdr .text {
    color: #B0B0B0;
    opacity: 0.8;
}

.task .box .line {
    text-decoration: line-through;
    opacity: 0.5;
}

.task .box .green-txt {
    opacity: 0.8;
}

.lists {
    color: var(--light-gray);
    font-size: 14px;
    font-weight: 400;
    opacity: 0.5;
    text-align: right;
}

.lists a {
    margin-left: 10px;
}

.lists a.active {
    border-bottom: 2px solid var(--royal-blue);
    color: var(--royal-blue);
    font-weight: 600;
}

.box_task {
    display: block;
    height: 300px;
    margin-bottom: 1rem;
    padding-right: 12px;
    overflow-y: scroll;
}

.new_task {
    background-color: var(--bs-white);
    border: 1px solid #D8D8D8;
    border-radius: 15px;
    color: var(--light-gray);
    font-size: 15px;
    font-weight: 400;
    margin-bottom: 0.525rem;
    padding: 10px 10px;
    width: 100%;
}

.or {
    clear: both;
    width: 100%
}

.or h2 {
    border-bottom: 1px solid #e2e2e2;
    line-height: 0.1em;
    margin: 10px 0 20px;
    font-weight: 500;
    text-align: center;
    width: 100%;
}

.or h2 span {
    background: #fff;
    color: #69687d;
    padding: 0 10px;
}

.activity-box {
    background-color: #F3F4FA;
    border-radius: 20px;
    font-size: 14px;
    clear: both;
    height: 100%;
    padding: 12px 12px;
    width: 100%;
}

.activity-box span {
    font-size: 12px;
    opacity: 0.5;
}

.chart {
    clear: both;
    width: 100%;
}

.chart .box {
    background-color: var(--bs-white);
    border: 1px solid #D8D8D8;
    border-radius: 15px;
    color: var(--light-gray);
    margin-bottom: 1rem;
    width: 100%;
}

.chart .box picture img {
    border-radius: 16px 16px 0px 0px;
}

.chart .detail {
    background: url("../images/arrow.png") no-repeat 95% 15px;
    border-top: 1px solid #D8D8D8;
    color: var(--light-gray);
    font-size: 14px;
    padding: 12px 12px;
    width: 100%;
}

.chart .detail span {
    font-size: 12px;
    opacity: 0.5;
}

.over-nav {
    background-color: var(--bs-white);
    box-shadow: 0px 3px 12px #0000000F;
    border-radius: 17px;
    padding: 10px 15px;
    position: absolute;
    left: 20px;
    top: 20px;
    z-index: 1;
}

.diagram .btn-close {
    background-color: var(--bs-white);
    box-shadow: 0px 3px 12px #0000000F;
    right: 20px;
    opacity: 1;
    padding: 12px;
    position: absolute;
    top: 20px;
    z-index: 1;
}

.footer {
    position: absolute;
    left: 0px;
    bottom: 0px;
    padding: 15px 20px;
    width: 100%;
    z-index: 1;
}

.footer .dropdown-toggle {
    background-color: var(--bs-white);
    box-shadow: 0px 3px 12px #0000000F;
    border-radius: 15px;
    font-size: 14px;
    font-weight: 700;
    text-align: left;
    width: 150px;
}

.footer .dropdown-menu li {
    padding: 0.275rem 1rem;
    font-size: 14px;
}

.footer .tool {
    background-color: var(--bs-white);
    box-shadow: 0px 3px 12px #0000000F;
    border-radius: 15px;
    display: inline-block;
    padding: 7px 10px;
}

.footer .zoom {
    background-color: var(--bs-white);
    box-shadow: 0px 3px 12px #0000000F;
    border-radius: 15px;
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    padding: 10px;
}

.footer .zoom a {
    padding: 0px 5px;
}

#chartModal .modal-dialog {
    max-width: 1000px !important;
}

.tag {
    background-color: #f3f4fa;
    border-radius: 15px;
    color: #878699;
    font-size: 13px;
    padding: 5px 8px;
}

.btn-tag {
    background-color: #f3f4fa;
    border: none;
    border-radius: 15px;
    color: #878699;
    font-size: 14px;
}

.btn-tag:hover,
.btn-tag:focus {
    background-color: #f3f4fa !important;
    border: none;
    border-radius: 15px;
    color: #878699 !important;
}

.filetype {
    background-color: var(--bs-white);
    border: 1px solid var(--royal-blue);
    border-radius: 12px;
    color: var(--light-gray);
    font-size: 13px;
    font-weight: 700;
    padding: 0px 7px;
    width: 100%;
}

.filetype .form-select {
    border: inherit;
    box-shadow: none;
    font-size: 14px;
    height: 30px;
}

.mt-50 {
    margin: 10% 0px 0px 30%;
}

.company_filter {
    display: block;
    height: 300px;
    margin-bottom: 1rem;
    padding-right: 12px;
    overflow-y: scroll;
}

.company_filter .company_name {
    background-color: var(--bs-white);
    border: 1px solid #D8D8D8;
    border-radius: 15px;
    color: var(--light-gray);
    font-size: 15px;
    font-weight: 400;
    margin-bottom: 0.525rem;
    padding: 10px 10px;
    width: 100%;
}

.company_filter .company_name.active {
    border-color: var(--green);
    box-shadow: 0px 3px 12px #0000000F;
}

.cmy_search {
    background: url("../images/icn_search_02.png") no-repeat 12px center #F3F4FA;
    border: inherit;
    border-radius: 12px;
    font-size: 15px;
    text-indent: 30px;
}

.cmy_search:focus {
    background-color: #F3F4FA;
}

.text-bg-primary {
    background-color: var(--royal-blue) !important;
    border-radius: 12px;
}

.cam {
    background-color: var(--bs-white);
    border: 3px solid #FFFFFF;
    border-radius: 100%;
    display: grid;
    align-items: center;
    justify-content: center;
    height: 85px;
    padding: 20px 10px;
    position: relative;
    width: 85px;
}

.modal-import .modal-header {
    background-color: var(--light-violet);
    border-radius: 20px 20px 0px 0px;
    padding: 1rem 40px;
}

.modal-import .modal-title {
    color: var(--bs-black);
    font-size: 15px;
    font-weight: 700;
}

.modal-import .close {
    color: var(--bs-black);
    font-size: 14px;
    position: absolute;
    right: 35px;
    top: 25px;
    display: flex;
    align-items: center;
}

.modal-import .btn-close {
    opacity: 1;
}

.modal-import .modal-body {
    padding: 1rem 40px;
}

.share {
    clear: both;
    margin-bottom: 1rem;
    width: 100%;
}

.share h4 {
    font-size: 18px;
}

.share .progress {
    background-color: rgba(112, 112, 112, 0.2);
}

.share .progress-bar {
    background-color: var(--royal-blue);
}

.complete {
    font-size: 15px;
    color: rgba(67, 66, 93, 0.8);
}

.allot .select {
    background: url("../images/aro_dwn.png") no-repeat 97.5% center;
    border: 1px solid #D8D8D8;
    border-radius: 10px;
    color: var(--light-gray);
    display: block;
    font-size: 15px;
    padding: .375rem .75rem;
    width: 100%;
}

.allot .select.show {
    background-image: url("../images/aro_up.png");
}

.allot .select.dropdown-toggle::after {
    border: inherit;
}

.allot .dropdown-menu {
    border: 1px solid #D8D8D8;
    border-radius: 12px;
    margin: -4px 0px 0px !important;
    padding: 5px 0px;
    min-width: 100%;
}

.allot .dropdown-menu h5 {
    color: var(--light-gray);
    font-size: 15px;
    font-weight: 700;
}

.allot .dropdown-item {
    background: url("../images/arrow_rgt.png") no-repeat 98% center;
    color: var(--light-gray);
    padding: 0.275rem 0.5rem;
    font-size: 15px;
}

.allot .dropdown-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.allot .dropdown-menu ul li {
    color: var(--light-gray);
    font-size: 15px;
    padding: 0px 0px 10px;
}

.allot .dropdown-menu li:hover {
    background-color: #e0e0e6;
}

.allot .dropdown-menu ul li .form-check-input {
    height: 1.4rem;
    width: 1.4rem;
}

.allot .form-label {
    color: var(--light-gray);
    font-size: 15px;
    font-weight: 700;
}

.allot .form-control,
.allot .form-select {
    border-color: #D8D8D8;
    border-radius: 12px;
    color: var(--light-gray);
    font-size: 15px;
}

.allot .input-group-text {
    background-color: var(--bs-white);
    color: rgba(67, 66, 99, 0.4);
    font-size: 14px;
}

.allot .input-group-text:first-child {
    border-radius: 12px 0px 0px 12px;
}

.allot .input-group-text:last-child {
    border-radius: 0px 12px 12px 0px;
}

.allot .input-group .form-control {
    border-left: 0;
    border-right: 0;
    padding-left: 0;
}

.allot .input-group .form-select {
    border-radius: 0px 12px 12px 0px;
}

.allot .input-group .form-select option {
    background-color: #e0e0e6;
}

.allot .search {
    background-image: url("../images/icn_search.png");
    background-position: 98% center;
    text-indent: 0px;
}

.allot .btn-primary {
    background-color: var(--royal-blue);
    border-color: var(--royal-blue);
    border-radius: 15px;
    font: 700 15px var(--primary-font);
    line-height: 26px;
}

.nub-control {
    background-color: #f0f0f0;
    border: 1px solid #D8D8D8;
    border-radius: 12px;
    height: 36.5px;
    padding: 2px 6px;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}

.nub-control button {
    background: inherit;
    border: 0px;
    display: block;
    height: 14px;
    line-height: 14px;
    width: 26px;
}

.dropdown-menu li {
    color: var(--light-gray);
    font-size: 15px;
}

.dropdown-menu li a {
    color: var(--light-gray);
    display: block;
    padding: 0.275rem 0rem;
}

.text-light {
    background-color: #F3F4FA !important;
    border-radius: 17px;
    color: #43425D !important;
    font-size: 15px;
    font-weight: 400;
}

.btn-cancel {
    background-color: var(--bs-white);
    border: 1px solid #D8D8D8;
    border-radius: 12px;
    color: #DB1C1C;
    font-size: 15px;
    font-weight: 600;
    text-transform: capitalize;
}

.btn-cancel:hover,
.btn-cancel:focus {
    background-color: var(--bs-white);
    border: 1px solid #D8D8D8;
    border-radius: 12px;
    color: #DB1C1C;
}

.btn-make {
    background-color: #F3F4FA;
    border: inherit;
    border-radius: 10px;
    color: var(--light-gray);
    font-size: 12px;
    font-weight: 700;
}

.btn-make:hover,
.btn-make:focus {
    background-color: #F3F4FA !important;
    border: inherit;
    border-radius: 10px;
    color: var(--light-gray);
}

.btn-sm {
    font-size: 12px;
}

.selections {
    border: 1px solid #D8D8D8;
    border-radius: 15px;
    height: 325px;
    overflow-y: scroll;
    margin-bottom: 1rem;
    padding: 20px 20px;
    width: 100%;
}

.selections hr {
    border-color: rgba(112, 112, 112, 0.7);
    margin: 15px 0px;
}

.selections strong {
    font-size: 15px;
    font-weight: 700;
}

.drop-file {
    border: 2px dashed #D8D8D8;
    border-radius: 12px;
    color: var(--light-gray);
    font-size: 15px;
    padding: 20px 10px;
    text-align: center;
    width: 100%;
}

.drop-file a {
    color: var(--light-gray);
    display: block;
}

.drop-file span {
    font-size: 13px;
    opacity: 0.5;
}

.line {
    background: url("../images/line_01.png") no-repeat left -5px;
    padding-left: 35px;
}

.line-1 {
    background: url("../images/line_02.png") no-repeat left -37px;
    padding-left: 35px;
}

.line-2 {
    background: url("../images/line_03.png") no-repeat left -37px;
    padding-left: 35px;
}

.disabled {
    background-color: #707070;
    border-color: #707070;
    opacity: 0.3;
}

.red {
    color: var(--red);
}

.btn.proxy,
.btn.alternate {
    background-color: var(--royal-blue);
    color: var(--bs-white);
    line-height: inherit !important;
    border-radius: 10px;
    max-width: 101px;
    width: 100%;
}

.btn.proxy:hover,
.btn.proxy:focus {
    background-color: var(--royal-blue) !important;
    color: var(--bs-white);
}

.btn.alternate {
    max-width: 126px;
}

.btn.alternate:hover,
.btn.alternate:focus {
    background-color: var(--royal-blue) !important;
    color: var(--bs-white);
}

.btn.alternate:hover span {
    display: none;
}

.btn.alternate span+span {
    display: none;
}

.btn.alternate:hover span+span {
    display: block;
}

.overdue .acting {
    display: none;
}

.overdue:hover .normal {
    display: none;
}

.overdue:hover .acting {
    display: block;
}

.mv {
    margin-top: -3px;
}

/*--------- Scrollable Table ---------*/

.wrapper {
    clear: both;
    margin-bottom: 40px;
    padding: 5px;
    max-width: 1140px;
    width: 100%;
}

.table-scores {
    table-layout: fixed;
    display: inline-block;
    background: var(--bs-white);
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 16%);
    vertical-align: top;
    position: relative;
    z-index: 1;
}

.table-scores thead {
    background: var(--bs-white);
}

.table-scores thead tr,
.table-scores tbody tr:not(:last-child) {
    border-bottom: 1px solid #e6eaf0;
}

.table-scores td,
.table-scores th {
    padding: 1rem .5rem;
    max-width: 179px;
    height: 52px;
}

.table-scores th {
    background: var(--bs-white);
    color: #43425D;
    font: 700 14px var(--primary-font);
    text-transform: capitalize;
    text-align: left;
}

.table-data-wrapper {
    display: inline-block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    vertical-align: top;
    width: calc(100% - 130px);
}

.table-data-wrapper table {
    border-left: 0;
    width: 100%;
}

.table-data-wrapper thead {
    background: var(--bs-white);
}

.table-data-wrapper td,
.table-data-wrapper th {
    padding: 1rem .5rem;
    min-width: 178px;
    height: 52px;
}

.table-data-wrapper th.entry {
    min-width: 130px !important;
    width: 130px !important;
}

.table-data-wrapper th.number {
    min-width: 230px !important;
    width: 230px !important;
}

.table-data-wrapper th.begin {
    min-width: 275px !important;
    width: 275px !important;
}

.table-data-wrapper th {
    color: #43425D;
    font: 700 13px var(--primary-font);
    text-transform: initial;
}

.table-data-wrapper th span {
    color: #43425D;
    font: 400 13px var(--primary-font);
    text-transform: initial;
}

.table-data-wrapper td {
    color: #43425D;
    font: 400 13px var(--primary-font);
    text-transform: capitalize;
}

.table-data-wrapper td:not(:last-child),
.table-data-wrapper th:not(:last-child) {
    border-right: 1px solid #e6eaf0;
}

.table-data-wrapper thead tr,
.table-data-wrapper tbody tr:not(:last-child) {
    border-bottom: 1px solid #e6eaf0;
}

.table-data-wrapper th.pres {
    min-width: 500px;
}

.table-data-wrapper th.pres-1 {
    min-width: 250px;
}

.table-scores th.vhite {
    height: 68.5px;
}


/*--------- Document CSS ---------*/

.header {
    clear: both;
    padding: 40px 0px;
    width: 100%;
}

.header h1 {
    color: #44435d;
    font-size: 24px;
    font-weight: 600;
    text-transform: capitalize;
}

.meeting {
    background-color: #f5f5f5;
    clear: both;
    padding: 40px 0px;
    width: 100%;
}

.meeting span {
    color: #44435d;
    font-size: 17px;
    font-weight: 300;
    text-transform: capitalize;
}

.meeting h2 {
    color: #44435d;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 1rem;
    text-transform: capitalize;
}

.meeting p {
    color: #44435d;
    font-size: 17px;
    font-weight: 300;
}

.meeting a {
    text-decoration: underline;
}

.inform {
    clear: both;
    padding: 40px 0px;
    min-height: 300px;
    width: 100%;
}

.inform h2 {
    color: #44435d;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 1rem;
    text-transform: capitalize;
}

.inform h2 span {
    font-weight: 300;
}

.inform h4 {
    color: #44435d;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 1rem;
    text-transform: capitalize;
}

.inform p {
    color: #44435d;
    font-size: 17px;
    font-weight: 300;
    width: 90%;
}

.inform ul {
    list-style: none;
    margin: 0px 0px 1.5rem;
    padding: 0;
}

.inform ul li {
    color: #44435d;
    font-size: 17px;
    font-weight: 300;
    width: 90%;
}

.inform ul li strong {
    font-weight: 600;
}

.inform ul li ul {
    padding-left: 35px;
}

.inform .table tr td {
    padding: 12px 12px;
}

.inform .table.border {
    border: 2px solid #333333 !important;
}

.inform .border-start {
    border-left: 2px solid #333333 !important;
}

.dots {
    border-bottom: 2px dotted #333333;
    display: inline-block;
    padding-bottom: 10px;
}

.copy {
    background-color: #f5f5f5;
    clear: both;
    color: #44435d;
    font-size: 17px;
    font-weight: 300;
    padding: 20px 0px;
    width: 100%;
}

.copy .col:last-child {
    text-align: right;
}

.copy strong {
    font-weight: 600;
}

.certificate {
    background: url(../images/ebm.jpg) no-repeat center;
    border: 3px solid #cccccc;
    clear: both;
    font-size: 14px;
    font-weight: 400;
    margin: 20px auto;
    padding: 20px 60px;
    max-width: 1320px;
    width: 100%l;
}

.certificate .label {
    background-color: #f5f5f5;
    border: 1px solid #c6c6c5;
    color: #44435d;
    font-size: 14px;
    font-weight: 400;
    display: inline-block;
    padding: 8px 15px;
    width: 200px;
}

.certificate h1 {
    color: #44435d;
    font-size: 26px;
    font-weight: 600;
}

.certificate h1 span {
    font-size: 14px;
    font-weight: 400;
}

.certificate h2 {
    color: #44435d;
    font-size: 21px;
    font-weight: 600;
}

.certificate h3 {
    color: #44435d;
    font-size: 15px;
    font-weight: 600;
}

.certificate p {
    color: #44435d;
    font-size: 14px;
    font-weight: 400;
}

.certificate .border-bottom {
    display: block;
    padding-left: 5%;
}

/*-------------------
    Media Query
---------------------------*/

@media only screen and (max-width: 767px) {
    p {
        font-size: 12px;
    }

    h1 {
        font-size: 28px;
    }

    .col {
        flex-basis: auto;
    }

    .signin p {
        margin: 0px auto 1rem;
        width: 260px;
    }

    .foot {
        position: fixed;
    }

    .signin .verify {
        margin: 0px auto 1rem;
        max-width: 260px;
    }

    header .text-end {
        text-align: inherit !important;
    }

    .note {
        max-width: 340px;
    }

    .copy .col:last-child {
        text-align: left;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    p {
        font-size: 13px;
    }

    .pic {
        height: 50vh;
    }

    .wrapper {
        max-width: 685px;
    }

    .action {
        min-height: 122px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1180px) {
    p {
        font-size: 13px;
    }

    .signin .form-check-label,
    .signin a {
        font-size: 13px;
    }

    .wrapper {
        max-width: 940px;
    }

    .action {
        min-height: 100px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1280px) {
    .action {
        min-height: 100px;
    }
}

@media (min-width: 1400px) {
    .wrapper {
        max-width: 1320px;
    }
}

@media (min-width: 1600px) {
    .wrapper {
        max-width: 1820px;
    }
}



/* table view css start here */
.task-status {
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 12px;
    display: inline-block;
}

.task-status.in-progress {
    color: #fff;
    background-color: rgba(0, 123, 255, 0.5);
}

.task-status.not-started {
    color: #fff;
    background-color: rgba(220, 53, 69, 0.5);
}

/* table view css end here */


/*Validation Start Here*/
.error-message {
    color: red;
}

/*Validation End Here*/


/*Interactive element cursors Start Here*/
/* Baseline: an arrow everywhere. Left to the browser, hovering plain page copy
   (paragraphs, table cells, headings) shows the text/I-beam cursor, which reads as
   "this is editable". Force a default arrow so only genuinely editable fields and
   clickable controls opt out of it via the more specific rules below. */
body {
    cursor: default;
}

/* Buttons and native form controls default to an arrow cursor in most browsers;
   previously they only picked up a pointer from scoped rules (.sort, .offcanvas,
   .allot), so the cursor changed depending on where the control sat on the page.
   Set it once, globally, so anything clickable reads as clickable. */
a,
button,
.btn,
[role="button"],
[data-bs-toggle],
[onclick],
summary,
.nav-link,
.dropdown-item,
.page-link,
select,
.form-select,
input[type="checkbox"],
input[type="radio"],
input[type="submit"],
input[type="button"],
input[type="reset"],
.form-check-input,
.form-check-label,
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="file"],
input[type="color"],
input[type="range"] {
    cursor: pointer;
}

/* The calendar/clock glyph inside a date field is its own shadow-DOM element
   and does not inherit the cursor from the input. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
}

select:disabled,
.form-select:disabled,
input:disabled,
button:disabled,
.btn:disabled,
.btn.disabled,
.nav-link.disabled,
.dropdown-item.disabled,
.page-link.disabled,
.form-check-input:disabled,
.form-check-input:disabled ~ .form-check-label,
select[readonly],
input[readonly] {
    cursor: not-allowed;
}

/* readonly is used on date/time fields to force calendar-only entry, but the
   field still opens the picker on click -- keep it a pointer, not not-allowed.
   Higher specificity than input[readonly] above, so it wins. */
input[type="date"][readonly],
input[type="datetime-local"][readonly],
input[type="month"][readonly],
input[type="week"][readonly],
input[type="time"][readonly] {
    cursor: pointer;
}

/* Editable free-text fields get the I-beam so they read as "type here". The
   :not(readonly/disabled) guards both raise specificity above the not-allowed rule
   and keep locked fields showing not-allowed rather than an editable-looking caret. */
input[type="text"]:not([readonly]):not([disabled]),
input[type="email"]:not([readonly]):not([disabled]),
input[type="password"]:not([readonly]):not([disabled]),
input[type="search"]:not([readonly]):not([disabled]),
input[type="tel"]:not([readonly]):not([disabled]),
input[type="url"]:not([readonly]):not([disabled]),
input[type="number"]:not([readonly]):not([disabled]),
input:not([type]):not([readonly]):not([disabled]),
textarea:not([readonly]):not([disabled]),
[contenteditable="true"],
[contenteditable=""] {
    cursor: text;
}

/* Resize affordance consistency: any textarea that is resizable resizes vertically
   only, so the grabber always shows the same north-south resize cursor (and can't be
   dragged sideways out of the layout). Fields deliberately pinned with an inline
   `resize: none` keep it -- inline styles outrank this rule. */
textarea {
    resize: vertical;
}

/*Interactive element cursors End Here*/