html,
body {
    color: #152d2e;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 16px;
    height: 100vh;
    margin: 0;
}

body {
    background-color: #f5f5f5;
}

/**
* Extracted from: SweetAlert
* Modified by: Istiak Tridip
*/
.success-checkmark {
    width: 80px;
    height: 115px;
    margin: 0 auto;
}
    
.check-icon {
    width: 80px;
    height: 80px;
    position: relative;
    border-radius: 50%;
    box-sizing: content-box;
    border: 4px solid #4CAF50;
}
        
.check-icon::before {
    top: 3px;
    left: -2px;
    width: 30px;
    transform-origin: 100% 50%;
    border-radius: 100px 0 0 100px;
}
        
.check-icon::after {
    top: 0;
    left: 30px;
    width: 60px;
    transform-origin: 0 50%;
    border-radius: 0 100px 100px 0;
    animation: rotate-circle 4.25s ease-in;
}
        
.check-icon::before, .check-icon::after {
    content: '';
    height: 100px;
    position: absolute;
    background: #FFFFFF;
    transform: rotate(-45deg);
}
        
.icon-line {
    height: 5px;
    background-color: #4CAF50;
    display: block;
    border-radius: 2px;
    position: absolute;
    z-index: 10;
}
            
.icon-line.line-tip {
    top: 46px;
    left: 14px;
    width: 25px;
    transform: rotate(45deg);
    animation: icon-line-tip 0.75s;
}

.icon-line.line-long {
    top: 38px;
    right: 8px;
    width: 47px;
    transform: rotate(-45deg);
    animation: icon-line-long 0.75s;
}
        
.icon-circle {
    top: -4px;
    left: -4px;
    z-index: 10;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    position: absolute;
    box-sizing: content-box;
    border: 4px solid rgba(76, 175, 80, .5);
}
        
.icon-fix {
    top: 8px;
    width: 5px;
    left: 26px;
    z-index: 1;
    height: 85px;
    position: absolute;
    transform: rotate(-45deg);
    background-color: #FFFFFF;
}

@keyframes rotate-circle {
    0% {
        transform: rotate(-45deg);
    }
    5% {
        transform: rotate(-45deg);
    }
    12% {
        transform: rotate(-405deg);
    }
    100% {
        transform: rotate(-405deg);
    }
}

@keyframes icon-line-tip {
    0% {
        width: 0;
        left: 1px;
        top: 19px;
    }
    54% {
        width: 0;
        left: 1px;
        top: 19px;
    }
    70% {
        width: 50px;
        left: -8px;
        top: 37px;
    }
    84% {
        width: 17px;
        left: 21px;
        top: 48px;
    }
    100% {
        width: 25px;
        left: 14px;
        top: 45px;
    }
}

@keyframes icon-line-long {
    0% {
        width: 0;
        right: 46px;
        top: 54px;
    }
    65% {
        width: 0;
        right: 46px;
        top: 54px;
    }
    84% {
        width: 55px;
        right: 0px;
        top: 35px;
    }
    100% {
        width: 47px;
        right: 8px;
        top: 38px;
    }
}

.medal {
    display: inline-block;
    height: 2em;
    width: 2em;
    line-height: 1.7em;

    -moz-border-radius: 1em; /* or 50% */
    border-radius: 1em; /* or 50% */

    border: 0.2em solid white;
    background-color: black;
    color: white;
    text-align: center;
    font-weight: bold;
    /*box-shadow: 0 0 0.5em rgba(0,0,0,.1);*/
}

.medal.gold-medal {
    border-color: #fff080;
    background-color: #fee101;
    content: "1";
}

.medal.silver-medal {
    border-color: #f2f2f2;
    background-color: #c2c2c2;
    content: "2";
}

.medal.bronze-medal {
    border-color: #e1b284;
    background-color: #cd7f32;
    content: "3";
}

span.at-sign {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
}

.card .card-multi-choice {
    background-color: white;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: .5rem;
    transition: 0.1s;
}

.card .card-directory {
    background-color: white;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: .5rem;
}

/*.card .card-multi-choice img {
    filter: brightness(0);
}*/

