/*  
    UPDATED: 25/08/25 : BUV Online
*/ 

/* Content: 
    Import fonts
    Canvas fonts and general adjustments
    Instructor images
    Uplift template 
    Speedgrader modifications
*/

/* import fonts */

@font-face {
  font-family: "Brandon";
  src: url("https://cdn.jsdelivr.net/gh/benBUV/CanvasFonts@main/Brandon_blk.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap; 
}

@font-face {
  font-family: "Brandon";
  src: url("https://cdn.jsdelivr.net/gh/benBUV/CanvasFonts@main/Brandon_blk_it.otf") format("opentype");
  font-weight: 900;
  font-style: italic;
  font-display: swap; 
}

@font-face {
  font-family: "Brandon";
  src: url("https://cdn.jsdelivr.net/gh/benBUV/CanvasFonts@main/Brandon_bld.otf") format("opentype");
  font-weight: 800;
  font-style: bold;
  font-display: swap; 
}

@font-face {
  font-family: "Brandon";
  src: url("https://cdn.jsdelivr.net/gh/benBUV/CanvasFonts@main/Brandon_bld_it.otf") format("opentype");
  font-weight: 800;
  font-style: italic;
  font-display: swap; 
}

@font-face {
  font-family: "Brandon";
  src: url("https://cdn.jsdelivr.net/gh/benBUV/CanvasFonts@main/Brandon_med80.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap; 
}

@font-face {
  font-family: "Brandon";
  src: url("https://cdn.jsdelivr.net/gh/benBUV/CanvasFonts@main/Brandon_med80_it.otf") format("opentype");
  font-weight: 500;
  font-style: italic;
  font-display: swap; 
}

@font-face {
  font-family: "Brandon";
  src: url("https://cdn.jsdelivr.net/gh/benBUV/CanvasFonts@main/Brandon_reg.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap; 
}

@font-face {
  font-family: "Brandon";
  src: url("https://cdn.jsdelivr.net/gh/benBUV/CanvasFonts@main/Brandon_reg_it.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap; 
}

@font-face {
  font-family: "Brandon";
  src: url("https://cdn.jsdelivr.net/gh/benBUV/CanvasFonts@main/Brandon_thin.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
  font-display: swap; 
}

@font-face {
  font-family: "Brandon";
  src: url("https://cdn.jsdelivr.net/gh/benBUV/CanvasFonts@main/Brandon_thin_it.otf") format("opentype");
  font-weight: 200;
  font-style: italic;
  font-display: swap; 
}


/* Import fallback fonts */

@font-face {
  font-family: "Brandonx";
  src: url("https://benBUV.github.io/CanvasFonts/Brandon_blk.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap; 
}

@font-face {
  font-family: "Brandonx";
  src: url("https://benBUV.github.io/CanvasFonts/Brandon_blk_it.otf") format("opentype");
  font-weight: 900;
  font-style: italic;
  font-display: swap; 
}

@font-face {
  font-family: "Brandonx";
  src: url("https://benBUV.github.io/CanvasFonts/Brandon_bld.otf") format("opentype");
  font-weight: 800;
  font-style: bold;
  font-display: swap; 
}

@font-face {
  font-family: "Brandonx";
  src: url("https://benBUV.github.io/CanvasFonts/Brandon_bld_it.otf") format("opentype");
  font-weight: 800;
  font-style: italic;
  font-display: swap; 
}

@font-face {
  font-family: "Brandonx";
  src: url("https://benBUV.github.io/CanvasFonts/Brandon_med80.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap; 
}

@font-face {
  font-family: "Brandonx";
  src: url("https://benBUV.github.io/CanvasFonts/Brandon_med80_it.otf") format("opentype");
  font-weight: 500;
  font-style: italic;
  font-display: swap; 
}

@font-face {
  font-family: "Brandonx";
  src: url("https://benBUV.github.io/CanvasFonts/Brandon_reg.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap; 
}

@font-face {
  font-family: "Brandonx";
  src: url("https://benBUV.github.io/CanvasFonts/Brandon_reg_it.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap; 
}

@font-face {
  font-family: "Brandonx";
  src: url("https://benBUV.github.io/CanvasFonts/Brandon_thin.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
  font-display: swap; 
}

@font-face {
  font-family: "Brandonx";
  src: url("https://benBUV.github.io/CanvasFonts/Brandon_thin_it.otf") format("opentype");
  font-weight: 200;
  font-style: italic;
  font-display: swap; 
}

/* Canvas fonts and adjustments */

.ic-app-header__logomark { 
  background-position: 50% 0%; /* fits logo to top rather than middle when nav is minified */
}

h1, h2, h3, h4, h5, #dashboard_header_container .hidden-phone {
  font-family: Brandon, Brandonx, 'Lato Extended', Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.heavy { font-weight: 900; text-transform: uppercase; }

body.pages.show:not(.not-uplift-student) h1.page-title { margin: 0 0 15px; }

iframe#tool_content {
	display: block!important;
}

iframe#tool_content[title="Kortext Bookshelf"] {
  background-color: #6627cb;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1548 677'%3E%3Cpath fill='none' d='M45 0h1458v364H45z'/%3E%3Cpath fill='%23fff' d='m215 33-97 137V33H45v314h73V201l101 146h82L191 186 297 33h-82z'/%3E%3Cpath fill='%23fff' d='M287 230a117 117 0 0 1 235 0c0 66-53 117-118 117s-117-50-117-117m168 0c0-32-22-53-51-53s-51 21-51 53 22 53 51 53c30-2 51-21 51-53m227-114v73c-27-4-67 8-67 50v100h-66V120h66v39c9-29 40-43 67-43m122 68v78c0 19 15 21 46 19v59c-88 10-114-17-114-79v-78h-36v-62h36V78l67-20v62h46v62l-45 2Zm192 103c19 0 35-7 44-15l54 31c-22 31-55 46-97 46-76 0-124-51-124-117s48-116 119-116c66 0 114 49 114 116 0 9-1 19-3 26H943c10 21 29 29 53 29m42-80c-7-25-26-35-48-35-25 0-43 12-49 35h97Zm412-23v78c0 19 16 21 46 19v59c-88 10-114-17-114-79v-78h-35v-62h36V78l67-20v62h46v62l-46 2Z'/%3E%3Cpath fill='%23fff' d='M1262 120h-9v80l-31-26-29 26v-80h-85l77 108-82 111h79l40-58 42 58h77l-79-111 76-108h-76zM0 635c0-6 4-10 9-10s9 4 9 10-3 9-9 9c-5 0-9-4-9-9Zm31 0c0-6 4-10 9-10s9 4 9 10-3 9-9 9c-5 0-9-4-9-9Zm32 0c0-6 4-10 9-10s9 4 9 10-4 9-9 9c-6 0-9-4-9-9Zm34-103h14v111H97V532Zm102 72c0 28-18 40-36 40-20 0-35-15-35-38 0-26 16-41 36-41s35 16 35 39Zm-58 1c0 17 10 29 23 29s22-12 22-29c0-13-6-29-22-29s-23 15-23 29Zm116 38-1-10h-1c-4 6-12 11-22 11-15 0-22-10-22-21 0-18 15-28 44-28v-2c0-6-2-17-17-17-7 0-14 2-19 5l-3-9c6-4 15-6 24-6 22 0 28 15 28 30v29l1 18h-12Zm-2-39c-15 0-31 3-31 17 0 9 6 13 12 13a18 18 0 0 0 19-17v-13Zm98-72v111h-12v-13h-1c-4 8-13 14-25 14-17 0-31-15-31-38 0-25 15-40 33-40 11 0 19 5 22 11v-45h14Zm-14 66v-6c-2-9-10-16-20-16-13 0-21 13-21 29s7 28 21 28c9 0 17-6 20-16v-19Zm51-52c0 5-4 8-9 8s-8-3-8-8 4-9 8-9 9 4 9 9Zm-15 97v-76h13v76h-13Zm35-55v-21h12v13h1c3-7 12-15 24-15 10 0 26 7 26 33v45h-14v-44c0-12-4-22-17-22-8 0-15 6-17 14l-1 6v46h-14v-55Zm148-21-1 21v44c0 17-3 28-10 34-8 7-18 9-27 9s-19-2-25-6l4-10c5 3 12 6 21 6 14 0 24-8 24-27v-8c-4 7-12 12-24 12-18 0-31-15-31-36 0-26 16-40 33-40 13 0 20 6 23 13l1-12h12Zm-14 30-1-6c-2-8-9-15-19-15-12 0-21 11-21 29 0 15 7 27 21 27 8 0 16-5 19-14l1-7v-14Zm72-30 16 45 5 15 5-15 14-45h15l-20 54c-10 26-17 39-26 47-6 6-13 9-16 9l-3-11 11-7a42 42 0 0 0 13-19l-1-3-27-70h14Zm132 37c0 28-19 40-37 40-20 0-35-15-35-38 0-26 16-41 36-41s36 16 36 39Zm-59 1c0 17 10 29 23 29s22-12 22-29c0-13-6-29-22-29s-23 15-23 29Zm137 17v21h-11l-1-13h-1c-3 6-11 14-24 14-11 0-25-6-25-33v-44h13v42c0 14 4 24 17 24a19 19 0 0 0 18-19v-47h14v55Zm22-31-1-24h12v15h1c3-10 11-17 20-17l4 1v13l-4-1c-10 0-17 8-18 18l-1 6v41h-13v-52Zm81 52 1-20v-91h13v47c5-8 13-13 25-13 18 0 31 15 31 38 0 27-17 40-33 40-11 0-19-4-24-14h-1l-1 13h-11Zm14-31v5c3 10 11 17 20 17 14 0 23-12 23-29 0-16-8-29-22-29-9 0-18 7-21 17v19Zm139-8c0 28-19 40-36 40-20 0-36-15-36-38 0-26 17-41 37-41s35 16 35 39Zm-58 1c0 17 9 29 22 29s23-12 23-29c0-13-7-29-22-29s-23 15-23 29Zm141-1c0 28-18 40-36 40-20 0-35-15-35-38 0-26 16-41 36-41s35 16 35 39Zm-58 1c0 17 9 29 22 29s23-12 23-29c0-13-6-29-22-29s-23 15-23 29Zm88-3h1l6-9 22-26h16l-29 31 33 45h-16l-26-36-7 7v29h-13V532h13v70Zm56 27c4 2 11 5 18 5 10 0 14-5 14-11 0-7-3-10-13-14-14-5-20-12-20-21 0-13 10-22 26-22 7 0 14 2 18 4l-4 10c-3-2-8-4-15-4-8 0-12 4-12 10s4 9 14 13c13 5 19 11 19 23 0 13-10 22-27 22-8 0-16-2-21-5l3-10Zm62-97h14v47a25 25 0 0 1 23-13c10 0 26 6 26 32v45h-14v-44c0-12-4-22-17-22-8 0-15 6-17 14l-1 6v46h-14V532Zm92 75c0 19 12 27 25 27 10 0 15-2 20-4l3 10c-5 2-13 4-25 4-22 0-36-15-36-38s13-40 35-40c23 0 30 21 30 35l-1 6h-51Zm39-9c0-9-4-23-19-23-13 0-19 13-20 23h39Zm29-66h14v111h-14V532Zm38 111v-65h-11v-11h11v-3c0-11 2-21 8-27 5-5 12-7 18-7l11 2-2 11-8-2c-11 0-14 11-14 22v4h17v11h-17v65h-13Z'/%3E%3C/svg%3E");
  background-position: 50% 50%;
  background-size: 30%;
  background-repeat: no-repeat;
}

/* prettify external link embed */

.ui-listview.ui-listview-no-rounded-bottom { 
  margin-left: 0px;
  box-shadow: none;
}

.ui-listview.ui-listview-no-rounded-bottom li {
  border: none;
}

.ui-listview.ui-listview-no-rounded-bottom li.active {
  background: none;
  margin-bottom: 20px;
}

.ui-listview li:active a, .ui-listview li.active a {
  color: var(--ic-link-color);
}

.ui-listview li:active a:hover, .ui-listview li.active a:hover {
  color: var(--ic-link-color-darkened-10);
}

.ui-listview.ui-listview-no-rounded-bottom iframe#file_content {
  height: 480px;
  border: none;
}

/* alerts and top bar stuff */

.omit-from-final-warning {
  margin: 0px 0px 35px;
}

/* professor images 'shortcodes' (alphabetical)*/

#BUV .buv-image { background-image: url('https://library.buv.edu.vn/wp-content/uploads/canvas/BUV.jpg'); }

#BUV .adrian-w-image { background-image: url('https://www.buv.edu.vn/wp-content/uploads/2022/05/Adrian-Weng-scaled.jpg'); }
#BUV .aiman-a-image { background-image: url('https://www.buv.edu.vn/wp-content/uploads/2021/12/Aiman.jpg'); }
#BUV .aiwa-r-image { background-image: url('https://library.buv.edu.vn/wp-content/uploads/canvas/aiwa.jpg'); }
#BUV .ajay-p-image { background-image: url('https://www.buv.edu.vn/wp-content/uploads/2022/05/Ajay-scaled.jpg'); }
#BUV .alex-g-image { background-image: url('https://www.buv.edu.vn/wp-content/uploads/2023/04/IMG_0985-scaled.jpg'); }
#BUV .anchit-b-image { background-image: url('https://www.buv.edu.vn/wp-content/uploads/2022/05/Anchit-scaled.jpg'); }
#BUV .anna-b-image { background-image: url('https://library.buv.edu.vn/wp-content/uploads/canvas/anna-b.webp'); }
#BUV .bilal-a-image { background-image: url('https://www.buv.edu.vn/wp-content/uploads/2024/10/DSCF1151-2-crop-scaled.jpg'); }
#BUV .chris-s-image { background-image: url('https://library.buv.edu.vn/wp-content/uploads/canvas/chris-s.webp'); }
#BUV .clare-w-image { background-image: url('https://www.buv.edu.vn/wp-content/uploads/2023/09/Clare-Watson.jpg'); }
#BUV .darius-p-image { background-image: url('https://www.buv.edu.vn/wp-content/uploads/2023/04/IMG_1271-scaled.jpg'); }
#BUV .david-h-image { background-image: url('https://library.buv.edu.vn/wp-content/uploads/canvas/David_Holloway.webp'); }
#BUV .david-v-image { background-image: url('https://www.buv.edu.vn/wp-content/uploads/2022/05/David-Vanhove-scaled.jpg'); }
#BUV .dinesh-r-image { background-image: url('https://library.buv.edu.vn/wp-content/uploads/canvas/dinesh.jpg'); }
#BUV .don-h-image { background-image: url('https://www.buv.edu.vn/wp-content/uploads/2022/05/Don-scaled.jpg'); }
#BUV .donie-j-image { background-image: url('https://library.buv.edu.vn/wp-content/uploads/canvas/donie-j.jpg'); }
#BUV .duong-p-image { background-image: url('https://www.buv.edu.vn/wp-content/uploads/2023/04/TUN_4385-scaled.jpg'); }
#BUV .francesco-m-image { background-image: url('https://www.buv.edu.vn/wp-content/uploads/2021/12/Francesco-Meca.jpg'); }
#BUV .fraser-h-image { background-image: url('https://www.buv.edu.vn/wp-content/uploads/2022/05/Fraser-scaled.jpg'); }
#BUV .hamza-m-image { background-image: url('https://www.buv.edu.vn/wp-content/uploads/2022/05/Hamza-scaled.jpg'); }
#BUV .hoang-d-image { background-image: url('https://www.buv.edu.vn/wp-content/uploads/2023/04/PAV5396-1-scaled.jpg'); }
#BUV .ingo-j-image { background-image: url('https://library.buv.edu.vn/wp-content/uploads/canvas/ingo-j.jpg'); }
#BUV .james-mcg-image { background-image: url('https://www.buv.edu.vn/wp-content/uploads/2022/05/James-McG-scaled.jpg'); }
#BUV .james-mcm-image { background-image: url('https://www.buv.edu.vn/wp-content/uploads/2023/04/James-McMillan-1-scaled.jpg'); }
#BUV .jason-m-image { background-image: url('https://www.buv.edu.vn/wp-content/uploads/2023/09/Jason-MacVaugh.jpg'); }
#BUV .jed-c-image { background-image: url('https://www.buv.edu.vn/wp-content/uploads/2022/05/Jed-scaled.jpg'); }
#BUV .joao-f-image { background-image: url('https://www.buv.edu.vn/wp-content/uploads/2021/12/IMG_1722-e1639711579314.jpg'); }
#BUV .joey-l-image { background-image: url('https://www.buv.edu.vn/wp-content/uploads/2023/04/IMG_0917-scaled.jpg'); }
#BUV .jon-n-image { background-image: url('https://www.buv.edu.vn/wp-content/uploads/2021/12/Jonathan.jpg'); }
#BUV .julian-p-image { background-image: url('https://library.buv.edu.vn/wp-content/uploads/canvas/Julien-Psomas.webp'); }
#BUV .jyotsna-b-image { background-image: url('https://www.buv.edu.vn/wp-content/uploads/2023/04/IMG_1865-scaled.jpg'); }
#BUV .kamarashvari-s-image { background-image: url('https://www.buv.edu.vn/wp-content/uploads/2023/09/Ash-1.png'); }
#BUV .kostas-t-image { background-image: url('https://www.buv.edu.vn/wp-content/uploads/2023/04/IMG_1355-scaled.jpg'); }
#BUV .lee-m-image { background-image: url('https://www.buv.edu.vn/wp-content/uploads/2022/06/Lee-IO-new-scaled.jpg'); }
#BUV .lien-n-image { background-image: url('https://library.buv.edu.vn/wp-content/uploads/2025/02/Nguyen-Phuong-Lien.jpg');}
#BUV .long-hb-image { background-image: url('https://library.buv.edu.vn/wp-content/uploads/canvas/long-hb.webp'); }
#BUV .mai-bn-image { background-image: url('https://library.buv.edu.vn/wp-content/uploads/canvas/mai-bn.jpg'); }
#BUV .manhcuong-d-image { background-image: url('https://library.buv.edu.vn/wp-content/uploads/canvas/manhcuong-d.jpg'); }
#BUV .maredi-l-image { background-image: url('https://www.buv.edu.vn/wp-content/uploads/2023/04/PAV5463-1-scaled.jpg'); }
#BUV .mark-h-image { background-image: url('https://www.buv.edu.vn/wp-content/uploads/2022/06/Mark-Harris-scaled.jpg'); }
#BUV .mark-s-image { background-image: url('https://www.buv.edu.vn/wp-content/uploads/2023/09/Mark-Spence-new.png'); }
#BUV .maren-v-image { background-image: url('https://www.buv.edu.vn/wp-content/uploads/2023/04/TUN_4567-scaled.jpg'); }
#BUV .michael-l-image { background-image: url('https://library.buv.edu.vn/wp-content/uploads/canvas/micky-lomax.webp'); }
#BUV .mike-p-image { background-image: url('https://www.buv.edu.vn/wp-content/uploads/2023/04/IMG_1194-scaled.jpg'); }
#BUV .octavio-c-image { background-image: url('https://library.buv.edu.vn/wp-content/uploads/canvas/octavio-c.jpg'); }
#BUV .olivier-c-image { background-image: url('https://www.buv.edu.vn/wp-content/uploads/2023/04/Olivier-de-Chauliac1-scaled.jpg'); }
#BUV .paul-m-image { background-image: url('https://library.buv.edu.vn/wp-content/uploads/canvas/paul-m.jpg'); }
#BUV .pham-t-image { background-image: url('https://www.buv.edu.vn/wp-content/uploads/2023/04/TUN_4385-scaled.jpg'); }
#BUV .phan-th-image { background-image: url('https://library.buv.edu.vn/wp-content/uploads/2025/02/Phan-Thanh-Hai.jpg')}
#BUV .quang-v-image { background-image: url('https://www.buv.edu.vn/wp-content/uploads/2023/04/PAV5389-1-scaled.jpg'); }
#BUV .richard-c-image { background-image: url('https://www.buv.edu.vn/wp-content/uploads/2021/12/Richard-Crop.jpg'); }
#BUV .sandra-s-image { background-image: url('https://www.buv.edu.vn/wp-content/uploads/2022/06/Sandra-cropped-scaled.jpg'); }
#BUV .shashi-c-image { background-image: url('https://www.buv.edu.vn/wp-content/uploads/2021/12/Shashi.jpg'); }
#BUV .sriganeshvarun-n-image { background-image: url('https://www.buv.edu.vn/wp-content/uploads/2025/01/DSCF0014-Enhanced-NR-Edit-copy-scaled.jpg');}
#BUV .shruthi-t-image { background-image: url('https://www.buv.edu.vn/wp-content/uploads/2023/04/TUN_4399-scaled.jpg'); }
#BUV .simon-k-image { background-image: url('https://library.buv.edu.vn/wp-content/uploads/canvas/simon-k.jpg'); }
#BUV .son-hn-image { background-image: url('https://library.buv.edu.vn/wp-content/uploads/2025/02/Adobe-Express-file.png'); }
#BUV .sven-p-image { background-image: url('https://www.buv.edu.vn/wp-content/uploads/2023/04/PAV5366-1-scaled.jpg'); }
#BUV .nguyet-n-image { background-image: url('https://library.buv.edu.vn/wp-content/uploads/2025/01/moon.png'); }
#BUV .tho-nq-image { background-image: url('https://library.buv.edu.vn/wp-content/uploads/canvas/tho-nq.jpg'); }
#BUV .ting-x-image { background-image: url('https://library.buv.edu.vn/wp-content/uploads/canvas/ting-ting.webp'); }
#BUV .viju-p-image { background-image: url('https://www.buv.edu.vn/wp-content/uploads/2022/05/Viju-scaled.jpg'); }
#BUV .vivi-m-image { background-image: url('https://library.buv.edu.vn/wp-content/uploads/canvas/vivi-m.jpeg'); }
#BUV .vinh-d-image { background-image: url('https://www.buv.edu.vn/wp-content/uploads/2024/08/DSCF0812-crop-1-scaled.jpg'); }
#BUV .william-s-image { background-image: url('https://library.buv.edu.vn/wp-content/uploads/2025/02/William-Shiue.jpg'); }
#BUV .yulia-t-image { background-image: url('https://library.buv.edu.vn/wp-content/uploads/canvas/yulia-t.webp'); }

/* UPLIFT TEMPLATE*/

/* Logic: 
   hide all until javascript loads then:
   then if is student, and is in uplift course, add custom nav. 
   else add class 'not-uplift' 
   if is error in uplift fetch, reveal original nav again and hide inserted one
*/

.tryout #global_nav_help_link { display: none; } /* hide help link on tryout page */

.buv-responsive-video {
  width: 100%; 
  aspect-ratio: 16 / 9;
  padding-bottom: 49px;
  position: relative;
}

.buv-responsive-video iframe {
  width: 100% !important;
  height: 100%;
  border-radius: 11px;
  position: absolute;
}


/* to deprecate old video style in September */ 
.buv-responsive-video-100 iframe {
  width: 100% !important;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
}

.bgcover { background-size: cover;}
.bgcontain { background-size: contain;}

.responsive-padding { padding: 15px; }

@media only screen and (min-width: 992px) {
  .responsive-padding { padding: 30px; }
  .off-lg-0 { margin-left: 0px; }
  .left-lg { text-align: left; justify-content: left; }
  .pages.show .show-content { padding: 0 12px; }
}

.uplift-student #breadcrumbs .css-1sr5vj2-screenReaderContent { display: none; }

#breadcrumbs ul li { display: none; }
.not-uplift-student #breadcrumbs ul li { display: inline-block; }
.uplift-student #breadcrumbs ul li.buv { display: inline-block; text-transform: capitalize; margin: 10px;}
.uplift-error #breadcrumbs ul li.buv { display: none; }
.uplift-student #breadcrumbs>ul>li+li:before { display: none; }
.uplift-error #breadcrumbs>ul>li+li:before { display: inline-block; }
.uplift-student #breadcrumbs>ul>li+li:last-of-type a { color: var(--ic-link-color); }
.uplift-student #courseMenuToggle { display: none; }
.uplift-student .ic-app-crumbs, .uplift-student #breadcrumbs { width: 100%; } /* min width messes layout */

#courseMenuToggle { display: none; }
.not-uplift-student #courseMenuToggle { display: block; }

@media (min-width: 768px){

    body.course-menu-expanded:not(.ic-no-flex-layout):not(.embedded):not(.is-inside-submission-frame):not(.not-uplift-student):not(.notifications):not(.profile):not(.eportfolios):not(.content_shares):not(.qr_mobile_login):not(.past_global_announcements) .ic-Layout-columns { margin: 30px; }
    /* hide then reveal home page content */
    body.course-menu-expanded.home:not(.ic-no-flex-layout):not(.embedded):not(.is-inside-submission-frame) .ic-Layout-columns { display: none; }
    body.course-menu-expanded.home:not(.ic-no-flex-layout):not(.embedded):not(.is-inside-submission-frame).not-uplift-student .ic-Layout-columns, 
    body.course-menu-expanded.home:not(.ic-no-flex-layout):not(.embedded):not(.is-inside-submission-frame).loaded .ic-Layout-columns { display: block; }
    /* hide nav content */
    body.with-left-side:not(.not-uplift-student):not(.notifications):not(.profile):not(.eportfolios):not(.content_shares):not(.qr_mobile_login):not(.past_global_announcements) #left-side { display: none !important; }
    /*remove padding from the module nav and module content*/
}

body:not(.no-page-block).with-right-side:not(.not-uplift-student):not(.assessing) #right-side-wrapper { display: none; } /* calendar page / not(.assessing) disqualifies classic quizzes sidebar to show timer*/
body.home:not(.not-uplift-student) .header-bar { display: none; } /* remove header from home page */
body:not(.not-uplift-student) .header-bar-outer-container { display: none; } /* remove view all pages link */

/* reveal screenreader h1 to give us a page title */
body:not(.home):not(.not-uplift-student) h1.screenreader-only {
    position: relative;
    height: 100%;
    width: 100%;
    margin-bottom: 20px;
}

body.brand_configs.course-menu-expanded .ic-Layout-columns, body.context-account_1.course-menu-expanded .ic-Layout-columns { display: block !important; margin-left: 192px;} /* failsafe not to lose nav on theme pages */

/* top section */

#BUV.uplift.front { width: 100%; float: left; clear: both; margin-bottom: 20px; }  

.uplift-home .ig-header .requirements_message { display: none; }
.uplift-home .item-group-condensed .ig-header { padding-left: 15px; margin-top: 0px; }
.uplift-home .front-navinoonoo ul { list-style: none; margin: 0px; }
.uplift-home .front-navinoonoo ul li { display: inline-block; font-size: 1.1em; margin-top: 45px;}
.uplift-home .ig-list .ig-row { border-width: 0px; border-bottom-width: 1px; }
.uplift-home .item-group-condensed .ig-header { border-radius: 4px; background-color: white; }
.uplift-home .ig-header .ig-header-admin .completion_status { margin-top: 6px; }
.uplift-home .context_module_item.context_module_sub_header .module-item-title .locked_title { font-size: 16px; text-transform: uppercase; }
.uplift-home .requirement-description.ig-details__item { text-transform: uppercase; }
.uplift-home .item-group-condensed.handbook li.context_module_sub_header { border-bottom-width: 0px; }
.uplift-home .item-group-condensed.handbook li.context_module_sub_header:last-child { border-bottom-width: 1px; }
.uplift-home .item-group-condensed.handbook li.context_module_sub_header .ig-row { padding: 10px 0px 0px; border: none; }
.uplift-home .item-group-condensed.handbook li.context_module_sub_header .ig-row:last-child { padding: 10px 0px 0px; border: 1px; }
.uplift-home .item-group-condensed.handbook li.context_module_sub_header:nth-child(1) .ig-row { margin-top: 15px; }
.uplift-home .item-group-condensed.handbook li.context_module_sub_header span.title {font-size: 14px; }
.uplift-home .ig-header.header { display: none; }
.uplift-home #context_modules .content ul li.context_module_sub_header:nth-child(1) .ig-row { border-width: 0px; padding-bottom: 0px; text-transform: uppercase; }
.uplift-home #context_modules .content ul li.context_module_sub_header:nth-child(2) .ig-row .title { padding-bottom: 20px; font-weight: 400; font-family: 'Lato Extended', Lato; font-size: 1rem; text-transform: none; vertical-align: top; }
.uplift-home #context_modules .content { display: none; } /* hide by default but open with js on button click */
.uplift-home .ig-list li:first-child .ig-row { padding-top: 0px;}
.uplift-home .item-group-condensed { padding: 0px; margin: 0px; }
.uplift-home .ig-list .ig-row.ig-published:not(.student-view):before { display: none; } /* remove green border for 'trial view' */


/* content section */

/* put these on adaptive width thing */

@media only screen and (min-width: 992px) { 

    .module-nav { padding-left: 0px; }

    #context_modules { padding-right: 0px; }

}

#moduleNavSection h5 {
  font-weight: 800;
  color: #4c5860;
}

#moduleNavSection #front-nav-grid-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  grid-column-gap: 15px;
}

#moduleNavSection p.front-button {
  margin: 5px 0 10px;
  text-decoration: none;
  /*border: 1px solid #c7cdd1;*/
  padding: 10px 12px 5px;
  text-align: center;
  display: flex;
  flex-direction: column; /* Stack children vertically */
  justify-content: center; /* Vertically center content */
  font-family: Brandon, Brandonx, 'Lato Extended', Lato;
  font-size: 0.95rem;
  text-transform: uppercase;
  border-radius: 4px;
  background: #f5f5f5;
}

#moduleNavSection p.front-button a {
  text-decoration: none !important;
  color: var(--ic-brand-primary);
  border-color: var(--ic-brand-primary);
}

#moduleNavSection p.front-button:hover, #moduleNavSection p.front-button.current, #handbook-complete a:hover, .courseFrontHtml .pill-nav a:hover {
  background: #d92226;
  border-color: #d92226;
  color: white ;
}

#moduleNavSection p.front-button:hover a {
  color: white !important;
}

#moduleNavSection p.front-button a .external_link_icon { display: none !important; }

#section-tabs ul {
  list-style: none;
  margin-left: 0px;
  display: none;
}

