@charset "UTF-8";
@import url(fonts/hadwritten/stylesheet.css);

/* CSS Document */

#timeline-wrap {
    margin: 150px 20%;
    top: 100;
    position: relative;
}

#timeline {
    /*float:left;*/
    padding: 0;
    height: 1px;
    width: auto;
    background-color: #aabbc4;
    position: relative;
}

#timeline-next {
    z-index: 1;
    float: right;
    padding: 0;
    margin-right: -50px;
    height: 1px;
    width: 5%;
    border-top: dashed 1px #aabbc4;
    /* background-color:;*/
    position: relative;
}

.marker {
    z-index: 1000;
    border: 1px solid #aabbc4;
    width: 25px;
    height: 25px;
    position: absolute;
    border-radius: 25px;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

.marker:hover {
    cursor: pointer;
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

.mfirst {
    top: -13px;
}

.m2 {
    top: -13px;
    left: 30%
}

.m3 {
    top: -13px;
    left: 60%
}

.m4 {
    top: -13px;
    left: 72%
}

.m5 {
    top: -13px;
    left: 85%
}

.mlast {
    border: 1px dashed #aabbc4;
    top: -13px;
    left: 100%
}

.inner-marker {
    opacity: 0;
    /*z-index:;*/
    width: 25px;
    height: 25px;
    border-radius: 25px;
    position: absolute;
}


/* BEGIN STYLES FOR TOOL TIP */

/*! Hint.css - v1.3.1 - 2013-11-23
* http://kushagragour.in/lab/hint/
* Copyright (c) 2013 Kushagra Gour; Licensed MIT */

/*-------------------------------------*\
	HINT.css - A CSS tooltip library
\*-------------------------------------*/

/**
 * HINT.css is a tooltip library made in pure CSS.
 *
 * Source: https://github.com/chinchang/hint.css
 * Demo: http://kushagragour.in/lab/hint/
 *
 * Release under The MIT License
 *
 */

/**
 * source: hint-core.scss
 *
 * Defines the basic styling for the tooltip.
 * Each tooltip is made of 2 parts:
 * 	1) body (:after)
 * 	2) arrow (:before)
 *
 * Classes added:
 * 	1) hint
 */

.hint,
[data-hint] {
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
    margin-left: 5px;
    background: #ffffff;
    /**
* tooltip arrow
*/
    /**
* tooltip body
*/
}

.hint:before,
.hint:after,
[data-hint]:before,
[data-hint]:after {
    position: absolute;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: hidden;
    opacity: 0;
    z-index: 1000000;
    pointer-events: none;
    -webkit-transition: 0.3s ease;
    -moz-transition: 0.3s ease;
    transition: 0.3s ease;
}

.hint:hover:before,
.hint:hover:after,
.hint:focus:before,
.hint:focus:after,
[data-hint]:hover:before,
[data-hint]:hover:after,
[data-hint]:focus:before,
[data-hint]:focus:after {
    visibility: visible;
    opacity: 1;
}

.hint:before,
[data-hint]:before {
    content: '';
    position: absolute;
    background: transparent;
    border: 6px solid transparent;
    z-index: 1000001;
}

.hint:after,
[data-hint]:after {
    content: attr(data-hint);
    background: #ffffff;
    color: #557688;
    padding: 8px 10px;
    font-size: 10px;
    line-height: 12px;
    white-space: nowrap;
}


/**
 * source: hint-position.scss
 *
 * Defines the positoning logic for the tooltips.
 *
 * Classes added:
 * 	1) hint--top
 * 	2) hint--bottom
 * 	3) hint--left
 * 	4) hint--right
 */

/**
 * set default color for tooltip arrows
 */

.hint--top:before {
    border-top-color: #ffffff;
}

.hint--bottom:before {
    border-bottom-color: #ffffff;
}

.hint--left:before {
    border-left-color: #ffffff;
}

.hint--right:before {
    border-right-color: #ffffff;
}


/**
 * top tooltip
 */

.hint--top:before {
    margin-bottom: -10px;
}

.hint--top:before,
.hint--top:after {
    bottom: 100%;
    left: 50%;
}

.hint--top:hover:after,
.hint--top:hover:before,
.hint--top:focus:after,
.hint--top:focus:before {
    -webkit-transform: translateY(-8px);
    -moz-transform: translateY(-8px);
    transform: translateY(-8px);
}


/*modify this value to change location of tip */

.mfirst .hint--top:after {
    margin-left: -18px;
}

.m2 .hint--top:after,
.m3 .hint--top:after,
.m4 .hint--top:after,
.m5 .hint--top:after {
    margin-left: -65px;
}

.mlast .hint--top:after {
    margin-left: -115px;
}


/**
 * bottom tooltip
 */

.hint--bottom:before {
    margin-top: -12px;
}

.hint--bottom:after {
    margin-left: -18px;
}

.hint--bottom:before,
.hint--bottom:after {
    top: 100%;
    left: 50%;
}

.hint--bottom:hover:after,
.hint--bottom:hover:before,
.hint--bottom:focus:after,
.hint--bottom:focus:before {
    -webkit-transform: translateY(8px);
    -moz-transform: translateY(8px);
    transform: translateY(8px);
}


/**
 * right tooltip
 */

.hint--right:before {
    margin-left: -12px;
    margin-bottom: -6px;
}

.hint--right:after {
    margin-bottom: -14px;
}

.hint--right:before,
.hint--right:after {
    left: 100%;
    bottom: 50%;
}

.hint--right:hover:after,
.hint--right:hover:before,
.hint--right:focus:after,
.hint--right:focus:before {
    -webkit-transform: translateX(8px);
    -moz-transform: translateX(8px);
    transform: translateX(8px);
}


/**
 * left tooltip
 */

.hint--left:before {
    margin-right: -12px;
    margin-bottom: -6px;
}

.hint--left:after {
    margin-bottom: -14px;
}

.hint--left:before,
.hint--left:after {
    right: 100%;
    bottom: 50%;
}

.hint--left:hover:after,
.hint--left:hover:before,
.hint--left:focus:after,
.hint--left:focus:before {
    -webkit-transform: translateX(-8px);
    -moz-transform: translateX(-8px);
    transform: translateX(-8px);
}


/**
 * source: hint-color-types.scss
 *
 * Contains tooltips of various types based on color differences.
 *
 * Classes added:
 * 	1) hint--error
 * 	2) hint--warning
 * 	3) hint--info
 * 	4) hint--success
 *
 */

/**
 * Error
 */

.hint--error:after {
    background-color: #b34e4d;
    text-shadow: 0 -1px 0px #592726;
}

.hint--error.hint--top:before {
    border-top-color: #b34e4d;
}

.hint--error.hint--bottom:before {
    border-bottom-color: #b34e4d;
}

.hint--error.hint--left:before {
    border-left-color: #b34e4d;
}

.hint--error.hint--right:before {
    border-right-color: #b34e4d;
}


/**
 * Warning
 */

.hint--warning:after {
    background-color: #c09854;
    text-shadow: 0 -1px 0px #6c5328;
}

.hint--warning.hint--top:before {
    border-top-color: #c09854;
}

.hint--warning.hint--bottom:before {
    border-bottom-color: #c09854;
}

.hint--warning.hint--left:before {
    border-left-color: #c09854;
}

.hint--warning.hint--right:before {
    border-right-color: #c09854;
}


/**
 * Info
 */

.hint--info:after {
    background-color: #3986ac;
    text-shadow: 0 -1px 0px #193b4d;
}

.hint--info.hint--top:before {
    border-top-color: #3986ac;
}

.hint--info.hint--bottom:before {
    border-bottom-color: #3986ac;
}

.hint--info.hint--left:before {
    border-left-color: #3986ac;
}

.hint--info.hint--right:before {
    border-right-color: #3986ac;
}


/**
 * Success
 */

.hint--success:after {
    background-color: #458746;
    text-shadow: 0 -1px 0px #1a321a;
}

.hint--success.hint--top:before {
    border-top-color: #458746;
}

.hint--success.hint--bottom:before {
    border-bottom-color: #458746;
}

.hint--success.hint--left:before {
    border-left-color: #458746;
}

.hint--success.hint--right:before {
    border-right-color: #458746;
}


/**
 * source: hint-always.scss
 *
 * Defines a persisted tooltip which shows always.
 *
 * Classes added:
 * 	1) hint--always
 *
 */

.hint--always:after,
.hint--always:before {
    opacity: 1;
    visibility: visible;
}

.hint--always.hint--top:after,
.hint--always.hint--top:before {
    -webkit-transform: translateY(-8px);
    -moz-transform: translateY(-8px);
    transform: translateY(-8px);
}

.hint--always.hint--bottom:after,
.hint--always.hint--bottom:before {
    -webkit-transform: translateY(8px);
    -moz-transform: translateY(8px);
    transform: translateY(8px);
}

.hint--always.hint--left:after,
.hint--always.hint--left:before {
    -webkit-transform: translateX(-8px);
    -moz-transform: translateX(-8px);
    transform: translateX(-8px);
}

.hint--always.hint--right:after,
.hint--always.hint--right:before {
    -webkit-transform: translateX(8px);
    -moz-transform: translateX(8px);
    transform: translateX(8px);
}


/**
 * source: hint-rounded.scss
 *
 * Defines rounded corner tooltips.
 *
 * Classes added:
 * 	1) hint--rounded
 *
 */

.hint--rounded:after {
    border-radius: 4px;
}


/**
 * source: hint-effects.scss
 *
 * Defines various transition effects for the tooltips.
 *
 * Classes added:
 * 	1) hint--bounce
 *
 */

.hint--bounce:before,
.hint--bounce:after {
    -webkit-transition: opacity 0.3s ease, visibility 0.3s ease, -webkit-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
    -moz-transition: opacity 0.3s ease, visibility 0.3s ease, -moz-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
}

.familycapsulemaindiv {
    padding-right: 0px;
    overflow: hidden;
}

.familycapsueleautoresie {
    width: 100%;
    float: left;
    white-space: nowrap;
    display: block;
    overflow: visible;
}

.familycapsueleautoresie1 {
    width: calc(100vh - 750px);
    overflow: hidden;
    overflow-y: hidden;
    overflow-x: hidden;
}

.familycapsueleautoresie .family_box,
.familycapsueleautoresie .family_box_one {
    margin-top: 11px;
    display: inline-block;
    padding-bottom: 4px;
    margin-bottom: 3px;
}

.familycapsueleautoresieoverflowdiv {
    overflow: auto;
    /*width: calc(100vh - 780px);*/
}


/*.familycapsueleautoresie .mCustomScrollBox{
    overflow: visible;
}

.familycapsueleautoresie .mCSB_container{
    overflow:visible;
}*/

.yourfamilyinfofront {
    /*margin-left: 28.6667%;*/
    padding: 2px 14px;
    overflow: visible;
    /*overflow: hidden;*/
    display: inline-block;
}

.familycapsueleautoresie img {
    position: relative;
    display: inline-block;
}

.lifestatusbox {
    right: 0;
    font-size: 11px;
    font-weight: normal;
    text-align: center;
    padding: 15px 4px;
    border-left: 1px solid #ccc;
    background: #fff;
    color: #2D2D2D;
    line-height: normal;
    min-width: 43px;
    border-radius: 4px 0 0 4px;
    height: 100%;
    position: relative;
}

.countrycapsule_contryinformation {
    overflow: auto;
    height: 100%;
}

.countrycapsule_contryinformation .cont_info {
    padding: 5px 5px 5px 0px;
}


/*.familycapsule_familytree{
    display: inline-block;
    width: 100%;
    white-space: nowrap;
    padding: 0px 20px;
}*/

.familytreecapsule_familytreemain {
    /*width:7000px;
height:7000px;*/
    padding: 0px 5px;
}

.familytreecapsule_familytreemain > div:first-child {
    font-size: 16px;
    color: #454545;
    padding-left: 10px;
}

.familycapsule_familytreecardmain {
    display: inline-block;
    white-space: nowrap;
    clear: both;
    margin-top: -20px;
}

.familycapsule_familytreecardmain .card {
    margin: 10px;
    height: 315px;
    white-space: normal;
}

.minheight125 {
    min-height: 125px;
}

.paddingtop5 {
    padding-top: 5px;
}

.eventpostbtn {
    position: relative;
    top: 0px;
    display: inline-block;
    float: right;
}

.factoidheadline {
    position: relative;
    top: -1px;
}

.sourcetext {
    padding: 4px 0px;
    position: relative;
    top: -1px;
}

.factoiddiscription {
    padding-bottom: 0px;
    padding-top: 0px;
    display: inline-block;
    margin-left: -1px;
    /*width: calc(100vh - 170px);*/
    /*width: 100%;
text-align: left;*/
}

.factoiddiscription span {
    text-align: left;
    /*display: inline-block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
margin-left: 0;
padding-left: 0;
float: left;*/
}


/*.sourcetext + .factoiddiscription span {
    margin-left: 0px;
}*/

.factoiddiscription a {
    cursor: pointer;
    margin-left: 0px;
}

.paddingright0 {
    padding-right: 0
}

.paddingleft0 {
    padding-left: 0px;
}

.paddingleftright0 {
    padding-left: 0px;
    padding-right: 0px;
}

.marginright10 {
    margin-right: 10px;
}

.horizontalwidhtincrese {
    height: 250px;
    width: calc(100% - 357px);
    overflow-x: auto;
    overflow-y: hidden;
}

.horizontalwidhtincrese1 {
    height: 250px;
    width: calc(100% - 230px);
    overflow-x: auto;
    overflow-y: hidden;
    margin-left: 20px;
    display: inline-block;
    float: right;
}

.horizontalwidhtincrese2 {
    min-height: 123px;
    width: calc(100% - 0px);
    overflow-x: auto;
    overflow-y: hidden;
    margin-left: 0px;
    display: inline-block;
    /*float: right;*/
    padding-bottom: 10px;
}

.yourfamilymemberincomedisplaymaindiv {
    padding: 0 10px;
}

.cardshorizontalwidth {
    overflow: auto;
    width: 10000px;
}

.carddetailsmain {
    white-space: nowrap;
    height: 100%;
}

.carddetailsmain1 {
    height: 247px;
    width: 208px;
    display: inline-block;
    float: left;
    overflow: hidden;
}

.yourfamilymemberincomedisplay {
    color: #000;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
}

.currentincomedetailstable .carddetailsmain1 {
    height: 147px;
    width: 221px;
}

.yourfamilymemberincomedisplaymaindiv .carddetailsmain1 {
    height: 95px;
}

.currentincomedetailstable .jobdisc {
    height: 114px;
}

.yourfamilymemberincomedisplaymaindiv .carddetailsmain1 .active_job {
    height: 70px;
}

.yourfamilymemberincomedisplaymaindiv .carddetailsmain1 .active_job > span {
    display: block;
    width: 100%;
    text-align: center;
}

.currentincomedetailstable .active_job {
    width: 221px;
}

.selfcurrentincomedetailssection .carddetailsmain2 .jobdisc {
    border-bottom-right-radius: 20px;
}

.currentincomefamilydetails .carddetailsmain div div.jobtitl:nth-child(2) .boxheading_edu.pts {
    opacity: 0.8;
}

.currentincomefamilydetails .carddetailsmain div div.jobtitl:nth-child(2) .active_job {
    border-bottom-right-radius: 20px;
    color: #2b2b2b;
    font-weight: 300;
}

.currentincomedetailstable .horizontalwidhtincrese1 {
    height: 165px;
    width: calc(100% - 240px);
    margin-left: 5px;
}

.carddetailsmain2 {
    white-space: nowrap;
    height: 100%;
    float: right;
    width: calc(100% - 0px);
}

.carddetailsmain > div {
    display: inline-block;
    white-space: normal;
}

.carddetailsmain1 > div {
    display: inline-block;
    white-space: normal;
}

.carddetailsmain2 > div {
    display: inline-block;
    white-space: normal;
    margin-right: 5px;
}

.borderright li {
    border-right: 1px solid #4672a8;
}

.borderright li:nth-child(9),
.borderright li:nth-child(10),
.borderright li:nth-child(11),
.borderright li:nth-child(12) {
    border-right: transparent;
}

.dropdown.btn-group ul {
    padding-left: 5px;
}

.settingpagepopup {
    height: calc(100vh - 50px);
    overflow-y: auto;
    overflow-x: hidden;
}

.cursorpointer {
    cursor: pointer;
}

.writeeventbox {
    padding-left: 0px;
    /*width: calc(100vh - 230px);*/
    width: 75%;
    display: inline-block;
    margin-right: 5px;
}

.writeeventbox span:first-child {
    position: relative;
    top: 5px;
}

.vocaionalcoursepopup {
    display: inline-block;
    width: 100%;
    padding: 0;
    margin: 0;
}

.vocaionalcoursepopup li {
    font-size: 16px;
    font-weight: 300;
    display: inline-block;
    float: left;
    width: 50%;
    color: #000;
    padding: 8px 10px 8px 0px;
    text-align: left;
}

.collegefieldstudylist {
    font-size: 16px;
    font-weight: 300;
    display: inline-block;
    float: left;
    width: 100%;
    color: #000;
    padding: 8px 5px 8px 1px;
    text-align: left;
    margin-bottom: 5px;
}

.loadingbackground {
    background-image: url(images/glob.jpg);
    background-color: #000;
    /*background-position: top;
  background-size: cover;*/
    background-position: left;
    /*background-position-y: 40%;*/
    background-size: auto;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    /*width: 1055px;*/
}

.loginbackground {
    background-image: url(images/glob.jpg);
    background-color: #000;
    /*background-position: top;
  background-size: cover;*/
    background-position: left;
    /*background-position-y: 40%;*/
    background-size: auto;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}

.forgotpassword {
    padding: 7px 0;
}

.loadercenter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.loadingtext {
    margin-top: 10px;
    width: 100%;
    display: block;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
}

.loadercenter .logo_img {
    text-align: center;
    margin-left: 9px;
}

.loading-logo {
    width: 60px;
    height: 60px;
    display: inline-block;
    /*background-position: 0;
animation: logo_anim 2s steps(20) infinite;*/
}

.countrycapsuleflags img {
    width: auto;
    height: 35px;
}

.countrycapsulecountrydetailsdiv {
    display: block;
    margin-top: -6px;
}

.fontsize14 {
    font-size: 14px;
}

.countrycapsulecountrydetails {
    margin-top: -2px;
}

.countrycapsulecountrydetails .continetsdetail {
    font-size: 12px;
}

.knowmorebtn {
    cursor: pointer;
    font-size: 11px;
    color: #00bcd4;
}

.characterdesignflags img {
    width: 30px;
    height: auto;
}

.characterdesignpopup {
    height: calc(100vh - 30px);
}

.characterdesignpopup .mapheight {
    height: calc(100vh - 60px);
}

.characterdesignpopup .countryname {
    padding: 10px 0px;
    font-size: 17px;
    text-align: left;
    display: inline-block;
}

.characterdesignpopup .countrylist {
    height: calc(100vh - 200px);
    overflow: auto;
}

.characterdesignpopup .gender,
.characterdesignpopup .locale {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
}

.characterdesignpopup .potentialattributesdetails {
    padding-bottom: 20px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-left: 0px;
    width: 100%;
    background: #e0e0e0;
    padding-top: 20px;
    height: calc(100vh - 425px);
}

.characterdesignpopup .potentialattributesdetails > div {
    padding-left: 0px;
    margin: 0px;
    padding-top: 0px;
    display: inline-block;
    width: 50%;
}

.characterdesignpopup .potentialattributesdetails > div > div:first-child {
    margin-bottom: 2px;
}

.localedetialsdiv {
    background: #e0e0e0;
    margin-left: 0px;
    margin-right: 0px;
    padding: 9px 5px;
}

.inputboxmarginri input[type="radio"] {
    margin-right: 5px;
}

.localedetialsdiv > div {
    display: inline-block;
}

.genderdetailsdiv {
    background: #e0e0e0;
    margin-left: 0px;
    margin-right: 0px;
    padding: 10px 5px
}

.genderdetailsdiv > div {
    display: inline-block;
}

.countrylist .political_txt {
    margin-right: 0px;
    padding: 5px;
    color: #464646;
    border-bottom: 1px solid #ccc;
    margin-top: 0px;
    display: inline-block;
    width: 100%;
}

.countrylist .political_txt span:first-child {
    margin-right: 5px;
    width: 77%;
}

.countrylist .political_txt input[type="radio"] {
    margin-right: 5px;
}

.countrylist .political_txt span.characterdesignflags {
    width: 20%;
}

.mapheight .sebm-google-map-container {
    height: calc(100vh - 80px) !important;
}

.designcharacternamelist {
    height: calc(100vh - 320px);
    overflow-y: auto;
}

.designcharacternamelist .political_txt {
    display: inline-block;
    width: 95%;
    margin-top: 0px;
    padding: 5px 5px;
}

.alert-success {
    color: #000;
}

.alert-red {
    color: #fe0a03;
}


/*Country Capsule Details CSS for New Data*/

.countrycapsuledetailstable {
    margin-top: 0px;
    padding-top: 1px;
    border-top: 2px solid #000;
}

.countrycapsuledetailstable .table {
    margin-bottom: 4px;
}

.countrycapsuledetailstable .countryflag img {
    width: auto;
    height: 15px;
}

.countrycapsuledetailstable thead,
.countrycapsuledetailstable tbody {
    display: block;
}

.countrycapsuledetailstable tbody.scrollable {
    height: calc(100vh - 480px);
    /* Just for the demo          */
    overflow-y: auto;
    /* Trigger vertical scroll    */
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.dropdown.btn-group.pbm + div + div .countrycapsule_contryinformation .countrycapsuledetailstable tbody.scrollable {
    height: calc(100vh - 530px);
}

.countrycapsuledetailstable table tr td {
    padding: 1px 5px;
    line-height: normal;
    vertical-align: middle;
    border-top: transparent;
    font-size: 11px;
    vertical-align: top;
    text-align: right;
    padding-left: 0px;
}

.countrycapsuledetailstable table tr td.heading {
    background: rgba(11, 40, 70, 0.69);
    padding: 1px 0px;
    font-weight: bold;
}

.customdivider {
    height: 5px;
}

.countrycapsuledetailstable table tr td.bold {
    font-weight: bold;
}

.countrycapsuledetailstable .table thead tr td {
    text-align: right;
}

.countrycapsuledetailstable .table thead tr td {
    text-align: right;
}

.countrycapsuledetailstable table tr td:first-child {
    text-align: left;
    padding-left: 0px;
    width: 88px;
    padding: 1px;
}

.countrycapsuledetailstable thead tr td {
    background: transparent;
    color: #fff;
    width: 155px;
}

.countrycapsuledetailstable thead tr td:first-child {
    width: 100px;
}

.countrycapsuledetailstable .table thead tr td:last-child {
    padding-right: 10px;
}

.countrycapsuledetailstable table tr td table tr td {
    width: 115px;
    text-align: right;
    padding: 1px;
    padding-right: 8px;
}

.widthincrese {
    width: 104px !important;
}

.centerdiv {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.fullscreen-bg .fullscreen-bg_video.centerdiv {
    top: 64%;
}

.beforeMainScreenImage {
    width: 100%;
    height: 100vh;
    display: none;
    padding: 0;
    margin: 0;
}

.beforeMainScreenImageDisplay {
    background: url("../assets/Main screen bg.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%;
    display: inline-block;
}

.beforeMainScreenImageDisplay1 {
    background: url("../assets/images/RL_UI_start2_bg.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%;
    display: inline-block;
}

.beforeMainScreenImage.MainScreenBackground {
    width: auto;
    height: auto;
    display: block;
}

.beforeMainScreenImage.MainScreenBackground img.beforeMainScreenImageDisplay {
    position: fixed;
}

.MainSceenInsideLogo {
    width: 129px;
    height: auto;
    margin-left: 10px;
}

.factoidpopup {
    position: absolute;
    top: 32%;
    transform: translateY(-50%) !important;
    left: 13%;
    ;
}


/*.blackbacgroundfade{
    background: rgba(0, 0, 0, 0.73);
}*/

.cursorhidden {
    cursor: none;
    pointer-events: none;
}

.fontsize11 {
    font-size: 11px !important;
}

.fontsize9 {
    font-size: 9px !important;
}

.political_txt .tooltip .tooltip-inner {
    text-align: left;
}

.potentialattributesdetails input {
    width: 100%;
}

.lifesummaryexpression {
    color: #ababab;
    font-family: 'Kalam', cursive;
    word-break: break-all;
    white-space: normal;
}


/*Finance Module New design changes css */

.finaceblockpopup {
    height: calc(100vh - 47px);
    overflow: auto;
    padding: 10px 0px;
}

.currentfinancialstatustable .table {
    margin-bottom: 0px;
    background: #fff;
}

.currentfinancialstatustable .table tbody tr td {
    font-size: 12px;
}

.currentfinancialstatustable .table tbody tr:nth-child(3) td {
    border-top: 0px;
    padding: 0 8px;
    padding-bottom: 8px;
}

.currentfinancialstatustable .table tbody tr:first-child td {
    font-weight: bold;
    color: #000;
    /* background: url(../assets/images/small_box_head.png) repeat-x; */
    border: none;
    /*background: rgb(218, 219, 222);*/
    padding: 3px 8px;
}

.currentfinancialstatustable .table tbody tr:first-child td:nth-child(2) {
    background: none;
}

.currentfinancialstatustable .table tbody tr:nth-child(2) td {
    color: #005e7e;
}

.expensesbox {
    font-size: 12px;
    color: #000;
    padding: 0;
    margin-top: 0px;
    background: #fff;
}

.expensesboxinside {
    background: transparent;
    padding: 0px;
    font-size: 12px;
    display: block;
    padding-right: 0px;
    margin-bottom: 0px;
    border-bottom: 1px solid #dddddd;
    border-right: 1px solid #ddd;
}

.expensesboxinside:nth-child(even) {
    padding-right: 0px;
}

.expensesbox div:nth-child(even).expensesboxinside {
    border-right: 0px;
}

.expensesbox div:nth-child(5).expensesboxinside {
    border-bottom: none;
}

.expensesboxinsideheadline {
    font-weight: bold;
    width: 100%;
    display: block;
    color: #000;
    /* background: url(../assets/images/small_box_head.png) repeat-x; */
    background: #fff;
    padding: 3px 10px;
    border-bottom: none;
    padding-top: 5px;
}

.currentfinancialstatustable {
    width: 49.7%;
    display: inline-block;
}

.expensesboxinsidetext {
    padding: 5px 10px;
    display: inline-block;
    background: #fff;
    width: 100%;
    color: #000;
}

.expensesboxinsidetext.expensesboxselectfield {
    min-height: 34px;
}

.expensesboxinsidetext select {
    width: 95%;
}

.totalexpensesdisplay {
    width: 100%;
    float: none;
}

.totalexpensesbtn {
    text-align: center;
    float: none;
    margin-left: 10px;
    margin-top: 7px;
    display: inline-block;
}

.totalexpensesbox {
    background: #fff;
    color: #000;
    display: inline-block;
    font-size: 12px;
    padding-bottom: 10px;
    width: 100%;
    border-top: 1px solid #ddd;
    text-align: center;
}

.investmentdetailsdiv {
    font-size: 12px;
}

.investmentmaindiv {
    background: #d2d2d2;
    padding: 10px;
}

.investmentmaindiv .boxheading_edu.pts {
    font-weight: bold;
}

.currentfinancialstatusbox {
    display: inline-block;
    padding-left: 25px;
}

.expensesboxmaindiv {
    display: inline-block;
    padding-right: 25px;
    margin-top: 25px;
}

.expensestitle {
    background: #fff;
    width: 100%;
    display: block;
    padding: 3px 10px;
    border-bottom: 1px solid #dddddd;
    color: #000;
    font-size: 12px;
}

.investmentcardmain {
    border-right: none;
    margin-right: 10px;
}

.investmentmaindiv .scrollbox_fin1 {
    padding-bottom: 10px;
    height: auto;
}

.investmentcardmain .smallcard {
    height: 130px;
}

.loanandinvestmentblock {
    padding: 0px;
}


/* New Home Screen */

.backgroundcolor {
    background-color: #000;
}

.background-image {
    background-image: url(images/RL_UI_start_bg2.jpg);
    background-position: center;
    background-size: cover;
    width: 100%;
    height: calc(100vh);
    background-repeat: no-repeat;
}

.background-image:before {
    background-color: rgb(0, 0, 0);
    content: "";
    width: 100%;
    height: calc(100vh);
    display: inline-block;
    z-index: -1;
    background-image: inherit;
    background-repeat: no-repeat;
    box-shadow: 0px 0px 20px 20px black inset;
}

.centerbox {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-block;
    top: 50%;
}

.logo {
    text-align: center;
}

.fullscreen-bg .logo {
    text-align: center;
    z-index: 80;
    /*position: fixed;*/
    /*margin-right: 15px;
  margin-top: 15px;*/
    /*right: 0px;*/
    /*left: 50%;
  transform: translateX(-50%);*/
}

.fullscreen-bg .logo img {
    /*width: 155px;
  height: auto;
  display: inline-block;
  position: relative;*/
}

.centerbox .logo img {
    width: 300px;
    height: auto;
    display: inline-block;
}

.newlogotop {
    padding-top: 20px;
}

.newlogotop img {
    width: 215px;
    height: auto;
}

.newlogotop:before {
    content: "";
    background-image: url(images/logo-line.png);
    width: 100%;
    display: inline-table;
    height: 84px;
    background-repeat: no-repeat;
    position: absolute;
    top: 20px;
    left: 0px;
    background-size: contain;
}

.newlogotop:after {
    content: "";
    background-image: url(images/logo-line.png);
    width: 100%;
    display: inline-table;
    height: 84px;
    background-repeat: no-repeat;
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
    position: absolute;
    top: 20px;
    right: 0px;
    background-size: contain;
}

/*.livealifebtn {
    text-align: center;
    margin: 5px 0 10px;
    padding: 20px 0px 20px 0;
}*/

/*.livealifebtn {
    position: absolute;
    right: 0px;
    top: 0px;
}*/

.livealifebtn {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 140px;
    bottom: 0px;
}

.livealifebtn a {
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    position: fixed;
    z-index: 2;
}

.livealifebtn:after {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    height: 1px;
    border-top: 1px solid #2f2f2f;
    z-index: 0;
    width: 100%;
    bottom: 75px;
}

.livealifebtndisparity {
    position: fixed;
}

.livealifebtn a {
    display: inline-block;
    cursor: pointer;
}

.livealifebtn img {
    width: 142px;
    height: auto;
}

.livealifebtn button:focus,
.livealifebtn button:hover {
    outline: none;
    color: transparent;
    background-color: transparent;
    background: none;
}

/*.loadingbackground .centerbox {
    top: 46%;
    width: 100%;
    left: 64%;
}*/

/*.logiscreen.centerbox {
    left: 64%;
}*/

.navigation {
    display: inline-block;
    height: auto;
    text-align: center;
    /*margin-top: 20px;*/
    /*max-width: 670px;*/
}


/*.navigation ul li:after {
    background: url(../assets/images/New-design/star.png);
    content: "";
    width: 44px;
    height: 56px;
    position: relative;
    left: 0;
    display: inline-block;
    top: 0;
    float: left;
    margin-right: 10px;
}

.navigation ul li:last-child::before {
    background: url(../assets/images/New-design/star.png);
    content: "";
    width: 44px;
    height: 56px;
    position: relative;
    float: right;
    margin-left: 10px;
}*/

.navigation li {
    padding: 0 3px;
}

.navigation li:first-child {
    padding-left: 0px;
}

.navigation li:last-child {
    padding-right: 0px;
}

.navigation li button {
    display: inline-block;
    float: right;
    padding: 0px 20px;
    color: #fff;
    position: relative;
    top: 0px;
    background: none;
    box-shadow: none;
    border: none;
    border-right: 1px solid #0fb5ce;
    font-weight: normal;
    font-size: 14px;
    text-transform: capitalize;
    border-radius: 0px;
}

.navigation li:last-child button {
    border-right: none;
}

.navigation li button:hover,
.navigation li button:focus {
    background: none;
    cursor: pointer;
    outline: none;
}

.settingpopup {
    width: 100%;
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
}

.blackbacktrans {
    background: rgba(0, 0, 0, 0.50);
}


/*===========Start Life====================*/

.overflowauto {
    overflow: auto;
}

.startlifebackground {
    background: url(../assets/image/RL_UI_start2_bg.jpg);
    background-position: center;
    background-size: cover;
    width: 100%;
    height: calc(100vh);
    background-repeat: no-repeat;
}

.startlifebackgroundnone {
    background: none;
    width: 100%;
    height: calc(100vh);
}

.startlifemaindiv {
    display: block;
    padding: 0 5px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: calc(100vh - 10px);
}

.registrationmaindiv {
    top: 48%;
    left: 52%;
}

.startlifebackground.startlifecenterdiv .startlifemaindiv {
    /*top: 64px;*/
    top: 15px;
    transform: translate(-50%, 0%);
    height: calc(100vh - 15px);
}

.startlifetopsection {
    display: inline-block;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100%;
}

.startlifetopsection .btn_sk_intro {
    min-width: 188px;
    color: #000;
}

.startlifebottomsection {
    /*margin-top: -40px;*/
    /*display: inline-block;
  height: 100%;*/
    display: inline-block;
    position: relative;
    height: calc(100vh - 110px);
}

#mapshow.startlifebottomsection {
    margin-top: 40px;
    height: calc(100vh - 160px);
    overflow: hidden;
}

#mapshow .world-container {
    height: calc(100vh - 280px) !important;
}

#regions_data_div > div > div {
    height: calc(100vh - 280px) !important;
}

#regions_data_div > div > div svg {
    height: calc(100vh - 280px) !important;
}


.maptitle {
    text-align: center;
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: bold;
    color: #0cc5df;
}

#regions_data_div > div > div svg rect {
    height: 100% !important;
}

#regions_data_div > div > div svg g > g + g {
    display: none;
}

