/* Globals */
.hidden {
    display: none !important;
}

.skolstil-center {
    text-align: center;
    display: block;
}

img {
    max-width: 100%;
}

.button-wrapper-space-between {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}
.button-wrapper-prefix {
    display: flex;
    flex-direction: row;
    /*justify-content: space-between; */
    flex-wrap: wrap;
}

.skolstil-grey-button {
    background: #ccc;
    border: 1px solid #ccc;
    display: inline-block;
}
.error {
    color: red;
}
.green {
    color: green;
}
#abort-new-username {
    display: block;
    cursor: pointer;
    color: #0d6efd;
    font-size: 14px;
    margin-top: 10px;
}
#abort-new-username:hover {
    transition: 0.2s ease-in-out;
    opacity: 0.7;
}

.username-wrapper {
    margin-bottom: 15px;
}
/* Sections */
.section-regular {
    padding-top: 90px;
    padding-bottom: 90px;
}

.section-last {
    padding-top: 90px;
    padding-bottom: 0px;
}

.skolstil-flex {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
.skolfederation-connection {
    border: 2px solid #ff7900;
    border-radius: 6px;
padding: 15px;
}
.skolfederation-connection img{
height: 20px;
width: auto;
display: inline-block;
}
.social-secutiry-type {
margin-top: 15px;
}
.social-secutiry-type b{
display: block;
margin-bottom: 10px;
}
#skolstil-error {
font-weight: bold;
color: red;

}
.social-secutiry-type input{
width: auto!important;
display: inline-block;
}
.social-secutiry-type label{
width: auto!important;
display: inline-block!important;
}
/* buttons */
.skolstil-button {
    outline: none;
    padding: 8px 20px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    margin: 0;
    font-size: 14px !important;
}

.skolstil-green-button {
    background: #017e06;
    color: #fff !important;
}

.skolstil-green-button:hover {
    background: #006604;
    transition: 0.2s ease-in-out;
}

.skolstil-yellow-button {
    background: #ffe037;
    color: #000 !important;
}

.skolstil-yellow-button:hover {
    background: #dab900;
    transition: 0.2s ease-in-out;
}


.skolstil-blue-button {
    background: #5081c3;
    color: #fff !important;
}

.skolstil-blue-button:hover {
    background: #3b67a3;
    transition: 0.2s ease-in-out;
}

.skolstil-red-button {
    background: #cd0000;
    color: #fff !important;
}

.skolstil-red-button:hover {
    background: #970000;
    transition: 0.2s ease-in-out;
}

/* theme overrides */
.skolstil-theme {
min-height: 100vh;
}
.skolstil-theme p {
    font-size: 16px;
    font-family: 'Lato', sans-serif;
}

.skolstil-theme h1 {
    font-family: "Skolstil", 'Lato', sans-serif;
}

.skolstil-theme h2 {
    font-family: "Skolstil", 'Lato', sans-serif;
}

.skolstil-theme h3 {
    font-family: "Skolstil", 'Lato', sans-serif;
}

.skolstil-theme a {
    font-family: 'Lato', sans-serif;
}

.skolstil-theme button {
    font-family: 'Lato', sans-serif;
}

.section-regular p {
    font-size: 18px;
}

/* Messages */
.skolstil-error {
    color: red;
}

.skolstil-success {
    color: #017e06;
    font-family: "Skolstil";
    display: block;
    text-align: center;
}

/* headers */
.skolstil-green {
    background: #017e06;
    color: #fff;
}

.skolstil-dark-green {
    background: #006a04;
    color: #fff;
}

/* menu */
.skolstil-menu {
    position: sticky;
    width: 100%;
    top: 0;
    z-index: 99;
    box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.1);
}

.admin-logged-in .skolstil-menu {
    top: 32px;
}

.menu-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.scroll-top {
    animation: scrollTop 1s;
    margin-top: 0px;
}

@keyframes scrollTop {
    0% {
        margin-top: -87px;
    }

    100% {
        margin-top: 0px;
    }
}

.scroll-down {
    animation: scrollDown 1s;
    margin-top: -87px;
}

