/**********loading**********/
@keyframes spin {
  from {transform: rotate(0deg);}
  to {transform: rotate(36000deg);}
}

@keyframes grow_and_shrink {
  0% {scale: 1;}
  50% {scale: .6;}
  100% {scale: 1;}
}


#loader {
	--loader-size: 50vh;
	height: var(--loader-size);
	width: var(--loader-size);
	margin: 0px auto;
	position: fixed;
  z-index: 9999;
  top: calc(50vh - (var(--loader-size) / 2));
  left: calc(50vw - (var(--loader-size) / 2));
	animation-name: spin;
	animation-duration: 120s;
	animation-timing-function: linear;    
}

#loader .loader_segment {
  position: absolute;
}

#loader #segment0 {rotate: calc((360deg / 8) * 0);}
#loader #segment1 {rotate: calc((360deg / 8) * 1);}
#loader #segment2 {rotate: calc((360deg / 8) * 2);}
#loader #segment3 {rotate: calc((360deg / 8) * 3);}
#loader #segment4 {rotate: calc((360deg / 8) * 4);}
#loader #segment5 {rotate: calc((360deg / 8) * 5);}
#loader #segment6 {rotate: calc((360deg / 8) * 6);}
#loader #segment7 {rotate: calc((360deg / 8) * 7);}

/***arm***/
#loader[type="arm"] {
	--loader-arm-height: 20vh;
	--loader-arm-width: calc(var(--loader-arm-height) / 5);
	--loader-perspective: 500px;
	--loader-rotateX: -75deg;
  --large-circle-size: var(--loader-arm-width);
  --large-circle-y-offset: calc(var(--large-circle-size) / 2);
  --small-circle-size: calc(var(--large-circle-size) / 2);  
  --small-circle-y-offset: calc((var(--small-circle-size) / 2));  
  --arm-body-height: calc(var(--loader-arm-height) - var(--large-circle-y-offset) - var(--small-circle-y-offset));   
}


#loader .arm {
	left: calc(50% - (var(--loader-arm-width) / 2));
	top: calc((var(--loader-size) / 2) - (var(--loader-arm-height) * 1.25));
	width: var(--loader-arm-width);
	height: var(--loader-arm-height);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
	transform-origin: 50% calc(100% + var(--loader-arm-height) * .25);
	animation-name: grow_and_shrink;
	animation-duration: 2s;
  animation-iteration-count: 60;
	animation-timing-function: linear;   
}

#loader .arm *:is(.large_circle, .small_circle, .arm_body.top_layer) {background-color: white;}
#loader .arm *:is(.large_circle, .small_circle) {border-radius: 50%;}
#loader .arm *:is(.large_circle, .small_circle, .arm_body) {position: absolute;}

#loader .arm .large_circle {
  top: 0px;
  width: var(--large-circle-size);
  height: var(--large-circle-size);  
}
#loader .arm .small_circle {
  bottom: 0px;
  width: var(--small-circle-size);
  height: var(--small-circle-size);  
}

#loader .arm .arm_body {
  height: var(--arm-body-height);  
  top: var(--large-circle-y-offset);
}

#loader .arm .arm_body.top_layer {
  width: var(--loader-arm-width);
  clip-path: polygon(0px 0px, 100% 0px, calc(50% + var(--small-circle-y-offset)) 100%, calc(50% - var(--small-circle-y-offset)) 100%);
}
#loader .arm .arm_body.bottm_layer {width: 0px;}

#loader .arm *:is(.large_circle, .small_circle, .top_layer) {z-index: 999;}
#loader .arm .bottom_layer {z-index: 0;}

#loader .arm .arm_body.bottom_layer {
  box-shadow: 
    0px 0px calc(var(--loader-arm-width) * .5) calc(var(--small-circle-size) * 0.4) black,
    0px 0px calc(var(--loader-arm-width) * 1) calc(var(--small-circle-size) * 0.4) black;
  clip-path: unset !important;
}



/***cricle***/
#loader .circle {
  --loader-circle-width: calc(var(--loader-size) * .25);	
	left: calc((100% - var(--loader-circle-width)) / 2);
	top: 0px;
	width: var(--loader-circle-width);
	height: 100%;
  transform-origin: 50% 50%;
}


#loader #segment0::before {
  opacity: calc((1 / 12) * 5);
  scale: calc((1 / 12) * 3);
}
#loader #segment1::before {
  opacity: calc((1 / 12) * 6);
  scale: calc((1 / 12) * 4);
}
#loader #segment2::before {
  opacity: calc((1 / 12) * 7);
  scale: calc((1 / 12) * 5);
}
#loader #segment3::before {
  opacity: calc((1 / 12) * 8);
  scale: calc((1 / 12) * 6);
}
#loader #segment4::before {
  opacity: calc((1 / 12) * 9);
  scale: calc((1 / 12) * 7);
}
#loader #segment5::before {
  opacity: calc((1 / 12) * 10);
  scale: calc((1 / 12) * 8);
}
#loader #segment6::before {
  opacity: calc((1 / 12) * 11);
  scale: calc((1 / 12) * 9);
}
#loader #segment7::before {
  opacity: calc((1 / 12) * 12);
  scale: calc((1 / 12) * 10);
}

#loader .circle::before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: var(--loader-circle-width);
  height: var(--loader-circle-width);
  border-radius: 100%;
  background-color: white;
}







/*****.hicrm_img_uploader*****/
/**labels**/
.hicrm_img_uploader_label {
  padding: .5rem .2rem !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1 !important;
}

.hicrm_img_uploader_label {
  font-weight: bold;
  
  border: 2px solid transparent;  
  border-radius: .5rem;  
}


.hicrm_img_uploader_choose_chosen[file_chosen="true"] .hicrm_img_uploader_choose,
.hicrm_img_uploader_choose_chosen[file_chosen="false"] .hicrm_img_uploader_chosen {display: none;}

.hicrm_img_uploader_choose:has(svg) {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hicrm_img_uploader_choose svg {
  width: 5rem;
}

/**input**/
.hicrm_img_uploader,
.hicrm_img_uploader ~ input[type="number"] {display: none;}







/*****button.refresh_user_and_division_metas*****/
.refresh_user_and_division_metas[online="false"] {display: none;}


/*****#user_current_branch_selector*****/