@font-face {
    font-family: 'Lato Hairline';
    src: url('../fonts/Lato-Hairline.woff2') format('woff2'),
    url('../fonts/Lato-Hairline.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato-Bold.woff2') format('woff2'),
    url('../fonts/Lato-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato-Black.woff2') format('woff2'),
    url('../fonts/Lato-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato-Heavy.woff2') format('woff2'),
    url('../fonts/Lato-Heavy.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato-Light.woff2') format('woff2'),
    url('../fonts/Lato-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato-Medium.woff2') format('woff2'),
    url('../fonts/Lato-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato-Semibold.woff2') format('woff2'),
    url('../fonts/Lato-Semibold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato-Regular.woff2') format('woff2'),
    url('../fonts/Lato-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato-Thin.woff2') format('woff2'),
    url('../fonts/Lato-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato-Italic.woff2') format('woff2'),
    url('../fonts/Lato-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

body{
    margin: 0px;
    padding: 0px;
    font-family: 'Lato';
}

.headerSction{
    display: flex; width: 100%; height: 100px; align-items: center; box-shadow: 0px 13px 21px -12px rgb(0 0 0 / 17%);   -webkit-box-shadow: 0px 13px 21px -12px rgb(0 0 0 / 17%); -moz-box-shadow: 0px 13px 21px -12px rgba(0,0,0,0.17);  justify-content: space-between;
}
.headerLogo{
    width: 10%; text-align: center;
}
.headerRightText{
    font-family: 'Lato';font-weight: bold; font-size: 20px; padding-right: 20px;
}
.bodyWrapper{
    height: calc(100vh - 200px); display: flex; width: 100%;
}
.leftTextSection{
    width: 50%;display: flex;flex-direction: column;justify-content: flex-end;
}
.rightText-box{
    width: 480px;padding: 40px;margin-bottom: 90px;font-weight: 900;font-family: 'Lato';font-size: 50px;line-height: 50px;font-display: swap;background-image: url('../img/background.webp');color: #fff;background-repeat: no-repeat;background-size: cover;margin-left: 20px
}
.right-content-section{
    width: 50%;display: flex;flex-direction: column;justify-content: center;
}
.right-content-heading-one{
    font-family: 'Lato';font-weight: 900; font-style: normal; font-size: 30px; color: #474747;line-height: 38px; margin-bottom: 25px;
}
.right-content-heading-two{
    font-family: 'Lato';font-weight: 600; font-style: italic; font-size: 20px; color: #474747;
}
.right-content-heading-subTitle{
    font-family: 'Lato';font-weight: 600; font-style: italic; font-size: 14px; color: #474747; margin-bottom: 50px
}
.display_flex{
    display: flex;
}
.right_input_box{
    border: 1px solid #D5D7DB;width: auto;border-radius: 10px 0px 0px 10px; border-right: 0px
}
.right_input{
    height: 50px;width: 330px;border: 0px;border-radius: 10px 0px 0px 10px; outline: none; padding-left: 10px
}
.right_text_button_box{
    border: 1px solid #D5D7DB; width: auto; border-radius: 0px 10px 10px 0px;
}
.right_text_button{
    height: 50px; width: 150px; border: 0px; border-radius: 0px 10px 10px 0px;
}
.right_next_button_box{
    margin-top: 78px
}
.right_next_button{
    width: 136px; height: 42px; background: #3319F3; font-family: 'Lato'; font-weight: bold; color: #fff; border-radius: 50px; border:0px
}
.right_bottom_message_box{
    position: absolute; bottom: 130px; border-top: 2px solid #D5D7DB; border-bottom: 2px solid #D5D7DB; padding-top: 30px; padding-bottom: 30px
}
.right_bottom_message_title{
    font-family: 'Lato'; font-weight: 900; font-style: italic; font-size: 16px; color: #474747;
}
.right_bottom_message_subtitle{
    font-family: 'Lato';font-weight: normal; font-style: italic; font-size: 14px; color: #474747;
}
.footer_section{
    display: flex;width: 100%;height: 100px;box-shadow: 0px -10px 21px -12px rgb(0 0 0 / 17%);-webkit-box-shadow: 0px -10px 21px -12px rgb(0 0 0 / 17%);-moz-box-shadow: 0px 13px 21px -12px rgba(0,0,0,0.17);justify-content: center;align-items: center;
}
.footer_section ul > li {
    display: inline-block;
    zoom:1;
    *display:inline;
    padding-left: 30px;
    padding-right: 30px;
    position: relative;
    font-family: 'Lato';
    font-weight: normal;
    font-style: normal;
    font-size: 18px;
}
.footer_section ul > li::after{
    content: "|";
    position: absolute;
    right: 0px
}
.footer_section ul > li:last-child::after{
    content: ""
}
input:focus-visible{
    outline: none;;
}
input, select{
    outline: none;;
}

/********************************* emaim ****************/
.custom-dropdown {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.custom-dropdown select {
    height: 55px;
    background-color: #3319F3;
    color: #fff;
    font-size: 20px;
    padding: .5em;
    padding-right: 2.5em;
    border: 0;
    margin: 0;
    border-radius: 10px 0px 0px 10px;
    text-indent: 0.01px;
    text-overflow: '';
    -webkit-appearance: button; /* hide default arrow in chrome OSX */
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
    appearance:none;
    font-family: 'Lato';
    font-weight: normal;
    font-style: italic;
}

.custom-dropdown::before,
.custom-dropdown::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.custom-dropdown::after { /*  Custom dropdown arrow */
    content: "";
    background-image: url(../img/input_dropdown_arrow.svg);
    height: 19px;
    font-size: .625em;
    line-height: 1;
    right: 1.2em;
    top: 39%;
    margin-top: -.5em;
    width: 19px;
}

.custom-dropdown::before { /*  Custom dropdown arrow cover */
    width: 44px;
    right: 0;
    top: 0;
    bottom: 0;
    border-radius: 0 3px 3px 0;
}

.custom-dropdown select[disabled] {
    color: rgba(0,0,0,.3);
}

.custom-dropdown select[disabled]::after {
    color: rgba(0,0,0,.1);
}

.custom-dropdown::before {
    background-color: rgba(0,0,0,.15);
}

.custom-dropdown::after {
    color: rgba(0,0,0,.4);
}
.right_email_box{
    margin-bottom: 40px
}
.right_email{
    height: 50px; width: 380px; border: 0px; border-radius: 10px 0px 0px 10px; outline: none; padding-left: 10px; border-radius: 10px;border: 1px solid #D5D7DB;
}
.right_number_box{
    border: 1px solid #D5D7DB; width: auto; border-radius: 0px 10px 10px 0px; border-left: 0px;
}
.right_number{
    height: 50px; width: 250px; border: 0px; border-radius: 10px 0px 0px 10px; outline: none; padding-left: 10px; border-radius: 0px 10px 10px 0px;
}
.right_notification_box{
    font-family: 'Lato'; font-weight: normal; font-style: italic; font-size: 14px; margin-top: 30px
}
.right_register_button{
    margin-top: 48px;
}



/******************************** pin *********************************/
ul.mobile_pin_input_list{
    padding: 0px;
}
ul.mobile_pin_input_list > li {
    display: inline-block;
    zoom:1;
    *display:inline;
    padding-left: 30px;
    padding-right: 30px;
    position: relative;
    font-family: 'Lato';
    font-weight: normal;
    font-style: normal;
    font-size: 18px;
}
ul.mobile_pin_input_list > li:first-child{
    padding-left: 0px;
}

ul.mobile_pin_input_list > li > input{
    height: 99px;width: 100px;background: rgb(255 255 255 / 38%);border: 1px solid #fff;border-radius: 3px;text-align: center;color: #fff;font-size: 26px; border-radius: 6px;
}
.signin_body_wrapper{
    background-image: url('../img/otp-background.png');background-repeat: no-repeat;background-size: cover;background-position: center; flex-direction: column;justify-content: center; position: relative; font-size: 16px;font-weight: normal;
    font-style: normal;
}
.signin_top_right_email{
    position: absolute;right: 20px; top: 20px; color: #fff;
}
.signin_section{
    padding-left: 50px;
}
.signin_heading{
    font-weight: 900; font-style: normal; font-size: 30px; color: #fff; line-height: 35px
}
.signin_subheading{
    font-weight: normal; font-style: italic; color: #fff; font-size: 14px; margin-top: 24px; margin-bottom: 60px;
}


/************************************* OTP *********************************************/
.left_barcode_section{
    background: #3319F3; color: #fff; padding: 20px; padding-top: 80px; width: 25%;
}
.left_barcode_title{
    font-weight: 900; font-style: normal; font-size: 18px;
}
.left_barcode_box{
    padding: 20px; border: 1px solid #D5D7DB; border-radius: 10px; margin-top: 30px; margin-bottom: 70px;
}
.left_barcode_text_box{
    padding-left: 20px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
}
.left_barcode_text_one{
    margin-top: 20px; font-weight: bold; font-size: 18px;
}
.left_barcode_text_two{
    font-weight: 300; font-size: 18px; font-style: normal;
}
.left_barcode_item_title{
    font-weight: bold; font-size: 18px; margin-bottom: 20px
}
.left_barcode_item_list{
    padding: 0px; font-weight: 300; font-style: normal; list-style: none;
}
.left_barcode_item_list li{
    margin-bottom: 10px;
}
.left_barcode_bottom_box{
    border-bottom: 1px solid #D5D7DB; border-top: 1px solid #D5D7DB; padding-top: 30px; padding-bottom: 30px; margin-top: 80px;
}
.left_barcode_bottom_text{
    font-size: 14;font-weight: normal; font-style: italic;
}
.left_barcode_bottom_button{
    font-style: normal; font-weight: bold; border:1px solid #ccc; padding: 8px; border-radius: 50px
}
.otp_right_content{
    width: 75%;
}
.signin_otpheading{
    font-style:normal; font-weight: bold; font-size: 18px; color: #fff; margin-bottom: 10px
}

/*********************************** auth *********************************/
.section{
    height: 100vh; width: 100%; position: relative; background-color: #3F39F3; min-height: 50vh;
}
.section:before{
    content: '';
    position:absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 60%;
    background: linear-gradient(to bottom, #543cff, #a051f3, #cb6ee9, #e691e5, #f6b6e6);
    border-radius: 0% 26% 44% 79%/ 0% 0% 0% 59%;
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #fff;
    opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #fff;
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: #fff;
}
.auth_content_section{
    width: 300px;margin: auto;min-height: 470px;position: relative; padding-top: 20px
}
.auth_content_title{
    font-size: 22px; font-weight: bold; color: #fff;
}
.auth_content_orgInfo{
    margin-top: 14px; margin-bottom: 28px; padding-top: 22px; padding-bottom: 32px; color: #fff; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;
}
.auth_content_orgInfo_title{
    font-size: 16px; font-weight: normal; margin-bottom: 10px
}
.auth_content_orgInfo_name{
    font-size: 16px; font-weight: bold;
}
.auth_content_input_box{
    display: flex;align-content: center;align-items: center;padding: 10px;background: rgb(255 255 255 / 32%);border-radius: 10px;width: 600px;
}
.auth_content_input_label{
    font-size: 14px;font-weight: bold;color: #fff;padding-right: 10px;
}
.auth_content_input{
    width: 217px;border: 0px; background: transparent; height: 40px;color:#ffffff;
}
.authenticate_box{
    margin-top: 40px; text-align:center;margin-bottom: 13px;width: 600px;
}
.authenticate_button{
    background-color: #3037EB;
    border: 0px;
    border-radius: 50px;
    color: #fff;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: normal;
    margin: auto;
}
.authenticate_text{
    font-weight: 700; font-size: 14; color: #fff; text-align: center;width: 600px;
}
.auth_card_image{
    text-align: center; margin-top: 18px;
}

/* Auth CSS ENDS */

.form-group {
    display: block;
    margin-bottom: 15px;
}

.form-group input {
padding: 0;
height: initial;
width: initial;
margin-bottom: 0;
display: none;
cursor: pointer;
}

.form-group label {
position: relative;
cursor: pointer;
}

.form-group label:before {
content:'';
-webkit-appearance: none;
background-color: transparent;
border: 2px solid #3B1EF4;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
padding: 10px;
display: inline-block;
position: relative;
vertical-align: middle;
cursor: pointer;
margin-right: 5px;
}

.form-group input:checked + label:after {
    content: '';
    display: block;
    position: absolute;
    top: 8px;
    left: 5px;
    width: 19px;
    height: 17px;
    background-image: url(../img/checkbox-mark.svg);
    transform: rotate(354deg);
    background-repeat: no-repeat;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{
    background-color: #dadce7;
    border-color: #ccc #ccc #dadce7;
}


.map_popup_container{
    display: flex;padding: 0px;align-items: stretch;
}
.left_menu_side_bar{
    background: #F0F1F5; width: 7%;
}
.menu_logo_box{
    padding: 15px; text-align: center; padding-top: 30px;
}
.logo_title_text{
    padding-top: 20px; padding-bottom:20px;
}
.logo_title_round_box{
    background: #3319F3;color: #fff;font-size: 24px;text-align: center;height: 60px;width: 60px;border-radius: 50px;line-height: 56px;font-weight: 500;margin: auto;
}
.sidebarUl{
    padding: 0px; list-style: none;
}

.sidebarItem:not(.active) .sactive{
    display: none;
}
.sidebarItem.active .sinactive{
    display: none;
}
.sidebarItem a{
    display: block;
    text-align: center;
    padding: 30px 0px;
}
.sidebarItem.active a{
    background: #3319F3;
}

.right_content_box{
    width: 93%;
}
.right_popup_top_box{
    display: flex;width: 100%;height: 100px;align-items: center;box-shadow: 0px 13px 21px -12px rgba(0,0,0,0.17);-webkit-box-shadow: 0px 13px 21px -12px rgba(0,0,0,0.17);-moz-box-shadow: 0px 13px 21px -12px rgba(0,0,0,0.17);
}
.right_popup_top_back_arror_box{
    width: 2%; text-align: center;
}
.right_popup_top_back_text_box{
    width: 88%;font-weight: 500;
}
.right_popup_top_close_box{
    width:10%
}
.right_popup_top_close_button_box{
    color: #fff; background: rgb(23,122,255); background: linear-gradient(143deg, rgba(23,122,255,1) 0%, rgba(104,81,251,1) 100%); padding: 10px 23px; border-radius: 6px; font-weight: 500; border: 0px;width: 160px;
}
.add_attributes_box{
    display: flex; background: #DADCE7; padding: 30px;align-items: center; width: 100%;
}
.add_attributes_box_one{
    width: 15%;
}
.add_attributes_box_two{
    width: 20%; padding-right: 30px;
}
.add_attributes_box_three{
    width: 20%; padding-right: 30px;
}
.add_attributes_box_four{
    width: 20%; padding-right: 30px;
}
.add_map_asset_section{
    width: 100%; height:900px; background:#ccc; position: relative;border-radius: 15px;
}
.add_map_asset_inner_box{
    position: absolute;background: #fff;width: 350px;border-radius: 10px;top: 100px;left: 40px;
}
.add_map_asset_layers_box{
    padding: 25px;border-bottom: 1px solid rgb(204 204 204 / 38%);
}
.add_map_asset_radio_box{
    padding: 25px;border-bottom: 1px solid rgb(204 204 204 / 38%); display: flex;
}
.add_map_asset_radio_text_box{
    background: #EAF3FF;margin-top: 10px;margin-bottom: 10px;padding: 11px;border-radius: 10px;
}
.add_map_asset_radio_button_box{
    padding: 15px 25px;border-bottom: 1px solid rgb(204 204 204 / 38%); display: flex;
}
.add_map_asset_radio_button_group{
    width: 40px; margin-bottom: 0px;
}
.add_map_asset_marker_box{
    padding: 15px 25px;border-bottom: 1px solid rgb(204 204 204 / 38%); display: flex;
}
.add_map_asset_barbed_box{
    padding: 15px 25px;border-bottom: 1px solid rgb(204 204 204 / 38%); display: flex;
}
.add_map_asset_shape_box{
    padding: 15px 25px;border-bottom: 1px solid rgb(204 204 204 / 38%); display: flex;
}
.add_map_asset_checkpoint_box{
    padding: 15px 25px;border-bottom: 1px solid rgb(204 204 204 / 38%); display: flex;
}
.icon_width{
    width: 40px;
}
.icon_width_margin{
    width: 40px;
    margin-bottom: 0px;
}
.set_asset_popup_box{
    position: absolute;background: #fff;width: 400px;border-radius: 10px;top: 280px; right: 140px;
}
.popup_close_arrow{
    position: absolute; right: 14px; top: 6px; z-index: 1;
}
.set_asset_form_box{
    padding: 20px;
}
.set_asset_popup_input_box{
    padding-right: 0px; padding-left: 0px;
}
.set_asset_popup_input_icon_button{
    border-color:#ccc; border-radius: 0px 5px 5px 0px; background: #E9EBF4; width: 50px;height: 40px; padding: 0px;
}
.set_asset_popup_text_input{
    border-radius: 5px 0px 0px 5px;height: 40px;
}
.set_asset_popup_submit_button{
    background: rgb(23,122,255);background: linear-gradient(143deg, rgba(23,122,255,1) 0%, rgba(104,81,251,1) 100%);padding: 7px 22px;color: #fff;border-radius: 5px;border: 0px;
}
.map_marker_asset_tool_bar{
    position: absolute;
    background: rgb(23 122 255 / 70%);
    background: linear-gradient(176deg, hsl(214deg 100% 55% / 70%) 0%, rgb(104 81 251 / 70%) 100%);
    width: 74px;
    border-radius: 50px;
    bottom: 20px;
    right: 20px;
}
.map_marker_asset_tool_bar_list{
    padding: 0px; list-style: none; padding-top: 15px; padding-bottom: 5px;
}
.map_marker_asset_tool_bar_list li{
    padding: 15px 6px;text-align: center;border-bottom: 1px solid rgb(255 255 255 / 42%);
}
.map_marker_asset_tool_bar_list li:last-child{
    border-bottom: 0px;
}
.map_marker_asset_tool_bar_list_item_text{
    font-size: 12px;color: #fff;margin-top: 8px;
}
.map_marker_asset_tool_bar_list_item_zoom_in{
    margin-top: 15px;
}
.map_marker_undo_redo_box{
    position: absolute; background: rgb(23,122,255); background: linear-gradient(176deg, rgba(23,122,255,1) 0%, rgba(104,81,251,1) 100%);width: 100px;border-radius: 50px;top: 10px; right: 20px;
}
.map_marker_undo_redo_inner_box{
    display: flex; width: 100%;
}
.map_marker_undo_redo_icon_box{
    width: 100%; text-align: center; padding-top: 10px; padding-bottom: 10px;
}
.map_marker_undo_redo_icon_text{
    color: #fff; font-size: 12px;
}
.map_set_all_zone_box{
    position: absolute; bottom: 150px; right: 190px; background: #fff; width: 400px; border-radius: 10px;
}
.map_set_all_zone_inner_box{
    display: flex;width: 100%;align-items: stretch;
}
.map_set_all_zone_left_icon_box{
    width: 12%;text-align: center;border-right: 1px solid #ccc;display: flex;align-items: center;justify-content: center;
}
.map_set_all_zone_lists_box{
    width: 88%;
}
.map_set_all_zone_title_box{
    padding: 12px 10px; border-bottom: 1px solid #ccc; font-size: 15px; font-style: italic;
}
.map_set_all_zone_lists_item_box{
    padding: 12px 10px;border-bottom: 1px solid #ccc;font-size: 15px;display: flex;color: #B6B4C0;align-items: center;
}
.map_set_all_zone_lists_item_box:last-child{
    border-bottom: 0px;
}
.map_set_all_zone_lists_item_icon{
    width: 45px;
}
.map_marker_add_shape_box{
    position: absolute;background: #fff;width: 400px;border-radius: 10px;top: 100px; right: 590px;
}
.map_marker_add_shape_close_button{
    position: absolute; right: 14px; top: 6px;
}
.marginZero{
    margin: 0px;;
}
.map_marker_add_shape_icon_box{
    padding-top: 20px; padding-left: 10px;
}
.map_marker_add_shape_content_box{
    width: 85%; padding: 20px;
}
.borderNone{
    border: 0px;
}
.map_marker_add_shape_content_input{
    padding-right: 0px; padding-left: 0px; padding-bottom: 20px;
}
.map_marker_add_shape_content_input_field{
    border-radius: 5px;height: 40px;
}
.map_marker_add_shape_textarea{
    padding-right: 0px; padding-left: 0px;
}
.map_marker_add_shape_checkbox_title{
    margin-top: 30px; font-weight: 600;
}
.map_marker_add_shape_submit_button{
    background: rgb(23,122,255);background: linear-gradient(143deg, rgba(23,122,255,1) 0%, rgba(104,81,251,1) 100%);padding: 7px 22px;color: #fff;border-radius: 5px;border: 0px;
}
.map_marker_add_shape_close_button{
    background: #D8D8D8;padding: 7px 22px;color: #fff;border-radius: 5px;border: 0px;
}
.map_barbed_wire_addd_attr_box{
    position: absolute;background: #fff;width: 434px;border-radius: 10px;top: 500px; right: 610px;
}
.popup_small_close_icon{
    position: absolute; right: 14px; top: 6px; z-index: 1;
}
.map_barbed_wire_addd_attr_text_box{
    width: 100%; padding: 20px; padding-bottom: 0px; display: flex;
}
.map_barbed_wire_addd_attr_icon_box{
    padding-top: 20px; width: 10%;
}
.map_barbed_wire_addd_attr_text_inner_box{
    width: 90%;
}
.map_barbed_wire_addd_attr_text_title_box{
    padding-right: 0px; padding-left: 0px; padding-bottom: 20px;
}
.map_barbed_wire_addd_attr_text_detail_box{
    padding-right: 0px; padding-left: 0px;
}
.map_barbed_wire_addd_attr_list_box{
    border-top: 1px solid #ccc;padding: 15px;width: 100%;margin: 0px;margin-top: 29px;
}
.map_barbed_wire_addd_attr_item_input_box{
    width: 50%; text-align: center;
}
.map_barbed_wire_addd_attr_item_input{
    border: transparent; width: 100%;
}
.map_barbed_wire_addd_attr_item_camera_box{
    width: 14%; text-align: center;
}
.map_barbed_wire_addd_attr_item_paint_box, .map_barbed_wire_addd_attr_item_building_box, .map_barbed_wire_addd_attr_item_trash_box{
    width: 12%; text-align: center;
}
.map_barbed_wire_addd_attr_img_box{
    margin-top: 10px; width: 100%;
}
.inActive{
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    opacity: 0.5;
}
.map_area_location_box{
    padding: 30px; background: #FBFBFB;
}
.search_location_box{
   width: 100%;
}
.search_location_input_box{
    border-radius: 5px;height: 50px;outline: none;background: #ecebeb;border-color: transparent;max-width:500px;
}
.search_location_button_box{
    border-radius: 0px 5px 5px 0px; background: #3B1EF4; width: 150px;height: 50px;
}
.add_map_asset_inner_box > div{
    position: relative;
}
.add_map_asset_edit_box{
    position: absolute;right: 0px;top: 0px;width: 40px;height: 40px;background: #E9EBF4;text-align: center;border-radius: 0px 0px 0px 50px;padding-left: 12px;
}
.add_map_asset_marker_box, .add_map_asset_barbed_box, .add_map_asset_shape_box, .add_map_asset_checkpoint_box{
    border-left: 8px solid #2B70FE;
    padding-left: 20px;
}
.bgNone{
    background: none;
}
.blockui {
    background: #ffffff;
    -webkit-box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);
    box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    border-radius: 0.42rem;
}
.blockui > span {
    color: #3F4254;
    padding: 0.75rem 1.2rem;
    font-size: 1rem;
    font-weight: 400;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}.blockui > span > .spinner {
    margin-right: 1.25rem;
}
.spinner {
    position: relative;
    padding-right: 35px !important;
}
.spinner:after {
    content: "";
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    right: 4px;
    border-radius: 50%;
    border: 4px solid #1BC5BD;
    border-right: 2px solid transparent;
}
.spinner:after {
    -webkit-animation: animation-spinner 0.5s linear infinite;
    animation: animation-spinner 0.5s linear infinite;
}
.spinner:after {
    width: 20px;
    height: 20px;
    margin-top: -0.65rem;
}
.spinner.spinner-white{
    border-color: #ffffff;
}
@-webkit-keyframes animation-spinner {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes animation-spinner {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
.coordinates{
    font-size: 12px;
    line-height: 35px;
}


#assetDetailsModal{
    left:4000px;
    top:-4000px;
    width: 400px;
    z-index:2;
    display: none;
}
.set_asset_popup_box:after,#attributeDetailsModal:after{
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    bottom: -8px;
    left: 50%;
    border-style: solid;
    border-width: 10px 10px 0 10px;
    transform: translateX(-10px);
    border-color: #ffffff transparent transparent transparent;
}
.overlay {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.5);
    overflow-x: hidden;
    transition: 0.5s;
}
.cursorPerimeter,.cursorPerimeter * {
    cursor: url("../img/icons/pen-boundary.svg") 0 30, auto;
}
.cursor-polygon,.cursor-polygon * {
    cursor: url("../img/icons/pen-boundary.svg") 0 30, auto;
}
.cursor-safezone,.cursor-safezone * {
    cursor: url("../img/icons/pen-safezone.svg") 0 30, auto;
}
.cursor-cautionzone,.cursor-cautionzone * {
    cursor: url("../img/icons/pen-cautionzone.svg") 0 30, auto;
}
.cursor-dangerzone,.cursor-dangerzone * {
    cursor: url("../img/icons/pen-dangerzone.svg") 0 30, auto;
}
.cursor-nogozone,.cursor-nogozone * {
    cursor: url("../img/icons/pen-nogozone.svg") 0 30, auto;
}
.cursor-checkpoint,.cursor-checkpoint * {
    cursor: url("../img/Checkpoint_colored.svg") 0 30, auto;
}
#polygonSidebarPopup{
    display: none;
    z-index: 3;
    bottom: 200px;
    right: 110px;
}
.map_set_all_zone_lists_item_box.active{
    background:#ccc;
}
.map_set_all_zone_lists_item_box.active {
    background: #e4e9f3;
    color: #000;
}
.attributeSection{
    position: relative;
}
#attributeDetailsModal{
    z-index:2;
    position: absolute;
    background: #fff;
    width: 400px;
    border-radius: 10px;
    top: 100px;
    right: 390px;
    display: none;
}
.map_marker_add_shape_box {
    position: initial;
    background: #fff;
    width: 400px;
    border-radius: 10px;
    top: 0px;
    right: 0px;
}
.map_barbed_wire_addd_attr_box {
    position: initial;
    background: #fff;
    width: 434px;
    border-radius: 10px;
    top: 0px;
    right: 0px;
}
.cp{
    cursor: pointer;
}
.pr{
    position: relative;
}

.upload_popup_box {
    position: absolute;
    background: #fff;
    width: 600px;
    border-radius: 10px;
    z-index: 999;
    margin:0 auto;
    display:table;
    left: 0;
    right:0;
    top: 50%;
    -webkit-transform:translateY(-50%);
    -moz-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    -o-transform:translateY(-50%);
    transform:translateY(-50%);
}
.upload_form_box{
    width: 100%;
    margin-top: 40px;
    padding: 20px;
}
.dropzone_box{
    width: 100%;
}
#dropzoneOverlay{
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.8);
    overflow-x: hidden;
    transition: 0.5s;
}
#rogrDropzone {
    min-height: 400px;
    border:2px dashed #2c6ff6a8;
    background: white;
    padding: 20px 20px;
}
#rogrDropzone .dz-message {
    margin: 10em 0;
    text-align: center;
}
.attrSlides{
    /*background-color: #222222;*/
    width: 315px;
    height: 200px;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-background-size: contain;
    background-size: contain;
    position: absolute;
    display: block;
    float: left;
    margin: 0;
    padding: 0;
    text-align: center;
}
#attrSliderSection {
    position: relative;
    overflow: hidden;
    height: 225px;
    width: 315px;
    border:1px solid #ccc;
    padding-bottom: 25px;
    background-color: #222222;
    display: none;
}
#attrSliderSection ul {
    position: relative;
    margin: 0;
    padding: 0;
    height: 200px;
    list-style: none;
}
.attrSliderControls{
    position: absolute;
    color: #fff;
    bottom: 0px;
    background-color: #222222;
    width: 100%;
    text-align: center;
    font-size: 14px;
    height: 23px;
}
.deleteSliderImg{
    float: right;
    margin-right: 5px;
    height: 10px;
    cursor: pointer;
}
.deleteSliderImg img{
    height: 12px;
}

