:root {
    --primary-color: #0775AB;
    --primary-bg-color: #006B62;
    --secondary-color: #C8102E;
    --tertiary-color: #7FA9AE;
    --danger-color: #E63257;

    /* Override normal text danger color for Heartland theme */
    --normal-text-danger-color: #A34201;
    --text-danger-color: #A34201;
    --circle-danger-color: #CB5302;

    --actionable-btn-color: #006B62;
    --tappable-font-color: #0775AB;

    --schedule-date-color: #5EC6DA;
    --schedule-action-text-color: #0775AB;
    --plus-btn-bg-color: #006B62;
    --timesheet-date-bg-color: #0775AB;
    --timesheet-summary-color: #5EC6DA;
    --timesheet-check-box-color: #006B62;
    --timesheet-bank-side-bar-color: #006B62;
    --navigation-tab-active-color: #0775AB;
    --navigation-tab-background-color: #FFFFFF;
    --bottom-tab-bar-active-color: #0775AB;
    --chat-send-message-btn-bg-color: #006B62;
    --action-btn-bg-color: #006B62;
    --action-btn-text-color: #0775AB;  /* Text color for action buttons */
    --navigation-tab-text-default-color: #00090F;
    --toggle-active-color: #006B62;
    --input-toggle-active-color: #006B62;
    --dashboard-card-action-text-color: #0775AB;
    --dashboard-chat-icon-color: #0775AB;
    --dashboard-map-icon-color: #006B62;
    --team-timesheet-employee-checked-color: #0775AB;
    --table-item-selector-color: #0775AB;
    --theme-color: #006B62;
    --holiday-bg-color: #5EC6DA;
    --timesheet-holiday-icon-color: #5EC6DA;

    --main-font: 'Open Sans', Arial, Helvetica, sans-serif !important;
    
    --font-weight-regular: 400;
    --font-weight-emphasis-small: 600;  /* For fonts ≤16px */
    --font-weight-emphasis-large: 700;  /* For fonts ≥18px */
    
    --gh-font-color: #00090F;
    --gh-bar-color: #f0f3f7;
    --gh-bar-benefit-color: #2a2f46;
    --desaturated-blue: #2a2f48;
    --gh-teal: #73E6DC;
    --gh-gray: #F4F6F9;
    --gh-background-color: #f0f3f7;
    --gh-clock-in-color:#55BD7B;
    --gh-break-color:#FDDF57;
    --gh-clock-out-color:#F75F5F;


    --bg-status-success: #55BD7B;
    --bg-status-warning: #FDDF57;
    --bg-status-danger: #F75F5F;


    --status-waiting-for-approval: #FDDF57;
    --status-approved: #55BD7B;
    --status-not-submitted: #00090F;
    --status-rejected: #F75F5F;

    /* gh-rounded-status-badge overrides for Heartland */
    --gh-rounded-status-badge-bg-color-warning: #FEF9E2;
    --gh-rounded-status-badge-text-color-warning: #715C03;
    --gh-rounded-status-badge-bg-color-default: #C9D0DF;
    --gh-rounded-status-badge-text-color-default: #022234;
    --gh-rounded-status-badge-bg-color-success: #E5F3EA;
    --gh-rounded-status-badge-text-color-success: #004E1D;
    --gh-rounded-status-badge-bg-color-danger: #FDDBDB;
    --gh-rounded-status-badge-text-color-danger: #521515;
    --gh-rounded-status-badge-bg-color-gray: #F3F5F9;
    --gh-rounded-status-badge-text-color-gray: #00090F;

    --timesheet-custom-field-label-text-color: #0775AB;
    --timesheet-field-value-text-color: #00090F;

    --modal-success-bg-color: #C4E7D1;
    --modal-success-text-color: #00090F;

    /* danger button override for Heartland */
    --danger-btn-color: #CC3535;

    --punch-item-label-color: #707070;
    --punch-item-value-color: #00090F;

    --punch-clock-in-color: #55BD7B;
    --punch-break-color: #FDDF57;
    --punch-transfer-color: #055176;
    --punch-clock-out-color: #CC3535;

    --toggle-disabled-color: #8A99B6;
    --danger-icon-color: #CC3535;
    --badge-bg-color: #006B62;
    --active-underline-color: #006B62;

    --noty-error-bg-color: #F75F5F;
    --noty-error-text-color: #00090F;

    --vh: 1vh;
}