#section-tabs ul li.subheader {
  text-transform: uppercase;
  font-family: Brandon, Brandonx, 'Lato Extended', Lato;
  font-weight: bold;
  color: var(--ic-brand-font-color-dark-lightened-15);
}

#section-tabs ul li.subheader:nth-child(1) {
  padding-top: 25px;
  padding-bottom: 30px;
  font-size: 0.9em;
}

#section-tabs ul li {
  padding: 7px 0px;
}

#section-tabs ul li a.active {
  padding: 5px 10px 3px; 
  display: block;
}

.show-content.user_content { margin-bottom: 30px; }

.padlet-embed iframe { border: 0px; }

/* SPEEDGRADER MODS */

.hiddenRubric div[data-testid="rubric-tab"], .hiddenRubric #rubrics { display: none; }

.speedgrader-mods .react-rubric button { display: none!important; }

.speedgrader-mods .react-rubric .rating-description { max-height: 4rem; padding-bottom: 10px; }

.speedgrader-mods .react-rubric .rating-tier .rating-footer { padding-bottom: 3px;}

.speedgrader-mods .react-rubric .rating-tier span:nth-child(3) { display: none; }

.speedgrader-alert {
  background: #2d3b45;
  padding: 10px;
  text-align: center;
  font-weight: bold;
  color: white;
}

