﻿.title{
  --color_back: #0f104d;
  --color_fore: #fff;
  --color_border: #5f6069;
  
  position:relative; float:left;
  display:flex; justify-content:space-between; align-items:center;
	font-size: 1rem;
  height:2.5rem; width:96%;
  padding-left:10px; padding-right:10px;
  margin-bottom:0.1rem;
  border: 1px solid var(--color_border); border-radius: 8px;  background-color: var(--color_back);  color:var(--color_fore); 
  margin: 2%;
  .sub_title{width:40%;}
}

.box_content{
  position:relative; display:inline-block; float:left;
  width:100%; height:auto; min-height:3rem;
  margin-top:1rem; margin-bottom:0.5rem;
  border: 1px solid #5f6069; border-radius: 8px;
  padding:5px;
  padding-top:2rem;
  
  & section{
    position:absolute; top:0; z-index:9; left:0; background-color:#735f4a; color:#fff;
    width:auto; padding-left:3.5%; padding-right:3.5%; height:1.4rem; padding-top:1px;
    border-radius: 6px 0px 0px 0px; 
  }
}

.edit{
  position:relative; display:inline-block;  float:left;
  border: 1px gray solid;
	/* font-size: 1rem; */
  /* height:3rem; */
  font-size: clamp(0.6rem, 1.55vw, 1.1rem) !important;
  height:clamp(2.5rem, 4.3vw, 3.1rem) !important;
  margin-bottom:0.3rem;
  border-radius:5px; overflow:hidden; background-color: rgb(220, 220, 220);
  & * {box-sizing: border-box; position:absolute;	padding-left:5px; padding-right:5px; width:100%;}
  & *:focus{border-bottom: 0px red solid;}
  & *:focus + label{font-weight:400; background-color:#735f4a;}

  & label{
    padding-top:0.1em;
    height:1.5em; 
    font-size: 0.8em!important; 
    text-align:left;
    top:0rem; left:0;
    background-color:rgb(121 118 116);
    color:#fff;
    letter-spacing: 0.8px; 
    /* 0.06rem;  color:#eea34b;*/
  }
  & input{
    height:1.8em; 
    border:0;
    font-size: 0.85em!important; 
    top:1.5em; left:0;
    background-color:transparent; color:#000;
  }
  & select{
    padding-left:3px; padding-right:3px;
    height:1.6em; padding-top:0.1em; padding-bottom:0em;
    border:0;
    font-size: 0.85em!important; 

    top:1.5em; left:0;
    background-color:transparent; color:#000; 
  }
  & textarea{
    padding:5px;
    height:6.5em;
    border:0;
    font-size: 0.8em; 
    top:1.5em; left:0;
    background-color:transparent; color:#000;
  }
  & article{
    padding:8px;padding-top:0.4em;
    height:1.8em;
    font-size: 0.8em; 
    top:0em; left:0;
    background-color:transparent; color:#000;
  }
}
.edit_empty{border:0!important;background-color:unset!important;}
.edit:hover{border: 1px #eea34b solid; }
.tah{min-height:8em;}

.btn_edit{
  position:relative; float:left;
	/*font-size: 1rem;
  height:3rem;*/
  font-size: clamp(0.6rem, 1.4vw, 1.1rem) !important;
  height:clamp(2.5rem, 4.3vw, 3.1rem) !important;

  margin-bottom:0.3rem;
  border-radius:3px; overflow:hidden; background-color: transparent;
  font-family: 'Roboto';
  display:inline-flex; justify-content:center; align-items:center;

  & *{cursor:pointer;}

  & button{
    width:90%;
    /* background:var(--btn_main); */
    background-color: #735f4a;
    color:var(--btn_fig_fore);color:#fff;
    border-style:none;
    display:flex; justify-content:center; align-items:center;
    font-size:1em; font-weight:500;
    border-radius: 30px;
    height: 85%;
    transition: 0.25s

    & span {padding-left:5px; font-size:1.6rem;}
  }
  & button:hover{transform: scale(1.05);}

  & a{
    width:90%;
    /* background:var(--btn_main); */
    background-color: #735f4a;
    color:var(--btn_fig_fore);color:#fff;
    border-style:none;
    display:flex; justify-content:center; align-items:center;
    font-size:1em; font-weight:500;
    border-radius: 30px;
    height: 85%;
    transition: 0.25s

    & span {padding-left:5px; font-size:1.6rem;}
  }
  & a:hover{transform: scale(1.05);}
}

@media only screen and (min-width : 300px) and (max-width : 580px){
  .title{
    /* display:flex; justify-content:space-between; align-items:center;
	font-size: 1rem;
  height:2.5rem; width:96%;
  padding-left:10px; padding-right:10px; */
  .sub_title{width:80%;}
}
  .edit{font-size: clamp(0.9rem, 1.55vw, 1.3rem) !important;}
  .btn_edit{ font-size: clamp(0.9rem, 1.55vw, 1.3rem) !important;}

}