:root{
    --primary-color: #7512e7;
    --primary-medium-color: #5900d9;
    --primary-dark-color: #2000cc;
    --primary-light-color: #a36af0;
    --primary-light-border-color: var(--primary-light-color);
    --primary-lightest-color: #d8c1f8;
    --secondary-color: #fc5b38;
    --secondary-dark-color: #ff8e00;
    --text-color: #2f2d2d;
    --text-light-color: #98a6ad;
    --text-dark-color: #000033;
    --white-color: #fff;
    --success-color: #00a651;
    --light-success-color: #c2e8cd;
    --error-color: #c9302c;
    --light-error-color: #ffcfd3;
    --warning-color: #ffbc00;
    --light-warning-color: #ffeab2;
    --yellow-color: #ffff22;
    --orange-color: #FFA500;
    --gray: #f1f2f3;
    --light-gray: #f5f8fa;
    --border-color: #dee2e6;
    --body-bg-color: #fafbfe;
    --box-shadow: 0 0 35px 0 rgba(154,161,171,.15);
    --card-box-shadow: 0 1px 1px 0 rgba(66, 66, 66, 0.08), 0 1px 3px 1px rgba(66, 66, 66, 0.16);
    --border-radius: 4px}

body{
    color: var(--text-color);
    font-family: 'Open Sans', sans-serif !important;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: .25px;
    overflow: hidden;
    overflow-y: auto;
    -webkit-font-smoothing: antialiased;
    background-color: var(--body-bg-color)}
body.overflow-hide{overflow: hidden}
*, *:after, *:before {
    outline: none !important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box }
.clear-fix,.clear-fix:before,.clear-fix:after,.section:before,.section:after,.container:before,.container:after,
.row:before,.row:after,.centered:before,.centered:after,nav:before,nav:after,.footer:before,.footer:after,
.table-container:before,.table-container:after{
    content: "";
    display: table;
    clear: both }
html,body,div,span,h1,h2,h3,h4,h5,h6,p,a,img,b,ul,li,form,label,nav,section,menu{border: 0;margin: 0;padding: 0;vertical-align: baseline}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display: block}
a{cursor: pointer;text-decoration: none}
ul{margin: 0;padding: 0;list-style: none}
.container{
    width: 100%;
    max-width: 1090px}
.centered,.container{margin: 0 auto;float: none !important}
.expand{width: 100%}
.hidden,.show-tab-only,.show-small-only,.switch input,.checkbox input,
.radio input{display: none}
.word-wrap,.table tbody td.description{
    word-break: break-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis}
iframe{border: none}
/* Input */
input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], 
input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"],
input[type="tel"], input[type="time"], input[type="url"], input[type="color"], textarea{
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    width: 100%;
    height: 36px;
    color: var(--text-color);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    padding: 7.5px 15px;
    margin: 0;
    margin-bottom: 15px;
    background-color: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    resize: none;
    box-shadow: none;
    -webkit-transition: border-color 0.15s linear, background 0.15s linear;
    -moz-transition: border-color 0.15s linear, background 0.15s linear;
    -ms-transition: border-color 0.15s linear, background 0.15s linear;
    -o-transition: border-color 0.15s linear, background 0.15s linear;
    transition: border-color 0.15s linear, background 0.15s linear}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{ 
  -webkit-appearance: none; 
  margin: 0}
input[type="number"]{-moz-appearance: textfield}
input[type="file"], select{ margin: 0 0 15px 0 }
input[type="file"], select{width: 100%}
input[type="file"]{
    padding: 6px 15px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius)}
select{
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    display: inline-block;
    width: 100%;
    height: 36px;
    float: left;
    color: var(--text-color);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    padding: 5.5px 15px 7.5px 10px;
    margin-bottom: 15px;
    background-color: transparent;
    background-image: url(select.svg);
    background-position: 100% center;
    background-repeat: no-repeat;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: none;
    cursor: pointer}
input[type="text"]:focus,input[type="password"]:focus,input[type="date"]:focus,input[type="datetime"]:focus,
input[type="datetime-local"]:focus,input[type="month"]:focus,input[type="week"]:focus,input[type="email"]:focus,
input[type="number"]:focus,input[type="search"]:focus,input[type="tel"]:focus,input[type="time"]:focus,input[type="url"]:focus,
input[type="color"]:focus,textarea:focus,input[type="file"]:focus,select:focus{border-color: var(--primary-dark-color)}
textarea[rows]{height: auto !important}
.checkbox,.radio{
    position: relative;
    min-height: 24px;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    padding-left: 28px;
    margin-bottom: 15px}
.radio-container .radio{margin-left: 15px}
.radio-container .radio:first-of-type{margin-left: 0}
.checkbox span,.radio span{
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    -webkit-transition: all .2s cubic-bezier(.68,-.55,.265,1.55);
    -moz-transition: all .2s cubic-bezier(.68,-.55,.265,1.55);
    -ms-transition: all .2s cubic-bezier(.68,-.55,.265,1.55);
    -o-transition: all .2s cubic-bezier(.68,-.55,.265,1.55);
    transition: all .2s cubic-bezier(.68,-.55,.265,1.55)}
.radio span{border-radius: 50%}
.only-checkbox .checkbox span,.only-checkbox .radio span{border-color: var(--text-color)}
.checkbox input:checked + span{
    background-color: var(--primary-color);
    border: none}
.radio input:checked + span{border: 6px solid var(--primary-color)}
.checkbox span,.checkbox span::after,.radio span{
    position: absolute;
    top: 2px;
    left: 0;
    display: block;
    width: 20px;
    height: 20px}
.checkbox span::after{
    content: '';
    background-repeat: no-repeat;
    background-position: 5px 3px;
    background-size: 10px}
.checkbox input:checked + span::after{background-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 8 8\'%3E%3Cpath fill=\'%23fff\' d=\'M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z\'/%3E%3C/svg%3E')}

  /* Switch */
.switch{
    position: relative;
    display: inline-block;
    width: 56px;
    height: 24px}
.switch span{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    background-color: var(--text-color);
    border-radius: 1000px;
    cursor: pointer}
.switch input:checked + span{background-color: var(--success-color)}
.switch span::before{
    content: attr(data-off-label);
    position: absolute;
    top: 0;
    right: 3px;
    display: block;
    min-width: 26px;
    color: var(--white-color);
    font-size: 12px;
    font-weight: 600;
    line-height: 24px;
    text-align: center;
    margin: 0 3.5px;
    overflow: hidden}