#imgUploadModal,#dropzoneOverlay{
    display: none;
}
.swal2-popup{
    font-size: 0.8rem !important;
}
#assetAddress.disabled,#boundaryBtn.disabled{
    cursor: not-allowed;
}
.attrItem{
    cursor: pointer;
}
.attrItem.inActive{
    opacity: 1;
}
.attrItem.disabled,#openPencilPopup.disabled{
    opacity: 0.5;
    cursor: not-allowed;
}
.assetSection{
    border-left: 8px solid transparent;
}
.assetSection.active{
    border-color: #2B70FE;
}
.add_map_asset_marker_box, .add_map_asset_barbed_box, .add_map_asset_shape_box, .add_map_asset_checkpoint_box{
    border-left: 0px;
}

.map_marker_undo_redo_icon_box{
    opacity: .4;
}
.map_marker_undo_redo_icon_box.active{
    opacity: 1;
}


/**********************************************************************************************************/
.ct-find-service {
    background: #00719b;
    font-family: 'stenciletta-solid', sans-serif;
    padding: 20px 25px;
    margin-top: 50px;
    margin-bottom: 15px;
    margin-top: 0;
    padding-left: 25px;
    padding-right: 25px;
}
.ct-find-service h2 {
    color: #fff;
    font-size: 38px;
}
@media (min-width: 1200px) {
    .ct-find-service {
        padding: 20px 50px;
    }
}
.ct-select-group {
    height: 50px;
    position: relative;
}
.ct-select-group .ct-select {
    width: 100%;
    height: 50px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    font-size: 16px;
    border: none;
    background: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    padding: 5px 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
}
.ct-select-group .ct-select.abn {
    width: 50%;
    height: 50px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    font-size: 16px;
    border: none;
    background: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    padding: 5px 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    border-top-right-radius: 0px;
    border-bottom-right-radius:0px;
    border-right: 0px;
    color:#7b7979;
}
.business_id {
    position: absolute;
    width: 49%;
    max-width: 400px;
    height: 50px;
    border-radius: 5px;
    border: 1px solid #DADCE7;
    outline: none;
    padding-left: 10px;
    left: 50%;
    z-index: 999;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-left: 0px;
}
.ct-select-group .ct-select option {
    font-size: 16px;
    background: #fff;
}
.ct-select-group:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 50px;
    width: calc(100% - 50px);
    background: #fff;
    z-index: 0;
}
.ct-select-group:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 50px;
    background-color: #3319F3;
    background-image: url(../img/point-dropdown-select.svg);
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    background-size: 24px;
    border-radius: 0px 5px 5px 0px;
}



.inspection-information-right-top-drop-inner .nav {
    margin-left:0px !important;
    top:0px !important;
    position:absolute !important;
}
.inspection-information-right-top-drop-inner .nav>li>a:hover, .inspection-information-right-top-drop-inner .nav>li>a:focus, .inspection-information-right-top-drop-inner .nav .open>a, .inspection-information-right-top-drop-inner .nav .open>a:hover, .inspection-information-right-top-drop-inner .nav .open>a:focus {
    background:#fff !important;
}
.dropdown {
    background: transparent;
    border: 0px;
    border-radius: 4px;
}
.dropdown-toggle::after{
    display: none;
}
.dropdown-menu>li>a {
    color:#428bca;
}
.dropdown ul.dropdown-menu {
    border-radius:4px;
    box-shadow:none;
    margin-top:20px;
    width:170px;
    transform:none !important;
    top: 5px !important;
    padding: 10px;
}
.dropdown ul.dropdown-menu:before {
    content: "";
    border-bottom: 10px solid #fff;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    position: absolute;
    top: -10px;
    right: 16px;
    z-index: 10;
}
.dropdown ul.dropdown-menu:after {
    content: "";
    border-bottom: 12px solid #ccc;
    border-right: 12px solid transparent;
    border-left: 12px solid transparent;
    position: absolute;
    top: -12px;
    right: 14px;
    z-index: 9;
}

.dropdown ul.dropdown-menu:before,.dropdown ul.dropdown-menu:after{
    display: none;
}


.inspection-top-text{
    background: #DADCE7; min-height: 50px; line-height: 45px; padding: 10px;
}
.inspection-top-options{
    background: #1A132C; display: flex; color: #fff; flex-wrap: wrap; align-items: center; padding:10px
}
.inspection-options-one-box{
    width: 10%; display: flex; color: #fff; flex-wrap: wrap; align-items: center;
}
.inspection-options-one-box-input{
    padding-right: 10px;
}
.inspection-options-two-box{
    width: 10%;
}
.inspection-options-two-inner-box{
    background: #3319F3;width: auto;border-radius: 50px;padding: 10px;display: flex;justify-content: center;align-items: center; width: 160px;
}
.inspection-options-two-icon-box{
    padding-right: 10px;
}
.inspection-options-three-box{
    width: 12%; display: flex; color: #fff; flex-wrap: wrap; align-items: center;
}
.inspection-options-three-icon-box{
    padding-left: 10px;
}
.inspection-options-four-box{
    width: 68%;
}
.inspection_right{
    float: right;
}
.positionRel{
    position: relative;
}
.inspection-options-four-input{
    background: #3C364C;min-width: 310px;border: 0px;width: 100%;height: 40px;padding: 20px;color: #fff;border-radius: 5px;padding-right: 42px;
}
.inspection-options-four-button{
    position: absolute;right: 9px;top: 6px;border: 0px;background: transparent;
}
.inspection-top-column-box{
    background: #FBFBFB;display: flex;flex-direction: row;align-content: center;justify-content: center;align-items: center;flex-wrap: wrap; padding-top: 25px; padding-bottom: 25px; border-bottom: 1px solid #ccc;
}
.inspection-top-column-inner{
    width: 20%; text-align: center;
}
.inspection-information-box{
    background: #FBFBFB; padding: 20px; padding-top: 40px; position: relative;
}
.inspection-information-inner-box{
    margin-bottom: 40px;
}
.inspection-information-top-name-box{
    margin-left: 2%; height: 50px; background: #fff; display: table; width: 15%; line-height: 40px; padding: 10px 20px; padding-right: 100px; border-radius: 10px 10px 0px 0px; -webkit-box-shadow: 0px -2px 21px 0px rgba(50, 50, 50, 0.15);
-moz-box-shadow:    0px -2px 21px 0px rgba(50, 50, 50, 0.15);
box-shadow:         0px -2px 21px 0px rgba(50, 50, 50, 0.15); position: relative; z-index: 9;
}
.inspection-information-detail-box{
    display: flex;flex-wrap: wrap;
}
.inspection-information-left-number-box{
    width: 2%;
}
.inspection-information-left-number-box input[type=checkbox]{
    border: 3px solid #3319F3 !important;
    width: 20px;
    height: 20px;
}
.inspection-information-right-text-box{
    display: flex;width: 98%;flex-wrap: wrap;background: #fff;position: relative;border: 1px solid #DADCE7; -webkit-box-shadow: 0px -2px 21px 0px rgba(50, 50, 50, 0.15);
-moz-box-shadow:    0px -2px 21px 0px rgba(50, 50, 50, 0.15);
box-shadow:         0px -2px 21px 0px rgba(50, 50, 50, 0.15); border-top: 0px;
}
.inspection-information-comp-info{
    width: 15%; border: 1px solid rgb(218 220 231 / 62%);; padding: 15px; border-right: 0px;
}
.inspection-information-comp-address{
    font-size: 12px;
}
.inspection-information-comp-name-box{
    width: 15%;border: 1px solid rgb(218 220 231 / 62%);padding: 15px;display: flex;justify-content: center;align-items: center; border-right: 0px;
}
.inspection-information-comp-select-option{
    width: 23.333%;border: 1px solid rgb(218 220 231 / 62%);padding: 15px; position: relative; padding-right: 0px; border-right: 0px;
}
.inspection-information-right-top-drop-box{
    position: absolute; right: 0px; top: 0px; width: 40px; height: 40px; background: #E9EBF4; text-align: center;   border-radius: 0px 0px 0px 50px; padding-left: 12px;
}
.inspection-information-right-top-drop-inner ul.nav{
    right: 0px !important; width: 173px !important;
}
.inspection-information-dropdown-button{
    display: flex !important; justify-content: flex-end; background: transparent; padding-right: 7px !important; padding-top: 1px !important; position: absolute !important; right: 0px !important;
}
.inspection-information-right-top-drop-inner .nav>li>a:hover, .inspection-information-right-top-drop-inner .nav>li>a:focus, .inspection-information-right-top-drop-inner .nav .open>a, .inspection-information-right-top-drop-inner .nav .open>a:hover, .inspection-information-right-top-drop-inner .nav .open>a:focus{
    background: transparent !important;
}


.inspection-information-comp-option-box{
    display: flex;flex-wrap: wrap;flex-direction: row;align-items: center;height: 108px;overflow-y: scroll; width: 100%;
}
.inspection-information-comp-option{
    background: #E9EBF4;color: #6236FA;display: table;padding: 6px 20px;border-radius: 50px; margin: 4px;
}
.inspection-information-comp-add-info-box{
    width: 100%;padding: 30px 20px;
}
.inspection-information-add-info-top-title{
    margin-bottom: 10px;padding-left: 21px; font-size: 16px;
}
.inspection-information-add-info-top-text{
    margin-bottom: 20px;padding-left: 21px;
}
.inspection-information-form-box{
    display: flex;width: 50%;flex-wrap: wrap;flex-direction: row;align-content: center;align-items: center;width: 100%;
}
.inspection-information-form-inner-box{
    background: #F7F7F7;display: flex;flex-direction: row;flex-wrap: wrap; width: 48%; padding: 20px; margin:10px; border-radius: 5px; border: 1px solid #DADCE7; position: relative;
}
.inspection-information-form-close-box{
    position: absolute; top: -14px; right: -10px;
}
.inspection-information-form-input-box{
    display: flex;width: 45%;margin: 10px;align-items: center;flex-wrap: nowrap;flex-direction: row;
}
.inspection-information-form-input-label{
    width: 50px;
}
.inspection-information-form-input-label img{
    width: 20px;
}
.inspection-information-form-input-inner-box{
    width: 100%;
}
.inspection-information-form-input{
    width: 100%;height: 50px;border-radius: 3px;border: 1px solid #ccc;padding: 5px;
}
.inspection-information-set-time-box{
    width: 100%; width: 100%; margin-top: 10px;
}
.inspection-information-set-time-span{
    padding-left: 10px; padding-right: 10px;
}
.inspection-information-set-time-input{
    width: 110px;
    text-align: center;
    background: #E9EBF4;
    border: 0px;
    height: 30px;
    border-radius: 5px;
    font-size: 14px;
}
.inspection-information-time-icon{
    width: 20px;
}
.inspection-information-save-box{
    position: absolute;bottom: -18px;text-align: center;left: 50%;margin-left: -70px;
}
.inspection-information-save-button{
    border: 0px; background: #4BC149; color: #fff; width: 140px; height: 38px; border-radius: 8px;
}
.inspection-information-save-button span{
    padding-right: 10px;
}
.add-new-point-popup-section{
    position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; background: rgb(0 0 0 / 85%); z-index: 99;
}
.add-new-point-popup-box{
    position: absolute; padding: 40px 30px; background: #fff;  border: 1px solid #ccc;  border-radius: 5px; top: 70px; left: 50%;  margin-left: -200px;width: 450px;
}
.add-new-point-popup-close-box{
    position: absolute; right: 14px; top: 10px;
}
.add-new-point-popup-input-box{
    padding-top: 26px;
}
.add-new-point-popup-input{
    width: 100%; height: 45px; border: 1px solid #ccc; border-radius: 5px;
}
.add-new-point-popup-input-valid-info{
    font-size: 12px; margin-top: 7px;
}
.add-new-point-popup-input-submit-box{
    margin-top: 30px; text-align: center;
}
.add-new-point-popup-input-submit-button{
    background: rgb(104,81,251); background: linear-gradient(305deg, rgba(104,81,251,1) 1%, rgba(23,122,255,1) 100%); color: #fff; width: 120px; height: 40px; border: 0px; border-radius: 5px;
}

/*************************** model 4 ******************************/

.select_clients_list{
    list-style: none;
    padding: 0px;
    border: 1px solid #ccc;
    border-radius: 10px 0px 0px 10px;
    margin-bottom: 0px;
    min-height: 100%;
}
.select_clients_list li{
    border-bottom: 1px solid #ccc;
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 20px;
}
.select_clients_list li.active{
    background-color: #E9EBF4;
}
.select_clients_list li:first-child{
    padding-top: 40px;
    padding-bottom: 40px;
    font-weight: bold;
}

.ct-select-left-dropIcon select{
    padding-left: 70px !important;
}
.ct-select-left-dropIcon:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    background-color: #3319F3;
    background-image: url('../img/point-dropdown-select.svg');
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    background-size: 24px;
    border-radius: 0px 5px 5px 0px;
}
.new_staff_form_section{
    width: 98%; margin-left: 1%; margin-right: 1%; border:1px solid #ccc; border-radius: 10px; padding: 30px
}
.new_staff_form_title_box{
    width: 100%;display: flex;justify-content: space-between;align-items: center;align-content: center;flex-wrap: wrap; padding-left: 20px; padding-right: 20px; padding-bottom: 40px; border-bottom: 1px solid #ccc;
}
.new_staff_form_title{
    font-size: 20px; font-weight: bold;
}
.new_staff_form_box{
    padding-top: 30px; padding-bottom: 30px;
}
.new_staff_form_wrapper{
    display: flex;flex-wrap: wrap;align-content: center;align-items: center; margin-bottom: 30px
}
.new_staff_form_label{
    width:20%; font-weight: bold; font-size: 17px; color: #474747
}
.new_staff_form_input_wrapper{
    width: 80%
}
.new_staff_form_input{
    width: 100%; max-width: 400px; height: 40px; border-radius: 8px; border:1px solid #DADCE7; outline: none; padding-left: 10px;
}
.new_staff_form_button_box{
    text-align: center; border-top: 1px solid #ccc; padding-top: 50px; padding-bottom: 20px
}
.new_staff_form_button{
    background: rgb(23,122,255); background: linear-gradient(305deg, rgba(23,122,255,1) 0%, rgba(104,81,251,1) 100%); color: #fff; width: 120px; height: 34px; border-radius: 50px; border:0px
}
.radio_box_wrapper label {
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.radio_box_wrapper label input {
    position: absolute;
    left: -9999px;
}
.radio_box_wrapper label input:checked + span {
    background-color: transparent;
}
.radio_box_wrapper label input:checked + span:before {
    box-shadow: inset 0 0 0 0.4375em #3319f3;
}
.radio_box_wrapper label input:checked + span:after {
    background-color: transparent;
}
.radio_box_wrapper label span {
    display: flex;
    align-items: center;
    border-radius: 99em;
    transition: 0.25s ease;
    width: 25px;
    height: 25px;
}

.radio_box_wrapper label span:before {
    display: flex;
    flex-shrink: 0;
    content: "";
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    transition: 0.25s ease;
    box-shadow: inset 0 0 0 0.125em #3319f3;
}
.radio_box_wrapper label span:after {
    display: flex;
    flex-shrink: 0;
    content: "";
    background-color: #79807D;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transition: 0.25s ease;
    margin-left: -17px;
}

.container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}
.user_permission_section{
    width: 100%; display: flex; margin-bottom: 30px;
}
.user_permission_item_left_count{
    width: 3%; display: flex; align-items: center; justify-content: center;
}
.user_permission_item_right_box{
    width: 97%; display: flex;
}
.user_permission_item_right_user_info_box{
    width:20%; display: flex;align-items: center;border:1px solid #DADCE7;padding: 14px;border-radius: 8px 0px 0px 8px; position: relative;
}
.permission_right_user_info_name{
    background-color: #3319F3;width: 55px;height: 55px;color: #fff;font-size: 16px;font-weight: bold;border-radius: 50px;text-align: center;align-items: center;display: flex;justify-content: center;
}
.permission_right_user_name_wrapper{
    padding-left: 10px
}
.permission_right_user_name_fullname{
    font-weight: bold; font-size: 12px;
}
.permission_right_user_name_email{
    font-weight: normal; font-size: 12px;
}
.user_permission_item_permission_lavel{
    width:80%;border:1px solid #DADCE7;border-radius: 0px 8px 8px 0px;display: flex;align-items: center;
}
.user_permission_item_permission_wrapper{
    display: flex; width: 33%
}
.user_permission_item_permission_label{
    width: 30%;text-align: right;padding-right: 10px;
}
.user_permission_item_permission_text{
    width: 70%;
}
.user_permission_item_permission_type{
    font-weight: 900; font-size: 14px;
}
.user_permission_item_permission_type_info{
    font-weight: normal;font-style: italic; font-size: 12px
}
.user_permission_delete_wrapper{
    background-color: #3319F3;width: 40px;height: 40px;line-height: 35px;text-align: center;border-radius: 50px;position: absolute;right: 1px; border:1px solid #fff;    webkit-box-shadow: 0px 0px 10px 3px rgb(0 0 0 / 16%);
    -moz-box-shadow: 0px 0px 10px 3px rgb(0 0 0 / 16%);
    box-shadow: 0px 0px 10px 3px rgb(0 0 0 / 16%);
}

