@charset "UTF-8";

.feedback-panel-container {
	padding: 5px;
	background:white;
  border-radius: 4px;
  box-sizing: border-box;
  user-select: none;
  display: grid;
  grid-template-columns: 20px auto 20px;
  grid-template-rows: 20px auto 20px;
  gap: 0px 0px;
  grid-template-areas:
    "feedback-panel-top feedback-panel-top feedback-panel-top"
    "feedback-panel-left feedback-panel-body feedback-panel-right"
    "feedback-panel-bottom feedback-panel-bottom feedback-panel-bottom";
}

.feedback-panel-top {
  grid-area: feedback-panel-top;
}

.feedback-panel-bottom {
  grid-area: feedback-panel-bottom;
}

.feedback-panel-left {
  grid-area: feedback-panel-left;
}

.feedback-panel-right {
  grid-area: feedback-panel-right;
}

.feedback-panel-body {
    display: flex;
    grid-template-columns: auto;
    grid-template-rows: 40px auto;
    gap: 0px 0px;
    /* grid-template-areas:
        "feedback-panel-title"
        "feedback-panel-content"; */
    /* grid-area: feedback-panel-body; */
    flex-direction: column;
}

.feedback-panel-title {
  /*grid-area: feedback-panel-title;*/
  font-size: 24px;
}

.feedback-panel-top-container {
    /*grid-area: feedback-panel-title;*/
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
    justify-content: center;
}
.feedback-icon-svg-container{
    margin-left: auto;
    margin-right: 5px;
    width: auto;
    height: 20px;
    line-height: 29px;
    border-radius: 4px;
    padding: 2px;

}
.feedback-icon-svg-container:hover{
    border-radius: 4px;
    padding: 2px;
    background: var(--col-hover);
}

.feedback-panel-content {
    display: flex;
    grid-template-columns: auto;
    grid-template-rows: auto auto;
    gap: 0px 0px;
    /* grid-template-areas:
        "feedback-panel-content-fields"
        "feedback-panel-content-message"; */
    /* grid-area: feedback-panel-content; */
    flex-direction: column;
}

.feedback-panel-content-fields {
  display: grid;
  grid-template-columns: 84px auto;
  grid-template-rows: 40px 40px 40px;
  gap: 0px 0px;
  grid-template-areas:    
    "feedback-panel-field-name feedback-panel-field-name-input"
    "feedback-panel-field-emeil feedback-panel-field-email-input"
    "feedback-panel-field-theme feedback-panel-field-theme-input";
  grid-area: feedback-panel-content-fields;
  align-items: center;
}

.feedback-panel-field-emeil {
  grid-area: feedback-panel-field-emeil;
}

.feedback-panel-field-name {
  grid-area: feedback-panel-field-name;
}

.feedback-panel-field-theme {
  grid-area: feedback-panel-field-theme;
  /*padding: 6px 4px !important;*/
}

.feedback-panel-field-email-input {
  grid-area: feedback-panel-field-email-input;
}

.feedback-panel-field-name-input {
  grid-area: feedback-panel-field-name-input;
}

.feedback-panel-field-theme-input {
  grid-area: feedback-panel-field-theme-input;

}

.feedback-panel-content-message {
  grid-area: feedback-panel-content-message;
}

.feedback-input {
  font-size: 14px;
  letter-spacing: .2px;
  font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
	padding: 6px 8px 5px 9px;
  /*border: 1px solid #d0d0d0;*/
  border-radius: 3px;
  width: calc(100% - 10px);
  resize: none;
  overflow: hidden;
  /*margin: 4px;*/
  outline: #d0d0d0;
}

.field-label {
  /*padding: 8px 4px;*/
}

.field-label1{
	margin-bottom: 8px;
    margin-top: 8px;
    display: flex;
}

.feedback-theme-input {
  border: 1px solid #d0d0d0;
  border-radius: 3px;
  width: calc(100% - 9px);
  height: 79%;
  margin: 4px 5px 4px 5px;
  outline: none;
}

.feedback-theme-input:active {
  border: 1px solid #d0d0d0;

}

.feedback-theme-input:focus {
  border: 1px solid #d0d0d0;

}

.feedback-textarea {
  height: 180px;
  border: 1px solid #d0d0d0;
  padding: 4px 4px 4px 4px !important;
      overflow-wrap: anywhere;
}

.feedback-btn-container {
  display: flex;
  /*margin-top: 10px;*/
          margin: 10px 4px 0px -4px;
}


.subject-selector-parent {
	  display: flex;
	  border-radius: 4px;
	  border: 1px solid #d0d0d0;
	  align-items: center;
}

.subject-selector-parent:hover {
	background: var(--col-hover);
}

.subject-selector-preview{
	width: calc( 100% - 36px );
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
    text-align: left;
    padding: 6px 8px 5px 9px;
}

.subject-selector-btn{
	width: 34px;
	font-size: 20px;
    margin: 0px 0px 0px 0px;
    border-radius: 0px 4px 4px 0;
    border: 0px solid var(--col-third);
    text-align: center;
}

/*subject-selector-btn-send{*/
/*	background: */
/*}*/

.object-element{
	height: 18px;
    padding: 5px 10px;
    cursor: pointer;
}

.object-element:hover{
	background: var(--col-btn-click);
}

.object-element-container{
	background: white;
	border-radius: 4px;
}

.feed-back-btn{
    color: #8a8a8a;
    border-radius: 4px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 16px;
    /*width: 248px;*/
    height: 32px;
    line-height: 32px;
    border: 1px solid #8A8A8A;
    box-sizing: border-box;
    cursor: pointer;
}

.feed-back-btn:hover{
    background: #F6F6F6;
}
.feed-back-btn:active{
    background: #D1E3FA7A;
}


.feedback-icon{
	margin-right: 8px;    
	align-self: center;
	
    height: 18px;
	
}

.feedback-text{
    width: max-content;
}

.feedback-panel-content-screenshots{
    display: flex;
    margin: 6px 0;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.feedback-panel-content-screenshot-element{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    width: 80px;
    border-radius: 4px;
    border: 1px solid #b0b0b0;
    margin: 6px;
    box-sizing: border-box;
    cursor: pointer;

}

.feedback-panel-content-screenshot-element-disabled{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    width: 80px;
    border-radius: 4px;
    border: 2px solid #F6F6F6;
    margin: 6px;
    box-sizing: border-box;
    cursor: default;
    color: #d2d2d2;
}
.feedback-panel-content-screenshot-element:hover{
    border: 2px solid #F6F6F6;
}

.feedback-panel-content-screenshot-element:active{
    border: 2px solid #D1E3FA7A;
}

.feedback-panel-content-screenshots-container{
    display: flex;
    flex-direction: column;
    margin: 6px 0;
}