/* 2023/04/26*/
/*#####Variables#####*/
:root{ /*Size Root*/
  --exlargefont:24px;
  --xxlargefont:20px;
  --xlargefont:18px;
  --largefont:16px;
  --normalfont:14px;
  --smallfont:12px;
  --xsmallfont:10px;
  --xxsmallfont:8px;

  --xsmallradius:0.25rem;
  --smallradius:0.5rem;
  --normalradius:0.75rem;
  --largeradius:1rem;
  --xlargeradius:1.25rem;
  --xxlargeradius:1.5rem;
  --exlargeradius:1.75rem;
  --exxlargeradius:2rem;

  --inputxminrp:0.25rem;
  --inputminrp:0.5rem;
  --inputrp:0.75rem;

  --InputFontWeight:300;

  --smallwidth:110px;
  --normallwidth:168px;
  --largewidth:192px;
  --DocBtnWidth:132px;
  --exlarge:245px;

  --TitleIcon:18px;
  --ImageMsg:130px;
  --checkboxheight:20px;
  --marginboxheight:0.75rem;
  --DocumentHeight:432px;
  --menuicon:22px;
  --Widthrightmenu:10.5rem;
  --InputPadding:1.125rem;
  --LineheightCode:1.5rem;
  --MarginHeader:3rem;
  --MargindivContent:0.75rem;
  --widthtitle: 138px;
  --InputHeight:40px;
  --MarginRow:2rem;
  --WidthSrchbtn:10px;
  --Widthbtn:138px;
  --HeightBtn:32px;
  --HeightSelectedBtn:30px;
  --FontBtn:var(--largefont);
  --FontBtnCancel:var(--largefont);
  --FontFormTitle:var(--xxlargefont);
  --FontInput:var(--smallfont);
  --FontRightMenu:16px;
  --Documentwidthtitle:96px;
  --HeaderHeight:0px;
  --TabHeight:40px;
  --Fontcodeinput:13px;
  --Fontrightmenulogo:64px;
  --Heightrightmenulink:48px;
  --Marginrightmenulink: 1.25rem 0.5rem 1.25rem 0;
  --borderradiusrightmenulink:0 1.5rem 1.5rem 0;
  --borderradiusrightmenutitle:1.5rem 0 0 1.5rem;
  --Pagewidthtitle:112px;
  --Imagewidth:200px;
  --Imageheight:192px;
  --MarginRightMenuItem:0.5rem;
  --font-primary:Vazir;
  --ImgDistance:0.75rem;
  --rameinwidth:110px;
}

