$shadowColor: rgba(0, 0, 0, 0.17);
$dustyOrange: #ee6931;
$pineGreenFull: #08322b;
$pineGreenMedium: rgba(8, 50, 43, 0.86);
$pineGreenLow: rgba(8, 50, 43, 0.65);
$greyBlue: #80babe;

$lato: "Lato";
$montserrat: "Montserrat", sans-serif;
$openSans: "Open Sans", sans-serif;

$mobileBreak: 480px;

.tooltip-edit{
  background-color:white;
  max-width:100%;
  max-height:100%;
  box-sizing:border-box;
  padding:0px 20px 20px 20px;
}

.tooltip__languages{
  display:flex;
  justify-content: space-between;
  height:60px;
  align-items:center;
  box-sizing:border-box;
  border-bottom: 1px solid #ccc;

  select{
    width:200px;
    font-size:12px;
    margin-right:10px;
  }

  button{
    border:1px solid #ccc;
    padding:5px 10px;
    color:$pineGreenMedium;
    background-color:white;
    border-radius:4px;
    margin-right:5px;
    cursor:pointer;
    outline:none;
    &:hover{
      background-color:#fafafa;
    }
    &.active{
      border-color:$dustyOrange;
    }
  }
}

.tooltip__language-title{
  font-size:14px;
  font-weight:bold;
  font-family: 'Open Sans', 'Arial';
  margin-right:10px;
}

.tooltip__content{
box-sizing:border-box;
padding:20px;
width:100%;
display:flex;
}

.tooltip__image{
  display:flex;
  align-items:center;
  margin-bottom:10px;
}
.tooltip__image-holder{
  height:100px;
  width:100px;
  margin-right:10px;
  &.logo{
    height:32px;
    width:32px;
  }
  img{
    width:100%;
    height:100%;
    object-fit: cover;
  }
  .tooltip__image-placeholder{
    width:100%;
    height:100%;
    border:1px dashed gray;
  }
}

.tooltip__col{
  margin-right:30px;
  position:relative;
  &.second::after{
    content:'';
    position:absolute;
    left:-15px;
    top:10%;
    height:80%;
    width:1px;
    background-color:gray;
  }
}

.tooltip__inputs{
  display:flex;
  flex-direction: column;
  
  label{
    font-family: 'Open Sans';
    font-size:12px;
    color:$pineGreenMedium;
    margin-bottom:10px;
  }

  input{
    margin-top:5px;
    display:block;
    font-family:'Open Sans', 'Arial';
    color:$pineGreenMedium;
    font-size:13px;
    padding:3px 6px;
    border-radius: 2px;
    border:1px solid #ccc;
    outline:none;
    width:200px;
    box-sizing:border-box;
    &:focus{
      border:1px solid $dustyOrange;
    }
  }
  textarea{
    margin-top:5px;
    display:block;
    font-family:'Open Sans', 'Arial';
    color:$pineGreenMedium;
    font-size:13px;
    padding:3px 6px;
    border-radius: 2px;
    border:1px solid #ccc;
    outline:none;
    width:200px;
    height:200px;
    box-sizing:border-box;
    &:focus{
      border:1px solid $dustyOrange;
    }
  }
}