.switch input:checked + span::before{
    content: attr(data-on-label);
    right: auto;
    left: 4px}
.switch span::after{
    content: '';
    position: absolute;
    top: 3px;
    left: 4px;
    height: 18px;
    width: 18px;
    background-color: var(--white-color);
    border-radius: 50%}
.switch input:checked + span::after{left: 34px}
label{
    color: var(--text-color);
    cursor: pointer;
    max-width: 100%;
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5}
form label{
    float: left;
    font-size: 13px;
    text-align: left;
    margin-bottom: 8px}
.form .submit{margin-top: 15px}
.checkbox-container{
    display: inline-block;
    width: 50%;
    padding-left: 15px;
    vertical-align: top}
.checkbox-container input[type="checkbox"]{
    display: block;
    width: 13px;
    float: left}
.checkbox-container label{
    display: block;
    width: calc(100% - 17px);
    float: left;
    line-height: 13px;
    margin-bottom: 15px;
    margin-left: 4px}
.error-message{
    color: var(--error-color);
    font-size: 13px;
    text-align: left !important;
    padding: 0 5px 15px 5px;
    margin-top: -10px}
.two-inputs{
    display: flex;
    flex-wrap: wrap}
.half-input{width: calc(50% - 7.5px)}
.half-input + .half-input{margin-left: 15px}

/* Button */
button,.button{
    display: inline-block;
    color: var(--white-color);
    font-size: 14px;
    line-height: 1.5;
    padding: 7.5px 15px;
    vertical-align: middle;
    text-align: center;
    background-color: var(--primary-color);
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer}
button[disabled=disabled],button:disabled{
    color: var(--white-color) !important;
    background-color: var(--text-color) !important;
    cursor: not-allowed}
button.cancel-button,.button.cancel-button{
    color: var(--primary-color);
    background-color: transparent}
button.secondary,.button.secondary,.icon-button.secondary{background-color: var(--secondary-color)}
button.success,.button.success,.icon-button.success{background-color: var(--success-color)}
button.danger,.button.danger,.icon-button.danger{background-color: var(--error-color)}
button.warning,.button.warning,.icon-button.warning{background-color: var(--warning-color)}
button.disabled,.button.disabled,.icon-button.disabled{background-color: var(--text-color)}
.icon-button{
    display: inline-block;
    width: 22px;
    height: 22px;
    color: var(--white-color);
    line-height: 22px;
    text-align: center;
    vertical-align: middle;
    margin-left: 4px;
    border-radius: var(--border-radius)}
.icon-button.text{
    width: auto;
    min-width: 22px;
    padding: 0 4px}
.icon-button::before{line-height: 22px}
td .icon-button:first-child{margin-left: 0}
.icon-button.primary{background-color: var(--primary-color)}
.table tbody td .icon-button img{
    display: inline-block;
    width: 14px;
    height: 14px;
    float: none;
    margin-top: 4px;
    border: none;
    border-radius: 0}

a,input,textarea,button,.button,span.close-modal,.switch span,.switch span::before,.switch span::after,.sidebar,
.route-change,footer,.marker-information,.close-marker-tile{
    -webkit-transition: all 0.15s linear;
    -moz-transition: all 0.15s linear;
    -ms-transition: all 0.15s linear;
    -o-transition: all 0.15s linear;
    transition: all 0.15s linear}
.form input.ng-touched.ng-invalid:not(:focus),.form input.ng-dirty.ng-invalid:not(:focus),
.form textarea.ng-touched.ng-invalid:not(:focus),.form textarea.ng-dirty.ng-invalid:not(:focus),
.form select.ng-touched.ng-invalid:not(:focus),.form select.ng-dirty.ng-invalid:not(:focus),
.select2-container-multi.ng-touched.ng-invalid:not(.select2-container-active) .select2-choices,
.select2-container-multi.ng-dirty.ng-invalid:not(.select2-container-active) .select2-choices{border-color: var(--error-color) !important}
.form input.ng-valid:not(:focus),.form textarea.ng-valid:not(:focus),.form select.ng-valid:not(:focus),
.select2-container-multi.ng-valid:not(.select2-container-active) .select2-choices{border-color: var(--success-color) !important}
.submit-button-container{
    text-align: center;
    margin-top: 15px}
.half{
    width: 50%;
    float: left}

/* Body */
.row,.checkbox,.password-container,.route-change,.sidebar-menu,.sidebar-menu-top,.sidebar-menu-logo,.menu-item,.menu-item::before,.menu-item li,
.menu-item a,.menu-item .sub-menu,.main-content,.login-card,.login-card-header,.login-card-body,.login-bottom-text,
.error-message,.top-bar,.credit-validity-wrapper,.credit-validity-row,.credit-validity-wrapper.expired b,
.dashboard-tiles-container,.dashboard-tile,.dashboard-tile-top,.dashboard-tile-bottom,.dashboard-tile-left h5,
.dashboard-tile-left h3,.dashboard-tile-icon,.box,.box-wrapper,.box-title,.form-legend-container,
.form-legend-head,.form-legend-body,.form-legend-row,.box-body,.nav-tabs,.nav-tabs li a,
.table-search-filter-container,.filter-container,.filter-form,.table-container,.table tbody td img,
.next-prev-container,.details-row,.details-form,.upload-images-container,.upload-image-wrapper label,.no-data-container,
.bank-document-card,.bank-document-card h3,.bank-document-list,.bank-document-list li,.bank-document-card p,
.warning-alert,.referral-link,.geo-location img,.modal-body p,.slot-add-container,.day-availability-row,
.graph-filter,.graph-filter-option li > span,.graph-container,footer,.footer,.table-column-chooser-container li,
.checkpoints-map-container,.checkpoints-container,.checkpoint-details,.marker-data{
    width: 100%;
    float: left}

/* Navigation */
.sidebar{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    display: block;
    width: 100%;
    max-width: 250px;
    overflow-y: auto;
    background-color: var(--white-color);
    -webkit-box-shadow: var(--box-shadow) !important;
    box-shadow: var(--box-shadow) !important}
body.minimized .sidebar{width: 0}
.sidebar-menu{padding-bottom: 15px}
.sidebar-menu-logo{
    font-size: 0;
    line-height: 80px;
    text-align: center}
.sidebar-menu-logo img{
    height: 28px;
    vertical-align: middle}
.sidebar-menu-logo img::before{
    color: var(--primary-dark-color);
    font-size: 16px;
    font-weight: 600}
.menu-item{
    position: relative;
    padding-top: 40px}