/*////////BUV ONLINE ////////////*/

.posb0 { bottom: 0px;}

.p12 p, .p12 li, p.p12  {
  font-size: 1.2rem;
}

.p21 p, .p21 li, p.p21  {
  font-size: 21px;
}

.p12 .ui-tabs .ui-tabs-nav li:not(.ui-tabs-active.ui-state-active) a {
  color: #3462ae;
}

.reading-leading p, p.ld22, .ld22 p { 
  line-height: 2.2em;
}

.mt20, .mtb20 { margin-top: 20px; }
.mt30, .mtb30 { margin-top: 30px; }
.mt50, .mtb50 { margin-top: 50px; }
.mt60, .mtb60 { margin-top: 60px; }

.mb20, .mtb20 { margin-bottom: 20px; }
.mb30, .mtb30 { margin-bottom: 30px; }
.mb50, .mtb50 { margin-bottom: 50px; }
.mb60, .mtb60 { margin-bottom: 60px; }

.pad40 { padding: 40px; }
.padl40 { padding-left: 40px; }

.tcenter { text-align: center; }
.tbold { font-weight: bold; }
.tcaps { text-transform: uppercase; }

.spacert { margin-top: 48px; }
.spacerb { margin-bottom: 48px;}
.spacertb { margin-top: 48px; margin-bottom: 48px;} 
.pop-out-border.spacerb, .pop-out-border.spacertb { margin-bottom: 58px;} 
p.spacert { margin-top: 60px;}
p.spacerb { margin-bottom: 60px;}
p.spacertb { margin-top: 60px; margin-bottom: 60px;}