.countrycapsulemapdiv #regions_div svg g g + g {
    display: none;
}

.startlifelogo {
    width: 45%;
    display: inline-block;
    margin-right: 15px;
    margin-top: 15px;
}

.startlifebackground.startlifecenterdiv .startlifemaindiv .startlifelogo {
    padding-top: 20px;
}

.startlifelogo img {
    width: 155px;
    height: auto;
    display: inline-block;
    position: relative;
    /*top: -35px;*/
}

.skip-btn {
    position: absolute;
    bottom: -130px;
    padding: 0px;
    z-index: 10;
}

.borndetaildiv .skip-btn {
    position: relative;
    bottom: 0px;
    padding: 0px;
    display: inline-block;
    margin-top: 0px;
    z-index: 0;
}

.skip_btnmap {
    bottom: 0px;
}

.countryinformation {
    position: relative;
    /*top: -60px;*/
    text-align: justify;
    font-size: 16px;
    /*max-height: 160px;*/
    overflow: hidden;
    color: #d5d3d6;
}

.countryinformation h3 {
    color: #02acc5;
    font-size: 30px;
    text-transform: uppercase;
    text-align: center;
    font-weight: bold;
    margin-bottom: 30px;
    border-bottom: 1px solid #5f6b77;
    padding-bottom: 30px;
}

.countryinformation p {
    text-align: center;
    line-height: normal;
    font-size: 14px;
    font-weight: normal;
}

.borndetaildiv {
    min-width: 730px;
    /*min-width: 660px;
    width: 50%;*/
    /*border-top: 1px solid #5f6b77;
    border-right: 1px solid #5f6b77;*/
    display: inline-block;
    /*position: relative;*/
    min-height: 270px;
    position: absolute;
    top: 50% !important;
    left: 50%;
    transform: translate(-50%, -50%);
}

.countryinformationmaindiv {
    min-width: 660px;
    width: 50%;
    display: inline-block;
    min-height: 210px;
    position: absolute;
    top: 50% !important;
    left: 50%;
    transform: translate(-50%, -50%);
}

.borndetailstext {
    display: inline-block;
    color: #fff;
    /*padding-top: 20px;*/
    margin-left: 0;
    z-index: 1;
    position: absolute;
    left: 0;
    top: -25px;
}

.youareborntext {
    margin-left: 0;
    text-align: center;
    margin-bottom: 15px;
}

.youareborntext span {
    display: inline-block;
    margin-right: 30px;
}

.playerborninformation {
    display: block;
    margin: 10px 0px;
}

.playerborninformation span {
    display: inline-block;
    margin-right: 30px;
}

.playerborninformation span:last-child {
    margin-right: 0px;
}

.playerborninformation span strong {
    color: #737373;
}

.borndetaildiv .borndetailstext .persondetails span.bronreligion {
    font-size: 18px;
    margin-bottom: 10px;
    border-right: none;
    font-weight: bold;
}

.borndetaildiv .borndetailstext .heading {
    font-size: 30px;
    color: #02acc5;
    display: block;
    /*text-transform: capitalize;*/
    text-transform: none;
    margin: 0px;
}

.borndetaildiv .borndetailstext .personname {
    font-size: 25px;
    font-weight: 300;
    padding: 5px 0;
    display: block;
    margin: 0px;
}

.borndetaildiv .borndetailstext .persondetails {
    font-size: 14px;
    line-height: 20px;
    font-weight: normal;
    color: #d5d3d6;
    border-top: 1px solid #5f6b77;
    min-width: 700px;
    padding: 20px;
    text-align: center;
    margin-bottom: 0px;
}

.borndetaildiv .borndetailstext .persondetails span {
    display: block;
    margin-bottom: 5px;
}

.borndetaildiv .borndetailstext .persondetails span span {
    display: inline-block;
    padding: 0 5px;
    border-right: 1px solid #fff;
}

.borndetaildiv .borndetailstext .persondetails span span:first-child {
    padding-left: 0px;
}

.borndetaildiv .borndetailstext .persondetails span span:last-child {
    border-right: none;
}

.otherreliginsdiv {
    text-align: center;
    color: #d5d3d6;
    margin: 0px 0px 15px 0px;
    border-top: 1px solid #5f6b77;
    width: 100%;
    display: inline-block;
}

.otherreliginsdiv h5 {
    font-size: 18px;
    font-weight: bold;
    margin-top: 10px;
    line-height: normal;
}

.otherreliginsdiv .religiondisplay {
    text-align: center;
    margin: 0px;
    font-size: 14px;
}

.otherreliginsdiv .religions {
    display: inline-block;
    padding: 0px 15px 0px 10px;
    margin-bottom: 10px;
    border-right: 1px solid #3e3e3e;
}

.otherreliginsdiv .religions span:last-child {
    float: right;
    margin-left: 20px;
}

.otherreliginsdiv .religions:last-child {
    border-right: none;
}

.modal-open .modal.religiondetails {
    background: rgba(0, 0, 0, 0.86);
}

.religionsdetailspopup {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
}

.religionsdetailspopup.createnloadlife {
    width: 90%;
    margin: 0;
    top: 50%;
    border: 1px solid #567caa;
}

.religionsdetailspopup.createnloadlife .modal-header {
    padding: 5px 15px;
    background: #567caa;
}

.religionsdetailspopup.createnloadlife .modal-header h4 {
    color: #fff;
}

.religionsdetailspopup.createnloadlife .relegionsiframeinformation {
    display: inline-block;
    width: 100%;
    margin: 0;
    padding: 0;
}

.religionsdetailspopup.createnloadlife .relegionsiframeinformation .iframefullheight {
    height: calc(100vh - 250px);
    width: 100%;
    border: none;
    margin: 0px;
    padding: 0px;
}

.religionsdetailspopup .modal_bg {
    background: #232323;
}

.bornimage {
    float: none;
    margin: 0 auto;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
    text-align: center;
}

.bornimage img {
    text-align: center;
    margin: 0 auto;
}

.playlifebtn {
    /*position: absolute;
  bottom: 100px;
  z-index: 1;
  text-align: center;
  width: 100%;*/
    position: absolute;
    bottom: 0px;
    z-index: 1;
    text-align: center;
    width: 100%;
}

.playlifebtn a {
    cursor: pointer;
}

.playlifebtn a img {
    position: relative;
    left: 20px;
}

.countryshowmap {
    padding-right: 0px;
    text-align: right;
}

.customtableresponsive {
    /*overflow: auto;
  height: calc(100vh - 400px);
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  min-height: 450px;*/
    /*height: calc(100vh - 230px);*/
    max-height: calc(100vh - 230px);
    position: absolute;
    width: 100vw;
    padding: 0 30px 0 10px;
    top: 40%;
    transform: translateY(-50%);
}

.customtableresponsive table {
    margin-bottom: 5px;
    background: rgba(0, 0, 0, 0.67);
}

.customtable {
    overflow: auto;
}

.knowdisparity {
    color: #0fa1ba;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    margin-top: 0px;
    padding-left: 50px;
}

.customtable > tbody > tr > td {
    border: transparent;
    color: #fff;
    font-size: 14px;
}

.customtable > tbody > tr > td {
    padding: 5px;
    line-height: normal;
    vertical-align: middle;
    border-radius: 0;
}


/*.startlifebottomsection .table.customtable tr:first-child td:nth-child(4) {
  border-left: 1px solid #0e9cb5;
}*/

.startlifebottomsection .table.customtable tr:nth-child(4) td {
    border-bottom: 1px solid rgba(14, 156, 181, 0.15);
}


/*.customtable > tbody > tr:nth-child(2) td:nth-child(1),
.customtable > tbody > tr:nth-child(3) td:nth-child(2),
.customtable > tbody > tr:nth-child(4) td:nth-child(2),
.customtable > tbody > tr:nth-child(5) td:nth-child(1),
.customtable > tbody > tr:nth-child(7) td:nth-child(2),
.customtable > tbody > tr:nth-child(8) td:nth-child(2)
 {
  border-right: 1px solid #0e9cb5;
}*/

.knowyourdisparitytable_border {
    border-left: 1px solid rgba(14, 156, 181, 0.15) !important;
}

.customtable > tbody > tr > td a {
    color: #fff;
    font-size: 14px;
}

.startlifebottomsection .legend {
    text-align: center;
    margin-bottom: 5px;
    padding-left: 80px;
}

.indicators {
    /*float: left;*/
    display: inline-block;
    margin-right: 15px;
}

.indicatorsborderred {
    width: 20px;
    display: inline-block;
    position: relative;
    top: -1px;
    height: 6px;
    background: red;
}

.indicatorsbordergreen {
    width: 20px;
    display: inline-block;
    position: relative;
    top: -1px;
    height: 6px;
    background: green;
}

.alert a {
    color: #fff;
    border-bottom: 1px solid red;
    cursor: auto;
}

.alert {
    text-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.good a {
    color: #fff;
    border-bottom: 1px solid green !important;
    cursor: auto;
}

.parametersbackground {
    /*background: #0a2133;*/
    color: #fff;
    text-align: center;
}

.parametesheading {
    color: #01bdda !important;
}

.marginbottom20 {
    margin-bottom: 20px;
}

.LoginFormmainDiv {
    position: relative;
    left: 50%;
    transform: translate(-50%);
}

.LoginFormmainDiv .form-control {
    height: 34px;
    padding: 6px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #d8d8d8;
    background-color: #000000;
    background-image: none;
    border: none;
    border-bottom: 1px solid rgb(10, 88, 99);
    border-radius: 0px;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
}

.LoginFormmainDiv .form-group .form-control::-webkit-input-placeholder {
    color: #828282;
}

.LoginFormmainDiv .form-group .form-control::-moz-placeholder {
    /* Firefox 19+ */
    color: #828282;
}

.LoginFormmainDiv .form-group .form-control:-ms-input-placeholder {
    /* IE 10+ */
    color: #828282;
}

.LoginFormmainDiv .form-group .form-control:-moz-placeholder {
    /* Firefox 18- */
    color: #828282;
}

.LoginFormmainDiv a {
    cursor: pointer;
}


/*#datashow{ display: none;}*/

.text-center {
    text-align: center;
}

.startlifebottomsection .btn_sk_intro {
    margin-top: 0px;
    color: #000;
    min-width: 239px;
    top: -20px;
    position: relative;
}

.startlifetopsection .btn_sk_intro.skip-into,
.btn_sk_intro.skip-into,
.skip-into,
.startlifebottomsection .btn_sk_intro.skip-into {
    background: #444444;
    color: #ababab;
}

.countryflag img {
    width: 42px;
    height: auto;
}

.btn_sk {
    text-shadow: none;
    color: #000;
}


/**/

/* Background Audio CSS Start */

#backgroundaudio {
    position: fixed;
    bottom: 0;
    right: 10px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    display: inline-block;
    opacity: 0.2;
    /*For sound hidden*/
    display: none;
    visibility: hidden;
}

#backgroundaudio:hover {
    opacity: 1;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

#backgroundaudio audio {
    display: inline-block;
    vertical-align: middle;
    height: 0px;
    z-index: 9998;
    font-size: 12px;
    width: 70px;
}

#backgroundaudio i {
    display: none;
}


/* Background Audio CSS END */

/* Current Income Details popup css start */

.horizontalwidhtincrese_currentincome {
    height: 158px;
    width: calc(100%);
    overflow-x: auto;
    overflow-y: hidden;
}

.selfcurrentincomedetailssection {
    display: inline-block;
    width: 100%;
    font-size: 12px;
    background: #ccc;
    margin-bottom: 20px;
}

.backgroundnone {
    background: none;
}

.selfcurrentincomedetailssection .carddetailsmain1 {
    -webkit-box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.41);
    -moz-box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.41);
    box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.41);
}

.selfcurrentincomedetailssection h1 {
    font-size: 14px;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 0px;
}

.currentincomedetailssection h1 {
    font-size: 14px;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 0px;
    margin-left: -13px;
    margin-top: 5px;
}

.currentincomedisplay {
    color: #000;
    padding-top: 5px;
    font-weight: bold;
    float: left;
    margin-left: 5px;
    font-size: 12px;
}

.selfcurrentincomedetailssection .currentincomedisplay {
    padding-top: 20px;
}

.currentincomedetailstable {
    display: inline-block;
}


/*.currentincomedetailssection {
    border-right: 1px solid #ccc;
}

.currentincomedetailssection:nth-child(even) {
    border-right: transparent;
}*/

/*.currentincomedetailssection .jobtitl {
    width: 50%;
}*/

.currentincomedetailspopup {
    padding: 0px 0px 10px 0px;
}

.currentincomedetailslink {
    position: relative;
    cursor: pointer;
    top: 3px;
}

.currentincomedetailstable .jobtitl {
    width: 222px;
    border-right: 1px solid rgba(235, 235, 235, .9);
}

.currentincomefamilydetails .carddetailsmain div div.jobtitl:nth-child(1) {
    width: 221px;
    -webkit-box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.41);
    -moz-box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.41);
    box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.41);
    height: 100%;
    margin-right: 20px;
}

.currentincomedetailstable .boxheading_edu {
    font-weight: bold;
}

.selfcurrentincomedetailssection .boxheading_edu.pts {
    width: 222px;
}

.selfcurrentincomedetailssection .carddetailsmain2 .boxheading_edu.pts {
    width: 221px;
    opacity: 0.8;
}

.currentincomefamilydetails .carddetailsmain div div.jobtitl:nth-child(1) .boxheading_edu.pts {
    width: 221px;
}

.selfcurrentincomedetailssection .carddetailsmain2 .jobdisc {
    border-bottom-right-radius: 20px;
    color: #2b2b2b;
    font-weight: 300;
}

.selfcurrentincomedetailssection .active_job {
    width: 222px;
    background: #fff;
    color: #000;
    /*-webkit-box-shadow: 10px 10px 5px -9px rgba(0,0,0,0.75);
  -moz-box-shadow: 10px 10px 5px -9px rgba(0,0,0,0.75);
  box-shadow: 10px 10px 5px -9px rgba(0,0,0,0.75);*/
}

.currentincomefamilydetails .carddetailsmain div div.jobtitl:nth-child(1) .active_job {
    color: #000;
}

.yourfamilymemberincomedisplaymaindiv .selfcurrentincomedetailssection {
    display: inline-block;
    width: 100%;
    font-size: 12px;
    background: none;
    margin-bottom: 10px;
}

.yourfamilymemberincomedisplaymaindiv .selfcurrentincomedetailssection .carddetailsmain2 > div {
    margin-right: 0px;
}

.yourfamilymemberincomedisplaymaindiv .selfcurrentincomedetailssection .carddetailsmain2 .jobtitl {
    -webkit-box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.41);
    -moz-box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.41);
    box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.41);
    width: 221px;
    min-height: 107px;
    height: 100%;
    margin-right: 5px;
}

.yourfamilymemberincomedisplaymaindiv .currentincomedetailstable .jobtitl {
    width: 221px;
    border-right: 0px;
}

.yourfamilymemberincomedisplaymaindiv .selfcurrentincomedetailssection .carddetailsmain2 .boxheading_edu.pts {
    width: 221px;
    opacity: 1;
    min-height: 32px;
    height: auto;
    padding-bottom: 5px;
    /*background-size: cover;*/
}

.yourfamilymemberincomedisplaymaindiv .selfcurrentincomedetailssection .carddetailsmain2 .jobdisc {
    border-bottom-right-radius: 0px;
    color: #2b2b2b;
    font-weight: 300;
    height: 75px;
    width: 221px;
    padding: 10px 5px;
}

.yourfamilymemberincomedisplaymaindiv .selfcurrentincomedetailssection .carddetailsmain2 .jobdisc > span {
    display: block;
    width: 100%;
    text-align: center;
    color: #000;
    font-weight: 400;
    font-size: 12px;
}

.gamebuttongroup {
    margin-bottom: 5px;
    padding-top: 5px;
}