@keyframes scrollDown {
    0% {
        margin-top: 0;
    }

    100% {
        margin-top: -87px;
    }
}

.menu-wrapper img {
    max-height: 160px;
    width: auto;
    position: absolute;
}

.menu-wrapper .menu {
    /*width: 50% ; */
    width: 100%;
}

.menu-wrapper ul {
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0;
    font-family: "Skolstil";
}

.skolstil-not-signed-in ul {

    justify-content: center;

}

.menu-wrapper .menu a {
    color: #fff !important;
    text-decoration: none;
    font-size: 22px;
    font-family: "Skolstil";
    padding-top: 20px;
    padding-bottom: 20px;
    padding-right: 15px;
    padding-left: 15px;
    display: block;
}

.skolstil-not-signed-in .menu a {
    color: #fff !important;
    text-decoration: none;
    font-size: 30px;
    font-family: "Skolstil";
    padding-top: 12px;
    padding-bottom: 12px;
    padding-right: 15px;
    padding-left: 15px;
    display: block;
}

.as-link {
    color: #fff !important;
    text-decoration: none;
    font-family: "Skolstil";
    padding-top: 20px;
    padding-bottom: 12px;
    padding-right: 15px;
    padding-left: 15px;
    display: block;
}

.menu-wrapper .menu .skolstil-button {
font-size: 17px!important;
color: #000!important;
padding: 10px 15px!important;
margin-top: 10px;
border-radius: 6px;
}
.menu-wrapper li {
    color: #fff;
    text-decoration: none;
    font-size: 22px;
    font-family: "Skolstil";
}
/*
.menu-wrapper li:hover {
    transition: 0.2s ease-in-out;
    background: #006a04;
    color: #fff;
}
*/
.hamburger {
    display: none;
}

.skolstil-header {
    padding-top: 60px;
    padding-bottom: 60px;
    height: auto;
    text-align: center;
    position: relative;
    z-index: 1;
}

.skolstil-header h1 {
    font-size: 75px;
    font-family: "Skolstil";
}

.skolstil-header h2 {
    font-family: "Skolstil";
}

.skolstil-startpage {
    padding-top: 180px;
    padding-bottom: 180px;
    height: auto;
    text-align: center;
    position: relative;
    z-index: 1;
    background-size: cover;
    background-position: center;
}

.skolstil-startpage h1 {
    font-size: 50px;
    max-width: 800px;
}

.activate-account {
    padding-top: 60px;
}

.activate-account h2 {
    font-family: "Skolstil";
}

.activate-account form {
    background: #f7f7f7;
    border: 1px solid #ccc;
    padding: 30px;
}

.activate-account label {
    display: block;
    width: 100%;
    margin-top: 15px;
    position: relative;
}

.activate-account input {
    display: block;
    width: 100%;
    padding: 5px;
    border: 1px solid #ccc;
}

.activate-account abbr {
    color: red;
}

/* password in form */
.password-wrapper {
    position: relative;
}

.show-password {
    position: absolute;
    right: 0px;
top: 24px;
    background: #5081c3;
    width: 35px;
    height: 35px;
    text-align: center;
    cursor: pointer;
}

.show-password:hover {
    background: #3b67a3;
    transition: 0.2s ease-in-out;
}

.show-password i {
    color: #fff;
    line-height: 32px;
}

/* Logga in */
.sign-in-form h3 {
    font-size: 20px;
    font-family: "Skolstil";
}
.sign-in-text {
font-size: 17px!important;
}
.forgot-password {
text-align: right;
width: 100%;
font-style: italic;
font-size: 14px!important;
display: block;
margin-top: 5px;
}
.other-signin-options img {
    max-width: fit-content;
height: 25px;
width: auto;

}
.other-signin-options {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
    text-align: center;
margin-bottom: 60px;

}
.skolfed {
border: 2px solid #ff7900;
border-radius: 6px;
}
.skolfed:hover {
background: #ffe4cc;
transition: 0.2s ease-in-out;
}
.skolon {
border: 2px solid #39b0bb;
border-radius: 6px;
}
.skolon:hover {
background: #ebf7f8;
transition: 0.2s ease-in-out;
}