.card .card-multi-choice:hover {
    color: white;
    background-color: #ee1c25 !important;
    border: 1px solid rgba(0,0,0,0);
    border-radius: .5rem;
    box-shadow: 0 1rem 3rem rgba(26,111,80,.35);
}

.card .card-multi-choice:hover img {
    filter: brightness(0) invert(1);
}

img.card-multi-choice-icon {
    width: 1.75rem;
    margin-right: 1rem;
}

img.card-hsg-icon {
    width: 2rem;
    margin-right: 0.75rem;
}

img.birthday-icons {
    height: 1.5rem;
    margin-right: 0.25rem;
}

.pointer-cursor {
    cursor: pointer;
}

.bg-transparent {
    background-color: transparent;
}

.form-signin {
    width: 100%;
    max-width: 480px;
    margin: auto;
}

.form-signin .checkbox {
    font-weight: 400;
}

.form-signin .form-floating:focus-within {
    z-index: 2;
}

.form-signin input[type="text"] {
    margin-bottom: 10px;
}

.form-signin input[type="password"] {
    margin-bottom: 10px;
}

.custom-control {
    padding-left: 1.5rem;
}

.custom-control.custom-radio, .custom-control.custom-checkbox {
    margin-top: 0.4rem;
}

nav.navbar {
    position: fixed; z-index: 1000; top: 0; left: 0;
}

table th {
    font-family: 'Poppins';
    font-weight: 600 !important;
}

th.select-checkbox::before, td.select-checkbox::before {
    margin-top: 2px !important;
}

td.select-checkbox::after {
    margin-top: -15px !important;
}

td.table-group-header {
    font-family: 'Poppins' !important;
    font-weight: 600 !important;
}

/*table.dataTable:not([collapsed]) td.dtr-control {
    padding-left: 8px !important;
}*/

table.dataTable.collapsed td.dtr-control {
    padding-left: 30px !important;
}

table.dataTable tbody>tr.selected, table.dataTable tbody>tr>.selected {
    background-color: #fabbbe;
}

.btn.btn-unit {
    border-width: 2px;
    font-size: 1rem;
    width: 95px;
}

.btn.btn-unit.disabled {
    color: #8c97a2;
}

a.btn.btn-unit.chinese-unit:not(:hover) {
    background: rgba(185, 155, 105, .5);
}

a.btn.btn-unit.malay-unit:not(:hover) {
    background: rgba(26, 111, 80, .5);
}

a.btn.btn-unit.indian-unit:not(:hover) {
    background: rgba(0, 69, 230, .33);
}

span.badge.visited-badge {
    padding: .3em .2em;
}

.svg-box {
    display:inline-block;
    position: relative;
    width:150px;
}

.yellow-stroke {
    stroke: #FFC107;
}

.red-stroke {
    stroke: #F50002;
}