.fullscreen-bg {
    background: #000;
    width: 100%;
    height: 100%;
    background-image: none;
}

.countrydetailsnLifesummary {
    margin-top: 22px;
    text-align: center;
    display: inline-block;
    background: rgba(11, 40, 70, 0.69);
    padding: 0;
}

.countrydetailsnLifesummary:before {
    background: url(../assets/images/band.png) top left repeat-x;
    content: "";
    width: 100%;
    height: 16px;
    background-repeat: repeat-x;
    top: -15px;
    position: absolute;
    left: 0px;
    opacity: .4;
    border-bottom-left-radius: 9px;
}

.nav-tabs > li {
    float: none;
    display: inline-block;
}

.countrydetailsnLifesummary ul.nav.navbar-nav {
    width: 100%;
    text-align: center;
}

.countrydetailsnLifesummary ul.nav.navbar-nav li {
    padding: 0px 10px;
    display: inline-block;
    float: none;
    cursor: pointer;
    border-right: 1px solid rgb(11, 40, 70);
    text-align: center;
}

.countrydetailsnLifesummary ul.nav.navbar-nav li:last-child {
    border-right: none;
}


/*.countrydetailsnLifesummary ul.nav-tabs li.active {
    pointer-events: none;
}
*/

.countrydetailsnLifesummary ul.nav.navbar-nav li span {
    font-size: 11px;
    font-weight: bold;
}

.countrydetailsnLifesummary ul.nav > li > a {
    position: relative;
    display: block;
    padding: 5px;
    font-weight: normal;
}

.countrydetailsnLifesummary ul.nav-tabs > li.active > a,
.countrydetailsnLifesummary ul.nav-tabs > li.active > a:hover,
.countrydetailsnLifesummary ul.nav-tabs > li.active > a:focus {
    color: #00bcd4;
    cursor: default;
    background-color: transparent;
    border: transparent;
    /* border-bottom: 3px solid #1f6e97; */
    font-weight: bold;
    /*text-decoration: underline;*/
    pointer-events: none;
}

.countrydetailsnLifesummary ul.nav > li > a:hover,
.countrydetailsnLifesummary ul.nav > li > a:focus {
    color: #01aec5;
    background-color: transparent;
    border: transparent;
    border-bottom: transparent;
    outline: none;
    padding: 6px;
}

.countrycapsule_sdgIndicatorsmain {
    padding: 0px 10px;
    margin-bottom: 0px;
}

.countrycapsule_sdgIndicators {
    overflow-y: auto;
    overflow-x: hidden;
    min-height: calc(100vh - 170px);
}

.countrycapsulsdgIndicatorstable {
    padding: 0px;
}

.countrycapsulsdgIndicatorstable .customdivider {
    width: 5px;
    height: 15px;
}

.countrycapsulsdgIndicatorstable .sdgicon img {
    width: 80px;
    height: auto;
    background: #fff;
}

.countrycapsulsdgIndicatorstable .countryflag img {
    width: 25px;
    height: auto;
}

.countryscoredisplay {
    display: block;
}

.countryscoredisplay ul {
    display: inline-block;
    margin-bottom: 0px;
    padding: 0px;
}

.countryscoredisplay li {
    float: left;
    display: inline-block;
    padding: 0px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    width: 50%;
    /*background: rgba(1, 52, 97, 0.45);
  border-radius: 50%;*/
}

.countryscoredisplay li span {
    width: 100%;
    display: inline-block;
}

.countrycapsulsdgIndicatorstable .countryflag img {
    width: auto;
    height: 30px;
}

.sdgicondisplay {
    margin-top: 0px;
    /*border-top: 1px solid #0b525e;*/
    padding-top: 5px;
    display: inline-block;
    width: 96%;
}

.sdgicondisplay h5 {
    text-align: center;
}

.sdgiconlist {
    display: inline-block;
    padding-left: 1px;
    position: relative;
    width: 100%;
    margin-bottom: 0px;
    margin-left: 7px;
    overflow: auto;
}

.sdgiconlist1.sdgiconlist + .sdgiconlist {
    height: calc(100vh - 415px);
}

.sdgiconlist1 {
    text-align: center;
    margin-left: 0px;
    height: auto;
}

.sdgicondisplay li {
    float: left;
    display: inline-block;
    padding: 0px 0px;
    cursor: pointer;
    pointer-events: auto;
    margin: 5px 5px;
    /*margin: calc(100vh - 717px);*/
}

.sdgiconlist1 li:first-child {
    display: block;
    width: 100%;
    padding: 0px 20px;
    pointer-events: none;
    margin: 0;
}


/*.sdgiconlist .logo-holder .tooltip.top{
    padding: 20px 20px;
    margin-top: 0px;
}*/

.sdgicondisplay li.hide {
    display: none !important;
    visibility: hidden;
}

.sdgicondisplay li.fullboxdisplay {
    position: absolute;
    left: 0px;
    top: 0px;
    padding: 5px 5px;
}


/*.logo-holder.fullboxdisplay img {
    width: 30px !important;
    height: auto;
    background: #fff;
}*/

/*.logo-holder.fullboxdisplay .text {
    display: none;
    visibility: hidden;
}*/

.sdgparametersdetails {
    display: none;
}

.sdgparametersdetails {
    display: block;
    position: relative;
    height: calc(100vh - 348px);
    overflow: hidden;
    font-size: 10px;
    margin-top: 12px;
    /*float: right;*/
}

.SDGparametesnamemaindiv {
    padding-right: 5px;
    padding-left: 0px;
    float: right;
    display: block;
    width: 100%;
    margin-top: 25px;
}

.SDGparametesnamemaindiv .closebtnSDG {
    position: relative;
    top: -25px;
    overflow: visible;
    float: right;
}

.sdgparametersdetailstable {
    padding-right: 5px;
    padding-left: 0px;
    float: right;
    display: block;
    width: 100%;
    height: 100vh;
    overflow: auto;
    margin-top: 0px;
}

.SDGparametersname {
    font-size: 14px;
    font-weight: bold;
    color: #00b8d1;
}

.sdgparametersdetails div span img {
    width: auto;
    height: 19px;
}

.SDGparametesnamemaindiv .closebtnSDG img {
    width: auto;
    height: 20px;
}

.SDGparametersdiscription {
    font-size: 11px;
    color: #fff;
    display: block;
    width: 100%;
    text-align: justify;
}

.sdgparametersdetails div {
    padding-right: 5px;
    padding-left: 3px;
}

.sdgicondisplay li img {
    width: 80px;
    height: auto;
}

.sdgicondisplay .logo-holder.fullboxdisplay img {
    width: auto;
    height: 26px;
    position: absolute;
    left: 0px;
}

.sdgiconlist1 li:first-child img {
    width: 230px;
}

.sdgicondisplay li.sdgmainicon {
    padding: 5px;
}

.sdgicondisplay li.sdgmainicon img {
    width: 69px;
    height: auto;
}

.sdgparametersshow thead,
.sdgparametersshow tbody {
    display: block;
}

.sdgparametersshow tbody.scrollable {
    height: calc(100vh - 665px);
    /* Just for the demo          */
    overflow-y: auto;
    /* Trigger vertical scroll    */
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.sdgparametersshow tr td:nth-child(2) {
    width: 50px;
}

.sdgparametersshow .countryflag img {
    width: auto;
    height: 12px;
}

.sdgparametersshow tbody tr td {
    border: transparent;
    padding: 5px;
}

.sdgparametersshow thead tr td {
    border-bottom: 1px solid #00bcd4;
    padding: 5px;
}

.sdgparametersshow tr td:first-child {
    text-align: left;
    width: 40px;
}

.sdgparametersshow tr td:nth-child(even) {
    width: 34px;
}

.sdgparametersshow tbody tr td:nth-child(even) {
    font-size: 18px;
    position: relative;
    top: -6px;
}

.sdgparametersshow tbody tr td img.SdgRed {
    background: url(../assets/sdgicon/red.png);
    width: 11px;
    height: auto;
    display: inline-block;
    background-size: cover;
    background-position: top left;
    background-repeat: no-repeat;
}

.sdgparametersshow tbody tr td img.SdgNeutral {
    background: url(../assets/sdgicon/gray.png);
    width: 11px;
    height: auto;
    display: inline-block;
    background-size: cover;
    background-position: top left;
    background-repeat: no-repeat;
}

.sdgparametersshow tbody tr td img.SdgGreen {
    background: url(../assets/sdgicon/green.png);
    width: 11px;
    height: auto;
    display: inline-block;
    background-size: cover;
    background-position: top left;
    background-repeat: no-repeat;
}

.sdgparametersshow tbody tr td img.SdgYellow {
    background: url(../assets/sdgicon/yellow.png);
    width: 11px;
    height: auto;
    display: inline-block;
    background-size: cover;
    background-position: top left;
    background-repeat: no-repeat;
}

.sdgparametersdetailstablelegendheadline {
    font-size: 12px;
    font-weight: bold;
}

.sdgparametersdetailstableindicators {
    display: inline-block;
    width: 100%;
    padding: 0px;
}

.sdgicondisplay .sdgparametersdetailstableindicators li {
    float: left;
    width: auto;
    padding: 5px 8px;
    pointer-events: none;
}

.sdgparametersdetailstableindicators li {
    padding: 5px 0px !important;
    margin: 5px 3px;
}

.sdgparametersdetails div span img {
    width: 11px;
    height: auto;
}

.sdgicondisplay .sdgparametersdetailstableindicators li span:last-child {
    position: relative;
    top: 2px;
}

.sdgparametersshow tr td:nth-child(3) {
    width: 200px;
    background: rgba(9, 70, 101, 0.45);
    font-size: 10px;
}

.sdgparametersshow thead tr td:first-child {
    width: 62px;
}

.sdgparametersshow thead tr td:nth-child(2) {
    width: 200px;
    font-size: 12px;
    text-align: center;
    font-weight: bold;
}

.sdgparametersshow thead tr td:last-child {
    width: 80px;
    text-align: right;
    background: transparent;
}

.sdgparametersshow tbody tr:first-child td:last-child {
    background: transparent;
}

.sdgparametersshow tbody tr td:last-child {
    text-align: right;
    width: 28px;
}

.logo-holder {
    position: relative;
    width: auto;
    height: auto;
    /*dimensions of image*/
}


/*.logo-holder .image,
#logo-holder .text {
    transition: opacity 0.5s ease-in-out;
}*/

/*.logo-holder .text {
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0;
    background: #fff;
    color: #000;
    font-size: 12px;
    padding: 0px;
    transform: translate(-50%, -50%);
}

.logo-holder .text .discription {
    padding: 5px 6px;
    display: inline-block;
    width: 100%;
}

.logo-holder .text .heading {
    font-size: 14px;
    padding: 5px;
    border-bottom: 1px solid #0b535e;
    width: 100%;
    display: inline-block;
    font-weight: bold;
    color: #00bed7;
}

.logo-holder:hover .image {
    opacity: 0;
}

.logo-holder:hover .text {
    opacity: 1;
    z-index: 1;
}*/

.knob_holderdiv ul {
    margin-top: 0px;
    border-bottom: 1px solid #074c60;
}

.knob_holderdiv ul li a {
    position: relative;
    display: block;
    padding: 2px 12px;
    font-weight: normal;
}

.knob_holderdiv ul li.active a {
    color: #00bcd4;
    cursor: default;
    background-color: transparent;
    font-weight: bold;
    pointer-events: none;
    border: none;
    border-radius: 0px;
}

.knob_holderdiv ul li a:hover,
.knob_holderdiv ul li a:focus,
.knob_holderdiv ul li.active a:hover,
.knob_holderdiv ul li.active a:focus {
    color: #00bcd4;
    outline: none;
    background: transparent;
    border: transparent;
    padding: 3px 13px;
}

.familycapsueleautoresie img.peticon {
    width: 35px;
    height: auto;
    vertical-align: bottom;
}

.startlifebottomsection .map-container {
    height: calc(100vh - 400px) !important;
}

.countrycapsulemapdiv {
    overflow: hidden;
    height: 195px;
    width: 100%;
    margin-bottom: 0px;
}

.indication.align_bot ul {
    padding-left: 16px;
}

.overflowvisible {
    overflow: visible;
}

.skipbtnformap {
    margin-top: 15px;
}

.skipbtnformap .btn {
    width: auto;
    max-height: 30px;
    padding: 5px 15px;
}

.investmentcardmain input {
    color: #000;
}

.investmentcardmain input::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    font-size: 10px;
    color: #9c9c9c;
}

.investmentcardmain input::-moz-placeholder {
    /* Firefox 19+ */
    font-size: 10px;
    color: #9c9c9c;
}

.investmentcardmain input:-ms-input-placeholder {
    /* IE 10+ */
    font-size: 10px;
    color: #9c9c9c;
}

.investmentcardmain input:-moz-placeholder {
    /* Firefox 18- */
    font-size: 10px;
    color: #9c9c9c;
}

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


/*PET CSS*/

.petnote {
    font-size: 12px;
    text-align: center;
    display: block;
    width: 100%;
    margin: 5px 0;

}

.petlist {
    text-align: center;
    width: 100%;
    float: none;
    display: inline-block;
    padding: 0;
    margin: 0 auto;
    margin-top: 15px;
}

.petlist .petdiv {
    padding: 0 10px;
    font-size: 16px;
    display: inline-block;
}

.petlist .petnamediv {
    /*padding: 5px 15px;*/
    font-size: 16px;
    display: inline-block;
    float: none;
}

.petlist .perlistname {
    padding: 6px 20px;
    font-size: 16px;
    display: inline-block;
    min-width: 135px;
    float: left;
    text-align: left;
}




.petdiv {
    margin: 0px 0px 10px 0px;
    display: inline-block;
    text-align: center;
}

.petdiv label {
    padding: 0px 0px;
    font-weight: normal;
    margin: 0px;
    cursor: pointer;
}

.petdiv label span {
    width: 100%;
    text-align: center;
    display: inline-block;
    margin-top: 5px;
}

.petdiv label div.petlabeldiv:hover {
    /*border-color: #000;
    background-color: #fff;*/
}

.petdiv input {
    /*position: absolute;
    top: 20px;
    z-index: -9999;*/
    display: none;
}

.petdiv .petlabeldiv {
    width: 120px;
    height: 120px;
    display: inline-block;
    padding: 5px;
    text-align: center;
    font-size: 14px;
    /*background-color: rgba(255, 255, 255, 0.5490196078431373);*/
}

.petdiv input:checked + .petlabeldiv,
.petdiv label div.petlabeldiv:hover {
    /*background-color: #fff;*/
    color: #000;
    font-weight: bold;
    /*border: 1px solid #07447b;*/
    /*background-color:#07447b;
    color:#fff;*/
    /*-webkit-box-shadow: 3px 3px 1px 0px rgba(0,0,0,0.09);
    -moz-box-shadow: 3px 3px 1px 0px rgba(0,0,0,0.09);
    box-shadow: 3px 3px 1px 0px rgba(0,0,0,0.09);*/
}



.petimagediv img {
    width: 80px;
    height: auto;
    float: none;
    text-align: center;
    margin: 0 auto;
}