.add_new_client_form_section{
    width: 98%; margin-left: 1%; margin-right: 1%; border:1px solid #ccc; border-radius: 10px; padding: 30px
}
.add_new_client_form_section_title_wrapper{
    width: 100%;display: flex;justify-content: space-between;align-items: center;align-content: center;flex-wrap: wrap; padding-right: 20px; padding-bottom: 40px; border-bottom: 1px solid #ccc;
}
.add_new_client_form_section_title{
    font-size: 20px; font-weight: bold;
}
.new_add_client_form_wrapper{
    display: flex;justify-content: space-between;flex-wrap: wrap;align-items: center;align-content: center; padding-top: 30px; padding-bottom: 30px; border-bottom: 1px solid #ccc;
}
.new_add_client_form_inner_wrapper{
    width: 70%;
}
.new_add_client_input_wrapper{
    display: flex;flex-wrap: wrap;align-content: center;align-items: center; margin-bottom: 30px
}
.new_add_client_input_label{
    width:20%; font-weight: bold; font-size: 17px; color: #474747
}
.new_add_client_input_box_wrapper{
    width: 80%
}
.new_add_client_input{
    width: 100%; max-width: 400px; height: 40px; border-radius: 8px; border:1px solid #DADCE7; outline: none; padding-left: 10px;
}
.right_new_client_upload_logo_section{
    display: flex;
}
.right_new_client_upload_logo_wrapper{
    background-color: #fff;width: 150px;height: 150px;border-radius: 8px;webkit-box-shadow: 0px 0px 34px -5px rgba(0,0,0,0.16);-moz-box-shadow: 0px 0px 34px -5px rgba(0,0,0,0.16);box-shadow: 0px 0px 34px -5px rgba(0,0,0,0.16);display: flex;align-items: center;justify-content: center;flex-flow: column;
}
.right_new_client_upload_logo_icon{
    margin-top: 40px;
}
.right_new_client_upload_logo_text{
    margin-top: 10px;
}
.rogr_clients_protal_access_section{
    padding-top: 30px;
}
.rogr_clients_protal_access_wrapper{
    display: flex;justify-content: space-between;flex-wrap: wrap;align-items: center;
}
.rogr_clients_protal_access_heading{
    font-weight: bold; font-size: 24px;
}
.rogr_clients_protal_access_text{
    font-style: italic; color: #9E9E9E; margin-top: 15px;
}
.rogr_clients_protal_access_navigation_box{
    display: flex;justify-content: flex-end;align-items: center;
}
.rogr_clients_protal_access_navigation_left{
    width: 30px;height: 30px;border-radius: 50px;background-color: #E9EBF4;border:1px solid #DADCE7;justify-content: center;align-items:center;line-height: 26px;text-align: center; margin-right: 15px;
}
.rogr_clients_protal_access_navigation_right{
    width: 30px;height: 30px;border-radius: 50px;background-color: #E9EBF4;border:1px solid #DADCE7;justify-content: center;align-items:center;line-height: 26px;text-align: center; margin-left: 15px;
}
.rogr_clients_protal_access_edit_wrapper{
    background: #F7F7F7; display: flex; flex-direction: column; flex-wrap: wrap; width: 48%;   padding: 20px; margin: 10px; border-radius: 5px; border: 1px solid #DADCE7; position: relative; padding-top: 40px
}
.rogr_clients_protal_access_edit_close{
    position: absolute; bottom: -14px; right: -10px
}
.rogr_clients_protal_access_edit_input_wrapper{
    display:flex; margin: 10px; align-items: center; flex-wrap: nowrap; flex-direction: row;
}
.rogr_clients_protal_access_edit_input_label{
    width: 250px; font-weight: bold; font-size: 17px; color: #474747
}
.select_clients_list{
    list-style: none;
    padding: 0px;
    border: 1px solid #ccc;
    border-radius: 10px 0px 0px 10px;
    margin-bottom: 0px;
    min-height: 100%;
}
.select_clients_list li{
    border-bottom: 1px solid #ccc;
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 20px;
}
.select_clients_list li.active{
    background-color: #E9EBF4;
}
.select_clients_list li:first-child{
    padding-top: 40px;
    padding-bottom: 40px;
    font-weight: bold;
}
.select_clients_list li:last-child{
    /*border-bottom: 0px;*/
}
.display_flax{
    display: flex;
}
.select_client_left_section{
    width: 20%;    max-height: 500px;
    overflow: scroll;
}
.select_client_right_info_section{
    width: 79%; margin-left: 1%; border:1px solid #ccc; border-radius: 0px 10px 10px 0px; padding: 30px; position: relative;
}
.select_client_right_info_title{
    width: 100%;display: flex;justify-content: space-between;align-items: center;align-content: center;flex-wrap: wrap; padding-left: 20px; padding-right: 20px; padding-bottom: 40px; border-bottom: 1px solid #ccc;
}
.select_client_right_detail_wrapper{
    display: flex;justify-content: space-between;flex-wrap: wrap;align-items: center;align-content: center; padding-top: 30px; padding-bottom: 30px; border-bottom: 1px solid #ccc;
}
.select_client_right_detail_box{
    display: flex; margin-bottom: 15px
}
.select_client_right_detail_space{
    padding-left: 10px
}
.select_client_right_barcode{
    margin-right: 10px;
}
.select_client_right_flag{
    margin-left: 10px;
}
.select_client_personnel_section{
    padding-top: 30px;
}
.select_client_personnel_heading_wrapper{
    display: flex; align-items: center;  margin-bottom: 30px;
}
.select_client_personnel_heading_title{
    padding-right: 15px;
}
.select_client_group_icon{
    width:3%
}
.select_client_group_section{
    width: 97%; display: flex;
}
.select_client_group_item{
    display: flex; align-items: center; background-color: #E9EBF4; padding: 15px; padding-right: 30px; border-radius: 10px; flex-wrap: wrap; justify-content: space-between; position: relative; margin-right: 10px; margin-left: 10px;
}
.select_client_group_item_delete{
    position: absolute;right: -9px;top: -13px;
}
.select_client_group_item_detail_box{
    padding-left: 10px
}
.select_client_group_item_detail{
    font-weight: 600
}
.select_client_group_item_all_delete{
    background-color: #3319F3;
    width: 40px;
    height: 40px;
    line-height: 35px;
    text-align: center;
    border-radius: 50px;
    position: absolute;
    right: -21px;
    bottom: -18px;
    border: 1px solid #fff;
    webkit-box-shadow: 0px 0px 10px 3px rgb(0 0 0 / 16%);
    -moz-box-shadow: 0px 0px 10px 3px rgb(0 0 0 / 16%);
    box-shadow: 0px 0px 10px 3px rgb(0 0 0 / 16%);
}

.ct-select-left-dropIcon:after{
    border-radius: 5px 0px 0px 5px;
}.rogr_clients_protal_access_edit_save_box{
     margin-top: 40px; text-align: center;
 }


.tab_new_staff_active_form_tagHeader_box{
    background: #1A132C;  display: flex; color: #fff;  flex-wrap: wrap; align-items: center; padding: 10px;    justify-content: space-between;
}
.tab_new_staff_active_form_tagHeader_icon_box{
    display: flex; width: 20%; padding-top: 10px; padding-bottom: 10px;
}
.tab_new_staff_active_form_tagHeader_icon_active_box{
    margin-left: 5px; margin-right: 5px;background: #3319F3; border-radius: 50px; padding: 10px; display: flex; align-items: center; width: 150px; padding-left: 25px;
}

.tab_new_staff_active_form_tagHeader_icon_unactive_box{
    margin-left: 5px; margin-right: 5px;background: rgb(233 235 244 / 40%); border-radius: 50px; padding: 10px; display: flex; align-items: center; width: 150px; padding-left: 25px;
}
.tab_new_staff_active_form_tagHeader_right_box{
    width: 58%; padding-right: 20px
}

/***************************** module 5 ***************************/
.top_header_select_group{
    width: 300px;
    margin-right: 50px;
}
.top_header_select_group:before {
    background-color: #3C364C !important;
    border-radius: 5px 0px 0px 5px;
}
.top_header_select_group select{
    border:0px !important;
    outline: none;
    border-radius: 5px;
    color: #fff;
}
.top_header_select_group select option {
    font-size: 16px;
    background: #3C364C;
}
.top_header_select_group:after {
    background-color: #3C364C !important;
}

.ct-select-group select option{
    background: #3C364C !important;
}




/***************************************** model 5 ********************************************/
.health_safety_top_bar{
    width: 100%;display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-between;align-items: center;background-color: #F8F8F8;border-bottom: 1px solid rgb(204 204 204 / 62%);
}
.health_safety_top_left_box{
    display: flex;align-items: center;flex-wrap: wrap;flex-direction: row;
}
.health_safety_top_left_input{
    width: 70px;padding-left: 20px;
}
.health_safety_top_left_label{
    width: 80px
}
.health_safety_top_left_buttons_box{
    display: flex;align-items: center;
}
.health_safety_top_left_duplicate_box{
    width: 180px;
}
.health_safety_top_left_duplicate_button{
    background-color: #3319F3;color: #fff;height: 40px;width: 150px;border-radius: 50px;border: 0px;
}
.health_safety_top_left_delete_box{
    width: 150px
}
.health_safety_top_left_delete_button{
    background-color: #3319F3;color: #fff;height: 40px;width: 130px;border-radius: 50px;border: 0px;line-height: 32px;
}
.health_safety_top_right_box{
    display: flex;flex-direction: row;flex-wrap: wrap;align-items: center; padding: 20px
}
.health_safety_section{
    display: flex;
}
.health_safety_left_number_box{
    width: 50px;
}
.health_safety_left_number_checkbox{
    position: relative; margin-top: 10px;
}
.health_safety_left_number_checkbox_input{
    width: 20px; height: 20px; outline: #ccc;
}
.health_safety_right_content_box{
    width: 100%; display: flex;
    background-color: #fff;
    box-shadow: 0px 0px 20px 1px rgb(0 0 0 / 17%);
    -webkit-box-shadow: 0px 0px 20px 1px rgb(0 0 0 / 17%);
    -moz-box-shadow: 0px 0px 20px 1px rgb(0 0 0 / 17%);
}
.health_safety_right_one_box{
    width: 20%; border:1px solid #DADCE7;position: relative; border-right: 0px; display: flex; flex-direction:column;
}
.welfareRuleName {
    border: 1px solid #3b46f44a;
    padding: 10px;
    font-size: 13px;
    width: 100%;
}
.health_safety_right_one_content_box{
    padding: 20px;
}
.health_safety_right_one_title{
    font-weight: bold; font-size: 16px;
}
.health_safety_right_one_subtitle{
    font-weight: normal; font-style: italic; font-size: 10px; color: rgb(0 0 0 / 54%);
}
.health_safety_right_two_box, .health_safety_right_three_box{
    width: 40%; border:1px solid #DADCE7; position: relative; border-right: 0px;
}
.health_safety_right_top_title_box{
    padding: 20px; background-color: #F7F7F7; border-bottom: 1px solid #DADCE7; display: flex; min-height: 89px;
}
.health_safety_right_top_inner_box{
    padding-left: 15px;
}
.health_safety_right_top_title{
    font-weight: bold; font-size: 16px;
}
.health_safety_right_top_subtitle{
    font-weight: normal; font-style: italic; font-size: 10px; color: rgb(0 0 0 / 54%);
}
.health_safety_right_two_checkInTimeBox{
    padding: 20px;
}
.display_flex_width{
    display: flex;
    width: 100%;
}
.health_safety_right_two_checkInTimeBox_label{
    width: 40%; font-weight: bold; font-size: 16px;
}
.health_safety_right_two_checkInTimeBox_InputBox{
    display: flex; width: 60%;
}
.health_safety_right_two_checkInTimeBox_Icon{
    background-color: #3319F3;width: 50px;height: 40px;display: flex;align-items: center;justify-content: center;border-radius: 6px 0px 0px 6px;
}
.health_safety_right_two_checkInTimeBox_Icon img{
    width: 20px;
}
.health_safety_right_checkInTimeBox_InputBox{
    margin-right: 5px;
}
.health_safety_right_checkInTimeBox_Input{
    background-color: #E9EBF4; width: 50px; border:0px; height: 40px; text-align: center; outline: none;-webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
}
.border_right_round{
    border-radius: 0px 6px 6px 0px;
}
.health_safety_right_checkInTimeBox_Input_label{
    text-align: center; margin-top: 3px
}
.padding_top_bottom_30{
    padding-top: 30px;
    padding-bottom: 30px
}
.health_safety_right_two_checkIn_interval{
    display: flex; height: calc(100% - 89px); align-items: center;
}



.health_safety_right_item{
    display: flex;width: 100%;flex-wrap: wrap;align-items: center;justify-content: space-between; border-bottom: 1px solid #DADCE7; height: 80px
}
.health_safety_right_item_edit{
    background-color: #E9EBF4; width: 40px; height: 40px; border-radius: 50px; line-height: 36px; text-align: center;
}
.health_safety_right_item_options{
    display: flex;
}
.health_safety_right_item_add{
    background-color: #E9EBF4; width: 40px; height: 40px; border-radius: 50px; line-height: 36px; text-align: center; margin-left: 15px; margin-right: 15px;
}
.health_safety_right_item_notices_up{
    background-color: #E9EBF4; width: 40px; height: 40px; border-radius: 50px; line-height: 36px; text-align: center; margin-left: 15px; margin-right: 15px;
}
.health_safety_right_item_notices_down{
    background-color: #E9EBF4; width: 40px; height: 40px; border-radius: 50px; line-height: 36px; text-align: center; margin-left: 15px; margin-right: 15px;
}
.health_safety_right_item_notices_delete{
    background-color: #E9EBF4; width: 40px; height: 40px; border-radius: 50px; line-height: 36px; text-align: center; margin-left: 15px;
}
.health_safety_item_pre_popup{
    position: absolute;
    top: 153px;
    background-color: #fff;
    padding: 30px;
    box-shadow: 0px 0px 21px 2px rgb(0 0 0 / 17%);
    -webkit-box-shadow: 0px 0px 21px 2px rgb(0 0 0 / 17%);
    -moz-box-shadow: 0px 0px 21px 2px rgba(0,0,0,0.17);
    width: 800px;
    left: 50%;
    margin-left: -400px;
    border-radius: 20px;
}
.health_safety_item_pre_popup_close{
    position: absolute;right: 22px;top: 14px; cursor: pointer;
}
.health_safety_item_pre_popup_title{
    font-size: 20px; font-weight: bold; width: 400px; margin: auto; text-align: center; margin-bottom: 50px
}
.health_safety_item_pre_popup_img{
    text-align: center;
}

.health_safety_item_pre_button{
    background-color:#3319F3;color:#fff;height:40px;width:220px;border-radius:50px;border:0px;line-height:32px;
}


.health_safety_top_notice_subbar{
    display: flex;width: 80%;padding-top: 10px;padding-bottom: 10px;flex-wrap: wrap;align-items: center; padding-left: 30px
}
.health_safety_top_add_notice_button{
    background: #3319F3; height: 50px; width: 240px; border-radius: 50px; border: 0px; font-size: 16px; color: #fff;
}
.health_safety_top_add_notice_button_text{
    padding-left: 10px;
}
.health_safety_top_right_notice_subbar{
    width: 20%; padding-right: 20px; text-align: right;
}
.health_safety_top_right_notice_subbar span{
    cursor: pointer;
}



.health_safety_top_main_bar{
    display: flex;width: 80%;padding-top: 10px;padding-bottom: 10px;flex-wrap: wrap;align-items: center;
}
.health_safety_top_bar_label{
    padding-right: 15px; padding-left: 20px;
}
.health_safety_top_bar_add_notice_box{
    padding-left: 20px
}
.health_safety_top_bar_add_notice_button{
    background: rgb(233 235 244 / 28%); height: 50px; width: 240px; border-radius: 50px; border: 0px; font-size: 16px; color: #fff;
}
.health_safety_top_bar_right_box{
    width: 20%; padding-right: 20px;
}
.health_safety_top_Sub_bar{
    width: 100%;display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-between;align-items: center;background-color: #F8F8F8;border-bottom: 1px solid rgb(204 204 204 / 62%);
}
.health_safety_top_Sub_left_bar{
    display: flex;align-items: center;flex-wrap: wrap;flex-direction: row;
}
.health_safety_top_Sub_left_checkbox{
    width: 70px;padding-left: 20px;
}
.health_safety_top_Sub_left_label{
    width: 80px;
}
.health_safety_top_Sub_left_options{
    display: flex;align-items: center;
}
.health_safety_top_Sub_left_duplicate_box{
    width: 180px;
}
.health_safety_left_duplicate_button{
    background-color: #3319F3;color: #fff;height: 40px;width: 150px;border-radius: 50px;border: 0px;
}
.health_safety_top_Sub_left_delete_box{
    width: 150px;
}
.health_safety_left_delete_button{
    background-color: #3319F3;color: #fff;height: 40px;width: 130px;border-radius: 50px;border: 0px;line-height: 32px;
}
.health_safety_left_delete_button span{
    padding-left: 20px
}
.health_safety_top_Sub_right_bar{
    display: flex;flex-direction: row;flex-wrap: wrap;align-items: center; padding: 20px
}
.health_safety_top_Sub_right_label{
    padding-right: 20px;
}
.health_safety_notice_item_left{
    width: 50px;
}
.health_safety_notice_item_left_checkbox_box{
    position: relative; margin-top: 10px;
}
.health_safety_notice_item_left_checkbox{
    width: 20px; height: 20px; outline: #ccc;
}
.health_safety_notice_item_right{
    width: 100%; display: flex; background-color: #fff;
}
.health_safety_notice_item_right_one_box{
    width: 15%; border:1px solid #ccc; position: relative;position: relative; border-right: 0px;
}
.health_safety_notice_item_right_two_box{
    width: 15%; border:1px solid #ccc; position: relative; border-right: 0px;
}
.health_safety_notice_item_right_three_box{
    width: 40%;padding: 15px;display: flex;align-items: center;flex-wrap: wrap; border:1px solid #ccc;position: relative; border-right: 0px;
}
.health_safety_notice_item_right_four_box{
    width: 30%;display: flex;align-items: center;flex-wrap: wrap; border:1px solid #ccc; padding-left:15px;position: relative;
}
.health_safety_notice_item_right_one_inner{
    padding: 20px;
}
.health_safety_notice_item_right_one_inner_title{
    font-weight: bold; font-size: 16px;
}
.health_safety_notice_item_right_three_title{
    padding-right: 30px; padding-left: 5px;
}
.health_safety_notice_item_right_three_detail{
    background-color: #E9EBF4;padding:15px;height: 90px;width: 85%;border-radius: 6px;
}
.health_safety_notice_item_right_four_push_button{
    margin-right: 10px;
}
.health_safety_notice_item_right_four_push_title{
    font-weight: bold; font-size: 16px; color: #474747;
}
.health_safety_notice_item_right_four_push_detail{
    font-size: 15px; font-style: italic; color: #9E9E9E;
}
.eventNameInput,.grayPh{
    height: 50px;
    border:0px;
    background: transparent;
}
.eventNameInput::placeholder,.grayPh::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #ccc;
    opacity: 1; /* Firefox */
}

.eventNameInput:-ms-input-placeholder,.grayPh::-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #ccc;
}

