/*
* CSS för Gymnasiewebbar Botkyrka 2024 - Version 0.1
* 
* Skapad av: Fostira Webb & Consulting AB
*
* ------- MAIN --------
*
*/

/**
* Innehållsförteckning:
*
* 1.0 - Generellt
*   1.1 - Basregler
*   1.2 - Bilder
*   1.3 - Fonter
*    1.3.1 - Formatmallar
*    1.3.2 - Icomoon?
*    1.3.3 - Extern länk
*   1.4 - Grids
*   1.5 - Tabfokus
* 2.0 - Utils
*   2.1 - Buttons
*   	2.1.1 - Basic
*   	2.1.2 - Primary
*   	2.1.3 - Secondary
*	 	2.1.4 - Cookiebanner
* 3.0 - Sidhuvud
*   3.1 - Meny
*		3.1.1 Hamburgerikon
* 	 3.1.2 Meny - Header
*     3.1.3 Meny - Footer
*   3.2 - Sidhuvud Mobilt
* 6.0 - Listningar av program



*
* 7.0 - The switched modules on the program page
*   7.1 - Program cards
* 8.0 - The hit listing on the contact page
*/


/**
* 1.0 - Generellt
*
**/
/* Color variables */
:root {
  --purple: #410f5b;
  --yellow: #ffba3f;
}

/*
* 1.1 - Basregler
*/

html { 
   word-break: break-word;
   scroll-behavior: smooth;
}

img{
   object-fit: cover;
}

*{
   box-sizing: border-box;
}

.gym-print-only{
   display: none;
}

.normal a{
   text-decoration: none;
}

/*.normal a:hover,
a:hover{
   text-decoration: underline;
}*/

.is-focusable.focused {
   background-color: grey;
   color: #ffffff;
   clip: auto;
   height: auto;
   overflow: visible;
   position: absolute;
   width: -moz-fit-content;
   width: fit-content;
   max-width: 100%;
   text-decoration: none;
   left: 0;
   right: 0;
   margin: auto;
   padding: 1.5rem 4rem;
   outline: none;
   z-index: 9999999;
}
/*
* 1.2 - Bilder
*/

/*
* 1.3 - Fonter & Typografi
*/
.sv-column-3 .sv-use-margins h4.sv-font-rubrik-4 {
	margin-top: 20px;
}
     
.sv-column-3 .sv-nestedlistmenu-portlet ul li {
   list-style-type: disc;
   margin-left: 25px !important;
}
     
.sv-column-3 .sv-nestedlistmenu-portlet ul li::marker {
  color: #2276F1;
}
     
     


/**
* 2.0 - Utils
*
**/

/*
*   2.1 - Buttons
*/

/******** AVVAKTIVERAR ENVISION KNAPP FÄRGER DÅ FLERA DELAR FÅR PROBLEM *****/


/** Default button Envision **/

/*
.env-button{
 border-color:#284672 !important;
}

.env-button:hover{
   color: #fff;
background-color:#20385b;
border-color:#20385b !important;   
}

.env-button:focus{
background-color:#ffba3f;
border-color:#ffba3f !important;
color:black;
}
*/

.env-button--primary:focus, .env-button--primary:hover{
   background-color: black;
   color: white;
   border: black ;
}
.env-button.active {
   color: var(--purple);
	background-color: var(--yellow);
   border: none;
}
.env-button--primary{
border-color: #410F5B;
Background-color: #410F5B;
color: white;
}


/* Hide the buttons Sök and Rensa.  */
.env-button[value="Sök"], .env-button[value="Rensa"] {
    display: none;
}


/** Primary button Envision **/

/*
.env-button--primary{
border-color:#ffba3f !important;
}

.env-button--primary:hover{
background-color:#cc9532;
border-color:#cc9532 !important;  

}

.env-button--primary:focus{
background-color:#284672;
border-color:#284672 !important;   
color:white;
}
*/

/** Secondary button Envision **/
/*
.env-button--secondary{
   border-color: #969696 !important;
   
}

.env-button--secondary:hover{
background-color:#CCCCCC;
border-color: #969696 !important;

}

.env-button--secondary:focus{
background-color:#ffba3f;
}
*/