.gh_loader {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: #fff;
    background-image: url("../../../v4/img/loader.gif");
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1000;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
    opacity: 0.8;
}



.flex-1 {
    flex: 1;
}

/*font size*/
.text-lg {
    font-size: 1.5rem;
}

.text-rg {
    font-size: 1rem;
}

.text-size-1 {
    font-size: 1rem;
}
.text-size-08 {
    font-size: 0.8rem;
}

.text-size-09 {
    font-size: 0.9rem;
}

.text-size-lg {
    font-size: 1.5rem;
}

.text-size-rg {
    font-size: 1rem;
}

.text-size-sm {
    font-size: 0.8em;
}

.font-2 {
    font-size: 1.2em;
}

.font_sm {
    font-size: 0.8em;
}

.text-extra-sm{
    font-size: 0.8em;
}

.text-teal {
    color: var(--gh-teal);
}

.text-gh-color {
    color: var(--gh-font-color);
}

.font-color-teal {
    color: var(--gh-teal);
}


.font_rsp_lg {
    font-size: 6vw;
}

.font_rsp_rg {
    font-size: 3vw;
}

.arrow-size-rg {
    font-size: 5vw; /*for header goback button*/
}

.font-weight-600 {
    font-weight: 600;
}

.font-weight-800 {
    font-weight: 800;
}

.font-weight-700 {
    font-weight: 700;
}

/*font size*/




/*util color*/

.light-gray-background {
    background-color: var(--gh-gray);
}

.gray-background {
    background-color: var(--gh-gray);
}

.bg-teal {
    background-color: var(--gh-teal)
}

.teal_background {
    background-color: var(--gh-teal) !important;
}
.white-background {
    background-color: white;
}

.red-background {
    background-color: #EC262C;
}

.seperator-gap {
    width: 100%;
    height: 15px;
    background-color: var(--gh-background-color);
}

.teal-font {
    color: var(--gh-teal);
}

#timeSheetsAddPunchForm #punchTypeOptions .col-3 {
    max-width: 50%;
}

div.error {
    color: var(--normal-text-danger-color);
    padding-top: 2px;
    padding-left: 4px;
}

label.error {
    color: var(--normal-text-danger-color);
}

input.error, textarea.error, .select2.error > span.selection > span.select2-selection, select.error {
    border: 2px solid var(--normal-text-danger-color);
}

input.form-control.error, textarea.form-control.error, select.form-control.error {
    background-color: rgba(224, 67, 39, 0.1);
}

.btn.button-info {
    background-color: var(--actionable-btn-color) !important;
    border-color: var(--action-btn-text-color) !important;
}






.border-none {
    border: none;
}

/* mobile time sheets starts */

.page-menu-header {
    position: fixed;
    width: 100%;
    z-index: 10;
    background-color: #2a2f46;
    height: 45px;
    box-sizing: border-box;
}

.page-menu-header .title {
    font-weight: 800;
}

.page-body {
    flex: 1;
    color: #2a2f46;
}

.page-menu-header-placeholder {
    width: 100%;
    height: 45px;
    box-sizing: border-box;
    visibility: hidden;
}

.mobile-page-body h5,
.mobile-page-body h6 {
    margin-bottom: 0;
}


.sideMenu {
    font-size: 19px;
    font-weight: bold;
}

