/*
 * Loading Overlay
 *
 * Sortmio CoNext 2018
 *
 */

/* light blue #209bd7 */
/* dark blue #0168b3 */


/* FONTS */
@import url('https://fonts.googleapis.com/css?family=Do+Hyeon');
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');


/* common hybris debug
.webgl-content * {
    border: 0;
    margin: 0;
    padding: 0;
}*/

#loading_overlay_container {
	font-family: 'Roboto Condensed',sans-serif;
	position: absolute;
	left: 0;
	top: 0;
	width: inherit;
	height: inherit;
	z-index: 9;
	background-color: #eeeeee;
	/*border: 1px solid #e6e6e6; /* REMOVE*/
}


/* MESSAGE BOX*/
#u_message_box {
	position: absolute;
	right: 0;
	bottom: 20px;
	width: 40%;
	height: auto;
	min-height: 50px;
    padding: 4em 2em 2em;
    background-color: #f3f3ad;
    color: #333333;
    font-size: 16px;
	display: none;
	z-index: 99;
}

#message_close {
	color: #333333;
    position: absolute;
    cursor: pointer;
    margin-top: -3em;
    font-weight: bold;
    border: 1px solid #cccccc;
    padding: 0.25em 0.4em 0.1em;
}

#message_close:hover {
	color: #000000;
}

/* MAIN */
.loading_column {
	height: inherit;
	display: inline;
}

#loading_column_left {
	background-color: #0168b3;
	width: 27%;
	position: absolute;
	color: #ffffff;
}

/* LEFT COLUMN */
.loading_left_element {
	width: 100%;
}

#loading_left_vehicle {
	background-color: #209bd7;
	height: 50%;
}

#loading_left_loading {
	background-color: #0168b3;
	height: 50%;
}

#loading_column_left h2 {
	padding: 35px 20px 30px;
	text-align: center;
	font-size: 30px;
	overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#loading_left_selected_vehicle {
	padding: 15px 40px 0;
	font-size: 16px;
	font-weight: bold;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

#loading_left_vehicle_attributes {
	list-style: none;
	font-size: 16px;
	padding: 15px 40px 0;
}

.loading_left_vehicle_attribute {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	margin-top: 2px;
	width: 150px;
}

.loading_left_vehicle_attribute.list_break {
	margin-top: 20px;
}

.vehicle_attribute_value {
	position: absolute;
    text-align: left;
    left: 210px;
    overflow: hidden;
    text-overflow: ellipsis;
	max-width: 124px;
}

/* LOADING */
#loading_loading_icon {
    width: 91px;
    height: 51px;
    min-width: 91px;
    min-height: 51px;
    position: relative;
    margin: 50px 140px 5px;
}

#loading_left_loading_head_wrapper {
	width: 100%;
	height: 6em;
	overflow: hidden;
}

#loading_left_loading_head_gradient {
    width: 100%;
    height: 6em;
    background: linear-gradient(rgba(1,104,179,1), rgba(1,104,179,0.25), rgba(1,104,179,0), rgba(1,104,179,0.25), rgba(1,104,179,1));
    z-index: 3;
    position: absolute;
}

#loading_left_loading_head_container {
	width: 100%;
    height: auto;
    position: relative;
    left: 0;
    top: 0px;
}

.loading_left_loading_head {
	font-size: 1.5em;
	font-weight: bold;
}

#loading_left_loading_info_wrapper {
	width: 372px;
    height: 160px;
    overflow: hidden;
    margin: 2em 0;
}

#loading_left_loading_info_gradient {
    width: 100%;
    height: 50%;
    background: linear-gradient(to right, rgba(1,104,179,1), rgba(1,104,179,0.15), rgba(1,104,179,0), rgba(1,104,179,0.15), rgba(1,104,179,1));
    z-index: 3;
	position: absolute;
    top: 370px;
}

#loading_left_loading_info_container {
	position: relative;
	top: 0;
	left: 0;
	width: auto;
	height: inherit;
	white-space: nowrap;
}

.loading_left_loading_info {
    font-size: 16px;
	height: 160px;
	width: 372px;
	padding: 20px 40px;
    text-align: left;
	display: inline-block;
	white-space: normal;
	overflow: hidden;
}

/* animation */

#loading_left_animation {
    position: relative;
    width: 92%;
    margin: 0 4%;
    height: 8px;
    overflow: hidden;
}

#loading_left_animation_gradient {
	position: absolute;
	left: 0;
	top: 0;
	height: inherit;
	width: 100%;
	background: linear-gradient(to right, rgba(1,104,179,1), rgba(1,104,179,0.25), rgba(1,104,179,0), rgba(1,104,179,0.25), rgba(1,104,179,1));
	z-index: 3;
}

