/**
* This file is part of an ADDON for use with LEPTON Core.
* This ADDON is released under the GNU GPL.
* Additional license terms can be seen in the info.php of this module.
*
* @module          Droplets
* @author          LEPTON Project
* @copyright       2010-2020 LEPTON Project
* @link            https://lepton-cms.org
* @license         http://www.gnu.org/licenses/gpl.html
* @license_terms   please see info.php of this module
*
*/

#droplets {margin-top:20px;}
#droplets h1 {display:inline-block; margin-bottom: 24px;font-size:24px;}
#droplets table.droplets {background-color:white;width:100%;}
#droplets table.droplets thead {font-weight:bold;background-color:#c7d1db !important;height:25px;}
#droplets table.droplets th {background-color: #EEE;padding: 4px;text-align:left;}
#droplets a.tooltip span.comment {display:none; margin-left:14px; width:430px;}
#droplets a.tooltip:hover span.comment{display:inline; position:absolute; padding:5px; border:1px solid #000000; background:#ffffff; color:#000000;}
#droplets span.usage {font-weight:bold;}
#droplets fieldset{border:none;padding:0px;}
#droplets legend{font-size:18px;color: #345707;padding:0;margin:15px 0;}
#droplets label, #droplets span.label {width:200px;margin-right:5px;margin-left: 5px;padding-top:5px;font-weight:bold;}
#droplets input[type=text], #droplets textarea {width:600px;}
#droplets input[type=submit] {width:250px;}
#droplets div.problem {border:2px solid #f00;padding:15px;background-color:#FFCCCC;font-size:1.2em;font-weight:bold;text-align:center;color:#f00;}
#droplets div.info {border:2px solid #006600;margin:15px auto;padding:15px;background-color:#CCFFCC;font-size:1.2em;font-weight:bold;text-align:center;color:#060;}
/* addition 2.0.2 */
#code { display: block; width: 100%; height: 300px; }
.droplet-v-spacer { display: block; float: left; width: 100%; height: 20px; }
.radio_label {float: left;display: block;width: 50px !important;overflow: hidden;text-align: left !important;}
#active_y, #active_n {float: left;width: 24px;}
th {padding-left: 10px !important;}
th input[type='checkbox'] {margin-right: 10px;}
#droplets td {padding-left: 11px !important;}
.spacer {height: 24px;width:100%;}
input[type='checkbox']{display:inline-block;margin-right: 10px;}
label {text-align: left !important;margin-right: 30px !important;}
.bottom_save {clear:both;}
.th_160 {width:160px;}
.th_50 {width:50px;}
td.mob_title{display:none;}
span.label { float: left !important; }

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ RESPONSIVE ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
@media only screen and (max-width: 1220px) {
#droplets table.droplets {padding:20px 0;box-sizing:border-box;}
#droplets tr:first-child {display:none;}
#droplets tr:nth-child(odd) {background:#eee;}
#droplets tr:nth-child(even) {background:#fff;}
#droplets td:first-child {padding-top:20px !important;}
.container #droplets:nth-child(even) {display:inline-block;}
td.mob_title {display:block;font-family:'LatoWebBold',sans-serif;font-weight:normal;font-size:15px;}
td.th_50, td.th_160 {display:block;width:100%;}
.container td:nth-child(4) {font-family:'LatoWebBold',sans-serif;font-weight:normal;font-size:18px;color:#345707;}
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
@media only screen and (max-width: 580px) {/* reset pin */
#droplets input[type=submit] {width:100%;}
#droplets label, #droplets span.label {float:none;}
.perm_item {display:block;}
}