.petimagediv img.dog {
    background: url(../assets/images/peticon/dog.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.petimagediv img.cat {
    background: url(../assets/images/peticon/cat.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.petimagediv img.bird {
    background: url(../assets/images/peticon/bird.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.petimagediv img.fish {
    background: url(../assets/images/peticon/fish.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.petimagediv img.mouse {
    background: url(../assets/images/peticon/mice.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}



.petdiv input:checked + .petlabeldiv img.dog,
.petdiv label div.petlabeldiv:hover img.dog {
    background: url(../assets/images/peticon/dog-select.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.petdiv input:checked + .petlabeldiv img.cat,
.petdiv label div.petlabeldiv:hover img.cat {
    background: url(../assets/images/peticon/cat-select.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.petdiv input:checked + .petlabeldiv img.bird,
.petdiv label div.petlabeldiv:hover img.bird {
    background: url(../assets/images/peticon/bird-select.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.petdiv input:checked + .petlabeldiv img.fish,
.petdiv label div.petlabeldiv:hover img.fish {
    background: url(../assets/images/peticon/fish-select.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.petdiv input:checked + .petlabeldiv img.mouse,
.petdiv label div.petlabeldiv:hover img.mouse {
    background: url(../assets/images/peticon/mice-select.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.petbtn {
    margin-top: 15px;
}

.filterforjob {
    /*margin-left: 20px;*/
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.filterforjoblabel {
    color: #07447b;
    font-weight: normal;
}

.simple-switch-input:checked ~ .simple-switch.dark ~ span {
    color: #012b51;
    font-weight: bold;
}

.tooltipindication .tooltip-inner {
    font-size: 11px;
}

.tooltipindication ul li:first-child .tooltip.right {
    top: -10px !important;
}


/* Factoid for Lover, Marrage and partner search popup */

.factoidtextdetails {
    width: 100%;
    text-align: left;
    display: inline-block;
    text-align: center;
}

.factoidpersontextdetails {
    display: inline-block;
    text-align: center;
    width: 100%;
    margin-top: 10px;
}

.factoidpersontextdetails h5 {
    display: inline-block;
}

.factoidpersontextdetails span {
    display: inline-block;
    margin-left: 10px;
    font-weight: 500;
    font-size: 1.4rem;
    color: #00dbf9;
}

.factoidpersontextdetails ul {
    /*display: inline-block;*/
    padding-left: 0px;
    height: auto;
    border: 0;
    background: #333;
    margin: 0 0.1rem 0.1rem 0;
    width: 71%;
  text-align: center;
  margin: auto;
}

.factoidpersontextdetails ul li {
    float: left;
  padding: 5px 20px;
  min-width: 320px;
  font-size: 0.9rem;
  text-align: left;
  color: #a3a3a3;
  font-weight: 500;
  height: auto;
  border: 0;
  background: #333;
  margin: 0 0.1rem 0.1rem 0;
}

.positionrelative {
    position: relative;
    padding: 0px;
    background: transparent;
}

.eventboxmainslider {
    background: #fff;
    margin-bottom: 0px;
}

.sdgseleactiondiv {
    display: inline-block;
    z-index: 1;
    padding-left: 0px;
    background: #ececec;
    border-top: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
    width: 100%;
    text-align: center;
    min-height: 80px;
}

.sdgseleactiondiv ul {
    top: -23px;
}

.EventSDGiconform ul:nth-child(2) {
    top: -18px;
}

.sdgseleactiondiv ul.sdglistingicon {
    display: inline-block;
    float: left;
    top: -7px;
    position: relative;
    left: 10px;
}

.sdgseleactiondiv ul:first-child {
    top: 11px;
    display: inline-block;
    width: 9%;
    padding-left: 0px;
}

.EventSDGiconform {
    display: inline-block;
    width: 90%;
    top: 11px;
    position: relative;
}

.sdgseleactiondiv p {
    font-weight: bold;
    display: inline-block;
    width: 100%;
    height: 20px;
    margin-bottom: 16px;
    text-align: center;
    color: #656565;
}

.sdglisting {
    display: inline-block;
    margin-bottom: 0px;
    padding: 0px;
    top: 2px;
    position: relative;
}

.sdgli {
    display: inline-block;
    float: left;
    padding: 0px 7px;
}

.sdgli img {
    width: auto;
    height: 22px;
    display: inline-block;
    background: transparent;
    border: transparent;
    box-shadow: none;
    /*background-size: cover !important;*/
    background-repeat: no-repeat !important;
}

.EventSDGiconform ul:nth-child(2) .sdgli img {
    height: 33px;
}

.sdgseleactiondiv ul:first-child li.sdgli img {
    height: auto;
    position: relative;
    /*top: -5px;*/
}

.sdglistingicon .sdgli img {
    height: 40px;
}

.sdgicon1 img {
    background: url(../../assets/sdgicon/001.svg);
}

.sdgicon2 img {
    background: url(../../assets/sdgicon/002.svg);
}

.sdgicon3 img {
    background: url(../../assets/sdgicon/003.svg);
}

.sdgicon4 img {
    background: url(../../assets/sdgicon/004.svg);
}

.sdgicon5 img {
    background: url(../../assets/sdgicon/005.svg);
}

.sdgicon6 img {
    background: url(../../assets/sdgicon/006.svg);
}

.sdgicon7 img {
    background: url(../../assets/sdgicon/007.svg);
}

.sdgicon8 img {
    background: url(../../assets/sdgicon/008.svg);
}

.sdgicon9 img {
    background: url(../../assets/sdgicon/009.svg);
}

.sdgicon10 img {
    background: url(../../assets/sdgicon/010.svg);
}

.sdgicon11 img {
    background: url(../../assets/sdgicon/011.svg);
}

.sdgicon12 img {
    background: url(../../assets/sdgicon/012.svg);
}

.sdgicon13 img {
    background: url(../../assets/sdgicon/013.svg);
}

.sdgicon14 img {
    background: url(../../assets/sdgicon/014.svg);
}

.sdgicon15 img {
    background: url(../../assets/sdgicon/015.svg);
}

.sdgicon16 img {
    background: url(../../assets/sdgicon/016.svg);
}

.sdgicon17 img {
    background: url(../../assets/sdgicon/017.svg);
}

.sdgli .btn.btn-primary {
    background: transparent;
    border: transparent;
    text-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    margin: 0;
    padding: 0;
}

.sdgli input[type="checkbox"]:checked + .sdgicon1 img {
    background: #1b2756;
    border-radius: 0;
    background: url(../../assets/sdgicon/001-hover.svg);
    background-size: cover;
    background-position: left top;
}

.sdgli input[type="checkbox"]:checked + .sdgicon2 img {
    background: #1b2756;
    border-radius: 0;
    background: url(../../assets/sdgicon/002-hover.svg);
    background-size: cover;
    background-position: left top;
}

.sdgli input[type="checkbox"]:checked + .sdgicon3 img {
    background: #1b2756;
    border-radius: 0;
    background: url(../../assets/sdgicon/003-hover.svg);
    background-size: cover;
    background-position: left top;
}

.sdgli input[type="checkbox"]:checked + .sdgicon4 img {
    background: #1b2756;
    border-radius: 0;
    background: url(../../assets/sdgicon/004-hover.svg);
    background-size: cover;
    background-position: left top;
}

.sdgli input[type="checkbox"]:checked + .sdgicon5 img {
    background: #1b2756;
    border-radius: 0;
    background: url(../../assets/sdgicon/005-hover.svg);
    background-size: cover;
    background-position: left top;
}

.sdgli input[type="checkbox"]:checked + .sdgicon6 img {
    background: #1b2756;
    border-radius: 0;
    background: url(../../assets/sdgicon/006-hover.svg);
    background-size: cover;
    background-position: left top;
}

.sdgli input[type="checkbox"]:checked + .sdgicon7 img {
    background: #1b2756;
    border-radius: 0;
    background: url(../../assets/sdgicon/007-hover.svg);
    background-size: cover;
    background-position: left top;
}

.sdgli input[type="checkbox"]:checked + .sdgicon8 img {
    background: #1b2756;
    border-radius: 0;
    background: url(../../assets/sdgicon/008-hover.svg);
    background-size: cover;
    background-position: left top;
}

.sdgli input[type="checkbox"]:checked + .sdgicon9 img {
    background: #1b2756;
    border-radius: 0;
    background: url(../../assets/sdgicon/009-hover.svg);
    background-size: cover;
    background-position: left top;
}

.sdgli input[type="checkbox"]:checked + .sdgicon10 img {
    background: #1b2756;
    border-radius: 0;
    background: url(../../assets/sdgicon/010-hover.svg);
    background-size: cover;
    background-position: left top;
}

.sdgli input[type="checkbox"]:checked + .sdgicon11 img {
    background: #1b2756;
    border-radius: 0;
    background: url(../../assets/sdgicon/011-hover.svg);
    background-size: cover;
    background-position: left top;
}

.sdgli input[type="checkbox"]:checked + .sdgicon12 img {
    background: #1b2756;
    border-radius: 0;
    background: url(../../assets/sdgicon/012-hover.svg);
    background-size: cover;
    background-position: left top;
}

.sdgli input[type="checkbox"]:checked + .sdgicon13 img {
    background: #1b2756;
    border-radius: 0;
    background: url(../../assets/sdgicon/013-hover.svg);
    background-size: cover;
    background-position: left top;
}

.sdgli input[type="checkbox"]:checked + .sdgicon14 img {
    background: #1b2756;
    border-radius: 0;
    background: url(../../assets/sdgicon/014-hover.svg);
    background-size: cover;
    background-position: left top;
}

.sdgli input[type="checkbox"]:checked + .sdgicon15 img {
    background: #1b2756;
    border-radius: 0;
    background: url(../../assets/sdgicon/015-hover.svg);
    background-size: cover;
    background-position: left top;
}

.sdgli input[type="checkbox"]:checked + .sdgicon16 img {
    background: #1b2756;
    border-radius: 0;
    background: url(../../assets/sdgicon/016-hover.svg);
    background-size: cover;
    background-position: left top;
}

.sdgli input[type="checkbox"]:checked + .sdgicon17 img {
    background: #1b2756;
    border-radius: 0;
    background: url(../../assets/sdgicon/017-hover.svg);
    background-size: cover;
    background-position: left top;
}

/* .extramodificationforsdgicon {
    position: relative;
    height: 50px;
    padding-left: 10px;
    padding-right: 10px;
} */

.expressiondiv {
    padding-top: 0px;
    padding-right: 0px;
}


/* Obituary Section */

.obituarypopup {
    top: 0;
    left: 0;
    width: 95%;
    overflow: hidden;
    margin: 30px 0px 0px 30px;
}

.obituarytextpart {
    max-height: calc(100vh - 100px);
    overflow: auto;
    background: #000;
    padding: 10px;
}

.gamesummerybtn {
    text-align: center;
    margin: 10px 0;
}

.factoidactionmaindiv {
    padding: 10px;
}

.actionimagefactoid {
    position: relative;
    top: 8px;
}

.countrycapsuledetailstable .mCSB_inside > .mCSB_container {
    margin-right: 8px;
}

.countrycapsuledetailstable .mCSB_scrollTools .mCSB_draggerContainer {
    left: 10px;
}

.familycapsueleautoresieoverflowdiv .mCSB_horizontal.mCSB_inside > .mCSB_container {
    margin-bottom: 4px;
    overflow: auto;
    min-height: 80px;
}


/* Feedback From */

/* ================= Essential styles ================= */

.padding-left-0 {
    padding-left: 0px;
}

.nopadding {
    padding: 0px;
}

.padding_left_10 {
    padding-left: 10px
}

.pointer {
    cursor: pointer;
}


/* ================= END Essential styles ================= */

.customnavbar {
    background: #fff;
    min-height: 120px;
    margin-bottom: 0px;
    border-bottom: 1px solid #ccc;
}

.navbar-header {
    border-right: 2px solid #ccc;
}

.navbar-brand {
    height: 120px;
}

.customsidebar {
    height: calc(100vh - 199px);
    padding-top: 40px;
    /* width: 315px; */
    border-right: 2px solid #ccc;
    padding-left: 20px;
    padding-right: 0px;
    background: #fff;
    display: inline-block;
    position: relative;
    float: left;
    top: 199px;
}

.customsidebar .nav > li {
    position: relative;
    display: block;
    border-top: 1px solid #ccc;
}

.customsidebar .nav > li a {
    color: #337ab7;
    font-size: 13px;
    font-weight: bold;
}

.customsidebar .nav > li:last-child {
    border-bottom: 1px solid #ccc;
}

.customsidebar .nav-sidebar > .active > a,
.customsidebar .nav-sidebar > .active > a:hover,
.customsidebar .nav-sidebar > .active > a:focus {
    color: #Ccc;
    background-color: transparent;
}

.customsidebar .nav > li.active:before {
    content: "";
    background-image: url(../../assets/images/arrow.jpg);
    width: 18px;
    height: 32px;
    position: absolute;
    right: 3px;
    top: 3px;
    z-index: 261;
    display: inline-block;
}

.gamesummarytext {
    padding: 1px 0px;
    text-align: center;
    background: #ccc;
    display: block;
    width: 100%;
    clear: both;
}

.gamesummarytext h4 {
    color: #000;
    padding: 5px;
    margin-bottom: 0px;
}

.photoofregisteruser {
    padding-top: 22px;
    display: inline-block;
}

.persondetailsdiv {
    padding-left: 10px;
    padding-right: 0px;
    padding-bottom: 4px;
    color: #000
}

.persondetailsdiv h4 {
    color: #09bdd1;
    font-weight: normal;
}

.persondetailsdiv div p:first-child {
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 0px;
}

.bottomscreen {
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: 0px;
}

.main {
    padding: 10px 15px 10px 15px;
    top: calc(100vh - 706px);
    background: #ececec;
    height: calc(100vh - 199px);
    overflow: auto;
}

.maintextdiscription {
    text-align: justify;
}

.formpadding {
    padding: 0px 15px;
}

.customformtext {
    border-radius: 0px;
    border-color: #000;
}

.radiobtngroup {
    position: relative;
    padding: 6px 0px;
}

.customfrom .form-group {
    min-height: 74px;
}

.file {
    visibility: hidden;
    position: absolute;
}


/*.familycapsueleautoresieoverflowdiv .mCSB_horizontal.mCSB_inside > .mCSB_container{
    margin-bottom: 5px;
}
*/

.zindex1 {
    z-index: 1;
}


/*Load Existing Life */

.loadexistinglifelogo img {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
    max-width: 215px;
}

.loadexistinglifeheading {
    font-size: 20px;
    text-align: center;
    font-weight: bold;
    margin-bottom: 20px;
    color: #0fabc5;
}

.loadexistinglife {
    max-height: calc(100vh - 430px);
    max-height: calc(100vh - 250px);
    overflow: auto;
    margin-bottom: 20px;
}

.loadexistinglife a:hover,
.loadexistinglife a:active {
    color: #fff;
}

.loadexistinglifetable tbody tr:nth-of-type(odd) {
    background: transparent;
    background-color: transparent;
}

.loadexistinglifetable tbody tr td {
    border-top: 1px solid #525252;
}

.loadexistinglifetable thead tr th {
    border-bottom: 1px solid rgba(221, 221, 221, 0.35);
}

.loadexistinglifetable tbody tr:first-child td {
    border-top: none;
}

/*NEW CSS FOR FIXED HEADER*/

.fixed_headers th,
.fixed_headers td {
    padding: 5px;
    text-align: left;
}

.fixed_headers td:nth-child(1),
.fixed_headers th:nth-child(1) {
    /*min-width: 330px;*/
    width: 44%;
}

.fixed_headers td:nth-child(2),
.fixed_headers th:nth-child(2),
.fixed_headers td:nth-child(3),
.fixed_headers th:nth-child(3) {
    width: 70px;
}

.fixed_headers td:nth-child(4),
.fixed_headers th:nth-child(4) {
    /*min-width: 290px;*/
    width: 33%;
}

.fixed_headers td:nth-child(5),
.fixed_headers th:nth-child(5) {
    width: 60px;
}

.fixed_headers thead tr {
    display: block;
    position: relative;
}

.fixed_headers tbody {
    display: block;
    overflow: auto;
    width: 100%;
    height: calc(100vh - 400px);
}



.fixed_headers1 th,
.fixed_headers1 td {
    padding: 5px;
    text-align: left;
}

.fixed_headers1 td:nth-child(1),
.fixed_headers1 th:nth-child(1) {
    min-width: 270px;
}

.fixed_headers1 td:nth-child(2),
.fixed_headers1 th:nth-child(2),
.fixed_headers1 td:nth-child(3),
.fixed_headers1 th:nth-child(3) {
    width: 60px;
}

.fixed_headers1 td:nth-child(4),
.fixed_headers1 th:nth-child(4) {
    min-width: 270px;
}

.fixed_headers1 td:nth-child(5),
.fixed_headers1 th:nth-child(5),
.fixed_headers1 td:nth-child(6),
.fixed_headers1 th:nth-child(6),
.fixed_headers1 td:nth-child(7),
.fixed_headers1 th:nth-child(7),
.fixed_headers1 td:nth-child(8),
.fixed_headers1 th:nth-child(8),
.fixed_headers1 td:nth-child(9),
.fixed_headers1 th:nth-child(9),
.fixed_headers1 td:nth-child(10),
.fixed_headers1 th:nth-child(10) {
    width: 130px;
}



.fixed_headers1 thead tr {
    display: block;
    position: relative;
}

.fixed_headers1 tbody {
    display: block;
    overflow: auto;
    width: 100%;
    height: calc(100vh - 350px);
}

/* END NEW CSS FOR FIXED HEADER */

.playbtn i {
    font-size: 20px;
}

.backbtnloadexistingpage {
    display: inline-block;
    float: left;
    position: relative;
    top: 5px;
    cursor: pointer;
    z-index: 1;
    left: 0px;
}

.backbtnloadexistingpage i {
    position: relative;
    top: 3px;
    margin-right: 5px;
}

.sdgiconselected {
    padding: 0px;
    display: block;
    min-height: 25px;
    margin-top: 5px;
    border-top: 1px solid rgba(204, 204, 204, 0.21);
}

.sdgiconselected li {
    float: right;
}

.sdgiconselected p {
    color: #fff;
    font-size: 10px;
    text-align: left;
}

.sdgiconselected img {
    width: 20px;
    height: auto;
    float: right;
}

.sdgiconselected .sdgicon1 img {
    background: url(../../assets/sdgicon/001-hover.svg);
}

.sdgiconselected .sdgicon2 img {
    background: url(../../assets/sdgicon/002-hover.svg);
}

.sdgiconselected .sdgicon3 img {
    background: url(../../assets/sdgicon/003-hover.svg);
}

.sdgiconselected .sdgicon4 img {
    background: url(../../assets/sdgicon/004-hover.svg);
}

.sdgiconselected .sdgicon5 img {
    background: url(../../assets/sdgicon/005-hover.svg);
}

.sdgiconselected .sdgicon6 img {
    background: url(../../assets/sdgicon/006-hover.svg);
}

.sdgiconselected .sdgicon7 img {
    background: url(../../assets/sdgicon/007-hover.svg);
}

.sdgiconselected .sdgicon8 img {
    background: url(../../assets/sdgicon/008-hover.svg);
}

.sdgiconselected .sdgicon9 img {
    background: url(../../assets/sdgicon/009-hover.svg);
}

.sdgiconselected .sdgicon10 img {
    background: url(../../assets/sdgicon/010-hover.svg);
}

.sdgiconselected .sdgicon11 img {
    background: url(../../assets/sdgicon/011-hover.svg);
}

.sdgiconselected .sdgicon12 img {
    background: url(../../assets/sdgicon/012-hover.svg);
}

.sdgiconselected .sdgicon13 img {
    background: url(../../assets/sdgicon/013-hover.svg);
}

.sdgiconselected .sdgicon14 img {
    background: url(../../assets/sdgicon/014-hover.svg);
}

.sdgiconselected .sdgicon15 img {
    background: url(../../assets/sdgicon/015-hover.svg);
}

.sdgiconselected .sdgicon16 img {
    background: url(../../assets/sdgicon/016-hover.svg);
}

.sdgiconselected .sdgicon17 img {
    background: url(../../assets/sdgicon/017-hover.svg);
}

.nodataSDGindicators {
    text-align: center;
    font-size: 12px;
    margin-top: 15px;
}

.action-position .modal-open .modal {
    overflow: visible;
}

.clicknoevent {
    cursor: default;
    pointer-events: none;
}


/*End Screen Design */

.endscreen {
    bottom: 10px;
}

.endscreendesign li {
    padding-top: 0px;
    vertical-align: middle;
    top: 15px;
}

.endscreendesign > li > span {
    display: block;
    font-size: 11px;
    font-weight: bold;
}

.endscreendesign .age_btn {
    padding: 0px 5px;
    margin: -43% 11% 0% 5%;
    position: relative;
}

.endscreendesign .age_btn .agetxt {
    position: absolute;
    font-size: 20px;
    width: 120px;
    line-height: 15px;
    color: #143834;
    margin-bottom: 0px;
    top: 40px;
    text-align: center;
    left: 21px;
    margin: 0;
}

.endscreendesign .age_btn span {
    font-size: 12px;
    font-weight: bold;
    position: absolute;
    top: 90px;
    left: 44px;
    color: #000;
}

.screenwindow {
    position: relative;
    top: 10px;
}

.endscreenheader img {
    width: auto;
    height: 20px;
}

.obituarybox {
    display: inline-block;
    width: 100%;
    /*height: 100%;*/
    height: calc(100vh - 334px);
    overflow: auto;
    color: #fff;
    background: transparent;
    padding: 10px 21px;
}

.obituaryboxscroll {
    height: calc(100vh - 505px);
    overflow: auto;
    padding-right: 30px;
}

.obituarybox p {
    color: #fff;
    margin-bottom: 10px;
    text-align: justify;
    line-height: normal;
}

.obituarybox hr {
    border-color: #000;
    margin-bottom: 10px;
    margin-top: 10px;
}

.GameSummaryLiveIndicatorsmainDiv,
.GameSummaryLiveEventsmainDiv {
    padding-left: 0px;
}

.GameSummaryLiveIndicatorsmainDiv {
    padding-right: 0px;
    height: calc(100vh - 506px);
    overflow: auto;
    padding: 0px 5px;
}

.GameSummaryHeadline {
    color: #00bcd4;
    font-size: 18px;
    display: block;
    background: transparent;
    padding: 5px 0px;
}

.GameSummaryLifeEventStage {
    color: #fff;
    border-bottom: 1px solid #4e4e4e;
    font-size: 12px;
    width: 100%;
    display: block;
    padding: 5px 0px;
    font-weight: bold;
    /* border-top: 1px solid #00bcd4; */
    margin-bottom: 5px;
    margin-top: 5px;
    background: transparent;
}

.GameSummaryLiveEventsmainDiv .GameSummaryLifeEventRepeat {
    margin-bottom: 10px;
}

.GameSummaryLiveEventsmainDiv .GameSummaryLifeEventRepeat:last-child {
    border-bottom: transparent;
    margin-bottom: 0px;
}

.GameSumaryLifeEvents {
    padding-left: 25px;
    color: #c1c1c1;
    list-style-type: circle;
}

.GameSumaryLifeEvents li {
    margin-bottom: 5px;
}

.GameSumaryLifeEvents .sdgiconselected li {
    float: none;
}

.GameSumaryLifeEvents .expressionbox.exp_div {
    padding-left: 0px;
    margin-bottom: 10px;
    margin-top: 0px;
    text-decoration: underline;
    padding-bottom: 5px;
    width: 100%;
    display: block;
}

.GameSumaryLifeEvents .expressionbox.exp_div span {
    margin-left: 0px;
    text-decoration: none !important;
    display: inline-block;
}

.GameSumaryLifeEvents .expressionbox.exp_div span:before {
    content: ":";
    margin-right: 10px;
}

.GameSumaryLifeEvents .exp_div {
    background-size: contain;
}

.GameSummaryLiveIndicatorsImageDiv {
    margin-top: 0px;
    width: 99%;
    margin-left: 5px;
    float: left;
    padding-right: 5px;
}

.GameSummaryLiveIndicatorsImageDiv > div {
    overflow: auto;
}

.GameSummaryLiveIndicatorsImageDiv .GameSummaryLifeEventStage {
    font-size: 14px;
    display: block;
    margin-bottom: 5px;
    width: 100%;
}

.GameSummaryLiveIndicatorsImageDiv img {
    width: 100%;
    height: auto;
    padding: 3px 5px;
    background: #073765;
}

.EndScreenForm {
    margin-top: 20px;
}

.GameSummaryLiveIndicatorsImageDiv .EndScreenForm {
    width: 46%;
    margin-left: 12px;
    display: inline-block;
    margin-top: 0px;
}

.EndScreenForm textarea {
    resize: none;
    overflow: auto;
}

.EndScreenCenterBtn {
    text-align: center;
    margin-top: 5px;
}

.GameSummaryLiveIndicatorsmainDiv .EndScreenForm {
    margin-top: 5px;
    width: 100%;
    display: inline-block;
    margin-bottom: 0px;
}

.obituarybox form {
    color: #fff;
    font-size: 12px;
}

.feedbackform {
    color: #fff;
    font-size: 12px;
    margin-top: 20px;
    height: calc(100vh - 400px);
    overflow: auto;
}

.feedbackform .form-group {
    padding-right: 0px;
}

.feedbackform input {
    padding: 6px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #d8d8d8;
    background-color: #1e1e1e;
    background-image: none;
    border: 1px solid rgb(10, 88, 99);
    border-radius: 0px;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
}

.bugreportnote {
    margin-top: 10px;
}

.obituarybox textarea {
    min-height: 35px;
    padding: 6px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #d8d8d8;
    background-color: #1e1e1e;
    background-image: none;
    border: 1px solid rgb(10, 88, 99);
    border-radius: 0px;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
    resize: vertical;
}

.obituarybox .form-check-label {
    margin-right: 10px;
}

.emailsendfield {
    display: inline-block;
    width: 100%;
    margin-top: 5px;
}

.feedbackbtn {
    display: inline-block;
    width: 100%;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
}

.obituarybox .form-check-label:last-child {
    margin-right: 0px;
}

.downloadbtnmaindiv {
    display: block;
    position: absolute;
    top: 0;
    z-index: 1000000000;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: rgba(18, 33, 59, 0.87);
    width: 100%;
    height: 100%;
}

.downloadbtn {
    height: auto;
    display: inline-block;
    text-align: center;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    background: #fff;
    padding: 20px;
    border: 1px solid #00bad1;
}

.downloadbtn .btn {
    margin-right: 30px;
}

.endscreensavebtn {
    margin-top: 7px;
    padding-right: 0px;
}

.endscreenbtn {
    color: #000;
    cursor: pointer;
    font-size: 12px;
    padding: 0px 10px;
    font-weight: bold;
    float: right;
    background: #00bcd4;
}

.action_heading div span:first-child.endscreenbtn {
    border-left: transparent;
    margin-right: 10px;
    border-right: 1px solid #00bcd4;
    padding-right: 7px;
}


/*.action_heading div span:last-child.endscreenbtn {
    padding-left: 0px;
    padding-right: 0px;
}
*/

.GameSummaryGraph {
    min-width: 300px;
    max-width: 800px;
    display: inline-block;
    overflow: auto;
}

.GameSummaryLiveEventsmainDiv {
    height: calc(100vh - 495px);
    overflow: auto;
    margin-bottom: 20px;
    padding: 10px 0px;
}

.gamesummarytabpannel {
    border-bottom-color: #03bbd4;
}

.gamesummarytabpannel.nav-tabs > li.active > a,
.gamesummarytabpannel.nav-tabs > li.active > a:hover,
.gamesummarytabpannel.nav-tabs > li.active > a:focus {
    color: #03bbd4;
    cursor: default;
    background-color: transparent;
    border: 1px solid #03bbd4;
    border-bottom-color: black;
    outline: none;
    pointer-events: none;
}

.gamesummarytabpannel.nav-tabs > li > a:hover,
.gamesummarytabpannel.nav > li > a:hover,
.gamesummarytabpannel.nav > li > a:focus {
    border: none;
    border-color: #04bad4 #04bad4 #000;
    background-color: transparent;
    color: #04bad4;
    padding: 10px 16px;
}

.gamesummarytabpannel.nav-tabs > li > a {
    font-size: 14px;
}

.GameSummarysdgcommentsmainDiv {
    height: calc(100vh - 610px);
}

.GameSummaryInputbox {
    padding: 0px;
}

.writealetterdiv {
    background-repeat: no-repeat;
    background-size: cover;
    height: 94%;
    font-size: 24px;
    overflow: hidden;
    padding: 5px;
    font-family: Bienchen SAS;
    padding-left: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    background: transparent;
    position: relative;
}

.writealetterdiv:before {
    background: url(../assets/images/paper2.png);
    content: "";
    min-width: 719px;
    min-height: 517px;
    display: inline-block;
    background-position: top left;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
}

.writealetterdiv div {
    height: calc(100vh - 406px);
    overflow: auto;
    padding-left: 120px;
    position: relative;
    padding-top: 80px;
    padding-bottom: 20px;
    padding-right: 20px;
}

.writealetterdiv p {
    color: #424242;
    margin-bottom: 10px;
    text-align: left;
    line-height: 28px;
    position: relative;
}


/*@media screen and (orientation:portrait) {
    body {
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
    }
}*/

.disable {
    opacity: 0.20;
    cursor: none;
    pointer-events: none;
    color: #fff;
}

#one {
    z-index: 10000000;
    position: absolute;
    width: 595px;
    text-align: left;
    background: #000;
    left: 50%;
    top: 0;
    height: auto;
    transform: translateX(-50%);
}

.displayusername {
    text-align: right;
    padding-right: 15px;
    padding-top: 15px;
    display: inline-block;
    width: 100%;
    font-weight: normal;
    text-transform: capitalize;
}


/*#one .pdfdiv {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    overflow: auto;
    height: calc(100vh - 0px);
}*/

/*.GameSummaryGraph chart div {
    width: 300px !important;
    height: auto !important;
}

.GameSummaryGraph chart div svg{
    width: 300px !important;
    height: auto !important;
}*/

.incomecoparisongraph {
    font-size: 16px;
    color: #454545;
    padding-left: 0;
    padding-right: 0
}

.incomecoparisongraph > div {
    background: #ccc;
    padding: 5px 0 0 5px;
}

.incomecoparisongraphheadline {
    padding-left: 10px;
}

.close {
    opacity: 0.9;
}

.IntroductionofCountry {
    left: 15px;
    top: -20px;
    position: absolute;
}

.bottom_action_label {
    width: 100%;
    display: block;
}

.Language_ReligionDiv {
    display: inline-block;
    /*overflow: visible*/
}

.Language_ReligionDiv span {
    display: block;
    width: 100%;
}


/*.Language_ReligionDiv .tooltip .tooltip-inner{
    max-width: 100%;
    display: block;
}*/

.eventarrow {
    /*background: #151936;
width: 43px;
height: 43px;
border-radius: 50%;
display: inline-block;*/
    background: transparent;
    border: none;
}

.eventarrow:focus {
    outline: none;
}


/*.eventarrow .glyphicon{
    top: 10px;
    left: 10px;
    font-size: 22px;
}
*/

[hidden] {
    display: none !important;
}

.expressionbox {
    margin-top: 10px;
}

.conformationpopup {
    background: #000;
    border-radius: 2%;
    border: 1px solid #00bcd4;
}

.errorpopup {
    border-color: red;
}

.sucesspopup {
    border-color: green;
}


/* Fadding Fade Out Animation */

.fadingOut {
    animation: fadingOut ease 1s
}

@keyframes fadingOut {
    0% {
        opacity: 0
    }
    50% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

@-webkit-keyframes fadingOut {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.fadingIn {
    animation: fadingIn cubic-bezier(0.79, -0.32, 0.97, 0.92) 4s;
    -webkit-animation: fadingIn cubic-bezier(0.79, -0.32, 0.97, 0.92) 4s;
    -moz-animation: fadingIn cubic-bezier(0.79, -0.32, 0.97, 0.92) 4s;
    -o-animation: fadingIn cubic-bezier(0.79, -0.32, 0.97, 0.92) 4s;
    -ms-animation: fadingIn cubic-bezier(0.79, -0.32, 0.97, 0.92) 4s;
}

@keyframes fadingIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-moz-keyframes fadingIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadingIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-o-keyframes fadingIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-ms-keyframes fadingIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}


/* Fadding Fade Out Animation */

.fieldofstudygradyate div {
    text-align: left;
    float: left;
    display: inline-block;
    min-width: 231px;
    min-height: 30px;
    font-size: 16px;
    font-weight: 300;
}

.bottombtnoffieldofgradyate {
    display: inline-block;
    width: 100%;
}


/* Registration Form */

.pricingdiv {
    display: inline-block;
    position: absolute;
    z-index: 1;
    margin-top: 0px;
    left: 30px;
    bottom: 50px;
    -ms-transform: rotate(7deg);
    -webkit-transform: rotate(7deg);
    transform: rotate(-7deg);
}

.pricingdiv img {
    width: 60%;
    height: auto;
}

.registrationform {
    color: #fff;
    background: rgba(0, 0, 0, 0.67);
    padding-bottom: 10px;
    display: inline-block;
    max-height: calc(100vh - 135px);
    /*border: 1px solid rgba(21, 177, 198, 0.41);*/
    border-radius: 0px;
    position: absolute;
    top: 50%;
    top: 58%;
    left: 57%;
    margin-bottom: 0px;
    overflow: auto;
    z-index: 2;
}

.schoolregistrationform {
    left: 50%;
    top: 57%;
    max-height: calc(100vh - 125px);
}

.registraionpagelogo {
    width: auto;
    display: inline-block;
    margin-left: 15px;
    margin-top: 0px;
}

.registraionpagelogo img {
    width: 185px;
    height: auto;
    display: inline-block;
    position: relative;
}

.registrationform h1 {
    background: transparent;
    font-size: 30px;
    color: #02acc5;
    border-bottom: 1px solid #02acc5;
    padding: 0px;
    padding-bottom: 15px;
    margin-top: 5px;
    margin-bottom: 10px;
    text-align: center;
}

.registrationform h1 span {
    color: #e6e6e6;
}

.registrationform > h6 {
    padding-left: 15px;
    margin-top: 2px;
    font-size: 13px;
    color: #a09f9f;
}

.registrationform > h6 span {
    color: #02acc5;
}

.socialmediaiconforregistration {
    text-align: center;
    margin-bottom: 10px;
    /*border-bottom: 1px solid rgba(2, 172, 197, 0.44);
  border-top: 1px solid rgba(2, 172, 197, 0.44);*/
    border-bottom: none;
    border-top: none;
    padding-bottom: 10px;
    padding-top: 10px;
}

.socialmediaiconforregistration h6 {
    float: left;
    display: block;
    width: 100%;
    font-size: 16px;
}

.socialmediaiconforregistration h6:first-child {
    font-size: 13px;
    color: #a09f9f;
}

.socialmediaiconforregistration span {
    display: inline-block;
    top: 5px;
    position: relative;
}

.socialmediaiconforregistration h6 span {
    top: 0px;
    color: #02acc5;
}

.socialmediaiconforregistration span img {
    width: 60px;
    height: auto;
    padding: 0 5px;
    margin: 0 5px;
    cursor: pointer;
}

.socialmediaiconforregistration p {
    width: 100%;
    display: block;
    margin-top: 20px;
    margin-bottom: 0px;
}

.registrationortext {
    text-align: center;
    font-size: 18px;
    color: #02acc5;
    font-weight: bold;
}

.registrationformmaindiv {
    padding: 0px;
}

.registrationform .registrationformmaindiv p {
    padding: 0px 15px;
    text-align: center;
    margin-top: 20px;
}

.registrationform .form-group .form-control {
    height: 34px;
    padding: 6px 6px 6px 0px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #d8d8d8;
    background-color: transparent;
    background-image: none;
    border: none;
    border-bottom: 1px solid rgb(10, 88, 99);
    border-radius: 0px;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
}

.countrycodefield {
    width: 100px;
    display: inline-block;
}

.mobilenumberfield {
    width: 62%;
    display: inline-block;
}

.registrationform .form-group select {
    color: #828282;
    background-color: #000000 !important;
    border: none;
    border-bottom: 1px solid rgb(10, 88, 99);
    border-radius: 0px;
    padding: 6px 6px 6px 0px;
    /*-webkit-appearance: none;*/
    -webkit-border-radius: 0px;
    height: 32px;
}

.registrationform .form-group .form-control::-webkit-input-placeholder {
    color: #828282;
}

.registrationform .form-group .form-control::-moz-placeholder {
    /* Firefox 19+ */
    color: #828282;
}

.registrationform .form-group .form-control:-ms-input-placeholder {
    /* IE 10+ */
    color: #828282;
}

.registrationform .form-group .form-control:-moz-placeholder {
    /* Firefox 18- */
    color: #828282;
}

.registrationform .form-group {
    min-height: 60px;
    margin-bottom: 5px;
}

.registrationform .form-group label {
    display: block;
}

.registrationform .form-check label {
    display: inline-block;
}

.text-warning {
    color: red !important;
}

.errormessage {
    color: red;
    font-size: 10px;
    font-weight: bold;
}

.countrycode {
    width: 50%;
    display: inline-block;
    height: 35px;
    color: #000;
}

.countrycode + input {
    width: 48%;
    display: inline-block;
}

.registrationform .form-check {
    position: relative;
    top: 6px;
    float: left;
    margin-right: 10px;
}

.registrationform .form-check label {
    margin-left: 10px;
}

.registrationform .form-check label:first-child {
    margin-left: 0px;
}

.registrationform .btn {
    position: relative;
    margin-right: 16px;
    color: #fff;
    background: transparent;
    box-shadow: none;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid;
    border-color: #08b7d3;
    padding: 5px 25px;
    border-radius: 0px;
    float: right;
    cursor: pointer;
    font-weight: bold;
}

.registrationform .btn[disabled] {
    opacity: 0.5;
}

.registrationform .btn-primary[disabled]:hover {
    color: #fff;
    background-color: transparent;
    border-color: #08b7d3;
    cursor: not-allowed;
}

.registrationform .btn-primary:hover,
.registrationform .btn:focus {
    background-color: transparent;
    border-color: #08b7d3;
    color: #08b7d3;
    outline: none;
}

.countryselection {
    width: 100%;
    height: 34px;
    color: #000;
}


/*.registrationform .form-group .form-control.ng-invalid {*/

/*border-bottom: 1px solid red;*/

/*}*/

/*.registrationform .form-group .form-control.ng-valid {*/

/*border-bottom: 1px solid rgb(10, 88, 99)*/

/*}*/

.termsconditionpopup {
    border: 1px solid #04c3dd;
    border-radius: 0px;
}

.termsconditionpopup .modal-header {
    border-bottom: 1px solid #03c1dc;
}

.licensesmaindiv {
    width: 100%;
    font-size: 10px;
    height: calc(100vh - 200px);
    overflow: auto;
    color: #fff;
}

.licensesmaindiv span {
    display: block;
    font-weight: 300;
}

.licensesmaindiv span span {
    padding-left: 15px;
    font-weight: 200;
}

.licensesmaindiv p {
    margin-bottom: 5px;
}

/* Registration Form */

.sdgcompareform {
    /*border-bottom: 7px solid #0b525e;*/
    padding: 10px 0px;
    margin-bottom: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
}

.sdgcompareform label {
    font-size: 12px;
    margin-bottom: 5px;
}

.sdgcompareform textarea {
    border-radius: 0px;
    background: rgba(0, 0, 0, 0.47);
    border: 1px solid rgba(0, 188, 212, 0.54);
    color: #fff;
    font-size: 12px;
    resize: vertical;
    padding: 5px;
    height: 40px;
}

.sdgcompareform button {
    margin-top: 5px;
    padding: 0px 8px;
    background: transparent;
    font-size: 10px;
    padding-top: 0px;
    background-color: #0193a7;
    color: #fff;
    border: none;
    border-radius: 0px;
    line-height: 11px;
    padding-bottom: 1px;
}

.sdgcompareform button:hover,
.sdgcompareform button:focus {
    outline: none;
    margin-top: 5px;
    padding: 0px 8px;
    background: transparent;
    font-size: 10px;
    padding-top: 0px;
    background-color: #005763;
    color: #fff;
    border: none;
    border-radius: 0px;
    line-height: 11px;
    padding-bottom: 1px;
}

.sdgcompareform textarea::-webkit-input-placeholder {
    color: #828282;
    font-size: 10px;
}

.sdgcompareform textarea::-moz-placeholder {
    /* Firefox 19+ */
    color: #828282;
    font-size: 10px;
}

.sdgcompareform textarea:-ms-input-placeholder {
    /* IE 10+ */
    color: #828282;
    font-size: 10px;
}

.sdgcompareform textarea:-moz-placeholder {
    /* Firefox 18- */
    color: #828282;
    font-size: 10px;
}

.modal.right .modal-dialog {
    position: fixed;
    margin: auto;
    width: 320px;
    height: 100%;
    -webkit-transform: translate3d(0%, 0, 0);
    -ms-transform: translate3d(0%, 0, 0);
    -o-transform: translate3d(0%, 0, 0);
    transform: translate3d(0%, 0, 0);
}

.modal.left .modal-content,
.modal.right .modal-content {
    height: 350px;
    overflow-y: hidden;
    top: 46%;
    transform: translateY(-50%);
    background: #000;
    outline: 1px solid #00bcd4;
}

.modal.right .modal-content .modal-header {
    background: transparent;
    border-bottom-color: #585858;
    /* padding: 10px 15px; */
}

.modal.right .modal-content .modal-header button.close {
    opacity: 1 !important;
    color: #fff;
    text-shadow: none;
    margin-top: 5px;
    font-size: 15px;
}

.modal.right .modal-content .modal-body {
    padding: 10px 0;
    height: 100%;
    width: 100%;
    font-size: 1rem;
    display: inline-block;
    overflow: hidden;
}

.modal.right .modal-content .modal-body ul {
    /* padding: 10px 15px; */
    color: #fff;
    text-align: justify;
    display: inline-block;
    margin-bottom: 5px;
    /* height: calc(100% - 51px); */
    width: 100%;
    overflow: auto;
}

.modal.right .modal-content .modal-body ul li {
    margin-bottom: 5px;
    padding-bottom: 10px;
    word-break: break-all;
}

.modal.right .modal-content .modal-body ul li span {
    display: block;
    text-align: center;
    margin-top: 10px;
}

.modal.right .modal-content .modal-body ul li:last-child span {
    display: none;
}


/*.modal.right .modal-content .modal-body ul li:nth-child(even) {
    text-align: center;
}*/

/*Right*/

.modal.right.fade .modal-dialog {
    right: -320px;
    -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
    -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
    -o-transition: opacity 0.3s linear, right 0.3s ease-out;
    transition: opacity 0.3s linear, right 0.3s ease-out;
}

.modal.right.fade.in .modal-dialog {
    right: 5px;
}


/* ----- v CAN BE DELETED v ----- */

.btn-demo {
    margin: 15px;
    padding: 10px 15px;
    border-radius: 0;
    font-size: 16px;
    background-color: #FFFFFF;
}

.btn-demo:focus {
    outline: 0;
}

.rightside {
    position: absolute;
    right: -51px;
    transform: rotate(90deg);
    z-index: 99;
    color: #000;
    font-size: 11px;
    padding: 5px 10px;
    margin: 0px;
    top: 13%;
    background: rgb(0, 188, 212);
}

.rightside i {
    transform: rotate(-90deg);
}

.logginasmaindiv {
    position: relative;
    top: 3px;
    text-transform: capitalize;
}

.gamebuttongroupmaindiv {
    position: relative;
    top: 10px;
}

.holefamilyincomemaindiv {
    display: inline-block;
    width: 100%;
}

.holefamilyincomemaindiv > div {
    width: 14.4%;
    border-right: 1px solid #c1c1c1;
    margin-left: 2px;
    padding: 10px 0px;
}

.holefamilyincomemaindiv > div:nth-child(1),
.holefamilyincomemaindiv > div:nth-child(2),
.holefamilyincomemaindiv > div:nth-child(3) {
    background: #cbcbcb;
}

.holefamilyincomemaindiv > div:nth-child(1) {
    margin-left: 15px;
}

.holefamilyincomemaindiv > div:nth-child(4),
.holefamilyincomemaindiv > div:nth-child(5) {
    background: #b9b9b9;
    padding: 20px 0px;
}

.Shelter_Diet_aminitesmainDiv {
    height: calc(100vh - 175px);
    overflow: auto;
}

.ShelterAndDietmainDivFamilypop {
    display: inline-block;
    width: 100%;
    margin-top: 5px;
}

.ShelterAndDietmainDivFamilypop .headline {
    font-size: 16px;
    color: #454545;
    padding-left: 0px;
    margin-bottom: 10px;
}

.ShelterAndDietmainDivFamilypop > div {
    display: inline-block;
    width: 100%;
    margin: 0;
    padding: 0px;
}

.ShelterAndDietmainDivFamilypop > div.political_txt {
    padding: 10px 5px;
}

.ShelterAndDietmainDivFamilypop div img {
    height: 25px;
}

.AmenitiesmainDivFamilypop {
    display: inline-block;
    width: 100%;
    margin-top: 18px;
}

.AmenitiesmainDivFamilypop .headline {
    font-size: 16px;
    color: #454545;
    padding-left: 0px;
    margin-bottom: 10px;
}

.AmenitiesmainDivFamilypop div {
    display: inline-block;
    width: 100%;
    margin: 0;
    padding: 0px;
}

.AmenitiesmainDivFamilypop div.political_txt {
    padding: 10px 5px;
}

.AmenitiesmainDivFamilypop div img {
    height: 25px;
    width: auto;
}


.boxheading_b_edu span {
    text-transform: capitalize;
}

.boxheading_edu span {
    text-transform: capitalize;
    margin-left: 3px;
}

.yourfamilymemberincomedisplaymaindiv .boxheading_edu span {
    padding-left: 5px;
}

.titlecase {
    text-transform: capitalize;
}

.tooltip-inner {
    border: 1px solid #01bdda;
}

.tooltip.top .tooltip-arrow {
    border-top-color: #01bdda !important;
}

.tooltip.left .tooltip-arrow {
    border-left-color: #01bdda !important;
}

.tooltip.right .tooltip-arrow {
    border-right-color: #01bdda !important;
}


.tooltip.bottom .tooltip-arrow {
    border-bottom-color: #01bdda !important;
}

.width100per {
    width: 100%;
}

/* Media Query */

@media only screen and (max-width: 1024px) {
    .container-fluid {
        width: 100%;
        height: 100%;
    }
    .centerbox {
        width: 55%;
    }
    .navigation li {
        padding: 0 0px;
    }
    .navigation ul li:after {
        margin-right: 0px;
    }
    .navigation ul li:last-child::before {
        margin-left: 0px;
    }
    .countrydetailsnLifesummary ul.nav > li > a:hover,
    .countrydetailsnLifesummary ul.nav > li > a:focus {
        padding: 6px 5px;
    }
    .knob_holderdiv ul li {
        float: left;
        width: auto;
        display: inline-block;
    }
    .sdgicondisplay li {
        padding: 5px 3px;
    }
    .countrydetailsnLifesummary li {
        width: auto !important;
        display: inline-block;
        float: left;
    }
    .countrydetailsnLifesummary ul.nav.navbar-nav li {
        padding: 0px 2px;
    }
    .countrydetailsnLifesummary ul.nav > li > a {
        padding: 5px 4px;
    }
    .countrydetailsnLifesummary {
        margin-top: 0px;
        padding: 0;
        width: 100%;
    }
    .indication {
        padding-left: 20px;
        padding-right: 8px;
    }
    .bottom_action_group marquee {
        width: 75px;
    }
    .exp_txt.extramodificationforsdgicon {
        padding: 10px;
    }
    .countrycapsulsdgIndicatorstable {
        padding: 0 5px;
    }
    .sdgicondisplay {
        width: 100%;
    }
    .countrycapsule_sdgIndicators {
        height: calc(100vh - 229px);
    }
    .sdgparametersshow tbody.scrollable {
        height: calc(100vh - 645px);
        padding-bottom: 10px;
    }
    .currentfinancialstatustable {
        font-size: 12px;
    }
    .expensesboxinside {
        font-size: 12px;
    }
    .currentincomedetailslink {
        top: 2px;
    }
    .sdgli {
        padding: 0px 5px;
    }
    .bottom_action_group li {
        padding-top: 0px;
    }
    .sdgseleactiondiv ul:first-child {
        width: 3%;
    }
    .EventSDGiconform {
        width: 95%;
    }
    .sdgseleactiondiv ul:first-child li.sdgli img {
        height: 25px;
    }
    .loadexistinglifelogo img {
        width: 50%;
    }
    .minheight125 {
        min-height: 95px;
    }
    .borndetaildiv {
        min-width: 580px;
    }
    .startlifelogo {
        width: 40%;
    }
    #mapshow.startlifebottomsection {
        height: calc(100vh - 440px);
    }
    .ipadscreen {
        height: calc(100vh - 60px);
        min-height: auto;
    }
    .countrycapsuledetailstable tbody.scrollable {
        height: calc(100vh - 540px);
    }
    .sdgiconlist1 li:first-child img {
        width: 180px;
    }
    .sdgicondisplay {
        height: calc(100vh - 380px);
        overflow: auto;
    }
    .accoholder {
        height: calc(100vh - 205px);
        overflow: hidden;
    }
    #bgvid {
        height: calc(100vh - 59px);
    }
    .tab-content {
        height: calc(100% - 25px);
        padding: 0.5rem
    }
    .lstxt {
        padding: 0px;
        height: calc(100vh - 270px);
    }
    .eventcentered {
        top: 45%;
    }
    .next_evt_btn,
    .age_btn,
    .dead_btn {
        padding-top: 95px;
    }
    .action-position {
        display: inline-block;
    }
}

@media screen and (max-height: 700px) {
    .centerbox {
        margin-top: 3%;
    }
    .centerbox.registrationform {
        margin-top: 0%;
    }
    .event_text {
        max-height: 85px;
    }
}

@media screen and (max-height: 700px) {}

@media only screen and (min-width: 1600px) {
    .bottom_action {
        width: 99.2%;
    }
    .bottom_action_group li > span {
        position: relative;
        top: 7px;
    }
    .exp_div {
        background-size: contain;
    }

    .endscreendesign li {
        top: 17px;
    }

    .bottom_action_group.endscreendesign li > span {
        top: 0px;
    }

    .endscreeenwindows .action_heading {
        width: 99%;
    }
    .countrycapsuledetailstable table tr td:first-child {
        text-align: left;
        padding-left: 0px;
        /*width: 80px;*/
        width: 34%;
        padding: 1px;
    }
    .widthincrese {
        /*width: 85px !important;*/
        width: 10% !important;
    }
    .countrycapsuledetailstable table tr td table tr td {
        width: 355px;
        text-align: right;
        padding: 1px;
        padding-right: 8px;
    }
    .lifestatusbox {
        right: 0;
        font-size: 11px;
        font-weight: normal;
        text-align: center;
        padding: 25px 4px;
    }
    .bottom_action_group li {
        padding-top: 7px;
    }
    .factoidpopup {
        left: 25%;
    }
    .sdgparametersshow thead tr td:first-child {
        /*width: 90px;*/
        width: 20%;
    }
    .sdgparametersshow thead tr td:nth-child(2) {
        /*width: 250px;*/
        width: 20%;
        font-size: 12px;
        text-align: center;
        font-weight: bold;
    }
    .sdgparametersshow thead tr td:last-child {
        /*width: 90px;*/
        width: 20%;
        text-align: right;
        background: transparent;
    }
    .sdgparametersshow tr td:first-child {
        text-align: left;
        /*width: 50px;*/
        width: 20%;
    }
    .sdgparametersshow tr td:nth-child(even) {
        width: 40px;
        text-align: center;
    }
    .sdgparametersshow tr td:nth-child(3) {
        /*width: 240px;*/
        width: 40%;
        background: rgba(9, 70, 101, 0.45);
        font-size: 10px;
        text-align: center;
    }
    .sdgparametersshow tbody tr td:last-child {
        text-align: right;
        /*width: 50px;*/
        width: 20%;
    }

    .loadexistinglifetable thead tr th {
        width: 10%;
    }

    .loadexistinglifetable thead tr th:first-child,
    .loadexistinglifetable thead tr th:nth-child(4) {
        width: 45%;
    }
    .loadexistinglifetable thead tr th:nth-child(2),
    .loadexistinglifetable thead tr th:nth-child(3) {
        width: 10%;
    }

    .loadexistinglifetable tbody tr td:first-child {
        width: 45%;
    }

    .loadexistinglifetable tbody tr td:nth-child(2),
    .loadexistinglifetable tbody tr td:nth-child(3) {
        width: 10%;
    }

    .loadexistinglifetable tbody tr td:nth-child(4) {
        width: 33%;
    }
    .loadexistinglifetable tbody tr td:nth-child(5) {
        width: 10%;
    }

}

#bugreporthover {
    display: none;
}

#instabugSDK {
    right: 245px !important;
    top: 5px;
    bottom: 0px !important;
    height: 50px;
    opacity: 0.4;
    /*right: 5px !important;
    bottom: 0px !important;*/
}

#instabugSDK:hover {
    opacity: 1;
}

#bugreporthover.blue {
    opacity: 1;
    display: inline-block;
    color: #bdbdbd;
    background: #000;
    border: 1px solid #313131;
    width: 190px;
    font-size: 12px;
    position: fixed;
    top: 55px;
    right: 170px;
    padding: 6px;
    text-align: center;
    z-index: 9999;
}

#bugreporthover p {
    margin-bottom: 0px;
}

#instabugSDK #initInstaBugLink {
    border: transparent;
    background-color: transparent;
}

.choosenamebox {
    color: #000;
}

.choosenamebox .radio {
    margin-top: 0px;
}

.text-black {
    color: #000;
}



/*==========================================================================================
        ---------------------------    Admin Dashboard    ---------------------------
==========================================================================================*/

@import url('https://fonts.googleapis.com/css?family=Biryani:200,400,700');

#schadmindashboard {
    width: 100%;
    height: 100%;
    font-family: 'Biryani', sans-serif;
    background: #F3F3F3;
    background-image: url('../assets/image/dashbord-img.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: auto;
}


#page-wrapper {
    margin: 0;
    padding: 0px 0px;
    display: inline-block;
    width: calc(100vw - 260px);
    height: calc(100vh - 60px);
    float: right;
}

/*==============================================
   DASHBOARD STYLES
    =============================================*/

#schadmindashboard .noti-box {
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid #056774;
    background-color: transparent;
    border-radius: 0px;
}

#schadmindashboard .noborder {
    border: none;
}

#schadmindashboard .noti-box .text-box {
    color: #fff;
}

#schadmindashboard .panel.noti-box:hover {
    margin-bottom: 20px;
    background-color: rgba(255, 255, 255, 0.12);
    box-shadow: none;
    border: 1px solid #056774;
}

#schadmindashboard .panel.noti-box.noborder:hover {
    margin-bottom: 20px;
    background-color: transparent;
    box-shadow: none;
    border: none;
}

#schadmindashboard .playlifebtn {
    position: relative;
}

#schadmindashboard .playlifebtn img {
    width: auto;
    max-height: 150px;
    margin: 0 auto;
}

#schadmindashboard .noti-box .icon-box {
    display: block;
    float: none;
    margin: 0 auto;
    width: 70px;
    height: 70px;
    line-height: 0;
    text-align: center;
    font-size: 40px;
    padding: 15px;
}

#schadmindashboard .text-box p {
    margin: 0 0 0px;
    padding: 10px;
    text-align: center;
}

#schadmindashboard .main-text {
    font-size: 25px;
    font-weight: 600;
}

#schadmindashboard .set-icon {
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
}