.menu-item::before{
    content: 'Navigation';
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    color: var(--text-light-color);
    font-size: 12px
    line-height: 1.5;
    text-transform: uppercase;
    padding: 11px 23px}
.menu-item > li > a{
    position: relative;
    display: block;
    color: var(--text-color);
    line-height: 1.5;
    text-transform: capitalize;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 10px 25px;
    border-left: 3px solid transparent}
.menu-item > li > a{padding-left: 50px}
.menu-item > li > a.active,.menu-item > li.open > a.active{
    color: var(--text-dark-color);
    border-left-color: var(--primary-dark-color)}
.menu-item > li > a::before, .menu-item > li > a::after,.top-bar-user .submenu-button::before{
    position: absolute;
    display: block;
    font: normal normal normal 14px/1 FontAwesome;
    width: 15px;
    height: 15px;
    font-size: 15px;
    text-align: center;
    line-height: 15px}
.menu-item > li > a::before{
    top: 13px;
    left: 20px}
.menu-item > li > a::after{
    content: "\f105";
    top: 13px;
    right: 5px}
.menu-item > li.open > a{border-color: var(--text-color)}
.menu-item > li.open > a:after{transform: rotate(90deg)}
.menu-item > li > a.active::before{color: var(--primary-dark-color)}
.menu-item .sub-menu{
    display: none;
    padding-left: 39px;
    background-color: var(--body-bg-color)}
.sub-menu a{
    position: relative;
    display: block;
    width: 100%;
    color: var(--text-color);
    float: left;
    padding: 6px 15px;
    line-height: 1.5;
    text-transform: capitalize;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis}
.sub-menu a.active{color: var(--primary-dark-color)}
#dashboard::before{content: "\f0e4"}
#events::before{content: "\f21c"}
#dashboard::after,#events::after{content: ""}

/* Login */
.login-container{
    max-width: 475px;
    text-align: center;
    padding: 70px 15px 30px}
.login-card{
    overflow: hidden;
    margin-bottom: 30px;
    background-color: var(--white-color);
    border-radius: var(--border-radius);
    -webkit-box-shadow: var(--box-shadow);
    box-shadow: var(--box-shadow)}
.login-card-header{
    font-size: 0;
    padding: 30px 25px;
    background-color: var(--primary-color)}
.login-card-header img{
    height: 28px;
    filter: brightness(0) invert(1)}
.login-card-body{padding: 35px}
.login-title-container{width: 75%}
.login-title{
    font-size: 18px;
    margin-bottom: 10px}
.login-sub-title{
    color: var(--text-light-color);
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 35px}
.forgot-link{
    display: inline-block;
    float: right;
    color: var(--primary-color);
    font-size: 13px;
    font-weight: 600}
.password-container,.forgot-input,.username-input{position: relative}
.password-container input{padding-right: 36px}
.password-container i{
    position: absolute;
    top: 3px;
    right: 3px;
    display: block;
    width: 30px;
    height: 30px;
    font-size: 20px;
    line-height: 30px;
    text-align: center;
    cursor: pointer}
.password-container i.fa-eye{color: var(--primary-dark-color)}
.generate-password{margin-bottom: 15px}
.generate-password + .button{
    vertical-align: top;
    line-height: 1.5;
    margin-left: 5px}
.forgot-input input,.username-input input{padding-right: 60px}
.username-input span{
    position: absolute;
    top: 31px;
    right: 3px;
    display: block;
    width: 30px;
    height: 30px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 60%}
.forgot-input > a,.forgot-input .otp-timer{
    position: absolute;
    top: 35.5px;
    right: 8px;
    display: inline-block}
.forgot-input > a,.forgot-input span,.otp-timer a,.otp-timer span{
    display: inline-block;
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px}
.login-bottom-text{
    text-align: center;
    margin-top: 30px}
.login-bottom-text a,.login-bottom-text a:visited{
    color: var(--primary-dark-color);
    font-weight: 600}


/* Submenu */
.has-submenu{position: relative}
.submenu-button{
    pointer-events: auto;
    cursor: pointer}
.submenu{
    position: absolute;
    top: calc(100% + 10px);
    right: -9px;
    z-index: 899;
    display: none;
    max-height: 80vh;
    padding: 10px 0;
    overflow: hidden;
    overflow-y: auto;
    background-color: var(--white-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow)}
.has-submenu.submenu-active .submenu{display: block}
.submenu::before,.submenu::after{
    content: '';
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent;
    z-index: 2}
.submenu::before{
    top: -10px;
    right: 10px;
    border-bottom-color: rgba(154,161,171,.15);
    border-width: 0 10px 10px 10px}
.submenu::after{
    top: -9px;
    right: 11px;
    border-bottom-color: var(--white-color);
    border-width: 0 9px 9px 9px}
.submenu li{
    position: relative;
    display: block;
    float: none}
.submenu li a{
    position: relative;
    display: block;
    min-width: 170px;
    color: var(--text-color);
    font-size: 16px;
    line-height: 18px;
    white-space: nowrap;
    padding: 8px 20px}
.submenu li a i{
    font-size: 16px;
    margin-right: 10px}

/* Top Bar */
.top-bar{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 15px 30px 45px}
.top-bar::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 50vh;
    min-height: 300px;
    background: var(--primary-color) !important}
.menu-icon{
    position: relative;
    width: 36px;
    color: var(--white-color);
    font-size: 26px;
    line-height: 36px;
    text-align: center;
    margin-right: 10px;
    cursor: pointer}

.top-bar-title{
    position: relative;
    display: inline-block;
    width: calc(100% - 450px);
    color: var(--white-color);
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    padding-right: 20px}

.top-bar-right{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 400px}
.top-bar-credit-validity{
    width: 165px;
    padding: 8px;
    margin-right: 15px;
    background-color: var(--white-color);
    border-radius: var(--border-radius);
    box-shadow: var(--white-box-shadow)}
.credit-validity-wrapper{}
.credit-validity-row + .credit-validity-row{padding-top: 4px}
.credit-validity-row span{
    float: left;
    font-size: 12px;
    line-height: 16px}
.credit-validity-row b{
    display: inline-block;
    float: right;
    color: var(--text-dark-color);
    line-height: 16px;
    font-weight: 600;
    padding-left: 4px}
.credit-validity-wrapper.expired{text-align: center}
.credit-validity-wrapper.expired b{
    color: var(--error-color);
    font-size: 16px;
    text-transform: uppercase}
.credit-validity-wrapper.expired .button{
    font-size: 12px;
    padding: 5px 8px;
    margin-top: 5px}

