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