.vydborgeo {
  display: flex;
}
.vydborgeo h4 {
  margin: 0px;
}


.vydborgeofilter {
  width: 50%;
  margin-right: 50px;
}

.oblastbox {
  display: block;
  border: 2px #fbb51b6b dashed;
  border-radius: 5px;
  margin-top: 6px;
  column-count: 3;
  padding: 5px;
}

.oblastbox label {
  padding: 5px;
  cursor: pointer;
}

.oblastbox label:hover {
  background-color: #e4e4e49e;
  border-radius: 7px;
}

.goroda {
  width: 46% ;
}

.gorodfilter {
  margin-bottom: 25px;
  //border: 2px #ed1bfb6b dashed;
  //padding: 6px;
 //border-radius: 5px;

}

.gorodfilterfirst {
  
}






















         /* для элемента input c type="checkbox" */
    .custom-checkbox {
      position: absolute;
      z-index: -1;
      opacity: 0;
    }

    /* для элемента label, связанного с .custom-checkbox */
    .custom-checkbox+label {
      display: inline-flex;
      align-items: center;
      user-select: none;
      width: 100%;
    }

    /* создание в label псевдоэлемента before со следующими стилями */
    .custom-checkbox+label::before {
      content: '';
      display: inline-block;
      width: 1em;
      height: 1em;
      flex-shrink: 0;
      flex-grow: 0;
      border: 1px solid #adb5bd;
      border-radius: 0.25em;
      margin-right: 0.5em;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 75% 75%;
    }

    /* стили при наведении курсора на checkbox */
    .custom-checkbox:not(:disabled):not(:checked)+label:hover::before {
      border-color: #ffcc00;
    }

    /* стили для активного чекбокса (при нажатии на него) */
    .custom-checkbox:not(:disabled):active+label::before {
      background-color: #ffcc00;
      border-color: #ffcc00;
    }

    /* стили для чекбокса, находящегося в фокусе */
    .custom-checkbox:focus+label::before {
      box-shadow: 0 0 0 0.2rem #ffb10040;
    }

    /* стили для чекбокса, находящегося в фокусе и не находящегося в состоянии checked */
    .custom-checkbox:focus:not(:checked)+label::before {
      border-color: #ffd980;
    }

    /* стили для чекбокса, находящегося в состоянии checked */
    .custom-checkbox:checked+label::before {
      border-color: #ffcc00;
      background-color: #ffcc00;
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
    }

    /* стили для чекбокса, находящегося в состоянии disabled */
    .custom-checkbox:disabled+label::before {
      background-color: #ffcc00;
    }


    .checkbox {
      margin-bottom: 1em;
      margin-right: 20px;
    }
      .offercss span {
            padding:8px;
            display: inline-block;
            margin: 10px;
            background: #e4e4e49e;
            border-radius: 10px;
            cursor: pointer;
            width: 75%;
         }
         
.offercss {
    column-count: 4;
}
.offercss label  {
            cursor: pointer;}

.markjobscontent span {
            padding:8px;
            border-radius: 10px;
            cursor: pointer;
            display: block;
         }



.markjobscontent label {
            padding:8px;
            background: #e4e4e49e;
            border-radius: 10px;
            cursor: pointer;
            width: 85%;
         }




.markjobsopys li {
 margin: 0;
 padding-left: 20px;
 list-style: none;
 background-image: url("https://superdim.com.ua/offer/techoffer/img/listok.png");
 background-repeat: no-repeat;
 background-position: left center;
 background-size: 16px;
}
.markjobsopys ul {
  padding-left: 5px;
}

.markjobs{
  cursor: default;
}




.markjobscontent label{
  cursor: pointer;
}

.offertextarea {
  width: 60%;
    padding: 0.6em;
    color: #333;
    background: #f7f7f7;
    border: solid 2px #eaeaea;
    border-radius: 10px;
    box-sizing: border-box;
    padding-right: 35px;
    min-height: 125px;
    resize: none; 
    margin-bottom: 25px;
    font-weight: 200;
        font-family: 'Gotham Pro', sans-serif;
}