.top-bar-user{
    width: auto;
    max-width: 220px}
.top-bar-user .submenu-button{
    position: relative;
    display: inline-block;
    min-width: 110px;
    max-width: 100%;
    height: 36px;
    float: right;
    color: var(--white-color);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    padding-top: 17px;
    padding-left: 45px}
.top-bar-user .submenu-button::before{
    content: "\f007";
    top: 0;
    left: 0;
    width: 36px;
    height: 36px;
    color: var(--primary-color);
    font-size: 20px;
    line-height: 36px;
    text-align: center;
    background-color: var(--white-color);
    border-radius: 50%}
.top-bar-user .submenu-button::after{
    content: "Login ID";
    position: absolute;
    top: 0;
    left: 45px;
    font-size: 12px}
.top-bar-user .submenu-button span{pointer-events: none}
.top-bar-user .submenu a{
    font-size: 16px;
    padding-left: 17px;
    border-left: 3px solid transparent}
.top-bar-user .submenu a.active{
    color: var(--text-dark-color);
    border-color: var(--primary-color)}
.top-bar-user i{
    font-size: 18px;
    margin-right: 15px}
.top-bar-user .submenu a.active i{color: var(--primary-color)}

/* Dashboard Tile */
.dashboard-tiles-container{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    padding: 0 15px 30px}
.dashboard-tile-wrapper{
    width: calc(100% / 3);
    padding: 0 15px}
.dashboard-tile{
    height: 100%;
    padding: 15px 25px;
    background-color: var(--white-color);
    border-radius: var(--border-radius);
    -webkit-box-shadow: var(--box-shadow);
    box-shadow: var(--box-shadow)}
.dashboard-tile-left{
    width: calc(100% - 80px);
    float: left}
.dashboard-tile-left h5{
    color: var(--text-color);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    text-transform: uppercase}
.dashboard-tile-left h3,.dashboard-tile h2{
    color: var(--text-dark-color);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.5}
.dashboard-tile-right{
    width: 80px;
    float: left;
    padding: 0 15px}
.dashboard-tile-icon{
    height: 50px;
    text-align: center;
    border-radius: 50%}
.dashboard-tile-icon.primary-bg{background-color: var(--primary-color)}
.dashboard-tile-icon.secondary-bg{background-color: var(--secondary-color)}
.dashboard-tile-icon.success-bg{background-color: var(--success-color)}
.dashboard-tile-icon.warning-bg{background-color: var(--warning-color)}
.dashboard-tile-icon i{
    color: var(--white-color);
    font-size: 20px;
    line-height: 50px}
.dashboard-tile-bottom{
    color: var(--primary-color);
    font-size: 14px;
    line-height: 1.5;
    margin-top: 15px}

/* Dashboard Nav */
.dashboard-nav-container{
    position: relative;
    padding: 0 30px 30px}
.dashboard-nav-container{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap: 30px}
.dashboard-nav-container{padding-top: 34px}
.dashboard-nav-container .dashboard-tile,.result-buttons .dashboard-tile{
    position: relative;
    display: flex;
    align-items: center;
    min-height: 80px;
    box-shadow: var(--card-box-shadow)}
.dashboard-nav-container .dashboard-tile-icon,.result-buttons .dashboard-tile-icon{
    position: absolute;
    top: 15px;
    left: 25px;
    width: 50px;
    height: 50px;
    text-align: center;
    border-radius: 50%}
.dashboard-tile h2{
    font-size: 18px;
    padding-left: 65px}
.result-buttons{
    width: 100%;
    float: left;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap: 30px}

/* Graph Filter */
.graph-filter{padding: 15px}
.graph-filter-left{
    width: 55%;
    float: left;
    color: var(--text-color);
    font-size: 15px;
    line-height: 36px}
.graph-filter-left span{
    color: var(--text-dark-color);
    font-weight: 600}
.graph-filter-right{
    width: 45%;
    float: right}
.graph-filter-option{
    float: right;
    font-size: 0}
.graph-filter-option li{
    position: relative;
    display: inline-block;
    border-right: 1px solid var(--white-color)}
.graph-filter-option li:last-child{border: none}
.graph-filter-option li > span{
    font-size: 15px;
    line-height: 36px;
    padding: 0 15px;
    background-color: var(--border-color);
    cursor: pointer}
.graph-filter-option li:first-child > span{
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius)}
.graph-filter-option li:last-child > span{
    border: none;
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius)}
.graph-filter-option li > span.active{
    color: var(--white-color);
    background-color: var(--primary-color)}
.graph-between-date-container{
    position: absolute;
    top: 50px;
    right: 0;
    z-index: 1;
    display: none;
    width: 300px;
    padding: 15px;
    background-color: var(--white-color);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius)}
.graph-between-date-container::before,.graph-between-date-container::after{
    content: '';
    display: block;
    position: absolute;
    top: -12px;
    right: 17.5px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0px 13px 13px;
    border-color: transparent;
    border-bottom-color: var(--white-color);
    z-index: 2}
.graph-between-date-container::after{
    top: -15px;
    right: 15.5px;
    border-style: solid;
    border-bottom-color: var(--border-color);
    border-width: 0px 15px 15px;
    z-index: 1}
.graph-between-date-left{
    width: 125px;
    float: left;
    margin-right: 16px}
.graph-between-date-right{
    width: 125px;
    float: left}
.graph-between-date-container button{width: 100%}
.graph-container{padding: 15px}

/* Nav Tabs */
.nav-tabs{border-bottom: 1px solid var(--border-color)}
.track-participants-container .nav-tabs{
    padding-left: 12px;
    padding-bottom: 1px;
    background-color: var(--white-color)}
.nav-tabs li{
    float: left;
    margin-bottom: -1px}
.nav-tabs li a{
    display: block;
    color: var(--white-color);
    font-weight: 600;
    padding: 10px 15px;
    border: 1px solid transparent;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius)}
.track-participants-container .nav-tabs li a{color: var(--text-color)}
.nav-tabs li a.active{border-color: var(--border-color) var(--border-color) var(--primary-color)}
.track-participants-container .nav-tabs li a.active{
    color: var(--primary-color);
    border-color: var(--border-color) var(--border-color) var(--white-color)}

/* Box */
.box{
    position: relative;
    padding: 0 30px 30px}
.box-wrapper{
    position: relative;
    background-color: var(--white-color);
    border-radius: var(--border-radius);
    -webkit-box-shadow: var(--box-shadow);
    box-shadow: var(--box-shadow)}