.circular circle.path {
    stroke-dasharray: 330;
    stroke-dashoffset: 0;
    stroke-linecap: round;
    opacity: 0.4;
    animation: 0.7s draw-circle ease-out;
}
.alert-sign {
    stroke-width:6.25;
    stroke-linecap: round;
    position: absolute;
    top: 40px;
    left: 68px;
    width: 15px;
    height: 70px;
    animation: 0.5s alert-sign-bounce cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.alert-sign .dot {
    stroke:none;
    fill: #FFC107;
}

.alert-sign .red-dot {
    stroke:none;
    fill: #F50002;
}

@keyframes alert-sign-bounce {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    50% {
        transform: scale(0);
        opacity: 1;
    }

    100% {
        transform: scale(1);
    }
}

/*@media only screen and (max-width: 768px) {
    .dataTables_wrapper {
        overflow-x: auto;
    }
}*/

select.monthselect, select.yearselect {
    font-family: 'Poppins' !important;
}

.daterangepicker td.active, .daterangepicker td.active:hover {
    background-color: #ee1c25 !important;
}

img.qr-code-logo {
    width: 40%;
    border: 6px solid white;
    background-color: white;
}

.qr-code-logo-container {
    position: absolute;
    z-index: 10;
}

/* Safari 11+ */
@media not all and (min-resolution:.001dpcm)
    { @supports (-webkit-appearance:none) and (stroke-color:transparent) {
    .nav-link.dropdown-toggle {
        outline: none;
    }
}}

a.nav-link {
    color: #152d2e !important;
}

a.nav-link:hover {
    color: #000000 !important;
}

.navbar .nav-item:not(.show) .dropdown-menu{  display:block; opacity: 0;  visibility: hidden; transition:.3s; margin:0; height: 0; overflow: hidden; padding: 0;}
.navbar .dropdown-menu.fade-down{ top:80%; transform: rotateX(-75deg); transform-origin: 0% 0%; }
.navbar .dropdown-menu.fade-up{ top:180%;  }
.navbar .nav-item.show .dropdown-menu{ transition: .3s; opacity:1; visibility:visible; top:100%; transform: rotateX(0deg); height: auto;}

.navbar-collapse {
    text-align: left;
}

@media (min-width:1200px) {
    .navbar-collapse {
        position: absolute !important;
        right: 0;
    }
}

@media (max-width:992px) {
    .nav-link {
        padding: .5rem 1rem;
    }
}

.menu {
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    padding: 0;
}
.line {
    fill: none;
    stroke: black;
    stroke-width: 6;
    transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
    stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.line1 {
    stroke-dasharray: 60 207;
    stroke-width: 6;
}
.line2 {
    stroke-dasharray: 60 60;
    stroke-width: 6;
}
.line3 {
    stroke-dasharray: 60 207;
    stroke-width: 6;
}
.opened .line1 {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
    stroke-width: 6;
}
.opened .line2 {
    stroke-dasharray: 1 60;
    stroke-dashoffset: -30;
    stroke-width: 6;
}
.opened .line3 {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
    stroke-width: 6;
}

.loading-svg-container {
    width: 100px;
    height: 50px;
    display: inline-block;
}

.header-query {
    margin-left: 1.49rem;
    margin-right: 1.45rem;
}

.grid {
    padding-bottom: 1rem;
}

/* These are the classes that are going to be applied: */
.size-1of1 { width: 100%; }
.size-1of2 { width: 50%; }
.size-1of3 { width: 33.333%; }
.size-1of4 { width: 25%; }

.card.listing-container {
    border: none;
/*    float: left;*/
}

.column { float: left; }

.card-columns {
    column-count: 1;
    column-gap: 0;
}

@media screen and (max-width: 767px){
    .grid[data-columns]::before {
        content: '1 .column.size-1of1';
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .grid[data-columns]::before {
        content: '2 .column.size-1of2';
    }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
    .grid[data-columns]::before {
        content: '3 .column.size-1of3';
    }
}

@media screen and (min-width: 1200px) {
    .grid[data-columns]::before {
        content: '4 .column.size-1of4';
    }
}

.listing_like_button {
    font-size: 1.5rem;
}

._listing_share_button {
    cursor: pointer;
}

._listing_share {
    font-size: 1.25rem;
}

.overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #000000;
    opacity: 0.6;
    z-index: 8;
}

.overlay-query {
    display: none;
    height: 150%;
}

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
    border-color: rgba(238, 28, 37, 1);
    box-shadow: none;
    outline: 0 none;
}

.logo {
    position: absolute;
    bottom: 125%;
    width: 100%;
    z-index: 8;
}

.static-header {
    position: fixed;
    top: 40%;
    z-index: 10;
    width: calc(100% - 3rem);
}

::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: darkgray !important;
    opacity: 1;
    /* Firefox */
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    margin-bottom: 0.5rem;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    ;
}

.modal {
    --animate-duration: 0.3s;
}

.modal-header {
    padding-bottom: 0;
    text-align: center;
    border-bottom: none;
}

img.wl-logo {
    height: 2rem;
    padding-right: 0.25rem;
}

img.wdo-logo {
    height: 2rem;
    padding-top: 0.1rem;
}

img.main-logo {
    height: 2.5rem;
}

/*@media (min-width:576px) {
    img.main-logo {
        height: 2.5rem;
    }
}*/

img.main-logo-duo {
    height: 2.5rem;
}

#empty-space-1 {
    height: 25px;
}