#schadmindashboard .bg-color-green {
    background-color: #00CE6F;
    color: #fff;
}

#schadmindashboard .bg-color-blue {
    background-color: #A95DF0;
    color: #fff;
}

#schadmindashboard .bg-color-red {
    background-color: #42f4f4;
    color: #fff;
}

#schadmindashboard .bg-color-brown {
    background-color: #B94A00;
    color: #fff;
}

/*==============================================
    MENU STYLES
=============================================*/

#schadmindashboard .navbar-cls-top .navbar-brand {
    color: #fff;
    width: auto;
    text-align: center;
    height: 60px;
    font-weight: 700;
    padding: 5px 10px;
}

#schadmindashboard .navbar-cls-top .navbar-brand .logo {
    width: auto;
    height: 50px;
    display: inline-block;
    margin: 0 auto;
}

#schadmindashboard .active-menu {
    background-color: #C90000 !important;
}

#schadmindashboard .sidebar-collapse,
#schadmindashboard .sidebar-collapse .nav {
    background: none;
}

#schadmindashboard .sidebar-collapse .nav {
    padding: 0;
}

#schadmindashboard .sidebar-collapse > .nav > li.active,
#schadmindashboard .sidebar-collapse .nav > li > a:hover {
    background: rgba(12, 201, 227, 0.3);
}

#schadmindashboard .sidebar-collapse > .nav > li.branding {
    height: 100px;
    padding: 0px 10px;
    border-bottom: 0;
}

#schadmindashboard .sidebar-collapse > .nav > li.branding img {
    width: auto;
    height: 70px;
}

#schadmindashboard .sidebar-collapse > .nav > li.branding.active,
#schadmindashboard .sidebar-collapse .nav > li.branding > a:hover {
    background: none;
}

#schadmindashboard .sidebar-collapse .nav > li > a {
    color: #fff;
    /*background: #202020;*/
    text-shadow: none;
}

#schadmindashboard .sidebar-collapse > .nav > li > a {
    padding: 15px 10px;
}

#schadmindashboard .sidebar-collapse > .nav > li {
    border-bottom: 1px solid rgba(107, 108, 109, 0.19);
}

#schadmindashboard .sidebar-collapse .nav > li > a:hover,
#schadmindashboard .sidebar-collapse .nav > li > a:focus {
    outline: 0;
}

#schadmindashboard .navbar-cls-top {
    background: transparent;
    border: none;
}

#schadmindashboard .navbar-cls-top .navbar-brand:hover {
    background: transparent;
    color: black;
}

#schadmindashboard .navbar-default.navbar-side {
    background: rgba(0, 0, 0, 0.52);
    background: transparent;
    border: none;
    border-right: 1px solid #056875;
    height: 100%;
}

#schadmindashboard .navbar-header {
    background: transparent;
    /*border-right: 1px solid #056875;*/
}

#schadmindashboard .navbar-default .navbar-toggle:hover,
#schadmindashboard .navbar-default .navbar-toggle:focus {
    background-color: rgba(12, 201, 227, 0.3);
}

#schadmindashboard .navbar-default .navbar-toggle {
    border-color: #fff;
}

#schadmindashboard .navbar-default .navbar-toggle .icon-bar {
    background-color: #FFF;
}

#schadmindashboard .nav > li > a > i {
    margin-right: 10px;
    margin-left: 20%;
}


#schadmindashboard .mainbtn {
    text-align: center;
    margin-top: 40px;
}

#schadmindashboard .mainbtn > div {
    float: none;
    display: inline-block;
}