.box-title{
    position: relative;
    color: var(--text-dark-color);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.5;
    padding: 20px 25px;
    border-bottom: 1px solid var(--border-color);
    border-radius: var(--border-radius) var(--border-radius) 0 0}
.box-title.no-border{border-bottom: none}
.result-box-title{
    display: flex;
    align-items: center}
.box-title > span{
    display: inline-block;
    float: left}
.box-title > select,.box-title .select2-container{
    width: auto;
    min-width: 220px;
    max-width: 460px;
    float: none;
    padding: 0;
    margin: 0 10px}
.box-title .select2-container .select2-choice{
    line-height: 32px;
    padding: 1px 25px 1px 8px}
.box-title button,.box-title .button{
    float: right;
    font-size: 12px;
    padding: 4px 8px}
.box-title select{padding: 1px 15px 1px 3px}
.box-title button,.box-title .button{
    float: right;
    font-size: 12px;
    padding: 4px 8px}
.box-title img{
    max-width: 48px;
    max-height: 48px;
    font-size: 14px;
    overflow: hidden;
    border-radius: var(--border-radius)}
.compare-result-index{
    position: absolute;
    top: 50%;
    right: 25px;
    display: flex;
    flex-flow: column;
    font-size: 12px;
    line-height: 1;
    transform: translateY(-50%)}
.compare-result-index li + li{margin-top: 6px}
.compare-result-index li span{
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 4px;
    border-radius: 50%}
.box-body{position: relative}

/* Form Legend */
.form-legend-container{
    position: relative;
    margin-top: 20px;
    margin-bottom: 20px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius)}
.form-legend-head{
    line-height: 40px;
    padding: 0 10px;
    margin-top: -20px}
.form-legend-head h4,.form-legend-head a{
    display: inline-block;
    font-weight: 600;
    padding: 0 5px;
    background-color: var(--white-color)}
.form-legend-head h4{
    float: left;
    font-size: 18px}
.form-legend-head a{
    float: right;
    color: var(--primary-color);
    text-transform: uppercase}
.form-legend-row{
    position: relative;
    padding: 15px 15px 5px;
    border-bottom: 1px solid var(--border-color)}
.form-legend-row:last-of-type{border-bottom: none}
.form-legend-remove{
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 30px;
    height: 30px;
    color: var(--white-color);
    text-align: center;
    line-height: 30px;
    background-color: var(--error-color);
    border-bottom-left-radius: var(--border-radius);
    cursor: pointer}

/* Table */
.table-search-filter-container{
    position: relative;
    padding: 15px}
.table-entries{
    width: 180px;
    float: left}
.table-entries.manual-checkpoints{width: calc(100% - 360px)}
.table-entries select{
    width: 70px;
    float: none}
.table-entries.manual-checkpoints select{
    width: auto;
    max-width: calc(100% - 90px)}
.table-search-filter{
    width: calc(100% - 180px);
    float: right;
    font-size: 0;
    text-align: right}
.table-entries.manual-checkpoints + .table-search-filter{width: 359px}
.table-search-form,.payoutMonthField{
    display: inline-block;
    width: calc(100% - 55px);
    max-width: 250px;
    float: right}
.table-search-filter button{
    width: 45px;
    height: 36px;
    font-size: 16px;
    padding: 10px 0px}
.filter-button,.table-column-chooser-container{
    float: right;
    margin-left: 10px}
.table-column-chooser-container{display: inline-block}
.table-column-chooser-container li{padding-left: 10px}
.table-column-chooser-container li .separator{
    width: calc(100% + 10px);
    height: 6px;
    float: left;
    margin-left: -10px;
    border-top: 1px solid var(--border-color)}
.table-column-chooser-container li label{
    text-align: left;
    white-space: nowrap;
    padding-right: 10px;
    margin-bottom: 5px}
.table-search-form input{
    width: calc(100% - 45px);
    float: left;
    border-right: 0;
    border-radius: var(--border-radius) 0 0 var(--border-radius)}
.table-search-form .search-button{border-radius: 0 var(--border-radius) var(--border-radius) 0}
.filter-container{
    display: none;
    padding: 15px}
.filter-form{
    position: relative;
    text-align: center;
    padding: 15px 10px;
    background-color: var(--body-bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius)}
.filter-form::before{
    content: '';
    position: absolute;
    bottom: -7px;
    right: 20px;
    display: block;
    width: 30px;
    height: 30px;
    transform: rotate(-45deg) translateY(12px);
    background: var(--body-bg-color);
    border-left: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    border-radius: 0 0 0 var(--border-radius);
    box-shadow: none}
.filter-block{
    position: relative;
    float: left;
    padding: 0 10px}
.filter-block-4 .filter-block{width: calc(100% / 4)}
.filter-block-3 .filter-block{width: calc(100% / 3)}
.filter-show{
    float: left;
    margin-top: 28px}
.table-container{
    position: relative;
    min-height: 96px;
    overflow: hidden;
    overflow-x: auto}
.table-container.sticky-table{
    max-height: 100vh;
    overflow-y: auto;
    border-top: 1px solid var(--border-color)}
.table{
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    border-spacing: 0}
.table > thead > tr,.table > tfoot > tr{background-color: var(--body-bg-color)}
.table thead th,.table tbody td,.table tbody th,.table tfoot th{
    text-align: left;
    vertical-align: middle;
    white-space: nowrap}
.table thead th{
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0;
    z-index: 9;
    background-color: var(--body-bg-color);
    border: none !important}
.table thead th.sticky-left{
    left: 0;
    z-index: 10}
.table tbody tr:nth-child(even){background-color: var(--light-gray)}
.table tbody:nth-child(2n+2) tr:nth-child(odd),.table tbody:nth-child(2n+3) tr:nth-child(even),
.table tbody:nth-child(2n+2) td.opposite,.table tbody tr:nth-child(odd) td.sticky{background-color: var(--light-gray)}
.table tbody:nth-child(2n+2) tr:nth-child(even),.table tbody:nth-child(2n+3) tr:nth-child(odd),
.table tbody:nth-child(2n+3) td.opposite,.table tbody tr:nth-child(even) td.sticky{background-color: var(--white-color)}
.table tbody td.sticky{
    position: -webkit-sticky !important;
    position: sticky !important;
    left: 0;
    z-index: 1}