#loading_left_animation_content {
	position: absolute;
	left: 0;
	top: 0;
	height: inherit;
	width: 0px;
	/*background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.8), rgba(255,255,255,1), rgba(255,255,255,0.8), rgba(255,255,255,0));*/
	background: #ffffff;
}


/* RIGHT COLUMN */
#loading_column_right {
	background-color: #ffffff;
    width: 73%;
    overflow: hidden;
    left: 27%;
    position: absolute;
    white-space: nowrap;
	border: 2px solid #c5d1de;
}

.loading_right_arrow {
	position: absolute;
    top: 42%;
    width: 0.5em;
    padding: 0 0.5em 0 0.2em;
    height: 2em;
    font-size: 4em;
    color: #666666;
    /*background: rgba(255,255,255,0.1);*/
    cursor: pointer;
    z-index: 3;
    line-height: 2em;
    font-family: 'Do Hyeon', sans-serif;
}

.loading_right_arrow:hover {
	/*background: rgba(255,255,255,0.25);*/
}

#loading_right_arrow_left {
	left: 0;
}

#loading_right_arrow_right {
	right: 0;
}

#loading_right_dots {
	list-style: none;
    position: absolute;
    bottom: 4em;
	/*bottom: 1em;*/
    left: 40%;
    width: 20%;
    text-align: center;
}

#loading_right_dots li {
	cursor: pointer;
    width: 11px;
    height: 11px;
    background-color: #eeeeee;
    margin: 0 6px;
    display: inline-block;
    border: 1px solid #cccccc;
    border-radius: 20px;
}

#loading_right_dots li.d_active {
    background-color: #209bd7;
    border: 1px solid #cccccc;
}

#loading_right_btns {
	position: absolute;
    bottom: 0px;
    left: 62px;
    width: 88%;
    height: 9%;
    overflow: hidden;
}

.loading_right_btn {
	padding: 15px 20px 13px 20px;
    float: left;
    margin: 0 0.5em;
    font-size: 17px;
	width: 292px;
	text-align: center;
	line-height: 22px;
	white-space: pre-line;
}

.btn_blue, .btn_disabled {
	text-align: right;
}

.btn_blue {
	color: #ffffff;
	background-color: #0669b2;
	border: 1px solid #0669b2;
	border-radius: 5px;
	cursor: pointer;
}

.btn_blue:hover {
	color: #ffffff;
	background-color: #005c98;
	border: 1px solid #005c98;
}

.btn_white {
	color: #055a98;
	background-color: #ffffff;
	border: 1px solid #055a98;
	border-radius: 5px;
	cursor: pointer;
}

/*
.btn_white:hover {
	color: #ffffff;
	background-color: #0863a9;
}
*/

.btn_disabled {
	color: #ffffff;
	background-color: #7fb3da;
	border: 1px solid #7fb3da;
	border-radius: 5px;
	cursor: default;
}

.btn_icon_left {
	margin: 0 20px 0 0;
	font-family: 'Do Hyeon', sans-serif;
	float: left;
}

.btn_icon_right {
	margin: 0 20px 0 0;
	font-family: 'Do Hyeon', sans-serif;
	/*float: right;*/
	top: 0;
    position: absolute;
	    right: 0px;
    top: 16px;
}


#loading_right_container {
	position: absolute;
    width: 100%;
    height: 87%;
    left: 0px; // TODO start with first screen (0)
    top: 0;
}

.loading_right_element {
	background-color: #ffffff;
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: inline-block;
}

#loading_right_selectstart {
	/*background-color: #ffffff;*/
}

#loading_right_controllinfo {
	/*background-color: #ffffff;*/
}

#loading_right_accountinfo {
	/*background-color: #ffffff;*/
}


/* SELECT START CONTENT */

/*#loading_right_selectstart h2,*/
.loading_right_element h2 {
	margin: 35px 2.5em 15px;
    color: #0863a9;
    font-size: 30px;
}

.loading_right_selectstart_p {
	margin: 0 5em;
    color: #333333;
    font-size: 16px;
    white-space: normal;
	line-height: 1.4em;
}

.loading_right_selectstart_p.highlight {
	font-weight: bold;
}

#select_start_optionscontainer {
	width: 88%;
    height: 74%;
    overflow: hidden;
    margin: 1em 6.5%;
    position: relative;
}

.optionscontainer_element {
	width: 48%;
    height: 95%;
    margin: 0 0.4%;
    /*border: 2px solid #cccccc;*/
	border: 2px solid #c5d1de;
    display: inline-block;
	/*cursor: pointer;*/
	text-align: center;
}
/*
.optionscontainer_element:hover, .optionscontainer_element.selected {
    border: 2px solid #0863a9;
}
*/