.last_range_date {
    vertical-align: middle;
    font-size: 1em;
    padding-right: 2vw;
}
.current_range_date {
    vertical-align: middle;
    font-size: 5.5vw;
    font-weight: 700;
}
.next_range_date {
    vertical-align: middle;
    padding-left: 2vw;
    font-size: 1em;
}

#timeSheetsStatusHeader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem 0 1rem 0;
}

#missingPunchIndicator {
    display: flex;
    flex-direction: row;
    align-items: center;
    border: 3px solid var(--circle-danger-color);
    border-radius: 1.5rem;
    padding: 0.4rem 1rem;
    color: var(--circle-danger-color);
    font-size: 16px;
    font-weight: var(--font-weight-emphasis-small);
}

#timeSheetsPaySummaryContainer {
    background-color: white;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
    padding-bottom: 1rem;
}

#timeSheetsBody .carousel-indicators {
    margin-bottom: 0;
    z-index: 8;
}

.mobile-page-body .carousel-indicators li {
    height: 8px;
    width: 8px;
    border-radius: 50%;
    background-color: #ddd;
}

.mobile-page-body .carousel-indicators li:first-child {
    margin-right: 0.5rem;
}

.mobile-page-body .carousel-indicators li.active {
    background-color: #7f7f7f;
}

#timeSheetsPaySummaryContainer #paySummaryItem {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-top: 0.3rem;
    padding-right: 1rem;
}

#timeSheetsClockList {
    display: flex;
    flex-direction: column;
}

#timeSheetsClockList > div:nth-child(odd) {
    background-color: white;
}

#timeSheetsClockList > div:nth-child(even) {
    background-color: transparent;
}

#timeSheetsClockList > .clearfix {
    padding: 1rem 1rem;
}

#timeSheetsDisclaimer {
    display: flex;
    flex-direction: column;
}

#timeSheetsDurstionDatesContainerWrapper,
#timeSheetsInOutDatesContainerWrapper
{
    width: 100%;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;

}

#timeSheetsDurationDatesContainer,
#timeSheetsInOutDatesContainer
{
    display: flex;
    background-color: white;
    justify-content: center;
    flex-direction: row;
    align-items: center;
}

#timeSheetsDurationDatesContainer > .date-item,
#timeSheetsInOutDatesContainer > .date-item
{
    width: 20vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

#timeSheetsPunchDatesContainer > .date-item span:first-child,
#timeSheetsDurationDatesContainer > .date-item span:first-child,
#timeSheetsInOutDatesContainer > .date-item span:first-child
{
    margin-top: 1rem;
    font-size: 95%;
}

#timeSheetsPunchDatesContainer > .date-item span:nth-child(2),
#timeSheetsDurationDatesContainer > .date-item span:nth-child(2),
#timeSheetsInOutDatesContainer > .date-item span:nth-child(2)
{
    margin-top: 0.4rem;
    font-size: 200%;
    font-weight: bold;
}

#timeSheetsPunchDatesContainer > .date-item span:nth-child(3),
#timeSheetsDurationDatesContainer > .date-item span:nth-child(3),
#timeSheetsInOutDatesContainer > .date-item span:nth-child(3)
{
    font-size: 0.7rem;
    font-weight: bold;
    color: #39629D;
    margin-top: 0.7rem;
    margin-bottom: 0.5rem;
}

#timeSheetsPunchDatesContainer > .date-item.active,
#timeSheetsDurationDatesContainer > .date-item.active,
#timeSheetsInOutDatesContainer > .date-item.active
{
    background-color: var(--gh-teal);
    color: white;
}

/*#timeSheetsPunchDatesContainer > .date-item:not(.active),*/
/*#timeSheetsDurationDatesContainer > .date-item:not(.active),*/
/*#timeSheetsInOutDatesContainer > .date-item:not(.active)*/
/*{*/
/*    box-shadow: 0 .125rem .21rem rgba(0, 0, 0, .075)*/
/*}*/


#timeSheetsPunchDatesContainer > .date-item.active span:nth-child(3),
#timeSheetsDurationDatesContainer > .date-item.active span:nth-child(3),
#timeSheetsInOutDatesContainer > .date-item.active span:nth-child(3)
{
    font-size: 0.7rem;
    font-weight: bold;
    color: white;
}


#timeSheetsPunchSummaryContainer,
#timeSheetsDurationSummaryContainer,
#timeSheetsInOutSummaryContainer
{
    display: flex;
    flex-direction: column;
    background-color: #fff;
    /*padding: 1rem;*/
    /*border-bottom-left-radius: 0.5rem;*/
    /*border-bottom-right-radius: 0.5rem;*/
    margin-top: -1px;
    /* box-shadow: 5px 5px 10px lightgrey; */
}

#timeSheetsPunchContainer .punch-item {
    box-shadow: 0 .125rem 0 rgba(0, 0, 0, .075);
    background-color: white;
    padding: 1.5rem 0 1.5rem 0;
}