.eventNameInput::-ms-input-placeholder,.grayPh::-ms-input-placeholder { /* Microsoft Edge */
    color: #ccc;
}
.rdisabled{
    opacity: .3;
    cursor: not-allowed !important;
}
/************************************ model 3 **********************************/
.manage_task_item{
    display: flex;width: 100%;margin-bottom:70px;position:relative;
}
.taskName {
    width: 100%;
    padding: 15px;
    margin-top: 10px;
    border: 0px;
    background: transparent;
}
.save_task_btn{
    position: absolute;
    bottom: -20px;
    width: 100px;
    left: 50%;
    border: 0px;
    border-radius: 5px;
    background-color: #E9EBF4;
    padding: 5px;
    font-size: 16px;
    border: 1px solid #dedfe5;
}
.manage_taskItem_left_box{
    width: 2%;
}
.manage_taskItem_right_box{
    display: flex;flex-direction: row;flex-wrap: wrap;align-content: center;align-items: stretch;width: 98%; box-shadow: 0px 0px 17px 5px rgba(0,0,0,0.10);-webkit-box-shadow: 0px 0px 17px 5px rgba(0,0,0,0.10);-moz-box-shadow: 0px 0px 17px 5px rgba(0,0,0,0.10);
}
.manage_taskItem_title_box{
    width: 20%;position: relative;padding: 20px;border: 1px solid #ccc; border-right: 0px;
}
.manage_taskItem_title_label{
    font-weight: bold; font-size: 14px;
}
.manage_taskItem_subtitle_box{
    font-size: 12px;
}
.manage_taskItem_textCount{
    position: absolute;right: 10px;bottom: 5px;color: #9a9393;font-style: italic;font-size: 10px;
}
.manage_taskItem_address_box{
    width: 20%; position: relative;padding: 20px;border: 1px solid #ccc; border-right: 0px;
}
.manage_taskItem_address_label{
    font-weight: bold; font-size: 16px;
}
.manage_taskItem_address_sublabel{
    font-size: 12px; margin-top: 10px;
}
.manage_taskItem_address_outBox{
    display: flex; margin-top: 8px
}
.manage_taskItem_address_icon{
    padding-right: 8px; padding-top: 8px
}
.manage_taskItem_address_text{
    font-size: 12px; font-weight: 300;
}
.manage_taskItem_task_box{
    width: 60%;display: flex;flex-direction: row;flex-wrap: wrap; padding: 20px;border: 1px solid #ccc;
}
.manage_taskItem_task_leftbox{
    width: 40%;
}
.manage_taskItem_task_rightbox{
    width: 60%;display: flex;
}
.manage_taskItem_task_label{
    font-size: 16px; font-weight: bold;
}
.manage_taskItem_task_detail{
    font-style: italic; font-size: 10px; color:#505050; margin-top: 10px;
}
.manage_taskItem_task_detail_text{
    background: #FFFFFF; height: 110px; padding: 20px; width: 100%; font-size: 12px; border-radius: 3px;border: 2px solid #e9e9ea;
}
::-webkit-calendar-picker-indicator {
    filter: #3319F3;
}
.shift-select-group {
    height: 46px;
    position: relative;
}
.shift-select-group .shift-select {
    width: 100%;
    height: 44px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    font-size: 16px;
    border: none;
    background: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    padding: 5px 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    outline: none;
}
.shift-select-group .shift-select option {
    font-size: 16px;
    background: #fff;
}
.shift-select-group:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 46px;
    width: calc(100% - 50px);
    background: #fff;
    z-index: 0;
}
.shift-select-group:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 43px;
    background-color: #3319F3;
    background-image: url(../img/point-dropdown-select.svg);
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    background-size: 24px;
    border-radius: 0px 5px 5px 0px;
}
.shift-select-group select option{
    background: #fff !important;
}
.tgl {
  display: none;
}
.tgl, .tgl:after, .tgl:before, .tgl *, .tgl *:after, .tgl *:before, .tgl + .tgl-btn {
  box-sizing: border-box;
}
.tgl::-moz-selection, .tgl:after::-moz-selection, .tgl:before::-moz-selection, .tgl *::-moz-selection, .tgl *:after::-moz-selection, .tgl *:before::-moz-selection, .tgl + .tgl-btn::-moz-selection {
  background: none;
}
.tgl::selection, .tgl:after::selection, .tgl:before::selection, .tgl *::selection, .tgl *:after::selection, .tgl *:before::selection, .tgl + .tgl-btn::selection {
  background: none;
}
.tgl + .tgl-btn {
  outline: 0;
  display: block;
  width: 4em;
  height: 2em;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.tgl + .tgl-btn:after, .tgl + .tgl-btn:before {
  position: relative;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
}
.tgl + .tgl-btn:after {
  left: 0;
}
.tgl + .tgl-btn:before {
  display: none;
}
.tgl:checked + .tgl-btn:after {
  left: 50%;
}

.tgl-light + .tgl-btn {
  background: #f0f0f0;
  border-radius: 2em;
  padding: 2px;
  transition: all 0.4s ease;
}
.tgl-light + .tgl-btn:after {
  border-radius: 50%;
  background: #fff;
  transition: all 0.2s ease;
}
.tgl-light:checked + .tgl-btn {
  background: #9FD6AE;
}

.tgl-ios + .tgl-btn {
  background: #fbfbfb;
  border-radius: 2em;
  padding: 2px;
  transition: all 0.4s ease;
  border: 1px solid #e8eae9;
}
.tgl-ios + .tgl-btn:after {
  border-radius: 2em;
  background: #fbfbfb;
  transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08);
}
.tgl-ios + .tgl-btn:hover:after {
  will-change: padding;
}
.tgl-ios + .tgl-btn:active {
  box-shadow: inset 0 0 0 2em #e8eae9;
}
.tgl-ios + .tgl-btn:active:after {
  padding-right: 0.8em;
}
.tgl-ios:checked + .tgl-btn {
  background: #86d993;
}
.tgl-ios:checked + .tgl-btn:active {
  box-shadow: none;
}
.tgl-ios:checked + .tgl-btn:active:after {
  margin-left: -0.8em;
}
.add_shift_task_one_item_left_top_leftSlide_arrow{
    position: absolute; right: 13px;
}
.add_shift_task_one_item_left_top_rightSlide_arrow{
    position: absolute; bottom: 11px; right: 12px;
}
.add_shift_task_one_item_sliderItem{
    padding: 20px;
}
.add_shift_task_one_item_slider_innerItem{
    width: 200px;
}
.add_shift_task_one_item_slider_innerItem_header{
    padding: 20px;background: #ccc;height: 124px;background-image: url('../img/location.jpg');background-repeat: no-repeat;background-size: cover;position: relative;border-radius: 10px 10px 0px 0px;
}
.add_shift_task_one_item_slider_copyButton{
    background: #4D48F4;width: 35px;height: 35px;text-align: center;line-height: 30px;border-radius: 50%;position: absolute;right: -13px;top: -13px;z-index: 99;
}
.add_shift_task_one_item_slider_headerOverlay{
    position: absolute;background: rgb(0 0 0 / 48%);
    top: 0px;bottom: 0px;left: 0px;right: 0px;z-index: 0;border-radius: 10px 10px 0px 0px;
}
.add_shift_task_one_item_slider_header_text{
    position: relative; width: 100px;
}
.add_shift_task_one_item_slider_header_label{
    color: #fff; font-weight: bold; font-size: 14px;
}
.add_shift_task_one_item_slider_header_sublabel{
    color: #fff; font-size: 14px; margin-top: 16px;
}
.add_shift_task_one_item_slider_innerItem_body{
    background: #4D48F4; padding: 20px; border-radius: 0px 0px 10px 10px; position: relative;
}
.add_shift_task_one_item_slider_innerItem_body_label{
    color: #fff; font-style: italic; font-size: 10px; margin-bottom: 10px;
}
.add_shift_task_one_item_slider_innerItem_body_clock{
    padding-right: 10px;
}
.add_shift_slider_time_input{
    text-align:center; width: 125px; height: 30px; background: #E1E0FF; border:0px; border-radius: 8px; outline: none; color: #4D48F4; font-weight: bold;
}
.add_shift_slider_time_input_space{
    padding: 0px 5px; color: #fff;
}
.add_shift_task_one_item_slider_deleteButton{
    background: #FA4A4A;width: 35px;height: 35px;text-align: center;line-height: 30px;border-radius: 50%;position: absolute;right: -13px; bottom: -13px
}
.add_shift_task_time_box{
    width: 50%; padding: 30px 0px;
}
.add_shift_task_time_leftbox{
    padding: 10px; width: 20%;
}
.add_shift_task_time_leftbox_label{
    text-align: center; font-weight: 16px; font-weight: bold;
}
.add_shift_task_time_leftbox_sublabel{
    text-align: center; font-style: italic; font-size: 10px;
}
.add_shift_task_time_input_box{
    display: flex; width: 100%; margin-top: 30px;
}
.border_bottom{
    border-bottom: 1px solid #ccc;
}
.add_shift_task_selectShift_box{
    width: 100%; padding: 30px 0px; position: relative;
}
.add_shift_task_selectShift_inner_box{
    padding: 10px; width: 100%
}
.add_shift_task_selectShift_item{
    display: flex; margin: auto; width: 100%
}
.add_shift_task_selectShift_item_inputBox{
    width: 40px;display: flex;align-items: center;justify-content: flex-start;padding-left: 10px;
}
.add_shift_task_selectShift_item_input{
    width: 25px; height: 25px;
}
.add_shift_task_selectShift_item_userIcom{
    width: 50px;text-align: center;display: flex;align-items: center;justify-content: center;
}
.add_shift_task_selectShift_item_infoBox{
    padding-left: 10px
}
.add_shift_task_selectShift_item_info_label{
    font-size: 12px;
}
.add_shift_task_selectShift_item_info_sublabel{
    font-size: 12px; font-weight: bold;
}
.add_shift_task_selectShift_item_info_label_rule{
    font-style: italic; font-size: 10px; color: #9E9E9E;
}
 .add_shift_item_box{
    display: flex;width: 100%; margin: 40px 0px; margin-top: 0px;
}
.add_shift_item_leftbox{
    width: 2%;
}
.add_shift_item_rightbox{
    display: flex;flex-direction: row;flex-wrap: wrap; align-content: center;align-items: stretch;width: 98%; box-shadow: 0px 0px 17px 5px rgba(0,0,0,0.10);-webkit-box-shadow: 0px 0px 17px 5px rgba(0,0,0,0.10);-moz-box-shadow: 0px 0px 17px 5px rgba(0,0,0,0.10); position: relative;
}
.add_shift_title_box{
    width: 15%;padding: 20px;border: 1px solid #ccc;border-right: 0px;display: flex;flex-direction: column;justify-content: center;
}
.add_shift_title_label{
    font-weight: bold; font-size: 16px;
}
.add_shift_title_sublabel{
    font-style: italic; font-size: 10px;
}
.add_shift_period_box{
    width: 20%; position: relative;padding: 20px;border: 1px solid #ccc; border-right: 0px; display: flex; flex-flow: column; justify-content: center;
}
.add_shift_period_label{
    font-weight: bold; font-size: 16px;
}
.add_shift_period_sublabel{
    font-style: italic; font-size: 10px;
}
.add_shift_period_input_box{
    margin-top: 15px;
}
.add_shift_period_input{
    background-image: url('../img/time-input.svg');background-repeat: no-repeat;background-position: 96% 12px;background-color: #E9EBF4;padding-right: 20px;border: 0px;outline: none;padding: 10px;padding-right: 40px; border-radius: 4px;
}
.add_shift_period_start_end_date{
    width: 30%; display: flex; padding: 20px;border: 1px solid #ccc;
}
.add_shift_period_start_box{
    width: 100%; display: flex; flex-flow: column; justify-content: center; padding-right: 15px;
}
.add_shift_period_start_label{
    font-weight: bold; font-size: 16px;
}
.add_shift_period_start_sublabel{
    font-style: italic; font-size: 10px;
}
.add_shift_period_start_input_box{
    margin-top: 15px;
}
.add_shift_period_start_input{
    background-color: #E9EBF4;padding-right: 20px;border: 0px;outline: none;padding: 10px;border-radius: 4px; width: 100%;
}
.add_shift_period_end_box{
    width: 50%; display: flex; flex-flow: column; justify-content: center; padding-right: 15px;
}
.add_shift_period_end_label{
    font-weight: bold; font-size: 16px;
}
.add_shift_period_end_input_box{
    margin-top: 15px;
}
.add_shift_period_end_input{
    background-color: #E9EBF4;padding-right: 20px;border: 0px;outline: none;padding: 10px;border-radius: 4px; width: 100%;
}
.add_shift_period_occurs_day_box{
    width: 35%;display: flex; padding: 20px;border: 1px solid #ccc; border-left: 0px
}
.add_shift_period_occurs_box{
    width: 40%; padding-right: 15px;
}
.add_shift_period_occurs_label{
    font-weight: bold; font-size: 16px;
}
.add_shift_period_occurs_sublabel{
    font-style: italic; font-size: 10px;
}
.add_shift_period_select_day_box{
    width: 60%;
}
.add_shift_period_select_day_label{
    font-weight: bold; font-size: 16px;
}
.add_shift_period_select_day_Input{
    background-color: #E9EBF4; padding-right: 20px; border: 0px;outline: none; padding: 10px; padding-right: 40px; margin-top: 30px; width: 100%
}
.add_shift_taks_info_box{
    background: #F3F7FB; width: 100%; border: 1px solid #ccc; border-top: 0px; position: relative;
}
.add_shift_taks_info_inner_box{
    padding: 20px; display: flex;
}
.add_shift_taks_info_add_button_box{
    width: 70%
}
.add_shift_taks_info_add_button{
    background: #E9EBF4; width: 144px; height: 45px; border-radius: 50px; border: 0px; outline: none;
}
.add_shift_taks_info_add_button_text{
    margin-top: 20px; font-size: 10px;
}
.add_shift_taks_info_add_button_innner_box{
    width: 30%;display: flex;align-items: center;justify-content: flex-end;
}
.add_shift_taks_info_add_button_innner{
    width: 130px;border: 0px;border-radius: 50px;background: #E9EBF4;height: 40px;
}
.add_shift_tasks_shift_popup{
    position: absolute;width: 70%;top: 40px;background: #fff;height: auto;border: 1px solid #ccc;left: 15%;
}
.add_shift_tasks_shift_popup_header{
    display: flex;padding: 35px 30px;justify-content: space-between;border-bottom: 1px solid #ccc;align-items: center;
}
.add_shift_tasks_shift_popup_header_label{
    font-weight: bold; font-size: 16px;
}
.add_shift_tasks_shift_popup_header_button{
    background: #3319F3;color: #fff;width: 120px;height: 40px;border: 0px;border-radius: 50px;
}
.add_shift_tasks_shift_popup_item_box{
    padding: 30px 50px;
}
.add_shift_tasks_shift_popup_item_label{
    display: flex; align-items: center; margin-bottom: 20px;
}
.add_shift_tasks_shift_popup_item_input{
    width: 30px; height: 22px; margin-right: 15px;
}
.add_shift_task_one_item_box{
    width: 100%; display: flex; background:#fff;
}
.add_shift_task_one_item_left_box{
    width: 85%; max-height: 600px; overflow-y: scroll;
}
.add_shift_task_one_item_right_box{
    width: 15%; display: flex; border-left: 1px solid #ccc;max-height: 600px;overflow: scroll;
}
.add_shift_task_one_item_left_top_box{
    width: 80%; padding: 20px; display: flex; border-bottom: 1px solid #ccc; position: relative; max-height: 300px; overflow-x: scroll;
}
.add_shift_task_one_item_left_bottom_box{
    width: 100%; padding: 20px; display: flex;
}
.add_shift_only_user_box{
    width: 100%; display: flex; background:#fff;
}
.add_shift_only_user_left_box{
    width: 70%;
}
.add_shift_only_user_left_inner_box{
    width: 100%; padding: 20px; display: flex; border-bottom: 1px solid #ccc; position: relative; border-top: 1px solid #ccc;
}
.add_shift_only_user_right_shiftTask_box{
    width: 30%; display: flex; border-left: 1px solid #ccc; border-top: 1px solid #ccc;
}
.add_shift_only_user_right_min_taskTime{
    width: 50%;padding: 30px 0px;display: flex;align-items: center;
}
.user_sheft_tesk_dropbox_icon{
    width: 30px;
    height: 30px;
    position: absolute;
    right: -15px;
    bottom: -12px;
    background: #3319F3;
    text-align: center;
    line-height: 27px;
    border-radius: 50%;
}
.addShiftFeatureManagePopupBox_overlay{
    position: absolute;top: 0;bottom: 0px;left: 0px;right: 0px;background: rgb(228 227 227 / 73%); z-index: 99;
}
.addShiftFeatureManagePopupBox_content{
    position: absolute; z-index: 99; width: 450px; background: #F7F7F7; top: 50%; left: 50%;transform: translate(-50%, -50%);
}
.addShiftFeatureManagePopupBox_headerTitle{
    padding: 20px; border-bottom: 1px solid #ccc; font-size: 16px; font-weight: bold;
}
.addShiftFeatureManagePopupBox_bodyBox{
    padding: 20px; padding-bottom: 0px
}
.addShiftFeatureManagePopupBox_SubstituteBox{
    display: flex; margin-bottom: 20px;
}
.addShiftFeatureManagePopupBox_inner_inputBox{
    width: 80px;
}
.addShiftFeatureManagePopupBox_inner_contentBox{
    padding-left: 20px;
}
.addShiftFeatureManagePopupBox_inner_label{
    font-weight: bold; font-size: 16px;
}
.addShiftFeatureManagePopupBox_inner_sublabel{
    font-style: italic; font-size: 10px; color: #ccc
}
.addShiftFeatureManagePopupBox_inner_delete_icon{
    background: #E9EBF4;border: 1px solid #DADCE7;width: 50px;height: 50px;text-align: center;line-height: 44px;border-radius: 50%;
}
.add_shift_taks_info_add_button_innner_save{
    width: 130px;
    border: 0px;
    border-radius: 50px;
    background: #4BC149;
    height: 40px;
    color: #fff;
}
.add_shift_taks_info_add_button_text{
    padding-left: 10px;
}
.shift-map-pint_green {
    position: relative;
    background: #0ACC2C;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    width: 80px;
    border: 3px solid #fff;
    border-radius: 10px;
}
.shift-map-pint_green:before{
    content: "";
    position: absolute;
    bottom: -23px;
    left: 50%;
    z-index: 1;
    border: solid 12px transparent;
    border-right-color: #0ACC2C;
    transform: rotate(269deg);
    margin-left: -10px;
}
.shift-map-pint_green:after{
    content: "";
    position: absolute;
    bottom: -32px;
    left: 50%;
    border: solid 16px transparent;
    border-right-color: #fff;
    transform: rotate(269deg);
    margin-left: -14px;
    z-index: 0;
}

.shift-map-pint_red {
    position: relative;
    background: #FC3E29;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    width: 80px;
    border: 3px solid #fff;
    border-radius: 10px;
}
.shift-map-pint_red:before{
    content: "";
    position: absolute;
    bottom: -23px;
    left: 50%;
    z-index: 1;
    border: solid 12px transparent;
    border-right-color: #FC3E29;
    transform: rotate(269deg);
    margin-left: -6px;
}
.shift-map-pint_red:after{
    content: "";
    position: absolute;
    bottom: -32px;
    left: 50%;
    border: solid 16px transparent;
    border-right-color: #fff;
    transform: rotate(269deg);
    margin-left: -10px;
    z-index: 0;
}