/* VOCAB LIST BOX */

/* Basic Table Styling */
.vocab-list {
  width: 100%;
  margin: auto;
  overflow: visible;
  border-radius: 2px;
}

.vocab-list table {
  width: 100%;
  text-align: center;
}

.vocab-list th, .vocab-list td {
  border: 1px solid #333333;
}

.vocab-list td {
  padding: 20px 35px !important;
}

.vocab-list th {
  font-size: 1.1em;
  text-transform: uppercase;
  font-weight: bold;
  font-family: 'Brandon';
  padding: 30px 35px 20px;
}


/* Highlight First Column Words */

.vocab-list td:first-child {
  font-weight: bold;
  font-size: 1.1em;
}

/* italicise example */

.vocab-list td:nth-child(3) {
  font-style: italic;
}

/* Responsive Table */
@media (max-width: 768px) {

  .vocab-list.pop-out-border-right { box-shadow: none; }

  .vocab-list table, .vocab-list thead, .vocab-list tbody,
  .vocab-list th, .vocab-list td, .vocab-list tr {
      display: block;
  }

  .vocab-list thead {
      display: none;
  }

  .vocab-list tr {
      border: none; /* Prevents double border effect */
      margin-bottom: 40px;
      box-shadow: 8px 8px 0px 0px #ffeeb9;
  }
  
  .vocab-list td {
      display: block;
      position: relative;
  }

  .vocab-list td:nth-child(2){
      border-top: none;
      border-bottom: none;
  }
}

