@import url('https://fonts.googleapis.com/css?family=Dosis:400,500,600,700,800&subset=latin-ext');

.dosis { font-family: 'Dosis', sans-serif; }

.kayit_form { display: block; position: relative; padding: 15px; margin: 0; background: url("../img/okyanuskayit/mavi_form_ust_gri.jpg") top center no-repeat #00afec; border-radius: 15px; }
.kayit_form > .baslik { display: block; position: relative; padding: 15px 0 0 0; margin: 0; color: #002d87; text-align: center; font-size: 22px; line-height: 1.3em;  }

.okf .form-group { margin-bottom: 5px; }
.okf input { height: auto; padding: 10px; border-radius: 8px; border: none; border-bottom: 2px solid #002D87; color: #000000; }
.okf input:focus { border-bottom: 2px solid #002D87;  }
.okf select { color: #002d87; height: auto; padding: 10px; border-radius: 8px; border: none; border-bottom: 2px solid #002D87; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; }

select.selectok{background-image:linear-gradient(45deg,transparent 50%,#002D87 50%),linear-gradient(135deg,#002D87 50%,transparent 50%);background-position:calc(100% - 20px) calc(1em + 2px),calc(100% - 15px) calc(1em + 2px),calc(100% - 2.5em) .5em;background-size:5px 5px,5px 5px,1px 1.5em;background-repeat:no-repeat}
select.selectok:focus{background-image:linear-gradient(45deg,#002D87 50%,transparent 50%),linear-gradient(135deg,transparent 50%,#002D87 50%);background-position:calc(100% - 15px) 1em,calc(100% - 20px) 1em,calc(100% - 2.5em) .5em;background-size:5px 5px,5px 5px,1px 1.5em;background-repeat:no-repeat;border-color:#002D87;outline:0}

.okf .btn_gonder { display: block; position: relative; padding: 0; margin: 15px auto 5px;  background: url("../img/okyanuskayit/buton_gonder.png"); width: 122px; height: 40px; border: none; }
.okf .btn_gonder:active { top: 1px; }

/*Form Seç*/
@keyframes mobbordercolorrenk {
  from {border-color: #fff;}
  to {border-color:#f2693a;}
}
@keyframes mobseciliform {
  from {background: #fff;}
  to {background:#d8f2fc;}
}
@keyframes mobsecileform {
  from {background: #fff;border-color: #fff; border-bottom: 2px solid;}
  to {background:#faefda;border-color:#f2693a; border-bottom: 2px solid #f2693a;}
}
.mobsecili-alan{
  background: #d8f2fc;
  animation: mobseciliform ;
  animation-duration: 1s;
  
}
.mobsecilecek-alan{
  background: #faefda;
  animation: mobsecileform ;
  animation-duration:1s;
  border-bottom: 2px solid #f2693a;
}
/*Form Seç*/