/* GLOBALS */
html,
body {
	height: 100%;
	background-color: #3A5374;
	overflow: hidden;
}
body {
	font-family: 'Rubik', sans-serif;
	color: #3A5374;
	font-size: 1.5rem;

	background-image: url('../img/triangles-bg.png');
	background-size: cover;
	background-position: center;

	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}
.threat-detected-bg {
	background-color: #B84141;
}

/* Links */
a,
a:focus,
a:hover {
	color: #fff;
}

#full_url {
	background-color: #ddd;
	font-weight: 600;
}

.table{
	margin-bottom: 0px !important;
}

/* Custom default button */
.btn-default:active,
.btn-default:hover,
.btn-default:focus {
	color: #333;
	text-shadow: none; /* Prevent inheritance from `body` */
}

/* CENTRAL CARD */
.site-wrapper {
	z-index: 99;

	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%; /* For at least Firefox */
	min-height: 100%;
}
.site-wrapper-inner {
	margin: auto;
	width: 68vw;
	min-width: 830px;
	height: auto;

	border-radius: 10px;
	-webkit-border-radius: 10px;
	border: 1px solid #707070;
	box-shadow: 0px 3px 6px #00000029;
}
.cover-container {
	z-index: 9;
	margin: auto;
	padding: 0;

	width: 100%;
	height: auto;

	border-radius: 10px;
	-webkit-border-radius: 10px;
	background: #fff;

	display: flex;
	flex-direction: row;
}

.inner {
	padding: 0;
	z-index: 9;
	height: auto;
	width: auto;

	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: stretch;
}

/************ LEFT ****************/
.left-cover{
	z-index: 2;
	background-color: #5A7D9F;
	padding: 5.5rem 4.6rem;
	
	color: #ffffff;
	font-size: 1.8em;
	font-family: 'Rajdhani', sans-serif;

	width: 45%;
	height: auto;
	
	border-top-left-radius: 9px;
	border-bottom-left-radius: 9px;
	-webkit-border-top-left-radius: 9px;
	-webkit-border-bottom-left-radius: 9px;
	-moz-border-radius-topleft: 9px;
	-moz-border-radius-bottomleft: 9px;

	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: baseline;
}
.left-cover-threat-bg {
	background-color: #3A5374
}

.left-cover .status-icon {
	background-color: transparent;
	
	background-repeat: no-repeat;
	background-size: contain;
	background-position-x: left;

	height: 6.5rem;
	width: 100%;
	margin-bottom: 5px;
}
.success-icon {
	background-image: url('../img/success.png');
}
.warning-icon {
	background-image: url('../img/warning.png');
}
.threat-icon {
	background-image: url('../img/threat.png');
}

.left-cover .title {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	
	padding: 1rem 0;
	line-height: unset;
}
.left-cover .title p {
	line-height: 0;
	padding: 1rem 0;
	margin: 0;
}
.left-cover .title span {
	padding: 0;
	margin: 0;
	font-weight: 700;
	font-size: 1.4em;
}

/* PREVIEW */
.left-cover .preview-container {
	width: 100%;
	min-width: 325px;
	margin: 0;
	padding: 0;
	color: #3A5374;
	font-size: 2rem;

	display: flex;
	flex-direction: row;
	align-items: baseline;
	justify-content: center;
}

.left-cover .preview-container .desktop-preview {
	z-index: 999;

	margin: auto;
	padding: auto;
	width: 250px;
	height: 120px;

	background-image: url('../img/preview-desktop.png');
	background-size: contain;
	background-repeat: no-repeat;
}

#preview-desktop {
	z-index: 99;

	margin-left: 36.5px;
	width: 154px;
	margin-top: 9px;
	height: 98px;
}

.left-cover .preview-container .tablet-preview {
	z-index: 999;
	
	margin: auto;
	padding: auto;
	width: 100px;
	height: 120px;

	background-image: url('../img/preview-tablet.png');
	background-size: contain;
	background-repeat: no-repeat;
}

#preview-mobile {
	z-index: 99;
	margin-left: 11px;
	width: 73px;
	margin-top: 12px;
	height: 97px;
}

@media only screen and (max-height: 550px) {
	/* Hide SmartDefender logo */
  .credits {
    visibility: hidden;
  }

	.left-cover {
		/* padding: 5.5rem 4.6rem; */
		padding: 4rem 3rem;
	}
	.right-cover {
		padding: 4rem 3rem;
	}
}

/************ RIGHT ****************/
.right-cover {
	margin: 0;
	padding: 5.5rem 4.6rem;
	width: 55%;
	height: auto;
	max-height: 100%;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
}
.right-cover .logo-mli {
	background-image: url('../img/logo-mli.png');
	background-repeat: no-repeat;
	background-position: left;
	background-size: contain;
	
	height: 3em;
	width: 100%;
}
.right-cover .content-text {
	font-size: .9em;
	margin-top: 1em;
	overflow-y: scroll;
    overflow-x: hidden;
	margin-bottom: 10px;
	max-height: 190px;
	word-break: break-word;
}
.right-cover p {
	text-align: left;
}
.badge-reports {
	cursor: pointer;
	background-color: #3A5374;

	font-size: unset;
	font-weight: 500;
	padding: .1em .3em;

	transition: background .25s ease;
}
.badge-reports:hover {
	background-color: #5A7D9F;
	color: #fff;
}