.disabled_overlay {
	position: absolute;
    z-index: 2;
    width: inherit;
    height: inherit;
    left: 4px;
    top: 1px;
    text-align: center;
    cursor: default;
    font-size: 1.2em;
    color: #cccccc;
    border: 2px solid #333333;
    background: rgba(0,0,0,0.7);
}

#disabled_overlay_info {
    margin: 8.5em 1em;
    background: #000000;
    border: 20px solid #000000;
}

.optionscontainer_element_checkmark {
	position: absolute;
    top: 4px;
    right: 4px;
    color: #0168b3;
    background-color: #ffffff;
    padding: 14px 28px;
    border-radius: 52px;
    font-size: 52px;
    display: none;
    border: 4px solid #0168b3;
}

.optionscontainer_element.selected .optionscontainer_element_checkmark {
	display: block;
}

.optionscontainer_head {
	background-color: #c5d1e1;
    color: #566373;
    padding: 0.75em 1em;
	font-size: 18px;
	position: relative;
}

.optionscontainer_image {
	width: 285px;
    height: 190px;
	min-width: 285px;
    min-height: 190px;
    margin: 4% 15%;
    max-height: 230px;
}

.optionscontainer_list {
	width: 90%;
    height: 11em;
    list-style: none;
	margin: 0 5%;
	overflow: hidden;
	white-space: nowrap;
	text-align: left;
}

.optionscontainer_list li {
	margin: 0.25em 0;
    font-size: 16px;
    line-height: 1.8em;
	overflow: hidden;
	white-space: normal;
}

.optionscontainer_list_icon {
	border: 2px solid #0863a9;
    border-radius: 1em;
    color: #0863a9;
    width: 1.4em;
    height: 1.4em;
    position: absolute;
    font-size: 1.2em;
    text-align: center;
    line-height: 1.3em;
    font-weight: bold;
}

.optionscontainer_list_text {
	position: relative;
	margin-left: 2.5em;
	display: block;
	line-height: 1.5em;
}

.optionscontainer_element .loading_right_btn {
	float: none;
    margin: -62px 64px;
	text-align: center;
	white-space: nowrap;
    /*overflow: hidden;*/
    text-overflow: ellipsis;
	position: relative;
}


/* CONTROL INFO */
.loading_controll_element {
	position: relative;
	width: 100%;
	display: block;
}

.loading_controll_element img {
	display: inline;
    margin: 3.5% 8%;
}

#loading_controll_img_drag {
	height: 206px;
	width: 102px;
	min-height: 206px;
    min-width: 102px;
}

#loading_controll_img_360 {
	height: 173px;
	width: 103px;
	min-height: 173px;
    min-width: 103px;
}

.loading_controll_info_container {
	height: 206px;
	margin: 5% 5% 0 25%;
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
}

.loading_controll_element h4 {
    color: #0669b2;
	font-size: 18px;
    font-weight: bold;
}

.loading_controll_element p {
	white-space: normal;
    margin: 1em 0;
    font-size: 16px;
}

#loading_controll_hr {
    position: relative;
    width: 84%;
    border: 1px solid #cccccc;
    margin: 0 8%;
}

/* step by step */
#loading_stepbystep_icons {
    margin: 0 5%;
    position: absolute;
    top: 100px;
	width: 139px;
	height: 550px;
	min-width: 139px;
	min-height: 550px;
}

#loading_right_stepbystep_container {
    height: 550px;
    width: 720px;
    position: absolute;
    top: 110px;
    margin: 0 82px 0 205px;
}

.loading_stepbystep_element {
    padding: 32px 10px;
    position: relative;
    height: 134px;
}

.loading_stepbystep_element h4 {
    color: #0669b2;
	font-size: 18px;
	margin: 0.5em 0 1em;
	font-weight: bold;
}

.loading_stepbystep_element p {
    white-space: normal;
    margin: 1em 0;
    font-size: 16px;
}

.stepbystep_hr {
    position: relative;
    width: 96%;
    border: 1px solid #cccccc;
    margin: -1px 0 0 10px;
}

#welcome_img_logo {
	width: 350px;
	height: 101px;
	min-width: 350px;
	min-height: 101px;
	left: 50%;
    position: relative;
    margin-left: -175px;
    top: 80px;
}

.welcome_head {
	font-size: 26px;
	color: #0669b2;
	margin: 0.25em 0 0;
	margin-left: 80px;
	margin-top: 100px;
}

.welcome_subhead {
	font-size: 18px;
	color: #546373;
	margin: 0.25em 0 0;
	margin-left: 80px;
}

.welcome_ul {
    margin: 1em 0;
    list-style: square;
    left: 1em;
    position: relative;
    font-size: 16px;
	color: #546373;
}

.welcome_ul li {
	margin: 0.5em 0;
}

