1.container { 2 display: flex; 3 gap: 50px; 4} 5 6.container-newsPreview { 7 margin: auto; 8 width: 50%; 9 padding: 10px; 10} 11 12.container-template { 13 padding: 0.5rem; 14 /* border:2px solid black; */ 15 border-radius: 2px; 16 width: auto; 17} 18 19/* .container-buttons { 20 display: flex; 21} */ 22 23div input { 24 margin-top: 5px; 25 padding: 6px; 26 border-radius: 2px; 27} 28 29#lnews { 30 padding: 0px; 31 width: 350px; 32 height: 150px; 33 padding: 5px; 34 /* display: inline-block; */ 35 36} 37form div { 38 padding-bottom: 8px; 39} 40 41input[type=submit] { 42 padding: 10px 50px; 43 background: #4959ee; 44 color: white; 45 border: none; 46 border-radius: 4px; 47 cursor: pointer; 48 /* padding-left: 20px; */ 49} 50input[type=submit]:hover { 51 background: #2b3cd3; 52} 53 54.container-dates { 55 display: flex; 56 gap: 20px; 57} 58 59 60/* Customize the label (the container) */ 61.container-checkbox { 62 display: block; 63 position: relative; 64 margin-top: 4px; 65 padding-left: 35px; 66 margin-bottom: 12px; 67 cursor: pointer; 68 font-size: 22px; 69 -webkit-user-select: none; 70 -moz-user-select: none; 71 -ms-user-select: none; 72 user-select: none; 73 padding-bottom: 10px; 74} 75 76/* Hide the browser's default checkbox */ 77.container-checkbox input { 78 position: absolute; 79 opacity: 0; 80 cursor: pointer; 81 height: 0; 82 width: 0; 83} 84 85/* Create a custom checkbox */ 86.checkmark { 87 position: absolute; 88 top: 0; 89 left: 0; 90 height: 25px; 91 width: 25px; 92 border-radius: 1px; 93 background-color: rgb(197, 196, 196); 94} 95 96/* On mouse-over, add a grey background color */ 97.container-checkbox:hover input ~ .checkmark { 98 background-color: rgb(133, 133, 133); 99} 100 101/* When the checkbox is checked, add a blue background */ 102.container-checkbox input:checked ~ .checkmark { 103 background-color: #2196F3; 104} 105 106/* Create the checkmark/indicator (hidden when not checked) */ 107.checkmark:after { 108 content: ""; 109 position: absolute; 110 display: none; 111} 112 113/* Show the checkmark when checked */ 114.container-checkbox input:checked ~ .checkmark:after { 115 display: block; 116} 117 118/* Style the checkmark/indicator */ 119.container-checkbox .checkmark:after { 120 left: 9px; 121 top: 5px; 122 width: 5px; 123 height: 10px; 124 border: solid white; 125 border-width: 0 3px 3px 0; 126 -webkit-transform: rotate(45deg); 127 -ms-transform: rotate(45deg); 128 transform: rotate(45deg); 129} 130 131.tooltip { 132 position: relative; 133 display: inline-block; 134 cursor: pointer; 135 padding-bottom: 0; 136 /* border-bottom: 1px dotted black; */ 137} 138 139.tooltip .tooltiptext { 140 visibility: hidden; 141 width: 120px; 142 background-color: rgb(207, 207, 207); 143 color: #fff; 144 text-align: center; 145 border-radius: 3px; 146 padding: 5px; 147 /* padding: 5px 0; */ 148 font-size: 12px; 149 150 /* Position the tooltip */ 151 position: absolute; 152 z-index: 1; 153 bottom: 100%; 154 left: 50%; 155 margin-left: -60px; 156} 157 158.tooltip:hover .tooltiptext { 159 visibility: visible; 160} 161 162.text-options img { 163 cursor: pointer; 164} 165.text-options { 166 padding: 0; 167} 168 169.info-message { 170 display: none; 171 animation: fadeInAnimation ease 1s; 172 position: fixed; 173 bottom: 15px; 174 right: 15px; 175 padding: 15px; 176 padding-left: 80px; 177 padding-right: 80px; 178 color: white; 179 background-color: #01b101bb; 180 border-radius: 3px; 181} 182.error-message { 183 display: none; 184 animation: fadeInAnimation ease 1s; 185 position: fixed; 186 bottom: 15px; 187 right: 15px; 188 padding: 15px; 189 padding-left: 80px; 190 padding-right: 80px; 191 color: white; 192 background-color: #b10101bb; 193 border-radius: 3px; 194} 195@keyframes fadeInAnimation { 196 0% { 197 opacity: 0; 198 bottom: -45px 199 } 200 100% { 201 opacity: 1; 202 bottom: 15px; 203 } 204} 205@keyframes fadeOutAnimation { 206 0% { 207 opacity: 1; 208 bottom: 15px 209 } 210 100% { 211 opacity: 1; 212 bottom: -60px; 213 display: none; 214 } 215} 216.preview { 217 padding-right: 30%; 218 text-align: right; 219 margin-left: auto; 220 margin-right: 0; 221} 222