.shift-map-pint_yellow {
    position: relative;
    background: #FA992E;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    width: 80px;
    border: 3px solid #fff;
    border-radius: 10px;
}
.shift-map-pint_yellow:before{
    content: "";
    position: absolute;
    bottom: -23px;
    left: 50%;
    z-index: 1;
    border: solid 12px transparent;
    border-right-color: #FA992E;
    transform: rotate(269deg);
    margin-left: -6px;
}
.shift-map-pint_yellow:after{
    content: "";
    position: absolute;
    bottom: -32px;
    left: 50%;
    border: solid 16px transparent;
    border-right-color: #fff;
    transform: rotate(269deg);
    margin-left: -10px;
    z-index: 0;
}
.shift-map-pint_blue {
    position: relative;
    background: #0a6ef6;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    width: 80px;
    border: 3px solid #fff;
    border-radius: 10px;
}
.shift-map-pint_blue:before{
    content: "";
    position: absolute;
    bottom: -23px;
    left: 50%;
    z-index: 1;
    border: solid 12px transparent;
    border-right-color: #0a6ef6;
    transform: rotate(269deg);
    margin-left: -6px;
}
.shift-map-pint_blue:after{
    content: "";
    position: absolute;
    bottom: -32px;
    left: 50%;
    border: solid 16px transparent;
    border-right-color: #fff;
    transform: rotate(269deg);
    margin-left: -10px;
    z-index: 0;
}
.shift-map-pint_black {
    position: relative;
    background: #000000;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    width: 80px;
    border: 3px solid #fff;
    border-radius: 10px;
}
.shift-map-pint_black:before{
    content: "";
    position: absolute;
    bottom: -23px;
    left: 50%;
    z-index: 1;
    border: solid 12px transparent;
    border-right-color: #000000;
    transform: rotate(269deg);
    margin-left: -6px;
}
.shift-map-pint_black:after{
    content: "";
    position: absolute;
    bottom: -32px;
    left: 50%;
    border: solid 16px transparent;
    border-right-color: #fff;
    transform: rotate(269deg);
    margin-left: -10px;
    z-index: 0;
}
.check_shift_area_section{
    display: flex;width: 100%;
}
.check_shiftAreaLeftBox{
    width: 25%;max-height: 500px;
    overflow: scroll;
}
.check_shiftAreaLeftBoxBorder{
    border: 1px solid #DADCE7;
}
.check_shiftAreaLeftBoxTitle{
    padding: 15px;
}
.check_shiftAreaLeftBoxItem{
    padding: 30px 20px;
    border-top: 1px solid #ccc;
    cursor:pointer;
}
.check_shiftAreaLeftBoxItem.active,.check_shiftAreaLeftBoxItem:hover{
    background-color: #eeeefb;
}
.check_shiftAreaLeftBoxItemLabel{
    font-weight: bold; font-size: 16px;
}
.check_shiftAreaLeftBoxItemSubLabel{
    font-style: italic; font-size: 10px;
}
.check_shiftAreaRightBox{
    width: 75%; padding-left: 10px;
}
.check_shiftAreaRightBoxBorder{
    border: 1px solid #DADCE7;padding: 20px;display: flex;width: 100%;position: relative;border-radius: 0px 9px 0px 0px;flex-wrap: wrap;
}
.check_shiftAreaPublished{
    background: #0ACC2C;position: absolute;right: 0;top: 0px;color: #fff;font-size: 12px;font-weight: bold;height: 36px;width: 114px;text-align: center;line-height: 37px;border-radius: 0px 9px 0px 30px;
}
.check_shiftAreaUnPublished{
    background: #FF9D0D;position: absolute;right: 0;top: 0px;color: #fff;font-size: 12px;font-weight: bold;height: 36px;width: 114px;text-align: center;line-height: 37px;border-radius: 0px 9px 0px 30px;
}
.check_shiftAreaRightBoxCover{
    padding: 20px;
    width: 90%
}
.check_shiftAreaRightBoxTitle{
    font-weight: 20px; font-weight: bold; padding-bottom: 15px;  margin-bottom: 20px;
}
.check_shiftAreaStartStopBox{
    width: 80%; display: flex; border-bottom: 1px solid #dadce7;border-top: 1px solid #dadce7; margin-bottom: 20px; padding-bottom: 20px;padding-top:20px
}
.check_shiftAreaStartStopItem{
    display: flex; width: 50%;cursor:pointer;
}
.check_shiftAreaStartStopItem.inactive{
    opacity: .5;cursor: not-allowed;
}
.check_shiftAreaStartStopItemImg{
    width: 50px;
}
.check_shiftAreaStartStopItemLabel{
    font-size: 12px; font-weight: bold;
}
.check_shiftAreaStartStopItemSubLabel{
    font-style: italic; font-size: 10px;
}
.check_shiftAreaShiftInsight{
    font-weight: bold; font-size: 16px; padding: 20px 0px;
}
.check_shiftAreaRunDateTimeBox{
    display: flex;width: 100%;margin: 25px 0px;align-items: center;
}
.check_shiftAreaRunDateTimeImg{
    width: 50px;
}
.check_shiftAreaRunDateTimeText{
    font-size: 12px;
}
.check_shiftAreaTeamSection{
    display: flex;width: 100%;margin: 25px 0px;align-items: center;
}
.check_shiftAreaTeamSectionImg{
    width: 50px;
}
.check_shiftAreaTeamMemberBox{
    display: flex; margin: auto; align-items: center; margin: 0px 10px;
}
.check_shiftAreaTeamMemberLeft{
    width: 50px;text-align: center;display: flex;align-items: center;justify-content: center; position: relative;
}
.check_shiftAreaTeamMemberLeftImg{
    background: #8D5AFF;font-weight: 900;color: #fff;font-size: 6px;width: 15px;height: 15px;border-radius: 50px;position: absolute;line-height: 14px;right: 0px;top: -5px;
}
.check_shiftAreaTeamMemberRight{
    padding-left: 10px;
}
.check_shiftAreaTeamMemberRightLabel{
    font-size: 12px;
}
.check_shiftAreaTeamMemberRightSubLabel{
    font-size: 12px; font-weight: bold;
}
.check_shiftAreaProgressSection{
    display: flex;width: 100%;margin: 25px 0px;align-items: center;
}
.check_shiftAreaProgressSectionImg{
    width: 50px;
}
.check_shiftAreaProgressSectionTextBox{
    width: 90%;display: flex;align-items: center;
}
.check_shiftAreaProgressSectionTextLabel{
    width: 20%; font-weight: bold; font-size: 12px; margin-right: 20px;
}
.check_shiftAreaProgressSectionProgressItem{
    width: 60%; max-width: 150px
}
.check_shiftAreaProgressSectionProgressItemBox{
    height: 14px; width: 100%; background: #E9EBF4; border-radius: 50px;
}
.check_shiftAreaProgressSectionProgressItemInner{
    background: #4DC66A; width: 50%; height: 14px;  border-radius: 50px;
}
.check_shiftAreaProgressSectionProgressItemStatus{
    width: 20%; display: flex; padding-left: 20px;
}
.check_shiftAreaComplianceSection{
    display: flex;width: 100%;margin: 25px 0px;align-items: center;
}
.check_shiftAreaComplianceSectionImg{
    width: 50px;
}
.check_shiftAreaComplianceSectionText{
    font-size: 12px; font-weight: bold;
}
.check_shiftAreaIncidentSection{
    display: flex;width: 100%;margin: 25px 0px;align-items: center;
}
.check_shiftAreaIncidentSectionImg{
    width: 50px;
}
.check_shiftAreaIncidentSectionText{
    font-size: 12px; font-weight: bold;
}
.check_shiftAreaEventSection{
    display: flex;width: 100%;margin: 25px 0px;align-items: center;
}
.check_shiftAreaEventSectionImg{
    width: 50px;
}
.check_shiftAreaEventSectionText{
    font-size: 12px; font-weight: bold;
}
.check_shiftAreaHealthSafetySection{
    display: flex;width: 100%;margin: 25px 0px;align-items: center;
}
.check_shiftAreaHealthSafetySectionImg{
    width: 50px;
}
.check_shiftAreaHealthSafetySectionTextBox{
    display: flex;width: 100%;align-items: center;
}
.check_shiftAreaHealthSafetySectionText{
    width: 50%; font-weight: bold; font-size: 12px
}
.check_shiftAreaHealthSafetySectionStatus{
    background: #FF4646;width: 120px;height: 30px;border-radius: 50px;text-align: center;color: #fff;line-height: 29px;font-size: 10px;
}
.check_shiftAreaMapSection{
    display: flex; justify-content: space-around; align-items: center; width: 100%;  max-width: 1000px;   position: relative; z-index: 0;
}
.check_shiftAreaMapBg{
    width: 100%; height: 500px;
}
.check_shiftAreaMapNotificationIcon{
    border-radius: 8px 8px 0px 0px;
}
.check_shiftAreaMapNotificationLabel{
    padding: 8px 3px 8px 3px; font-size: 11px; font-weight: bold; color: #fff;
}
.check_shiftAreaMapInfoPopupBox{
    background: #fff;width: 600px;padding: 45px;border-radius: 10px;margin-left: 20px;margin-top: 20px;display: flex;flex-flow: row wrap;position: relative;
}
.check_shiftAreaMapInfoPopupBoxClose{
    position: absolute;top: 12px;right: 16px;
}
.check_shiftAreaMapInfoPopupBoxItemBox{
    width: 60%; padding:15px; font-size: 14px; border:1px solid #dadce7;
}
.check_shiftAreaMapInfoPopupBoxItemLabelBox{
    display: flex; margin-bottom: 10px;
}
.check_shiftAreaMapInfoPopupBoxItemLabel{
    width: 80px;
}
.check_shiftAreaMapInfoPopupBoxItemStatusBox{
    width: 40%; padding: 15px; font-size: 14px; border:1px solid #dadce7; border-left: 0px; display: flex; flex-flow: column; justify-content: center;
}
.check_shiftAreaMapInfoPopupBoxItemStatusLabel{
    margin-bottom: 10px;
}
.check_shiftAreaMapInfoPopupBoxItemStatusSublabel{
    margin-top: 10px;
}
.check_shiftAreaMapInfoPopupBoxItemEventBox{
    border:1px solid #dadce7; border-top: 0px; width: 100%; display: flex;
}
.check_shiftAreaMapInfoPopupBoxItemEventItem{
    width: 60%; padding:20px;
}
.check_shiftAreaMapInfoPopupBoxItemEventItemHead{
    font-size: 12px; margin-bottom: 15px; font-weight: bold; display: flex;
}
.check_shiftAreaMapInfoPopupBoxItemEventItemBody{
    font-size: 12px; margin-bottom: 15px; display: flex;
}
.check_shiftAreaMapInfoPopupBoxItemEventItemLeft{
    width: 60%;
}
.check_shiftAreaMapInfoPopupBoxItemEventItemRight{
    width: 40%;
}
.check_shiftAreaMapInfoPopupBoxItemEventButtonBox{
    width: 40%; padding:20px; display: flex; justify-content: center; align-items: center;
}
.check_shiftAreaMapInfoPopupBoxItemEventButton{
    background-image: linear-gradient(to right, #177aff, #2f72ff, #4468ff, #565efe, #6851fb); border: 0px; width: 120px; height: 40px; border-radius: 50px; color: #fff; font-weight: bold;
}
.monitorSpecificTaksSection{
    display: flex; align-items: center;
}
.monitorSpecificTaksSectionLabel{
    width: 250px;
}
.monitorSpecificTaksSectionDropDown{
    width: 200px;
}
.monitorSpecificTaskInfoSection{
    border:1px solid #9EA2B8; display: flex; margin-top: 30px; border-radius: 10px;
}
.monitorSpecificTaskDetailSectionLeft{
    width: 50%; border-right: 1px solid #9EA2B8;
}
.monitorSpecificTaskDetailTaskList{
    padding: 30px 50px; padding-bottom: 0px; font-weight: bold; font-size: 16px;
}
.monitorSpecificTaskDetailTaskListBox{
    display: flex; padding: 5px 0px;
}
.monitorSpecificTaskDetailTaskListBoxLabel{
    width: 100px;
}
.monitorSpecificTaskServiceDeliveredSection{
    padding: 20px 30px; margin-top: 10px;
}
.monitorSpecificTaskServiceDeliveredSectionHead{
    background: #F3F3F3; display: flex; padding: 30px; font-weight: bold;
}
.monitorSpecificTaskServiceDeliveredPadding{
    padding-left: 20px
}
.monitorSpecificTaskServiceDeliveredTeamBox{
    padding: 30px;
}
.monitorSpecificTaskServiceDeliveredTeam{
    display: flex;justify-content: space-between;
}
.monitorSpecificTaskDetailSection{
    padding: 0px 30px; margin-top: 10px;
}
.monitorSpecificTaskDetailSectionHead{
    background: #F3F3F3; display: flex; justify-content: space-between; padding: 30px; font-weight: bold;
}
.monitorSpecificTaskDetailSectionHeadLabel{
    font-size: 12px; font-weight: bold;
}
.monitorSpecificTaskDetailSectionHeadSubLabel{
    font-size: 12px; font-weight: bold;
}
.monitorSpecificTaskDetailSectionHeadSubLabel span{
    padding-right: 10px;
}
.monitorSpecificTaskDetailSectionTableBox{
    padding: 0px 30px;
}
.monitorSpecificTaskDetailSectionTable{
    display: flex; padding: 10px 0px;
}
.monitorSpecificTaskDetailItemBox{
    display: flex; width: 70%
}
.monitorSpecificTaskDetailItemLabel{
    width: 200px;
}
.monitorSpecificTaskPendingAction{
    background: #FF4646; width: 120px; height: 20px; border-radius: 50px; font-size: 10px; color: #fff; text-align: center; line-height: 20px;
}
.monitorSpecificTaskActionedAction{
    background: #53C344; width: 120px; height: 20px; border-radius: 50px; font-size: 10px; color: #fff; text-align: center; line-height: 20px;
}
.monitorSpecificTaskReturnAction{
    background: #FF943C; width: 120px; height: 20px; border-radius: 50px; font-size: 10px; color: #fff; text-align: center; line-height: 20px;
}
.monitorSpecificTaskAttachmentsSection{
    padding: 0px 30px; margin-top: 10px;
}
.monitorSpecificTaskAttachmentsSectionLabel{
    background: #F3F3F3; display: flex; justify-content: space-between; padding: 30px; font-weight: bold;
}
.monitorSpecificTaskAttachmentsSectionLabelText{
    font-size: 12px; font-weight: bold;
}
.monitorSpecificTaskAttachmentsSectionIcon{
    padding: 20px 30px;
}
.monitorSpecificTaskDetailSectionRight{
    width: 50%;
}
.monitorSpecificTaskDetailDateTimeSection{
    display: flex; flex-flow: row nowrap; width: 100%; padding: 10px;
}
.monitorSpecificTaskDetailDateRangeBox{
    display: flex;flex-flow: row nowrap;width: 50%;padding: 20px 0px;padding-left: 10px;align-items: center;
}
.monitorSpecificTaskDetailTimeRangeBox{
    display: flex;flex-flow: row nowrap;width: 50%;padding: 20px 0px;padding-left: 10px;align-items: center;
}
.monitorSpecificTaskDetailDateRangeWrapper{
    display: flex; width: 28%; align-items: center;
}
.monitorSpecificTaskDetailDateRangeInput{
    width: 100%;height: 40px;border: 1px solid #9EA2B8;border-radius: 5px; font-size: 13px;padding-left: 10px;
}
.monitorSpecificTaskDetailDateRangeWrapperIcon{
    width: 20%;
}
.monitorSpecificTaskDetailDateRangelabelBox{
    width: 80%;font-weight: bold;font-size: 14px;margin-top: 3px;padding-left:10px;
}
.monitorSpecificTaskDetailDateRangeInputBox{
    width: 50%;
}
.monitorSpecificTaskDetailDateRangeInputSpace{
    width: 5%; text-align: center; font-weight: bold;
}
.monitorSpecificTaskDetailTimeRangeWrapper{
    display: flex; width: 28%; align-items: center;
}
.monitorSpecificTaskDetailTimeRangeWrapperImg{
    width: 20%;
}
.monitorSpecificTaskDetailTimeRangeWrapperLabel{
    width: 80%;font-weight: bold;font-size: 14px;margin-top: 3px;padding-left:10px;
}
.monitorSpecificTaskDetailMapSection{
    position: relative;
}
.monitorSpecificTaskDetailMapDateInfoBox{
    position: absolute;
    z-index: 1;
    color: #fff;
    right: 25px;
    top: 11px;
    display: flex;
    right: 60px;
    background: #fff;
    color: #000;
    padding: 8px;
    border-radius: 5px;
    cursor: pointer;
}
.monitorSpecificTaskDetailMapDateInfoBoxArrow{
    width: 20px;
}
.monitorSpecificTaskDetailMapDateInfoBoxDate{
    width: 100px; text-align: center;
}
.monitorSpecificTaskDetailMapInfoBox{
    position: absolute;bottom: 0px;left: 0px;right: 0px;width: 100%;height: 150px;background: rgb(0 0 0 / 54%);
}
.monitorSpecificTaskDetailMapInspectionBox{
    display: flex;color: #fff;justify-content: space-between; padding: 10px 20px; width: 100%;
}
.monitorSpecificTaskDetailMapInspectionImg{
    width: 40px;
}
.monitorSpecificTaskDetailMapStatusBox{
    width: 100%; display: flex; padding: 10px 20px;
}
.monitorSpecificTaskDetailMapStatusInnerImgBox{
    width: 10%;
}
.monitorSpecificTaskMapPointMarkImg{
    width: 40px;background:#E84046;height: 40px;border-radius: 50px;border: 2px solid #fff;text-align: center;line-height: 33px;
}
.monitorSpecificTaskMapPointMarkTextBox{
    color: #fff
}
.monitorSpecificTaskMapPointMarkTextBoxLabel{
    font-weight: bold; font-size: 14px;
}
.monitorSpecificTaskMapPointMarkTextBoxSubLabel{
    font-style: italic; font-size: 12px;
}
.map-slider-thumbs{
    list-style: none;padding: 0px;width: 500px;margin: auto;
}
.map-slider-thumbs li{
    display: inline-table;
    width: 24%;
    text-align: center;
}
.monitorSpecificTaskSliderItemBox{
    background: #EDF3FB;width: 100%;padding: 30px 0px;position: relative;border-radius: 0px 0px 10px 0px;
}
.monitorSpecificTaskSliderItemLeftArrow{
    position: absolute; top: 50%; margin-top: -10px; left: 20px; cursor: pointer;
}
.monitorSpecificTaskSliderItemRightArrow{
    position: absolute; top: 50%; margin-top: -10px; right: 20px; cursor: pointer;
}
.monitorSpecificTaskSliderItemText{
    font-size: 12px; text-align: center; padding-top: 10px;
}
.monitorSpecificTaskSliderItemActiveText{
    font-size: 16px; text-align: center; padding-top: 10px; font-weight: bold;
}
 .monitorSpecificTaskApprovalsHead{
    background: #fff; padding: 40px 20px; border-bottom: 1px solid #9EA2B8; display: flex; align-items: center;  border-radius: 10px 0px 0px 0px;
}
.monitorSpecificTaskApprovalsHeadImg{
    margin-right: 20px;
}
.monitorSpecificTaskApprovalsHeadText{
    font-weight: bold; font-size: 14px;
}
.monitorSpecificTaskApprovalsStatusItemBox{
    margin: 20px;padding: 20px;background: #F3F3F3;display: flex;justify-content: space-around;
}
.monitorSpecificTaskApprovalsStatusItem_Incident{
    font-size: 14px; font-weight: bold; width: 130px; height: 35px; border-radius: 10px; display: flex; align-items: center;justify-content: center; border: 2px solid #B5BDCA;position: relative;
}
.monitorSpecificTaskApprovalsStatusItem_IncidentRoundBox{
    position: absolute;top: -10px;right: -10px;width: 20px;height: 20px;background: #FF4646;border:1px solid #979797;border-radius: 50px;
}
.monitorSpecificTaskApprovalsStatusItem_Interruption{
    font-size: 14px; font-weight: bold; width: 130px; height: 35px; border-radius: 10px; display: flex; align-items: center;justify-content: center; border: 2px solid #B5BDCA;position: relative;
}
.monitorSpecificTaskApprovalsStatusItem_InterruptionRoundBox{
    position: absolute;top: -10px;right: -10px;width: 20px;height: 20px;background: #53C344;border:1px solid #979797;border-radius: 50px;
}
.monitorSpecificTaskApprovalsStatusItem_Compliance{
    font-size: 14px; font-weight: bold; width: 130px; height: 35px; border-radius: 10px; display: flex; align-items: center;justify-content: center; border: 2px solid #B5BDCA;position: relative;
}
.monitorSpecificTaskApprovalsStatusItem_ComplianceRoundBox{
    position: absolute;top: -10px;right: -10px;width: 20px;height: 20px;background: #FF943C;border:1px solid #979797;border-radius: 50px;
}
.monitorSpecificTaskApprovalsStatusItem_General{
    font-size: 14px; font-weight: bold; width: 130px; height: 35px; border-radius: 10px; display: flex; align-items: center;justify-content: center; border: 2px solid #B5BDCA;position: relative;
}
.monitorSpecificTaskApprovalsStatusItem_GeneralRoundBox{
    position: absolute;top: -10px;right: -10px;width: 20px;height: 20px;background: #00fff7;border:1px solid #979797;border-radius: 50px;
}
.monitorSpecificTaskIncidentSection{
    border-bottom: 1px solid #DADCE7; border-top: 1px solid #DADCE7; padding: 30px 20px; display: flex; justify-content: space-between;
}
.monitorSpecificTaskIncidentHeadLeftTitle{
    font-weight: bold; font-size: 14px;
}
.monitorSpecificTaskIncidentHeadLeftSubTitle{
    margin-left: 20px;
}
.monitorSpecificTaskIncidentHeadRightTitle{
    font-weight: bold; font-size: 14px;
}
.monitorSpecificTaskIncidentBodyBox{
    padding: 20px;
}
.monitorSpecificTaskIncidentBodyHead{
    display: flex; margin-bottom: 20px
}
.monitorSpecificTaskIncidentBodyLeftBox{
    width: 30%;
}
.monitorSpecificTaskIncidentBodyRightBox{
    width: 70%;
}
.monitorSpecificTaskReportSection{
    border-bottom: 1px solid #DADCE7; border-top: 1px solid #DADCE7; padding: 30px 20px; display: flex; justify-content: space-between; position: relative;
}
.monitorSpecificTaskReportHeadLeft{
    display: flex; align-items: center;
}
.monitorSpecificTaskReportHeadLeftTitle{
    font-weight: bold; font-size: 14px;
}
.monitorSpecificTaskReportHeadRightActionIconBox{
    width: 35px;
}
.monitorSpecificTaskReportHeadRightActionIcon{
    background: #53C344; width: 30px; height: 30px; border-radius: 50px;
}
.monitorSpecificTaskReportHeadRightActionTitleBox{
    width: 60px; font-weight: bold; display: flex;align-items: center; justify-content: center;
}
.monitorSpecificTaskReportHeadRightNavBox{
    display: flex; width: 50px; align-items: center; cursor: pointer;
}
.monitorSpecificTaskReportHeadRightNav{
    background: blue;height: 10px;width: 10px;display: block;border-radius: 50px; margin-left: 5px;
}
.monitorSpecificTaskReportPopupBox{
    position: absolute;background:#fff;padding: 30px;right: 0px;border:1px solid #D5D7DB;border-radius: 5px;box-shadow: 0px 0px 17px -2px rgba(0,0,0,0.20);-webkit-box-shadow: 0px 0px 17px -2px rgba(0,0,0,0.20);-moz-box-shadow: 0px 0px 17px -2px rgba(0,0,0,0.20);
}
.monitorSpecificTaskReportPopupBoxColumn{
    display: flex; margin-bottom: 20px;
}
.monitorSpecificTaskReportPopupBoxColumnCheckInput{
    margin-right: 15px;
}
.monitorSpecificTaskReportPopupBoxColumnCheckInput input{
    width: 20px; height: 20px;
}
.monitorSpecificTaskReportPopupBoxColumnText{
    font-size: 16px; font-weight: bold;
}
.eventDescription{
    width: 100%;
    height: 250px;
    display: flex;
    overflow-x: auto;
}
.monitorSpecificTaskReportDetailSection{
    background: #fff;
    border: 1px solid #DADCE7;
    padding: 30px;
    border-radius: 5px;
    margin: 5px;
    overflow-y: auto;
    max-width: 48%;
    min-width: 48%;
    font-size: 14px;
    position: relative;
}
.opEventSmall{
    font-size: 10px;
    color:#918e8e;
}
.mb10{
    margin-bottom: 10px;
}
.monitorSpecificTaskEvidenceHead{
    font-weight: bold; font-size: 12px; padding:10px 20px;
}
.monitorSpecificTaskEvidenceBody{
    margin: 20px; border: 1px solid #DADCE7; border-radius: 5px; padding: 30px;
}
.monitorSpecificTaskEvidenceBodyImg{
    background: #fff; padding: 20px; border-radius: 5px; border:1px solid #DADCE7; width: 90px; box-shadow: 0px 0px 17px -2px rgba(0,0,0,0.20); -webkit-box-shadow: 0px 0px 17px -2px rgba(0,0,0,0.20);-moz-box-shadow: 0px 0px 17px -2px rgba(0,0,0,0.20);
}
.manageTaskItemListScetion{
    padding: 0px; padding-top: 20px;
}
.manageTaskItemListHead{
    display: flex;
    border-bottom: 1px solid #DADCE7;
    padding-bottom: 20px;
    background: #f1f1f1;
    padding-top: 20px;
}
.manageTaskItemListHeadColumnOne{
    width: 12%; padding-left: 20px;
}
.manageTaskItemListHeadColumnTwo{
    width: 14%;
}
.manageTaskItemListHeadColumnThree{
    width: 12%;
}
.manageTaskItemListHeadColumnFour{
    width: 14%;
}
.manageTaskItemListHeadColumnFive{
    width: 12%;
}
.manageTaskItemListHeadColumnSix{
    width: 12%;
}
.manageTaskItemListHeadColumnSeven{
    width: 12%;
}
.manageTaskItemListHeadColumnEight{
    width: 12%; padding-right: 20px;
}
.manageTaskItemListBody{
    display: flex;border-bottom: 1px solid #DADCE7;align-items: center;
}
.manageTaskItemListBodyStatusBox{
    width: 12%;padding-left: 20px;display: flex;min-height: 60px;align-items: center;
}
.manageTaskItemListBodyStatus{
    width: 20px; height: 20px; border-radius: 50px;
}
.manageTaskItemListBodyStatusText{
    padding-left: 15px;
}
.manageTaskItemListBodyColumnTwo{
    width: 14%;
}
.manageTaskItemListBodyColumnThree{
    width: 12%;
}
.manageTaskItemListBodyColumnThreeLabel{
    font-size: 14px;
}
.manageTaskItemListBodyColumnThreeSubLabel{
    font-style: italic; font-size: 10px;
}
.manageTaskItemListBodyColumnFour{
    width: 14%; font-size: 14px;
}
.manageTaskItemListBodyColumnFive{
    width: 12%; font-size: 14px;
}
.manageTaskItemListBodyColumnSix{
    width: 12%; font-size: 14px;
}
.manageTaskItemListBodyColumnSeven{
    width: 12%; display: flex;
}
.manageTaskItemListBodyColumnSevenReportName{
    background: #3319F3; width: 30px; height: 30px; border-radius: 50px; color: #fff; font-weight: bold; display: flex; align-items: center; justify-content: center; font-size: 9.6px; margin-left: 5px; margin-right: 5px;
}
.manageTaskItemListBodyColumnEight{
    width: 12%; padding-right: 20px; display: flex;
}
.manageTaskItemListBodyColumnEightReportLeftBox{
    width: 90%;
}
.manageTaskItemListBodyColumnEightReportRightBox{
    width: 10%
}
.manageTaskWelfareRuleSection{
    padding: 0px; padding-top: 20px;
}
.manageTaskWelfareRuleItemHead{
    display: flex; align-items: center; border-bottom: 1px solid #DADCE7; padding-bottom: 20px; font-size: 16px; font-weight: bold;
}
.manageTaskWelfareRuleItemHeadColumnOne{
    width: 4%; padding-left: 20px;
}
.manageTaskWelfareRuleItemHeadColumnOne input{
    width: 20px; height: 20px;
}
.manageTaskWelfareRuleItemHeadColumnTwo{
    width: 28%; display: flex; align-items: center;
}
.manageTaskWelfareRuleItemHeadColumnTwoActionBox{
    margin-left: 30px;
}
.manageTaskWelfareRuleItemHeadColumnTwoActionBox button{
    background: #3319F3; height: 40px; color: #fff; border:0px; border-radius: 50px; width: 180px;
}
.manageTaskWelfareRuleItemHeadColumnThree, .manageTaskWelfareRuleItemHeadColumnFour{
    width: 25%;
}
.manageTaskWelfareRuleItemHeadColumnFive{
    width: 20%;
}
.manageTaskWelfareRuleItemBody{
    display: flex; align-items: center; border-bottom: 1px solid #DADCE7;font-size: 16px; position: relative;
}
.manageTaskWelfareRuleItemBodyColOne{
    width: 4%; padding-left: 20px;
}
.manageTaskWelfareRuleItemBodyColOne input{
    width: 20px; height: 20px;
}
.manageTaskWelfareRuleItemBodyColTwo{
    width: 28%; display: flex; align-items: center;
}
.manageTaskWelfareRuleItemBodyColTwoStatus{
    width: 20px; height: 20px; border-radius: 50px;
}
.manageTaskWelfareRuleItemBodyColTwoText{
    margin-left: 10px;
}
.manageTaskWelfareRuleItemBodyColThree{
    width: 25%;
}
.manageTaskWelfareRuleItemBodyColFour{
    width: 25%; padding-left: 40px;
}
.manageTaskWelfareRuleItemBodyColFive{
    width: 20%; padding: 10px 0px
}
.manageTaskWelfareRuleItemBodyColFiveDropDownBox{
    display: flex; width: 200px; border: 1px solid rgb(204 204 204 / 46%); height: 40px; align-items: center; padding: 0px 10px; border-radius: 3px; justify-content: space-between; padding-right: 0px;
}
.manageTaskWelfareRuleItemBodyColFiveDropDown{
    background: #E9EBF4;display: flex;height: 40px;width: 39px;justify-content: center;border-radius: 0px 0px 0px 19px;padding-left: 7px;
}
.manageTaskWelfareRuleApplyRulePopup{
    position: absolute;top: 54px;left: 50%;right: 0px;width: 70%;background: #fff; border: 1px solid #DADCE7; border-radius: 5px; transform: translateX(-50%); z-index: 9
}
.manageTaskWelfareRuleApplyRulePopupInnerBox{
    width: 100%;
}
.manageTaskWelfareRuleApplyRulePopupHead{
    display: flex;justify-content: space-between;width: 100%; padding: 30px; border-bottom: 1px solid #DADCE7; align-items: center;
}
.manageTaskWelfareRuleApplyRulePopupHeadText{
    font-weight: bold;
}
.manageTaskWelfareRuleApplyRulePopupHeadButton{
    background: #3319F3; border:0px; border-radius: 50px; width: 80px; height: 30px; color: #fff;
}
.manageTaskWelfareRuleApplItemBox{
    width: 100%; padding: 30px;
}
.manageTaskWelfareRuleApplItem{
    display: flex; width: 100%; margin-bottom: 20px;
}
.manageTaskWelfareRuleApplItemInputBox{
    width: 50px;
}
.manageTaskWelfareRuleApplItemInputBox input{
    width: 26px; height: 26px;
}
.manageAllStatusManageSection{
    padding: 20px; padding-top: 0px;
}
.manageAllStatusManageSectionInnerBox{
    display: flex; margin-top: 30px;
}
.manageAllStatusManageSectionLeftBox{
    border:1px solid #DADCE7; width: 15%;
}
.manageAllStatusManageLeftNavHead{
    padding: 30px; font-weight: bold;
}
.manageAllStatusManageLeftNav{
    padding: 30px; border-bottom: 1px solid #DADCE7;
}
.manageAllStatusManageLeftNav.active{
    background: #E9EBF4;
}
.manageAllStatusManageSectionRightBox{
    width: 85%;padding: 20px;border: 1px solid #DADCE7;border-left: 0px;
}
.manageAllStatusManageRatingBox{
    display: flex;justify-content: space-between;padding: 20px;
}
.manageAllStatusManageRatingBoxLabel{
    font-weight: bold; font-size: 20px;
}
.manageAllStatusManageRatingBoxRating{
    display: flex; margin-top: 5px;
}
.manageAllStatusManageOptionBox{
    display: flex; width: 50px; cursor: pointer; margin-left: 15px;
}
.manageAllStatusManageOptionIcon{
    background: blue;height: 8px;width: 8px;display: block;border-radius: 50px; margin-left: 5px;
}
.manageAllStatusManageRatingLabel{
    padding: 20px; font-weight: bold;
}
.ratingBoxPadding{
    padding: 20px
}
.ratingBoxUllist{
    margin: 0px;
}
.ratingBoxReportsBurron{
    background: #3319F3; width: 150px; border:0px; border-radius: 50px; height: 45px;
}
.ratingBoxReportsBurron span{
    padding-left: 10px; color: #fff;
}
.manageTaskHalthItemHead{
    padding: 20px; display: flex; background: #F3F3F3;
}
.manageTaskHalthItemHeadCol{
    width: 25%;
}
.manageTaskHalthItemBody{
    display: flex; padding: 20px;
}
.manageTaskHalthItemBodyCol{
width: 25%;
}
.manageTaskHalthItemBodyStatusBox{
margin-top: 12px; margin-bottom: 12px;
}
.manageTaskHalthItemBodyStatusLabel{
font-size: 14px;
}
.manageTaskHalthItemBodyStatusSubLabel{
font-size: 10px;
}
.manageTaskHalthShiftText{
display: flex;align-items: center;
}
.manageShiftTrackSectionTitle{
font-weight: bold; margin-bottom: 20px; padding: 20px;
}
.manageShiftTrackItemHead{
padding: 20px; display: flex; background: #F3F3F3; font-weight: bold;
}.manageShiftTrackItemHeadColOne{
width: 40%;
}
.manageShiftTrackItemHeadColOne{
width: 60%;
}
.manageShiftTrackItemBody{
display: flex; padding: 20px; border-bottom: 1px solid #DADCE7;
}
.manageShiftTrackItemBodyColOne{
width: 40%;display: flex;align-items: center;
}
.manageShiftTrackItemBodyColTwo{
width: 60%;display: flex;align-items: center;
}
.manageAllStatusEventDetailBox{
padding-top: 30px;
}
.manageAllStatusEventDetailInnerBox{
border:1px solid #DADCE7; width: 100%; padding: 20px;
}
.manageAllStatusEventDetailMainBox{
width: 100%; border: 1px solid #DADCE7; background: #F4F6FE; display: flex; padding: 15px; border-radius: 5px; margin-bottom: 15px;
}
.manageAllStatusEventDetailCol{
width: 33.333%
}
.manageAllStatusEventLastColpadding{
padding-left: 20px;
}
.manageAllStatusEventDetailColTitle{
font-size: 16px; font-weight: bold;
}
.manageAllStatusEventDetailColItelCalBox{
width: 100%; margin-top: 40px;
}
.manageAllStatusEventDetailColItelCalOutBox{
display: flex; margin-top: 10px; margin-bottom: 10px;
}
.manageAllStatusEventDetailColItelCalLeft{
width: 30%;
}
.manageAllStatusEventDetailColItelCalRight{
width: 70%;
}
.manageAllStatusEventDetailColItelCalRight.alertText{
color: #FF4646;
}
.manageAllStatusEventDetailColTextarea{
width: 100%; margin-top: 40px; background: #fff; padding: 20px; border-radius: 6px; height: calc(100% - 64px);
}
.manageAllStatusEventActionArea{
width: 100%; margin-top: 40px;padding: 20px; padding-top: 0px;
}
.manageAllStatusEventActionAreaBox{
width: 100%; display: flex; margin-bottom: 10px;
}
.manageAllStatusEventActionAreaCheckBox{
width: 40px
}
.manageAllStatusEventActionAreaButtonBox{
margin-top: 20px
}
.manageAllStatusEventActionAreaButton{
background: rgb(104,81,251);
background: linear-gradient(305deg, rgba(104,81,251,1) 0%, rgba(23,122,255,1) 100%); width: 100px; height: 30px; border:0px; border-radius: 50px; color: #fff; font-weight: bold;
}
.manageAllStatusEventActionedAreaButton{
background: rgb(58,208,133);
background: linear-gradient(69deg, rgba(58,208,133,1) 0%, rgba(91,151,193,1) 100%); width: 100px; height: 30px; border:0px; border-radius: 50px; color: #fff; font-weight: bold;
}
.manageAllStatusShiftActionedAreaButton{
background: rgb(255,162,56);
background: linear-gradient(69deg, rgba(255,162,56,1) 0%, rgba(255,114,72,1) 100%); width: 100px; height: 30px; border:0px; border-radius: 50px; color: #fff; font-weight: bold;
}
.manageAllStatusEventActionAreaActionStatusBox{
    width: 100%; display: flex; margin-top: 40px;
}
.manageAllStatusEventActionAreaActionStatusCol{
    width: 50%;
}
.manageAllStatusEventActionAreaActionLabel{
    font-size: 14px;
}
.manageAllStatusEventActionAreaActionSubLabel{
    font-style: italic; font-size: 10px;
}

.shiftcheck-select-group {
    height: 46px;
    position: relative;
}
.shiftcheck-select-group:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 46px;
    width: calc(100% - 50px);
    background: #EFEFEF;
    z-index: 0;
}
.shiftcheck-select-group:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 43px;
    background-color: #EFEFEF;
    background-image: url(../img/point-dropdown-select.svg);
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    background-size: 24px;
    border-radius: 0px 5px 5px 0px;
}
.shiftcheck-select-group .shift-select {
    width: 100%;
    height: 44px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    font-size: 16px;
    border: none;
    background: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    padding: 5px 15px;
    border-radius: 5px;
    outline: none;
}
.filterManageShiftTaskBar{
    padding: 20px 0px; display: flex; width: 100%; justify-content: space-between; border-bottom:1px solid #DADCE7;
}
.filterManageShiftTaskBarSelectCol{
    width: 200px;
}
.filterManageShiftTaskBarSearchCol{
    padding-left: 40px;
}
.filterManageShiftTaskBarSearchInput{
    background: #DADCE7;
                    min-width: 310px;
                    border: 0px;
                    width: 100%;
                    height: 40px;
                    padding: 20px;
                    color: #fff;
                    border-radius: 5px;
                    padding-right: 42px;
}
.filterManageShiftTaskBarHistoryButon{
    background-color: #DADCE7; width: 180px; height: 45px; border-radius: 5px; border:0px;
}
.border_right{
    border-right: 1px solid #ccc;
}
.add_shift_task_selectShift_searchBox{
    padding: 20px; padding-top: 0px;
}