.right-cover .buttons-container {
	padding: 0;
	margin: 0;
	width: 100%;

	display: inline-flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 1rem;
}
.right-cover .buttons-container button {
	border-radius: 5px;
	border: 1px solid #707070;
	color: #fff;
	font-size: 1em;
	font-weight: 500;

	padding: 0;
	height: 4.5rem;
	width: auto;
	align-self: baseline;

	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-evenly;
}

.right-cover button .btn-icon {
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;

	height: 100%;
	width: 1.4em;
	margin: 0 .6em;
}
.continue-button-bg {
	background-color: #40743A;
	transition: background 0.25s;
}
.continue-button-bg:hover {
	background-color: #335C2E;
}
.fraud-button-bg {
	background-color: #C64F4F;
	transition: background 0.25s;
}
.fraud-button-bg:hover {
	background-color: #A73636;
}
.trusted-button-bg {
	background-color: #3A5374;
	transition: background 0.25s;
}
.trusted-button-bg:hover {
	background-color: #2E425C;
}

.check-icon {
	background-image: url('../img/check-icon.png');
}
.skull-icon {
	background-image: url('../img/skull-icon.png');
}
.flag-icon {
	background-image: url('../img/flag-icon.png');
}
.out-icon {
	background-image: url('../img/out-icon.png');
	width: 2em;
}

.right-cover button .btn-title {
	margin-right: .6em;
	width: 100%;
	white-space: pre;
}

.alert {
	position: fixed;
	top: 0;
	left: 0;
}

/* SD Logo */
.credits {
	background-image: url('../img/smartdefender.png');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;

	width: 140px;
	height: 80px;

	position: absolute;
	bottom: 30px;
	right: 50px;
}

/* MODALS */
#selectEmailModal .modal-header {
	padding: 20px;
}
.modal-content {
	font-family: 'Rajdhani', sans-serif;
}
.modal-header .modal-title {
	color: #3A5374;
	font-size: 4rem;
}
.report-field-title {
	font-family: 'Rubik', sans-serif;
	color: #707070 !important;
}
.form-control {
	font-family: 'Rubik', sans-serif;
	color: #3A5374;
	font-size: 1.5rem;
}
.modal-footer button {
	background: #3A5374;
	height: 4.5rem;
	padding-left: 1em;
	padding-right: 1em;

	font-family: 'Rajdhani', sans-serif;
	color: #fff;
	font-size: 1.1em;
	font-weight: 600;

	border: 1px solid #3A5374;

	transition: background .25s ease, color .25s ease;
}
.btn-default:hover {
	background-color: #fff;
	color: #3A5374;
}

/* ZEBRA LIST */
div.list-group.list-group-striped a:nth-of-type(odd){
    background: #eee;
}
div.list-group.list-group-striped a:nth-of-type(even){
    background: #fff;
}
div.list-group.list-group-hover a:hover{
    background: #ddd;
}

/*
 * Affix and center
 */

@media (min-width: 700px) {

        /* Start the vertical centering */
        .site-wrapper-inner {
                vertical-align: middle;
        }

}

@media (max-width: 790px) {
        .cover .btn-lg {
                font-weight: bold;
                font-size: 14px;
        }

        .right-cover button.btn {
                margin-bottom: 5px;
        }
}

@media (max-width: 768px) {

        .right-cover .btn:first-of-type {
                margin-right: 0px;
        }

}

@media (max-width: 740px) {

        .btn-primary {
                width: 100%;
                height: 35px;
                padding: 0px;
        }

        .right-cover {
                padding-left: 10px;
                padding-right: 10px;
        }

        .right-cover .content-text {
                height: 165px;
        }

}


@media (max-width: 544px) {

	body {
		overflow: auto;
	}

        .logo-cli{
                float:none;
                margin:10px;
        }
        .cover {
                height: auto;
        }
        .cover-container {
                max-width: 300px;
		flex-direction: column;
		margin-top: 20px;
		margin-bottom: 20px;
        }
        .left-cover {
                float: none;
                margin-right: 0px;
                border-radius: 10px 10px 0px 0px;
                -webkit-border-radius: 10px 10px 0px 0px;
                -moz-border-radius: 10px 10px 0px 0px;
		width: 100%;
        }

	.left-cover .status-icon {
		width: 30px;
		margin: -20px -5px -10px -15px;
	}

	.left-cover .title {
		font-size: 0.8em;
		margin: -60px 0px 0px 25px;
	}

	.left-cover .preview-container {
		width: 100%;
		min-width: auto;
		margin-top: 20px;
		margin-bottom: -20px
	}

        .left-cover .btn-preview .prev-desk {
                border-radius: 0px;
                -webkit-border-radius: 0px;
                -moz-border-radius: 0px;
        }

        .right-cover {
                float: none;
                margin-left: 0px;
                padding-left: 20px;
                padding-right: 20px;
                padding-bottom: 5px;
                padding-top: 15px;
		width: 100%;
        }

	.right-cover .buttons-container {
		display: inline-grid;
		margin-top: 80px;
		margin-bottom: 20px;
	}

        .btn-primary {
                margin-bottom: 5px;
        }

        .right-cover .content-text {
                height: auto;
                overflow: visible;
        }

	.credits {
		display: none;
	}

}