/*Main Root*/
:root{
  --MainPrimary:#35558A;
  --MainSecondary:#DCBE5E;
  --MainTertiary:#8A424E;
  --MainQuaternary:#1B4D4D;
  --MainWhite:#FDFDFD;
  --MainBlack:#141414;

  --white:var(--MainWhite);
  --whiteColor: var(--MainWhite);

  --MainThemeColor:var(--MainPrimary);

  --Primary5:#EBEEF3;
  --Primary10:#D7DDE8;
  --Primary15:#C2CCDC;
  --Primary20:#AEBBD0;
  --Primary30:#8699B9;
  --Primary40:#5D77A1;
  --Primary60:#2A446E;
  --Primary70:#203353;
  --Primary80:#152237;
  --Primary85:#101A29;
  --Primary90:#0B111C;
  --Primary95:#05090E;
  --TempPrimary70:#203353;
  --Primary70light: #2033536b;
  --Primary70LIGHT:#2D4774;
  --Primary5light:#8590A3;


  --GrayColor:#EBEEF3;
  --GrayWhite:#FDFDFD;
  --Gray5:#F9F9F9;
  --Gray10:#F3F3F3;
  --Gray15:#EEEEEE; 
  --Gray20:#E8E8E8;
  --Gray30:#DCDCDC;
  --Gray40:#D1D1D1;
  --Gray50:#C5C5C5; 
  --Gray60:#9E9E9E; 
  --Gray70:#767676;
  --Gray80:#4F4F4F;
  --Gray95:#141414;

  --Link5:#E5F2FF;
  --Link20:#99CAFF;
  --Link50:#007AFF;
  --Link60:#0062CC;
  --Link70:#004999;
  --link: var(--Link70);


  --Approved5:#EBF9EE;
  --Approved20:#AEE9BD;
  --Approved30:#85DD9B;
  --Approved50:#34C759;
  --Approved60:#2A9F47;
  --Approved70:#1F7735;

  --InputTextColor:var(--Gray95);

  --Dangerous20:#E19999;


  --Error5:#FFEBEA;
  --Error30:#FF8983;  
  --Error20:#FFB1AC;  
  --Error50:#FF3B30;
  --Error60:#CC2F26;
  --Error70:#99231D;

  --Warning20:#FFD599;
  --Warning50:#FF9500;
  --Warning60:#CC7700;
  --Warning70:#995900;


  --Sunny5:#FCF9EF;
  --Sunny10:#F8F2DF;
  --Sunny15:#F5ECCF;
  --Sunny20:#DDBF5E;
  --Sunny30:#EBD99E;
  --Sunny40:#e4cc7e;
  --Sunny60:#C69B12;
  --Sunny70:#856638;
  --Sunny80:#584C26;

  --Tertiary5:#FAF6F6;
  --Tertiary10:#E8D9DC;
  --Tertiary20:#D0B3B8;
  --Tertiary30:#B98E95;
  --Tertiary60:#6E353E;
  --Tertiary70:#53282F;
  --Tertiary80:#371A1F;
  --Tertiary5light:#9c878d;

  --Quaternary40:#497171;
  --Quaternary80:#0B1F1F;

  --Gold5:#FDFAF1;

  --Production5: #e6EFF7;
  --Production20: #CDDFF0;
  --Production60:#024C90;


  --Primary10Temp:#D7DDE8;

  --secondgradiant:#35558A00;

  --selectedmenu:var(--GrayWhite);


  --secondbgColor:var(--MainSecondary);

  --Lightsecondcolor:#DDBF5Eb8;
  --Lightgreen:#D5EBE8;
  --Lightred:#F6E1E1;

  --symbolparentborder:#90BAE9;
  --symbolparentbg:#90BAE9;



  --gray:var(--Gray20);



  --BlueShadow:#35558Ab8; 
  --red:#DC0000;
  --FirstbgColor:var(--MainThemeColor);
  --darkborder:var(--MainThemeColor);
  --Dark: #101010;
  --dark: var(--Dark);
  --honeycolor: var(--Sunny20);
  --Primary:#B6C1CF;
  --CopperBtn:#C4A0A7; 
  --Copper:#8a424e;  
  --lightCopper:#FFFAFA;
  --DarkCopper:#8a424e;
  --LightFirstcolor:#35558Ab8;
  --bgtitle:var(--MainThemeColor);
  --ShadowColor:#0000003b;
  --hovercolor: #0000003b;
  --PreLoading:#35558a7a;


  --DarkGreen:#1c635b;
  --DarkRed:#6E0000;
  --midnightbtn:#160A5B;

  --violet:#6d222e;
  --RedWhite:#FFEFEF;
  --YellowWhite:#FFFDF5;
  --GreenWhite:#F0FFFB;

  --bodybgcolor: var(--MainWhite);
  --OperationShadow:#00000026;
  --FirstDashboardColor:#35558aba;
  --rightmenucolor:var(--Primary5);
  --blackblue:#00286E;
  --LightBlue: #EFF4FE;
  --bgDoccolor: #2E6164;
  --TempbgDoccolor: #2E6164;
  --borderDoccolor: #2E6164;
  --label:var(--Gray95);
  --TitleColor:var(--Gray95);
  --InputColor:var(--Gray5);
  --DocShadow:#5d77a126;
  --bgForm:var(--Primary5);
  --table-border:var(--Primary15);
  --table-header-border:var(--Primary15);
  --Trbg:var(--Gray15);
  --redDialog:#99231dcc;
  --yellowDialog:#705103c7;
  --GreenDialog:#4D847Ec7;
  --RedDelete:var(--Error70);
  --CancelColor:var(--Gray95);
  --secondary:var(--MainThemeColor);
  --Purewhite:#FFF;
  --DialogBlur:#d7dde833;
  --Dialogbg:var(--MainPrimary);
  --warning:var(--Warning70);
  --BlueBox:var(--Primary5);
  --line: #AEB8C5;
  --primary: #707070;
  --DialogShadow:#101a2980;
  --PlaceholderColor:var(--Primary5);

  --Elephant:#E4ECF9;

  --grayblue:#F2F6F8;

  --Bezh: #f9f3e1;
  --loading: url(/themes/manager/images/zargar-logosmall.gif);
  --sending: url(/themes/manager/images/zargar-logosmall.gif);
  --bgDocImg:url(/themes/manager/images/createdocument/bg-Bluedoc.svg);
  
  
      --gap1: 0.25rem;
    --gap2: 0.5rem;
    --gap3: 0.75rem;
    --gap4: 1rem;
    --gap5: 1.25rem;
    --gap6: 1.5rem;
    --gap7: 1.75rem;
    --gap8: 2rem;
    --gap9: 2.25rem;
    --gap10: 0.625rem;
    --gap11: 2.5rem;
    --WrapperSize: 1440px;

    --font-size-1: 10px;
    --font-size-2: 12px;
    --font-size-3: 14px;
    --font-size-4: 16px;
    --font-size-5: 18px;
    --font-size-6: 24px;
    --font-size-7: 28px;
    --font-size-8: 32px;
}
body, ul, li, a, p, span, h1, h2, h3, h4, h5, h6, input, button ,pre{
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
  outline: none;
  border: none;
  font-family: Vazir; 
  color: var(--FontColor);
  font-weight: normal;
  scrollbar-width: thin;
  line-height: 1.5;
}
*{
  font-family: 'PeydaWeb', 'Tahoma', sans-serif !important;
}
body ,.zr-divmain{
  min-height: 100vh;
}