/**
* 3.0 - Sidhuvud
*
**/
/*      
ul.env-nav--menubar li:last-child {
   background-color: #420f5c;
   color: white;
   border-radius: 24px;
   padding: 0 10px;
   max-height: 38px
}
*/  
    
div nav ul.env-nav--menubar.env-nav--border li a[href="/kontakt.html"],
div nav ul.env-nav--menubar.env-nav--border li:last-child a{
	border-bottom: none;   
}
     
div nav ul.env-nav--menubar li a[href="/kontakt.html"],
div nav ul.env-nav--menubar li:last-child a {
	color: #fff !important;
  	border-bottom: none !important;
   padding 0;
   min-height: unset;
   background-color: #420f5c;
   border-radius: 25px;
   padding: 10px 20px;
   max-height: 38px
}
     
#Huvudmeny + div nav ul.env-nav--menubar li a[href="/kontakt.html"]:hover,
#Huvudmeny + div nav ul.env-nav--menubar li a[href="/kontakt.html"]:active,
#Huvudmeny + div nav ul.env-nav--menubar li a[href="/kontakt.html"]:focus,
div nav ul.env-nav--menubar.env-nav--border li:last-child a:hover {
   color: #fff;
   border-bottom: none;
   text-decoration: none
}

.header-button a{
   font-weight: 700;
}

/*
* 3.1 - Huvudmeny
*/

.gym-huvudmeny a{
   
   color: #000;
   text-align: center;
   font-family: Inter;
   font-size: 16px;
   font-style: normal;
   font-weight: 700;
   line-height: normal;
}

.gym-huvudmeny a:hover{
   
   text-decoration:underline;
   text-underline-offset: 12px;
   border-bottom-color: transparent !important;   
}

a.env-nav__link--active{
   
   text-decoration:underline;
   text-underline-offset: 16px;
   border-bottom-color: transparent !important;
}

/*
* 3.1.2 Meny - Header
*/
div.sv-row.sv-hide-sv-bp-mobil {
   display: flex;
   justify-content: space-between;
   width: -moz-available;
}


@media (max-width: 943px) {
/* THE BURGER ICON  */
   /* Position the burger icon  */
   div.sv-row.sv-hide-sv-bp-mobil div.sv-column-7 {
      position: relative !Important;
      top: -10px;
   }

	/* Set size of burger icon */
   .sv-hide-sv-bp-mobil .sv-hide-sv-bp-mobil .sv-marketplace-sitevision-mobile-menu.sv-hide-sv-bp-storre-desktop div nav button svg.env-icon.env-icon--medium {
      height: auto;
      width: 30px;
   }
}

.sv-marketplace-sitevision-mobile-menu nav dialog button.env-button--icon-small svg {
	 margin-top: -3px !important;
    margin-left: -11px !important;
}
.sv-custom-module .env-list__item > .env-link {
    border-bottom: 1px solid white;
}
.sv-custom-module .env-list .env-list__item .env-list__item .env-link{
   border-bottom: none;
}     

/*
* 3.2 - Länkstig fix
*/

[data-current="true"] {
  color:#FF231A;
}

.env-breadcrumb__item:nth-child(n+2)::before{
   content:"›" !important;
   font-family: Inter;
	font-size: 12px;
   font-weight: 500;
}

.env-breadcrumb__item{
   font-size: 12px;
   font-style: normal;
	font-weight: 500;
	line-height: 24px;
}
a.env-link-secondary {
   text-decoration: none !important;
}
     

@media (max-width: 943px),  {
   .sv-hide-sv-bp-mobil > div.sv-hide-sv-bp-mobil, 
   grid-944 .sv-row [class*="sv-column-"], 
   .sv-grid-944.sv-fluid-grid [class*="sv-row"] 
   .sv-hide-sv-bp-mobil[class*="sv-column-"] {
      
      width: 100% !Important;
   }
}
/**
* 4.0 - Huvudinnehåll
*
**/


/**
* 5.0 - Puffar
*
**/
@media (max-width: 500px) {
   .sv-template-program---sida .infotext-margin .sv-column-blurb #Spaltpuff1 + div {
      max-width: unset;
      background-size: contain !Important;
   }
}
     