.table tbody td.sticky::after{
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--border-color)}
.table tbody tr:first-child td.sticky::after{display: none}
.table thead tr.text-center th,.table thead th.text-center,.table tbody tr.text-center td,
.table tbody tr.text-center th,.table tbody td.text-center{text-align: center}
.table thead tr.text-left th,.table thead th.text-left,.table tbody tr.text-left td,
.table tbody tr.text-left th,.table tbody th.text-left,.table tbody td.text-left{text-align: left !important}
.table thead th,.table tfoot th{
    color: var(--text-light-color);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    border-left: 0;
    border-right: 0}
.table thead th.sorting,.table tbody th.sorting,.table tfoot th.sorting{
    position: relative;
    padding-right: 20px;
    cursor: pointer}
.table thead th.sorting::before,.table tbody th.sorting::before,.table tfoot th.sorting::before,
.table thead th.sorting::after,.table tbody th.sorting::after,.table tfoot th.sorting::after{
    position: absolute;
    top: calc(50% - 8px);
    right: 5px;
    display: block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 16px;
    opacity: 0.7}
.table thead th.sorting::before,.table tbody th.sorting::before,.table tfoot th.sorting::before{content: "\f0de"}
.table thead th.sorting::after,.table tbody th.sorting::after,.table tfoot th.sorting::after{content: "\f0dd"}
.table thead th.sorting.sorting_desc::before,.table tbody th.sorting.sorting_desc::before,
.table tfoot th.sorting.sorting_desc::before,.table thead th.sorting.sorting_asc::after,
.table tbody th.sorting.sorting_asc::after,.table tfoot th.sorting.sorting_asc::after{
    color: var(--text-dark-color);
    opacity: 1}
.table tbody td,.table tbody th{
    color: var(--text-color);
    padding: 20px 15px;
    border-bottom: 1px solid var(--border-color)}
.table tbody th{
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase}
.table tbody.result-body th,.table tbody.result-body td{padding: 8px 10px}
.table tbody tr:last-of-type td,.table tbody tr:last-of-type th{border-bottom: none}
.table.result-table tbody tr:last-of-type td,.table.result-table tbody tr:last-of-type th{border-bottom: 1px solid var(--border-color)}
/*.table tbody tr td,.table tbody tr th:last-of-type{border-top: 1px solid var(--border-color)}*/
.table tbody td.description{max-width: 300px}
.table tbody td.description:hover{white-space: normal}
.table tbody td.primary,.table tbody td.verified,.table tbody td.pending,.table tbody td.suspend{font-weight: 600}
.table tbody td.primary{color: var(--primary-color)}
.table tbody td.verified{color: var(--success-color)}
.table tbody td.pending{color: var(--warning-color)}
.table tbody td.suspend{color: var(--error-color)}
.table tbody td.covered,.table tbody tr.verified-bg{background-color: var(--light-success-color)}
.table tbody td.missed,.table tbody tr.suspend-bg{background-color: var(--light-error-color)}
.table tbody tr.pending-bg{background-color: var(--light-warning-color)}
.table tbody tr.team-bg{background-color: var(--primary-lightest-color) !important}
.table tbody td.days-in-table-container{
    font-size: 0;
    padding: 19px 15px}
.table tbody td a:not(.icon-button){color: var(--primary-dark-color)}
.table tbody td.has-image{padding: 7px 15px}
.table tbody td.short{
    max-width: 150px;
    overflow: hidden}
.table tbody tr.table-border td,.table tbody tr.table-border th{border-top: 2px solid var(--primary-color) !important}
.table tbody td b{font-weight: 600}
.table tbody td img{
    max-width: 48px;
    max-height: 48px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius)}
.only-checkbox .checkbox{
    display: inline-block;
    width: 20px;
    min-height: 20px;
    float: none;
    vertical-align: middle;
    padding-left: 20px;
    margin-bottom: 0}
.only-checkbox .checkbox span{top: 0}
.table tbody td .form{
    position: relative;
    display: flex;
    width: auto}
.participant-input input{
    width: 90px;
    max-width: 55px;
    float: left;
    margin: 0}
.participant-input select{
    width: 30px;
    float: left;
    padding: 5.5px 5px 7.5px 5px;
    margin: 0;
    background-position: 10px center}
.participant-input select + input,.participant-input input + select{
    max-width: 90px;
    margin-left: 8px}
.row-loader{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url('../images/icons/loader.gif');
    background-size: 20px;
    background-position: calc(100% - 6px) center;
    background-repeat: no-repeat;
    cursor: wait}
.days-in-table-container span{
    display: inline-block;
    width: 20px;
    color: var(--error-color);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    padding: 2px 0;
    border: 1px solid var(--border-color);
    border-right: none}
.days-in-table-container span:first-of-type{
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius)}
.days-in-table-container span:last-of-type{
    border-right: 1px solid var(--border-color);
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius)}
.days-in-table-container span.open{color: var(--success-color)}
.next-prev-container{
    padding: 20px 15px;
    border-top: 1px solid var(--border-color)}
.result-string{
    width: calc(100% - 131px);
    float: left;
    color: var(--text-dark-color);
    font-weight: 600;
    padding-top: 10px}
.next-prev{
    width: 131px;
    float: left;
    font-size: 0;
    text-align: right}
.next-prev button{width: 60px}
.next-prev button:last-of-type{margin-left: 10px}

/* Details */
.details-container{padding: 20px 25px}
.details-left,.details-value{
    width: calc(100% - 200px);
    float: left}
.details-row{
    line-height: 1.5;
    margin-bottom: 20px}
.details-left .details-row:last-of-type{margin-bottom: 0}
.details-key{font-weight: 600}
.details-key,.details-right{
    width: 200px;
    float: left}
.details-value{color: var(--text-dark-color)}
.details-value a{color: var(--primary-dark-color)}
.details-value.verified span,.details-value.pending span,.details-value.suspend span{
    display: inline-block;
    color: var(--white-color);
    padding: 0 8px;
    border-radius: var(--border-radius)}
.details-value.verified span{background-color: var(--success-color)}
.details-value.pending span{background-color: var(--warning-color)}
.details-value.suspend span{background-color: var(--error-color)}
.details-value.profile-pic img{
    width: 100px;
    height: auto;
    float: left;
    border-radius: var(--border-radius);
    overflow: hidden}
.details-right{padding-left: 25px}
.details-right a{
    width: 100%;
    margin-bottom: 15px}
.details-right a:last-of-type{margin-bottom: 0}
.details-form{max-width: 500px}
.modal-body .details-key,.modal-body .details-value{width: 100%}
.modal-body .details-key{
    font-size: 12px;
    margin-bottom: 6px}
.current-participant-number{text-align: center}
.current-participant-number label{
    float: none;
    color: var(--primary-dark-color)}
