/*css commit my    */


body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    overflow: hidden;
    font-family: 'Open Sans', sans-serif;
}

.cls_frm_mn {
  
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: 520px;
  height: 320px;
  gap: 10px;
  background-color: #fff;
  border: 1px solid #D1D0DB;
  border-radius: 15px;
  padding: 45px 80px 45px 80px;
  box-shadow: 0px 0px 40.7px rgba(21, 23, 70, 0.05);
}

#div_form_sign_u {
  width: 357px;
  height: 210px;
  gap: 30px;
  /* display: grid; */
}

.cls_div_bd_btn_bbb {
  width: 357px;
  /* gap: 20px; */
  display: flex;
  align-items: center;
  flex-direction: column;
}

.cls_cls_div_bd_btn_bbb_txt {
  height: 55px;
  gap: 10px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;

  margin-bottom: 20px;
}

.cls_cls_div_bd_btn_bbb_txt_r1 {
  font-family: "Open Sans";
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  display: inline;
  line-height: 100%;
  letter-spacing: 0;
  color: #000;
}

.cls_cls_div_bd_btn_bbb_txt_r2 {
  font-family: "Open Sans";
  font-size: 13px;
  font-weight: 400;
  text-align: center;
  display: inline;
  line-height: 100%;
  letter-spacing: 0;
  color: #000;
}


.g_id_signin_wrapper {
  width: 100%;
  height: 50px;
  background: #FFFFFF;
  border: 1px solid rgba(28, 28, 28, 0.1);
  border-radius: 70px;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Стилізація самого iframe Google кнопки (не завжди працює стабільно) */
.g_id_signin > div {
  width: 100% !important;
  height: 100% !important;
  border-radius: 70px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px 24px !important;
  box-sizing: border-box;

    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
  
}

.g_id_signin .nsm7Bb-HzV7m-LgbsSe {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;

  font-family: 'Open Sans', sans-serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: 20px !important;

  display: flex !important;
  align-items: center !important;
  text-align: center !important;

  color: #1C1C1C !important;
}




/*
.box {
  position: relative;
}

.box::before {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  background: linear-gradient(45deg, #ececec, var(--site-txt-color-orange), #ececec, var(--site-txt-color-orange));
  background-size: 200% 100%;
  border-radius: 10px;
  z-index: -1;
  animation: rotate-border 3s linear infinite;
}

@keyframes rotate-border {
  0% {
      background-position: 0% 50%;
  }
  100% {
      background-position: 100% 50%;
  }
}

.box:hover::before {
  animation-play-state: paused;
}
*/








.container {
    position: relative;
    z-index: 2;
}

.container_a_f {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}

.background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}
/*позиціювання лопастей при resize*/
.windmill {
    position: absolute;
    width: 15vw;
    height: auto;
    transform-origin: center center;
    animation: spin 20s linear infinite;
    pointer-events: none;
}

@keyframes spin {
    from {
      -moz-transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    to {
      -moz-transform: rotate(360deg);
      -webkit-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      transform: rotate(360deg);
    }
}









/* logo */

.g-signin2 {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}
  
  .abcRioButtonLightBlue {
    background-color: #fff;
    color: #757575;
    cursor: pointer;
  }
  .abcRioButtonContentWrapper {
    height: 100%;
    width: 100%;
    border: 1px solid #e5e9f2;
    border-radius: 5px;
  }
  .abcRioButtonIcon {
    float: left;
  }
  .abcRioButtonContents {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.21px;
    margin-left: 6px;
    margin-right: 6px;
    vertical-align: top;
  }

.abcRioButton:hover {
    box-shadow: 0 0 1px 1px gray;
    border-radius: 5px;
}

.nsm7Bb-HzV7m-LgbsSe{
  border:1px solid var(--site-txt-color-orange);
}

form.cls_kljbdlfs{
  margin-top: 5px;
}



  /*
  <!-- <div class="lwrapperl">
                      <svg class="cls_svg_lltp">
                          <text x="50%" y="50%" dy=".35em" text-anchor="middle">
                              <tspan class="plus">+</tspan>
                              <tspan dx="-20" class="left">&lt;</tspan>
                              <tspan dx="-10" class="rest">NESS</tspan>
                          </text>
                      </svg>
                  </div> -->
  */



svg.cls_svg_lltp {
    font-family: "Russo One", sans-serif;
    width: 100%; 
    height: 100%;
  }
  svg.cls_svg_lltp text {
    font-size: 48px;
  }
  svg.cls_svg_lltp .plus {
    animation: stroke-plus 5s alternate;
    stroke-width: 2;
    stroke: #808080;
  }
  svg.cls_svg_lltp .left {
    animation: stroke-left 5s  alternate;
    stroke-width: 2;
    stroke: #FFC328;
  }
  svg.cls_svg_lltp .rest {
    animation: stroke-rest 5s infinite alternate;
    stroke-width: 2;
    stroke: #FFC328;
  }
  
  @keyframes stroke-plus {
    0%   {
        fill: rgba(128,128,128,0); 
        stroke-dashoffset: 25%; 
        stroke-dasharray: 0 50%; 
        stroke-width: 2;
    }
    70%  {fill: rgba(128,128,128,0); }
    80%  {fill: rgba(128,128,128,0); 
        stroke-width: 3; 
    }
    100% {
        fill: rgba(128,128,128,1); 
        stroke: rgba(128,128,128,0);
        stroke-dashoffset: -25%; 
        stroke-dasharray: 50% 0; 
        stroke-width: 0;
    }
  }
  
  @keyframes stroke-left {
    0%   {
        fill: rgba(255,195,40,0); 
        stroke-dashoffset: 25%; 
        stroke-dasharray: 0 50%; 
        stroke-width: 2;
    }
    70%  {fill: rgba(255,195,40,0); }
    80%  {fill: rgba(255,195,40,0); 
        stroke-width: 3; 
    }
    100% {
        fill: rgba(255,195,40,1); 
        stroke: rgba(255,195,40,0);
        stroke-dashoffset: -25%; 
        stroke-dasharray: 50% 0; 
        stroke-width: 0;
    }
  }
  
  @keyframes stroke-rest {
    0%   {
        fill: rgba(255,195,40,0); 
        stroke-dashoffset: 25%; 
        stroke-dasharray: 0 50%; 
        stroke-width: 2;
    }
    70%  {fill: rgba(255,195,40,0); }
    80%  {fill: rgba(255,195,40,0); 
        stroke-width: 3; 
    }
    100% {
        fill: rgba(255,195,40,1); 
        stroke: rgba(255,195,40,0);
        stroke-dashoffset: -25%; 
        stroke-dasharray: 50% 0; 
        stroke-width: 0;
    }
  }
  
  .lwrapperl {
    background-color: #FFFFFF;
  }