.add_shift_task_selectShift_searchInput{
    border:1px solid #ccc
}

/* Module 7 */
.dashbordHeaderDropDownCol {
    width: 280px;
}
.dashbord-header-select-group {
    height: 46px;
    position: relative;
}
.dashbord-header-select-group:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 46px;
    width: calc(100% - 50px);
    background: #3C364C;
    z-index: 0;
    border-radius: 5px 0px 0px 5px;
}
.dashbord-header-select-group .shift-select {
    width: 100%;
    height: 44px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    font-size: 16px;
    border: none;
    background: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    padding: 5px 15px;
    border-radius: 5px;
    outline: none;
    color: #fff;
}
.dashbord-header-select-group .shift-select option{
    color: #000;
}
.dashbord-header-select-group:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 46px;
    background-color: #3C364C;
    background-image: url(../img/point-dropdown-select.svg);
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    background-size: 24px;
    border-radius: 0px 5px 5px 0px;
}
.dashbord-body-section-title{
    font-size: 16px; font-weight: bold; padding: 30px
}
.dashbord-body-section-item-col{
    padding: 30px; display: flex;
}
.dashbord-body-section-item-row{
    padding: 30px; width: 33%;
}
.dashbord-body-section-item-head{
    background-color: #EAEAED; display: flex; padding: 15px; padding-top: 40px; padding-bottom: 40px; border-radius: 10px 10px 0px 0px;min-height: 250px;
}
.dashbord-body-section-item-head-img{
    width: 50%;
}
.dashbord-body-section-item-head-text{
    display: flex;width: 50%;justify-content: space-between;align-items: center;
}
.dashbord-body-section-item-head-text-label{
    font-size: 16px;
}
.dashbord-body-section-item-head-text-sublabel{
    font-size: 16px; font-weight: bold; padding-right: 20px;
}
.dashbord-body-section-item-body{
    background-color: #fff; padding: 30px; border-radius: 0px 0px 10px 10px;
}
.dashbord-body-section-item-body-label{
    background-color: #E6ECF6; width: 70%; height:40px; display: flex; align-items: center; padding-left: 20px; font-size: 12px; font-weight: bold;
}
.dashbord-body-section-item-body-text{
    background-color: #E0EBFF; width: 29%; margin-left: 1%; height:40px; display: flex; align-items: center; padding-left: 20px; font-size: 12px; font-weight: bold;
}
.dashbord-body-section-item-body-box{
    margin-bottom: 3px;
}
.dashbord-body-section-item-body-left-label{
    background-color: #E6ECF6; width: 34%; height:40px; display: flex; align-items: center; padding-left: 20px; font-size: 12px; font-weight: bold;
}
.dashbord-body-section-item-body-left-text{
    background-color: #E0EBFF; width: 65%; margin-left: 1%; height:40px; display: flex; align-items: center; padding-left: 20px; font-size: 12px; font-weight: bold;
}
.user_dashbord_section_box{
    display: flex; width: 100%; border: 1px solid #DADCE7; width: 100%;
}
.user_dashbord_section_inner_box{
    background-color: #F8F8F8; border-bottom: 1px solid #DADCE7; width: 100%;
}
.user_dashbord_section_top_head{
    display: flex; align-items: center; padding-top: 10px; padding-bottom: 10px;
}
.user_dashbord_section_top_head_box{
    padding-left: 10px; padding-right: 10px;
}
.userDashbordSecTopHead_calcIcon{
    padding: 10px;
}
.userDashbordSecTopHead_calcText{
    padding: 10px;
}
.userDashbordSecTopHead_calcInput{
    height: 40px; border-radius: 5px; padding: 5px; border:1px solid #DADCE7; background-color: #D4D2E0
}
.userDashbordSecTopHead_PerformanceButton{
    background-color: #3319F3; border: 1px solid #3319F3; border-radius: 50px; color: #fff; font-weight: bold; height: 50px; padding-left: 30px; padding-right: 30px;
}
.userDashbordSecTopHead_AssignmentsButton{
    border: 1px solid #3319F3; border-radius: 50px; font-weight: bold; height: 50px; padding-left: 30px; padding-right: 30px; background-color: transparent; color: #3319F3;
}
.userDashbordSecTopHead_PerformanceButton span, .userDashbordSecTopHead_AssignmentsButton span{
    padding-left: 20px;
}
.user_dashbordSectionContentBox{
    margin: 30px;background: #FBFBFB;box-shadow: 1px 1px 14px 9px rgb(0 0 0 / 6%);-webkit-box-shadow: 1px 1px 14px 9px rgb(0 0 0 / 6%);-moz-box-shadow: 1px 1px 14px 9px rgb(0 0 0 / 6%);border-radius: 15px;border: 1px solid #ccc;border-radius: 10px;
}
.user_dashbordSectionContent_head{
    padding: 30px;background-color: #FBFBFB;border-bottom: 1px solid #ccc;border-radius: 10px 10px 0px 0px; margin: 0px 42px;
}
.user_dashbordSectionContent_headInner{
    display: flex; justify-content: space-between;
}
.content_align{
    align-items: center;
}
.marginLeft60{
    margin-left: 60px;
}
.user_dashbordSectionContent_headText_box{
    padding-left: 20px;
}
.user_dashbordSectionContent_headLabel_box{
    font-weight: bold; font-size: 20px
}
.user_dashbordSectionContent_headSubLabel_box{
    font-size: 16px;
}
.dashbord-body-section-item-row{
    padding: 30px;
}
.dashbord-body-section-item-row-inner{
    border: 1px solid #ccc; border-radius: 10px;
}
.dashbord-body-section-item-row-head{
    background-color: #EAEAED; border-radius: 10px 10px 0px 0px;
}
.dashbord-body-section-item-row-body{
    background-color: #fff; padding: 30px; border-radius: 0px 0px 10px 10px; font-weight: bold;
}
.content_justify{
    justify-content: center;
}
.item_headHeight_set{
    height: calc(100% - 268px);
}
.user_dashbordSectionContent_headSubLabel_Textbox{
    font-weight: bold; font-size: 20px; margin-top: 30px;
}
.dashbord-body-section-item-body-left-Box{
    width: 60%
}
.dashbord-body-section-item-body-right-Box{
    width: 40%;flex-flow: column;display: flex;
}
.dashbord-body-section-item-body-left-normal-text{
    font-size: 16px;
}
.dashbord-body-section-item-body-left-normal-text span{
    font-size: 20px; font-weight: bold;
}
.dashbord-body-section-item-body-right-download-text{
    margin-bottom: 10px; font-size: 16px; font-weight: bold;
}
.dashbord-body-section-row-col{
    width: 100%; padding-left: 40px; padding-right: 40px
}
.border_none{
    border:0px;
}