.current-participant-number h5{
    color: var(--text-dark-color);
    font-size: 28px;
    line-height: 1;
    margin-bottom: 15px}

.organizer-logo{position: relative}
.organizer-logo.has-image{min-height: 80px}
.organizer-logo img{
    max-height: 80px;
    margin-bottom: 5px}
.organizer-logo label{
    color: var(--primary-color);
    margin-bottom: 15px}
.classes{
    width: calc(100% + 10px);
    float: left}
.classes span{
    display: inline-block;
    color: var(--primary-dark-color);
    padding: 6px 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius)}

/* No Data */
.no-data-container{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px 25px}
.no-data-container img{
    width: 100px;
    margin-bottom: 15px}
.no-data-container p{line-height: 1.5}
.warning-alert{
    color: var(--text-dark-color);
    font-size: 13px;
    padding: 12px 10px;
    margin-bottom: 15px;
    background-color: var(--warning-color);
    border-radius: var(--border-radius)}

/* Upload Image */
.event-images-container{
    display: flex;
    flex-wrap: wrap;
    width: calc(100% + 15px);
    float: left}
.event-image-container{
    position: relative;
    width: calc((100% / 3) - 15px);
    margin-right: 15px;
    margin-bottom: 15px}
.event-image{
    padding-bottom: 80%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: var(--border-radius)}
.event-image-container > .fa{
    position: absolute;
    top: 5px;
    right: 6px;
    display: block;
    width: 18px;
    height: 18px;
    color: var(--white-color);
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    background-color: var(--error-color);
    border-radius: var(--border-radius);
    cursor: pointer}
.event-image-container .error-message{
    padding: 0 5px;
    margin-top: 4px}

.upload-image label{
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: 100%;
    color: var(--text-color);
    font-size: 12px;
    line-height: 1.1;
    white-space: normal;
    text-align: center;
    padding: 25px 15px;
    border: 3px dashed var(--border-color);
    border-radius: var(--border-radius)}
.upload-image label.drag-over{
    background-color: var(--body-bg-color);
    border-color: var(--primary-color)}
.upload-image label i{
    font-size: 20px;
    margin-bottom: 10px}

/* Map */
.geo-location a{
    float: right;
    color: var(--primary-color);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5}
.geo-location img{
    height: auto;
    margin-bottom: 15px}
#map-container{
    position: relative;
    width: 100%;
    height: calc(95vh - 77px);
    float: left;
    overflow: hidden}
#map{
    width: 100%;
    height: 100%;
    float: left}
.controls{
    height: 32px;
    margin-top: 10px !important;
    border: 1px solid transparent;
    border-radius: 2px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    outline: none;
    box-shadow: 0px 1px 4px -1px rgba(0, 0, 0, 0.3) !important}
#searchInput{
    width: 50%;
    height: 40px;
    font-size: 15px;
    font-weight: 300;
    text-overflow: ellipsis;
    padding: 0 11px 0 13px;
    margin-left: 12px;
    background-color: var(--white-color);}
#searchInput:focus{border-color: var(--border-color)}
#map-pointer{
    position: absolute;
    left: 50%;
    bottom: 50%;
    z-index: 1;
    width: 15px;
    height: 30px;
    margin-left: -7.5px;
    pointer-events: none}
#geoLocationModal .modal-foot{
    padding: 20px 20px 0;
    margin-top: 0}

/* Check Points */
.checkpoints-map-container{
    position: relative;
    height: calc(100vh - 60px)}
.checkpoints-map-container.track{width: calc(100% - 321px)}
.checkpoints-map#map-container{
    height: 100%;
    float: left;
    border-top: 1px solid var(--border-color)}
.checkpoints-map-container > div,.checkpoints-map #map{height: 100%}
.selected-checkpoint{position: absolute !important}
.selected-checkpoint-wrapper{max-height: 95% !important}
.checkpoint-details + .checkpoint-details{margin-top: 15px}
.checkpoint-details b,.checkpoint-details span{
    display: inline-block;
    float: left}
.checkpoint-details b{width: 120px}
.checkpoint-details span{width: calc(100% - 120px)}
.checkpoints-container{margin-top: 30px}
.right{float: right}
.track-participants-container{
    width: 320px;
    float: left}
.track-participants{
    position: relative;
    height: calc(100vh - 60px);
    overflow: hidden;
    overflow-y: auto}
.has-tabs .track-participants{height: calc(100vh - 100px)}
.compare-result-map{height: calc(100vh - 247px)}
.compare-color{
    display: inline-block;
    width: 12px;
    height: 12px;
    vertical-align: middle;
    margin-right: 6px;
    border-radius: 50%}
    
/* HTML Marker */
.html-marker{
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    align-items: center;
    transform: translate(-50%, -100%);
    cursor: pointer}
.html-marker .participant-pic{
    position: relative;
    top: 6px;
    width: 10px;
    height: 10px;
    background-color: var(--primary-color);
    border-radius: 2px;
    transform: rotate(45deg);
    box-shadow: var(--box-shadow)}
.html-marker .name{
    position: absolute;
    max-width: 100px;
    bottom: 0;
    color: var(--white-color);
    font-size: 10px;
    line-height: 13px;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    transform: translateY(100%);
    padding: 2px 4px;
    background-color: var(--primary-color);
    border-radius: var(--border-radius)}
.html-marker.member .participant-pic,.html-marker.member .name{background-color: var(--primary-color) !important}
.html-marker.emergency .participant-pic,.html-marker.emergency .name,
.html-marker.red .participant-pic,.html-marker.red .name{background-color: var(--error-color)}
.html-marker.green .participant-pic,.html-marker.green .name{background-color: var(--success-color)}
.html-marker.yellow .participant-pic,.html-marker.yellow .name{
    color: var(--text-dark-color);
    background-color: var(--yellow-color)}
.html-marker.orange .participant-pic,.html-marker.orange .name{
    color: var(--text-dark-color);
    background-color: var(--orange-color)}

/* Marker Info Tile */
.marker-information{
    position: absolute;
    left: 0;
    bottom: 0;
    display: none;
    width: 250px;
    height: auto !important;
    padding: 15px;
    background-color: var(--white-color);
    border-top-right-radius: var(--border-radius)}
.marker-information.open{display: inline-block}
.marker-data .checkpoint-details b{width: auto}
.marker-data .checkpoint-details span{width: auto}
.close-marker-tile{
    position: absolute;
    top: -10px;
    right: -10px;
    color: var(--white-color);
    padding: 7px 8px;
    background-color: var(--error-color);
    border-radius: 50%}

