﻿body {
    padding-top: 62px;
    padding-bottom: 20px;
    background-color: white;
}

@media only screen and (max-width: 415px) {
    .item-img {
        height: 22px;
    }

    .body-content {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    .button-bar {
        margin-left: 0 !important;
    }

    .row {
         margin-right: 0px; 
         margin-left: 0px; 
    }

    .vertAlignRes {
        vertical-align: middle !important;
    }
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

.padtop {
    padding-top: 10px;
}
.pad5 {
    padding: 5px;
}

.hidden {
    display: none !important;
}

/* *** NAVIGATION *** */
/*.header-bar {
    background: url('images/nav_bg.png');
    width: 100%;
    height: 62px;
    color: white !important;
    background-repeat: repeat;
}*/

.navbar .container {
    padding: 5px;
}

.nav a {
    color: rgb(245,245,245) !important;
    font-size: 16px;
}
.navbar-nav li:link {
    background-color: #7FB2E2;
    background: linear-gradient(#7fb2e2, #3a7fc0) left repeat;
}

    .navbar-nav li:hover {
        background-color: #7FB2E2;
        background: linear-gradient(#7fb2e2, #3a7fc0) left repeat;
    }
    .navbar-nav li:active {
        background-color: #7FB2E2;
        background: linear-gradient(#7fb2e2, #3a7fc0) left repeat;
    }
    .profile-image{
        height:35px;
        width:35px;
        display:inline-block;
        position:absolute;        
        top:7px;
        left:5px;
        background-position:center center;
        background-size:cover;
        border-radius:20px;
    }
#logoutForm > ul > li:nth-child(1) > a{
    padding-left:50px;
}
/* *** LOGIN *** */
#login {
    background-image: url(images/archery1.png);
    background-position: center center;
    background-size: cover;
}

#loginForm {
    max-width: 600px;
    margin: 100px auto 200px;
    background-color: rgba(255,255,255,0.88);
    padding: 30px;
    border-radius: 50px;
}

#login .title-line {
    display: flex;
    justify-content: center;
}
#login h2{
    margin:auto;
}
#login .form-group {
    max-width: 350px;
    margin: auto
}

#login .form-control {
    margin: auto;
    background-color: #B2B2B2;
    color: white;
    font-size: 16px;
    margin-top: 10px;
    border-radius:30px;
    padding:14px 18px;
    height:40px;
}

#login .text-danger {
    font-size: 12px;
    margin-left: 10px;
    margin-bottom: 10px;
}

#login ::-webkit-input-placeholder {
    color: rgba(255,255,255,0.9);
}

#login ::-moz-placeholder {
    color: rgba(255,255,255,0.9);
}
/* firefox 19+ */
#login :-ms-input-placeholder {
    color: rgba(255,255,255,0.9);
}
/* ie */
#login :-moz-placeholder {
    color: rgba(255,255,255,0.9);
}

#login ::placeholder {
    color: rgba(255,255,255,0.9);
}

#login .center {
    width: 90%;
    margin: auto;
}

#login .btn {
    width: 100%;
    text-align: center;
    margin: 0 30px;
    border-radius: 50px;
    margin: auto;
    background-color: #444;
    color: white;
    font-size: 16px;
    height:40px;
}

#login .checkbox {
    margin-top: 10px;
    float: right;
    display: flex;
    justify-content: center;
}

    #login .checkbox label {
        font-size: 14px;
        padding-left: 50px;
    }

    #login .checkbox input[type=checkbox] {
        font-size: 20px;
        height: 18px;
        width: 18px;
        margin-top: 2px;
        margin-right: 30px;
    }

#login input {
    max-width: 350px;
}
@media screen and (max-width: 540px) {
    #login .title-line {
        flex-direction:column;
    }
    #login .title-line img{
        max-width:300px;
        width:auto;
        height:auto;
        margin:auto;
    }
}


/* *** FORSIDE *** */
#frontpage {
    margin: 20px;
    text-align: center;
}

    #frontpage h2 {
        margin: 40px;
    }

    #frontpage img {
        margin: auto;
    }
.loader {
	display: block;
	position: relative;	
	padding-top: 100px;
	padding-bottom: 100px;	
	z-index: 5;
}

	.loader img {
		height: 50px;
		width: 50px;
		display:block;
		margin:auto;
	}
/* *** Standard side *** */
.button-bar {
    margin-top: 15px;
    margin-bottom: 15px;
}

.list-buttons {
    display: flex;
    flex-direction: column;
}

    .list-buttons .btn {
        max-width: 100px;
        width: 100%;
        margin: auto;
        margin-top: 8px;
    }
.item-img {
    vertical-align: middle;
    text-align: center;
    height:80px;
    width:100%;
    
    background-position:center center;
    background-size:contain;
    background-repeat:no-repeat;

}

/* *** Create & edit sider *** */
.create .details-image {
    /*margin:auto;*/
    text-align: center;
    display: block;
    max-width: 200px;
}
.create .btn.details-image {
max-width:110px;
}
.create .input-area .form-control{
    margin-bottom:8px;
	border-radius:10px;

}
	.create .input-area .form-control.check-box {
		border-radius: 3px;
	}
.create .check-box{
    height:25px;
    width:25px;
}

.button-confirmation-group{
  float:right !important;
}
.create label {
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav .open > a, .nav .open {
    border-color: transparent;
}
    .nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
        background-color: transparent;
        border-color: transparent;
    }
.nav a {
    color: none !important;
    font-size: 16px;
}

.dropdown-menu {
    background-color:darkgray;
}

.required:after {
    content: "*";
    font-weight: bold;
    color: red;
}

@media screen and (max-width: 991px) {
    .row-header {
        display: none !important;
    }
}