.shift_member_image_box{
    width: 60px; height: 60px; border-radius: 50px; overflow: hidden;
}
.radio_squre_wrapper label {
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.radio_squre_wrapper label input {
    position: absolute;
    left: -9999px;
}
.radio_squre_wrapper label span {
    display: flex;
    align-items: center;
    border-radius: 99em;
    transition: 0.25s ease;
    width: 25px;
    height: 25px;
}
.radio_squre_wrapper label input:checked + span:before {
    box-shadow: inset 0 0 0 1em #3319f3;
}
.radio_squre_wrapper label span:before {
    display: flex;
    flex-shrink: 0;
    content: "";
    width: 22px;
    height: 22px;
    border-radius: 98%;
    transition: 0.25s ease;
    box-shadow: inset 0 0 0 0.125em #3319f3;
}
.radio_squre_wrapper.green_box label input:checked + span:before {
    box-shadow: inset 0 0 0 1em #3FB92E !important;
}
.radio_squre_wrapper.green_box label span:before{
    box-shadow: inset 0 0 0 0.125em #3FB92E !important;
}


.radio_squre_wrapper.red_box label input:checked + span:before {
    box-shadow: inset 0 0 0 1em #F25757 !important;
}
.radio_squre_wrapper.red_box label span:before{
    box-shadow: inset 0 0 0 0.125em #F25757 !important;
}
.shift_member_item_box{
    padding: 20px 50px; margin-bottom: 30px;
}
.shift_member_head_box{
    justify-content: space-between; padding: 40px 20px; margin: 22px 0px; align-items: center; border-bottom:1px solid #DADCE7; border-top:1px solid #DADCE7; margin-bottom: 20px;
}
.shift_member_head_left_box{
    padding-right: 20px; font-weight: bold;
}
.padding_right20{
    padding-right: 20px;
}
.font_bold{
    font-weight: bold;
}
.shift_member_detail_textBox{
   /* padding-left: 20px; padding-right: 20px;*/
}
.shift_member_detail_input_box{
    height: 150px; background-color: #E9EBF4; width: 100%; border: 1px solid #C1D0D7;
}
.shift_member_action_box{
    /*padding-left: 20px; padding-right: 20px;*/ margin-top: 20px;
}
.shift_member_action_button{
    color: #fff; width: 150px; border:0px; height: 40px; border-radius: 50px;
}
.gradient_blue{
    background: rgb(23,122,255);  background: linear-gradient(143deg, rgba(23,122,255,1) 0%, rgba(104,81,251,1) 100%);
}
.gradient_green{
    background: #3AD085; background: linear-gradient(143deg, #3AD085 0%, #5B97C1 100%);
}
.shift_member_progress_head{
    font-size: 16px; font-weight: bold; margin-top: 30px
}
.margin_top20{
    margin-top: 20px;
}
.shift_member_checkBox{
    width: 20px; height: 20px;
}

/* Communications */
.dashboard_top_main_head_title{
    padding-left: 30px;
}
.dashboard_top_main_head_date_info{
    font-size: 20px; font-weight: bold;
}
.dashboard_top_main_head_date_box{
    text-align: right;
}
.dashboard-section-wrapper{
    padding: 40px;
}
.dashboard-row-item-col-box{
    border-radius: 15px; padding:10px; width: 50%;
}
.dashboard-row-item-col-border{
    border:1px solid #DADCE7; border-radius: 15px;
}
.dashboard-row-item-col-head{
    background-color: #EAEAED; padding: 10px; border-radius: 15px 15px 0px 0px; border-bottom: 1px solid #DADCE7;
}
.dashboard-row-item-col-graph-box{
    padding: 15px;
}
.user_chat_info_section{padding: 0px; border: 1px solid #DADCE7;}
.dashboard-section-head-label{font-size: 16px;}
.dashboard-section-wrapper-box{margin-bottom: 50px;}
.dashboard-section-head-sublabel{font-size: 12px;}
.dashboard-row-item-col-section{margin: 0px -10px}
.dashboard-row-item-col-body{padding: 30px 10px; border-radius: 0px 0px 15px 15px;}
.content_justify_space{justify-content: space-between;}
.dashboard-row-item-col-body-col-one{width: 34%; border-right:1px solid #DADCE7; padding: 0px 20px}
.dashboard-row-item-col-body-col-two{width: 23%; border-right:1px solid #DADCE7; padding: 0px 20px}
.dashboard-row-item-col-body-col-three{width: 30%; border-right:1px solid #DADCE7; padding: 0px 20px}
.dashboard-row-item-col-body-col-four{width: 13%; padding: 0px 20px;}
.dashboard-row-item-col-body-col-label{font-size: 12px;}
.dashboard-row-item-col-body-col-sublabel{font-size: 14px; margin-top: 15px;}
.dashboard-row-item-col-body-full-col{padding: 0px 20px; font-size: 16px;}
.dashboard-row-item-col-body-full-col-link{padding: 0px 20px;}
.dashboard-row-item-full-col-box{border-radius: 15px; padding:10px; width: 100%;}
.full_width{width: 100%;}
.padding_none{padding: 0px !important; }
.user_chat_head_item{background-color: #322c43; padding: 10px 20px; margin: 10px; border-radius: 10px; width: 200px; flex: 0 0 auto;}
.user_chat_head_item_status{width: 10px; height: 10px; border-radius: 50%; border: 0px; background-color: #B1B1B1;}
.user_chat_head_item_status.active{background-color: #11E826;}
.user_chat_head_item_name{margin-left: 15px;}
.chat_user_top_main_col_one{width: 10%; padding-left: 20px;}
.chat_user_name_list_box{width: 80%; padding: 0px 10px; overflow-x: scroll; display: flex; flex-wrap: nowrap;}
.chat_user_name_list_left_arrow{padding: 0px 20px;}
.chat_user_name_list_right_arrow{padding: 0px 20px;}
.chat_user_name_list_item_box{width: 90%}
.user_chat_left_box{background-color: #FBFBFB; width: 25%; max-width: 350px; border-right: 1px solid #DADCE7; padding-top: 30px;}
.user_chat_user_info_wrapper{width: 70px;height: 70px; border-radius: 50%;margin-left:10px;padding: 4px; background: #D1D0E5;}
.user_chat_user_info_wrapper.online{background: rgb(85,225,68); background: linear-gradient(117deg, rgba(85,225,68,1) 0%, rgba(255,214,102,1) 48%, rgba(204,81,178,1) 100%);}
.user_chat_user_info_wrapper_outBox{width: 62px;height: 62px;background-color: #3C364C;border-radius: 50%;margin: auto; padding: 4px; font-size: 25px; color: #fff; font-weight: bold; display: flex; justify-content: center; align-items: center; position: relative;float: left}
.user_chat_user_info_wrapper.online .user_chat_user_info_wrapper_outBox{background-color: #3F39F3}
.user_chat_user_info_active_icon{position: absolute;width: 20px;height: 20px;border-radius: 50%; border: 4px solid #fff;top: -4px;right: 0px; background-color: #B1B1B1}
.user_chat_user_info_wrapper.online .user_chat_user_info_active_icon{ background-color: #11E826;}
.user_chat_left_activeUser_box{/*height: calc(100vh - 733px);*/ overflow-y: scroll;height: 100%}
.user_pic_info_box{padding: 0px; position: relative;}
.user_pic_info_box_inner{padding: 0px; border:0px;}
.user_pic_info_box_img{width: 62px; height: 62px; border-radius: 50%;}
.add_chat_user_group_box{height: 180px;}
.add_chat_user_group_inner_box{width: 65px; height: 65px; background-color: #3F39F3; border-radius: 50%;}
.online_user_chat_info_box{height: 150px; border-top: 1px solid #D6D5E0; padding: 20px; text-align: center;}
.online_user_chat_img_box{padding: 0px; position: relative; width: 65px; height: 65px; border-radius: 50%; margin: auto; margin-bottom: 10px;}
.online_user_chat_img{width: 65px; height: 65px; border-radius: 50%;}
.online_user_chat_Labrl{font-size: 13px; font-weight: bold;}
.online_user_chat_subLabrl{font-size: 12px; color: #B7B6BF}
.chat_left_user_group_poup{position: absolute; background: #fff; padding: 20px; left: 0px; min-width: 350px; border-radius: 20px 20px 20px 20px; z-index: 99; width: 100%; top: 0px; box-shadow: 1px 1px 17px -9px rgb(0 0 0 / 77%); -webkit-box-shadow: 1px 1px 17px -9px rgb(0 0 0 / 77%); -moz-box-shadow: 1px 1px 17px -9px rgb(0 0 0 / 77%);}
/*.chat_left_user_group_poup:before { content: ""; position: absolute; width: 0; height: 0; bottom: 22px; left: 0; box-sizing: border-box; border: 1em solid black; border-color: transparent transparent #fff #ffff; transform-origin: 0 0; transform: rotate(38deg); box-shadow: -3px 4px 4px 0 rgb(0 0 0 / 8%); -webkit-box-shadow: -3px 4px 4px 0 rgb(0 0 0 / 8%); -moz-box-shadow: -3px 4px 4px 0 rgb(0 0 0 / 8%); z-index: 9;}*/
.add_group_user_popup_close_box{width: 100%; display: table; margin-bottom: 20px;}
.add_group_user_popup_close_right{float: right;}
.create_chat_group_saveButton{padding:10px 20px; border-radius: 50px; border:0px}
.add_group_user_popup_left_list{width: 100%; max-width: 450px;}
.add_group_user_popup_input_box{margin: 30px 0px;}
.add_group_user_popup_input{background-color: #FBFBFB; border: 1px solid #DADCE7; height: 40px; width: 100%; font-size: 16px; border-radius: 10px; max-width: 500px; padding-left: 10px;}
.add_group_user_addList_box{border-top: 1px solid #DADCE7; border-bottom: 1px solid #DADCE7; padding: 20px 0px;}
.add_group_user_info_addBox{background: #E9EBF4; padding:18px 25px; border-radius: 10px; width: 220px; position: relative; margin-top: 15px; margin-bottom: 15px;}
.add_group_user_info_delete_box{position: absolute; right: -10px; top: -10px;}
.add_group_user_img_addBox{width: 50px; height:50px; border-radius: 50%;}
.add_group_user_text_showBox{font-size: 12px}
.add_group_user_popup_right_list{width: 100%; max-width: 280px; margin-right: 50px; margin-top: 30px;}
.add_group_user_popup_right_list_inner{padding: 20px 0px; height: 350px; overflow-y: scroll;}

.select_chat_user_item{padding: 20px 0px; margin: 10px 0px; margin-top: 0px; border-bottom: 1px solid #DADCE7;}
.select_chat_user_item:first-child{border-top: 1px solid #DADCE7;}
.select_chat_user_item_checkbox{width: 25px; height: 25px;}
.select_chat_user_item_img{width: 65px; height: 65px; border-radius: 50px}
.select_chat_user_item_detail{font-size: 13px;}
.user_chat_baar_head{padding: 20px 30px; background-color: #F8F8F8; border-bottom: 1px solid #DADCE7; position: relative;}
.user_chat_baar_head_label{font-size: 13px; font-weight: bold; margin-bottom: 5px;}
.user_chat_baar_head_sublabel{font-size: 10px; color: #B7B6BF; margin-bottom: 5px;}
.user_chat_baar_head_userBox{border:5px solid #fff; position: relative; margin-left:-10px;  border-radius: 50%; overflow: hidden;}
.user_chat_baar_head_userBox:first-child{margin-left: 0px;}
.user_chat_baar_head_user_img{width: 45px; height: 45px;}
.show_chatGroup_user_box{position: absolute; background: #fff; padding: 20px; right: 10px; min-width: 500px; border-radius: 20px; z-index: 99}
.show_chatGroup_close_box{width: 100%; display: table; margin-bottom: 20px;}
.show_chatGroup_head_box{padding: 20px 0px; border-bottom: 1px solid #DADCE7; border-top: 1px solid #DADCE7; position: relative;}
.show_chatGroup_head_label{font-size: 13px; font-weight: bold;}
.show_chatGroup_head_sublabel{color: #B7B6BF; font-size: 13px; margin-top: 10px;}
.show_chatGroup_head_editButton{position: absolute; top: 50%; margin-top: -20px; height: 40px; width: 40px; border-radius: 50px; right: 5px; background-color: #E9EBF4; border: 1px solid #DADCE7;}
.show_chatGroup_title_box{font-size: 13px; padding: 20px 0px; border-bottom: 1px solid #DADCE7;}
.show_chatGroup_userItem{padding: 20px 0px; margin: 10px 0px; margin-top: 0px; border-bottom: 1px solid #DADCE7;}
.margin_right20{margin-right: 20px;}
.show_chatGroup_userItem_img{width: 65px; height: 65px; border-radius: 50px}
.show_chatGroup_item_users{max-height: 350px; overflow-y: scroll;}
.action_show_chatGroup_box{border-bottom: 1px solid #DADCE7; padding-bottom: 25px; margin-top: 20px;}
.action_show_chatGroup_icon{background-color: #E9EBF4; width: 50px; height: 50px; border-radius: 50px; border: 1px solid #DADCE7;}
.action_show_chatGroup_label{padding-left: 20px;}
.show_chatGroup_user_dateRange_box{position: absolute; bottom: -156px; left: -250px; z-index: 999; background-color: #F7F7F7; border:1px solid #DADCE7; padding: 10px 20px;}
.show_chatGroup_user_dateRange_label{padding: 30px 0px; border-bottom: 1px solid #DADCE7;}
.show_chatGroup_user_dateRange_col{padding: 0px 10px;}
.show_chatGroup_user_dateRange_input{width: 100px;}
.show_chatGroup_close_button{float: right;}
.chat_user_conversation_box{padding: 30px; overflow-y: auto;height: 600px;display: flex;flex-direction: column-reverse;}
.chat_user_conversation_dateBox{width: 100%; display: table; text-align: center; font-size: 9px; color: #B7B6BF; margin-top: 10px; margin-bottom: 10px;}
.chat_user_conversation_itemBox{width: 100%; display: table;padding-bottom: 30px;padding-top: 15px;}
.chat_user_conversation_leftItem{float: left; max-width: 300px; background-color: #EEEEEF; padding: 20px; border-radius: 15px; position: relative;}
.chat_user_conversation_rightItem{float: right; max-width: 300px; background-color: #fff; padding: 20px; border-radius: 15px; position: relative;min-width: 200px}
.chat_user_conversation_leftItem_imgBox{width: 45px;height: 45px;overflow: hidden;border-radius: 50px;position: absolute;left: -20px;top: -20px;border: 4px solid #fff;}
.chat_user_conversation_leftItem_img{border:2px solid #fff;}
.chat_user_conversation_leftItem_title{font-size: 10px; color: #B7B6BF}
.chat_user_conversation_leftItem_text, .chat_user_conversation_rightItem_text{font-size: 13px;}
.chat_user_conversation_leftItem_date{font-size: 10px; color: #B7B6BF; position: absolute; bottom: 4px; right: 13px;}
.chat_user_conversation_rightItem_time{font-size: 10px; color: #B7B6BF; margin-top: 10px;}
.chat_user_conversation_rightItem_name{font-size: 10px;color: #B7B6BF;position: absolute;bottom: 6px;right: 32px;}
.chat_user_conversation_rightItem_imgBox{width: 45px;height: 45px;overflow: hidden;border-radius: 50px;position: absolute;right: -20px;bottom: -20px;border: 4px solid #fff;}
.chat_user_conversation_rightItem_img{border:2px solid #fff;}
.chat_user_conversation_startBox{border-top: 1px solid #D6D5E0;}
.chat_user_conversation_startBox_inner{width: 90%; border-right: 1px solid #D6D5E0; height: 100px;}
.chat_user_conversation_startBox-col-one{padding: 0px 30px; width: 100%;}
.chat_user_conversation_startBox-col-two{padding: 0px 30px; width: 10%;}
.chat_user_conversation_startBox-col-three{padding: 0px 30px; width: 10%;}
.chat_user_conversation_startBox-col-four{padding: 0px 30px; width: 10%;}
.chat_user_conversation_startBox-emoje{width: 10%; text-align: center;}
.chat_user_conversation_startBox_input{width: 100%; height: 80px; border: 1px solid #D6D5E0; border-radius: 8px; padding-left: 20px; padding-right: 20px;}
.show_chatGroup_user_adduser_box{
    /*position: absolute;*/
    /*bottom: -492px;*/
    /*right: 90px;*/
    /*z-index: 999;*/
    background-color: #F7F7F7;
    /*border: 1px solid #DADCE7;*/
    /*padding: 10px 20px;*/
    padding: 0px 10px;
    border: 1px solid #DADCE7;
    border-top: 0px;
    width: 100%;}
.show_chatGroup_user_addUser_inner{margin-top: 30px; width: 100%; padding-left: 30px;}
.user_left_recoding_box{padding: 10px; border-radius: 0px 50px 50px 50px; height: 50px; margin-top: 30px; margin-left: 25px; background-color: #D3DCE3;}
.user_left_recoding_box:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: -22px;
    left: 3px;
    box-sizing: border-box;
    border: 1em solid black;
    border-color: transparent transparent #D3DCE3 transparent;
    transform-origin: 0 0;
    transform: rotate(
        45deg);
    z-index: 9;
}
.user_right_recoding_box{
    padding: 10px; border-radius: 50px 0px 50px 50px; height: 50px; margin-top: 30px; margin-right: 25px; background-color: #4F5590;
}
.user_right_recoding_box:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: -22px;
    right: -24px;
    box-sizing: border-box;
    border: 1em solid black;
    border-color: transparent #4F5590 transparent transparent;
    transform-origin: 0 0;
    transform: rotate(
        41deg);
    z-index: 9;
}
.user_chat_recoding_left_activeUser_box{height: calc(100vh - 408px); overflow-y: scroll;}
.user_chat_recoding_message_box{padding: 80px 0px; border-bottom: 1px solid #D6D5E0; flex-flow: column;}
.user_chat_recoding_message_detail{color: #1E1E1E; font-size: 16px; text-align: center; margin-top: 20px}
.background_none{background-color: transparent;}
.flex_flow_column{flex-flow: column;}
.user_recoding_call_time_text{text-align: center; margin-top: 10px; font-size: 14px; color: #B7B6BF;}
.user_left_call_duration_text{margin-right: 30px;}
.user_right_call_duration_text{margin-left: 25px; color: #fff;}
.user_call_recoding_pic{width: 65px; height: 65px; border-radius: 50%;}

/* NOTIFICATIONS */
.notification_section_area{padding-left: 10px; padding-right: 30px; padding-top: 40px; padding-bottom: 30px;}
.notification_item{align-items: stretch; margin-bottom: 15px;}
.notification_checkbox_col{width:40px; padding-left: 5px;}
.notification_select_input{width: 20px; height: 20px;}
.notification_number_col{width:40px; background-color: #EBECF3; width: 40px;background-color: #EBECF3;text-align: center;justify-content: center;margin-right: 2px;}
.notification_text_col{width: calc(100% - 300px); background-color: #EBECF3; padding-left: 20px; margin-right: 2px;}
.notification_options_box{width: 228px;}
.notification_options_icon{padding-left: 20px; padding-right: 20px; background-color: #EBECF3; height: 80px; margin-right: 2px;}
.notification_option_text{margin-top: 5px; color: #474747}
.notification_sortby_option_box{background-color: #f8f8f8; border-bottom: 1px solid #D5D7DB; padding: 10px;}
.notification_sortby_option_select_box{width:120px;}
.notification_sortby_option_select_box input{width: 20px; height: 20px;}
.notification_sortby_option_managerbutton_box{width:180px;}
.notification_sortby_option_managerbutton{background-color: #3319F3; color: #fff; width: 140px; border-radius: 50px; border:0px; height: 40px;}
.notification_sortby_optionText_box, .notification_sortby_option_date_box, .notification_sortby_option_incidents_box{width:120px;}
.notification_sortby_input_button{width: 20px; height: 20px;}
.notification_sortby_option_interruptions_box{width:160px;}
.notification_sortby_option_welfarechecks_box{width:180px;}
.notification_sortby_option_shifts_box{width:160px;}
.notification_screen_section{padding: 30px; padding-bottom: 0px;}
.notification_screen_inner{border: 1px solid #DADCE7; position: relative;}
.notification_top_head_option{background-color: #1A132C; padding: 20px}
.notification_top_head_button_box{margin:0px 20px;}
.notification_top_head_input_button{background-color: #3319F3; color: #fff; width: 140px; border-radius: 50px; border:0px; height: 40px;}
.notification_top_head_input_client_button{background-color: #6c687c; width: 120px; color: #fff; border-radius: 50px; border:0px; height: 40px;}
.notification_top_head_security_button{background-color: #6c687c; color: #fff; width: 175px; border-radius: 50px; border:0px; height: 40px;}
.notification_top_head_red_box{background-color: #FF5150; width: 20px; height: 20px; border-radius: 50%; position: absolute; top: -10px; right: 0px;}

/* SETTINGS */
.profile_setting_section{padding: 30px; padding-bottom: 0px;}
.profile_setting_innerBox{background-color: #FBFBFB; border: 1px solid #DADCE7; padding: 80px 50px; border-radius: 10px; position: relative;}
.profile_setting_left_box{width: 80%;}
.profile_setting_right_box{width: 20%;text-align: center;flex-flow: column;justify-content: space-between;}
.setting_input_wrapper{margin-bottom: 50px}
.setting_input_label{width: 300px;}
.setting_input_textBox{width: 100%;}
.profile_setting_input_tag{height: 40px; width: 100%; max-width: 340px; border-radius: 8px; border:1px solid #DADCE7; background-color: #FBFBFB; padding-left: 10px;}
.profile_setting_edit_box{border-radius: 0px 10px 0px 50px; position: absolute; top: 0px; right: 1px; background: #e9ebf4; z-index: 99; width: 50px; height: 50px; text-align: right; padding-top: 9px; padding-right: 10px;}
.profile_setting_img_prev{background-color: #fff; padding:20px; width: 150px; height: 160px; border-radius: 15px;}
.profile_setting_upload_box{margin-top: 10px; color: #B7B6BF;}
.profile_setting_upload_icon{margin-right: 10px}
.profile_setting_right_inputBox{margin: auto;margin-top: 10px;width: 120px;}
.profile_setting_right_inputcompany_code{height: 50px;width: 120px;text-align: center;border: 1px solid #DADCE7;border-radius: 6px;}
.profile_setting_right_company_nameLabel{color: #9E9E9E}
.profile_setting_right_inputcompany_box{margin-top: 20px;}
.profile_save_buttonBox{text-align: right;}
.profile_saveinfo_button{height: 40px; width: 120px; background-color: #e9ebf4; color: #000; border-radius: 50px; border:0px;}
.profile_saveinfo_button_icon{padding-right: 10px;}

/* Assignments */
.filterShowAllPendingBox{display: flex; align-items: center;}
.filterShowAllPendingInnerBox{max-width: 100%;padding-left: 20px; padding-right: 20px; text-align: center; color: #3319F3;}
.filterShowAllPendingSelectBox{max-width: 100%;width: 350px;}
.filterMostAssignmentBox{display: flex;}
.filterRecentAssignmentBox{display: flex;align-items: center; margin-right: 50px;}
.filterRecentAssignmentLabel{margin-right: 20px;}
.filterNewAssignmentBox{display: flex;align-items: center;}
.filterNewAssignmentLabel{margin-right: 10px;}
.sift_item_report{
    padding-top: 30px;
}
.sift_item_report.pending .sift_item_report_noticeboard{background: #4CA1F1;}
.sift_item_report.pending .sift_item_report_form_submit{background-color: #3319F3; border-color: #3319F3;}

.sift_item_report.assigned .sift_item_report_noticeboard, .sift_item_report.acknowledged .sift_item_report_noticeboard{background: #FF9D0D;}
.sift_item_report.assigned .sift_item_report_form_submit, .sift_item_report.acknowledged .sift_item_report_form_submit{background-color: #42C47E; border-color: #42C47E;}

.sift_item_report.accomplished .sift_item_report_noticeboard{background: #42C47E;}
.sift_item_report.accomplished .sift_item_report_form_submit{background-color: #42C47E; border-color: #42C47E;}

.sift_item_report.recalled .sift_item_report_noticeboard{background: #FF5454;}
.sift_item_report.recalled .sift_item_report_form_submit{background-color: #42C47E; border-color: #42C47E;}
.sift_item_report.recalled .sift_item_report_form_cancel{background-color: #FF5454; border-color: #FF5454; color: #fff}

.sift_item_report_innerBox{
    width: 100%;border: 1px solid #DADCE7; background: #F4F6FE; display: flex; padding: 15px; border-radius: 5px; margin-bottom: 15px; position: relative; padding-top: 50px; padding-bottom: 40px;
}
.sift_item_report_noticeboard{
    position: absolute;right: 0px; width: 150px;top: 0px;height: 40px;border-radius: 0px 0px 0px 58px;text-align: center;line-height: 40px;color: #fff;
}
.sift_item_report_col{
    width: 33.33%; padding-left: 30px; padding-right: 30px;
}
.sift_item_report_title{
    font-weight: normal; font-size: 18px;
}
.sift_item_report_subtitle{
    font-weight: normal; font-style: italic; font-size: 10px;
}
.sift_item_report_input{
    width: 100%; margin-top: 20px; background: #fff; padding: 20px; border-radius: 6px;    height: 150px;
}
.sift_item_report_formBox{
    display: flex;justify-content: space-between;align-content: center;align-items: center; background-color: #D5D7E1; padding: 15px; border-radius: 8px; margin-top: 8px
}
.sift_item_report_form_submit{
    color: #fff;width: 120px;height: 40px;border-radius: 50px; border: 2px solid;
}
.sift_item_report_form_cancel{
    background-color: #D5D7E1;color: #3319F3;width: 120px;height: 40px;border-radius: 50px; border: 2px solid #3319F3
}
.sift_item_report_progress_title{
    font-weight: normal; font-size: 16px; margin-bottom: 10px
}
.sift_item_report_progressBox{
    background-color: #D8D8D8; width: 100%; height: 10px; border-radius: 20px; max-width: 300px;
}
.sift_item_report_progressInnerBox{
    height: 10px; background-color: #38BD17; border-radius: 20px
}
.sift_item_report_table{
    margin-top: 30px
}
.sift_item_report_table_title{
    font-size: 20px; font-weight: bold; font-style: normal;
}
.sift_item_report_table_colStatus{
    display: flex;width: 100%;justify-content: space-between; margin-top: 25px; padding-bottom: 15px; border-bottom: 1px solid #DADCE7;
}
.sift_item_report_tableCol{
    display: flex; justify-content: space-between; width: 100%; font-size: 13px; padding-bottom: 10px; padding-top: 10px; border-bottom: 1px solid #DADCE7;
}
.sift_item_report_assessedBox{
    display: flex;flex-flow: wrap;
}
.sift_item_report_assessedButton{
    display: flex;
    margin-top: 6px;
    padding-left: 20px;
    height: 20px;
    width: 50px;
}
.sift_item_report_assessedButton_line{
    width: 8px; height: 8px; background-color: #3319F3; border-radius: 50%; margin-right: 5px;
}

/* Client Dashboard */
.user_task_trackingBox{margin: 0px -5px;}
.user_task_tracking_item{max-width: 350px; padding-right: 20px; padding-right: 20px;}
.user_task_tracking_itemHead{background-repeat: no-repeat; padding: 20px; border-radius: 8px 8px 0px 0px; position: relative;}
.user_task_tracking_itemOverlay{position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; background: rgb(0 0 0 / 34%); border-radius: 8px 8px 0px 0px;}
.user_task_tracking_itemInner{position: relative; z-index: 99; color: #fff;}
.user_task_tracking_itemHeadTitle{margin-bottom: 20px; padding-right: 50px; font-size: 18px;}
.user_task_tracking_itemHeadItemBox{margin-bottom: 5px;}
.user_task_tracking_itemHeadItemIcon{padding-right: 10px;}
.user_task_tracking_itemBody{padding: 20px;border-radius: 0px 0px 8px 8px;}
.user_task_tracking_itemBodyLabel{font-size: 16px; font-weight: bold; color: #fff;}
.user_task_tracking_itemBodySubLabel{font-size: 10px; color: #fff; margin-top: -5px;}
.user_task_tracking_itemBodyRightBox{color: #fff; font-weight: bold;}
.user_task_tracking_itemBodyRightLabel{margin-right: 10px;}
.bg_green{background-color: #0acc2c; }
.bg_red{background-color: #fc3e29;}
.bg_blue{background-color: #0570ff;}
.userTaskTrackingItemViewButtonBox{margin-top: 40px; text-align: right; float: right;}
.userTaskTrackingItemViewButton{background: rgb(27,120,254); width: 180px; text-align: center; color: #fff; font-weight: bold; height: 45px; background: linear-gradient(102deg, rgba(27,120,254,1) 0%, rgba(101,83,251,1) 100%); border-radius: 30px; border:0px;}
.loginLogo {
    width: 100px;
    height: 100px;
    border-radius: 5px;
    background-color: #fff !important;
    background-repeat: no-repeat !important;
    background-size: 100% !important;
    background-position: 50% !important;
    color: #3219f2;
    text-align: center;
    line-height: 100px;
    font-size: 40px;
}

/* SETTINGS MODULES */
.company_model_section{padding: 20px; margin: 25px; border-radius: 8px;}
.company_model_headTitle{margin-bottom: 40px; margin-top: 20px; font-size: 20px;}
.company_model_item{
    width: 100%; display: flex; border-bottom: 1px solid #ccc; margin-bottom: 60px; padding-bottom: 60px; flex-wrap: wrap;
}
.company_model_item:last-child{
    border-bottom: 0px;
    margin-bottom: 0px;
}
.company_model_item_left{
    width: 25%; padding-right: 30px;
}
.company_model_item_left_title{
    font-size: 25px; color: #fff; background-color: #3319F3; height: 84px; line-height: 84px; text-align: center; border-radius: 0px 0px 15px 15px; font-weight: 600;
}
.company_model_item_left_price{
    margin-top: 10px; text-align: center; font-size: 25px; font-weight: 600;
}
.company_model_item_left_shortDetail{
    margin-top: 30px; text-align: center; color: #474747
}
.company_model_item_left_option{
    margin-top: 20px; text-align: center;
}
.company_model_item_left_buttonBox{
    margin-top: 20px; text-align: center;
}
.company_model_item_left_button{
    border: 1px solid #3319F3; color: #3319F3; display: block; width: 120px; height: 40px; line-height: 38px; margin: auto; border-radius: 50px;
}
.company_model_item_right{
    width: 75%;
}
.company_model_item_right_title{
    font-size: 25px; color: #1A132C; font-weight: bold;
}
.company_model_item_right_detail{
    margin-top: 30px; font-size: 16px; color: #474747; width: 75%;
}
.company_model_item_right_item{
    box-shadow: -1px 0px 31px -8px rgba(0,0,0,0.57); -webkit-box-shadow: -1px 0px 31px -8px rgba(0,0,0,0.57);-moz-box-shadow: -1px 0px 31px -8px rgba(0,0,0,0.57); padding: 30px; border-radius: 15px; margin-top: 30px;
}
.company_model_item_right_item_title{
    font-size: 25px; font-weight: bold;
}
.company_model_item_right_item_detail{
    margin-top: 20px; width: 80%;
}
.company_model_item_right_itemList{
    display: flex;margin-left: -10px;flex-wrap: wrap; margin-top: 30px;
}
.company_model_item_right_itemList_Box{
    /*display: flex;*/
    justify-content: space-around;
    border:1px solid #ccc;
    border-radius: 5px;
    /*height: 50px;*/
    align-items: center;
    width: 48%;
    margin-left: 10px;
    margin-bottom: 10px;
    cursor:pointer;
    padding: 10px;
}
.company_model_item_right_itemList_Box:hover, .company_model_item_right_itemList_Box.active{
    background-color: #3219f22b;
}

.checkboxesSwitch {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    display: inline-block;
    width: 2.8em;
    height: 1.4em;
    margin: -.2em 0;
    box-sizing: content-box;
    padding: 0;
    border: none;
    border-radius: .7em;
    background: rgba(160,160,160,0.7);
    box-shadow: 0 .15em .25em rgba(0,0,0,0.5) inset, 0 -.5px 0 rgba(255,255,255,0.2) inset;
    transition: background-color 250ms ease, box-shadow 250ms ease;
    font-size: 100%;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    user-select: none;
    outline: none;
}
.checkboxesSwitch::before {
    content: '';
    display: flex;
    align-content: center;
    justify-content: center;
    position: absolute;
    width: 1em;
    height: 1em;
    left: 0;
    top: 0;
    background: #ffffff;
    box-shadow: 0 1px 1px #fff inset, 0 .2em .5em rgba(255,255,255,0.7) inset, 0 -.2em .3em rgba(0,0,0,0.2) inset, 0 .05em .25em rgba(0,0,0,0.7);
    border-radius: 50%;
    transform: translate(20%, 20%);
    transition: transform 250ms ease;
    color: rgba(0,0,0,0.3);
    line-height: 1;
}
.checkboxesSwitch:focus::before {
    background: rgba(255,255,255,0.9);
}
.checkboxesSwitch:checked {
    background-color: var(--bg-checked, var(--bg, #08d637));
}
.checkboxesSwitch:focus-visible {
    box-shadow: 0 .15em .25em rgba(0,0,0,0.5) inset, 0 -.5px 0 rgba(255,255,255,0.2) inset, 0 0 0 2px rgba(255,255,255,0.8), 0 0 0 4px var(--bg-checked, var(--bg, rgb(60,130,250)));
}
.checkboxesSwitch:checked::before {
    transform: translate(156%, 20%);
}
.checkboxesSwitch:indeterminate::before {
    transform: translate(70%, 20%);
    content: '-';
}
.checkboxesSwitch:disabled:before {
    opacity: 0.4;
}
label{
    margin-bottom: 0px !important;
}

.company_model_item_option_section{
    justify-content: space-between; align-items: center; margin-top: 25px; margin-bottom: 25px; border-top: 1px solid #eaebf1; border-bottom: 1px solid #eaebf1; padding-top: 20px; padding-bottom: 20px;
}

.company_model_item_option_left{width: 80%; align-items: center;}
.company_model_item_option_checkbox{padding-right: 20px;}
.company_model_item_option_status{padding-right: 20px; font-size: 18px; font-weight: bold;}
.company_model_item_option_detail{font-style: italic; font-size: 16px;}
.company_model_item_option_right{padding-top: 20px; padding-bottom: 20px;}
.company_model_item_option_right_button{font-style: italic; display: block; width: 150px; height: 50px; background: rgb(23,122,255); background: linear-gradient(143deg, rgba(23,122,255,1) 0%, rgba(104,81,251,1) 100%); border-radius: 10px; color: #ffffff; text-align: center; line-height: 48px;}
.company_model_item_option_right_Roundbutton{
    ont-style: italic; display: block; width: 180px; height: 50px; background: rgb(23,122,255); background: linear-gradient(143deg, rgba(23,122,255,1) 0%, rgba(104,81,251,1) 100%); border-radius: 50px; color: #ffffff; text-align: center; line-height: 48px;
}



/*************************************************************************/
.packageCardPopup{position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; background-color: rgb(51 25 243 / 53%);}
.packageCardPopupInner{position: absolute;top: 45%;left: 35%;max-width: 600px;width: 100%;background-color: #fff;border-radius: 15px;padding: 48px 40px;}
.packageCardPopupClose{position: absolute; right: 20px; top: 15px;}
.packageCardPopupTitle{font-size: 20px; font-weight: 900; text-align: right; margin-bottom: 20px;}
.packageCardPopupName{font-size: 26px; font-weight: 900;}
.packageCardPopupDetail{align-items: center; margin-top: 20px;}
.packageCardPopupDetail_img{margin-right: 25px;}
.packageCardPopupCard_number{font-size: 20px;}
.packageCardPopupModule{justify-content: space-around; margin-top: 30px; padding-top: 30px; border-top: 1px solid #ccc; margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid #ccc;}
.packageCardPopupModuleTitle{font-size: 16px; font-style: italic;}
.packageCardPopupModulePrice{font-size: 16px; font-weight: normal;}
.packageCardPopupModulePayButton{display: block; background: rgb(23,122,255); background: linear-gradient(143deg, rgba(23,122,255,1) 0%, rgba(104,81,251,1) 100%); border-radius: 50px; height: 40px; width: 100px; margin: auto; color: #fff; line-height: 40px;}
.packageCardPopupModulePayAgentCodeButton{display: block; background-color: #E9EBF5; font-size: 14px; width: 200px; height: 40px; line-height: 40px; text-align: center; margin: auto; border-radius: 50px; color: #474747;}
.packageCardPopupModulePriceBox{text-align: center;}
.packageCardPopupModulePayButtonBox{margin-top: 10px;}


/*********************************************************************/
.communication_settingPopup{position: absolute;top: 45%;left: 35%;max-width: 600px;width: 100%;background-color: #fff;border-radius: 15px;padding: 48px 40px; box-shadow: -1px 0px 31px -8px rgba(0,0,0,0.57); -webkit-box-shadow: -1px 0px 31px -8px rgba(0,0,0,0.57);-moz-box-shadow: -1px 0px 31px -8px rgba(0,0,0,0.57);}
.communication_settingPopupColose{position: absolute; right: 20px; top: 15px;}
.communication_settingPopupHeadTitle{font-size: 20px; font-weight: 900; text-align: center; margin-bottom: 20px}
.communication_settingPopupCheckBox{padding-top: 15px; border-top: 1px solid #ccc; padding-bottom: 15px; margin-top: 15px;}
.communication_settingPopupCheckInput{margin-right: 12px;}
.communication_settingPopupCheckInputText{font-size: 16px;}
.communication_settingPopupSubmit{display: block; background: rgb(23,122,255); background: linear-gradient(143deg, rgba(23,122,255,1) 0%, rgba(104,81,251,1) 100%); width: 150px; height: 40px; color: #fff; line-height: 38px; text-align: center; border-radius: 50px;}
.communication_settingPopupCheckTwoBox{padding-top: 15px; border-top: 1px solid #ccc; padding-bottom: 15px; margin-top: 15px;}
.communication_settingPopupCheckTwoTitle{font-size: 16px;}
.communication_settingCheckBox{margin-top: 20px;}
.communication_settingCheckInput{margin-right: 12px;}
.communication_settingCheckLabel{font-size: 16px;}
.communication_settingPopupCheckTwoMessage{font-size: 12px; font-style: italic; margin-top: 20px;}
.communication_settingPopupSubmitBox{padding-top: 15px; border-top: 1px solid #ccc; padding-bottom: 15px; margin-top: 15px;}
.communication_settingPopupSubmitInnerBox{justify-content: space-around; align-items: center;}
.communication_settingPopupSubmitInnerLeft{width: 60%;}
.communication_settingPopupSubmitBoxInput{margin-right: 12px;}
.communication_settingPopupSubmitBoxHead{font-size: 16px;}
.communication_settingPopupSubmitBoxHeadTwo{font-size: 12px; font-style: italic;}

/***********************************************************************/
.company_checkpopup_section{position: absolute;top: 45%;left: 35%;max-width: 600px;width: 100%;background-color: #fff;border-radius: 15px;padding: 48px 40px; box-shadow: -1px 0px 31px -8px rgba(0,0,0,0.57);-webkit-box-shadow: -1px 0px 31px -8px rgba(0,0,0,0.57);-moz-box-shadow: -1px 0px 31px -8px rgba(0,0,0,0.57);}
.company_checkpopup_close{position: absolute; right: 20px; top: 15px;}
.company_checkpopup_title{font-size: 20px; font-weight: 900; text-align: center; margin-bottom: 20px}
.company_checkpopup_checkBox{padding-top: 15px; border-top: 1px solid #ccc; padding-bottom: 15px; margin-top: 15px;}
.company_checkpopup_inputBox{margin-right: 12px;}
.company_checkpopup_labelBox{font-size: 16px;}
.company_checkpopup_labelTwoBox{font-size: 12px; font-style: italic;}

/***********************************************************************/
.useDataBox_title{margin-bottom: 40px; margin-top: 20px; padding-left: 25px; font-size: 20px;}
.useData_section{padding: 50px; margin: 25px; border-radius: 8px; box-shadow: -1px 0px 31px -8px rgba(0,0,0,0.21);-webkit-box-shadow: -1px 0px 31px -8px rgba(0,0,0,0.21);-moz-box-shadow: -1px 0px 31px -8px rgba(0,0,0,0.21);}
.useData_section_title{font-size: 25px;}
.useData_section_detail{font-size: 20px;margin-left: 20px}
/*.useData_section_textBox{justify-content: space-around;}*/
.useDataList_section{padding: 50px; margin: 25px; border-radius: 8px; box-shadow: -1px 0px 31px -8px rgba(0,0,0,0.21);-webkit-box-shadow: -1px 0px 31px -8px rgba(0,0,0,0.21);-moz-box-shadow: -1px 0px 31px -8px rgba(0,0,0,0.21);}
.useDataList_section_title{font-size: 25px;}
.classuseDataList_section_box{justify-content: space-between;}
.useDataList_section_button{border-radius: 50px; display: block; width: 180px; background: rgb(23,122,255); background: linear-gradient(143deg, rgba(23,122,255,1) 0%, rgba(104,81,251,1) 100%); height: 40px; line-height: 38px; text-align: center; color: #fff;border:0px}
.useDataList_section_buttonBox{margin-top: 30px;}

/****************************************************************/
.payment_method_head_section{margin-bottom: 40px; margin-top: 20px; padding-left: 25px; font-size: 20px; border-bottom: 1px solid #DADCE7; padding-bottom: 30px; padding-top: 10px;}
.payment_method_head_box{margin-right: 20px;}
.payment_method_head_Active_button{width: 160px; background-color: #3319f3; font-size: 16px; color:#fff; height: 50px; border-radius: 50px; border:0px}
.payment_method_head_button{width: 160px; background-color: #fff; font-size: 16px; color:#3319f3; border:1px solid #3319f3; height: 50px; border-radius: 50px;}
.payment_method_section{padding: 40px; box-shadow: -1px 0px 31px -8px rgba(0,0,0,0.21);-webkit-box-shadow: -1px 0px 31px -8px rgba(0,0,0,0.21);-moz-box-shadow: -1px 0px 31px -8px rgba(0,0,0,0.21); border-radius: 10px; position: relative;}
.payment_method_section_titleBox{justify-content: space-between;}
.payment_method_section_title{font-size: 25px;}
.payment_method_list_section{margin-top: 50px; justify-content: space-between;}
.payment_method_list_section_name{font-size: 20px;}
.payment_method_list_section_cardImg{margin-right: 10px;}
.payment_method_list_section_edit{width: 45px;height: 45px;background-color: #E9EBF4;border:1px solid #DADCE7;border-radius: 50%;text-align: center;line-height: 40px;}
.payment_method_list_section_delete{width: 45px;height: 45px;background-color: #E9EBF4;border:1px solid #DADCE7;border-radius: 50%;text-align: center;line-height: 40px;}
.payment_method_addNew_card{
    padding: 40px;
    box-shadow: -1px 0px 31px -8px rgb(0 0 0 / 21%);
    -webkit-box-shadow: -1px 0px 31px -8px rgb(0 0 0 / 21%);
    -moz-box-shadow: -1px 0px 31px -8px rgba(0,0,0,0.21);
    border-radius: 10px;
    position: relative;;
    background: #fff;}
.payment_method_addNew_titleBox{justify-content: space-between;}
.payment_method_addNew_title{font-size: 25px;}
.payment_createCard_section{border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding-top: 80px; margin-top: 100px; padding-bottom: 80px; margin-bottom: 40px;}
.payment_createCard_left_img{width: 300px}
.payment_createCard_right_contant{width: 80%}
.payment_createCard_Number_box{margin-bottom: 25px; align-items: center;}
.payment_createCard_Number_label_box{font-size: 16px; width: 150px;}
.payment_createCard_Number_input_box{height: 42px; border:1px solid #DADCE7; padding-left: 10px; padding-right: 10px;}
.payment_createCard_Number_input_box>div{
    width: 270px;
}
.payment_createCard_cvc_box{margin-left: 10px; align-items: center; margin-bottom: 25px;width: 120px;}
.payment_createCard_cvc_label_box{font-size: 16px; width: 50px;}
.payment_createCard_cvc_input_box{height: 42px; border:1px solid #DADCE7; padding-left: 10px; padding-right: 10px; text-align: right;margin-left: 15px}
.payment_createCard_cvc_input_box>div{
    width: 100px
}
.payment_createCard_name_box{margin-bottom: 25px;  align-items: center;}
.payment_createCard_name_label_box{font-size: 16px; width: 150px;}
.payment_createCard_name_input_box{height: 42px; width: 470px; border:1px solid #DADCE7; padding-left: 10px; padding-right: 10px;}
.payment_createCard_exdate_box{margin-bottom: 25px; align-items: center;}
.payment_createCard_exdate_label_box{font-size: 16px; width: 150px;}
.payment_createCard_exdate_date_box{margin-right: 12px;}
.payment_createCard_exdate_months_box{margin-right: 12px;}
.payment_createCard_exdate_year_box{margin-right: 12px;}
.payment_createCard_exdate_date_inner_box{width: 110px;}
.payment_createCard_exdate_months_inner_box{width: 180px;}
.payment_createCard_exdate_year_inner_box{width: 156px;}
.payment_createCard_submit_box{margin: auto; width: 100%; text-align: center;}
.payment_createCard_submit_button{border-radius: 8px; background: #E9EBF4; border:0px; height: 40px; width: 140px;}
.payment_createCard_submit_button_text{padding-left: 10px;}
.payment_method_otp_section{position: absolute; z-index: 9999; background: #3319F3; padding: 50px; width: 550px; border-radius: 10px; left: 50%; transform: translateX(-50%);}
.payment_method_otp_close{position: absolute; right: 20px; top: 10px;}
.payment_method_otp_headTitle{color: #fff; font-size: 18px;}
.payment_method_otp_box{border-top:1px solid #D5D7DB; border-bottom:1px solid #D5D7DB; padding-top: 20px; padding-bottom: 20px; margin-top: 20px; margin-bottom: 20px;}
.payment_method_otp_boxHead{font-size: 18px; color: #fff;}
.payment_method_otp_boxHead_subtitle{color: #fff; font-size: 14px; margin-top: 5px; margin-bottom: 15px;}
.payment_method_otp_inputBox{justify-content: space-between; margin-top: 30px; margin-bottom: 30px}
.payment_method_otp_input{background: rgba(255,255,255,0.24);border: 1px solid #D5D7DB;border-radius: 4px;width: 55px;height: 55px;padding: 10px;}
.payment_method_otp_verifyBox{text-align: center;}
.payment_method_otp_verify_button{border:1px solid #fff;border-radius: 50px;color: #fff;background: #3319F3;width: 150px;height: 40px;margin-top: 15px;margin-bottom: 15px;}
.payment_method_otp_resend_text{font-size: 14px; color: #fff; font-style: italic; text-align: center; margin-top: 40px}
.payment_method_otp_resend_box{margin-top: 15px; text-align: center;}
.payment_method_otp_resend_button{border:1px solid #fff;border-radius: 50px;color: #fff;background: #3319F3;width: 80px;height: 30px;margin-top: 15px;margin-bottom: 15px;font-size: 14px;}

/**********************************************************************/
.payment_done_list_section{padding: 40px; border-radius: 10px; position: relative; padding-top: 0px;}
.payment_done_list_box{margin-top: 50px; margin-bottom: 30px; padding-bottom: 40px; border-bottom: 1px solid #ccc;}
.payment_done_list_date{font-size: 20px; width: 20%; max-width: 150px;}
.payment_done_list_cardDetail_box{font-size: 20px; width: 40%; max-width: 400px;}
.payment_done_list_card_icon_box{margin-right: 10px;}
.payment_done_list_card_price{font-size: 20px; width: 20%; max-width: 130px;}
.payment_done_list_card_pdf{font-size: 20px; width: 20%; max-width: 180px;}


/************************************************************************/
.pack_price_months_box{justify-content: space-between; align-items: center; width: auto;}
.pack_price_months_inner_box{margin-top: 20px; width: fit-content;}
.pack_price_months_PriceBox{padding-bottom: 15px; margin-bottom: 15px; border-bottom: 2px dotted #000; color: #1A132C; font-size: 25px;}
.pack_price_months_work{padding-bottom: 15px; margin-bottom: 15px;  color: #1A132C; font-size: 25px;}
.company_left_box{width: 25%; padding-right: 30px;}
.company_left_price_box{font-size: 18px; font-style: italic; text-align: center; margin-top: 15px;}
.company_right_box{width: 40%;padding-right: 30px;}
.company_right_totalPay_box{width: 30%; padding-right: 30px;}
.company_right_totalPay_head{margin-top: 20px; font-size: 18px;}
.company_right_totalPay_amount_box{margin-top: 20px; border:2px dotted rgb(204 204 204 / 47%); padding: 20px; padding-top: 40px; padding-bottom: 40px; text-align: center;}
.company_right_totalPay_amount_text{font-size: 25px; font-weight: bold;}
.company_right_totalPay_amount_name{font-size: 18px; margin-bottom: 10px}
.company_right_totalPay_amount_date{font-size: 18px;}
.company_model_message{font-size: 20px; font-weight: bolder; width: 100%; margin-top: 20px}
.company_user_add_on_box{margin-top: 20px; font-size: 14px; width: 130px; border:1px solid #ccc; height: 30px; border-radius: 5px; text-align: center; line-height: 30px}
.company_user_add_on_title{font-style: italic; font-size: 14px;}
.company_change_plan_fullWidth_box{width: 100%;}
.company_change_plan_fullWidth_inner_box{display: flex; margin-left: -10px; flex-wrap: wrap; margin-top: 30px; width: 100%;}
.company_change_plan_fullWidth_item{display: flex; justify-content: space-around; border: 1px solid #ccc; border-radius: 5px; height: 50px; align-items: center; width: 48%;margin-left: 10px; margin-bottom: 10px; width: 32%;}
.company_change_plan_box{justify-content: space-between; width: 100%; margin-top: 30px;}
.company_change_plan_boxTitle{font-size: 16px; font-weight: bold; font-style: italic;}
.company_change_plan_item_box{display: flex; margin-left: -10px; flex-wrap: wrap; margin-top: 30px; width: 100%;}
.company_change_plan_item{display: flex; justify-content: space-around; border: 1px solid #ccc; border-radius: 5px; height: 50px; align-items: center; width: 48%;margin-left: 10px; margin-bottom: 10px; width: 48%;}
.company_change_plan_halfWith_box{width: 50%;}
.company_change_plan_message{width: 100%; font-size: 18px; font-weight: bold; margin-top: 20px;}

/******************************************************************************/
.company_model_item_left_subtitle{font-size: 18px; font-style: italic; text-align: center; margin-top: 15px;}
.company_model_item_right_cancel_box{margin-top: 30px;}
.company_model_item_right_cancel_button{font-style: italic; display: block; width: 204px; height: 50px; background: rgb(23,122,255); background: linear-gradient(143deg, rgba(23,122,255,1) 0%, rgba(104,81,251,1) 100%); border-radius: 10px; color: #ffffff; text-align: center; line-height: 48px; padding-left: 10px; padding-right: 10px;}

.progress-circle {
    background-color: #ddd;
    border-radius: 50%;
    display: inline-block;
    height: 80px;
    margin: 15px 0px;
    position: relative;
    width: 80px;
}
.progress-circle:before {
    align-items: center;
    background-color: #91a1c1;
    border-radius: 50%;
    color: #fff;
    content: attr(data-progress) '%';
    display: flex;
    font-size: 16px;
    font-weight: bold;
    justify-content: center;
    position: absolute;
    left: 4px;
    right: 4px;
    top: 4px;
    bottom: 4px;
    transition: -webkit-transform 0.2s ease;
    transition: transform 0.2s ease;
    transition: transform 0.2s ease, -webkit-transform 0.2s ease;
}
.progress-circle:after {
    background-color: #3219f2;
    border-radius: 50%;
    content: '';
    display: inline-block;
    height: 100%;
    width: 100%;
}
.progress-circle[data-progress="0"]:after {
    background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(90deg, #3219f2 50%, #ffffff 50%, #ffffff);
}
.progress-circle[data-progress="1"]:after {
    background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(93.6deg, #3219f2 50%, #ffffff 50%, #ffffff);
}
.progress-circle[data-progress="2"]:after {
    background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(97.2deg, #3219f2 50%, #ffffff 50%, #ffffff);
}
.progress-circle[data-progress="3"]:after {
    background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(100.8deg, #3219f2 50%, #ffffff 50%, #ffffff);
}
.progress-circle[data-progress="4"]:after {
    background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(104.4deg, #3219f2 50%, #ffffff 50%, #ffffff);
}
.progress-circle[data-progress="5"]:after {
    background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(108deg, #3219f2 50%, #ffffff 50%, #ffffff);
}
.progress-circle[data-progress="6"]:after {
    background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(111.6deg, #3219f2 50%, #ffffff 50%, #ffffff);
}
.progress-circle[data-progress="7"]:after {
    background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(115.2deg, #3219f2 50%, #ffffff 50%, #ffffff);
}
.progress-circle[data-progress="8"]:after {
    background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(118.8deg, #3219f2 50%, #ffffff 50%, #ffffff);
}
.progress-circle[data-progress="9"]:after {
    background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(122.4deg, #3219f2 50%, #ffffff 50%, #ffffff);
}
.progress-circle[data-progress="10"]:after {
    background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(126deg, #3219f2 50%, #ffffff 50%, #ffffff);
}
.progress-circle[data-progress="11"]:after {
    background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(129.6deg, #3219f2 50%, #ffffff 50%, #ffffff);
}
.progress-circle[data-progress="12"]:after {
    background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(133.2deg, #3219f2 50%, #ffffff 50%, #ffffff);
}
.progress-circle[data-progress="13"]:after {
    background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(136.8deg, #3219f2 50%, #ffffff 50%, #ffffff);
}
.progress-circle[data-progress="14"]:after {
    background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(140.4deg, #3219f2 50%, #ffffff 50%, #ffffff);
}
.progress-circle[data-progress="15"]:after {
    background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(144deg, #3219f2 50%, #ffffff 50%, #ffffff);
}
.progress-circle[data-progress="16"]:after {
    background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(147.6deg, #3219f2 50%, #ffffff 50%, #ffffff);
}
.progress-circle[data-progress="17"]:after {
    background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(151.2deg, #3219f2 50%, #ffffff 50%, #ffffff);
}
.progress-circle[data-progress="18"]:after {
    background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(154.8deg, #3219f2 50%, #ffffff 50%, #ffffff);
}
.progress-circle[data-progress="19"]:after {
    background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(158.4deg, #3219f2 50%, #ffffff 50%, #ffffff);
}
.progress-circle[data-progress="20"]:after {
    background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(162deg, #3219f2 50%, #ffffff 50%, #ffffff);
}
.progress-circle[data-progress="21"]:after {
    background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(165.60000000000002deg, #3219f2 50%, #ffffff 50%, #ffffff);
}
.progress-circle[data-progress="22"]:after {
    background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(169.2deg, #3219f2 50%, #ffffff 50%, #ffffff);
}
.progress-circle[data-progress="23"]:after {
    background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(172.8deg, #3219f2 50%, #ffffff 50%, #ffffff);
}
.progress-circle[data-progress="24"]:after {
    background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(176.4deg, #3219f2 50%, #ffffff 50%, #ffffff);
}
.progress-circle[data-progress="25"]:after {
    background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(180deg, #3219f2 50%, #ffffff 50%, #ffffff);
}
.progress-circle[data-progress="26"]:after {
    background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(183.60000000000002deg, #3219f2 50%, #ffffff 50%, #ffffff);
}
.progress-circle[data-progress="27"]:after {
    background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(187.2deg, #3219f2 50%, #ffffff 50%, #ffffff);
}
.progress-circle[data-progress="28"]:after {
    background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(190.8deg, #3219f2 50%, #ffffff 50%, #ffffff);
}
.progress-circle[data-progress="29"]:after {
    background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(194.4deg, #3219f2 50%, #ffffff 50%, #ffffff);
}
.progress-circle[data-progress="30"]:after {
    background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(198deg, #3219f2 50%, #ffffff 50%, #ffffff);
}
.progress-circle[data-progress="31"]:after {
    background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(201.60000000000002deg, #3219f2 50%, #ffffff 50%, #ffffff);
}
.progress-circle[data-progress="32"]:after {
    background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(205.2deg, #3219f2 50%, #ffffff 50%, #ffffff);
}
.progress-circle[data-progress="33"]:after {
    background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(208.8deg, #3219f2 50%, #ffffff 50%, #ffffff);
}
.progress-circle[data-progress="34"]:after {
    background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(212.4deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="35"]:after {
    background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(216deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="36"]:after {
    background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(219.6deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="37"]:after {
    background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(223.20000000000002deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="38"]:after {
    background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(226.8deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="39"]:after {
    background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(230.4deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="40"]:after {
    background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(234deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="41"]:after {
    background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(237.6deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="42"]:after {
    background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(241.20000000000002deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="43"]:after {
    background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(244.8deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="44"]:after {
    background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(248.4deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="45"]:after {
    background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(252deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="46"]:after {
    background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(255.6deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="47"]:after {
    background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(259.20000000000005deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="48"]:after {
    background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(262.8deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="49"]:after {
    background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(266.4deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="50"]:after {
    background-image: linear-gradient(-90deg, #3219f2 50%, transparent 50%, transparent), linear-gradient(270deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="51"]:after {
    background-image: linear-gradient(-86.4deg, #3219f2 50%, transparent 50%, transparent), linear-gradient(270deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="52"]:after {
    background-image: linear-gradient(-82.8deg, #3219f2 50%, transparent 50%, transparent), linear-gradient(270deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="53"]:after {
    background-image: linear-gradient(-79.2deg, #3219f2 50%, transparent 50%, transparent), linear-gradient(270deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="54"]:after {
    background-image: linear-gradient(-75.6deg, #3219f2 50%, transparent 50%, transparent), linear-gradient(270deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="55"]:after {
    background-image: linear-gradient(-72deg, #3219f2 50%, transparent 50%, transparent), linear-gradient(270deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="56"]:after {
    background-image: linear-gradient(-68.4deg, #3219f2 50%, transparent 50%, transparent), linear-gradient(270deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="57"]:after {
    background-image: linear-gradient(-64.8deg, #3219f2 50%, transparent 50%, transparent), linear-gradient(270deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="58"]:after {
    background-image: linear-gradient(-61.2deg, #3219f2 50%, transparent 50%, transparent), linear-gradient(270deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="59"]:after {
    background-image: linear-gradient(-57.6deg, #3219f2 50%, transparent 50%, transparent), linear-gradient(270deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="60"]:after {
    background-image: linear-gradient(-54deg, #3219f2 50%, transparent 50%, transparent), linear-gradient(270deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="61"]:after {
    background-image: linear-gradient(-50.4deg, #3219f2 50%, transparent 50%, transparent), linear-gradient(270deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="62"]:after {
    background-image: linear-gradient(-46.8deg, #3219f2 50%, transparent 50%, transparent), linear-gradient(270deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="63"]:after {
    background-image: linear-gradient(-43.199999999999996deg, #3219f2 50%, transparent 50%, transparent), linear-gradient(270deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="64"]:after {
    background-image: linear-gradient(-39.6deg, #3219f2 50%, transparent 50%, transparent), linear-gradient(270deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="65"]:after {
    background-image: linear-gradient(-36deg, #3219f2 50%, transparent 50%, transparent), linear-gradient(270deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="66"]:after {
    background-image: linear-gradient(-32.4deg, #3219f2 50%, transparent 50%, transparent), linear-gradient(270deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="67"]:after {
    background-image: linear-gradient(-28.799999999999997deg, #3219f2 50%, transparent 50%, transparent), linear-gradient(270deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="68"]:after {
    background-image: linear-gradient(-25.200000000000003deg, #3219f2 50%, transparent 50%, transparent), linear-gradient(270deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="69"]:after {
    background-image: linear-gradient(-21.599999999999994deg, #3219f2 50%, transparent 50%, transparent), linear-gradient(270deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="70"]:after {
    background-image: linear-gradient(-18deg, #3219f2 50%, transparent 50%, transparent), linear-gradient(270deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="71"]:after {
    background-image: linear-gradient(-14.399999999999991deg, #3219f2 50%, transparent 50%, transparent), linear-gradient(270deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="72"]:after {
    background-image: linear-gradient(-10.799999999999997deg, #3219f2 50%, transparent 50%, transparent), linear-gradient(270deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="73"]:after {
    background-image: linear-gradient(-7.200000000000003deg, #3219f2 50%, transparent 50%, transparent), linear-gradient(270deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="74"]:after {
    background-image: linear-gradient(-3.599999999999994deg, #3219f2 50%, transparent 50%, transparent), linear-gradient(270deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="75"]:after {
    background-image: linear-gradient(0deg, #3219f2 50%, transparent 50%, transparent), linear-gradient(270deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="76"]:after {
    background-image: linear-gradient(3.600000000000009deg, #3219f2 50%, transparent 50%, transparent), linear-gradient(270deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="77"]:after {
    background-image: linear-gradient(7.200000000000003deg, #3219f2 50%, transparent 50%, transparent), linear-gradient(270deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="78"]:after {
    background-image: linear-gradient(10.799999999999997deg, #3219f2 50%, transparent 50%, transparent), linear-gradient(270deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="79"]:after {
    background-image: linear-gradient(14.400000000000006deg, #3219f2 50%, transparent 50%, transparent), linear-gradient(270deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="80"]:after {
    background-image: linear-gradient(18deg, #3219f2 50%, transparent 50%, transparent), linear-gradient(270deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="81"]:after {
    background-image: linear-gradient(21.60000000000001deg, #3219f2 50%, transparent 50%, transparent), linear-gradient(270deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="82"]:after {
    background-image: linear-gradient(25.200000000000003deg, #3219f2 50%, transparent 50%, transparent), linear-gradient(270deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="83"]:after {
    background-image: linear-gradient(28.799999999999997deg, #3219f2 50%, transparent 50%, transparent), linear-gradient(270deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="84"]:after {
    background-image: linear-gradient(32.400000000000006deg, #3219f2 50%, transparent 50%, transparent), linear-gradient(270deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="85"]:after {
    background-image: linear-gradient(36deg, #3219f2 50%, transparent 50%, transparent), linear-gradient(270deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="86"]:after {
    background-image: linear-gradient(39.599999999999994deg, #3219f2 50%, transparent 50%, transparent), linear-gradient(270deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="87"]:after {
    background-image: linear-gradient(43.20000000000002deg, #3219f2 50%, transparent 50%, transparent), linear-gradient(270deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="88"]:after {
    background-image: linear-gradient(46.80000000000001deg, #3219f2 50%, transparent 50%, transparent), linear-gradient(270deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="89"]:after {
    background-image: linear-gradient(50.400000000000006deg, #3219f2 50%, transparent 50%, transparent), linear-gradient(270deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="90"]:after {
    background-image: linear-gradient(54deg, #3219f2 50%, transparent 50%, transparent), linear-gradient(270deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="91"]:after {
    background-image: linear-gradient(57.599999999999994deg, #3219f2 50%, transparent 50%, transparent), linear-gradient(270deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="92"]:after {
    background-image: linear-gradient(61.20000000000002deg, #3219f2 50%, transparent 50%, transparent), linear-gradient(270deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="93"]:after {
    background-image: linear-gradient(64.80000000000001deg, #3219f2 50%, transparent 50%, transparent), linear-gradient(270deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="94"]:after {
    background-image: linear-gradient(68.4deg, #3219f2 50%, transparent 50%, transparent), linear-gradient(270deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="95"]:after {
    background-image: linear-gradient(72deg, #3219f2 50%, transparent 50%, transparent), linear-gradient(270deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="96"]:after {
    background-image: linear-gradient(75.6deg, #3219f2 50%, transparent 50%, transparent), linear-gradient(270deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="97"]:after {
    background-image: linear-gradient(79.20000000000002deg, #3219f2 50%, transparent 50%, transparent), linear-gradient(270deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="98"]:after {
    background-image: linear-gradient(82.80000000000001deg, #3219f2 50%, transparent 50%, transparent), linear-gradient(270deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="99"]:after {
    background-image: linear-gradient(86.4deg, #3219f2 50%, transparent 50%, transparent), linear-gradient(270deg, #3219f2 50%, #ffffff 50%, #ddd);
}
.progress-circle[data-progress="100"]:after {
    background-image: linear-gradient(90deg, #3219f2 50%, transparent 50%, transparent), linear-gradient(270deg, #3219f2 50%, #ffffff 50%, #ddd);
}