#timeSheetsPunchContainer .punch-item:not(:first-child) {
    border-top-left-radius: 0;
}

#timeSheetsPunchContainer .punch-item .text-lg {
    /*font-size: 0.8rem;*/
}

#timeSheetsPunchContainer .punch-item:last-child {
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
    padding-bottom: 1.5rem;
}

#timeSheetsPunchContainer .punch-item:after {
    content: "";
    display: block;
    margin-top: 1.5rem;
    background: #EEE;
    height: 2px;
    width: calc(74vw - 28.5px);
    float: right;
}

/*#timeSheetsPunchContainer .punch-avatar:before {*/
/*content: "";*/
/*position: relative;*/
/*display: block;*/
/*left: 10px;*/
/*background: red;*/
/*height: 50%;*/
/*width: 5px;*/
/*z-index: -1;*/
/*}*/

#timeSheetsPunchMiscInfoContainer {
    border-radius: 0.5rem;
    margin: 0 1.5rem 1.5rem;
    background-color: white;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
    padding: 0.5rem;
}

#timeSheetsPunchMiscInfoContainer > .clearfix {
    padding-bottom: 0.25rem;
    padding-top: 0.25rem;
}

#timeSheetsPunchMiscInfoContainer > .clearfix:not(:last-child) {
    border-bottom: 1px solid #EEE;
}


.field-group {
    display: flex;
    background-color: white;
    color: var(--gh-font-color);
    flex-direction: row;
    justify-content: space-between; /* make the second element go to the right*/
    align-items: center;
    padding: 0.8rem 1rem;
}


.input-time-label {
    margin-bottom: 0;
}


.avatar-placeholder {
    position: absolute;
    background: #FFF;
    width: 60px;
    height: 60px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
    text-align: center;
    line-height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: 500;
    color: #000;
}

#jobSelection .parent-path,
#timesheetDurationCardContainer .parent-path,
#timeSheetsAddInOutForm .parent-path,
#timesheetInOutViewContainer .parent-path
{
    font-size: 0.7rem;
    vertical-align: middle;
    text-align: left;
    color: #bbb;
    line-height: 1rem;
    overflow: hidden;
    margin: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 95%;
}

#jobSelection .leaf-path,
#timesheetDurationCardContainer .leaf-path,
#timeSheetsAddInOutForm .leaf-path,
#timesheetInOutViewContainer .leaf-path
{
    line-height: 1.2rem;
    font-size: 1rem;
    text-overflow: ellipsis;
    overflow: hidden;
    margin: 0;
    text-align: left;
    width: 95%;
}

/* iPhone5/SE query*/
@media screen and (device-aspect-ratio: 40/71) {
    .page-menu-heapage-menu-headerder,
    .-placeholder {
        height: 45px;
    }

    #addPunchContainer.add-punch,
    #floatActionButton {
        top: 87vh;
        width: 40px;
        height: 40px;
    }

    #paySummaryPaymentTitle h5,
    #paySummaryTimeTitle h5 {
        font-size: 90%;
    }
}