/**
* 6.0 - Listningar av program
*
**/     
.item-card {
	width: 16.25em;
}


.white-text {
   color: white !important;  
}

.footer-link a{
   color: var(--env-link-hover-font-color) !important;
}

/**
* 6.0 - Knappar
*
**/

/**
* 7.0 - The switched modules (Våra program and Intresseanmälan) on the program page.
*
**/
@media (max-width: 943px) {
   #Intresseanmalan + div {
      padding: 0 15px;
   }
   
   .hideMe {
      display: none;
   }
   
   html.sv-template-program---sida .infotext-margin .switchedContent {
      margin-bottom: -100px;
   }
}

/*
*   7.1 - Program cards
*/     
.sv-template-program---kategori [id^="Listningav"] ~ div  {
	justify-content: left;
}
     
.sv-template-program---kategori #Mittenspalt ~ div > div > div > h3 {
	text-align: left;
	margin: 25px 0 15px;
	border-top: 1px solid #d8d8d8;
	padding-top: 15px;
}
     
.sv-template-program---kategori #Mittenspalt ~ div div#Hogskoleforberedandeprogram + div h3 {
	border-top: none;
   margin-top: -10px;
}     

/**
* 8.0 - The hit listing on the contact page
*
**/
.filteredEmployes {
   display: flex;
   flex-wrap: wrap;
}
     
#Sokresutat ~ .filteredEmployes a {
   width: 48%;
   margin-right: 20px;
   
}
     
#Sokresutat ~ .searchResult {
   display: flex;
  	flex-wrap: wrap;
}
     
#Sokresutat ~ .searchResult a {
   width: calc(50% - 10px);
   margin: 20px 20px 0 0;
   padding: 0;
}
     
#Sokresutat ~ .searchResult a:nth-child(even) {
	margin-right: 0;
}



.env-button {
   font-weight: 800;
   min-height: 2.375em;
}
     
     /**
* 8.0 - The contact cards on the contact page
*
**/
.contact-card {
    display: flex;
    align-items: start;
    background-color: #e5e9ef;
    border-radius: 5px;
    width: 350px;
    font-family: Arial, sans-serif;
    text-decoration: none;
    transition: all 0.3s;
}

.contact-card:hover {
    background-color: #e0e8f1; /* Ändra bakgrundsfärg vid hover */
   text-decoration: underline;
}

.profile-picture {
    width: 38%;
    height: 100%;
    background-color: #d3d3d3;
    border-radius: 5px 0 0 5px;
    margin-right: 20px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 200px;
    aspect-ratio: 1 / 1;
}
     
.contact-info {
	width: 62%; 
   padding-top: 4%;
   padding-right: 10px;
   padding-bottom: 20px;
}

.contact-info h2 {
    font-size: 1.2em;
    margin: 15px 0 0 0;
}

.contact-card .contact-info a, .contact-card .contact-info p {
    margin: 5px 0;
    color: #333;
   text-decoration: none;
}

.contact-info a:hover {
    text-decoration: underline;
}
     
@media (max-width: 900px) {
   #Sokresutat ~ .searchResult a.contact-card {
      width: 100%;
      margin-right: 0;
   }
}
     
@media (max-width: 500px) {
   #Sokresutat ~ .searchResult {
      margin-top: 10px;
   }
   
   #Sokresutat ~ .searchResult a.contact-card {
      flex-direction: column;
      margin: 0 0 20px;
   }
   
   .profile-picture {
      width: 100%;
      border-radius: 5px 5px 0 0;
   }

   .contact-info {
   	width: 100%;
		padding: 0 10px 10px;
	}
}        
     

.env-button {
   font-weight: 800;
   min-height: 2.375em;
   margin-bottom: 10px;
}
/**Accordion**/

.gym-accordion {
   position: relative;
   overflow: hidden;
   margin: 2rem 0;
}

.gym-accordion__parent .sv-decoration-content, .gym-accordion .sv-decoration-content {
   margin-bottom: 1rem;
	padding: 2rem 0 1rem 0;
   display: none;
   border: 0.5rem solid #003C60;
   border-top: none;
   background-color: white;
}