#schadmindashboard .userprofile {
    padding: 5px;
    padding-bottom: 10px;
    text-align: center;
}

#schadmindashboard .username {
    font-size: 20px;
    text-transform: capitalize;
    margin-bottom: 0px;
    color: #fff;
}

#schadmindashboard .userrole {
    font-size: 15px;
    text-align: left;
    color: #10ddf6;
    margin-bottom: 10px;
    display: inline-block;
}

#schadmindashboard .userlinks {
    display: inline-block;
    width: 100%;
    font-size: 13px;
    color: #0dc4dd;
    font-weight: 100;
    padding-top: 10px;
    border-top: 1px solid rgba(204, 204, 204, 0.28);
}


#schadmindashboard .userlinks span {
    padding: 0 10px;
    border-right: 1px solid #ccc;
}

#schadmindashboard .userlinks span:last-child {
    border-right: none;
}

#schadmindashboard .pagetitle {
    text-align: center;
    color: #fff;
    font-weight: 100;
}



#schadmindashboard footer {
    position: absolute;
    bottom: 0px;
    width: calc(100vw - 260px);
    border-top: 1px solid #056774;
    color: #fff;
    font-size: 10px;
    padding: 10px 10px;
    padding-bottom: 0px;
}

#schadmindashboard footer p {
    display: inline-block;
}

#schadmindashboard .footerlinks {
    float: right;
    font-size: 10px;
}

#schadmindashboard .footerlinks a {
    color: #bdbdbd;
    padding: 0 10px;
    border-right: 1px solid #ccc;
}

#schadmindashboard .footerlinks a:last-child {
    padding-right: 0px;
    border-right: 0px;
}


/*==============================================
    MEDIA QUERIES
    =============================================*/

@media(min-width:992px) {
    #schadmindashboard .navbar-side {
        z-index: 1;
        position: absolute;
        width: 260px;
        height: 100%;
    }
    #schadmindashboard .navbar {
        border-radius: 0px;
    }
}

@media(max-width:991px) {
    #schadmindashboard .navbar-toggle {
        display: inline-block;
    }
    #schadmindashboard .navbar-header {
        float: none;
        border-right: none;
    }
    #page-wrapper {
        width: calc(100vw);
    }

    .sidebar-collapse {
        display: none;
    }

    #schadmindashboard .sidebar-collapse.collapsing {
        display: block;
    }

    #schadmindashboard footer {
        position: relative;
        bottom: 0px;
        width: 100%;
        margin-top: 10px;
        background: #011f23;
        display: inline-block;
    }
}

/*==============================================
    MEDIA QUERIES
    =============================================*/

@media(max-width:767px) {
    #schadmindashboard .navbar-default.navbar-side {
        height: 100%;
        border: none;
    }
}





/* =============================================================================================================================== */

/* =========================== New Design of Leisure =========================== */

/* =============================================================================================================================== */

.leisuremaindiv {
    margin: 0 auto;
    text-align: center;
}

.lesisureli {
    margin: 0px 10px 10px 0px;
    min-width: 210px;
    display: inline-block;
}

.lesisureli label {
    padding: 0px;
    font-weight: normal;
    width: 100%;
    margin: 0px;
}

.lesisureli label span.leisurespanmain {
    float: left;
    padding: 5px;
    border: 1px solid rgba(7, 68, 123, 0.26);
    width: 100%;
}

.lesisureli label span.leisurespanmain:hover {
    border-color: #000;
}

.lesisureli input {
    position: absolute;
    top: 20px;
    z-index: -9999;
}

.lesisureli input:checked + span.leisurespanmain {
    background-color: #07447b;
    color: #fff;
}

.lesisureli input[type="checkbox"][disabled] + span.leisurespanmain,
.lesisureli input[type="checkbox"][disabled] + span.leisurespanmain:hover {
    opacity: 0.4;
    color: #000;
    background: none;
    cursor: not-allowed;
    border-color: rgba(7, 68, 123, 0.26);
}

.lesisureli label span.leisurespanmain img {
    display: block;
    margin: 0 auto;
    text-align: center;
    width: 60px;
    height: auto;
}

.leisuremessage {
    text-align: center;
    display: block;
}

.lesisureli label span.leisurespanmain span {
    display: block;
    text-align: center;
}


/* =============================================================================================================================== */

/* =========================== Conformation Popup of Regional Data Change =========================== */

/* =============================================================================================================================== */

.notificationdiv {
    display: block;
    height: 100%;
    margin-bottom: 15px;
}

.notificationdiv p {
    margin-bottom: 15px;
}

.notificationdiv p:last-child {
    margin-bottom: 0px;
}

.notificationbtndiv {
    display: block;
    height: 100%;
    text-align: center;
    border-top: 1px solid rgba(0, 94, 106, 0.58);
    padding-top: 10px;
}

.notificationbtndiv button {
    margin-left: 0px;
    margin-right: 10px;
}

.notificationbtndiv button:last-child {
    margin-right: 0px;
}


/* =============================================================================================================================== */

/* =========================== New Design of Amenities Display before game start =========================== */

/* =============================================================================================================================== */

.amenitiesdisplay {
    display: inline-block;
    text-align: center;
    margin: 0 auto;
    width: 100%;
}

.amenitiesdisplay h3 {
    margin-top: 10px;
}

.amenitiesdisplaydiv {
    display: block;
    width: 100%;
    height: 465px;
    margin: 0 auto;
    text-align: center;
    overflow: auto;
}

.amenitiesdisplaydiv > div {
    display: inline-block;
    float: none;
    padding: 5px;
    border: 1px solid #07447b;
    margin: 0 5px 5px;
    width: 295px;
    vertical-align: top;
}

.amenitiesdisplaydiv > div > div {
    padding: 0px 5px;
}


.amenityimagediv {
    height: 85px;
    width: auto;
    display: inline-block;
    float: left;
}

.amenitytextdiv {
    display: inline-block;
    float: right;
    width: 200px;
}

.amenitiesdisplaydiv img {
    display: inline-block;
    width: 60px;
    height: auto;
    float: left;
    margin-right: 10px;
    position: relative;
}

.amenityname {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 6px;
    text-align: left;
    color: #0fd2ea;
}

.amenitysynomsis {
    font-size: 13px;
    font-weight: 100;
    text-align: left;
}

.amenitiesstatus {
    border-top: 1px solid #848484;
    padding: 10px;
    margin-top: 10px;
    text-align: center;
}

.amenitiesstatussymbol:before {
    content: " ";
    width: 15px;
    height: 15px;
    border-radius: 50%;
    float: left;
    margin-right: 5px;
    position: relative;
    top: 2px;
}

.amenitiesstatussymbol.available:before {
    background: green;
}

.amenitiesstatussymbol.notavailable:before {
    background: red;
}

.amenitiesstatustext {
    display: block;
    width: 100%;
    text-align: left;
}

@media (min-height:662px) {
    .amenitiesdisplaydiv {
        height: 350px;
    }
}

@media (min-height:768px) {
    .amenitiesdisplaydiv {
        height: 465px;
    }
}

@media (min-height:918px) {
    .amenitiesdisplay {
        top: 50%;
        position: relative;
        transform: translateY(-50%);
    }
    .amenitiesdisplaydiv {
        height: 490px;
    }
    .amenitiesdisplay .livealifebtndisparity {
        position: relative;
        height: auto;
        display: block;
        min-height: 149px;
    }
}

@media (min-height: 958px) {
    .amenitiesdisplaydiv {
        height: 620px;
    }
}

@media (min-height: 1024px) {
    .amenitiesdisplaydiv {
        height: 490px;
    }
}


/* =============================================================================================================================== */

/* =========================== New Design of  Religions Design in Design a Life Screen =========================== */

/* =============================================================================================================================== */

.religiondiv {
    color: #333;
    margin-top: 15px;
}

.religiondiv h5 {
    padding: 10px 0px;
    font-size: 17px;
    text-align: left;
    display: inline-block;
}

.religiondiv .religions {
    display: block;
    padding: 5px 0px;
    border-bottom: 1px solid #dbdbdb;
}

.religiondiv .religions:last-child {
    border-bottom: none;
}

.religiondiv .religions span:last-child {
    float: right;
}


/* =============================================================================================================================== */

/* =========================== New Design of Family Tree =========================== */

/* =============================================================================================================================== */

.ShelterAndDietmainDivFamilypop > div.political_txt {
    padding: 5px 5px;
}

.AmenitiesmainDivFamilypop div.political_txt {
    padding: 5px 5px;
}

#highchartcontainer {
    height: 150px;
    max-width: 800px;
    display: inline-block;
}

.familytreecapsule_familytreemain {
    padding: 0px 5px;
    background: url(../assets/images/family_tree.png) no-repeat;
    background-position: -114px -110px;
    background-color: #fff;
    background-attachment: fixed;
    background-size: 1168px 902px;
    display: inline-block;
    width: 100%;
}

ul.familycapsule_familytreecardmain {
    display: block;
    margin-top: 0px;
    padding-left: 10px;
    float: left;
    width: 100%;
    white-space: normal;
    clear: none;
}

.familycapsule_familytreecardmain .card.familytreenew,
.familycapsule_familytreecardmain .cardm.familytreenew {
    display: inline-block;
    min-height: 270px;
    height: auto;
    width: 200px;
    border: 1px solid #000;
    position: relative;
    margin: 10px 10px 0 0;
    float: left;
}

.familycapsule_familytreecardmain .card.familytreenew .card-header_ma,
.familycapsule_familytreecardmain .cardm.familytreenew .card-header_ma {
    background-size: 0;
    background: url(../assets/images/fam.png) no-repeat;
    display: inline-block;
    background-position: 3px 2px;
    width: 100%;
    height: auto;
    background-size: 20px 53px;
}

.familycapsule_familytreecardmain .card.familytreenew .card-header_fe,
.familycapsule_familytreecardmain .cardm.familytreenew .card-header_fe {
    background-size: 0;
    background: url(../assets/images/girl.png) no-repeat;
    display: inline-block;
    background-position: 3px 2px;
    width: 100%;
    height: auto;
    background-size: 20px 53px;
}

.familycapsule_familytreecardmain .cardm.familytreenew .card-header_fe .card-body-header-category,
.familycapsule_familytreecardmain .card.familytreenew .card-header_fe .card-body-header-category {
    background-color: #d27faa;
}

.familycapsule_familytreecardmain .card.familytreenew h1,
.familycapsule_familytreecardmain .cardm.familytreenew h1 {
    margin: 5px 0px;
    color: black;
    text-align: center;
    display: block;
    position: relative;
    top: 8px;
    font-size: 16px;
}

.familycapsule_familytreecardmain .card.familytreenew .card-body-header-category,
.familycapsule_familytreecardmain .cardm.familytreenew .card-body-header-category {
    position: relative;
    font-size: 15px;
    padding: 14px 70px 14px 7px;
    line-height: 15px;
    text-align: left;
    display: block;
    top: 15px;
    margin-bottom: 9px;
}

.familycapsule_familytreecardmain .card.familytreenew .card-header-date,
.familycapsule_familytreecardmain .cardm.familytreenew .card-header-date {
    float: right;
    margin: 23px 20px 0 0;
    border-radius: 100%;
    font-weight: bold;
    padding: 10px 11px;
    line-height: 15px;
    position: absolute;
    top: 17px;
    right: -20px;
    background-color: transparent;
    color: black;
}

.familycapsule_familytreecardmain .card.familytreenew .card-body-header-sentence,
.familycapsule_familytreecardmain .cardm.familytreenew .card-body-header-sentence {
    position: relative;
    color: #000;
    font-weight: bold;
    text-align: center;
    margin: 30px 0px 8px 0px;
}

.familycapsule_familytreecardmain .card.familytreenew p,
.familycapsule_familytreecardmain .cardm.familytreenew p {
    color: black;
    padding: 0 7px;
}

.familycapsule_familytreecardmain .card.familytreenew p span,
.familycapsule_familytreecardmain .cardm.familytreenew p span {
    display: block;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2196078431372549);
    padding: 5px 0px;
    font-size: 13px;
}

.familycapsule_familytreecardmain .card.familytreenew p span span,
.familycapsule_familytreecardmain .cardm.familytreenew p span span {
    display: inline;
    border-bottom: none;
}

.familycapsule_familytreecardmain .card.familytreenew p span:last-child,
.familycapsule_familytreecardmain .cardm.familytreenew p span:last-child {
    border-bottom: none;
    padding-bottom: 0px;
    padding-top: 5px;
}


/* =============================================================================================================================== */

/* =========================== New Design of Job List =========================== */

/* =============================================================================================================================== */

.jobtitlemaindiv {
    display: inline-block;
    float: none;
    width: 100%;
    height: calc(100vh - 90px);
    overflow: auto;
    margin: 0 auto;
    margin-top: 20px;
    text-align: center;
}


.joblistrepeatdiv {
    margin: 5px;
    float: none;
    display: inline-block;
}

.joblistrepeatdiv .edulistcareer {
    min-width: 400px;
    float: none;
    margin: 0 auto;
    text-align: center;
}

.joblistrepeatdiv .edulistcareer.businesslist {
    min-width: 250px;
    text-align: center;
}

.joblistrepeatdiv .edulistcareer label {
    padding: 0px;
    font-weight: normal;
    width: 100%;
    margin: 0px;
    cursor: pointer;
}

.edulistcareer label span.jobnamewithsalary {
    float: left;
    padding: 5px;
    border: 1px solid rgba(7, 68, 123, 0.26);
    width: 100%;
}

.edulistcareer label span.jobnamewithsalary:hover {
    background: rgb(7, 68, 123);
    color: #fff;
}

.edulistcareer input {
    position: absolute;
    top: 20px;
    z-index: -9999;
    visibility: hidden;
}

.edulistcareer input:checked + span.jobnamewithsalary {
    background-color: #07447b;
    color: #fff;
}

.edulistcareer input[type="checkbox"][disabled] + span.jobnamewithsalary,
.edulistcareer input[type="checkbox"][disabled] + span.jobnamewithsalary:hover {
    opacity: 0.4;
    color: #000;
    background: none;
    cursor: not-allowed;
}

.edulistcareer label span.jobnamewithsalary span {
    display: inline-block;
    margin: 0 auto;
    text-align: center;
}

.edulistcareer label span.jobnamewithsalary span:first-child {
    font-weight: bold;
    float: left;
}

.edulistcareer label span.jobnamewithsalary span.salaryspan {
    float: right;
}

.wanttoapplyjob {
    z-index: 1;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #000;
    border: 1px solid #3fe8fe;
    color: #fff;
}

.joblistshowmaindiv {
    top: -125px;
    height: calc(100vh - 30px);
    width: 100%;
    margin: 0px;
    left: 0px;
    position: fixed;
}

.wanttoapplyjob .businessbtngroup {
    display: block;
    width: 100%;
    margin-top: 10px;
}

@media (min-height:918px) and (max-height:1024px) {
    .joblistshowmaindiv {
        top: -170px;
    }
}



/* =============================================================================================================================== */

/* =========================== New Design of Charity Popup Window =========================== */

/* =============================================================================================================================== */

.charitylistmaindiv {
    width: 100%;
}

.charitylist {
    display: inline-block;
    min-width: 170px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    border: 1px solid rgba(7, 68, 123, 0.26);
    margin: 10px;
    padding: 5px;
}

.charitylist span {
    margin-left: 4px;
    display: block;
}


/* =============================================================================================================================== */

/* =========================== New Design of Gift Pet Popup Window =========================== */

/* =============================================================================================================================== */

.petnamediv {
    margin: 0px 10px 10px 0px;
}

.petnamediv label {
    padding: 0px;
    font-weight: normal;
    width: 100%;
    margin: 0px;
    cursor: pointer;
}

.petnamediv label span {
    float: left;
    padding: 5px;
    border: 1px solid rgba(7, 68, 123, 0.26);
    width: 100%;
    min-width: 145px;
}

.petnamediv label span:hover {
    /* background: rgba(7, 68, 123, 0.35); */
    /* color: #fff; */
    border-color: #000;
}

.petnamediv input {
    position: absolute;
    top: 20px;
    z-index: -9999;
}

.petnamediv input:checked + span {
    background-color: #07447b;
    color: #fff;
}

.petnamediv input[type="checkbox"][disabled] + span,
.petnamediv input[type="checkbox"][disabled] + span:hover {
    opacity: 0.4;
    color: #000;
    background: none;
    cursor: not-allowed;
    border-color: rgba(7, 68, 123, 0.26);
}

.petnamediv label span img {
    display: block;
    margin: 0 auto;
    text-align: center;
}

.petnamediv label span span {
    display: block;
    text-align: center;
}


/* =============================================================================================================================== */

/* =========================== New Design of Organ Donation Popup Window =========================== */

/* =============================================================================================================================== */

.organdonationlist {
    text-align: center;
    width: 100%;
    float: none;
    display: inline-block;
    padding: 0;
    margin: 0 auto;
    margin-top: 15px;
}

.organdonationbtn {
    margin-top: 15px;
}

.organdonationbtnpopup {
    margin-top: 5px;
}

.organdonationbtnpopup .btn[disabled] {
    opacity: 0.7;
    background: #ccc;
    color: #8e8e8e;
}

.organdonationdiv {
    margin: 0px 10px 10px 0px;
    max-width: 300px;
    display: inline-block;
    text-align: center;
}

.organdonationdiv label {
    padding: 0px 0px;
    font-weight: normal;
    width: 100%;
    margin: 0px;
    cursor: pointer;
}

.organdonationdiv label span {
    float: left;
    padding: 5px;
    width: 100%;
    min-width: 145px;
}

.organdonationdiv label div.organslabeldiv:hover {
    border-color: #000;
    background-color: #fff;
}

.organdonationdiv input {
    position: absolute;
    top: 20px;
    z-index: -9999;
}

.organdonationdiv input + div.organslabeldiv {
    width: 100%;
    height: 100%;
    display: inline-block;
    padding: 15px 0px;
    font-size: 14px;
    border: 1px solid rgba(7, 68, 123, 0.26);
    background-color: rgba(255, 255, 255, 0.5490196078431373);
}

.organdonationdiv input:checked + div.organslabeldiv {
    background-color: #fff;
    color: #000;
    border: 1px solid #07447b;
    /*background-color:#07447b;
    color:#fff;*/
    font-weight: bold;
    -webkit-box-shadow: 3px 3px 1px 0px rgba(0, 0, 0, 0.09);
    -moz-box-shadow: 3px 3px 1px 0px rgba(0, 0, 0, 0.09);
    box-shadow: 3px 3px 1px 0px rgba(0, 0, 0, 0.09);
}

.organdonationdiv input[type="checkbox"][disabled] + div.organslabeldiv,
.organdonationdiv input[type="checkbox"][disabled] + div.organslabeldiv:hover {
    opacity: 0.4;
    color: #000;
    background: none;
    cursor: not-allowed;
    border-color: rgba(7, 68, 123, 0.26);
}

.organdonationaction {
    padding-bottom: 20px;
}

.organdonationaction .organdonationlist {
    display: table;
}

.organdonationmaindiv {
    display: table-cell;
    margin-right: 10px;
    vertical-align: top;
    background: #e1e1e1;
    color: #000;
    padding: 10px;
    border: 1px solid #ccc;
    border-right: none;
}

.blooddonationmaindiv {
    display: table-cell;
    vertical-align: top;

    /*background: #fff;*/
    background: #e2e2e2;
    color: #000;
    padding: 10px;
    border: 1px solid #ccc;
}

.organdonationtitle,
.blooddonationtitle {
    color: #07447b;
    color: #000;
    padding: 10px;
    font-size: 14px;
    font-weight: bold;
}


.blooddonation {
    display: inline-block;
    margin: 0 0px;
}

.blooddonation .organdonationdiv {
    margin: 0px;
}

.organimages img {
    width: 100px;
    height: auto;
    float: none;
    text-align: center;
    margin: 0 auto;
}

.organimage p {
    text-align: center;
    font-size: 13px;
    line-height: 15px;
}

.organimages.organdonationmainwindow img {
    width: 130px;
}

