.sheet-row .sheet-col { display: block; position: relative; width: 100%; } .sheet-col .repcontainer { margin-bottom: 20px; } .sheet-col .repcontainer .repitem { margin-bottom: 10px; } .sheet-col .sheet-input { display: block; position: relative; width: 100%; margin-bottom: 20px; } .sheet-col .sheet-input input, .sheet-col .sheet-input select, .sheet-col .sheet-input textarea { display: block; width: 100%; border-top: none; border-right: none; border-bottom: 1px solid #395f64; border-left: none; } .sheet-col .sheet-input textarea { height: auto; } .sheet-col .sheet-input input:focus, .sheet-col .sheet-input select:focus, .sheet-col .sheet-input textarea:focus { outline: none; border-bottom-width: 3px; margin-bottom: -3px; } .sheet-col .sheet-input input + label, .sheet-col .sheet-input select + label { display: inline-block; width: auto; position: absolute; top: 0; left: 0; z-index: 2; font-size: 1em; margin-top: -15px; } .sheet-box { margin-bottom: 20px; } .sheet-box.sheet-box-bordered { border: 1px solid #395f64; } .sheet-box .sheet-box-header { background-color: #395f64; color: #ffffff; padding: 10px; font-size: 1.2em; text-align: center; } .sheet-box .sheet-box-body { padding: 5px; } .sheet-box .sheet-box-body .sheet-box-row { display: block; width: 100%; margin: 1% -1%; } .sheet-box .sheet-box-body .sheet-box-row .sheet-box-col { display: inline-block; margin: 0 1%; } .sheet-box .sheet-box-body .sheet-box-row .sheet-box-col input, .sheet-box .sheet-box-body .sheet-box-row .sheet-box-col textarea { display: block; width: 100%; border-top: none; border-right: none; border-bottom: 1px solid #395f64; border-left: none; } .sheet-box .sheet-box-body .sheet-box-row .sheet-box-col textarea { height: auto; } .sheet-box .sheet-box-body .sheet-box-row .sheet-box-col input:focus, .sheet-box .sheet-box-body .sheet-box-row .sheet-box-col textarea:focus { outline: none; border-bottom-width: 3px; margin-bottom: -3px; } .sheet-box .sheet-box-body .sheet-box-row .sheet-box-col.sheet-with-hexagon { position: relative; display: inline-block; } .sheet-box .sheet-box-body .sheet-box-row .sheet-box-col.sheet-with-hexagon .sheet-hexagon-wrapper { display: inline-block; } .sheet-box .sheet-box-body .sheet-box-row .sheet-box-col.sheet-with-hexagon .sheet-hexagon-wrapper input { position: absolute; top: -23px; right: -10px; display: inline-block; width: 60px; height: 60px; background: transparent; border: none; z-index: 2; text-align: center; font-size: 1.7em; } .sheet-box .sheet-box-body .sheet-box-row .sheet-box-col.sheet-with-hexagon .sheet-hexagon-wrapper img { position: absolute; top: -20px; right: 0; max-height: 60px; width: auto; } .sheet-col .sheet-title { display: block; font-size: 1.5em; font-weight: 700; } .sheet-col .sheet-subtitle { display: block; } .sheet-rolltemplate-default table { border: 1px solid #395f64; } .sheet-rolltemplate-default caption { background-color: #395f64; text-align: center; }