.offertextarea:focus {
 outline: none;
}



.buttonoffer{
  display: block;
  background: #fbb51b;
  border: 1px solid #fbb51b00;
   width: 30%;
    height: 50px;
    border-radius: 10px;
    box-shadow: 0 0 20px 0px #9a9a9a85;
    cursor: pointer;
    transition: box-shadow 0.3s;
        color: #333;
    font-family: 'Gotham Pro', sans-serif;
    font-weight: 400;

}


.buttonoffer:hover{
  box-shadow: 0 0 15px 0px #9a9a9a;
}

.buttonoffer:active {
box-shadow: inset 0px 0px 10px rgba(0,0,0,0.25);
}


.container {
  max-width: 95%;
  box-shadow: inset 0px 0px 2px 0px #a7a7a78c;
  border-radius: 20px; 
  background: #f2f2f2; 
  padding: 30px;
}

.headercontainer {
    box-shadow: inset 0px 0px 0px 0px;
    background: 0;
    padding: 0;
    border-radius: 0px;
    width: 85%;
}

.reviewjobs {
    background: #fff;
}

.footer_bl_two {
    background: #2d2d2d;
}

.footer_bl_two p {
    color: #fbb51b;
}
.urlfooterjobs {
    color: #fbb51b;
}

.mobileoffer  {
    display: block;
    margin-bottom: 25px;
    color: #666;
}

.mobileoffer input {
    color: #333;
    border: solid 0px #f2f2f2;
    font-family: 'Gotham Pro', sans-serif;
    font-weight: 400;
 width: 300px;
    min-height: 40px;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0px 0px 0px 3px #fbb51b;
}

.mobileoffer input:focus {
    outline: none;
}

.phoneemailofferjobs{
    display: flex;
    align-items: center;
}

.sumbitoffer p{
    margin-bottom: 12px;
    font-size: 17px;
    color: #666;
}
 .offertext {
    margin-right: 20px;
    font-weight: 200;
}

#submitokay{
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0px 0px 5px 2px #c7c7c7;
    width: 30%;
    padding: 10px;
    border-radius: 10px;
    background: #1cb33c;
    margin-top: 0px;
    text-align: center;
    display: none;
}

#submiterror {
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0px 0px 5px 2px #c7c7c7;
    width: 30%;
    padding: 10px;
    border-radius: 10px;
    background: #ec2b2b;
    margin-top: 0px;
    text-align: center;
    display: none;
}

.markjobssale {
    background: #fff;
    margin-bottom: 50px;
    display: inline-block;
    margin: 15px;
    width: 30%;
    box-shadow: inset 0 0 4px 2px #00000029;
    padding: 15px;
    border-radius: 15px;
}

.markjobssale p {
     margin-top: 0px;
}

.markjobssale p:first-child{
    color: green;
    margin-bottom: 10px;
    font-weight: 600;
}
.markjobssale span {
    color: red;
    font-weight: 600;
}

.containerofferflex{
    display: flex;
    align-items: flex-start;
}

.workalloblast {
    column-count: 1;
    border: 2px #5cab206b dashed;
    font-weight: 600;
}

.containerfirstonas {
    padding: 0px;
    max-width: 1152px;
    box-shadow: inset 0px 0px 4px 0px #a7a7a700;
    background: #fff;;
    border-radius: 0px;
    
}

.containerfirstonas h2 {
     margin-bottom: 0px;
     letter-spacing: 0px;
    text-align: left;
}

.footeroffer {
    background: #f2f2f2 100% bottom no-repeat;
}

.how-to-use-list {

  display: flex;
          justify-content: center;
  padding-bottom: 52px; }

