/* Fonts Imported from Google */
@import 'https://fonts.googleapis.com/css?family=Open+Sans:400,600';
/*   Core: General style
----------------------------*/
body {
    font-family: 'Montserrat', sans-serif;
    background  : radial-gradient(ellipse at center, #5A93AF 0%, #004E74 100%); 
    background-attachment: fixed;
    height      : 100%;
    padding-top : 5%;
	}
html, body {
    position : relative;
    height   : 100%;
}
.imglogo {
	max-height: 100px;
	max-width: 100%;
}
.car h1 {
	margin: 0px;
	padding: 0px;
	font-size: 18px;
	font-weight: 800;
}
ul { 
	font-size: 16px;
}
ul li {
  list-style: disc;
    margin-top: 10px;
  margin-bottom: 10px;
  font-size: 14px;
}
ul ul {
	list-style-type: disc;
	margin-left: 20px;
	padding-left: 0px;
}
ul li ul li {
  list-style-image: none ;
  margin-bottom: 5px;
  font-size: 14px;
  
}
ol li { 
	list-style-image: none !important;
}
.black-text {
	color: #000 !important;
}
.btn-primary {
  color: color-yiq(#00a0ac);
  background-color: #00a0ac;
  border-color: #00a0ac;
}
.btn-secondary {
  color: color-yiq(#868e96);
  background-color: #868e96;
  border-color: #868e96;
  color: #fff !important;
}
.btn-primary:hover, .btn-primary:active , .btn-primary:focus {
  color: color-yiq(#008b96);
  background-color: #008b96;
  border-color: #008b96;
}

.udfyldgaranti {
        color : #FFF;
    }
.lockscreen-container {
    position   : relative;
    margin     : 40px auto;
    padding    : 10px 40px 40px;
    text-align : center;
}
.avatar {
    position        : absolute;
    width           : 120px;
    height          : 120px;
    z-index         : 2;
    top             : 20px;
    left            : 50%;
    margin-left     : -60px;
    border-radius   : 100%;
    border          : 2px solid #aaa;
    background-size : cover;
}

.avatar-left {

    position        : relative;
    width           : 150px;
    height          : 150px;
    z-index         : auto;
    top             : 0px;
    left            : 50%;
    margin-top: 25px;
    margin-left     : -75px;
    border-radius   : 100%;
    border          : 2px solid #aaa;
    background-size : cover;
}
.shield {
    width           : 100%;
    height          : 100px;
    background-image : url('https://app.detaily.pro/images/welcome.png');
    background-position: center;
    background-size : contain;
    background-repeat: no-repeat;
}

.form-box input {
    width      : 100%;
    padding    : 10px;
    text-align : center;
    height     : 40px;
    border     : 1px solid #ccc;;
    background : #fafafa;
    transition : 0.2s ease-in-out;

}
.form-box input:focus {
    outline    : 0;
    background : #eee;
}
.form-box form {
    margin-top : 50px;
}
.form-box input {
    border-radius : 28px;
    color: #333;
}
.form-box button.login {
    margin-top       : 50px;
    padding          : 5px;
    border-radius    : 33px;
    background-color : #00a0ac;
    -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    transition: 1s ease-in-out;
}
.form-box button.login:hover {
    margin-top       : 50px;
    padding          : 5px;
    border-radius    : 33px;
    background-color : #008b96;
     -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}
.animated {
    -webkit-animation-duration  : 1s;
    animation-duration          : 1s;
    -webkit-animation-fill-mode : both;
    animation-fill-mode         : both;
}
.btn:focus, .btn:active:focus {
    outline : 0;
}
.form-box button.btn-submit {
    padding: 5px 12px;
    color: #fff;
}
@-webkit-keyframes fadeInUp {
    0% {
        opacity           : 0;
        -webkit-transform : translateY(20px);
        transform         : translateY(20px);
    }

    100% {
        opacity           : 1;
        -webkit-transform : translateY(0);
        transform         : translateY(0);
    }
}
@keyframes fadeInUp {
    0% {
        opacity           : 0;
        -webkit-transform : translateY(20px);
        -ms-transform     : translateY(20px);
        transform         : translateY(20px);
    }

    100% {
        opacity           : 1;
        -webkit-transform : translateY(0);
        -ms-transform     : translateY(0);
        transform         : translateY(0);
    }
}
.fadeInUp {
    -webkit-animation-name : fadeInUp;
    animation-name         : fadeInUp;
}
.avatar {
    -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    transition: 1s ease-in-out;
    text-shadow: none;
}
.avatar:hover, .avatar:focus {
	  -webkit-transform: scale(3);
    -moz-transform: scale(3);
    -o-transform: scale(3);
    -ms-transform: scale(3);
    transform: scale(3);
    border-color: #00a0ac;
    box-shadow: 0px 0px 15px #000;
	
}
/*error animation*/
.error_anim {
    animation           : shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
    transform           : translate3d(0, 0, 0);
    border              : 1px solid #aaa;
    box-shadow          : 0 0 7px #ff6666;
    backface-visibility : hidden;
    perspective         : 1000px;
}
@keyframes shake {
    10%, 90% {
        transform : translate3d(-1px, 0, 0);
    }

    20%, 80% {
        transform : translate3d(2px, 0, 0);
    }

    30%, 50%, 70% {
        transform : translate3d(-4px, 0, 0);
    }

    40%, 60% {
        transform : translate3d(4px, 0, 0);
    }
}
/*error animation*/
/*==== Preloader ====*/
.preloader {
    position            : fixed;
    width               : 100%;
    height              : 100%;
    top                 : 0;
    left                : 0;
    z-index             : 100000;
    backface-visibility : hidden;
    background          : #ffffff;
}
.loader_img {
    width               : 50px;
    height              : 50px;
    position            : absolute;
    left                : 50%;
    top                 : 50%;
    background-position : center;
    margin              : -25px 0 0 -25px;
}
    
@media screen and (max-width : 767px) {
    .form-box form {
        margin-top : 135px;
    }
    .form-box button.login {
        margin-top : 13px;
    }
    .user-name {
        color : #FFF;
    }
}
@media screen and (min-width : 768px) {
    .form-box button.btn-submit {
        margin-top : 65px;
    }
}