#activate   {display: grid; gap:20px; }

#activate b {color: var(--black);}

#activate .red  {color: var(--red-form);}

#activate .btn1 {width:260px !important;}

.activate   {padding:40px; background: var(--white-1);}

.btnActivate    {max-width: 300px;}

#enter1 {text-align: center;}

#enter2 {margin-bottom:10px;}

#tmpcode .submit:not(:disabled)  {background: var(--green-1);}

#tmpcode .submit:not(:disabled):hover  {background: var(--green-2); color:var(--green-1);}

.formFields label {position: relative; display: block;}

.e404   {color:var(--gray-txt); font-weight: 700; text-align: center; padding: 60px 0;}

.e404 .e1   {font-size:300%; margin: 0 auto;}

.e404 .e2   {font-size:800%; margin: 0 auto;}

.e404link, .e404link:active, .e404link:visited  {color: var(--green-1);}

.e404link:hover {text-decoration: underline;}



.activateImg    {
    background: var(--white-1) url(/img/activate/1920.webp) no-repeat 50% 50%;
    background-size: cover;
    min-height: 244px;
    border-radius: 16px; 
}

.activateHead   {font-size: 32px; line-height: 36px; font-weight: 700; color: var(--black); text-align: center;}

.activateMess   {font-size: 18px; line-height: 24px; font-weight: 400; color: var(--black); text-align: center; padding-top: 20px;}

#wkCode {font-size: 32px; line-height: 70px; font-weight: 700; color: var(--black); min-height: 250px; width: 360px; border: 1px solid var(--gray-brd); padding:20px; margin: 20px 0; resize: vertical;}

#wkCode::placeholder { white-space: pre-line; }

.order_state    {background: #EBF0E8; text-align: center;}

.code_grid   {text-align: center;}

.red    {color: var(--red-form);}

.act_link   {grid-template-columns: repeat(3, 1fr);}




.finalFoot  {background: var(--white-1); padding: 40px;}

.finalHead  {font-size: 32px; line-height: 36px;}

.finalTxt   {font-size: 18px; line-height: 24px; font-weight: 400; margin:20px 0;}

.finalInfo  {color: var(--black); background: var(--white-2); border-radius: 20px; padding:40px;}

.finalInfo a, .finalInfo a:hover    {color: var(--black);}

.finalHelp  {font-size: 24px; line-height: 28px; margin-bottom: 40px;}

.finalGrid  {grid-template-areas: "f1 f2" "f3 f4"; grid-template-columns: 1fr 1fr; gap: 0; font-weight: 700;}

.f1 {grid-area: f1;}

.f2 {grid-area: f2;}

.f3 {grid-area: f3;}

.f4 {grid-area: f4;}



.flagRu, .flagEaes  {width:36px; height: 24px;}

.finalGrid .flag    {grid-template-columns: 36px 1fr; gap:10px; align-items: center;}

.finalGrid .f1, .finalGrid .f2  {padding-bottom: 20px; border-bottom: 1px solid var(--green-2);}

.finalGrid .f3, .finalGrid .f4 {padding-top: 20px;}

.finalGrid .fPhone, .finalGrid .finalTime, .finalGrid .mail, .finalGrid .site  {grid-template-columns: 20px 1fr; gap:10px; align-items: center;}

.finalGrid .mPhoneIcon  {width:20px; height: 20px;}



.finalGrid .c3, .finalGrid .c4  {margin:0; padding-left:30px;}

.finalGrid .clockIcon, .finalGrid .mailIcon, .finalGrid .siteIcon   {width:24px; height: 24px;}

.finalGrid .site    {margin-bottom: 0;}

.finalGrid .f4  {display: grid; grid-template-columns: minmax(170px,1fr)  minmax(170px,1fr) 1fr;}

.finalGrid .tgwa    {display: grid; grid-template-columns: 24px 24px 1fr; gap: 10px;}

.flagTxt    {color: var(--gray-txt);}



@media screen and (min-width:1280px) and (max-width:1919px){
    
    .activateImg    { background: var(--white-1) url(/img/activate/1280.webp) no-repeat 50% 50%; background-size: cover;}

    .activateHead   {font-size: 28px; line-height: 30px;}

    .activateMess   {font-size: 14px; line-height: 18px;} 

    .finalHead  {font-size: 28px; line-height: 30px;}

    .finalTxt   {font-size: 14px; line-height: 18px;}

    .finalHelp  {font-size: 18px; line-height: 20px;}

    .finalInfo  {padding:30px;}

}
@media screen and (min-width:640px) and (max-width:1279px){
    
    .activateImg    { background: var(--white-1) url(/img/activate/640.webp) no-repeat 50% 50%; background-size: cover;}

    .activate   {padding:20px;}

    .activateHead   {font-size: 24px; line-height: 28px;}

    .activateMess   {font-size: 14px; line-height: 18px;} 

    #activate   {margin-bottom: 40px !important;}

    .act_link   {grid-template-columns: 1fr;}

    .finalHead  {font-size: 28px; line-height: 30px;}

    .finalTxt   {font-size: 14px; line-height: 18px;}

    .finalHelp  {font-size: 18px; line-height: 20px;}

    .finalGrid  {grid-template-areas: "f1" "f3" "f2" "f4"; grid-template-columns: 1fr;}

    .finalGrid .f1, .finalGrid .f3  {padding-bottom: 20px; border-bottom: 1px solid var(--green-2);}

    .finalGrid .f2  {border-bottom:0; padding-top: 20px;}

    .finalGrid .f4  {grid-template-columns: 1fr; padding-top: 0; gap:20px;}

    

}
@media screen and (min-width:360px) and (max-width:639px)   {

    .activateImg    { background: var(--white-1) url(/img/activate/360.webp) no-repeat 50% 50%; background-size: cover;}

    .activate   {padding:20px;}

    .activateHead   {font-size: 20px; line-height: 24px;}

    .activateMess   {font-size: 14px; line-height: 18px;} 

   

    .finalFoot   {margin-bottom: 40px !important;}

    .act_link   {grid-template-columns: 1fr;}

    #wkCode {width:100%; font-size: 24px; line-height: 30px; min-height: 150px;}

    .finalHead  {font-size: 20px; line-height: 24px;}

    .finalTxt   {font-size: 14px; line-height: 18px;}

    .finalHelp  {font-size: 14px; line-height: 16px;}

    .finalFoot, .finalInfo  {padding: 20px;}

    .finalGrid  {grid-template-areas: "f1" "f3" "f2" "f4"; grid-template-columns: 1fr;}

    .finalGrid .f1, .finalGrid .f2, .finalGrid .f3, .finalGrid .f4   {border-bottom: none;}

     .finalGrid .f1, .finalGrid .f3  {padding-bottom: 20px; border-bottom: 1px solid var(--green-2);}

    .finalGrid .f2  {border-bottom:0; padding-top: 20px;}

    .finalGrid .f4  {grid-template-columns: 1fr; padding-top: 0; gap:20px;}

    .finalGrid .f1 .col2, .finalGrid .f3 .col2   {grid-template-columns: 1fr; gap:20px;}

    .mGrid2 {display: grid; grid-template-columns: 1fr; gap: 10px;}

}