.organimages img.liver {
    background: url(../assets/images/organs/m-liver.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.organimages img.eyes {
    background: url(../assets/images/organs/m-eye.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.organimages img.heart {
    background: url(../assets/images/organs/m-heart.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.organimages img.kidney {
    background: url(../assets/images/organs/m-kidney.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.organimages img.lungs {
    background: url(../assets/images/organs/m-lungs.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.organimages img.skin {
    background: url(../assets/images/organs/m-skin.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.organimages img.blood {
    background: url(../assets/images/organs/blood-donation-color.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Female Organs */

.organimages img.fliver {
    background: url(../assets/images/organs/w-liver.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.organimages img.feyes {
    background: url(../assets/images/organs/w-eye.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.organimages img.fheart {
    background: url(../assets/images/organs/w-heart.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.organimages img.fkidney {
    background: url(../assets/images/organs/w-kidney.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.organimages img.flungs {
    background: url(../assets/images/organs/w-lungs.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.organimages img.fskin {
    background: url(../assets/images/organs/w-skin.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}


/* =============================================================================================================================== */

/* =========================== Education Window New Design =========================== */

/* =============================================================================================================================== */

.educationmaincard .boxheading {
    height: 56px;
    font-weight: 600;
    color: #fff;
    font-size: 18px;
    padding-left: 0;
    background: #022a4e;
    padding-right: 0px;
    padding-top: 5px;
    border-right: 0px;
    border-bottom: 2px solid #0dbbd0;
}

.educationmaincard img {
    width: 60px;
    height: auto;
    position: relative;
    top: -7px;
}

.educationmaincard .boxdeco_white {
    background: #fff;
    border-right: none;
    color: #000000;
    margin-right: 0px;
}

.educationstatus span {
    text-align: center;
    display: block;
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: 16px;
}

.edcationyear {
    display: inline-block;
    width: 100%;
    margin-top: 15px;
}

.edcationyear span {
    display: inline-block;
    font-size: 12px;
    margin-bottom: 5px;
}

.edcationyear span:first-child {
    float: left;
}

.edcationyear span:last-child {
    float: right;
}

.educationmaincard .progress {
    height: 12px;
    margin-bottom: 5px;
    width: 100%;
}

.educationmaincard .boxheading_gray {
    height: 56px;
    font-weight: 600;
    color: #fff;
    font-size: 18px;
    padding-left: 0;
    background: #022a4e;
    padding-right: 0px;
    padding-top: 5px;
    border-right: 0px;
    border-bottom: 2px solid #0dbbd0;
}

.educationmaincard .boxdeco {
    background: #fff;
    border-right: none;
    color: #000000;
    margin-right: 0px;
}

.educationmaincard .boxheading_gray img {
    opacity: 0.5;
}

.educationmaincard .boxheading_gray span {
    opacity: 0.5;
}

.educationmaincard .educationdisplay {
    padding: 30px 15px;
    height: 150px;
}

.educationmaincard .boxheading + .boxdeco_white.educationdisplay {
    padding: 8px 15px;
}

.educationmaincard .educationdisplay .educationbuttons {
    text-align: center;
    margin-top: 10px;
}

.educationmaincard .boxheading_gray + .boxdeco_white button {
    display: none;
}

.educationmaincard .educationdisplay .educationbuttons .btn[disabled] {
    display: none;
}

.educationcomplete .edcationyear,
.educationcomplete .progress,
.educationcomplete .educationbuttons {
    display: none;
}

.educationdisplay.educationcomplete {
    display: table;
}

.educationdisplay.educationcomplete .educationstatus {
    display: table-cell;
    vertical-align: middle;
}

.fieldofstudyheadline {
    font-size: 14px;
    display: block;
    width: 100%;
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
}

.fieldofstudylistmain {
    display: inline-block;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

.fieldofstudylistmain ul li {
    font-size: 14px;
    padding: 5px 0px;
    float: none;
    display: inline-block;
    width: 285px;
    margin: 0 5px;
}

.fieldofstudylistmain .fieldofstudylist label {
    padding: 0px;
    font-weight: normal;
    width: 100%;
    margin: 0px;
    cursor: pointer;
}

.fieldofstudylist label span {
    float: left;
    padding: 5px;
    border: 1px solid rgba(7, 68, 123, 0.26);
    width: 100%;
    text-transform: uppercase;
}

.fieldofstudylist label span:hover {
    background: rgb(7, 68, 123);
    color: #fff;
}

.fieldofstudylist input {
    position: absolute;
    top: 20px;
    z-index: -9999;
    visibility: hidden;
}

.fieldofstudylist input:checked + span {
    background-color: #07447b;
    color: #fff;
}



/* =============================================================================================================================== */

/* =========================== Carrer Window New Design =========================== */

/* =============================================================================================================================== */

.horizontalwidhtincrese.careermaindiv {
    height: 255px;
}

.horizontalwidhtincrese.careermaindiv .carddetailsmain {
    padding-bottom: 10px;
}

.activejoborbusiness {
    max-width: 345px;
    display: inline-block;
    margin-right: 12px;
    border-right: 0px;
}

.careeractiveheading {
    background: none;
    background-color: #07447b;
    height: auto;
    display: block;
    padding: 5px 10px;
    font-weight: bold;
}

.careeractiveheading img {
    width: 45px;
    display: inline-block;
    height: auto;
}

.careeractiveheading span:last-child {
    position: relative;
    top: 13px;
}


.careerinactiveeheading {
    background: none;
    background-color: #848486;
    height: auto;
    display: block;
    padding: 5px 10px;
    color: #fff;
}

.careerinactiveeheading img {
    width: 45px;
    display: inline-block;
    height: auto;
}

.careerinactiveeheading span:last-child {
    position: relative;
    top: 13px;
}

.pastjoborbusiness {
    width: 245px;
    border-right: 0px;
    margin-right: 12px;
    background: none;
    height: 100%;
    float: left;
}


.careeractivebottomcard {
    padding: 0px;
}

.careeractivebottomcard .active_job {
    width: 200px;
}

.careeractivebottomcard .job_btn_holder {
    width: 145px;
}

.careerinactivebottomcard {
    background: #ecebeb;
    height: 180px;
    padding-bottom: 10px;
}

.careeractivejobbusinesstitle {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.careeryears {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.careerexpenses {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.careerdescription {
    display: block;
}





/* =============================================================================================================================== */

/* =========================== Residence Window New Design =========================== */

/* =============================================================================================================================== */

.residenceactivecard {
    border-right: 0px;
    margin-right: 12px;
}


.residenceactivecardheader {
    background: #07447b;
    background: none;
    background-color: #07447b;
    height: auto;
    display: block;
    padding: 5px 10px;
    font-weight: bold;
}

.residenceimagewithcardtitle {
    display: inline-block;
    float: left;
}

.residenceimagewithcardtitle img {
    width: 45px;
    height: auto;
}

.residenceagetitle {
    display: inline-block;
    float: right;
    position: relative;
    top: 13px;
}

.residenceactivecardbottom {
    display: block;
    width: 280px;
}

.residenceactivecarddiscription {
    width: 100%;
    display: inline-block;
    height: auto;
    padding: 20px 10px;
    border-bottom: 4px solid #07447b;
    color: #2a568a;
    background: #fff;
}

.residencetype {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 5px;
    text-align: center;
}

.residencecity,
.residencestate,
.residencecountry {
    font-size: 13px;
    margin-bottom: 5px;
    text-align: center;
}

.residenceactivecardbtngroup {
    width: 100%;
    text-align: center;
    height: auto;
    background: #fff;
    padding: 10px;
    display: block;
}

.residencepastcard {
    height: 238px;
    width: calc(100% - 295px);
}

.residenceinactivecard {
    border-right: 0px;
    margin-right: 12px;
    height: 100%;
    width: 245px;
    background: none;
}

.residenceinactiveheader {
    background: none;
    background-color: #848486;
    height: auto;
    display: block;
    padding: 5px 10px;
    color: #fff;
    font-size: 12px;
}

.residenceinactivecardbottom {
    background: #ecebeb;
    min-height: 168px;
    padding: 20px 15px;
    height: auto;
    color: #000;
    display: inline-block;
    width: 100%;
}


.emigrationcountrycitylist {
    height: calc(100vh - 100px);
    overflow: auto;
    margin-top: 15px;
}

.emigrationtitle {
    font-weight: bold;
    text-align: center;
    display: block;
    width: 100%;
}

.emigrationcountrycitylist .emigrationbox {
    padding-right: 0px;
    margin: 0 auto;
    text-align: center;
}

.emigrationcountrycitylist .emigrationbox ul li {
    font-size: 14px;
    padding: 5px 0px;
    float: none;
    display: inline-block;
    width: 285px;
    margin: 0 5px;
}


.emigrationbox .emigrationlist label {
    padding: 0px;
    font-weight: normal;
    width: 100%;
    margin: 0px;
    cursor: pointer;
}

.emigrationlist label span {
    float: left;
    padding: 5px;
    border: 1px solid rgba(7, 68, 123, 0.26);
    width: 100%;
    text-transform: uppercase;
}

.emigrationlist label span:hover {
    background: rgb(7, 68, 123);
    color: #fff;
}

.emigrationlist input {
    position: absolute;
    top: 20px;
    z-index: -9999;
    visibility: hidden;
}

.emigrationlist input:checked + span {
    background-color: #07447b;
    color: #fff;
}





/* =============================================================================================================================== */

/* =========================== Relation Window New Design =========================== */

/* =============================================================================================================================== */

.relationshipactivecard {
    border-right: none;
    margin-right: 12px;
    float: left;
}

.relationshipactivecardheader {
    background: none;
    background-color: #07447b;
    height: auto;
    display: block;
    padding: 5px 10px;
    font-weight: bold;
    color: #fff;
    font-size: 14px;
}

.relationshipimages {
    display: inline-block;
    float: left;
}

.relationshipimages img {
    width: 45px;
    height: auto;
}

.relationshipduration {
    float: right;
    display: inline-block;
    position: relative;
    top: 11px;
}


.relationshipactivecardbottom {
    display: block;
    width: 380px;
    background: #fff;
}

.relationshipdiscription {
    width: 100%;
    height: auto;
    font-size: 14px;
    padding: 20px;
    float: none;
    overflow: auto;
    color: #2a568a;
    border-bottom: 4px solid #07447b;
}

.relationshipyear,
.relationshipartner {
    display: block;
    text-align: center;
    margin-bottom: 10px;
}

.relationshipactivecardbtngroup {
    width: 100%;
    text-align: center;
    height: auto;
    padding: 10px 15px;
    float: none;
}

.relationshipactivecardbtngroup div {
    display: inline-block;
}

.mainpastrelationshipcard {
    width: calc(100% - 395px);
    height: auto;
    overflow-x: auto;
    overflow-y: hidden;
}

.pastrelationshipcard {
    width: 290px;
    background: none;
    border-right: none;
    margin-right: 12px;
    height: auto;
    float: left;
}

.pastrelationshipcardheader {
    background: none;
    background-color: #848486;
    height: auto;
    display: block;
    padding: 5px 10px;
    color: #fff;
    font-size: 12px;
}

.pastrelationshipcardheader .relationshipduration {
    top: 13px;
}

.pastrelationshipcardbottom {
    background: #ecebeb;
    min-height: 107px;
    padding: 20px 15px;
    height: auto;
    color: #000;
    display: inline-block;
    width: 100%;
    overflow-x: auto;
}

.md-overlay.conformationpopupbackground {
    top: -125px;
    height: 100vh;
}

.relationpopupinformation {
    position: fixed;
    top: 50%;
    left: 50%;
}

.m-t-10 {
    margin-top: 10px;
}





/* =============================================================================================================================== */

/* =========================== Home Screen New Design =========================== */

/* =============================================================================================================================== */

.topnavigation {
    display: inline-block;
    position: absolute;
    top: 15px;
    right: 20px;
}

.settingnlogout {
    display: inline-block;
}

.settingnlogout ul {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.settingnlogout ul li {
    float: left;
    padding: 0px 8px;
    /*font-size: 30px;*/
    font-size: 25px;
    border-right: none;
    color: #fff;
}

/*.settingnlogout ul li:nth-child(2) {
    font-size: 27px;
}*/

.settingnlogout ul li a {
    color: #adadad;
}

.dessignanlifebtn {
    display: inline-block;
    width: 100%;
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.dessignanlifebtn ul {
    display: inline-block;
    text-align: center;
    margin: 0 auto;
    float: none;
    padding: 0;
    width: 50%;
}

.dessignanlifebtn ul:nth-child(2) {
    margin-top: 20px;
    border-top: 1px solid #0acce7;
    padding-top: 30px;
}

.dessignanlifebtn ul li {
    float: none;
    display: inline-block;
    margin: 0;
    vertical-align: top;
}

.dessignanlifebtn ul li:first-child {
    margin-left: 0px;
}

.dessignanlifebtn ul li button {
    background: none;
    border: none;
    text-align: center;
    width: 160px;
    position: relative;
}

.dessignanlifebtn ul li button:focus {
    outline: none;
}

.dessignanlifebtn ul li button:after {
    content: "";
    width: 1px;
    height: 224px;
    display: inline-block;
    position: absolute;
    top: -30px;
    right: -4px;
    background: white;
    background: -moz-linear-gradient(to top, rgba(153, 153, 153, 0) 0%, rgba(72, 72, 72, 0.98) 50%, rgba(72, 72, 72, 0.98) 51%, rgba(153, 153, 153, 0) 100%);
    background: -webkit-linear-gradient(to top, rgba(153, 153, 153, 0) 0%, rgba(72, 72, 72, 0.98) 50%, rgba(72, 72, 72, 0.98) 51%, rgba(153, 153, 153, 0) 100%);
    background: linear-gradient(to top, rgba(153, 153, 153, 0) 0%, rgba(72, 72, 72, 0.98) 50%, rgba(72, 72, 72, 0.98) 51%, rgba(153, 153, 153, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00999999', endColorstr='#00999999', GradientType=1);
}

.dessignanlifebtn ul li:nth-child(3) button:after {
    background: none;
    border-right: 1px solid #045e69;
    height: 192px;
    top: -14px;
}

.dessignanlifebtn ul li:last-child button:after {
    display: none;
}

.dessignanlifebtn ul li button img {
    width: 120px;
    height: auto;
    text-align: center;
}

.dessignanlifebtn ul:nth-child(2) li button img {
    width: 99px;
}

.dessignanlifebtn ul li button span {
    display: block;
    text-align: center;
    width: 90px;
    margin: 0 auto;
    margin-top: 10px;
    font-size: 15px;
}

.dessignanlifebtn ul:nth-child(2) li button span {
    width: 120px;
}


/* =============================================================================================================================== */

/* =========================== Character Design Window New Design =========================== */

/* =============================================================================================================================== */

.characterdesignpopup .countryname {
    text-align: center;
    display: block;
    font-weight: bold;
}

.characterdesignpopup .countrylist {
    height: calc(100vh - 175px);
    width: 100%;
}

.countrylistbtngroup {
    text-align: center;
    margin-top: 20px;
}

.countrylistul {
    width: 100%;
    height: 100%;
    display: inline-block;
    margin: 0px;
    padding: 0px;
    position: relative;
    text-align: center;
}

.countrylist .countrylistul li {
    font-size: 14px;
    padding: 0px;
    display: inline-block;
    width: 20%;
    margin: 5px;
    border-bottom: 0px;
    position: relative;
}


.countrylistul li label {
    padding: 0px;
    font-weight: normal;
    width: 100%;
    margin: 0px;
    cursor: pointer;
    display: table;
}

.countrylistul label span {
    float: left;
    padding: 5px;
    border: 1px solid rgba(7, 68, 123, 0.26);
    width: 100%;
    text-transform: uppercase;
}

.countrylistul label > span:hover {
    background: #bdbdbd;
    color: #000;
}

.countrylistul input {
    position: absolute;
    top: 20px;
    z-index: -9999;
    visibility: hidden;
}

.citylist label a {
    color: #000;
}

.countrylistul input:checked + span,
.countrylistul input:checked + span a {
    background-color: #07447b;
    color: #fff;
    pointer-events: none;
}

.countrylist .political_txt span.characterdesignflags {
    width: 100%;
    border: 1px solid #cecece;
    text-align: center;
    display: table-cell;
    padding: 10px;
    height: 135px;
    vertical-align: middle;
}

.characterdesignflags img {
    width: auto;
    height: 40px;
    display: block;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 10px;
}

.countrylistul label span {
    float: none;
    padding: 0px;
    border: none;
    width: 100%;
    text-transform: uppercase;
    text-align: center;
}

.countrylistul label span span {
    font-weight: bold;
    font-size: 14px;
    border: none;
}







.countrylist .citylist li {
    font-size: 14px;
    padding: 0px;
    display: inline-block;
    width: 31%;
    margin: 5px;
    border-bottom: 0px;
    position: relative;
}


.citylist li label {
    padding: 0px;
    font-weight: normal;
    width: 100%;
    margin: 0px;
    cursor: pointer;
    display: table;
}

.citylist label span {
    float: left;
    padding: 5px;
    border: 1px solid rgba(7, 68, 123, 0.26);
    width: 100%;
    text-transform: uppercase;
}



.citylist .political_txt span.characterdesignflags {
    /*padding: 5px 15px;*/
    height: auto;
}


.countrylist .political_txt span:first-child {
    margin-right: 0px;
    width: 100%;
    border: none;
}



.relegionsiframeinformation .iframefullheight {
    height: calc(100vh - 79px);
    width: 100%;
}


/* =============================================================================================================================== */

/* =========================== SDG Display in Start Screen New Design =========================== */

/* =============================================================================================================================== */

.SDGmainlogo img {
    text-align: center;
    display: inline-block;
    width: 320px;
    height: auto;
    margin-top: 20px;
}


.sdgcountryflagmaindiv {
    margin: 23px 0px;
}

.sdgcountryflagmaindiv div {
    display: block;
}

.sdgcountryflagmaindiv div.countryinformation {
    display: inline-block;
    margin-right: 40px;
}

.margin0 {
    margin: 0px;
}

.sdgcountryflagmaindiv div span {
    display: block;
}

.sdgcountryflagmaindiv img {
    width: auto;
    height: 60px;
    display: block;
    text-align: center;
    margin: 0 auto;
}

.sdgcountryflagmaindiv div span {
    display: block;
    text-align: center;
    font-size: 15px;
    margin: 5px 0px;
}

.sdgicon {
    margin: 0;
    padding: 0;
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: 40px;
}

.sdgicon li {
    text-align: center;
    margin: 0 auto;
    display: inline-block;
}

.sdgicon img {
    display: inline-block;
    width: auto;
    float: none;
    height: 85px;
    margin: 10px;
    position: relative;
}


.modal-open .modal.sdgdeatilspopupmodel {
    background: rgba(0, 0, 0);
    pointer-events: none;
    cursor: none;
}

.modal.sdgdeatilspopupmodel .modal-dialog.sdgdeatilsmodel-dialog {
    pointer-events: auto;
    cursor: default;
}

.sdgdeatilsmodel-dialog {
    width: 1000px;
    /*margin: 20px auto;
    margin-top: 60px;
    height: auto;*/
    margin: 0;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
}

.sdgdeatilsmodel-dialog .modal-content {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px 10px;
    display: inline-block;
    background: #000;
    border: 1px solid #525252;
    border-radius: 0px;
}

.closeiocn {
    position: relative;
    top: -8px;
    right: -8px;
}

.sdgdetails {
    display: inline-block;
    width: 45%;
    float: left;
    padding: 10px 10px 0px;
}

.sdgiconntitle {
    display: block;
    width: 80%;
    height: 111px;
    margin-bottom: 11px;
}

.sdgiconntitle img {
    width: 110px;
    height: auto;
    display: inline-block;
    float: left;
    margin-right: 10px;
}

.sdgtitle {
    font-size: 17px;
}

.sdgdescription {
    border-bottom: 1px solid #525252;
    margin-bottom: 15px;
}

.sdgcomparepopup {
    display: inline-block;
    float: right;
    width: 45%;
    padding: 10px 10px 0px;
}

.SDGpopuplegend {
    font-size: 14px;
    font-weight: bold;
}


.SDGpopuplegendlist {
    display: inline-block;
    width: 100%;
    padding: 0px;
}

.SDGpopuplegendlist li {
    padding: 5px 0px !important;
    margin: 5px 10px;
    float: left;
}

.SDGpopuplegendlist li:first-child {
    margin-left: 0px;
}

.SDGpopuplegendlist li:last-child {
    margin-right: 0px;
}

.sdgcomparepopuptable tr td {
    border-bottom: 1px solid #525252;
    border-top: 0px;
    text-align: center;
    padding: 5px;
}

.sdgcomparepopuptable tbody tr:last-child td {
    border-bottom: 0px;
}


.sdgcomparepopuptable tbody tr td:nth-child(even) {
    font-size: 18px;
    /*position: relative;*/
    /*top: -6px;*/
    /*top: 0px;*/
}

.sdgcomparepopuptable tbody tr td:nth-child(3) {
    font-size: 12px;
}

.sdgcomparepopuptable tbody tr td img.SdgRed {
    background: url(../assets/sdgicon/red.png);
    width: 11px;
    height: auto;
    display: inline-block;
    background-size: cover;
    background-position: top left;
    background-repeat: no-repeat;
}

.sdgcomparepopuptable tbody tr td img.SdgNeutral {
    background: url(../assets/sdgicon/gray.png);
    width: 11px;
    height: auto;
    display: inline-block;
    background-size: cover;
    background-position: top left;
    background-repeat: no-repeat;
}

.sdgcomparepopuptable tbody tr td img.SdgGreen {
    background: url(../assets/sdgicon/green.png);
    width: 11px;
    height: auto;
    display: inline-block;
    background-size: cover;
    background-position: top left;
    background-repeat: no-repeat;
}

.sdgcomparepopuptable tbody tr td img.SdgYellow {
    background: url(../assets/sdgicon/yellow.png);
    width: 11px;
    height: auto;
    display: inline-block;
    background-size: cover;
    background-position: top left;
    background-repeat: no-repeat;
}




/* =============================================================================================================================== */

/* =========================== SDG Start Game Design =========================== /*
/* =============================================================================================================================== */

.SDGcreatemodelpopupstartscreen.sdgdeatilspopupmodel.createsdglifesdgchoose {
    background: rgba(0, 0, 0, 0.72);
    z-index: 1479;
}

.modal.sdgdeatilspopupmodel.startscreensdgdetailpopup {
    background: rgba(0, 0, 0, 0.72);
}

.SDGcreatemodelpopupstartscreen.sdgdeatilspopupmodel .sdgindicatorsdetailspopup {
    pointer-events: auto;
    cursor: auto;
}

.SDGcreatemodelpopupstartscreen.sdgdeatilspopupmodel.createsdglifesdgchoose .closeiocn {
    /*right: -14px;
    top: -16px;*/
    right: 12px;
    top: 8px;
}

.startlifebottomsection.sdggamestart {
    display: inline-block;
    position: relative;
    height: auto;
    text-align: center;
    width: 90%;
    margin: 0 auto;
    float: none;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: auto;
    cursor: auto;
}

.sdggamestart .amenitiesdisplay {
    display: inline-block;
    text-align: center;
    margin: 0 auto;
    width: 60%;
    float: none;
}

.SDGcreatemodelpopupstartscreen.sdgdeatilspopupmodel .sdglifecreatemaindiv {
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 95%;
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid #cccccc36;
    border-radius: 0px;
    cursor: default;
    pointer-events: auto;
}

.SDGcreatemodelpopupstartscreen.sdgdeatilspopupmodel .sdglifecreatemaindiv .SDGmainlogo {
    margin-bottom: 20px;
}

.sdggamestart .sdgicon {
    margin: 10px 0px;
    padding: 0;
    display: inline-block;
    width: 100%;
    text-align: center;
}

sdggamestart .sdgicon {
    margin: 10px 0px;
    padding: 0;
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: 0;
}

.sdggamestart .sdgicon li {
    text-align: center;
    margin: 0 auto;
    display: inline-block;
    float: left;
    position: relative;
}

.sdggamestart .sdgicon li a {
    cursor: pointer;
    display: inline-block;
}

.sdggamestart .sdgicon li a:hover:after {
    content: "";
    background: #000;
    width: 100%;
    height: 100%;
    display: inline-block;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.4;
}

.SDGcreatemodelpopupstartscreen.sdgdeatilspopupmodel .sdglifecreatemaindiv .sdgicon img {
    display: inline-block;
    width: 115px;
    float: none;
    height: auto;
    margin: 10px;
    position: relative;
}

.sdgindicatorsdetailspopup {
    width: 1000px;
    margin: 0;
    height: 530px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
    border: 1px solid #292929;
}

.sdgindicatorsdetailspopup .modal_bg {
    height: 100%;
    overflow: hidden;
    border-radius: 0px;
}

.sdgindicatorsdetailspopup .modal_bg > div {
    display: block;
    width: 100%;
    height: 100%;
}

.sdgindicatorsdetailspopup .modal-body {
    display: inline-block;
    padding: 0px;
}

.SDGindicatorsdetailsdiv {
    padding: 15px 0px;
}

.SDGgoalindicators {
    background: #292929;
    text-align: left;
    color: #fff;
    height: 100%;
    padding: 0px;
    position: relative;
}

.SDGcreatemodelpopupstartscreen.sdgdeatilspopupmodel.createsdglifesdgchoose .SDGgoalindicators .closeiocn {
    top: 5px;
    right: 10px;
    display: block;
    width: 100%;
    text-align: right;
    margin-bottom: 20px;
}

.sdgindicatorsdetailspopup .SDGmainlogo img {
    text-align: center;
    display: inline-block;
    width: 273px;
    height: auto;
    margin-top: 0px;
    margin-left: 20px;
}

.SDGgoaldetails {
    margin-top: 16px;
    text-align: left;
    padding: 10px 30px;
}

.SDGgoalimage {
    text-align: left;
    display: block;
}

.sdgindicatorsdetailspopup .SDGgoalimage img {
    width: 135px;
    height: auto;
    display: inline-block;
    text-align: left;
}

.SDGgoaldetailstext h5 {
    color: rgb(7, 225, 255);
    font-size: 20px;
    font-weight: 400;
}

.SDGgoaldeatilstextmain {
    font-size: 12px;
    font-weight: normal;
}

.SDGgoalindicatorslist {
    padding: 0px;
    padding-bottom: 10px;
    margin-bottom: 20px;
    height: calc(100vh - 250px);
    overflow: auto;
    display: inline-block;
}

@media (min-height: 700px) and (max-height:800px) {
    .SDGgoalindicatorslist {
        height: calc(100vh - 350px);
    }
}

@media (min-height: 900px) and (max-height: 1000px) {
    .SDGgoalindicatorslist {
        height: calc(100vh - 507px);
    }
}

@media (min-height: 1010px) and (max-height: 1050px) {
    .SDGgoalindicatorslist {
        height: calc(100vh - 612px);
    }
}

.SDGgoalindicatorslist ul {
    margin: 0px;
    padding: 0px;
}

.SDGgoalindicatorslist ul li div {
    padding: 10px 30px;
}

.SDGgoalindicatorslist .informationSDGgoalindicatorslist {
    font-size: 13px;
    color: #07e0fe;
    font-style: italic;
}


.SDGmainscreentextdiscription {
    font-size: 14px;
    color: #07e0fe;
    /*font-style: italic;*/
}

.SDGgoalindicatorslist ul li {
    border-bottom: 1px solid rgb(86, 86, 86);
}

.SDGgoalindicatorslist.poor ul li {
    border-bottom: 1px solid rgb(184, 0, 0);
}

.SDGgoalindicatorslist.fair ul li {
    border-bottom: 1px solid #f2c314;
}

.SDGgoalindicatorslist.verygood ul li {
    border-bottom: 1px solid #67a849;
}

.SDGgoalindicatorslist.novalue ul li {
    border-bottom: 1px solid #a1a1a1;
}

.SDGgoalindicatorslist label {
    cursor: pointer;
    margin: 0px;
    width: 100%;
}

.SDGgoalindicatorslist input {
    position: absolute;
    top: 20px;
    z-index: -9999;
    display: none;
}

.SDGgoalindicatorslist input + div.SDGindicatorsname {
    width: 100%;
    display: inline-block;
    position: relative;
}

.SDGgoalindicatorslist input:checked + div.SDGindicatorsname {
    background-color: #000;
    color: #fff;
}

.SDGgoalindicatorslist input:checked + div.SDGindicatorsname:after {
    content: "\f00c";
    font: normal normal normal 14px/1 FontAwesome;
    position: absolute;
    right: 8px;
    top: 11px;
    color: #06d0ec;
    font-size: 18px;
}

.SDGgoalindicatorslist.poor.SDGindicatorsCountryListdiv input:checked + div.SDGindicatorsname:after {
    color: #b80000;
    top: 6px;
    right: 0px;
}

.SDGgoalindicatorslist.fair.SDGindicatorsCountryListdiv input:checked + div.SDGindicatorsname:after {
    top: 6px;
    right: 0px;
    color: #f2c314;
}

.SDGgoalindicatorslist.verygood.SDGindicatorsCountryListdiv input:checked + div.SDGindicatorsname:after {
    top: 6px;
    right: 0px;
    color: #67a849;
}

.SDGgoalindicatorslist.novalue.SDGindicatorsCountryListdiv input:checked + div.SDGindicatorsname:after {
    top: 6px;
    right: 0px;
    color: #a1a1a1;
}

.SDGgoalindicatorslist input:hover + div.SDGindicatorsname {
    background: rgba(0, 0, 0, 0.53);
}

.SDGgoalindicatorsbtn {
    position: absolute;
    bottom: 0px;
    right: 0px;
    padding: 0px;
}

.SDGcountrychoose .SDGgoalindicatorsbtn {
    position: relative;
}

.SDGgoalindicatorsbtn .btn_sk_intro {
    top: 0px;
    float: right;
}

.SDGgoalindicatorsbtn .btn_sk_intro[disabled] {
    opacity: 0.8;
    cursor: not-allowed;
    background: #ccc;
}

.sdggamestart .amenitiesdisplay.SDGcountrychoose .SDGmainlogo {
    text-align: center;
    display: inline-block;
    width: 100%;
}


.sdggamestart .amenitiesdisplay.SDGcountrychoose .closeiocn {
    top: 10px;
    right: 0px;
}

.SDGImage {
    width: 30%;
    height: auto;
    display: inline-block;
    background: rgba(0, 0, 0, 0.6784313725490196);
    padding: 0px 0px;
}

.SDGImage img {
    width: 80px;
    height: auto;
    text-align: center;
    margin: 0 auto;
}

.SDGselectortext {
    margin-top: 10px;
}

.SDGIndicatorsCountrylistmain {
    background: transparent;
    padding: 15px 0px;
    width: 100%;
    margin: 0 auto;
}

.SDGIndicatorchoosename {
    text-align: center;
    margin-bottom: 15px;
    border-bottom: 1px solid #2f2f2f;
}

.SDGIndicatorchoosename h5 {
    font-size: 22px;
    color: rgb(7, 225, 255);
    font-weight: bold;
    display: inline-block;
}

.SDGIndicatorchoosename p {
    font-size: 12px;
    color: rgb(128, 128, 128);
    font-style: italic;
    display: inline-block;
    margin-left: 15px;
}

span.poor {
    color: #b80000;
    text-decoration: underline;
    font-weight: bold;
}

span.fair {
    color: #f2c314;
    text-decoration: underline;
    font-weight: bold;
}

span.verygood {
    color: #67a849;
    text-decoration: underline;
    font-weight: bold;
}

span.novalue {
    color: #a1a1a1;
    text-decoration: underline;
    font-weight: bold;
}

.SDGIndicatorchoosename h4 {
    color: rgb(255, 255, 255);
}

.sdggamestart .amenitiesdisplay.SDGcountrychoose {
    width: 100%;
    top: 0;
    transform: none;
    height: 100%;
    border: 1px solid #292929;
}

.SDGgoalindicatorslist.SDGindicatorsCountryListdiv {
    height: auto;
    width: 17%;
    text-align: left;
    overflow: hidden;
    margin-bottom: 10px;
    padding: 0px;
    margin-right: 30px;
}

.SDGgoalindicatorslist.SDGindicatorsCountryListdiv .headlineSDGdivide {
    padding: 5px 10px;
    text-align: left;
}

.SDGgoalindicatorslist.SDGindicatorsCountryListdiv.poor .headlineSDGdivide {
    background: #b80000;
}

.SDGgoalindicatorslist.SDGindicatorsCountryListdiv.fair .headlineSDGdivide {
    background: rgb(242, 195, 20);
}

.SDGgoalindicatorslist.SDGindicatorsCountryListdiv.verygood .headlineSDGdivide {
    background: rgb(103, 168, 73);
}

.SDGgoalindicatorslist.SDGindicatorsCountryListdiv.novalue .headlineSDGdivide {
    background: rgb(161, 161, 161);
}

.SDGgoalindicatorslist.SDGindicatorsCountryListdiv ul {
    height: calc(100vh - 445px);
    overflow: auto;
    padding: 5px 0px;
}


.SDGgoalindicatorslist.SDGindicatorsCountryListdiv ul li div {
    padding: 5px 10px;
}

.SDGgoalindicatorslist.SDGindicatorsCountryListdiv input:checked + div.SDGindicatorsname {
    background-color: rgba(5, 222, 252, 0.8);
    color: #000;
}

.SDGgoalindicatorslist.poor.SDGindicatorsCountryListdiv input:checked + div.SDGindicatorsname,
.SDGgoalindicatorslist.fair.SDGindicatorsCountryListdiv input:checked + div.SDGindicatorsname,
.SDGgoalindicatorslist.verygood.SDGindicatorsCountryListdiv input:checked + div.SDGindicatorsname,
.SDGgoalindicatorslist.novalue.SDGindicatorsCountryListdiv input:checked + div.SDGindicatorsname {
    background-color: rgb(25, 25, 25);
    color: #fff;
}

.SDGgoalindicatorslist.SDGindicatorsCountryListdiv input:hover + div.SDGindicatorsname {
    background: rgba(4, 178, 202, 0.47);
    color: #000;
}

.SDGgoalindicatorslist.SDGindicatorsCountryListdiv.poor input:hover + div.SDGindicatorsname {
    background: rgb(78, 0, 0);
    color: #fff;
}

.SDGgoalindicatorslist.SDGindicatorsCountryListdiv.fair input:hover + div.SDGindicatorsname {
    background: rgb(117, 94, 9);
    color: #fff;
}

.SDGgoalindicatorslist.SDGindicatorsCountryListdiv.verygood input:hover + div.SDGindicatorsname {
    background: rgb(46, 76, 33);
    color: #fff;
}

.SDGgoalindicatorslist.SDGindicatorsCountryListdiv.novalue input:hover + div.SDGindicatorsname {
    background: rgb(66, 66, 66);
    color: #fff;
}

.sdgindicatorsdetailspopup.SDGbornconformationpopup {
    height: 280px;
}

.sdgindicatorsdetailspopup .modal-body {
    display: inline-block;
    padding: 0px;
    height: 100%;
}

.sdgindicatorsdetailspopup .modal-body p {
    font-size: 15px;
}

.sdgindicatorsdetailspopup .modal-body h5 {
    font-size: 21px;
    margin-bottom: 15px;
}

.SDGbornconformationdiv .SDGgoalindicatorsbtn {
    position: relative;
    padding: 0px;
    text-align: center;
    margin: 0 auto;
    float: none;
    display: inline-block;
    width: 100%;
}

.SDGbornconformationdiv .SDGgoalindicatorsbtn .btn_sk_intro {
    top: 0px;
    float: none;
}






/* =============================================================================================================================== */

/* =========================== Organ Donation Certificate =========================== */

/* =============================================================================================================================== */

.organdonationcertificatediv {
    display: inline-block;
    float: right;
    position: absolute;
    top: 10px;
    right: 19px;
    cursor: pointer;
}

#organdonationcertificatepopup {
    /* background: url(assets/images/organcertificate/certificate_bg.jpg) rgba(0, 0, 0, 0.7215686274509804); */
    background: rgba(0, 0, 0, 0.7215686274509804);
}

#organdonationcertificatepopup .modal-content {
    background: none;
    box-shadow: none;
    -webkit-box-shadow: none;
    perspective: 900px;
    border: none;
}

.certificatemanindiv .closeiocn {
    right: -12px;
    top: -14px;
    position: absolute;
}

.downloadcertificate {
    font-size: 21px;
    text-decoration: underline;
    margin-bottom: 10px;
    background: #000;
    padding: 10px 40px;
    position: absolute;
    right: -320px;
    top: 60px;
}

.downloadcertificate i {
    margin-right: 10px;
}

#organdonationcertificatepopup .certificatemanindiv table {
    margin-bottom: 0px;
    width: 744px;
    text-align: center;
    margin: 0px auto;
}

.tab-content .certificatemanindiv.active {
    overflow: auto;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

.certificatemanindiv {
    width: 600px;
    display: inline-block;
    text-align: center;
    margin: 0 auto;
    padding: 0;
    float: none;
    /*overflow: hidden;*/
}

#organdonationcertificatepopup .certificatemanindiv {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 744px;
    /* transform: translate3d(-50%, -24%, -430px); */
}

@media (min-height: 600px) and (max-height:710px) {
    #organdonationcertificatepopup .certificatemanindiv {
        transform: translate3d(-50%, -33%, -545px);
    }
}

.certificatemanindiv table {
    margin-bottom: 0px;
    width: 600px;
    text-align: center;
    margin: 15px auto;
}

.certificatemanindiv table tbody tr td {
    border: none;
    line-height: 0;
    padding: 0;
    margin: 0;
    vertical-align: middle;
    text-align: center;
    color: #000;
}

.certificatemiddlesection {
    background: url(../images/organcertificate/certificate_bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 744px;
    /* max-height: 628px; */
    background-position: top left;
    height: 500px;
    position: relative;
}

.certificatemiddlesection > div {
    padding-top: 9px;
    line-height: normal;
    width: 90%;
    text-align: center;
    margin: 0 auto;
    float: none;
    display: block;
}

.certificatemiddlesection > div:last-child {
    margin-bottom: 12px;
}

.certificatemiddlesection p {
    font-size: 18px;
    line-height: 30px;
    color: #000;
    text-align: center;
}

.certificatemiddlesection .certificatetext,
.certificatemiddlesection .quote,
.certificatemiddlesection .signature {
    width: 80%;
}

.organsdivcertification {
    display: inline-block;
    overflow: auto;
    padding: 10px 5px;
    width: 80%;
    margin: 0 auto;
    text-align: center;

}

.organimage {
    display: inline-block;
}

.organimage > div {
    display: inline-block;
    width: 100px;
    height: 100px;
    background: #fff;
    border-radius: 20px;
    padding: 10px;
    margin: 10px;
    -webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.25);
    box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.25);
}

.quote {
    margin-top: 0px;
    font-size: 34px;
    color: #8d8d8d;
    font-family: 'Kalam', cursive;
    opacity: 0.7;
}

.signature {
    text-align: left;
    position: absolute;
    bottom: 10px;
}

.signature p {
    font-size: 14px;
    line-height: normal;
}

.signature p b {
    font-weight: bold;
    font-size: 16px;
}

.certificatemanindiv table tbody tr td.certificatebottom {
    width: 100%;
    height: 54px;
    background: #fff;
    padding: 20px;
    text-align: center;
    font-size: 27px;
    font-weight: normal;
    vertical-align: middle;
    letter-spacing: 8px;
}

.certificatemanindiv table tbody tr td.certificatebottom a {
    color: #898989;
}

.organimage img {
    width: 80%;
    height: auto;
    float: none;
    text-align: center;
    margin: 0 auto;
}

.sdgselectedlogo img{
    width: auto;
    height: 60px;
    position: absolute;
    right: 224px;
    top: 57px;
    z-index: 100;
}

.sdgselectedlogo .sdg1{
    background: url(../assets/sdgicon/E_SDG%20goals_icons-individual-rgb-1.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.sdgselectedlogo .sdg2{
    background: url(../assets/sdgicon/E_SDG%20goals_icons-individual-rgb-2.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.sdgselectedlogo .sdg3{
    background: url(../assets/sdgicon/E_SDG%20goals_icons-individual-rgb-3.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.sdgselectedlogo .sdg4{
    background: url(../assets/sdgicon/E_SDG%20goals_icons-individual-rgb-4.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.sdgselectedlogo .sdg5{
    background: url(../assets/sdgicon/E_SDG%20goals_icons-individual-rgb-5.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.sdgselectedlogo .sdg6{
    background: url(../assets/sdgicon/E_SDG%20goals_icons-individual-rgb-6.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.sdgselectedlogo .sdg7{
    background: url(../assets/sdgicon/E_SDG%20goals_icons-individual-rgb-7.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.sdgselectedlogo .sdg8{
    background: url(../assets/sdgicon/E_SDG%20goals_icons-individual-rgb-8.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.sdgselectedlogo .sdg9{
    background: url(../assets/sdgicon/E_SDG%20goals_icons-individual-rgb-9.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.sdgselectedlogo .sdg10{
    background: url(../assets/sdgicon/E_SDG%20goals_icons-individual-rgb-10.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.sdgselectedlogo .sdg11{
    background: url(../assets/sdgicon/E_SDG%20goals_icons-individual-rgb-11.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.sdgselectedlogo .sdg12{
    background: url(../assets/sdgicon/E_SDG%20goals_icons-individual-rgb-12.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.sdgselectedlogo .sdg13{
    background: url(../assets/sdgicon/E_SDG%20goals_icons-individual-rgb-13.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.sdgselectedlogo .sdg14{
    background: url(../assets/sdgicon/E_SDG%20goals_icons-individual-rgb-14.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.sdgselectedlogo .sdg15{
    background: url(../assets/sdgicon/E_SDG%20goals_icons-individual-rgb-15.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.sdgselectedlogo .sdg16{
    background: url(../assets/sdgicon/E_SDG%20goals_icons-individual-rgb-16.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.sdgselectedlogo .sdg17{
    background: url(../assets/sdgicon/E_SDG%20goals_icons-individual-rgb-17.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/*============================================================================================================================*/
                    /* =========================== Game New Screen New Design =========================== */
/*===========================================================================================================================*/

/*#bugreporthover.blue{
    top: inherit;
    bottom: 55px;
    right: 0px;
}

.gamemainscreen{
    padding: 5px 0px;
}

.myself {
    margin-top: 0;
}

.glow {
    background-position: 0%, 99.9%;
    background-repeat: no-repeat, no-repeat;
    padding: 0px 0px 0px 0px;
    background-position-y: top;
}

.right_nav {
    position: relative;
    right: 0px;
    padding: 0 0px;
}

.accoholder{
    position: relative !important;
    height: calc(100vh - 67px);
}

.countrydetailsnLifesummary {
    margin-top: 0px;
    background: url(../assets/image/mainscreen/tab-accordion-background.jpg);
    padding: 1px 0px;
    background-repeat: repeat-x;
    width: 100%;
    background-position: left top;
}

.countrydetailsnLifesummary:before {
    display: none;
}

.countrycapsuledetailstable tbody.scrollable {
    height: calc(100vh - 390px);
}


.lstxt {
    height: calc(100vh - 100px);
    margin-top: 5px;
}

.logginasmaindiv{
    background: url(../assets/image/mainscreen/tab-accordion-background.jpg);
    padding: 5px 15px;
    background-repeat: repeat-x;
    width: 100%;
    background-position: left top;
    font-size: 12px;
}

.gameactionbtns{
    background: url(../assets/images/uti_bg.jpg) repeat-x;
    width: 100%;
    padding: 5px 15px;
    background-position: left top;
    margin-top: 0px;
    position: relative;
    top: 0px;
}

.gameactionbtns .gamebuttongroup {
    padding: 0px;
    margin: 0px;
    display: inline-block;
    position: relative;
    top: 4px;
    width: 100%;
}

.gameactionbtns .gamebuttongroup li{
    float: left;
    padding: 0 10px;
    cursor: pointer;
}

.gameactionbtns .gamebuttongroup li:first-child{
    padding-left: 0px;
}

.gameactionbtns .gamebuttongroup li:last-child{
    padding-right: 0px;
}


.topsectionbackground{
    background: url(../assets/image/mainscreen/background1.png);
    background-repeat: repeat-x;
    display: inline-block;
    width: 100%;
    max-height: 90px;
}

.topsectionbackground:after {
    background: url(../assets/image/mainscreen/background1.png);
    display: inline-block;
    width: 100%;
    height: 25px;
    background-repeat-x: repeat;
    position: relative;
    content: "";
    transform: rotate(180deg);
    top: -24px;
    opacity: 0.5;;
}

.brandinglogo{
    display: inline-block;
    float: left;
    padding: 15px;
    max-width: 80px;
    height: 90px;
}



.myself {
    background: transparent;
    border-radius: 4px;
    padding-left: 0;
    height: 90px;
    margin-top: 0;
    transition: all linear .15s!important;
    border: none;
}

.iam {
    background: -moz-linear-gradient(top, rgba(30,87,153,0) 0%, rgba(4,41,74,1) 50%, rgba(125,185,232,0) 100%);
    background: -webkit-linear-gradient(top, rgba(30,87,153,0) 0%,rgba(4,41,74,1) 50%,rgba(125,185,232,0) 100%);
    background: linear-gradient(to bottom, rgba(30,87,153,0) 0%,rgba(4,41,74,1) 50%,rgba(125,185,232,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001e5799', endColorstr='#007db9e8',GradientType=0 );

    border-radius: 0px;
    height: 100%;
    color: #fff;
    text-align: center;
    padding: 20px 0px;
    font-size: 1.9rem;
    position: relative;
    width: 80px;
    display: inline-block;
    line-height: 20px;
}

.iam:before {
    content: "";
    display: inline-block;
    background: url(../assets/image/mainscreen/border-gradient.png);
    width: 1px;
    height: 90px;
    position: absolute;
    left: 0px;
    top: 0px;
    background-repeat: no-repeat;
    opacity: 0.5;
}

.iam:after {
    background: url(../assets/image/mainscreen/v-line-divider.png);
    content: "";
    position: absolute;
    display: inline-block;
    width: 7px;
    height: 90px;
    background-repeat: no-repeat;
    right: -7px;
    top: 0px;
}

.selfcapsule {
    width: 85%;
    display: inline-block;
    padding: 0px 10px;
    float: right;
}

.self_info {
    border-bottom: 1px dotted #185d9e;
    font-size: 18px;
    padding: 5px;
}

.your_info {
    color: #fff;
}

.virtualplayerinfo {
    padding: 5px;
    font-weight: bold;
    font-size: 12px;
    display: inline-block;
}

.virtualplayerinfo span {
    display: block;
}

.vertualplayerreligionnotherinformation {
    font-size: 12px;
    text-align: right;
    padding: 4px 5px;
    font-weight: bold;
}

.vertualplayerreligionnotherinformation span span{
    color: #969696;
    display: inline-block;
    width: initial;
}

.family_box {
    border-top: 2px solid #12477f;
}

.lifestatusbox {
    right: 0;
    font-size: 11px;
    font-weight: 100;
    text-align: center;
    padding: 15px 4px;
    border: none;
    background: transparent;
    color: #fff;
    line-height: normal;
    min-width: 43px;
    border-radius: 4px 0 0 4px;
    height: 100%;
    position: relative;
}

.lifestatusbox:before {
    content: "";
    background: url(../assets/image/mainscreen/border-gradient.png);
    position: absolute;
    left: 0px;
    top: 0px;
    width: 1px;
    height: 90px;
    opacity: 0.5;
}

.displayinline{
    display: inline-block;
}

.middelsectionofgame {
    display: inline-block;
    width: 100%;
    position: relative;
    height: calc(100vh - 135px);
    padding: 10px 0px;
}

.surround_data {
    background: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    padding: 10px 0px;
    margin: 0px;
    width: 100%;
    display: inline-block;
    text-align: center;
}

.surround_data ul {
    display: inline-block;
    padding: 0px;
    margin: 0 auto;
    width: 80%;
    text-align: center;
}

.surround_data ul li {
    display: inline-block;
    width: 70px;
    padding-top: 3px;
    text-align: center;
    border-left: 1px solid #333230;
    float: none;
}

.surround_data ul li:last-child {
    border-right: 1px solid #333230;
}

.surround_data ul li img {
    opacity: 0.9;
}

.surround_data ul li a {
    opacity: 0.7;
}

.bottomsectionofgame {
    display: inline-block;
    position: relative;
    width: 100%;
    height: 138px;
}

.bottom_action {
    bottom: 0px;
    border: none;
    min-height: 0px;
    background: url(../assets/images/uti_bg.jpg) repeat-x;
    border-radius: 0px;
    margin-left: 0px;
    height: 35px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    position: relative;
    width: 100%;
    margin: 0px;
    padding: 0px;
}

.bottom_action_group {
    display: table;
    margin: 0px;
    margin-top: 0px;
    padding: 0px;
    width: 100%;
}

.bottom_action_group li {
    display: table-cell;
    width: 8%;
    color: #fff;
    text-align: center;
    font-size: 12px;
    text-transform: capitalize;
    position: relative;
    padding-top: 0px;
}

.marqueedisplay li.marqueedisplayli::before {
    top: -5px;
}

.marqueedisplay marquee {
    top: -22px;
    width: 100px;
    border-left: 1px solid #333230;
    border-right: 1px solid #333230;
}

.bottom_action_group li span {
    display: block;
    cursor: pointer;
    width: 90%;
    text-align: center;
    margin: 0 auto;
    top: 0px;
    position: relative;
}

.bottom_action_group li.marqueedisplayli img {
    width: auto;
    height: 35px;
    margin: 0px;
}

.bottom_action_group li span span.bottom_action_label {
    width: initial;
    display: inline-block;
    text-align: center;
    margin: 0;
    top: 0px;
}

.age_btn, .next_evt_btn, .dead_btn {
    margin: 0px;
    position: absolute;
    top: -115px;
    left: 0px;
}

.bottom_action_group li span.small_age {
    display: block;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    color: #fff!important;
    font-weight: bold;
    margin-left: 25px;
    padding: 5px;
    margin-top: -6px;
    top: 0px;
}



.mainscreenindication {
    display: inline-block;
    padding: 0;
    width: 100%;
    height: 50px;
    position: absolute;
    bottom: 120px;
    text-align: center;
    left: 0;
}

.mainscreenindication ul {
    padding: 0;
    display: inline-block;
    width: 90%;
    position: relative;
    height: 100%;
    border: 0px;
    left: 0px;
    margin: 0 auto;
    text-align: center;
}

.mainscreenindication.indication ul li {
    display: inline-block;
    width: 77px;
    height: 35px;
    padding-left: 0px;
    text-transform: uppercase;
    background-image: none;
    background-repeat: no-repeat;
    text-align: center;
    transform: rotate(-90deg);
    position: relative;
    top: 0px;
    left: 0px;
}

.mainscreenindicationdiv {
    display: inline-block;
    text-align: center;
    width: 100%;
    position: relative;
}

.mainscreenindicationdiv .tooltip{
    transform: rotate(90deg);
}


.mainscreenindication .indicatorlabel{
    transform: rotate(0deg);
    transform-origin: right top 0;
    text-align: right;
    font-size: 11px;
    position: absolute;
    left: 2px;
    bottom: -7px;
}

.mainscreenindication .ui-progressbar {
    height: 10px;
    margin-top: 0.6em;
    margin: 0.6em 0.2em;
    border: 1px solid;
    border-color: #292929;
    background: #292929;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

.mainscreenindication .ui-progressbar .ui-progressbar-value {
    position: relative;
}

.mainscreenindication .ui-progressbar .ui-progressbar-label {
    text-align: center;
    height: 100%;
    width: initial;
    left: 55px;
    bottom: 21px;
    font-size: 11px;
    position: absolute;
    display: inline-block !important;
    display: none;
    font-weight: 100;
    transform: rotate(90deg);
}

.indicatorimage {
    width: 20px;
    height: 20px;
    display: inline-block;
}

.indicatorsimage{
    height: 27px;
    width: 30px;
    display: inline-block;
    transform: rotate(90deg);
    position: absolute;
    top: 0px;
    left: 4px;
    opacity: 0.7;
}

.health{
    background: url(../assets/image/mainscreen/HEALTH.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.middelsectionofgame .eventcentered {
    top: calc(100% - 60%);
}

.eventbox .event_front {
    display: inline-block;
    width: 100%;
    height: 100%;
    border: none;
    background: rgba(0, 0, 0, 0.5);
}

.eventbox .event_front:before {
    content: "";
    background: url(../assets/image/mainscreen/event-leftborder.png);
    position: absolute;
    display: inline-block;
    width: 25px;
    height: 100%;
    left: -24px;
}

.eventbox .event_front:after {
    content: "";
    background: url(../assets/image/mainscreen/event-rightborder.png);
    position: absolute;
    display: inline-block;
    width: 25px;
    height: 100%;
}

.eventbox .exp_box {
    margin: 0px;
}

.eventbox .eventboxmainslider {
    background: transparent;
    color: #726f70;
    font-size: 12px;
}

.eventbox .event_text {
    font-size: 16px;
    color: #fff;
}

.eventbox .exp_txt {
    background: transparent;
    color: #999999;
    padding: 0px 10px;
    border-bottom: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.eventbox .expressiondiv {
    padding: 0px 15px;
    background: rgba(53, 51, 52, 0.48);
}

.eventbox .writeeventbox {
    padding: 10px 0px;
}

.eventbox .factoid_area {
    background: none;
    color: #726f70;
    padding: 7px 10px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    overflow: hidden;
}

.eventbox .eventpostbtn .btn[disabled] {
    background: none;
    border: 1px solid #006ca4;
    border-radius: 0px;
    text-shadow: none;
    color: #d5d5d5;
    opacity: 0.5;
}

.eventbox .eventpostbtn .btn.btn-default {
    background: none;
    text-shadow: none;
    color: #d5d5d5;
    border: 1px solid #006ca4;
    border-radius: 0px;
    height: 55px;
}

.eventbox .event_left_arrow, .eventbox .event_right_arrow {
    top: 41%;
    background: transparent;
}

.eventbox .slick-prev {
    background: transparent;
}

.sdgiconlist1.sdgiconlist + .sdgiconlist {
    height: calc(100vh - 345px);
}

.sdgparametersshow tbody.scrollable {
    height: calc(100vh - 540px);
}*/