.gym-accordion-container {
   padding: 1.5rem 2.4rem 1.5rem 2.4rem;
}

.gym-accordion h2 {
   font-style: normal;
   font-size: 2rem;
   color: white;
   line-height: 2.4rem;
   margin: 0;
   padding-top: 0;
}

.gym-accordion h2 span {
   font-weight: bold;
}

.gym-accordion .gym-accordion__heading {
   font-style: normal;
   font-size: 2rem;
   color: white;
   line-height: 2.4rem;
   margin: 0;
   padding-top: 0;
   text-align: left;
}

.gym-accordion .gym-accordion-icon {
   height: 0;
}

@media (max-width: 769px) {
   .gym-accordion h2 {
		font-size: 1.7rem;
   }
}

.gym-accordion h3, .gym-accordion h2 {
	font-size: 1.8rem;
   font-weight: bold;
   letter-spacing: 0;
   line-height: 3rem;
   color: black;
   margin: 0 0 0.4rem 0!important;
   padding: 0 2.4rem 0rem 2.4rem;
}

@media (max-width: 769px) {
   .gym-accordion h3, .gym-accordion h2  {
		font-size: 2rem;
   }
}

.gym-accordion .sv-script-portlet {
   cursor: pointer;
   background: #003C60;
}

.gym-accordion__parent,.gym-accordion .sv-text-portlet-content {
   border-radius: 0.1rem;
}

.gym-accordion__parent p, .gym-accordion .sv-text-portlet-content p {
   padding: 0 2.4rem 1rem 2.4rem;
   margin: 0;
   margin-bottom: 0!important;
   margin-top: 0!important;
   color: black;
}

@media (max-width: 769px) {
   .gym-accordion__parent p, .gym-accordion .sv-text-portlet-content p {
		font-size: 1.5rem;
   }
}

.gym-accordion__parent ul, .gym-accordion__parent ol, .gym-accordion ul, .gym-accordion ol {
    color: black;
    padding-bottom: 1rem;
    margin-right: 1rem;
}

@media (max-width: 769px) {
   .gym-accordion__parent ul, .gym-accordion__parent ol, .gym-accordion ul, .gym-accordion ol {
		font-size: 1.5rem;
   }
}

.gym-accordion a,
.gym-accordion a:visited,
.gym-accordion a:link {
   color: #007cab;
   padding: 0;
   margin-bottom: 0;
   text-decoration: underline;
   border-bottom: none;
}

.gym-accordion a::after {
   content: ''!important;
   margin: 0!important;
   font-family: auto!important;
}

.gym-accordion a:focus{
	outline: 0.3rem solid black;
}


.gym-accordion .sv-script-portlet a,
.gym-accordion .sv-script-portlet a:visited,
.gym-accordion .sv-script-portlet a:link {
   margin-top: 0;
   font-weight: 600;
   display: block;
   text-decoration: none;
}

.gym-accordion .accordion {
   background: none;
   border: none;
   outline: none;
   margin: 0;
   padding: 0;
   cursor: pointer;
   display: flex;
   justify-content: space-between;
   width: 100%;
}


.gym-accordion button.tab-focus:focus {
    outline: 1.2rem auto white;
}
 

.gym-accordion .accordion.tab-focus:focus {
    outline: 1.2rem auto white;
}


.gym-accordion-icon:after {
   font-family: "icomoon";
   content: "\e900";
   color: white;
   font-size: 3rem;
}

@media (max-width: 769px) {
.gym-accordion-icon:after {
		font-size: 2.6rem;
   }
}


.gym-accordion__parent--open .gym-accordion-icon:after {
   content: "\e903";
   color: white;
}



@media (max-width: 769px) {
   .gym-accordion .sv-file-portlet tr {
      display: block;
      margin-bottom: 1.5rem;
   }
   
   .gym-accordion .sv-file-portlet .sv-file-portlet-right {
      font-size: 1.4rem;
    	font-weight: 600;
   }

   .gym-accordion .sv-file-portlet td, .gym-accordion .sv-file-portlet a {
      font-size: 1.5rem;
      line-height: 1.5rem;
      display: flex;
   }
}