/* SUCCESS PAGE */

#buv-success-wrapper.pop-out-border-right { box-shadow: 8px 8px 0px 0px #90bf93; }

#buv-success-wrapper .checkmark {
  width: 200px;
  height: 200px;
  display: inline-block;
  position: relative;
  margin: 20px;
  animation: bounceIn 0.3s ease-out forwards;
}

#buv-success-wrapper .checkmark::before,
#buv-success-wrapper .checkmark::after {
  content: "";
  position: absolute;
  background-color: #52954e;
  border-radius: 5px;
}

#buv-success-wrapper .checkmark::before {
  width: 32px;
  height: 100px;
  left: 85px; /* Centering for balance */
  top: 20px;
}

#buv-success-wrapper .checkmark::after {
  width: 65px;
  height: 32px;
  left: 52px;
  top: 107px;
}

@keyframes bounceIn {
  0% {
    transform: scale(0) rotate(45deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.2) rotate(45deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(45deg);
  }
}

/* BUV NEXT SECTION */

#buv-next { margin-top: 30px; }

#buv-next a {
    text-decoration: none;
    color: #2c3e50;
    display: inline-flex;
    align-items: center;
    transition: color 0.3s ease;
}

#buv-next a:hover {
    color: #3385d3
}

.buvfooter p {
  font-size: 1.5em; 
}

.buvfooter p span.hl{
  background-color: #cdf2ff; 
  padding: 10px;
}

p.hl span {
  padding: 8px;
}

.rotatecc {
  display: inline-block;       /* so the transform applies cleanly */
  transform: rotate(-2deg);    /* negative = tilt left, positive = tilt right */
  transform-origin: center;    /* pivot point (can be left, right, top, etc.) */
}

.rotatecc-sm {
  display: inline-block;       
  transform: rotate(-1deg);    
  transform-origin: center;    
}

.rotatecw {
  display: inline-block;       /* so the transform applies cleanly */
  transform: rotate(2deg);    /* negative = tilt left, positive = tilt right */
  transform-origin: center;    /* pivot point (can be left, right, top, etc.) */
}

