/******************************************************
Feedback
******************************************************/
.csn-feedback-knapp {
   box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
   border-radius: 4px;
   transition: opacity 0.1s ease-out;
   background-color: #3c1e5f !important;
   color: #fff !important;
   font-weight: 400 !important;
   line-height: 1.5 !important;
   padding: 0.625rem 1rem !important;
   border: none !important;
   cursor: pointer !important;
   text-decoration: none;
   font-family: -apple-system, San Francisco, Segoe UI, Roboto, Helvetica Neue, system, Arial, sans-serif;
   font-size: 16px;
}

.csn-feedback-knapp:hover{
   opacity: 0.8;
}

.csn-modal-feedback--content > .csn-formatmall-brodtext{
   max-width: 595px;
   text-align: left;
}

.csn-feedback-brodtext{
   text-align: center !important;
}

.csn-betyg-buttons{
   white-space: normal;
   display: inline-block;
}

.csn-betyg-buttons > input{
   display: inline-block !important;
   border-bottom: none !important;
   float: none !important;
   border: none !important;
   -webkit-appearance: none;
   -webkit-border-radius:0; 
   border-radius:0;
}

.csn-betyg-buttons > input:hover{
   cursor: pointer;
   opacity: 0.8;
}

.csn-betyg-buttons > div{
   display: inline-block;
   margin: 0 1rem;
}

.csn-feedback-betyg-kontextuellt{
   display:none;
   margin-top: 1.5rem;
   margin-bottom: 1rem;
   padding: 1rem;
   width: 50%;
}

.js .csn-feedback-betyg-kontextuellt{
    display:block;
}

.csn-feedback-betyg-kontextuellt > form > .sv-text-portlet > .sv-text-portlet-content > .csn-formatmall-brodtext{  
   float: left;
   line-height: 2.5rem;
}

.csn-feedback-betyg-kontextuellt-svar{
   background-color: #eaeaea;
   padding: 1rem;
   padding-bottom: 2rem;
}

.csn-betyg-kontext-tack{
   font-size: 1.5rem;
}

.csn-feedback-epost > form > .sv-defaultFormTheme > .sv-formFieldRow > .sv-formField{
   margin-bottom: 0;
}

.csn-feedback-epost > form > .sv-defaultFormTheme > .sv-formFieldRow > .sv-formField > div:nth-child(2) {
   border: 1px solid rgba(0, 0, 0, 0.73);
   border-radius: 4px;
}

.csn-feedback-epost > form > .sv-defaultFormTheme > .sv-formFieldRow > .sv-formField > div > textarea {
   border: 1px solid transparent;
   color: rgba(0, 0, 0, 0.87);
   font-family: Roboto, sans-serif;
   border-radius: 2px;
   padding-top: 16px;
   padding: 16px;
   -webkit-font-smoothing: antialiased;
   letter-spacing: 0.04em;
   width: 100%;
   height: 100%;
   transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);
   background: none;
   font-size: inherit;
   -webkit-appearance: none;
   line-height: 1.15;
   margin: 0;
   overflow-y: auto;
}

.csn-feedback-epost > form > .sv-defaultFormTheme > .sv-formFieldRow > .sv-formField > input {
   margin-top: 10px;
}

.csn-feedback-epost > form > .sv-defaultFormTheme > .sv-formFieldRow > .sv-formField > div > textarea:focus {
   outline: none !important;
   box-shadow: none;
   border-color: #212121;
}

.csn-feedback-epost-kontextuellt > form > .sv-defaultFormTheme > .sv-formFieldRow > .sv-formField{
   margin-bottom: 0;
}

.csn-feedback-epost-kontextuellt > form > .sv-defaultFormTheme > .sv-formFieldRow > .sv-formField > div:nth-child(2) {
   border: 1px solid rgba(0, 0, 0, 0.73);
   border-radius: 4px;
}

.csn-feedback-epost-kontextuellt > form > .sv-defaultFormTheme > .sv-formFieldRow > .sv-formField > div > textarea {
   border: 1px solid transparent;
   color: rgba(0, 0, 0, 0.87);
   font-family: Roboto, sans-serif;
   border-radius: 2px;
   padding-top: 16px;
   padding: 16px;
   -webkit-font-smoothing: antialiased;
   letter-spacing: 0.04em;
   width: 100%;
   transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);
   background: none;
   font-size: inherit;
   -webkit-appearance: none;
   line-height: 1.15;
   margin: 0;
}

.csn-feedback-epost-kontextuellt > form > .sv-defaultFormTheme > .sv-formFieldRow > .sv-formField > input {
   margin-top: 10px;
}

.csn-feedback-epost-kontextuellt > form > .sv-defaultFormTheme > .sv-formFieldRow > .sv-formField > div > textarea:focus {
   outline: none !important;
   box-shadow: none;
   border-color: #212121;
}
/* Åter aktivera när captcha införs!*/
/* .csn-feedback-captcha-varning { 
   font-size: .75rem;
   color: #ee7c7d;
   width: 300px;
   position: relative;
   text-align: initial;
   margin: auto auto 0.3em auto !important;
   padding-left: 2px;
}

.csn-feedback-captcha-varning > svg {
   position: relative;
   float: right;
}

.csn-feedback-epost > form > div > div:nth-of-type(3) > div > div:nth-of-type(2),
.csn-feedback-epost-kontextuellt > form > div > div:nth-of-type(3) > div > div:nth-of-type(2){
   width:300px;
   margin: auto;
   height: 75px;
   overflow: hidden;
   transition: box-shadow .2s ease;
   border: 1px solid rgba(0, 0, 0, 0.73);
   border-radius: 4px;
}

.csn-feedback-epost > form > div > div:nth-of-type(3) > div,
.csn-feedback-epost-kontextuellt > form > div > div:nth-of-type(3) > div {
	margin-top: 1em;
}


.csn-feedback-robot-ejfylld{
   border-color: #ee7c7d !important;
}*/


@media (max-width: 768px){
   .csn-modal-feedback{
      overflow-y: scroll;
   }
   
   .csn-modal-feedback--content > .csn-formatmall-brodtext{
      text-align: center;
   }

   .csn-feedback-betyg-kontextuellt > form > .sv-text-portlet > .sv-text-portlet-content > .csn-formatmall-brodtext{  
      float: none;
   }

   .csn-feedback-betyg-kontextuellt > form > .sv-text-portlet > .sv-text-portlet-content > .csn-betyg-buttons{
      margin-left: 0;
   }

   .csn-feedback-betyg-kontextuellt{
      margin-top: 0;
      padding-top: 0;
      width: 90%;
   }

   .csn-feedback-betyg-kontextuellt > form > .sv-text-portlet > .sv-text-portlet-content > div{
      white-space: nowrap;
   }
   
   .csn-feedback-epost > form > .sv-defaultFormTheme > .sv-formFieldRow > .sv-formField > div > textarea:focus {
      width: 100.03%;
   }

   .csn-feedback-epost-kontextuellt > form > .sv-defaultFormTheme > .sv-formFieldRow > .sv-formField > div > textarea:focus {
      width: 100.03%;
   }
}