.how-to-use-item {
  position: relative;
  display: flex;
     flex-direction: column;
          align-items: center;
  width: 100%;
  max-width: 370px;
  text-align: center; }
  .how-to-use-item::before, 
  .how-to-use-item::after {
    position: absolute;
    content: ''; }
  .how-to-use-item::before {
    top: calc(100% + 20px);
    left: 50%;
    width: 32px;
    height: 32px;
    background-color: #fed700;
            box-shadow: inset 0 0 0 1px #fed700, inset 0 0 0 4px #f2f2f2;
    border-radius: 50%;

            transform: translateX(-50%); }
  .how-to-use-item::after {
    top: calc(100% + 36px);
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #fed700; }
  .how-to-use-item__icon-box {

    display: flex;
    width: 80px;
    height: 80px;
    margin-bottom: 20px; }
  .how-to-use-item__text {
    max-width: 297px;
    font-family: 'Gotham Pro', sans-serif;
    font-size: 15px;
    line-height: 23px; }
    
  .how-to-use-item:first-child::after {
    left: 50%;
    width: 50%; }
    
  .how-to-use-item:last-child::after {
    right: 50%;
    width: 50%; }
    
.how-to-use-item__icon-box img {
    padding-top: 5px;
}


		#percentage-value {
	position: fixed;
    top: 76%;
    left: 87%;
    transform: translateX(-50%);
    height: 126px;
    width: 250px;
    color: #fed702;
    background-color: white;
    text-align: center;
    line-height: 40px;
    box-shadow: 1px 1px 8px 2px #fed702, -1px -1px 8px 2px #fed702;
    font-size: 17px;
    z-index: 1;
		}

#offerstep0 {
  margin: 20px;
  width: 200px;
  height: 200px;
}

#offerstep1 {
  margin: 20px;
  width: 200px;
  height: 200px;
}

#offerstep2 {
  margin: 20px;
  width: 200px;
  height: 200px;
}

#offerstep3 {
  margin: 20px;
  width: 200px;
  height: 200px;
}

.offerstepclass{
    position: fixed;
    left: 80%;
    top: 58%;
    background: #ffffff;
    border-radius: 60%;
    box-shadow: 0 0 0px 10px #dcdcdc;
}

.entry{
   display:none;
}

/* Small Devices, Tablets */
@media only screen and (max-width : 825px) {
#offerstep0 {
        height: 0px;
    width: 0px;
    box-shadow: 0 0 0px 0px #fff0;
    display: none;
    left: 999999999px;
}

#offerstep1 {
    height: 0px;
    width: 0px;
    box-shadow: 0 0 0px 0px #fff0;
    left: 999999999px;
}

#offerstep2 {
        height: 0px;
    width: 0px;
    box-shadow: 0 0 0px 0px #fff0;
    left: 999999999px;
}
#offerstep3 {
        height: 0px;
    width: 0px;
    box-shadow: 0 0 0px 0px #fff0;
    left: 999999999px;
}
.phoneemailofferjobs {
    flex-direction: column;
    align-items: initial;
}
.offertextarea {
    width: 100%;
    min-height: 75px;
}
.buttonoffer {
    width: 100%;
}

.footeroffer {
    padding: 30px;
    padding-bottom: 380px;
    background-size: 300px;
    background-position: center bottom;
}
.markjobs {
    width: 90%;
}

.vydborgeo {
    display: block;
}
.vydborgeofilter {
    width: 100%;
}
.oblastbox {
    column-count: 1;
}
    
    .goroda {
        width: 100%;
        padding-top: 20px;
    }
    
.offercss {
    column-count: 1;
}
.markjobssale {
    width: 90%;
}
.containerofferflex {
    display: block;
}
 .how-to-use-list {
     display: block;
 }   

.how-to-use-item::before {
    display: none;
}    

.how-to-use-item::after {
    display: none;
}

.how-to-use-item{
   padding-bottom: 20px; 
}

.reviewjobs h2 {
    font-size: 22px;
}
.how-to-use-list {
    padding-bottom: 0px;
}

.mobileoffer input {
    width: 100%;
}
.header_two h1 {
    font-size: 28px;
}

.header_first {
    margin-bottom: 50px;
    justify-content: center;
}

#header {
    padding-top: 15px;
    padding-bottom: 70px;
}

.containerfirstonas {
    padding:20px;
}

.reviewjobs{
    padding-top: 35px;
    padding-bottom: 20px;
}

.mobileoffer {
    margin-bottom: 10px;
}

#submiterror {
    width: 100%;
}

#submitokay {
    width: 100%;
}
}