.rotatecw-sm {
  display: inline-block;       
  transform: rotate(1deg);    
  transform-origin: center;    
}

/* HIGHLIGHT TEXT */

.buv-toggle-highlights {
    background-color: #417ddb;
    display: inline-flex;
    padding: 9px 25px;
    border-radius: 40px;
    color: whitesmoke;
    cursor: pointer;
}

.buv-toggle-highlights:hover {
    background-color: #3a6bbf;
}

.buv-centre-highlights {
  display: flex;
  justify-content: center;
}

/* FLIP CARDS */

.flip-card-container {
  display: flex;
  flex-wrap: wrap;
  padding: 20px;
}

.flip-card-container details .grid-row { margin-top: 30px;}

.flip-card {
  perspective: 1000px;
  cursor: pointer;
  padding: 12px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  transition: transform 0.3s;
  transform-style: preserve-3d;
  aspect-ratio: 1 / 1.25;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(10deg);
}

.flip-card.flipped .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  overflow: hidden;
}

.flip-card-front {
  background-color: #f0f0f0;
}

.flip-card-front img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.flip-card-back {
  background-color: whitesmoke;
  transform: rotateY(180deg);
  text-align: center;
  box-sizing: border-box;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}




/* stretch thumnail images properly */

.buv-responsive-video [data-media-provider] video, .buv-responsive-video [data-media-provider] iframe {
    position: static !important;
}


/*IELTS BOXES*/

.pop-out-border {
  border: 1px solid black; padding: 40px; border-radius: 11px; background: white; position: relative;
}

.pop-out-border::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 10px;
    width: 100%;
    height: 100%;
    border: 1px solid black;
    border-radius: 14px;
    box-sizing: border-box;
    z-index: -1;         
} 

.pop-out-border.audio-review {
   border-color: #d2d2d2;
   padding-left: 60px;
   padding-right: 60px;
}

.pop-out-border.audio-review::before {
   border: none;
}

.pop-out-border.purple::before {
    background: #efedf4;       
}

.pop-out-border.dark::before {
    background: #f1ebf3;       
}

.pop-out-border.blue::before {
    background: #edf3f7;      
}

.pop-out-border.yellow::before {
    /*background: #f5f4ee; */
    background: #efeee9;   
}


