/* If screen size is less than 768 px */

@media only screen and (max-width : 768px) {
    p.indexOptions {
        margin:auto;
    }

    p.indexHeader {
        font-weight:normal;
        text-align:center;
    }

    .navbar-brand img {
        height: 150px;
	margin-left: -50px;
        margin-top: -40px;
    }
}

/* If screen size is more than 768 px */
@media only screen and (min-width : 768px) {
    .navbar-brand,
    .navbar-nav li a {
        height: 80px;
        padding-top: 30px !important;
    }

    .navbar-brand img {
        height: 200px;
	margin-left: -70px;
        margin-top: -90px;
    }

    .dropdown-menu li a {
        height: 50px;
        padding-top: 14px !important;
        text-align:left;
    }

    .divider {
        display:block !important;
    }

    .infoBlurb {
        width:69%;
        margin:auto;
        margin-bottom:3% !important;
    }

    div.resetPwWell, div.indexWell {
        width:50%;
    }

    .flash-alert {
        width: 50% !important;
    }

    .infoBlurb {
        width:80%;
    }

    input.addGroupInput,
    input.addSecretQuestion {
        width: 50% !important;
    }

    .width-fifty {
        width:50%;
    }

    .width-forty {
        width:40%;
    }
    
}

/* If screen size is more than 1200 px */
@media only screen and (min-width : 1200px) {
    .panel-body table {
        margin-left:1.75em;
        max-width: 90%;
    }

    .systemSettingsSubheader, .emailtest-alert, .verifyQuestionsSubheader {
        margin-left:1.75em;
    }
}

.bold {
    font-weight:bold;
}

.block {
    display:block;
}

p.indexOptions {
    text-align:center;
    width:200px;
}

p.indexOptions a.btn-primary {
    width:172px;
    margin-bottom:10px;
}

p.indexOptions a.disabled {
    pointer-events: auto;
}

.dropdown-menu li:hover a {
    color:#FFF !important;
    background-color: #3A536B !important;*/
}

/* Hide the divider in the mobile menu */
.divider {
    display:none;
}

a:focus, button:focus {
    outline:0 !important;
}

ul.nav.navbar-nav > li > a {
    transition: background-color .25s ease;
        -webkit-transition: background-color .25s ease;
            -moz-transition: background-color .25s ease;
                -o-transition: background-color .25s ease;
}

ul.nav.navbar-nav li ul {
    transition: all .25s ease;
}

ul.nav.navbar-nav li a:hover {
    background-color: #3A536B;
}

ul.navbar-nav li.dropdown.open a.dropdown-toggle {
    background-color: #3A536B !important;
}

.topHeader {
    text-align:center;
    padding-bottom:1em;
}

.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus, .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus {
    color:#ffffff;
}

.navbar-nav .dropdown-menu>li>a {
    padding-right:25px;
}

.form-control {
    max-width:850px;
}

.flash-alert {
    width: 90%;
    text-align: center;
    margin: auto;
}

.emailtest-alert {
    max-width: 300px;
    margin-top: 2em;
    margin-right: 2em;
    text-align: center;
}

.tool-tip, .tool-tip:hover, .tool-tip:visited {
    color:#2c3e50;

    text-decoration: none !important;
    font-weight:bold;
}

.tool-tip:hover {
    text-decoration: underline;
}

.settings-tooltip, .settings-tooltip:hover, .settings-tooltip:visited {
    color:#2c3e50;
    text-decoration: none;
}

.settings-tooltip:hover {
    text-decoration: underline;
}

.infoBlurb {
    margin:auto;
    margin-bottom:5%;
}

div.resetPwWell, div.indexWell {
    margin:auto;
    margin-bottom:3em;
}

input.btn-link, input.btn-link:focus {
    outline:0 !important;
    color: #2c3e50;
    font-weight:bold;
    padding: 0;
}

input.btn-link:hover {
    color: #2c3e50;
}

form.btn-link-form {
    margin-bottom: 0;
}

input.addGroupInput,
input.addSecretQuestion {
    height: 35px;
    width: 80%;
}

input.addGroupBtn,
input.addSecretQuestionBtn {
    padding-top: 5px;
}

.systemSettingsSubheader,
.verifyQuestionsSubheader {
    font-weight:bold;
    font-size:110%;
    margin-bottom:1em;
}

.secretQuestionSelect {
    margin:auto;
    text-align:center;
    max-width:300px;
}

.center {
    vertical-align:middle !important;
    text-align:center;
}

.resetQuestionsBtn {
    margin-left: 3em;
    margin-bottom: 2em;
}

//WDC: Lisätty spinneri
.loader {
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


//ID-NORTH: Kielisyyden alasvetovalikko
:root {
  --gray: #34495e;
  --darkgray: #2c3e50;
}
select {
  /* Reset Select */
  appearance: none;
  outline: 10px red;
  border: 0;
  box-shadow: none;
  /* Personalize */
  flex: 1;
  padding: 0 1em;
  color: #fff;
  background-color: var(--darkgray);
  background-image: none;
  cursor: pointer;
}
/* Remove IE arrow */
select::-ms-expand {
  display: none;
}
/* Custom Select wrapper */
.select {
  position: relative;
  display: flex;
  width: 20em;
  height: 3em;
  border-radius: .25em;
  overflow: hidden;
}
/* Arrow */
.select::after {
  content: '\25BC';
  position: absolute;
  top: 0;
  right: 0;
  padding: 1em;
  background-color: #34495e;
  transition: .25s all ease;
  pointer-events: none;
}
/* Transition */
.select:hover::after {
  color: #f39c12;
}

/* Other styles*/
a {
  font-weight: bold;
  color: var(--gray);
  text-decoration: drop-shadow;
  padding: .25em;
  border-radius: .50em;
}
.down_note {
    display: flex;
    justify-content: center;
}