.welcome_container {
    width: 60%;
    position: relative;
    top: 25px;
    margin: 10px 20% -60px;
}
/* award */
.award_head h3 {
	color: #0863a9;
	font-size: 24px;

}
.award_head {
	display: block;
	margin: 60px 120px 30px 120px;

}
.award_text {
    white-space: normal;
    margin: 1em 120px;
    font-size: 16px;

}

.awards {
	display: block;
	text-align: center;
	margin: 0 120px;

}

.head_award_container {
	position: relative;
	width: 49%;
	height:93px;
	display: inline-block;
	overflow: hidden;
    white-space: normal;
}

.award_image {
	width: 185px;
    height: 355px;
	min-width: 185px;
    min-height: 355px;
    margin: 2% 3% 1%;
}

#SR5_img_logo {
	width: 298px;
	height: 93px;
	min-width: 298px;
	min-height: 93px;
	position: relative;
	left: 100%;
	margin-left: -298px;


}

.welcome_head_csc {
	font-size: 25px;
	color: #0669b2;
	width: 80%;
	margin: 0.5em 0 0;
	text-align: center;
	display: inline-block;
}
.welcome_text_csc {
	font-size: 18px;
	color: #546373;
	background: #EEEFF1;
    opacity: 1;
	white-space: normal;
	padding: 20px 15px;
}

.welcome_container_csc {
    position: relative;
    top: 60px;
    margin: 40px 10% 40px 8%
}

.welcome_image_csc {
	width: 89px;
    height: 62px;
    min-width: 89px;
    min-height: 62px;
    display: inline-block;
	margin: 0px 0px 0px 20px;
}

/*
* Finish container
*/

#finishContainer {
	width: auto;
	padding: 20%;
	text-align : center;
}

#finishContainer h2 {
    color: #0669b2;
    font-size: 36px;
    margin: 0 0 0.5em;
}

#finishContainer p {
	color: #546373;
	font-size: 18px;
}


#finish_progress_container {
    position: relative;
    border: 1px solid #606060;
    width: 100%;
    height: 1em;
    margin: 3em 0 1em;
    overflow: hidden;
}

#finish_progress_progress {
    position: absolute;
    height: inherit;
    width: 2%;
    background-color: #0669b2;
}

#finish_progress_info {
    position: relative;
    color: #546373;
    font-size: 18px;
}

/*
UPLOAD DIALOG
*/
#unity_upload_dialog {
    position: absolute;
    top: 20%;
    left: 50%;
    width: 400px;
    height: auto;
    padding: 20px;
    margin-left: -220px;
    background-color:
    #f5f5f5;
    border-radius: 8px;
    text-align: center;
    z-index: 10;
    border: 4px solid #666;
}

#unity_image_form {
    margin: 10px 10px 30px;

}

.unity_image_desc {
    font-size: 0.9em;
}

#unity_image_close {
    position: absolute;
    top: 10px;
    right: 10px;
}

/*
FullScreen Button
*/
#fs_btn {
    position: absolute;
    /*
    right: 240px;
    top: 3px;
    */
    left: 3px;
    bottom: 3px;
    width: 27px;
    height: 27px;
    cursor: pointer;
    background-color: #ebebeb;
    z-index: 6;
    border: 1px solid #617281;
}

.fs_btn_black {
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: #617281;
    z-index: 7;
}

#fs_btn_inner {
    position: absolute;
    left: 6px;
    top: 6px;
    width: 14px;
    height: 14px;
    background-color: #ebebeb;
    z-index: 8;
}

/* promise info screen */
#promise_img_logo {
	width: 350px;
	height: 101px;
	min-width: 350px;
	min-height: 101px;
	left: 50%;
    position: relative;
    margin-left: -175px;
    top: 80px;
}

.promise_container {
    width: 80%;
    position: relative;
    top: 25px;
    margin: 10px 10% -60px;
}

.promise_head {
	font-size: 26px;
	font-weight: bold;
	color: #0669b2;
	margin-left: 30px;
	margin-top: 80px;
}

.promise_ul {
    font-size: 26px;
	font-weight: normal;
	color: #0669b2;
    margin-top: 80px;
	margin-bottom: 1em;
	margin-left: 30px;
	left: 0;
	list-style: none;
    position: relative;
}

.promise_ul li::before {
  	content: ">";
	font-weight: bold;
  	margin-right: 0.2em;
	display: inline;
}

.promise_ul li {
  	position: relative;
  	margin-bottom: 1em;
}

.promise_li_head {
	display: inline;
	margin-left: 0;
}

.promise_li_sub {
	display: block;
	font-size: 20px;
	font-weight: normal;
	color: #546373;
	margin-left: 0;
  	white-space: normal; /* allow explicitly  */
  	overflow-wrap: break-word; /* Wrap also for longer words */
  	word-break: break-word; /* Compatibility for older browsers */
}

/* END */