[befb988] | 1 | .custom-container {
|
---|
[28b3398] | 2 | width: 65% !important;
|
---|
| 3 | max-width: 1500px !important;
|
---|
| 4 | margin: auto;
|
---|
| 5 | }
|
---|
| 6 |
|
---|
| 7 | .application-title {
|
---|
[befb988] | 8 | font-family: "Segoe UI";
|
---|
| 9 | margin-top: 40px;
|
---|
| 10 | margin-bottom: 20px;
|
---|
[28b3398] | 11 | display: flex;
|
---|
[befb988] | 12 | justify-content: start;
|
---|
| 13 | border-bottom: 1px solid #CFCFCF;
|
---|
[28b3398] | 14 | }
|
---|
[befb988] | 15 | .application-title h3 {
|
---|
| 16 | font-weight: 500;
|
---|
[28b3398] | 17 | }
|
---|
| 18 |
|
---|
[4d97b63] | 19 | .response-message {
|
---|
| 20 | background-color: floralwhite;
|
---|
| 21 | border-radius: 8px;
|
---|
| 22 | padding: 15px;
|
---|
| 23 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
---|
| 24 | }
|
---|
| 25 |
|
---|
| 26 |
|
---|
| 27 |
|
---|
| 28 |
|
---|
| 29 | .application-card-wrapper {
|
---|
| 30 | margin: 15px 0;
|
---|
| 31 | display: flex;
|
---|
| 32 | flex-direction: column;
|
---|
| 33 | transition: all 0.4s ease-in-out;
|
---|
| 34 | gap: 3px;
|
---|
| 35 | }
|
---|
| 36 |
|
---|
| 37 | .application-card.changed {
|
---|
| 38 | background-color: aliceblue;
|
---|
| 39 | }
|
---|
| 40 |
|
---|
| 41 | .application-card-wrapper .expand-section {
|
---|
| 42 | max-height: 0;
|
---|
| 43 | opacity: 0;
|
---|
| 44 | transition: 0.5s ease;
|
---|
| 45 | display: flex;
|
---|
| 46 | flex-direction: column;
|
---|
| 47 | align-items: flex-end;
|
---|
| 48 | margin: 0 !important;
|
---|
| 49 | }
|
---|
| 50 |
|
---|
| 51 | .application-card-wrapper.expanded .expand-section {
|
---|
| 52 | max-height: 200px;
|
---|
| 53 | opacity: 1;
|
---|
| 54 | transform: translateY(0);
|
---|
| 55 | margin-top: 10px;
|
---|
| 56 | /* transition: max-height 0.3s ease, opacity 0.3s ease, transform 0.3s ease;*/
|
---|
| 57 | }
|
---|
| 58 |
|
---|
| 59 | .expand-section textarea {
|
---|
| 60 | width: 100%;
|
---|
| 61 | padding: 10px;
|
---|
| 62 | border-radius: 8px;
|
---|
| 63 | border: 1px solid #ccc;
|
---|
| 64 | }
|
---|
| 65 |
|
---|
[28b3398] | 66 |
|
---|
| 67 | .application-card {
|
---|
| 68 | font-family: Poppins;
|
---|
| 69 | border: 1px solid lightgray;
|
---|
| 70 | border-radius: 8px;
|
---|
| 71 | background-color: white;
|
---|
| 72 | transition: all 0.3s ease;
|
---|
| 73 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
---|
[4d97b63] | 74 | /*height: auto;*/
|
---|
[28b3398] | 75 | padding: 20px 20px;
|
---|
| 76 | display: flex;
|
---|
[befb988] | 77 | }
|
---|
| 78 | .application-card .app-job-seeker-pic {
|
---|
| 79 | border: 1px solid gray;
|
---|
[08f82ec] | 80 | border-radius: 50%;
|
---|
| 81 | margin-right: 20px;
|
---|
[befb988] | 82 | }
|
---|
| 83 | .application-card .app-job-seeker-pic img {
|
---|
| 84 | border-radius: 50%;
|
---|
[28b3398] | 85 | }
|
---|
| 86 |
|
---|
[08f82ec] | 87 | .application-card .app-company-logo {
|
---|
| 88 | width: 8%;
|
---|
| 89 | }
|
---|
| 90 |
|
---|
[befb988] | 91 | .application-card .app-info {
|
---|
[4d97b63] | 92 | width: 60%;
|
---|
[befb988] | 93 | display: inline-flex;
|
---|
| 94 | flex-direction: column;
|
---|
| 95 | align-items: flex-start;
|
---|
| 96 | justify-content: center;
|
---|
| 97 | gap: 10px;
|
---|
[28b3398] | 98 | }
|
---|
| 99 |
|
---|
[befb988] | 100 | .application-card .app-info .jobAd-title {
|
---|
[28b3398] | 101 | font-weight: 600;
|
---|
[08f82ec] | 102 | font-size: 1.2rem;
|
---|
[28b3398] | 103 | /*text-transform: uppercase;*/
|
---|
| 104 | font-family: 'Segoe UI', sans-serif;
|
---|
[08f82ec] | 105 | text-decoration: none;
|
---|
| 106 | color: black
|
---|
[28b3398] | 107 | }
|
---|
[08f82ec] | 108 |
|
---|
| 109 | .
|
---|
[28b3398] | 110 |
|
---|
[befb988] | 111 | .application-card .app-info .contact-info {
|
---|
[28b3398] | 112 | display: inline-flex;
|
---|
[befb988] | 113 | gap: 30px;
|
---|
[28b3398] | 114 | }
|
---|
[befb988] | 115 | .application-card .app-info .contact-info .contact-item {
|
---|
[28b3398] | 116 | display: inline-flex;
|
---|
| 117 | align-items: center;
|
---|
| 118 | gap: 5px;
|
---|
[befb988] | 119 | margin-right: 10px
|
---|
[28b3398] | 120 | }
|
---|
| 121 |
|
---|
[befb988] | 122 | .application-card .app-info .contact-info .contact-item span {
|
---|
| 123 | color: darkgray;
|
---|
| 124 | }
|
---|
| 125 |
|
---|
| 126 | .application-card .app-status {
|
---|
[4d97b63] | 127 | width: 38%;
|
---|
[28b3398] | 128 | display: inline-flex;
|
---|
| 129 | justify-content: end;
|
---|
| 130 | align-items: center;
|
---|
| 131 | gap: 10px;
|
---|
| 132 | }
|
---|
| 133 |
|
---|
[befb988] | 134 | .application-card .app-status .select {
|
---|
| 135 | width: 45%;
|
---|
[28b3398] | 136 | display: inline-block;
|
---|
| 137 | }
|
---|
| 138 |
|
---|
[4d97b63] | 139 | .app-status .status {
|
---|
[befb988] | 140 | color: white;
|
---|
| 141 | padding: 5px 10px;
|
---|
| 142 | border-radius: 5px;
|
---|
| 143 | width: 150px;
|
---|
| 144 | text-align: center;
|
---|
| 145 | }
|
---|
| 146 |
|
---|
| 147 |
|
---|
[4d97b63] | 148 |
|
---|
| 149 |
|
---|
| 150 |
|
---|
| 151 |
|
---|
| 152 |
|
---|
| 153 |
|
---|
[28b3398] | 154 | .application-button {
|
---|
| 155 | border: 0;
|
---|
| 156 | border-radius: 8px;
|
---|
| 157 | width: auto;
|
---|
[befb988] | 158 | background-image: linear-gradient(to bottom, #dddddd, #f0f0f0);
|
---|
| 159 | background-color: #dddddd;
|
---|
| 160 | color: #333333;
|
---|
| 161 |
|
---|
| 162 | font-weight: 700;
|
---|
| 163 | padding: 8px 13px;
|
---|
[28b3398] | 164 | }
|
---|
[befb988] | 165 |
|
---|
[28b3398] | 166 | .application-button:hover {
|
---|
[befb988] | 167 | background: linear-gradient(to bottom, #bbbbbb, #dddddd);
|
---|
| 168 | color: #333333;
|
---|
[28b3398] | 169 | }
|
---|
| 170 |
|
---|
| 171 | /*.application-card:hover {*/
|
---|
| 172 | /* transform: translate(0, 8px);*/
|
---|
| 173 | /* box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);*/
|
---|
| 174 | /*}*/
|
---|
| 175 |
|
---|
| 176 | .multi-button button{
|
---|
| 177 | /*font-size: 5vmin;*/
|
---|
| 178 | padding: .5em 1em;
|
---|
| 179 | background: #fff;
|
---|
| 180 | color: #4A5568;
|
---|
| 181 | border: 0px solid #A0AEC0;
|
---|
| 182 | //margin: .1em;
|
---|
| 183 | transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
|
---|
| 184 | box-shadow: 0 0 0 #BEE3F8;
|
---|
| 185 | transform: translateY(0);
|
---|
| 186 | }
|
---|
| 187 | .multi-button button:first-of-type{
|
---|
| 188 | border-radius: .5em 0 0 .5em;
|
---|
| 189 | }
|
---|
| 190 | .multi-button button:last-of-type{
|
---|
| 191 | border-radius: 0 .5em .5em 0;
|
---|
| 192 | }
|
---|
| 193 | .multi-button button i{
|
---|
| 194 | color: #A0AEC0;
|
---|
| 195 | margin-right: .3em;
|
---|
| 196 | transition: all .2s ease-out;
|
---|
| 197 | }
|
---|
| 198 | .multi-button:hover button{
|
---|
| 199 | color: #A0AEC0;
|
---|
| 200 | }
|
---|
| 201 |
|
---|
| 202 | .multi-button:hover button:hover{
|
---|
| 203 | background: #D53F8C;
|
---|
| 204 | color: #fff;
|
---|
| 205 | box-shadow: 0 0 0.8em 0 rgba(213, 63, 140, .8);
|
---|
| 206 | transform: translateY(-.2em);
|
---|
| 207 | }
|
---|
| 208 | .multi-button:hover button i{
|
---|
| 209 | color: #CBD5E0;
|
---|
| 210 | }
|
---|
| 211 | .multi-button:hover button:hover i{
|
---|
| 212 | color: #FED7E2;
|
---|
| 213 | transform: rotate(-10deg);
|
---|
[4d97b63] | 214 | }
|
---|
| 215 |
|
---|
| 216 | .application-filters {
|
---|
| 217 | gap: 15px;
|
---|
| 218 | border-radius: 8px;
|
---|
| 219 | background-color: white;
|
---|
| 220 | }
|
---|
| 221 |
|
---|
| 222 | /* Default Span Styles */
|
---|
| 223 | .application-filters span {
|
---|
| 224 | padding: 8px 12px;
|
---|
| 225 | border-radius: 5px;
|
---|
| 226 | color: rgba(1,38,90,0.9);
|
---|
| 227 | cursor: pointer;
|
---|
| 228 | display: inline-flex;
|
---|
| 229 | align-items: center;
|
---|
| 230 | }
|
---|
| 231 |
|
---|
| 232 | /* Icon Styles */
|
---|
| 233 | .application-filters span i {
|
---|
| 234 | margin-right: 5px;
|
---|
| 235 | }
|
---|
| 236 |
|
---|
| 237 | /* Hover Effect */
|
---|
| 238 | .application-filters span:hover {
|
---|
| 239 | background-color: rgba(1,38,90,0.9);
|
---|
| 240 | color: white;
|
---|
| 241 | }
|
---|
| 242 |
|
---|
| 243 | .application-filters span:hover i {
|
---|
| 244 | color: inherit; /* Makes the icon inherit the color from the parent span */
|
---|
| 245 | }
|
---|
| 246 |
|
---|
| 247 | /* Selected State */
|
---|
| 248 | .application-filters span.selected {
|
---|
| 249 | background-color: rgba(1,38,90,0.9);
|
---|
| 250 | color: white;
|
---|
| 251 | }
|
---|
| 252 |
|
---|
| 253 | .application-filters span.selected i {
|
---|
| 254 | color: inherit; /* Ensures icon color matches the selected state */
|
---|
[28b3398] | 255 | } |
---|