#empty-space-2 {
    height: 100px;
}

#empty-space-5 {
    height: 50px;
}

@media (max-width: 991px) {
    #empty-space-3 {
        height: 75px;
    }
}

@media (max-width: 991px) {
    #empty-space-4 {
        height: 90px;
    }
}

#logo-mobile {
    height: 2.5rem;
}

.logo-mobile {
    cursor: pointer;
}

.t1_tag,
.t2_tag {
    display: inline-block;
    padding: 0.5rem;
    text-align: center;
    margin: 2px;
    border-radius: 3px;
    cursor: pointer;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;
    color: #152d2e;
    transition: all 0.2s ease;
}

.t1_tag:not(.t1_tag_selected):hover,
.t2_tag:not(.t2_tag_selected):hover {
    background: #e6ebea;
}

.t1_tag_selected,
.t2_tag_selected {
    color: white;
    background: #ee1c25;
}

/* Checkbox */

.position-center-vertical {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

.pure-checkbox *,
.pure-radiobutton * {
    box-sizing: border-box;
}

.pure-checkbox *:before,
.pure-radiobutton *:before,
.pure-checkbox *:after,
.pure-radiobutton *:after {
    box-sizing: border-box;
}

.pure-checkbox input[type="checkbox"],
.pure-radiobutton input[type="checkbox"],
.pure-checkbox input[type="radio"],
.pure-radiobutton input[type="radio"] {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.pure-checkbox input[type="checkbox"]:focus+label:before,
.pure-radiobutton input[type="checkbox"]:focus+label:before,
.pure-checkbox input[type="radio"]:focus+label:before,
.pure-radiobutton input[type="radio"]:focus+label:before,
.pure-checkbox input[type="checkbox"]:hover+label:before,
.pure-radiobutton input[type="checkbox"]:hover+label:before,
.pure-checkbox input[type="radio"]:hover+label:before,
.pure-radiobutton input[type="radio"]:hover+label:before {
    border-color: #ee1c25;
    background-color: #f2f2f2;
}

.pure-checkbox input[type="checkbox"]:active+label:before,
.pure-radiobutton input[type="checkbox"]:active+label:before,
.pure-checkbox input[type="radio"]:active+label:before,
.pure-radiobutton input[type="radio"]:active+label:before {
    transition-duration: 0s;
}

.pure-checkbox input[type="checkbox"]+label,
.pure-radiobutton input[type="checkbox"]+label,
.pure-checkbox input[type="radio"]+label,
.pure-radiobutton input[type="radio"]+label {
    position: relative;
    padding: 5px 5px 5px 1.5em;
    vertical-align: middle;
    user-select: none;
    cursor: pointer;
}

.pure-checkbox input[type="checkbox"]+label:before,
.pure-radiobutton input[type="checkbox"]+label:before,
.pure-checkbox input[type="radio"]+label:before,
.pure-radiobutton input[type="radio"]+label:before {
    box-sizing: content-box;
    content: '';
    color: #ee1c25;
    position: absolute;
    top: 50%;
    left: 0;
    width: 15px;
    height: 15px;
    margin-top: -9px;
    border: 1.5px solid #ee1c25;
    text-align: center;
    transition: all 0.2s ease;
}

.pure-checkbox input[type="checkbox"]+label:after,
.pure-radiobutton input[type="checkbox"]+label:after,
.pure-checkbox input[type="radio"]+label:after,
.pure-radiobutton input[type="radio"]+label:after {
    box-sizing: content-box;
    content: '';
    background-color: #ee1c25;
    position: absolute;
    top: 50%;
    left: 4px;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    transform: scale(0);
    transform-origin: 50%;
    /*transition: transform 200ms ease-out;*/
}

.pure-checkbox input[type="checkbox"]:disabled+label:before,
.pure-radiobutton input[type="checkbox"]:disabled+label:before,
.pure-checkbox input[type="radio"]:disabled+label:before,
.pure-radiobutton input[type="radio"]:disabled+label:before {
    border-color: #cccccc;
}

.pure-checkbox input[type="checkbox"]:disabled:focus+label:before,
.pure-radiobutton input[type="checkbox"]:disabled:focus+label:before,
.pure-checkbox input[type="radio"]:disabled:focus+label:before,
.pure-radiobutton input[type="radio"]:disabled:focus+label:before,
.pure-checkbox input[type="checkbox"]:disabled:hover+label:before,
.pure-radiobutton input[type="checkbox"]:disabled:hover+label:before,
.pure-checkbox input[type="radio"]:disabled:hover+label:before,
.pure-radiobutton input[type="radio"]:disabled:hover+label:before {
    background-color: inherit;
}

.pure-checkbox input[type="checkbox"]:disabled:checked+label:before,
.pure-radiobutton input[type="checkbox"]:disabled:checked+label:before,
.pure-checkbox input[type="radio"]:disabled:checked+label:before,
.pure-radiobutton input[type="radio"]:disabled:checked+label:before {
    background-color: #cccccc;
}

.pure-checkbox input[type="checkbox"]+label:after,
.pure-radiobutton input[type="checkbox"]+label:after {
    background-color: transparent;
    top: 50%;
    left: 4px;
    width: 8px;
    height: 3px;
    margin-top: -4px;
    border-style: solid;
    border-color: #ffffff;
    border-width: 0 0 3px 3px;
    border-image: none;
    transform: rotate(-45deg) scale(0);
}

.pure-checkbox input[type="checkbox"]:checked+label:after,
.pure-radiobutton input[type="checkbox"]:checked+label:after {
    content: '';
    transform: rotate(-45deg) scale(1);
    /*transition: transform 200ms ease-out;*/
}

.pure-checkbox input[type="radio"]:checked+label:before,
.pure-radiobutton input[type="radio"]:checked+label:before {
    background-color: white;
}

.pure-checkbox input[type="radio"]:checked+label:after,
.pure-radiobutton input[type="radio"]:checked+label:after {
    transform: scale(1);
}

.pure-checkbox input[type="radio"]+label:before,
.pure-radiobutton input[type="radio"]+label:before,
.pure-checkbox input[type="radio"]+label:after,
.pure-radiobutton input[type="radio"]+label:after {
    border-radius: 50%;
}

.pure-checkbox input[type="checkbox"]:checked+label:before,
.pure-radiobutton input[type="checkbox"]:checked+label:before {
    background: #ee1c25;
}

.pure-checkbox input[type="checkbox"]:checked+label:after,
.pure-radiobutton input[type="checkbox"]:checked+label:after {
    transform: rotate(-45deg) scale(1);
}

.pure-checkbox.pure-checkbox-inline,
.pure-radiobutton.pure-checkbox-inline,
.pure-checkbox.pure-radiobutton-inline,
.pure-radiobutton.pure-radiobutton-inline {
    display: inline-block;
}

.pure-checkbox-toggle input[type="checkbox"] {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.pure-checkbox-toggle input[type="checkbox"]+label {
    position: relative;
    padding: 5px 5px 5px 40px;
    vertical-align: middle;
    user-select: none;
    cursor: pointer;
    display: block;
}

.pure-checkbox-toggle input[type="checkbox"]+label:before {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    left: 0;
    content: '';
    color: #ee1c25;
    width: 35px;
    height: 20px;
    border-radius: 50px;
    text-align: center;
    transition: all 0.4s;
    background-color: #d6d6d6;
}

.pure-checkbox-toggle input[type="checkbox"]+label:after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    left: 0;
    content: '';
    background-color: #ffffff;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid #d6d6d6;
    transition: all 0.2s;
    box-sizing: border-box;
}

.pure-checkbox-toggle input[type="checkbox"]:checked+label:before {
    box-shadow: inset 0 0 0 10px #ee1c25;
}

.pure-checkbox-toggle input[type="checkbox"]:checked+label:after {
    left: 15px;
    border-color: #ee1c25;
    background-color: #ffffff;
}

.pure-checkbox-toggle input[type="checkbox"]:disabled+label {
    cursor: default;
}

.pure-checkbox-toggle input[type="checkbox"]:disabled+label:before {
    box-shadow: inset 0 0 0 10px #e3e3e3;
}

.pure-checkbox-toggle input[type="checkbox"]:disabled+label:after {
    border-color: #e3e3e3;
}

.pure-checkbox-toggle input[type="checkbox"]:disabled:checked+label:before {
    box-shadow: inset 0 0 0 10px #999999;
}

.pure-checkbox-toggle input[type="checkbox"]:disabled:checked+label:after {
    border-color: #999999;
}

.pure-checkbox-toggle--right input[type="checkbox"]+label {
    padding: 5px 40px 5px 5px;
}

.pure-checkbox-toggle--right input[type="checkbox"]+label:before {
    left: auto;
    right: 0;
}

.pure-checkbox-toggle--right input[type="checkbox"]+label:after {
    left: auto;
    right: 15px;
}

.pure-checkbox-toggle--right input[type="checkbox"]:checked+label:after {
    left: auto;
    right: 0;
}

@keyframes borderscale {
    50% {
        box-shadow: 0 0 0 2px #ee1c25;
    }
}

/* End Checkbox */

.clockpicker {
    width: 224px;
}

.clockpicker-popover.popover {
    font-family: 'Poppins' !important;
}

.clockpicker-popover .popover-title {
    border-radius: .3rem;
    font-weight: 600;
    padding: .25rem;
}

.clockpicker-popover .popover-title .text-primary {
    color: #ee1c25 !important;
}

.clockpicker-canvas-bearing,
.clockpicker-canvas-fg {
    fill: #abb9b6 !important;
}

.clockpicker-canvas line {
    stroke: #abb9b6 !important;
}

.clockpicker-canvas-bg {
    fill: #e6ebea !important;
}

.clockpicker-tick.active,
.clockpicker-tick:hover {
    background-color: #e6ebea !important;
    background-color: rgba(230, 235, 234, .25) !important;
}

.clockpicker-canvas-bg-trans {
    fill: rgba(171, 185, 182, .25) !important;
}

button.navbar-toggler {
    outline: none;
    position: absolute;
    right: 0.5rem;
}

a.nav-link {
    color: #152d2e !important;
    font-family: 'Poppins';
    font-weight: 600;
    font-size: 17px;
}

a.nav-link:hover {
    color: #000000 !important;
}

a.nav-link.nav-link-white {
    color: white !important;
}

a.nav-link.nav-link-white:hover {
    color: lightgrey !important;
}

a.nav-link.home-button {
    font-size: 1.25rem;
}

.btn {
    font-weight: 600;
    font-family: 'Poppins';
}

.btn:* {
    font-weight: 600;
    font-family: 'Poppins';
}

@media (max-width:992px) {
    .action-button-placeholder {
        flex-wrap:  wrap;
    }

    .btn.action-button {
        width: 100%;
        margin: 0.25rem 0 !important;
    }
}

.notify-tap {
    position: absolute;
    background: rgba(0, 0, 0, 0.25);
    z-index: 10;
    display: none;
}

i.finger-icon {
    font-size: 3rem;
    color: white;
    text-shadow: 0 0 1rem grey;  
}

.notify-tap-text-shadow {
    text-shadow: 0 0 0.5rem grey;
}

.ripple {
    margin: auto;
    margin-top: 3rem;
    background-color: #fff;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    position:relative;
    animation: ripple 3s linear infinite;
    animation-delay: 0s;
}
.ripple::before,
.ripple::after{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    border-radius: 50%;
    animation:inherit;
    animation-delay:1s;
}
.ripple::after {
    animation-delay:2s;
}
@keyframes ripple {
    0% {
        box-shadow: 0 0 0 .5rem rgba(255,255,255, 0.2);
    }
    100% {
        box-shadow: 0 0 0 5rem rgba(255,255,255, 0);
    }
}

/*.btn-primary:active,
.btn-primary:focus {
    background-color: #152d2e !important;
    border-color: #152d2e !important;
}

.btn-primary:hover {
    background-color: #184E3F;
    border-color: #184E3F;
}*/

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

.main-container .card {
    background-color: transparent;
    transition: width 0.2s;
}

.card {
    border-radius: .5rem;
}

.card .card-header {
    border-radius: .5rem .5rem 0 0;
}

.card .card-footer {
    border-radius: 0 0 .5rem .5rem;
}

.container.card {
    background-color: transparent;
}

/* class applies to select element itself, not a wrapper element */
select {
    display: inline-block;
    color: #444;
    /*line-height: 1.3;*/
    padding: .3em 1.4em .3em .6em !important;
    width: auto;
    max-width: 100%;
    /* useful when width is set to anything other than 100% */
    box-sizing: border-box;
    margin: 0;
    border: 1px solid #aaa;
    box-shadow: 0 1px 0 1px rgba(0, 0, 0, .04);
    border-radius: .5em;
    -moz-appearance: none;
    -webkit-appearance: none;
    background-color: #fff;
    /* note: bg image below uses 2 urls. The first is an svg data uri for the arrow icon, and the second is the gradient. 
        for the icon, if you want to change the color, be sure to use `%23` instead of `#`, since it's a url. You can also swap in a different svg icon or an external image reference
        
    */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
        linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
    background-repeat: no-repeat, repeat;
    /* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
    background-position: right .6em top 50%, 0 0;
    /* icon size, then gradient */
    background-size: .5em auto, 100%;
}

/* Hide arrow icon in IE browsers */
select::-ms-expand {
    display: none;
}

/* Hover style */
select:hover {
    border-color: #888;
}

/* Focus style */
select:focus {
    border-color: rgb(238, 28, 37);
    /* It'd be nice to use -webkit-focus-ring-color here but it doesn't work on box-shadow */
    box-shadow: 0 0 1px 3px rgba(247, 142, 146, 0.25);
    box-shadow: 0 0 0 3px -moz-mac-focusring;
    color: #222;
    outline: none;
}

/* Set options to normal weight */
select option {
    font-weight: normal;
}

/* Support for rtl text, explicit support for Arabic and Hebrew */
*[dir="rtl"] select,
:root:lang(ar) select,
:root:lang(iw) select {
    background-position: left .7em top 50%, 0 0;
    padding: .3em .6em .3em 1.4em;
}

/* Disabled styles */
select:disabled,
select[aria-disabled=true] {
    color: graytext;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
        linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
}

select:disabled:hover,
select[aria-disabled=true] {
    border-color: #aaa;
}

input.form-control::-webkit-search-cancel-button {
    position: relative;
    right: -10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' fill='%23152d2e' class='bi bi-x' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") !important;

    -webkit-appearance: none;
    height: 25px;
    width: 25px;
}

table.dataTable thead .sorting_desc {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ee1c25' class='bi bi-arrow-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1z'/%3E%3C/svg%3E");
    background-size: 1em auto;
    background-position: right .2em top 50%;
}

table.dataTable thead .sorting_asc {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ee1c25' class='bi bi-arrow-up' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5z'/%3E%3C/svg%3E");
    background-size: 1em auto;
    background-position: right .2em top 50%;
}

table.dataTable thead .sorting {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23b6babe' class='bi bi-arrow-down-up' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M11.5 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L11 2.707V14.5a.5.5 0 0 0 .5.5zm-7-14a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L4 13.293V1.5a.5.5 0 0 1 .5-.5z'/%3E%3C/svg%3E");
    background-size: 1em auto;
    background-position: right .4em top 50%;
}

table.dataTable thead th {
    padding: 10px 25px;
}

table.dataTable td.dtr-control {
    padding-left: 30px !important;
    padding-right: 30px !important;
}

table.dataTable.dtr-inline.collapsed tr.parent td.dtr-control:before {
    content: "−" !important;
    background-image: linear-gradient(to bottom, #b6babe, #6c757d);
    font-family: 'Poppins' !important;
    line-height: 1.1rem !important;
}

table.dataTable td.dtr-control:before {
    left: 0.25em !important;
    margin-top: -11px !important;
    background-image: linear-gradient(to bottom, #f78e92, #ee1c25);
    border-width: .2em !important;
    font-family: 'Poppins' !important;
    line-height: 1.1rem !important;
}

@media (max-width:992px) {
    .dataTables_length {
        margin-top: .5rem;
    }
}

.hidden-item {
    display: none;
}

.invisible-item {
    visibility: hidden;
}