html {
  scroll-behavior: smooth;
}

a, button,select {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed !important;
}

input,select,textarea{
  border:0;
  outline:0;
}
::placeholder {
  font-size: 12px;
  font-weight: normal;
  color: var(--PlaceholderColor);
}

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}



/* gaps */
.zr-gap-1 {
    gap: var(--gap1);
}

.zr-gap-2 {
    gap: var(--gap2);
}

.zr-gap-3 {
    gap: var(--gap3);
}

.zr-gap-4 {
    gap: var(--gap4);
}

.zr-gap-5 {
    gap: var(--gap5);
}

.zr-gap-6 {
    gap: var(--gap6);
}

.zr-gap-7 {
    gap: var(--gap7);
}

.zr-gap-8 {
    gap: var(--gap8);
}

.zr-gap-9 {
    gap: var(--gap9);
}

.zr-gap-10 {
    gap: var(--gap10);
}

.zr-gap-11 {
    gap: var(--gap11);
}

.zr-gap-29 {
    gap: 29px;
}

.zr-gap-64 {
    gap: 4rem;
}


/* ---------font-size-class---------*/
.zr-fz-10 {
    font-size: var(--font-size-1);
}

.zr-fz-12 {
    font-size: var(--font-size-2);
}

.zr-fz-14 {
    font-size: var(--font-size-3);
}

.zr-fz-16 {
    font-size: var(--font-size-4);
}

.zr-fz-18 {
    font-size: var(--font-size-5);
}

.zr-fz-24 {
    font-size: var(--font-size-6);
}

.zr-fz-28 {
    font-size: var(--font-size-7);
}


.zr-fz-32 {
    font-size: var(--font-size-8);
}

.zr-fz-40 {
    font-size: 40px;
}


.zr-login-parent{
    height: 100svh;
    direction: rtl;
}