.pop-out-border.speedread::before {
    background: linear-gradient(45deg, #ffe170, #fffadc);    
    /* ffcf92 - peach*/
}

.shorts {
  padding: 20px;
}

.shorts iframe {
  border-radius: 4px;
  margin: auto;
  width: 100%;
  aspect-ratio: 1 / 1.7793594306;
}


.pop-out-border-right, .pop-out-border-blue { box-shadow: 8px 8px 0px 0px #bde2f5; }
.pop-out-border-red { box-shadow: 10px 10px 0px 0px #f7cac4; }
.pop-out-border-green { box-shadow: 10px 10px 0px 0px #c0edd8; }
.pop-out-border-purple { box-shadow: 10px 10px 0px 0px #eec9fc; }
.pop-out-border-yellow { box-shadow: 10px 10px 0px 0px #fbefbd; }

/* ICONS */

.task {
  padding: 3px 6px 0px;
  position: relative;
  display: inline-block;
  color: #18212a;
}

.task::before {
  content: '';
  position: absolute;
  top: -10px;
  left: -79px;
  width: 68px;
  height: 61px;
  background-repeat: no-repeat;
}


.task.yellow, .pop-out-border.yellow.whatsin::before { background-color: #fef5b1;}

.task.purple, .pop-out-border.purple.whatsin::before { background-color: #ffdbf1;}

.task.dark, .pop-out-border.dark.whatsin::before { background-color: #e2dbff;}

.task.blue, .pop-out-border.blue.whatsin::before  { background-color: #c2e9ff; }

.task.purple::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="Layer_2" data-name="Layer 2" viewBox="0 0 55.34 31.57"><defs><style>.cls-1,.cls-2{fill:%23ffc2ec}.cls-1{opacity:.64}</style></defs><g id="Layer_1-2" data-name="Layer 1" style="opacity:.64"><path d="M55.34 18.16 42.42 31.57l-2.84-4.59 2.72-2.92c2.52-.2 3.94-.58 3.94-.58l.63-5.69s-3.1.37-7.69.16l-3.28-1.38 2.78-5.07 16.65 6.66Z" class="cls-1"/><path d="m46.89 17.78-.63 5.69s-1.43.39-3.94.58l3.21-3.45-6.33-2.66c4.59.21 7.69-.16 7.69-.16Z" class="cls-2"/><path d="m39.2 17.95 6.33 2.66-3.21 3.45c-4.57.36-12.72.1-22.42-4.22C6.61 13.92 0 4.24 0 4.24L4.24 0s7.91 10.49 18.33 14.6c5.94 2.34 12.03 3.14 16.63 3.35Z" class="cls-1"/><path d="m46.89 17.78-.63 5.69s-1.43.39-3.94.58l3.21-3.45-6.33-2.66c4.59.21 7.69-.16 7.69-.16Z" class="cls-2"/></g></svg>');
}

.task.nono.purple::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="Layer_2" data-name="Layer 2" viewBox="0 0 256.21 147.77"><defs><style>.cls-1,.cls-2{fill:%23ffc2ec}.cls-2{opacity:.64}</style></defs><g id="Layer_1-2" data-name="Layer 1" style="opacity:.64"><path d="M89.58 86.64c-4.59 5.16-9.49 9.7-14.41 13.23-4.21-5.35-8-10.98-11.33-16.6 4.64-2.62 9.58-7.24 14.16-12.84 3.52 5.62 7.5 11.14 11.58 16.22" class="cls-1"/><path d="M49.25 107.99C5.16 107.99 0 57.94 0 57.94l19.9-4.53S24 86.02 51.53 86.02c2.06 0 4.25-.18 6.57-.57 1.82-.31 3.75-1.06 5.74-2.18 3.33 5.62 7.12 11.25 11.33 16.6-5.56 3.97-11.15 6.64-16.4 7.41-3.36.49-6.53.72-9.52.72M89.58 86.64C85.5 81.56 81.52 76.04 78 70.42c12.36-15.13 21.95-37.44 15.07-46.8-1.21-1.66-3.88-2.36-7.08-2.36-7.34 0-17.49 3.69-19.39 8-4.33 9.83 1.83 25.86 11.4 41.15-4.58 5.6-9.52 10.22-14.16 12.84-8.27-13.96-13.68-27.9-15.32-37.6C42.64 10.93 63.86 6.88 78.93 2.84c2.78-.74 5.6-1.11 8.38-1.11 21.01 0 39.55 21.03 20.15 58.86-4.69 9.13-10.95 18.28-17.87 26.05" class="cls-2"/><path d="M254.58 147.77s-45.2-11.42-68.12-28.22c-.94-.69-1.86-1.38-2.76-2.08-14.97 10.34-32.38 16.88-49.24 16.88-7.01 0-13.92-1.13-20.52-3.59-14.89-5.55-28.12-17.35-38.76-30.9 4.92-3.52 9.82-8.07 14.41-13.23 9.15 11.37 18.83 20.49 25.11 23.52 4.8 2.31 9.95 3.34 15.3 3.34 11.84 0 24.6-5.07 36.34-12.49-21.74-26-19.68-52.6-14.83-71.06C157.29 7.94 175.74 0 192.15 0c8.91 0 17.24 2.34 22.6 6.04 19.26 13.3 12.65 62.73-6.09 87.61-2.59 3.45-5.46 6.78-8.54 9.95 12.1 9.18 56.1 23.32 56.1 23.32l-1.63 20.85M194.28 23.91c-7.31 0-16.56 2.9-18.94 6.87-7.89 13.15-8.53 35.65 8.36 56.98 2.52-2.26 4.91-4.59 7.14-6.93 9.64-10.09 21.43-44.42 11.82-54.53-1.58-1.67-4.74-2.39-8.38-2.39" class="cls-2"/><path d="M200.08 103.61c-4.96 5.1-10.5 9.79-16.42 13.87-7-5.4-12.72-10.92-17.36-16.46 6.15-3.9 12.04-8.44 17.36-13.24 4.28 5.41 9.7 10.75 16.41 15.83Z" class="cls-1"/></g></svg>');
}

.task.yellow::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="Layer_2" data-name="Layer 2" viewBox="0 0 55.34 31.57"><defs><style>.cls-1,.cls-2{fill:%23ffee66}.cls-1{opacity:.64}</style></defs><g id="Layer_1-2" data-name="Layer 1" style="opacity:.64"><path d="M55.34 18.16 42.42 31.57l-2.84-4.59 2.72-2.92c2.52-.2 3.94-.58 3.94-.58l.63-5.69s-3.1.37-7.69.16l-3.28-1.38 2.78-5.07 16.65 6.66Z" class="cls-1"/><path d="m46.89 17.78-.63 5.69s-1.43.39-3.94.58l3.21-3.45-6.33-2.66c4.59.21 7.69-.16 7.69-.16Z" class="cls-2"/><path d="m39.2 17.95 6.33 2.66-3.21 3.45c-4.57.36-12.72.1-22.42-4.22C6.61 13.92 0 4.24 0 4.24L4.24 0s7.91 10.49 18.33 14.6c5.94 2.34 12.03 3.14 16.63 3.35Z" class="cls-1"/><path d="m46.89 17.78-.63 5.69s-1.43.39-3.94.58l3.21-3.45-6.33-2.66c4.59.21 7.69-.16 7.69-.16Z" class="cls-2"/></g></svg>');
}

.task.nono.yellow::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="Layer_2" data-name="Layer 2" viewBox="0 0 256.21 147.77"><defs><style>.cls-1,.cls-2{fill:%23ffee66}.cls-2{opacity:.64}</style></defs><g id="Layer_1-2" data-name="Layer 1" style="opacity:.64"><path d="M89.58 86.64c-4.59 5.16-9.49 9.7-14.41 13.23-4.21-5.35-8-10.98-11.33-16.6 4.64-2.62 9.58-7.24 14.16-12.84 3.52 5.62 7.5 11.14 11.58 16.22" class="cls-1"/><path d="M49.25 107.99C5.16 107.99 0 57.94 0 57.94l19.9-4.53S24 86.02 51.53 86.02c2.06 0 4.25-.18 6.57-.57 1.82-.31 3.75-1.06 5.74-2.18 3.33 5.62 7.12 11.25 11.33 16.6-5.56 3.97-11.15 6.64-16.4 7.41-3.36.49-6.53.72-9.52.72M89.58 86.64C85.5 81.56 81.52 76.04 78 70.42c12.36-15.13 21.95-37.44 15.07-46.8-1.21-1.66-3.88-2.36-7.08-2.36-7.34 0-17.49 3.69-19.39 8-4.33 9.83 1.83 25.86 11.4 41.15-4.58 5.6-9.52 10.22-14.16 12.84-8.27-13.96-13.68-27.9-15.32-37.6C42.64 10.93 63.86 6.88 78.93 2.84c2.78-.74 5.6-1.11 8.38-1.11 21.01 0 39.55 21.03 20.15 58.86-4.69 9.13-10.95 18.28-17.87 26.05" class="cls-2"/><path d="M254.58 147.77s-45.2-11.42-68.12-28.22c-.94-.69-1.86-1.38-2.76-2.08-14.97 10.34-32.38 16.88-49.24 16.88-7.01 0-13.92-1.13-20.52-3.59-14.89-5.55-28.12-17.35-38.76-30.9 4.92-3.52 9.82-8.07 14.41-13.23 9.15 11.37 18.83 20.49 25.11 23.52 4.8 2.31 9.95 3.34 15.3 3.34 11.84 0 24.6-5.07 36.34-12.49-21.74-26-19.68-52.6-14.83-71.06C157.29 7.94 175.74 0 192.15 0c8.91 0 17.24 2.34 22.6 6.04 19.26 13.3 12.65 62.73-6.09 87.61-2.59 3.45-5.46 6.78-8.54 9.95 12.1 9.18 56.1 23.32 56.1 23.32l-1.63 20.85M194.28 23.91c-7.31 0-16.56 2.9-18.94 6.87-7.89 13.15-8.53 35.65 8.36 56.98 2.52-2.26 4.91-4.59 7.14-6.93 9.64-10.09 21.43-44.42 11.82-54.53-1.58-1.67-4.74-2.39-8.38-2.39" class="cls-2"/><path d="M200.08 103.61c-4.96 5.1-10.5 9.79-16.42 13.87-7-5.4-12.72-10.92-17.36-16.46 6.15-3.9 12.04-8.44 17.36-13.24 4.28 5.41 9.7 10.75 16.41 15.83Z" class="cls-1"/></g></svg>');
}

.task.dark::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="Layer_2" data-name="Layer 2" viewBox="0 0 55.34 31.57"><defs><style>.cls-1{opacity:.64}.cls-1,.cls-2{fill:%23c1b6ff}</style></defs><g id="Layer_1-2" data-name="Layer 1"><path d="M55.34 18.16 42.42 31.57l-2.84-4.59 2.72-2.92c2.52-.2 3.94-.58 3.94-.58l.63-5.69s-3.1.37-7.69.16l-3.28-1.38 2.78-5.07 16.65 6.66Z" class="cls-1"/><path d="m46.89 17.78-.63 5.69s-1.43.39-3.94.58l3.21-3.45-6.33-2.66c4.59.21 7.69-.16 7.69-.16Z" class="cls-2"/><path d="m39.2 17.95 6.33 2.66-3.21 3.45c-4.57.36-12.72.1-22.42-4.22C6.61 13.92 0 4.24 0 4.24L4.24 0s7.91 10.49 18.33 14.6c5.94 2.34 12.03 3.14 16.63 3.35Z" class="cls-1"/><path d="m46.89 17.78-.63 5.69s-1.43.39-3.94.58l3.21-3.45-6.33-2.66c4.59.21 7.69-.16 7.69-.16Z" class="cls-2"/></g></svg>');
}

.task.blue::before {
  background-image:  url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55.34 31.57"><defs><style> .cls-1, .cls-2 { fill: %233ebaff; } .cls-3, .cls-2 { opacity: .64; } </style></defs><g id="Layer_1-2" data-name="Layer 1"><g class="cls-3"><path class="cls-2" d="M55.34,18.16l-12.92,13.41-2.84-4.59,2.72-2.92c2.52-.2,3.94-.58,3.94-.58l.63-5.69s-3.1.37-7.69.16l-3.28-1.38,2.78-5.07,16.65,6.66Z"/><path class="cls-1" d="M46.89,17.78l-.63,5.69s-1.43.39-3.94.58l3.21-3.45-6.33-2.66c4.59.21,7.69-.16,7.69-.16Z"/><path class="cls-2" d="M39.2,17.95l6.33,2.66-3.21,3.45c-4.57.36-12.72.1-22.42-4.22C6.61,13.92,0,4.24,0,4.24L4.24,0s7.91,10.49,18.33,14.6c5.94,2.34,12.03,3.14,16.63,3.35Z"/><path class="cls-1" d="M46.89,17.78l-.63,5.69s-1.43.39-3.94.58l3.21-3.45-6.33-2.66c4.59.21,7.69-.16,7.69-.16Z"/></g></g></svg>');
}




.speed {
  margin-top: 100px;
  position: relative;
  letter-spacing: 1px;
}

.speed::before {
  content: '';
  position: absolute;
  top: -80px; 
  left: 50%;  
  transform: translateX(-50%); 
  width: 60px;
  height: 60px;
  background-repeat: no-repeat;
  background-size: contain; 
  background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 149 125.19"><defs><style> .cls-1 { opacity: .64; } .cls-1, .cls-2 { fill: %23ffe170; } </style></defs><g id="Layer_1-2" data-name="Layer 1"><g><path class="cls-2" d="M123.03,43.32L145.84,3.65c.79-2.36-.4-3.22-2.59-3.42-9.65.59-20.17-.75-29.72,0-1.62.13-3.27.51-4.42,1.74l-31.49,60.55c-.94,1.39.03,3.54,1.67,3.54h20.74l-20.95,57.58-.19,1.55,1.33-.14,68.35-78.27c1.03-.68-.04-3.47-.79-3.47h-24.75Z"/><path class="cls-1" d="M123.03,43.32h24.75c.75,0,1.82,2.78.79,3.47l-68.35,78.27-1.33.14.19-1.55,20.95-57.58h-20.74c-1.64,0-2.61-2.15-1.67-3.54L109.11,1.97c1.14-1.22,2.79-1.61,4.42-1.74,9.55-.75,20.06.59,29.72,0,2.19.19,3.37,1.05,2.59,3.42l-22.8,39.67Z"/></g><rect class="cls-2" x="10" y="39.65" width="57.5" height="10.87" rx="3.86" ry="3.86"/><rect class="cls-2" y="59.65" width="57.5" height="10.87" rx="3.86" ry="3.86"/><rect class="cls-2" x="20.5" y="19.65" width="57.5" height="10.87" rx="3.86" ry="3.86"/><rect class="cls-2" x="17" y="79.07" width="57.5" height="10.87" rx="3.86" ry="3.86"/></g></svg>');
}

.speed-start {
  transition: background-color 0.25s ease;
  border-radius: 4px;
  background: #f2f2f2;
  cursor: pointer; 
  text-align: center;
  padding: 30px; 
  font-size: 1.2em;
  cursor: pointer;
}

.speed-start:hover {
  background-color: #fdef85; 
}

.arrow-before {
  position: relative;
}

.arrow-before::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -75px; 
  transform: translateY(-50%); 
  width: 70px;
  height: 30px;
  background-repeat: no-repeat;
  background-size: contain; 
}

.arrow-before.blue::before {
  background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44.36 21.27"><defs><style> .cls-1, .cls-2 { fill: %233ebaff; } .cls-3, .cls-2 { opacity: .64; } </style></defs><g id="Layer_1-2" data-name="Layer 1"><g class="cls-3"><path class="cls-2" d="M0,13.79v-4.32s22-.81,29.25-.32c1.27.09,3.49.03,5.74-.07,2.62.93,5.13,1.8,5.13,1.8,0,0-3.46,1.11-6.49,2.14-3.93.07-8.19.1-10.37-.03-5.85-.37-23.26.81-23.26.81Z"/><path class="cls-1" d="M33.63,13.02c3.03-1.02,6.49-2.14,6.49-2.14,0,0-2.51-.87-5.13-1.8,3.58-.16,7.23-.44,7.23-.44v4.15s-4.08.14-8.59.22Z"/><path class="cls-2" d="M22.18,21.27l-1.18-2.99s6.68-3.08,8.96-3.96c.82-.32,2.19-.8,3.67-1.3,4.51-.08,8.59-.22,8.59-.22v-4.15s-3.65.28-7.23.44c-1.96-.7-3.98-1.43-5.05-1.86-2.27-.9-8.94-3.9-8.94-3.9l1.85-3.32s8.2,3.76,11,4.86c2.59,1.01,10.52,3.61,10.52,3.61v4.07s-8.66,3.19-11.52,4.31c-2.68,1.06-10.66,4.41-10.66,4.41Z"/></g></g></svg>');
}

.arrow-before.dark::before {
  background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44.36 21.27"><defs><style> .cls-1, .cls-2 { fill: %23f1c6ff; } .cls-3, .cls-2 { opacity: .64; } </style></defs><g id="Layer_1-2" data-name="Layer 1"><g class="cls-3"><path class="cls-2" d="M0,13.79v-4.32s22-.81,29.25-.32c1.27.09,3.49.03,5.74-.07,2.62.93,5.13,1.8,5.13,1.8,0,0-3.46,1.11-6.49,2.14-3.93.07-8.19.1-10.37-.03-5.85-.37-23.26.81-23.26.81Z"/><path class="cls-1" d="M33.63,13.02c3.03-1.02,6.49-2.14,6.49-2.14,0,0-2.51-.87-5.13-1.8,3.58-.16,7.23-.44,7.23-.44v4.15s-4.08.14-8.59.22Z"/><path class="cls-2" d="M22.18,21.27l-1.18-2.99s6.68-3.08,8.96-3.96c.82-.32,2.19-.8,3.67-1.3,4.51-.08,8.59-.22,8.59-.22v-4.15s-3.65.28-7.23.44c-1.96-.7-3.98-1.43-5.05-1.86-2.27-.9-8.94-3.9-8.94-3.9l1.85-3.32s8.2,3.76,11,4.86c2.59,1.01,10.52,3.61,10.52,3.61v4.07s-8.66,3.19-11.52,4.31c-2.68,1.06-10.66,4.41-10.66,4.41Z"/></g></g></svg>');
}

.arrow-before.purple::before {
  background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44.36 21.27"><defs><style> .cls-1, .cls-2 { fill: %23ffc2ec; } .cls-3, .cls-2 { opacity: .64; } </style></defs><g id="Layer_1-2" data-name="Layer 1"><g class="cls-3"><path class="cls-2" d="M0,13.79v-4.32s22-.81,29.25-.32c1.27.09,3.49.03,5.74-.07,2.62.93,5.13,1.8,5.13,1.8,0,0-3.46,1.11-6.49,2.14-3.93.07-8.19.1-10.37-.03-5.85-.37-23.26.81-23.26.81Z"/><path class="cls-1" d="M33.63,13.02c3.03-1.02,6.49-2.14,6.49-2.14,0,0-2.51-.87-5.13-1.8,3.58-.16,7.23-.44,7.23-.44v4.15s-4.08.14-8.59.22Z"/><path class="cls-2" d="M22.18,21.27l-1.18-2.99s6.68-3.08,8.96-3.96c.82-.32,2.19-.8,3.67-1.3,4.51-.08,8.59-.22,8.59-.22v-4.15s-3.65.28-7.23.44c-1.96-.7-3.98-1.43-5.05-1.86-2.27-.9-8.94-3.9-8.94-3.9l1.85-3.32s8.2,3.76,11,4.86c2.59,1.01,10.52,3.61,10.52,3.61v4.07s-8.66,3.19-11.52,4.31c-2.68,1.06-10.66,4.41-10.66,4.41Z"/></g></g></svg>');
}