/* Footer */
.footer{
    text-align: center;
    padding: 15px}
footer a{
    color: var(--primary-color);
    font-weight: 600}
#copy-textbox{
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: -1}

/* Modal */
.modal-open{cursor: pointer}
.modal,.selected-checkpoint{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    opacity: 1;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, .4);
    z-index: 999;
    outline: none}
.modal.fade,.selected-checkpoint.fade{visibility: hidden}
.modal.in,.selected-checkpoint.in{visibility: visible}
.modal-content,.selected-checkpoint-wrapper{
    position: relative;
    display: flex;
    max-height: 95vh;
    flex-direction: column;
    padding-bottom: 20px;
    background-color: var(--white-color);
    overflow-y: auto;
    border-radius: var(--border-radius)}
.modal.fade .modal-content,.selected-checkpoint.fade .selected-checkpoint-wrapper{
    -webkit-animation: closeModal 0.2s;
    animation: closeModal 0.2s}
.modal.in .modal-content,.selected-checkpoint.in .selected-checkpoint-wrapper{
    -webkit-animation: openModal 0.3s;
    animation: openModal 0.3s}
.modal-content.modal-lg{width: 94%}
.modal-content.modal-md{width: 600px}
.modal-content.modal-sm,.selected-checkpoint-wrapper{width: 420px}
.modal-content.modal-xs{width: 300px}
span.close-modal,span.hide-checkpoint{
    position: absolute;
    top: 15px;
    right: 20px;
    display: block;
    width: 20px;
    height: 20px;
    color: var(--error-color);
    font-size: 14px;
    line-height: 18px;
    text-align: center;
    text-transform: uppercase;
    border: 1px solid var(--error-color);
    border-radius: 50%;
    cursor: pointer}
.modal-head{
    color: var(--primary-dark-color);
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    padding: 15px;
    padding-right: 40px;
    background-color: var(--body-bg-color);
    border-bottom: 1px solid var(--border-color)}
.modal-head.yellow{
    color: var(--text-dark-color);
    background-color: var(--light-warning-color)}
.modal-body{
    position: relative;
    padding: 20px;
    padding-bottom: 0;
    overflow: hidden;
    overflow-y: auto}
.modal-body p{line-height: 1.5}
.modal-foot{
    width: 100%;
    float: left;
    text-align: right;
    padding-top: 20px;
    margin-top: 20px;
    border-top: 1px solid var(--border-color)}

  /* Modal Animation */
@-webkit-keyframes openModal{
    0% {
        -webkit-transform: scale(0.7);
        transform: scale(0.7)}
    45% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05)}
    80% {
        -webkit-transform: scale(0.95);
        transform: scale(0.95)}
    100% {
        -webkit-transform: scale(1);
        transform: scale(1)}
}
@keyframes openModal{
    0% {
        -webkit-transform: scale(0.7);
        transform: scale(0.7)}
    45% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05)}
    80% {
        -webkit-transform: scale(0.95);
        transform: scale(0.95)}
    100% {
        -webkit-transform: scale(1);
        transform: scale(1)}
}
@-webkit-keyframes closeModal{
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)}
    100% {
        -webkit-transform: scale(0);
        transform: scale(0)}
}
@keyframes closeModal{
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)}
    100% {
        -webkit-transform: scale(0);
        transform: scale(0)}
}

/* Floating Animation */
@-webkit-keyframes floating{
    0%, 100% {
        -webkit-transform: translate(0,0);
        transform: translate(0,0)}
    65% {
        -webkit-transform: translate(0,15px);
        transform: translate(0,15px)}
}

@keyframes floating{
    0%, 100% {
        -webkit-transform: translate(0,0);
        transform: translate(0,0)}
    65% {
        -webkit-transform: translate(0,15px);
        transform: translate(0,15px)}
}

/* Loader */
.route-change{
    position: relative;
    min-height: calc(100vh - 47px)}
.route-change.logged{padding-left: 250px}
body.minimized .route-change.logged{padding-left: 0}
.loader-parent{
    position: relative;
    min-height: 100px}
.fixed{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 9999}
#loading{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(255,255,255,0.7);
    z-index: 99;
    cursor: progress}
.loader{
  position: absolute;
  width: 100px;
  height: 100px;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto}
.circular{
 animation: rotate 2s linear infinite;
 height: 100px;
 position: relative;
 width: 100px}
.path{
  stroke-dasharray: 1,200;
  stroke-dashoffset: 0;
  animation: 
   dash 1.5s ease-in-out infinite,
   color 6s ease-in-out infinite;
  stroke-linecap: round}
@keyframes rotate{
 100%{transform: rotate(360deg)}
}
@keyframes dash{
 0%{
  stroke-dasharray: 1,200;
  stroke-dashoffset: 0}
 50%{
  stroke-dasharray: 89,200;
  stroke-dashoffset: -35}
 100%{
  stroke-dasharray: 89,200;
  stroke-dashoffset: -124}
}
@keyframes color{
  100%,0%{stroke: #d62d20}
  40%{stroke: #0057e7}
  66%{stroke: #008744}
  80%,90%{stroke: #ffa700}
}

/* Refresh */
button.refresh,.button.refresh{cursor: progress}
button.refresh::before,.button.refresh::before{
    content: "\f110";
    position: relative;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    line-height: inherit;
    margin-right: 3px;
    animation: rotate 2s linear infinite}

/* SnackBar */
#snackbar{
    margin: auto;
    font-weight: 600;
    text-align: center;
    padding: 0 10px;
    position: fixed;
    z-index: 1050;
    left: 0;
    right: 0;
    top: 0px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease-out;
    pointer-events: none}
#snackbar.show{
    top: 100px;
    opacity: 1;
    visibility: visible}
.snackbar{
    display: inline-block;
    padding: 12px 20px;
    color: var(--white-color);
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius)}
.snackbar.success{background-color: var(--success-color)}
.snackbar.error{background-color: var(--error-color)}

/* For Desktop View */
@media screen and (min-width:933px){
    .menu-item a:hover:not(.active){color: var(--text-dark-color)}
    .submenu a:hover:not(.active){
        color: var(--text-dark-color);
        background-color: var(--gray)}
    .nav-tabs li a:hover:not(.active){border-color: var(--border-color)}
    span.close-modal:hover{
        color: var(--white-color);
        background-color: var(--error-color)}
    .graph-filter-option li > span:hover:not(.active){
        color: #fff;
        background-color: var(--primary-light-color)}
}