select{
  height: var(--InputHeight) !important;
}
.sp-color-darkblue {
  color: var(--Primary70);
}
.sp-color-gray{
  color:#C0C0C0;
}
.zr-login-box{
  width: clamp(50%,460px,60%);
  margin: 0 auto;
  max-width: 460px;
  margin-bottom: 72px;
}
.zr-logo-parent {
  margin-bottom: 94px;
      width: 320px !important;
    height: 95px;
   /*margin: auto; */
}
.zr-login-parent::after{
  content: "";
 background: radial-gradient(
   79.03% 121.69% at 39.84% 17.12%,
    #27686c  0%,
   #27686c  15.32%,
    #27686c  27.43%,
    #27686c  41.53%,
   #294c4e 55.14%,
  #294c4e 67.89%, 
   #294c4e 79.59%, 
  #294c4e 89.85%, 
  #294c4e 97.58%);
  
 /* background:radial-gradient(
  circle at 40% 30%,
  #27686c 0%,
  #236364 30%,
  #1c666a 55%,
  #285e62 75%,
  #294c4e 100%
); */
  position: absolute;
  transform: rotate(-180deg);
  width: 50%;
  height: 100%;
  z-index: -2;
  left: 0;
  background-size: 200%;
}
.zr-login-parent::before{
  content: "";
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(150px);
  /* transform: rotate(-180deg); */
  width: 50%;
  height: 100%;
  position: absolute;
  z-index: -1;
  left: 0;
  background-size: 200%;
}
.zr-login-logo{
  max-width: 220px;
}

.zr-login-submit{
  background: linear-gradient(270deg, #CAB982 19.88%, #E0CC8D 49.31%, #CAB982 76.98%);
  color: var(--Primary95);
  max-width: 340px;
  height: 42px;
  padding: 0 0 0.25rem;
  margin-top: 164px !important;
}
:is(.zr-login-submit , .zr-btn-app , .zr-btn-preview):is(:hover,:focus){
  background: var(--Link5) !important;
  outline: 1px solid var(--Link50) !important;
  color: var(--Link50) !important;
  --Primary95: var(--Link50) !important;
}

.sp-row, .sp-r {
  justify-content: space-between;
  flex: 1;
  margin-right: 0px;
  margin-left: 0px;
}
.sp-f-row:not(.sp-d-custom,.sp-d-section,.sp-d-division,.sp-d-checkbox,.sp-d-button,.sp-f-result) {
  background: var(--MainThemeColor);
  outline: 0.5px solid var(--MainThemeColor);
  direction: rtl;
  border-radius: var(--inputrp);
  margin-bottom: var(--MarginRow);
  margin-top: var(--MarginRow);
  width: auto;
  position: relative;
}

.sp-main-loading:after {
  border-radius: var(--xxlargeradius);
  background-size: clamp(100px,200px,50%) clamp(100px,200px,50%);
  z-index: 32;
}

.sp-main-loading:before {
  border-radius: var(--xxlargeradius);
  background: var(--secondgradiant);
  backdrop-filter: blur(3px) brightness(1) saturate(1);
  -moz-backdrop-filter: blur(3px) brightness(1) saturate(1);
  z-index: 30;
}
.sp-f-title, [class*="sp-f-row"] .sp-f-title {
  line-height: 36px;
  display: flex;
  width: auto;
  min-width: var(--widthtitle);
  text-align: right;
  align-items: revert;
  border-radius: 0 var(--inputrp) var(--inputrp) 0;
  font-size: var(--FontFormTitle);
  padding: 0 1.5rem 0 0;
  justify-content: right;
  font-weight: 400;
/*  color: #FFF !important;*/
  white-space: nowrap;
  vertical-align: middle;
}
.sp-f-row:not(.sp-d-button,.sp-d-checkbox,.sp-d-custom,.sp-d-division,.sp-d-section) :is(.sp-form-editor, .sp-f-editor) {
  background-color: var(--InputColor);
  border-radius: var(--inputrp) 0rem var(--inputrp) var(--inputrp);
  outline: 1px solid var(--borderDoccolor);
}
.sp-form-editor, .sp-f-editor {
  padding: 0;
  width: calc(100% - var(--widthtitle));
  flex-direction: row;
}
.sp-captchaImg{
  max-height:var(--InputHeight);
  max-width:120px;
}
.sp-f :is(input[type=text],input[type=password],input[type=number],textarea), :is(input[type=text],input[type=password],input[type=number],textarea), .sp-f-editor>.sp-f-label, .sp-form select, .sp-f select, .sp-form-select, .sp-f-select {
  border: 0;
  margin: 0;
  padding: 0;
  text-align: left;
  border-radius: var(--inputrp) 0 var(--inputrp) var(--inputrp);
  width: 100%;
  padding-left: 0.75rem;
  line-height: 40px;
  vertical-align: middle;
  font-family: 'vazir';
  font-size: var(--xxlargefont);
  font-weight: var(--InputFontWeight);
  background-color: var(--InputColor);
  transition: none !important;
  color: var(--Primary95);
  align-self: center;
}
.sp-form :is(input[type=text] , input[type=password]), .sp-form input[type=password], .sp-form input[type=number], .sp-form textarea, .sp-f input[type=text], .sp-f input[type=password], .sp-f input[type=number], .sp-f textarea, .sp-f-editor>.sp-f-label, .sp-drop-button {
  color: var(--Primary95);
}
.sp-form :is(input[type=text] , input[type=password]), .sp-form input[type=password], .sp-form input[type=number], .sp-form textarea, .sp-f input[type=text], .sp-f input[type=password], .sp-f input[type=number], .sp-f textarea {
  min-height: var(--InputHeight);
  font-size: var(--FontInput);
}

.sp-invalidated.sp-f-row:not(.sp-d-custom,.sp-d-section,.sp-d-division,.sp-d-checkbox,.sp-d-button,.sp-f-readonly) {
  --borderDoccolor: var(--Error30);
  --bgDoccolor: var(--Dangerous20);
  --InputColor: var(--Error5);
  --TitleColor: var(--Primary95);
  --white: var(--Primary95);
}
.sp-invalidated .sp-error-message, .sp-invalidated .sp-f-message {
  display: flex !important;
  background-color: var(--Error5);
  backdrop-filter: blur(2px);
  -moz-backdrop-filter: blur(2px);
  color: var(--Gray95) !important;
  position: absolute;
  outline:1px solid var(--Error50);
  width: 100%;
  font-size: var(--smallfont);
  height: 2.25rem;
  justify-content: center;
  border-radius: var(--inputrp);
  top: calc(100% + 0.5rem);
  left: -36px;
  min-width: 200px;
  width: 200px;
  margin: 0 !important;
  display: flex;
  z-index: 5;
  filter: drop-shadow(-2px 2px 10px rgba(112, 112, 117, 0.3));
  flex-flow: column;
  text-align: center;
  font-weight: 600;
  animation: hiddenAnimation 2s 2s forwards;
}
.sp-invalidated .sp-f-message::before {
  content: "";
  display: block;
  position: absolute;
  width: 14px;
  height: 14px;
  bottom: calc(100% - 6px);
  left: 15px;
  background: var(--Error5);
  line-height: 1rem;
  border-top-right-radius: 5px;
  border: 1px solid red;
  border-left: 0;
  border-bottom: 0;
  transform: rotate(-45deg);
}
.sp-f-row:not(.sp-g-cell .sp-f-row).sp-invalidated:not(.sp-d-checkbox,.sp-f-readonly)::after {
  position: absolute;
  content: '';
  display: block;
  background: url(/themes/manager/images/inputimg/Incorrect.svg);
  width: 32px;
  height: 32px;
  right: calc(100% + 4px);
  background-size: 100% 100%;
  margin: auto;
  top: calc(50% - 12px);
}
.sp-f-row:not(.sp-d-custom,.sp-d-section,.sp-d-division,.sp-d-checkbox,.sp-d-button,.sp-f-result) {
  background: var(--bgDoccolor);
  outline: 0.5px solid var(--borderDoccolor);
}
.sp-form .sp-invalidated .sp-form-message, .sp-f .sp-invalidated .sp-f-message {
  display: block;
}
.sp-f-message {
  display: none;
}
.sp-validated.sp-f-row:not(.sp-d-custom,.sp-d-section,.sp-d-division,.sp-d-checkbox,.sp-d-button,.sp-f-readonly) {
  --borderDoccolor: var(--Approved60);
  --bgDoccolor: var(--Approved5);
  --TitleColor: var(--Gray95);
  --InputColor: var(--Gray5);
  --white: var(--Approved70);
}
.sp-f-row:not(.sp-g-cell .sp-f-row).sp-validated:not(.sp-d-checkbox,.sp-f-readonly)::after {
  position: absolute;
  content: '';
  display: block;
  background: url(/themes/manager/images/inputimg/Correct.svg);
  width: 32px;
  height: 32px;
  right: calc(100% + 4px);
  background-size: 100% 100%;
  margin: auto;
  top: calc(50% - 14px);
  animation: hiddenAnimation 0s 2s forwards;
}
@keyframes ShowAnimation {
  from{opacity:0;visibility: hidden;}
  to{opacity:1;visibility:visible;}
}

@keyframes hiddenAnimation {
  100% {opacity:0;visibility: hidden;}
}

.sp-form-check:before, .sp-f-check:before, .sp-form-radio:before, .sp-f-radio:before {
  height: var(--checkboxheight);
  width: var(--checkboxheight);
  border: 1px solid var(--MainPrimary);
  background-color: var(--InputColor) !important;
  border-radius: 4px;
  position: initial;
  margin: auto -2px;
}
.sp-f-check:checked:before {
  border: 1px solid var(--Approved70);
  --InputColor: var(--Approved5);
}
.sp-f-check:checked:after {
  left: 2px;
  top: 2px;
  display: inline-block;
  transform: rotate(45deg);
  height: calc(var(--checkboxheight) - 7px);
  width: 7px;
  border-bottom: 2px solid var(--Approved70);
  border-right: 2px solid var(--Approved70);
  border-radius: 1px;
}
.zr-loginImg{
  max-width:500px;
}
.zr-loginImg-parent{
  /*margin-bottom:7.5rem;*/
}
.zr-loginImg-title{
  background: linear-gradient(270deg, #CAB982 19.88%, #E0CC8D 49.31%, #CAB982 76.98%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  font-size: 40px;
}
.zr-login-desc{
  color:#F3F3F3;
}

.zr-verifyImg{
  max-width: 685px;
  max-height: 370px;
  object-fit: cover;
}
.zr-code-parent{
  column-gap:1.25rem;
} 
.zr-code-input {
  font-size: 32px;
  color: var(--Primary60);
  width: 42px;
  height: 42px;
}
.sp-f-link{
  color: var(--Link70);
}
 .sp-f-row:not(.zr-role-section .sp-d-section,.sp-f-readonly):focus, .sp-f-row:focus-within, .zr-cheque-remainder .sp-f-append .sp-f-group:focus-within, .sp-f-row:not(.sp-f-readonly):focus-within, .sp-f-row:not(.sp-f-readonly):focus-within, .zr-edited-form .sp-f-row:not(.sp-f-readonly):focus-within, :is(.sp-validated,.sp-invalidated,.zr-edited-row).sp-f-row:not(.sp-d-custom,.sp-d-section,.sp-d-division,.sp-d-checkbox,.sp-d-button,.sp-f-readonly):hover, :is(.sp-validated,.sp-invalidated,.zr-edited-row).sp-f-row:not(.sp-d-custom,.sp-d-section,.sp-d-division,.sp-d-checkbox,.sp-d-button,.sp-f-readonly):focus-within, .zr-edited-form .sp-f-row:not(.sp-d-checkbox,.sp-d-division,.sp-d-button,.sp-invalidated,.sp-f-readonly):hover, .zr-CurrentDocument .sp-f-row:focus-within, .zr-CurrentDocument :is([class*="sp-f-row"]:focus-within .sp-f-title){
  --bgDoccolor: var(--Link5);
  --TempbgDoccolor: var(--Link5);
  --borderDoccolor: var(--Link50);
  --TitleColor: var(--Link50) !important;
  --InputColor: var(--Gray5);
  --Gray95: var(--InputTextColor);
  --white: var(--Link50);

}
.zr-code-input:is(:focus,:hover,:focus-within){
  --Primary60:var(--Link70) !important;
  --secondary:var(--Link70) !important;
  background:var(--Link5);
}
.sp-f-row.sp-d-checkbox:focus-within :is(.sp-form-editor, .sp-f-editor), .sp-f-row.sp-d-checkbox :is(.sp-form-editor, .sp-f-editor):focus-within, .sp-f-row.sp-d-checkbox:hover :is(.sp-form-editor, .sp-f-editor), .sp-f-row.sp-d-checkbox :is(.sp-form-editor, .sp-f-editor):hover {
  --TitleColor: var(--Link50);
  --MainThemeColor: var(--Link50);
  --InputColor: var(--Link5);
  --Approved5: var(--Link5);
  --Approved70: var(--Link50);
}
.sp-f-row.sp-d-checkbox span {
  color: var(--TitleColor);
}
.zr-userocde-parent{
  /* margin: clamp(1rem,7rem,50%) 0 clamp(1rem,9rem,50%);*/
  margin: clamp(1rem,2.5rem,50%) 0 clamp(1rem,1.5rem,50%);
}
.sp-invalid-message{
  color: var(--Error70);
}
.zr-code-input.sp-invalidated{
  color: var(--Error70);
  border-color: var(--Error70);
  outline: 1px solid;
}
input:-webkit-autofill ,input:-moz-autofill,input:-o-autofill , input:-khtml-autofill , input:focus:-webkit-autofill,input:focus:-moz-autofill, input:focus:-o-autofill ,input:focus:-khtml-autofill {
  -webkit-text-fill-color: white !important;
  -webkit-box-shadow: 0 0 0px 1000px white inset;
  -moz-text-fill-color: white !important;
  -moz-box-shadow: 0 0 0px 1000px white inset;
  -o-text-fill-color: white !important;
  -o-box-shadow: 0 0 0px 1000px white inset;
  -khtml-text-fill-color: white !important;
  -khtml-box-shadow: 0 0 0px 1000px white inset;
  -webkit-text-fill-color: white !important;
  -webkit-box-shadow: 0 0 0px 1000px white inset;
  -moz-text-fill-color: white !important;
  -moz-box-shadow: 0 0 0px 1000px white inset;
  -o-text-fill-color: white !important;
  -o-box-shadow: 0 0 0px 1000px white inset;
  -khtml-text-fill-color: white !important;
  -khtml-box-shadow: 0 0 0px 1000px white inset;
}


.zr-btn-app , .zr-btn-preview{
  width: 164px;
  height: 40px;
  justify-content: center;
  outline: 1px solid var(--Primary70);
  border-radius: 0.5rem;
  background: transparent;
  color: var(--Primary70);
  font-weight: 500;
  font-size: 14px;
}
.zr-btn-app::before{
  content:"";
  width:34px;
  height:24px;
  background: url(/themes/manager/icons/login/LoginApp.svg) no-repeat center transparent;
  margin-left:0.75rem;
}
.zr-btn-app:is(:focus,:hover)::before{
  background: url(/themes/manager/icons/login/LoginAppFocus.svg) no-repeat center transparent;
}
.zr-btn-preview::before  {
  content: "";
  width: 24px;
  height: 24px;
  background: url(/themes/manager/icons/baseinformations/PriceBoardBlue.svg) no-repeat center;
  background-size: 100% 100%;
  margin-left: 0.5rem;
}
.zr-btn-preview:is(:focus,:hover)::before {
  background: url(/themes/manager/icons/baseinformations/PriceBoardFocus.svg) no-repeat center;
  background-size: cover;
}
.zr-loginImg-title{
 font-size : 48px !important;
  
}

@media screen and (max-width: 1366px) {
  :root{
    --MarginRow: 1rem;
  }
  .zr-logo-parent {
    margin-bottom: 1.5rem;
  }
  .zr-login-submit{
    margin-top: 2.5rem  !important;
  }
  .sp-my-8 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  .zr-loginImg-parent {
    margin-bottom: 3.5rem;
  }
  .zr-loginImg {
    max-width: 400px;
  }
  .sp-font-exlarge {
    font-size: 20px;
  }
  .zr-btn-app {
    width: 164px;
    height: 32px;
  }
  .zr-btn-app::before {
    width: 28px;
    height: 20px;
    margin-left: 0.25rem;
    background-size: 100% 100% !important;
  }
}

@media screen and (max-width: 790px) {
 .zr-loginLeft{
  display: none !important;
  }

  
  .zr-login-parent::after,
 .zr-login-parent::before
{
  content : unset !important;
    
  }
  
  .zr-whole-log-sec{    
    justify-content: center;
    min-width : 300px !important; 
  }
  
  .zr-login-box{
	width: 100% !important;	
    max-width: calc(100% - 2rem) !important;
  }
  
  .zr-logo-distance{
   justify-content: center !important; 
  }

}


.zr-fit-height{
max-height : fit-content;
}

 .color-title{
 color:#fff !important;  
   
}

.zr-hover-txt:hover  .color-title,
.zr-hover-txt:focus  .color-title
{
 color: #007AFF !important; 
}