/* mobile time sheets ends */

/* start - mobile add time off form */

#timeoffRequestDetailPage label {
    margin: 0;
}


.time-off-type-cell:not(:last-child):after {
    content : "";
    position: absolute;
    left    : 1rem;
    height  : 1px;
    width   : 100%;
    margin-top: 25px;
    border-bottom:1px solid #e9e9e9;
}

.conflict_img_placeholder {
    position: absolute;
    background: #FFF;
    width: 40px;
    height: 40px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
    text-align: center;
    line-height: 32px;
    display: flex;
    border: 2px solid;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    font-weight: 500;
    color: #000;
}



/* end - mobile add time off form */


/* start - mobile add timesheet duration */
.align-group-center {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
}

#timesheetRepeatUnit {
    text-transform: capitalize;
}

.align-group-flex-start {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
}

.align-group-flex-end {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    align-items: center;
}

.align-group-col-start {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: start;
}

.align-group-flex-between {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}

.timesheet-duration-card {
    background-color: #fff;
    border-left: 8px solid var(--bg-status-success);
}

.timesheet-duration-card:last-child {
    margin-bottom: 1em;
}

.timesheet-duration-job-container {
    border-bottom: 0px solid #F5F5F5;
}

.timesheet-duration-value {
    color: #436299;
    font-weight: bold;
}

.display-none {
    display: none !important;
}
/* end - mobile add timesheet duration */

.timesheet-type-dot {
    border-radius: 50%;
    width: 13px;
    height: 13px;
}
.timesheet-type-dot-work {
    background: #A0E9A7;
}

.timesheet-type-dot-timeoff {
    background: #CDD1D3;
}

.timesheet-type-dot-break {
    background: var(--bg-status-warning);
}


/* Drop Shift Starts */
.drop-shift-view-card {
    background: #fff;
    height: 100%;
    border-radius: 2px;
    box-shadow: 5px 5px 10px lightgrey;
}

.drop-shift-view-card .container-title {
    font-size: 0.8em;
}

.shift-info-container {
    background-color: #F1F8FB;
    border-radius: 6px;
}


.shift-name-dot {
    border-radius: 50%;
    height: 10px;
    width: 10px;
    flex-shrink: 0;
}


.search-border {
    border: 1px solid #d1e1e8;
    border-radius: 5px
}

.border-none {
    border: none !important
}

.employee-item {
    border-bottom: 1px solid rgba(229, 230, 231, .5);
}

.employee-item:first-of-type {
    border-top: 1px solid rgba(229, 230, 231, .5);
    padding-top: 0.5em !important;
}
#incoming_swap_request_container .employee-item,
#incoming_drop_request_container .employee-item
{
    border: none !important;
}

.tab-item.active i {
    color: var(--action-btn-text-color) !important;
}

.tab-item.active span {
    color: var(--action-btn-text-color) !important;
}


.mobile-request-card {
    background: #fff;
    box-shadow: 5px 5px 10px lightgrey;
    width: 100%;
}

.mobile-request-card:first-of-type {
    margin-top: 0 !important;
}
/* Drop Shift End */

/* Swap Shift starts */

.userInfo {
    height: 100%;
    display: flex;
    flex-flow: row nowrap;
}

.show-more-btn {
    /*border-bottom: 1px solid rgba(229, 230, 231, .5);*/
}

.outgoing-request-shift-info-container .shift-info-container,
.incoming-request-shift-info-container .shift-info-container
{
    margin-top: 0.5em;
}

#otherShiftsList .card.shadow-sm .card-body {
    background-color: #eee !important;
}

#requestsShiftContainer .navbar {
    position: fixed;
    top: 0;
}

.fixed-top-nav {
    /*position: fixed;*/
    width: 100%;
}

