/* ==================================================================================================== PARTIALS ==================================================================================================== */ @import url('partials.css?v=1.0.002'); /* ==================================================================================================== COLOR DEFINATIONS ==================================================================================================== */ :root { --primary-accent-color:#D3FD27; --secondary-accent-color:#9828FF; --tertiary-accent-color:#F31578; --regular-accent-color:#756E83; --main-background-color:#272629; --text-color-light:#AAA; --text-color-light-secondary:#756E83; --text-color-dark:#272629; --border-radius:0px; --text-shadow:0 2px 1px rgba(0,0,0,0.2); --box-shadow:0 4px 8px rgba(0,0,0,0.15); } /* ==================================================================================================== PAGE GENERAL LOOK STYLES ==================================================================================================== */ body { color:var(--text-color-light-secondary); background-color:var(--main-background-color); } .not-mobile body { background-image:url('/assets/img/background-image-purple@2x.png'); background-repeat:no-repeat; background-size:cover; background-position:top center; background-attachment:fixed; } .mobile body:before { content:""; display:block; position:fixed; left:0; top:0; width:100%; height:100%; z-index:-10; background: url('/assets/img/background-image-purple@2x.png') no-repeat center center; background-size: cover; } /* ==================================================================================================== GENERAL STYLES ==================================================================================================== */ .hidden { display:none !important; } .animated { transition:all 0.5s ease-in-out; } .animated-opacity { transition:opacity 0.5s ease-in-out; } .mobile a:active { opacity:0.8; } /* ==================================================================================================== TOP BAR ==================================================================================================== */ .top-bar { padding:0 20px; height:60px; display:flex; align-items:center; justify-content:space-between; } .top-bar .user-info { display:flex; align-items:center; } .top-bar .user-info .icon { display:block; width:24px; height:24px; } .top-bar .user-info .icon svg { display:block; width:24px; height:24px; fill:var(--text-color-light); } .top-bar .user-info .name { color:var(--text-color-light); text-shadow:var(--text-shadow); margin:0 10px; } .top-bar-fixed .top-bar { position:absolute; top:0; left:0; right:0; } .manager-page .top-bar { background-color:#222; height:80px; padding:0 20px 0 40px; } .manager-page .top-bar .user-info .icon svg { fill:var(--white-overlay-light); } .manager-page .top-bar .user-info .name{ color:#FFF; } .manager-page .top-bar h1.project-title { font-size:3rem; font-weight:400; color:var(--viral-color-gold); text-shadow:var(--text-shadow); } /* ==================================================================================================== HEADING WITH LOGO ==================================================================================================== */ .heading-with-logo { width:100%; margin-bottom:20px; } .heading-with-logo h1 { margin-bottom:40px; } .heading-with-logo h1 i { display:block; width:160px; margin:0 auto; } .heading-with-logo h1 i svg { display:block; width:160px; } .heading-with-logo h2 { text-align:center; font-size:3.2rem; line-height:2.8rem; font-weight:300; text-shadow:1px 4px 2px rgba(0,0,0,0.15); } .heading-with-logo h2 span { color:#FFF; font-weight:400; } .page-content .heading-with-logo { display:flex; align-items:center; margin-bottom:40px; } .page-content .heading-with-logo h1 { margin:0 30px 0 0; } .page-content .heading-with-logo h1 i { width:80px; } .page-content .heading-with-logo h1 i svg { width:80px; } .page-content .heading-with-logo h2 { text-align:left; } .title-row { margin-bottom:20px; } .title-row h2 { font-size:2.4rem; line-height:2.6rem; letter-spacing:-2px; font-weight:300; text-shadow:1px 4px 2px rgba(0,0,0,0.15); } .title-row h2 span { color:#FFF; font-weight:400; } /* ==================================================================================================== FORM-VIEW ==================================================================================================== */ .form-view { } .form-view .form-row { display:flex; width:100%; margin:0 0 10px 0; } .form-view .form-row.mb-20 { margin-bottom:20px; } .form-view .form-row.mb-25 { margin-bottom:25px; } .form-view .form-row.mb-30 { margin-bottom:30px; } .form-view .form-row.mb-35 { margin-bottom:35px; } .form-view .form-column { flex:1 1 0; } .form-view .form-column + .form-column { margin-left:10px; } .form-view .form-column + .form-column.no-margin { margin-left:0; } .form-view .form-column > label { font-size:1.1rem; color:var(--primary-accent-color); font-weight:600; display:block; margin:0 0 5px 10px; } .form-view .form-column.size-30 { max-width:30px; } .form-view .form-column input[type=text], .form-view .form-column input[type=password] { font-size:2rem; width:100%; padding:10px 16px; color:#FFF; background-color:#524F58; border:none; border-radius:4px; text-shadow:var(--text-shadow); } .form-view .form-column input[type=text]::placeholder, .form-view .form-column input[type=password]::placeholder { color:rgba(0,0,0,0.1); text-shadow:none; } .form-view .form-column a.button, .form-view .form-column input[type=submit], .form-view .form-column input[type=button] { font-size:1.8rem; font-weight:700; width:100%; height:50px; line-height:50px; padding:0 30px; color:var(--text-color-dark); text-shadow:var(--text-shadow); border:none; border-radius:4px; background-color:var(--primary-accent-color); box-shadow:var(--box-shadow); } .form-view .form-column a.button { display:block; text-align:center; } .form-view .form-column a.button.secondary { color:#FFF; background-color:var(--secondary-accent-color); } .form-view .form-row .button-area { padding:10px 0 10px 0; margin-bottom:10px; border-bottom:2px dotted #E2E2E2; } .form-view .form-row .button-area a { display:flex; align-items:center; font-weight:500; } .form-view .form-row .button-area a i { display:block; width:24px; height:24px; margin-right:5px } .form-view .form-row .button-area a i svg { display:block; width:24px; height:24px; } .form-view .form-column.forgot-password a { display:block; text-align:right; font-size:1.1rem; color:var(--text-color-light-secondary); font-weight:600; margin:0 10px 0 0; } .form-view .form-column.forgot-password a span { color:#FFF; } /* .input-checkbox { display:flex; align-items:center; height:50px; } .input-checkbox .cbox { display:none; } .input-checkbox .cbox + label { display:block; position:relative; width:28px; height:28px; background-color:#FFF; border:3px solid #E2E2E2; } .input-checkbox .cbox:checked + label:after { content:''; position:absolute; top:-4px; left:0px; border-bottom:6px solid #8BC34A; border-left:6px solid #8BC34A; width:30px; height:16px; transform:rotate(-45deg); } */ /* ==================================================================================================== TABLE VIEW ==================================================================================================== */ .table-view {} /* FLEX TABLE STYLES --------------------------------------------------------------------------------------------------*/ .table-elem { width:100%; font-size:16px; } .table-elem .table-row { min-height:40px; overflow:hidden; width:100%; display:flex; flex-flow:row; flex-wrap:wrap; } .table-elem .table-row.heading { height:52px; background-color:#7E6462 !important; color:#FFF !important; text-shadow:var(--text-shadow); } .table-elem .table-row.heading .table-column { height:52px; line-height:52px; padding:0 10px; } .table-elem .table-row.body { border-bottom:1px dotted #BBB; } .table-elem .table-row:nth-of-type(even) { background-color:#FFF; } .table-elem .table-row.selected { background-color:#AEE4F1 !important; } .table-elem .table-row:hover { background-color:#FFFDED; } .table-elem .table-row .table-column { display:flex; min-height:40px; align-items:center; padding: 0 10px; flex:1 1 120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .table-elem .table-row .table-column.tac { justify-content:center; } .table-elem .table-row .table-column.fixed { flex:0 1 120px !important; } .table-elem .table-row .table-column.max-200 { max-width:200px; } .table-elem .table-row .table-column.hidden { display:none !important; } .table-elem .table-row .table-column a.action { display:block; width:16px; height:16px; } .table-elem .table-row .table-column a.action + a { margin-left:10px; } .table-elem .table-row .table-column a.action svg { fill:#222; display:block; width:16px; height:16px; } .table-elem .table-row-preview { background-color:#D1F6FF; padding:15px; } .table-elem .table-row-preview dl { margin-bottom:0; } .table-elem .table-row-preview dl dt { float:left; clear:both; width:150px; padding:5px 10px 5px 0; background-color:#AFC4CA; border-radius:4px; text-align:right; } .table-elem .table-row-preview dl dd { margin-left:154px; padding:5px 10px 5px 10px; background-color:#FFF; border-radius:4px; margin-bottom:4px; text-overflow:ellipsis; overflow:hidden; } .table-elem .table-row-preview dl dd svg { fill:#222; display:block; width:16px; height:16px; } /* RESPONSIVE TABLE FIELDS --------------------------------------------------------------------------------------------------*/ @media (max-width:900px){ .table-elem .table-row .table-column { display:none; } .table-elem .table-row .table-column:last-child, .table-elem .table-row .table-column.sm { display:flex; } } @media (max-width:480px){ .table-elem .table-row .table-column, .table-elem .table-row .table-column.sm { display:none; } .table-elem .table-row .table-column:last-child, .table-elem .table-row .table-column.ss { display:flex; } } /* ==================================================================================================== SYSTEM-BOX ==================================================================================================== */ .message-box { padding:20px 20px; border-radius:4px; text-shadow:var(--text-shadow); box-shadow:var(--box-shadow); } .message-box.mb-10 { margin-bottom:10px; } .message-box.mb-15 { margin-bottom:15px; } .message-box.mb-20 { margin-bottom:20px; } .message-box.mb-25 { margin-bottom:25px; } .message-box.mb-30 { margin-bottom:30px; } .message-box.mb-35 { margin-bottom:35px; } .message-box.mb-40 { margin-bottom:40px; } .message-box.no-box-shadow { box-shadow:none; } .message-box + .message-box { margin-top:10px; } .message-box h2 { margin-bottom:10px; } .message-box .content {} .message-box .content p { margin-bottom:10px; } .message-box.natural { color:#222; background-color:#F4F4F4; } .message-box.error { color:#FFF; background-color:#F44336; } .message-box.success { color:#FFF; background-color:#33B555; } .message-box.warning { color:#5C3324; background-color:#F9EC93; text-shadow:none; } .message-box.notice { color:#FFF; background-color:#4D91E5; } .message-box.lighter-notice { color:#FFF; background-color:#817972; } /* ==================================================================================================== LOGIN PAGE ==================================================================================================== */ .login-page .login-page-content { width:100%; max-width:560px; margin:0 auto; min-height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:80px 30px 60px 30px; } .login-form { width:100%; max-width:320px; } /* ==================================================================================================== LANDING PAGE ==================================================================================================== */ .landing-page .landing-page-content { width:100%; max-width:560px; margin:0 auto; min-height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:80px 30px 60px 30px; } /* ==================================================================================================== PAGE CONTENT ==================================================================================================== */ .page-content { max-width:640px; margin:0 auto; padding:0 30px 50px 30px; } /* ==================================================================================================== EXERCISE DATE PICKER ==================================================================================================== */ .exercise-date-picker { display:flex; width:100%; height:60px; align-items:center; justify-content:space-between; margin-bottom:5px; padding:8px 12px; } .exercise-date-picker { border-radius:4px; color:#FFF; background-color:var(--secondary-accent-color); } .exercise-date-picker { border-radius:4px; color:var(--text-color-dark); background-color:var(--primary-accent-color); } .exercise-date-picker .arrow a { display:block; width:24px; height:24px; } .exercise-date-picker .arrow a i { display:block; width:24px; height:24px; } .exercise-date-picker .arrow a i svg { display:block; width:24px; height:24px; } .exercise-date-picker .arrow a i svg .fg { fill:#FFF; } .exercise-date-picker .arrow a i svg .bg { fill:var(--main-background-color); } .exercise-date-picker .date { text-align:center; text-shadow:var(--text-shadow); } .exercise-date-picker .date h2 { font-weight:700; } .exercise-date-picker .date p { font-size:1.8rem; font-weight:500; } /* ==================================================================================================== EXERCISE SLOT LABELS ==================================================================================================== */ .exercise-slot-labels { display:flex; width:100%; align-items:center; justify-content:space-between; margin-bottom:30px; } .exercise-slot-labels .label { display:flex; align-items:center; color:rgba(255,255,255,0.8); } .exercise-slot-labels .label i { display:block; width:14px; height:14px; border:2px solid rgba(255,255,255,0.2); background-color:rgba(255,255,255,0.2); margin-right:5px; border-radius:2px; } .exercise-slot-labels .label.selected i { border-color:var(--primary-accent-color); background-color:rgba(211,253,39,0.5); } .exercise-slot-labels .label.reserved i.male { border-color:#0F9CFF; background-color:rgba(48,150,252,0.5); } .exercise-slot-labels .label.reserved i.female { border-color:#FC5C5C; background-color:rgba(252,92,92,0.5); } .exercise-slot-labels .label.reserved.by-me i { border-color:#5AFF87; background-color:rgba(90,255,135,0.5); } /* ==================================================================================================== EXERCISE GRID ==================================================================================================== */ .exercise-schedule-grid { display:grid; gap:3px; grid-template-columns:1fr; grid-auto-columns:48px; grid-auto-rows:auto; } .exercise-schedule-grid .es { display:flex; align-items:center; justify-content:center; border:2px solid transparent; border-radius:4px; text-align:center; z-index:3; min-height:24px; } .exercise-schedule-grid .es.picker { font-family:'Roboto Mono', monospace; cursor:pointer; text-shadow:var(--text-shadow); } .exercise-schedule-grid .es.picker { border-color:rgba(255,255,255,0.2); background-color:rgba(255,255,255,0.2); color:#CCC; height:48px; } .exercise-schedule-grid .es.picker.time-passed { font-size:1.1rem; letter-spacing:-1px; opacity:0.2; pointer-events:none; height:28px; } .exercise-schedule-grid .es.picker.time-passed.last { border-color:rgba(255,140,0,0.5); background-color:rgba(255,140,0,0.5); color:rgba(255,140,0,1); opacity:1; } .exercise-schedule-grid .es.picker.disabled-temporarily { opacity:0.2; pointer-events:none; } .exercise-schedule-grid .es.reserved.male { border-color:#0F9CFF; background-color:rgba(48,150,252,0.5); color:#0F9CFF; font-size:1.1rem; font-weight:600; } .exercise-schedule-grid .es.reserved.female { border-color:#FC5C5C; background-color:rgba(252,92,92,0.5); color:#FC5C5C; font-size:1.1rem; font-weight:600; } .exercise-schedule-grid .es.reserved.by-me { border-color:#5AFF87; background-color:rgba(90,255,135,0.5); color:#5AFF87; font-size:1.1rem; font-weight:600; } .exercise-schedule-grid .es.selected { border-color:var(--primary-accent-color); background-color:rgba(211,253,39,0.5); color:var(--primary-accent-color); } .exercise-schedule-grid .es.bg { border-color:rgba(255,255,255,0.04); background-color:rgba(255,255,255,0.04); color:#CCC; z-index:2; } .exercise-schedule-grid .es.current-line { border-color:rgba(255,140,0,0.5); background-color:rgba(255,140,0,0.3); z-index:1; } /* ==================================================================================================== FAMOUS QUOTES ==================================================================================================== */ .famous-quote .quote { flex:1 1 0; position:relative; font-size:1.8rem; font-weight:400; color:#222; text-shadow:var(--text-shadow); padding:20px 20px; margin-left:120px; background-color:#FFF; border-radius:20px; } .famous-quote .quote:before { content:''; position:absolute; top:48%; left:-28px; } .famous-quote .quote:before { width: 0; height: 0; border-style: solid; border-width: 0 30px 20px 0; border-color: transparent #FFF transparent transparent; } /* ==================================================================================================== USER ACTIONS ==================================================================================================== */ .user-actions { width:100%; } .user-actions .action-buttons { display:flex; flex-wrap:wrap; padding:0 0 0 0; } .user-actions .action-buttons .column { flex:1 1 0; min-width:240px; margin:0 0 10px 0; } .user-actions .action-buttons .column + .column {} .user-actions .action-buttons .column:nth-child(2n) { margin-left:10px; } @media (max-width: 640px) { .user-actions .action-buttons { flex-direction:column; } .user-actions .action-buttons .column { margin:0 0 0 0; } .user-actions .action-buttons .column + .column { margin:10px 0 0 0; } } /* ==================================================================================================== ACTION BUTTONS ==================================================================================================== */ .action-buttons a { display:block; text-align:center; font-size:1.8rem; font-weight:700; width:100%; height:50px; line-height:50px; padding:0 30px; color:var(--text-color-dark); text-shadow:var(--text-shadow); border:none; border-radius:4px; background-color:var(--primary-accent-color); box-shadow:var(--box-shadow); } .action-buttons.small-font a { display:block; text-align:center; font-size:1.2rem; font-weight:700; width:100%; height:50px; line-height:50px; padding:0 30px; color:var(--text-color-dark); text-shadow:var(--text-shadow); border:none; border-radius:4px; background-color:var(--primary-accent-color); box-shadow:var(--box-shadow); } .action-buttons a.secondary { color:#FFF; background-color:var(--secondary-accent-color); } .action-buttons a.tertiary { color:#FFF; background-color:var(--tertiary-accent-color); } .action-buttons a.regular { color:#FFF; background-color:var(--regular-accent-color); } /* ==================================================================================================== RESERVATION TABS ==================================================================================================== */ .reservation-switch { display:flex; justify-content:space-between; } .reservation-switch a { flex:1 1 0; display:block; text-align:center; font-size:1.8rem; font-weight:700; padding:16px 20px; color:var(--text-color-dark); text-shadow:var(--text-shadow); border:none; border-radius:4px; background-color:var(--primary-accent-color); box-shadow:var(--box-shadow); } .reservation-switch a.secondary { color:#FFF; background-color:var(--secondary-accent-color); } .reservation-switch a.tertiary { color:#FFF; background-color:var(--tertiary-accent-color); } .reservation-switch a.regular { color:#FFF; background-color:var(--regular-accent-color); } .reservation-switch a + a { margin-left:10px; } @media (max-width: 560px) { .reservation-switch { flex-direction:column; } .reservation-switch a { margin:0 0 5px 0 !important; } } /* ==================================================================================================== MY RESERVATIONS ==================================================================================================== */ .my-reservations {} .my-reservations .reservation { margin-bottom:10px; padding:20px 10px 20px 20px; background-position:center center; background-repeat:no-repeat; background-size:cover; border-radius:4px; color:var(--text-color-dark); box-shadow:var(--box-shadow); } .my-reservations .reservation .columns { display:flex; align-items:center; justify-content:space-between; } .my-reservations .reservation .left { text-align:center; min-width:116px; color:rgba(0,0,0,0.7); } .my-reservations .reservation .left h2 { font-size:2.2rem; line-height:2.2rem; font-weight:bold; } .my-reservations .reservation .left h3 { display:flex; justify-content:space-between; font-size:1.6rem; line-height:1.6rem; } .my-reservations .reservation .left .cancel-reservation-button { display:block; font-size:1.1rem; font-weight:bold; background-color:#E4203B; color:#FFF; padding:8px 10px; margin:5px 0 0 0; border-radius:4px; text-shadow:var(--text-shadow); } .my-reservations .reservation .right { display:flex; align-items:center; justify-content:center; letter-spacing:-2px; color:rgba(0,0,0,0.7); } .my-reservations .reservation .right .icon i { display:block; width:36px; height:36px; } .my-reservations .reservation .right .icon i svg { display:block; width:36px; height:36px; fill:rgba(0,0,0,0.7); } .my-reservations .reservation .right .until { font-size:2.2rem; line-height:2.2rem; font-weight:bold; margin:0 5px 0 0; } .my-reservations .reservation .right .until p { line-height:1; text-align:center; } .my-reservations .reservation .right .until p + p { font-size:1.2rem; line-height:1; font-style:normal; font-weight:600; letter-spacing:0; } .my-reservations .reservation .right i.qr-code { display:block; width:42px; height:42px; } .my-reservations .reservation .right i.qr-code svg { display:block; width:42px; height:42px; } .my-reservations .reservation.s00 { background-image:url('/assets/img/reservation-banner-000.png'); } .my-reservations .reservation.s01 { background-image:url('/assets/img/reservation-banner-001.png'); } .my-reservations .reservation.s02 { background-image:url('/assets/img/reservation-banner-002.png'); } .my-reservations .reservation.s03 { background-image:url('/assets/img/reservation-banner-003.png'); } .my-reservations .reservation.current { cursor:pointer; background-position:-350px center; } .my-reservations .reservation.current .columns { height:160px; flex-direction:row-reverse; } .my-reservations .reservation.current .columns .left { min-width:auto; } .my-reservations .reservation.current .columns .right span { margin:0 0 0 10px; } .my-reservations .reservation.current .explanation { height:24px; font-weight:400; text-align:right; display:flex; align-items:center; justify-content:flex-end; } .my-reservations .reservation.current .explanation .loading { display:none; margin-left:10px; } .my-reservations .reservation.current.busy .explanation .text { display:none; } .my-reservations .reservation.current.busy .explanation .loading { display:block; } /* ==================================================================================================== SCANNER WINDOW ==================================================================================================== */ #scanner-window { position:fixed; z-index:10000; top:0; left:0; width:100vw; height:100vh; padding:30px; } #scanner-window { background-color:#444; backdrop-filter:blur(16px); } #scanner-window { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; } #scanner-window #qr-canvas{ width:100%; max-width:480px; margin:0; } #scanner-window .action-buttons { width:100%; margin-bottom:10px; } #scanner-window .canvas-wrapper canvas { border-radius:4px; } /* ==================================================================================================== MODAL FORM ==================================================================================================== */ .modal-canvas { --color-a:rgba(200,200,200,0.2); --color-b:rgba(160,160,160,0.2); } .modal-canvas { --color-a:rgba(100,100,100,0.2); --color-b:rgba(100,100,100,0.24); } .modal-canvas { position:fixed; z-index:9999; top:0; left:0; width:100vw; height:100vh; } .modal-canvas { background:repeating-radial-gradient(circle, var(--color-a), var(--color-a) 7px, var(--color-b) 7px, var(--color-b) 14px); } .modal-canvas { background:repeating-linear-gradient(-45deg, var(--color-a), var(--color-a) 25%, var(--color-b) 25%, var(--color-b) 50%, var(--color-a) 50%) top left fixed; background-size:24px 24px; } .modal-canvas { display:flex; align-items:center; justify-content:center; backdrop-filter:blur(16px); } .modal-canvas .canvas-click { position:fixed; z-index:-1; top:0; left:0; right:0; bottom:0; } .modal-canvas .modal-window { background-color:#333; } .modal-canvas .modal-window h2 { line-height:1; font-size:3.2rem; font-weight:300; padding:20px 20px 15px 20px; color:#FFF; border-bottom:5px solid #555; text-shadow:var(--text-shadow); } .modal-canvas .modal-window .content { display:flex; flex-direction:column; align-items:center; justify-content:center; color:#DDD; font-size:1.8rem; font-weight:300; max-width:480px; padding:30px 40px 30px 40px; text-shadow:var(--text-shadow); } .modal-canvas .modal-window .content .message { margin-bottom:30px; } .modal-canvas .modal-window .content .buttons { display:flex; } .modal-canvas .modal-window .content .buttons .button { display:block; background-color:#555; padding:10px 20px; color:#FFF; text-shadow:var(--text-shadow); } .modal-canvas .modal-window .content .buttons .button + .button { margin-left:5px; } .modal-canvas .modal-window.error { box-shadow:0px 20px 140px rgba(255,0,0,0.3); } .modal-canvas .modal-window.error h2 { border-color:#B00; } .modal-canvas .modal-window.error .content .buttons .button { background-color:#B00; } .modal-canvas .modal-window.success { box-shadow:0px 20px 140px rgba(0,255,0,0.3); } .modal-canvas .modal-window.success h2 { border-color:#59C159; } .modal-canvas .modal-window.success .content .buttons .button { background-color:#59C159; } .modal-canvas .modal-window.info { box-shadow:0px 20px 140px rgba(22,136,253,0.3); } .modal-canvas .modal-window.info h2 { border-color:#1688FD; } .modal-canvas .modal-window.info .content .buttons .button { background-color:#1688FD; } .modal-canvas .modal-window.warning { box-shadow:0px 20px 140px rgba(255,182,0,0.3); } .modal-canvas .modal-window.warning h2 { border-color:#FFB600; } .modal-canvas .modal-window.warning .content .buttons .button { background-color:#FFB600; } .modal-canvas .modal-window .content .buttons .button.error { background-color:#B00 !important; } .modal-canvas .modal-window .content .buttons .button.success { background-color:#59C159 !important; } .modal-canvas .modal-window .content .buttons .button.info { background-color:#1688FD !important; } .modal-canvas .modal-window .content .buttons .button.warning { background-color:#FFB600 !important; } .modal-canvas .modal-window .content .buttons .button.neutral { background-color:#555 !important; } /* ==================================================================================================== FOOTER CREDITS ==================================================================================================== */ .credits { position:absolute; left:0; bottom:0; width: 100%; text-align: center; padding: 10px 0; font-size: 1.2rem; color: #AAA; text-shadow:var(--text-shadow); } .credits b { color:#FFF; } /* ==================================================================================================== PRELOADER ANIMATION ==================================================================================================== */ @keyframes spin { 0% { -webkit-transform:rotate(0deg); transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); transform:rotate(360deg); } } /* .preloader { width:100%; height:240px; position:relative; } .loading { position:absolute; top:50%; left:50%; margin-top:-34px; margin-left:-24px; border-radius: 50%; width:48px; height:48px; border:4px solid rgba(0,0,0,0.1); border-top-color:#0DC3E1; -webkit-animation: spin 1s infinite linear; animation: spin 1s infinite linear; } */ .loading { border-radius: 50%; width:24px; height:24px; border:4px solid rgba(0,0,0,0.1); border-top-color:rgba(0,0,0,0.5); animation: spin 1s infinite linear; } /* ==================================================================================================== MEDIA QUERIES ==================================================================================================== */ @media (max-width: 1600px) {}