.other-signin-options a{
max-width: 45%;
width: 100%;
padding: 10px 15px;

}


/* mitt konto */
.my-account {
padding-top: 15px;
padding-bottom: 90px;
}
.stats {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 900px;
    width: 100%;
    margin: 30px auto 0 auto;
    font-size: 18px;
}

.go-to-app {
    text-align: center;
    margin-top: 30px;
    max-width: 500px;
    width: 100%;
    margin: 30px auto 0 auto;
}
.change-class {
display: inline-block!important;
width: auto!important;
margin-left: 5px;
}
#change-class2 {
width: 100%;
}
#create-licenses {
    background: #f7f7f7;
    border: 1px solid #ccc;
    padding: 30px;
}
#import-students {
    background: #f7f7f7;
    border: 1px solid #ccc;
    padding: 30px;
}
#student-list-output {
    background: #f7f7f7;
    border: 1px solid #ccc;
    padding: 30px;
}
#create-licenses label{
display: block;
margin-top: 15px;
position: relative;
}
#create-licenses input{
width: 100%;
        padding: 5px;
        border: 1px solid #ccc;
}
#create-licenses .checkbox-wrapper input[type="radio"] {
    width: auto;
    width: 18px;
    height: 18px;
    margin-right: 5px;
    display: inline-block;
}

#create-licenses .checkbox-wrapper input[type="number"] {
    width: auto;
    margin-right: 5px;
    display: inline-block;
}
#show-license_slots {
text-align: center;
margin-left:5px;
}
#create-licenses .checkbox-wrapper label {
    width: auto;
    display: inline-block;
}

#administrate-license {
    background: #f7f7f7;
    border: 1px solid #ccc;
    padding: 30px;
}
#administrate-license label{
display: block;
margin-top: 15px;
position: relative;
}
#administrate-license input{
width: 100%;
        padding: 5px;
        border: 1px solid #ccc;
}

#update-password-container {
    background: #f7f7f7;
    border: 1px solid #ccc;
    padding: 30px;
}
#update-password-container label{
display: block;
margin-top: 15px;
position: relative;
}
#update-password-container input{
width: 100%;
        padding: 5px;
        border: 1px solid #ccc;
}

#connect-skolfed-output {
    background: #f7f7f7;
    border: 1px solid #ccc;
    padding: 30px;
}

#connect-skolfed-output img{
height: 40px;
width: auto;
margin-bottom: 30px;
}
#connect-skolfed-output #social-type-output {

margin-top: 30px;

}
#connect-skolfed-output #social-type-output input{
display: block;
}
.select-class {
display: inline-block;
margin-bottom:0;
}
.more-student-wrapper-global {
    background: #fff;
    border: 1px solid #ccc;
    padding: 30px;
    margin-bottom: 15px;
}

.create-license-section {
    margin-top: 0px !important;
    margin-bottom: 90px !important;
}

.more-student-wrapper-global label {
    margin-top: 0px;
}

#global-password {
    margin-bottom: 30px;
}

.more-student-wrapper {
    position: relative;
}

.student-username-wrapper {
    position: relative;
}

.username {
    outline: none;
}

.student-prefix {
    position: absolute;
    top: 23px;
    padding: 7px 10px 2px 10px;
    left: 1px;
    border-right: 1px solid #ccc;
    width: auto;
    background: #f7f7f7;
}

.skolstil-delete {
    position: absolute;
    right: 15px;
    cursor: pointer;
}

.skolstil-delete:hover {
    color: red;
    transition: 0.2s ease-in-out;
}

.button-wrapper {
    margin-top: 30px;
    width: 100%;
    text-align: right;
    display: block;
}

.cereation-method {
    z-index: 2;
    position: relative;
}

.cereation-method p {
    display: inline-block;
    padding: 10px 20px;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    margin-bottom: -1px;
    cursor: pointer;
}

.cereation-method p:hover {
    transition: 0.2s ease-in-out;
    background: #017e06;
    color: #fff;
}

