/*okienka (field1 i field2); jest to POPIERDOLONE na maksa, field1 niby jest lewe, field2 niby prawe, ale nie można nic zmieniać z nazwami itp., bo inaczej wszystko się sypie*/

input[type="text"], textarea, select, #field2 {
    padding-top: 3px;
    padding-right: 10px;
    padding-bottom: 3px;
    padding-left: 10px;
    border:3px solid #fff;
	font-family: 'Epilogue';
	font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    color: #fff;
    background:none;
	margin-bottom:5px;
}

textarea, #field2 {
    max-height: 320px;
    min-height: 320px;
    width: 100%;
    max-width: 100%;
    resize: none;
    overflow-y: auto;
	outline: none;
	padding-top: 3px;
    padding-right: 10px;
    padding-bottom: 3px;
    padding-left: 10px;
}

#fieldstyle {
    color: #fff;
    background:none;
	font-family: 'Epilogue';
	font-size: 1rem;
	padding-bottom: 3px;
}

#paraphrase-logo {
	max-height: 80px;
    width: 880px;
    max-width: 100%;
}

#reklama {
	height:90px;
	width:728px;
}

#main-form #synonym{background:url('../png/paraphrasing_tool_button.png') no-repeat center;width:100%;height:109px;border: none;}
#main-form #synonym:hover{animation:shake 0.82s cubic-bezier(.36,.07,.19,.97) both;transform:translate3d(0, 0, 0);backface-visibility:hidden;perspective:1000px;}

.display-footer {
  font-family: 'Epilogue', sans-serif;
  font-size: 0.8rem;
  line-height: 1.2;
}


::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #e85a4f;
  opacity: 1; /* Firefox */
  font-weight: 500;
  font-size: 1.1rem;
}

/*scrollbar*/

/* width */
::-webkit-scrollbar {
  width: 12px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #fff;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #bbbbbb;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #bbbbbb;
}  


/*wygląd po kliknięciu na okno - np. czy ramka robi się grubsza itp.*/

/*textarea:focus, #field2:focus, #field1:focus {
    outline: none !important;
    box-shadow: none;
	border:2px solid #000000;
}
*/

/*niby to samo co wyżej, powiązane... chyba, może...*/

/*input:focus {
    outline: none !important;
    box-shadow: none;
}
*/


.close{text-align:center;display:block;margin-bottom:1px;border:2px solid #fff;padding:5px;}
.words{cursor:pointer;}
.words:hover{background:#538ab0;color:#fff;border:1px solid #538ab0;}
.synonyms-list{background:#fff;text-align:center;position:absolute;z-index:2;margin-top:7px;outline:none;border:none;}
.synonyms-list .item{padding:5px 10px;color:#000;font-size:1rem;font-weight:400;}
.synonyms-list .item::selection{background:none;}
.synonyms-list .item::-moz-selection{background:none;}
.synonyms-list .item:hover{background:silver;}
.noselect{-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;}

@keyframes shake{10%, 90%{transform:translate3d(-1px, 0, 0);}
20%, 80%{transform:translate3d(2px, 0, 0);}
30%, 50%, 70%{transform:translate3d(-4px, 0, 0);}
40%, 60%{transform:translate3d(4px, 0, 0);}
}
::-webkit-input-placeholder{color:#ec3939;}
:-moz-placeholder{color:#ec3939;opacity:1;}
::-moz-placeholder{color:#ec3939;opacity:1;}
:-ms-input-placeholder{color:#ec3939;}
::-webkit-scrollbar-corner{background:transparent;}

/* Center the loader */
#loader {
  position: relative;
  z-index: 2;
  height: 109px;
  width: 109px;
  margin: auto auto;   /*130 auto*/
  border: 18px solid transparent;
  border-top: 18px solid #538ab0;
  border-bottom: 18px solid #ce4242;
  border-radius: 50%;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  display:none;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}