.gym-accordion .sv-decoration-content > .sv-file-portlet {
   padding: 0 2.4rem;
   margin-bottom: 2rem;
}

/*
 * 3.372 Accordion gul
 */

 .gym-accordion-yellow .sv-script-portlet {
   background: #ffba3e;
}

.gym-accordion-yellow .sv-decoration-content{
   border-color: #f8f6d5;
}

.gym-accordion-yellow .gym-accordion__heading{
   color: black;
}

.gym-accordion-yellow .gym-accordion-icon:after {
   color: black;
} 

.gym-accordion-yellow .gym-accordion-icon:after {
   color: black !important;
}

/*
 * FAQ
 */

.env-collapse {
   padding-right: 3em;
   padding-left: 3em;
   padding-top: 2em;
   padding-bottom: 1em;
}

@media (max-width: 769px) {
   .env-collapse {
      padding-right: 1em;
      padding-left: 1em;
      padding-top: 1em;
      padding-bottom: 0em;
   }
}


.env-collapse-header {
   font-weight: bold;
}

.env-collapse-header {
   padding-left: 3em;}

@media (max-width: 769px) {
   .env-collapse-header {
      padding-left: 1em;
   }
}

/*
 * mobilversion kantlinje kontaktsida
 */

@media (max-width: 943px) {
   .c102 {
      border-right-style: hidden;
   }
}

/*
 * Kontakt bottom padding
 */

@media (max-width: 769px) {
   .c103 {
      padding-bottom: 0em;
   }
}

/*
 * Nyhet bild
 */

p.sv-portlet-image-caption {
   margin-left: 98px;
   font-weight: 700;
   margin-top: 6px;
   margin-bottom: 1em;
}

.news-image .sv-image-portlet {
      margin: 0 -98px;
   }

@media (min-width: 944) {
   
}

/*
 * programlista
 */

.c72 {
   list-style-type: disc;
   margin-left: 23px;
}

.meny-link-color a {
   color: #2276F1;
}

/*
 * Hero-banner
 */

@media (min-width: 944px) {
   .hero-banner {
      padding-top: 3.8em;
      padding-bottom: 3.8em;
   }
}

@media (max-width: 943px) {
   .hero-banner {
      padding-bottom: 0em;
      padding-top: 0em;
   }
}

@media (max-width: 943px) {
   .hero-banner-image {
      margin: 0 -1.25em;
   }
}

@media (max-width: 943px) {
    .hero-banner-program {
        padding-top: 1em;
        padding-bottom: 0em;
    }
}

/*
 * margin-heading
 */

.h1-margin h1{
   margin-top: 0em !important;
}

/*
 * Top padding infotext
 */

@media (max-width: 943px) {
   .infotext-margin {
      padding-top: 1em;
   }
}

/*
 * Kontaktsida padding
 */

@media (max-width: 943px) {
   .karta-padding {
      padding-bottom: 1.5em;
   }
}

@media (max-width: 943px) {
   .c178 {
      padding-left: 0em;
   }
}

@media (max-width: 943px) {
   .c103 {
      padding-top: 1.5em;
   }
}

/*
 * Aktuellt sida
 */

@media (max-width: 943px) {
   .c132 {
      padding-top: 0.5em;
   }
}

