@import './MainStyle.css';

.InfoDiv{
    text-align: left;
    font-family: 'Calibri','Candara','Segoe','Segoe UI','Optima',Arial,sans-serif;
    display: block;
    width: 50%;
}

.InfoDiv p,a,li{
    font-size: 19px;
}

.InfoDiv img{
    float: right; 
    margin: 10px;  
    max-width: 100%; 
    height: auto;
    
}

.InfoDiv h1,h2,h3,h4{
    color: var(--main-title-color);
}

.InfoDiv p.imgText{
    margin: 0;
    margin-bottom: 15px;
    font-size: 13px;
}

.InfoDiv.boka{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

main.behandling{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

main.behandling img{
    width: 400px;
    max-width: 100%;
}

.comments{
    list-style-type: none;
    padding: 0 5px;
}

.comments li{
    color: #333333; 
    font-style: italic; 
    text-align: left;
    padding: 0;
}

.utbildiningcomments{
    text-align: left; 
    list-style-type: '-';
}

.utbildiningcomments li::marker{
    margin-right: 20px;
}

.InfoDiv.lankar h3{
    margin-bottom: 5px;
}

/*#region*/ /*Buttons*/
.mainBtn{
    color: var(--main-button-text-color);
    padding: 10px;
    text-decoration: none;
    transition: 0.2s;
    max-width: 420px;
    display: block;
    background-color: var(--secondary-accent-color); 
    text-align: center;
}

.mainBtn:hover{
    background-color: var(--third-accent-color); 
}




.button_brown{
    color: var(--main-button-text-color);
    border: 1px solid #6f5d44;
    padding: 10px;
    text-decoration: none;
    transition: 0.2s;
    max-width: 420px;
    display: block;
    background-color: #5f503a; 
}
.button_brown:hover{
    background-color: #7e6b4e;
}

.button_brown_light{
    color: var(--main-button-text-color);
    border: 1px solid #6f5d44;
    padding: 10px;
    text-decoration: none;
    transition: 0.2s;
    max-width: 420px;
    display: block;
    background-color: #6f5e44; 
}
.button_brown_light:hover{
    background-color: #8e7857; 
}

.button_brown_dark{
    color: var(--main-button-text-color);
    border: 1px solid #6f5d44;
    padding: 10px;
    text-decoration: none;
    transition: 0.2s;
    max-width: 420px;
    display: block;
    background-color: #4f4330; 
}
.button_brown_dark:hover{
    background-color: #6f5e44; 
}

/* Basic Green Button */
.button_green{
    color: var(--secondary-button-text-color);
    background-color: var(--main-accent-color);
    border: 1px solid var(--secondary-accent-color);
    padding: 10px;
    text-decoration: none;
    transition: 0.2s;
    max-width: 420px;
    display: block;
    
}

.button_green:hover{
    background-color: var(--secondary-accent-color);
}

/* List with buttons */
.MultipleButtons ul{
    padding-left: 0;
}

.MultipleButtons ul li{
    margin-top: 25px;
    list-style-type: none;
}

/*#endregion*/

 /* Style for contact forms */
input[type=text], select, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
  }

/* Login with code */
.content-locked
{
    display: none;
    margin-bottom: 15px;
}

.content-locked.unlocked
{
    display: block;
}

/* Övningsbanken */
.LeftDiv
{
    display: block;
    float: left;
    width: 49%;
}

.RightDiv
{
    float: right;
    width: 49%;
}

.DubbleDiv{
    display: grid;
    grid-template-columns: 50% 50%;
    grid-gap: 10px;
    width: 100%;
}

.Ovningsbanken-box-Space{
    margin-bottom: 10px;
    padding: 10px 0 10px 0;
    width: 100%;
    display: inline-block;
}

.Ovningsbanken-box a{
    padding: 20px 0 20px 0;
    text-decoration: none;
    color: var(--secondary-button-text-color);
    
    width: 100%;
    display: inline-block;
    position: relative;
}

.Ovningsbanken-box{
    border: 2px solid var(--main-text-color);
    padding: 0 5px 0 5px;
}

.Ovningsbanken-box:hover{
    background-color: #e6e6e6;
    cursor: pointer;
}

/* Övningsbanken login */
.content-login{
    text-align: center;
    display: none;
    font-size: 20px;
}

.content-login.active{
    display: block;
}

.CodeButton{
    color: var(--secondary-button-text-color);
    background-color: #008ae6;
    border: 1px solid #005c99;
    padding: 10px;
    text-decoration: none;
    transition: 0.2s;
}

.CodeButton:hover{
    background-color: #33adff;
}

.WrongCodeText{
    color: red; 
    display: none;
}

.WrongCodeText.active{
    display: block;
}

.Map{
    width: 65%;
    height: 450px;
    border:0;
}

.Forelasning-Div{
    width: 200%;;
}

/* Phone customization */
@media screen and (max-width: 1250px)
{
    main.behandling{
        flex-direction: column-reverse;
    }

    main.behandling img{
        align-self: center;
    }

    .InfoDiv{
        width: 100%;
    }
    .Forelasning-Div{
        width: 100%;;
    }
}

@media screen and (max-width: 1210px)
{
    .Map{
        width: 100%;
        height: 250px;
    }

    .DubbleDiv{
        grid-template-columns: 100%;
        grid-gap: 0;
    }
    .Ovningsbanken-box-Space{
        margin-bottom: 10px;
        padding: 10px 0 10px 0;
        width: 100%;
        display: inline-block;
    }
}



@media screen and (max-width: 900px)
{
    .RightDiv{
        width: 100%;
    }

    .LeftDiv{
        width: 100%;
    }

    .InfoDiv p,a,li{
        font-size: 17px;
    }
}

@media screen and (max-width: 900px)
{
    .InfoDiv.lankar a{
        display: block;
        font-size: 14px;
    }
}