.middle-header-item {
    font-weight: var(--font-weight-emphasis-small) !important;
}
.gh-full-width-btn {
    font-weight: var(--font-weight-emphasis-small) !important;
}

.dashboard-card-action-text-color[data-type="view-timesheets"][data-type="view-timesheets"] {
    color: var(--dashboard-card-action-text-color) !important;
}

/* Override font-weight-400 for dashboard card action links */
.card-button .dashboard-card-action-text-color,
.card-button .text-danger,
.card-show-more-button.dashboard-card-action-text-color {
    font-weight: var(--font-weight-emphasis-small) !important;
}

.dashboard-card-action-text-color {
    color: var(--tappable-font-color) !important;
}
#dashboardContent .card-show-more-button.text-info[data-section="team_status"]{
    color: var(--gh-font-color) !important;
}
#pickupShiftConfirmModal .danger-text-color[data-type='leftbtn'] {
   color: var(--tappable-font-color) !important;
}

.btn-info.vega-primary-button {
    background-color: var(--action-btn-bg-color) !important;
}

.btn.vega-secondary-button {
    color: var(--gh-font-color) !important;
}

.mobile-page .commentText.form-field {
 line-height: 24px;
}

.mobile-page input:not([type="radio"]):not([type="checkbox"]):not([data-type="inputSearch"]):not([data-type*="search"]):focus,
.mobile-page .commentText.form-field:focus,
#pickupShiftConfirmModal input:focus{
    border: 1.5px solid var(--primary-bg-color) !important;
    border-radius: 8px;
    padding-left: 6px!important;
    padding-right: 8px!important;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    caret-color: var(--primary-bg-color);
    /* Double border: white gap + outer colored border */
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--primary-bg-color);
    margin-top: 4px;
}

/* iOS WebView fallback: keep search input out of global input focus style */
.mobile-page .search-border.search-border input.form-control.border-none:focus,
.mobile-page input#inputSearch:focus,
.mobile-page input[data-type="inputSearch"]:focus,
#vega-new-chat-name:focus {
    border: 0 !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
}
/* Swap Shift ends */

/* Radio button override: outlined style with theme-colored border and inner dot */
.mobile-page input[type="radio"]:not(.enrollment-plan-radio-button) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #C9D0DF;
    border-radius: 50%;
    background-color: #fff;
    cursor: pointer;
    vertical-align: middle;
}

.mobile-page input[type="radio"]:not(.enrollment-plan-radio-button):checked {
    border-color: var(--theme-color);
    background-color: #fff;
    box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 10px var(--theme-color);
}

.gh-radio-checkmark {
    background-color: #fff;
    border: 2px solid #C9D0DF;
}

.gh-radio-container:hover input ~ .gh-radio-checkmark {
    background-color: #fff;
}

.gh-radio-container input:checked ~ .gh-radio-checkmark {
    background-color: #fff;
    border-color: var(--theme-color);
    box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 10px var(--theme-color);
}

.gh-radio-container input:checked ~ .gh-radio-checkmark:after {
    display: none;
}
.table-item-selector-color {
    color: var(--gh-font-color) !important;
}

.gh_pie_loader,
.gh_loader {
    background-image: unset !important;
    border-radius: inherit !important;
    background-color: #F8F9FB !important;
    border: 0 !important;
}

.gh_pie_loader::before,
.gh_loader::before {
    position: absolute !important;
    top: calc(50% - 24px)  !important;
    left: calc(50% - 24px) !important;
    z-index: 99999 !important;
    content: '' !important;
    display: block !important;
    background-image: url("/mobile/images/vega-loader.svg") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    width: 48px !important;
    height: 48px !important;
    margin: auto !important;
    animation: circle-loader-animation 2000ms linear infinite !important;
    opacity: 1 !important;
    pointer-events: unset !important; 
}

@keyframes circle-loader-animation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}