/*
 * Mobilmeny header
*/
@media (max-width: 943px) {                    
    /* Adjust the page header so the logo and burger is on the same line. */
   .sv-visible-sv-bp-mobil.mobile-header > div.sv-layout.sv-skip-spacer.sv-column-12.sv-template-layout {
      display: flex;      
      justify-content: space-between;
      padding-top: 15px;
   }
   
   /* Push the mobile menu down, and remove its default padding.  */
   .sv-marketplace-sitevision-mobile-menu div nav dialog {
      /* margin-top: 70px; */
      padding: 7px 20px;
      text-align: left;
   }
   
   .sv-visible-sv-bp-mobil .sv-marketplace-sitevision-mobile-menu div nav dialog > ul {
      margin-top: 40px;
   }

   /* Hide the close icon 
   .sv-visible-sv-bp-mobil .sv-marketplace-sitevision-mobile-menu nav dialog button.env-button--icon-small {   
      display: none !Important;
   }   
   */

   /* Increase size of, and move, the SVG images (the arrows) */
   .sv-visible-sv-bp-mobil .sv-marketplace-sitevision-mobile-menu button.env-button--icon svg.env-icon--medium {
      width: 34px;
      height: auto;
      top: 12px;
   }
   
   /* Make the closing X smaller.    */
   .sv-visible-sv-bp-mobil .sv-marketplace-sitevision-mobile-menu button.env-button--icon-small svg.env-icon--medium {
      width: 24px;
   }
   
   /* Move the closing X to the left.  */
   .sv-visible-sv-bp-mobil .sv-marketplace-sitevision-mobile-menu div nav dialog > button {
      right: 20px;
   }

   /* Remove the links default padding.  */
   .sv-visible-sv-bp-mobil .sv-marketplace-sitevision-mobile-menu div ul li a {
      padding: 0;
   }

   /* Add border-bottom only to the li on the upper level  */
   .sv-visible-sv-bp-mobil .sv-marketplace-sitevision-mobile-menu div nav dialog > ul > li {
      border-bottom: 2px solid #fff;
   }
   
   /* CSS for the injected HTML (contact button and external links) */
   /* The contact button */
	.sv-visible-sv-bp-mobil.mobile-header .sv-marketplace-sitevision-mobile-menu div nav dialog a.btn-contact {
      background-color: #284672;      
      font-size: 16px;
      font-weight: 700;
      color: white;
      text-decoration: none;
      text-align: center;
      padding: 10px 20px;
      border-radius: 20px;      
      display: inline-block;
      margin-top: 25px;
      margin-bottom: 50px;
   }
   
   .external-links h3 {
   	margin-bottom: 8px;
   }
   
   .external-links ul {
      margin-top: 0;
      list-style-type: none;
      padding: 0;
   }
   
   .external-links li {
      margin: 5px 0;
   }
   
   .external-links a {
      text-decoration: none;
      color: #2276F1;
   }
   
   .external-links a:hover {
      text-decoration: underline;
   }
}

dialog li.env-list__item{
   font-weight: 700;      
}

li.env-list__item li.env-list__item a.env-link{
color: #284672;
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 24px; /* 150% */
text-align: left;   
}

/* Nyheter kort
*
*/

div.env-p-around--xx-small.env-h--100.env-d--flex.env-flex--column {
  background-color: #F7F1EE;
  padding-top: 0em !important;
  padding-bottom: 1.6875em !important;
  padding-left: 1.4375em !important;
  padding-right: 1.4375em !important;
  text-align: left !important;

}

li.env-list__item.sv-newslist__gallery-item small{
    position: absolute;
    top: 0;
    left: 0;
    background-color: #FF231A;
   text-transform: uppercase;
   width: 58px;
   height: 69px;
   text-align: center;
   align-content: center;
}

.sv-newslist-no-image{
   background-image: url('https://placehold.co/600x400?text=Bild%20saknas')
}

/* Cookie banner
*
*/
.env-modal-dialog__footer button{
   font-weight: 500 !important;
}

/* toppbild
*
*/

.landing-page--top-image img {
      object-fit: cover;
      max-width: none !important;
      height: 393px !important;
      object-position: center;
   }
}

.landing-page--top {
   position: relative;
   overflow: hidden;
}
   


@media (max-width: 600px) {   
   div.cta-container {
   	height: 28em;
   }
}

/*
* formulär
*/
   
.sv-defaultFormTheme input[type=button], .sv-defaultFormTheme input[type=reset], .sv-defaultFormTheme input[type=submit] {
   background-color: #2a4670;
   border: 0px;
   border-radius: 30px;
   color: white;
   padding: 8px 30px;
}
   
.sv-defaultFormTheme input[type=email], .sv-defaultFormTheme input[type=number], .sv-defaultFormTheme input[type=tel], .sv-defaultFormTheme input[type=text], .sv-defaultFormTheme input[type=url], .sv-defaultFormTheme select, .sv-defaultFormTheme textarea {
   border: 0px;
   height: 3em;
   border-radius: 7px;
}
   
@media (max-width: 600px) {
    #Intresseanmalan + div {
       background-image: none;
    }
}