.cereation-method .active {
    background: #f7f7f7 !important;
    color: #000 !important;
}

.show-explenation {
background: #5081c3;
border: 1px solid #ccc;
padding: 15px;
position: absolute;
z-index: 2;
color: #fff;
}
.show-explenation .fa-times-circle {
float: right;
cursor: pointer;
opacity: 0.6;
}
.show-explenation .fa-times-circle:hover {
transition: 0.2s ease-in-out;
opacity: 1;
}
.show-explenation p{
max-width: 95%;
margin-bottom: 0!important;
}
#import-students ol {
    margin-top: 15px;
}

#import-students ol li {
    padding-bottom: 10px;
}

/* Tables */
.skolstil-table {
    border-collapse: collapse;
    width: 100%;
    background: #fff;
}

.skolstil-table td, .skolstil-table th {
    border: 1px solid #ddd;
    padding: 8px;
}

.skolstil-table tr:nth-child(even) {
    background-color: #f6f6f6;
}

.skolstil-table tr:hover {
    background-color: #eeecec;
}

.skolstil-table th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #017e06;
    color: white;
}

/* popup */
.skolstil-popup-wrapper {
    position: fixed;
    top: 0;
    width: 100%;
    left: 0;
    min-height: 100vh;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 200;
}

.skolstil-popup {
    padding: 30px;
    background: #fff;
    border: 1px solid #ccc;
    max-width: 600px;
    width: 100%;
    position: relative;
    margin: 10vh auto;
overflow-y: auto;
max-height: 85vh;
}

.skolstil-popup h2 {
    text-align: center;
    font-family: "Skolstil";
}

.close-wrapper {
    text-align: right;
}

.update-student-wrapper {
    background: #fff;
    border: 1px solid #ccc;
    padding: 30px;
}

.update-student-wrapper label {
    display: block;
}

.update-student-wrapper input {
    padding: 5px;
    border: 1px solid #ccc;
    outline: none;
    margin-bottom: 15px;
    width: 100%;
}

.update-student-wrapper abbr {
    color: red;
}

.skolstil-last-logged-in {
    margin-bottom: 15px;
}

.explenation {
cursor: pointer;
position: absolute;
top: 0;
right: 0;
    color: #5081c3;
}

/* Startpage */
/* startpage anchor links */
#om-skolstil {
    position: absolute;
    margin-top: -100px;
}

.startpage-img-block img {
    padding-left: 30px;
}

.startpage-img-block-right img {
    padding-right: 30px;
}

.white-box-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.skolstil-buy-license {
    background: #f7f7f7;
}

.skolstil-buy-license-inner-container {
    padding: 60px !important;
    background: #fff;
    max-width: 40% !important;
}

.skolstil-buy-license-inner-container .skolstil-button {
    font-size: 18px !important;
    margin-top: 15px !important;
    display: inline-block;
}

/* gallery */
.gallery-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.gallery-image {
    max-width: 28%;
    width: 100%;
    margin-bottom: 15px;
}


/* Loading spinner */
.loading-screen {
z-index: 9999;
top: 0;
left: 0;
position: fixed;
min-height: 100vh;
width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}
#html-spinner{
  width:60px;
  height:60px;
  border:10px solid #8ebe90;
  border-top:10px solid #fff;
  border-radius:50%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#html-spinner{
  -webkit-transition-property: -webkit-transform;
  -webkit-transition-duration: 1.2s;
  -webkit-animation-name: rotate;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;

  -moz-transition-property: -moz-transform;
  -moz-animation-name: rotate;
  -moz-animation-duration: 1.2s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;

  transition-property: transform;
  animation-name: rotate;
  animation-duration: 1.2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@-webkit-keyframes rotate {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}

@-moz-keyframes rotate {
    from {-moz-transform: rotate(0deg);}
    to {-moz-transform: rotate(360deg);}
}

@keyframes rotate {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

/* media queries */
@media only screen and (max-width: 500px) {
.other-signin-options {
flex-direction: column;

}
.other-signin-options a{
width: 100%;
    max-width: 100%;
margin-bottom: 15px;
}

}