/* CSS Document */
html {
    height:100%;
    overflow-x: hidden;
}

body {
    background-color: #000;
    width: 100%;
    min-width: 1170px;
    height: 100%;
    display: block;
    position: relative;
    margin:0px;
    color: #FFF;
    font-family:'Conv_MuseoSans_300',Sans-Serif;
}

body.modal-open {
    overflow: visible;
}

hr {
    border-top: 1px solid rgb(0, 177, 169);
}

.login-body {
    background-image: url(../images/signin-bg.png);
    background-size: auto;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: 40%;
}

.worldmap {
    background-image: url(../assets/bg-wmap.svg);
    background-size: auto;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: 160px;
}

.noworldmap {
    background-color: #000;
}

#main {
    position: relative;
    width: 1170px;
    height: 100%;
    margin: auto;
}

.main {
    position: relative;
    width: 1170px;
    margin: auto;
}

.main2 {
    position: relative;
    width: 100%;
}

.login-title {
    font-size: 18px;
    font-family:'Conv_MuseoSans_900',Sans-Serif;
    color: rgb(0, 177, 169);
    text-align: center;
    margin-top: 30px;
}

.login-sub-title {
    font-size: 20px;
    text-align: center;
}

.login-form {
    max-width: 500px;
    margin: auto;
    margin-top: 30px;
}

.login-form-box {
    width: 500px;
    height: 360px;
    padding: 60px;
    background-image: url("../assets/signup-shape01.svg");
    background-size: auto;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
    position: relative;
    z-index: 0;
}

.login-form-box:after {
    content: "";
    display: block;
    width: 500px;
    height: 360px;
    background-image: url("../assets/signup-shape02.png");
    background-size: auto;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.login-form .input-group {
    margin-bottom: 20px;
}

.login-form .input-group-addon .userid {
    width: auto;
    height: 22px;
}

.login-form .input-group-addon .password {
    width: auto;
    height: 21px;
}

.form-control {
    background-color:rgba(0, 0, 0, 0);
    color: #FFF;
    padding: 6px 0;
    border: 0;
    border-bottom: 1px solid rgb(0, 177, 169);
    border-radius: 0;
}

.filter-box .form-control {
    color: rgb(96, 117, 120);
}

.form-control::-webkit-input-placeholder {
    color: #FFF !important;
}

.form-control:-moz-placeholder { /* Firefox 18- */
    color: #FFF !important;  
}

.form-control::-moz-placeholder {  /* Firefox 19+ */
    color: #FFF !important;  
}

.form-control:-ms-input-placeholder {  
    color: #FFF !important;  
}

.input-group-addon {
    color: rgb(96, 117, 120);
    background-color: rgba(0, 0, 0, 0);
    border: 0;
    border-bottom: 1px solid rgb(0, 177, 169);
    border-radius: 0;
}

select {      
   -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

option {
    color: #000;
}

.select {
    position:relative;   
    display: -moz-inline-stack;
    vertical-align: middle;
    zoom: 1;
}

.select:after {
    font: normal normal normal 14px/1 FontAwesome;
    content:"\f0d7";
    color: rgb(0, 177, 169);
    padding: 12px 8px;
    position: absolute; right: 0; top: 0;
    z-index: 1;
    text-align: center;
    width: 10%;
    height: 100%;      
    pointer-events: none;
    box-sizing: border-box;   
}

.daterangepicker {
    color: #000;
}

.btn-custom {
    width: 100%;
    font-family:'Conv_MuseoSans_700',Sans-Serif;
    color: rgb(0, 177, 169);
    border: 0;
    background-color:rgba(0, 0, 0, 0);
}

.btn-custom:hover, .btn-custom:focus {
    font-family:'Conv_MuseoSans_700',Sans-Serif;
    color: rgb(0, 177, 169);
    border: 0;
    background-color:rgb(0, 90, 95);
}

.submenu {
    border-bottom: 1px solid rgb(0, 73, 77);
    position: relative;
}

.submenu2 {
    width: 100%;
    min-width: 1170px;
    height: 86px;
}

.btn-custom-inline3 {
    display: block;
    float: left;
    position: relative;
    width: 230px;
    height: 86px;
    background-image: url("../assets/inner-button/subtn-in-bg01.svg");
    background-size: 230px 86px;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
    z-index: 2;
}

.btn-custom-inline3:after {
    content: "";
    display: block;
    width: 230px;
    height: 86px;
    background-image: url("../assets/inner-button/subtn-in-bg02.png");
    background-size: 230px 86px;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.btn-custom-inline3-selected {
    background-image: url("../assets/inner-button/subtn-in-on.svg");
}

.btn-custom-inline3-selected:after {
    background-image: none;
}

.btn-custom-inline3:hover:after {
    content: "";
    display: block;
    width: 230px;
    height: 220px;
    background: url("../assets/inner-button/subtn-hover.svg");
    background-size: 230px auto;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.btn-custom-inline3-separator {
    display: block;
    float: left;
    position: relative;
    width: 20px;
    height: 86px;
    background-image: url("../assets/cover-button/icon-arrow.svg");
    background-size: 20px 23px;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
    margin: 0 27px 0 36px;
}


.btn-custom-inline3-c1, .btn-custom-inline3-c2 {
    display: block;
    width: 230px;
    height: 86px;
    padding: 25px 30px 0;
    text-align: left;
}

.btn-custom-inline3-c1 span {
    font-family:'Conv_MuseoSans_700',Sans-Serif;
    font-size: 14px;
    color: rgb(0, 177, 169);
    text-decoration: none;
    z-index: 999;
}

.btn-custom-inline3-selected .btn-custom-inline3-c1 span {
    color: white;
}

.btn-custom-inline3-c2 span {
    font-family:'Conv_MuseoSans_700',Sans-Serif;
    font-size: 14px;
    color: white;
    text-decoration: none;
    z-index: 999;
}

.btn-custom-inline3-c2 div {
    margin-top: 20px;
    font-size: 14px;
    color: white;
    text-align: left;
}

.btn-custom-inline3:hover {
    text-decoration: none;
}

.btn-custom-inline3 .btn-custom-inline3-c1 {
    display: block;
}

.btn-custom-inline3 .btn-custom-inline3-c2 {
    display: none;
}

.btn-custom-inline3:hover .btn-custom-inline3-c1 {
    display: none;
}

.btn-custom-inline3:hover .btn-custom-inline3-c2 {
    display: block;
}




.btn-custom-inline {
    width: auto;
    display: inline-block;
    margin-right: 10px;
    border: 0;
    border-radius: 0;
    text-transform: uppercase;
}

.btn-custom-inline:hover, .btn-custom-inline-selected:hover {
    border: 0;
    color: rgb(133, 179, 54);
    background-color:rgba(0, 53, 51, 0);
}

.btn-custom-inline-selected {
    width: auto;
    display: inline-block;
    margin-right: 10px;
    border: 0;
    border-radius: 0;
    color: rgb(133, 179, 54);
    background-color:rgba(0, 53, 51, 0);
    text-transform: uppercase;
}

.btn-custom-inline-selected:after {
    display:block;
    content: '';
    border-bottom: 3px solid rgb(0, 177, 169);
    position: relative;
    bottom: -7px;
}

.btn-custom-inline:hover:after {
    transform: scaleX(1);
}

.btn-custom-inline:after {
    display:block;
    content: '';
    border-bottom: 3px solid rgb(0, 177, 169);
    transform: scaleX(0);  
    transition: transform 250ms ease-in-out;
    position: relative;
    bottom: -7px;
}

.btn-custom-inline-coming-soon:hover span {
    display: none;
}

.btn-custom-inline-coming-soon:hover:before {
    content: "COMING SOON"
}

.btn-custom-inline2 {
    width: auto;
    display: inline-block;
    margin-right: 10px;
    text-transform: uppercase;
}

.btn-custom-inline2-coming-soon:hover span {
    display: none;
}

.btn-custom-inline2-coming-soon:hover:before {
    content: "COMING SOON"
}



.btn-custom-inline4 {
    width: auto;
    height: 34px;
    display: inline-block;
    margin-right: 10px;
    border: 1px solid rgb(0, 177, 169);
    border-radius: 0;
    text-transform: uppercase;
    color: rgb(0, 177, 169);
    background-color: transparent;
    float: left;
}

.btn-custom-inline4:hover, .btn-custom-inline4-selected:hover {
    color: #FFF;
    border: 1px solid rgb(0, 177, 169);
    background-color:rgb(0, 177, 169);
}

.btn-custom-inline4-selected {
    width: auto;
    height: 34px;
    display: inline-block;
    margin-right: 10px;
    border: 1px solid rgb(0, 177, 169);
    border-radius: 0;
    text-transform: uppercase;
    color: #FFF;
    background-color:rgb(0, 177, 169);
    float: left;
}

.btn-custom-inline4-separator {
    display: inline-block;
    position: relative;
    width: 20px;
    height: 34px;
    background-image: url("../assets/cover-button/icon-arrow.svg");
    background-size: 20px 23px;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
    margin-right: 10px;
    float: left;
}

.btn-custom-inline4-coming-soon:hover span {
    display: none;
}

.btn-custom-inline4-coming-soon:hover:before {
    content: "COMING SOON"
}



.header {
    width: calc(100% - ((100% - 1170px) / 2));
    min-width: 1170px;
    right: 0;
    position: absolute;
    height: 120px;
    z-index: 999;
}

.logo {
    float: left;
    width: 170px;
    height: 209px;
}

.header-login {
    text-align: right;
    line-height: 40px;
    height: 40px;
}

.header-login span{
    vertical-align: middle;
    height: 40px;
}

.header-login-split {
    width: 1px;
    display: inline-block;
    background-color: rgb(0, 177, 169);
    margin: 0 10px;
}

.header-logout {
    height: 40px;
    display: inline-block;
    color: rgb(0, 177, 169);
    padding-right: 20px;
    cursor: pointer;
    font-size: 12px;
}


.header-home {
    height: 40px;
    display: inline-block;
    color: rgb(0, 177, 169);
    padding-right: 0;
    cursor: pointer;
    font-size: 12px;
}

.header-logout img, .header-home img {
    height: 24px;
    display: inline-block;
    margin-left: 10px;
}

.header-title-box {
    margin-top: 0px;
    margin-left: 140px;
    border-bottom: 1px solid rgb(0, 177, 169);
    padding-bottom: 3px;
    height: 81px;
}

.header-title {
    font-size: 24px;
    font-family:'Conv_MuseoSans_900',Sans-Serif;
    color: rgb(0, 177, 169);
    background-image: url("../assets/project-alphalogo.png");
    background-size: 140px 81px;;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
    width: 140px; 
    height: 81px;
    float: left;
}

.header-sub-title {
    font-size: 30px;
    padding-top: 30px;
    width: 500px; 
    height: 81px;
    float: left;
    margin-left: 10px;
}

.subheader {
    width: 100%;
    height: 120px;
    top: 0;
    right: 0;
    position: fixed;
    z-index: 999;
    background-color: #000;
}

#subheader.hide {
    visibility: hidden;
    overflow: hidden;
    height: 0px;
    top: -120px;
}

#subheader.sticky {
    visibility: visible;
    overflow: visible;
    height: 120px;
    top: 0;
}

.logo2 {
    float: left;
    width: 98px;
    height: 120px;
}

.logo2 img {
    width: 98px;
    height: 120px;
}

.header-menu-box {
    height: 80px;
    line-height: 80px;
    margin-left: 140px;
    border-top: 1px solid rgb(0, 177, 169);
    border-bottom: 1px solid rgb(0, 177, 169);
    padding-bottom: 15px;
}

.header-menu-box a {
    height: 80px;
    line-height: 80px;
    padding: 0 30px;
    display: inline-block;
    font-size: 18px;
    text-decoration: none;
    position: relative;
    top: -4px;
}

.header-menu, .header-menu:hover, .header-menu:visited {
    color: rgb(0, 177, 169);
    cursor: pointer;
}

.header-menu-selected {
    color: rgb(0, 177, 169);
    cursor: pointer;
    border-top: 3px solid rgb(0, 177, 169);
    border-bottom: 3px solid rgb(0, 177, 169);
    line-height: 86px;
    height: 86px !important;
    box-shadow: 
        inset 0px 11px 10px -10px #CCC,
        inset 0px -11px 10px -10px #CCC;
}

.header-menu-selected:hover, .header-menu-selected:visited {
    color: rgb(0, 177, 169);
}

.header-menu:hover:after {
    transform: scaleX(1);
}
.header-menu:after {
    display:block;
    content: '';
    border-top: 3px solid rgb(0, 177, 169);
    transform: scaleX(0);  
    transition: transform 250ms ease-in-out;
}

.header-menu:hover:before {
    transform: scaleX(1);
}
.header-menu:before {
    display:block;
    content: '';
    border-bottom: 3px solid rgb(0, 177, 169);
    transform: scaleX(0);  
    transition: transform 250ms ease-in-out;
}

.header-menu-disabled, .header-menu-disabled:hover, .header-menu-disabled:visited {
    color: rgb(72, 78, 78);
}

.main-content-overview {
    position: absolute; 
    bottom: -610px; 
    z-index: 9; 
    width: 100%;
    height: 610px;
    background-image: url(../assets/cover-button/wlc-cover-bg.png);
    background-size: auto;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
}

.content-overview {
    position: relative;
}

.content-overview-img {
    position: absolute;
    top: 0;
    right: 0;
    width: calc(100% - 140px);
    height: auto;
    z-index: -1;
}

.content-overview-box {
    padding-top: 200px;
}

.content-overview-desc-box {
    width: calc(50%);
    min-height: 400px;
    display: inline-block;
    padding: 60px;
    border-top: 5px solid rgb(0, 177, 169);
    border-right: 5px solid rgb(0, 177, 169);
    border-bottom: 5px solid rgb(0, 177, 169);
}

.content-overview-desc-subbox {
    width: 450px;
    float: right;
    display: inline-block;
}

.content-overview-desc-title {
    font-size: 29px;
    font-family:'Conv_MuseoSans_700',Sans-Serif;
}

.content-overview-desc {
    font-size: 24px;
    padding-top: 10px;
}

.content-overview-box2 {
    padding-top: 0;
    width: calc(100% - ((100% - 1170px) / 2));
    margin: 0 auto;
}

.content-overview-desc-box2 {
    width: 1170px;
    padding: 10px 0;
    margin: 0 auto;
}

.content-overview-desc-subbox2 {
    width: 100%;
}

.content-overview-btn-box {
    width: calc(50% - 50px);
    position: absolute;
    left: calc(50% + 50px);
    bottom: 4px;
}

.content-overview-btn-box2 {
    width: 1170px;
    margin: 0 auto;
}

.btn-overview {
    position: relative;
    width: 386px;
    height: 43px;
    margin-top: 10px;
    line-height: 31px;
    text-align: left;
    font-family:'Conv_MuseoSans_700',Sans-Serif;
    font-size: 16px;
    color: #FFF;
    border: 0;
    border-radius: 0;
    z-index: 2;
    text-shadow: 2px 2px 8px #000000;
    text-transform: uppercase;
}

.btn-overview2 {
    display: block;
    float: left;
    position: relative;
    width: 272px;
    height: 387px;
    background-image: url("../assets/cover-button/subtn-bg01.png");
    background-size: 272px 387px;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
    z-index: 2;
}

.btn-overview2:after {
    content: "";
    display: block;
    width: 272px;
    height: 387px;
    background-image: url("../assets/cover-button/subtn-bg02.png");
    background-size: 272px 387px;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.btn-overview2:hover:after {
    content: "";
    display: block;
    width: 272px;
    height: 387px;
    background-image: url("../assets/cover-button/subtn-hover.svg");
    background-size: 272px 387px;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.btn-overview2-separator {
    display: block;
    float: left;
    position: relative;
    width: 20px;
    height: 387px;
    background-image: url("../assets/cover-button/icon-arrow.svg");
    background-size: 20px 23px;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
}


.btn-overview2-c1, .btn-overview2-c2 {
    display: block;
    width: 272px;
    height: 387px;
    padding: 60px 50px 0;
    text-align: left;
}

.btn-overview2-c1 span {
    font-family:'Conv_MuseoSans_700',Sans-Serif;
    font-size: 16px;
    color: rgb(0, 177, 169);
    text-decoration: none;
    z-index: 999;
}

.btn-overview2-c1 img {
    position: absolute;
    width: 272px;
    height: 387px;
    top: 0;
    left: 0;
    z-index: -1;
}

.btn-overview2-c2 span {
    font-family:'Conv_MuseoSans_700',Sans-Serif;
    font-size: 16px;
    color: white;
    text-decoration: none;
    z-index: 999;
}

.btn-overview2-c2 div {
    margin-top: 20px;
    padding-top: 20px;
    font-size: 14px;
    color: white;
    border-top: 1px dotted white;
    text-align: left;
}

.btn-overview2:hover {
    text-decoration: none;
}

.btn-overview2 .btn-overview2-c1 {
    display: block;
}

.btn-overview2 .btn-overview2-c2 {
    display: none;
}

.btn-overview2:hover .btn-overview2-c1 {
    display: none;
}

.btn-overview2:hover .btn-overview2-c2 {
    display: block;
}

.btn-overview:hover, .btn-overview:focus {
    font-family:'Conv_MuseoSans_700',Sans-Serif;
    color: #FFF;
    border: 0;
}

.btn-overview:before {
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 386px;
    height: 43px;
    z-index: -1;
    opacity: 1;
    background-image: url(../images/btn-bg.png);
    background-size: auto;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
}

.btn-overview:hover:before {
    opacity: 0.5;
}

.btn-overview-coming-soon:hover span {
    display: none;
}

.btn-overview-coming-soon:hover:after {
    content: "COMING SOON"
}

.slide-title {
    position: absolute;
    top: 200px;
    right: 0;
    width: calc(100% - ((100% - 1170px) / 2));
    min-width: 1170px;
    font-size: 32px;
    font-family:'Conv_MuseoSans_900',Sans-Serif;
    color: rgb(0, 177, 169);
}

.slide-desc {
    position: absolute;
    top: 270px;
    right: 0;
    width: calc(100% - ((100% - 1170px) / 2));
    min-width: 1170px;
    font-size: 22px;
}

.slide-desc span {
    width: 660px;
    display: inline-block;
}

.slide-scroll {
    display: inline-block;
    opacity: 0.7;
    cursor: pointer;
    position: relative;
    top: 30%;
    left: 50%;
    transform: translate(-50%, 0);
}

.slide-video-box {
    position: absolute;
    top: 500px;
    width: 1170px;
    height: 156px;
}

.slide-video-title {
    font-size: 20px;
    font-family:'Conv_MuseoSans_900',Sans-Serif;
    padding-bottom: 10px;
}

.slide-video-box img {
    width: 214px;
    height: 150px;
}

.video-content-box {
    float: left;
    width: 220px;
    height: 156px;
    margin: 0 7px;
    cursor: pointer;
    border: 3px solid #FFF;
    position: relative;
}

.video-content-hover {
    position: absolute;
    top: -3px;
    left: -3px;
    width: 220px;
    height: 156px;
    background-color: rgb(0, 177, 169);
    z-index: 2;
    opacity: 0.5;
    display: none;
}

.video-content-box i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.video-content-box:hover .video-content-hover {
    display: block;
}

.title {
    font-size: 20px;
    font-family:'Conv_MuseoSans_900',Sans-Serif;
    padding-bottom: 20px;
    text-transform: uppercase;
    border-bottom: 1px solid rgb(0, 177, 169);
    position: relative;
}

.subtitle {
    font-size: 16px;
    font-family:'Conv_MuseoSans_900',Sans-Serif;
    margin-left: 200px;
    color: rgb(212, 214, 82);
}

.titlesort {
    float: right;
    display: inline-block;
    width: 200px;
    margin-right: 10px;
}

.titlesort select {
    color: rgb(0, 177, 169);
}

.video-box {
    position: relative;
    width: 770px;
    height: 500px;
    padding: 0 40px;
}

.video-sub-box {
    position: relative;
    width: 620px;
    height: 280px;
    padding: 20px;
    border: 4px solid rgb(0, 177, 169);
}

.video-sub-title {
    font-size: 32px;
    font-family:'Conv_MuseoSans_900',Sans-Serif;
    color: rgb(0, 177, 169);
}

.video-sub-desc {
    position: absolute;
    width: 460px;
    top: 40px;
    right: 20px;
    color: rgb(147, 148, 152);
}

.video-thumbnail {
    position: absolute;
    width: 480px; 
    height: 340px;
    right: 40px;
    bottom: 0;
}

.video-thumbnail img {
    width: 480px; 
    height: auto;
    opacity: 0.5;
}

.video-popup-btn {
    cursor: pointer;
    font-size: 16px;
    color: rgb(0, 177, 169);
    margin-top: 40px;
    margin-left: 70px;
}

.video-slider-notselected {
    opacity: 0.3;
}

.video-slider-selected {
    opacity: 1;
}

.modal-custom-header {
    background-color: #000;
    border: 0;
    border-top: 1px solid rgb(0, 177, 169);
    border-right: 1px solid rgb(0, 177, 169);
    border-left: 1px solid rgb(0, 177, 169);
    color: rgb(0, 177, 169);
    font-family:'Conv_MuseoSans_700',Sans-Serif;
}

.modal-custom {
    background-color: #000;
    border: 1px solid rgb(0, 177, 169);
    border-radius: 0; 
}

.modal-summary-body {
    color: rgb(0, 177, 169);
}

.td-color-default {
    color: rgb(0, 177, 169);
}

.td-color-red {
    color: red !important;
}

.left-filter-box {
    position: fixed;
    top: 150px;
    left: -260px;
    width: 260px;
    background-color: rgb(22, 40, 39);
    z-index: 888;
    padding: 30px;
}

.left-filter-box label, .left-filter-box2 label {
    color: #FFF;
    font-size: 11px;
    font-family:'Conv_MuseoSans_700',Sans-Serif;
}

.filter-box {
    width: 260px;
    background-color: rgba(22, 40, 39, 0.5);
    padding: 30px;
}

.filter-box label {
    color: rgb(96, 117, 120);
    font-size: 11px;
    font-family:'Conv_MuseoSans_700',Sans-Serif;
}

.left-filter-btn {
    position: fixed;
    top: 150px;
    left: 0px;
    z-index: 888;
    width: 40px;
    height: 120px;
    background-color: rgb(25,24,24);
    border: 2px solid rgb(0, 177, 169);
    cursor: pointer;
}

.left-filter-arrow {
    background-color: rgb(0, 177, 169);
    text-align: center;
    height: 38px;
    padding: 10px 0;
}

.left-filter-arrow i {
    font-size: 20px;
}

.left-filter-text {
    color: rgb(0, 177, 169);
    margin-top: 22px;
    font-family:'Conv_MuseoSans_700',Sans-Serif;

    -webkit-transform: rotate(90deg);
    
    /* Firefox */
    -moz-transform: rotate(90deg);
    
    /* IE */
    -ms-transform: rotate(90deg);
    
    /* Opera */
    -o-transform: rotate(90deg);
    
    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=9);
}

.left-filter-label {
    color: #FFF;
    height: 34px;
    font-size: 14px;
    line-height: 1.42857143;
    padding: 6px 0;
    border-bottom: 1px solid rgb(0, 177, 169);
}


.left-filter-box2 {
    position: fixed;
    top: 150px;
    left: -260px;
    width: 260px;
    background-color: rgb(22, 40, 39);
    z-index: 888;
    padding: 20px;
}

.left-filter-box2 .filter-box {
    padding: 20px;
}

.left-filter-box2 .left-filter-label {
    color: #FFF;
    height: 28px;
    font-size: 14px;
    line-height: 1.42857143;
    padding: 3px 0;
    border-bottom: 1px solid rgb(0, 177, 169);
}

.left-filter-box2 .form-group {
    margin-bottom: 10px;
}

.left-filter-box2 .custom-radio label {
    font-size: 11px;
}

.left-filter-box2 .custom-radio {
    margin-top: 4px;
    margin-bottom: 4px;
}

.left-filter-box2 .nav-tabs {
    border-bottom: 1px solid rgb(0, 177, 169);
}

.left-filter-box2 .nav-tabs a {
    color: rgb(0, 177, 169);
    font-size: 13px;
    padding: 5px;
}

.left-filter-box2 .nav-tabs>li.active>a, .left-filter-box2  .nav-tabs>li.active>a:focus, .left-filter-box2  .nav-tabs>li.active>a:hover {
    color: rgb(0, 177, 169);
    cursor: default;
    border: 1px solid rgb(0, 177, 169);
    border-bottom-color: transparent;
    background-color: transparent;
}

.left-filter-box2 .nav-tabs>li>a:hover {
    border-color: rgb(0, 177, 169) rgb(0, 177, 169) rgb(0, 177, 169);
}

.left-filter-box2 .nav>li>a:focus, .left-filter-box2 .nav>li>a:hover {
    background-color: transparent;
}

.left-filter-box2 .tab-content {
    padding-top: 5px;
}


.left-filter-box2 .tab-content .slider-label {
    left: -25px;
}


.left-filter-box2 .tab-content .slider-label label{
    font-size: 9px;
    width: 50px;
}


.jsgrid-grid-header {
    border: 0;
    background-color: rgb(17, 52, 51);
    overflow-y: hidden;
}


.worldmap .jsgrid-grid-header {
    background-color: rgba(17, 52, 51, 0.5);
}

.jsgrid-header-row {
    background-color: rgb(17, 52, 51);
}

.worldmap .jsgrid-header-row {
    background-color: rgba(17, 52, 51, 0.5);
}

.jsgrid-header-row > .jsgrid-header-cell {
    background-color: rgb(17, 52, 51);
    border: 0;
}

.worldmap .jsgrid-header-row > .jsgrid-header-cell {
    background-color: rgba(17, 52, 51, 0.5);
}

.jsgrid-grid-body {
    border: 0;
}

.jsgrid-row > .jsgrid-cell, .jsgrid-alt-row > .jsgrid-cell, .jsgrid-nodata-row > .jsgrid-cell {
    background-color: rgb(21, 21, 21);
}

.worldmap .jsgrid-row > .jsgrid-cell, .jsgrid-alt-row > .jsgrid-cell, .jsgrid-nodata-row > .jsgrid-cell {
    background-color: rgba(21, 21, 21, 0.5);
}

.jsgrid-cell {
    color: rgb(0, 177, 169);
    border-left: 0;
    border-right: 0;
    border-top: 1px solid rgb(89, 89, 89);
}

.jsgrid-row:hover > .jsgrid-cell, .jsgrid-alt-row:hover > .jsgrid-cell {
    background-color: rgb(45, 45, 45);
}

.worldmap .jsgrid-row:hover > .jsgrid-cell, .jsgrid-alt-row:hover > .jsgrid-cell {
    background-color: rgba(45, 45, 45, 0.5);
}

.jsgrid-pager-container {
    background-color: rgb(17, 52, 51);
}

.worldmap .jsgrid-pager-container {
    background-color: rgba(17, 52, 51, 0.5);
}

.jsgrid-pager-nav-button {
    color: #FFF;
}

.jsgrid-cell .fa-file-text-o {
    color: rgb(212, 213, 104);
    cursor: pointer;
}

.grid-subtable th {
    color: rgb(130, 129, 129);
}

.truncate {
    width: 200px;
    max-height: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.truncate2 {
    width: 100px;
    max-height: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tab {
	
	/*background-color:rgba(100,100,100,.5);*/
	float:left;
	text-align: center;
	height:92%;
}

.clearfix {
	clear:both
}

.tabimage {
	width:260px
}

#tab1 {
	width:50%
}

#tab2 {
	width: 25%;
}

#tab3 {
	width:25%
}

.tabin {
	height: 100%;
    background-color: rgba(0,0,0,.5);
    width: 90%;
    margin: auto;
    margin-top: 10px;
    border-radius: 10px;
}

.timage {
	cursor: pointer;
    margin: auto;
    width: 100%;
    max-width: 130px;
    margin: 40px auto 10px;
	transform-style: preserve-3d;
    transition: all 1s ease-in-out;
}

.tri {
	width: 33%;
    position: relative;
    display: block;
    height: 30%;
    text-align: center;
	float:left;
}

.mono {
	width: 100%;
    position: relative;
    display: block;
    height: 30%;
    text-align: center;
	float:left;
}

.tab300 {
	max-width:260px
}

.profile {
	    position: absolute;
    top: 20px;
    right: 10px;
}

.timage:hover {
	transform: rotateY(360deg);
}

.timage2 {
	transform: rotateY(360deg);
}

.legend {
	 position: absolute;
    top: 100px;
    right: 10px;
}

.legend img {
	width:200px
}

.legend2 {
	 position: absolute;
    top: 10px;
    right: 10px;
}

.legend2 img {
	width:200px
}

.oimage {
	position: absolute;
    top: 300px;
    right: 18px;
	display:none;
	
}

#chartdiv {
    width: 100%; 
    height: 600px;
}

.amcharts-graph-ac_r .amcharts-graph-stroke, .amcharts-graph-pac_r .amcharts-graph-stroke {
    stroke-dasharray: 8px, 5px;
    -webkit-animation: effect-move-dashed-line 2s linear infinite;
    animation: effect-move-dashed-line 2s linear infinite;
  }

  @-webkit-keyframes effect-move-dashed-line {
    100% {
      stroke-dashoffset: -13px;
    }
  }
  @keyframes effect-move-dashed-line {
    100% {
      stroke-dashoffset: -13px;
    }
  }

  .amcharts-trend-line-reg_trend {
    stroke-dasharray: 300%;
    -webkit-animation: effect-draw-line 5s ease-out forwards;
    animation: effect-draw-line 5s ease-out forwards;
  }
  
  @-webkit-keyframes effect-draw-line {
    0% {
      stroke-dashoffset: 200%;
    }
    100% {
      stroke-dashoffset: 0%;
    }
  }
  @keyframes effect-draw-line {
    0% {
      stroke-dashoffset: 200%;
    }
    100% {
      stroke-dashoffset: 0%;
    }
  }

.earn {
    background: url("../assets/all-label2.png");
    width: 90px;
    height: 60px;
    padding: 22px 0 0;
    box-sizing: border-box;
}

.lose {
    background: url("../assets/all-label2.png");
    width: 90px;
    height: 60px;
    padding: 22px 0 0;
    box-sizing: border-box;
}

.amcharts-legend-div {
    overflow: visible !important; 
    top: 34px !important; 
}

.legend-title {
    font-weight: bold;
    text-align: right;
    font-size: 20px;
    color: #00b1a9;
    position: relative;
    padding-right: 10px;
    top: -30px;
    font-family: Verdana;
}

.slider-range {
    position: relative;
    top: 140px;
    margin: 0 14px;
}

.slider-label {
    position: relative;
    top: 12px;
    height: 14px;
    left: -7px;
}

.slider-label label{
    position: absolute;
    font-family: Verdana;
    font-size: 11px;
    color: #FFF;
    height: 14px;
    width: 14px;
    display: block;
    text-align: center;
}

.control-label {
    color: #FFF;
}

#sub_content {
    width: 100%;
    height: 500px;
}

#sub_iframe {
    width: 100%;
    height: 500px;
    border: 0;
    overflow: hidden;
}

.modal-body-title {
    font-size: 16px;
    font-family:'Conv_MuseoSans_700',Sans-Serif;
    color: rgb(0, 177, 169);
}


.scrollbar::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: rgb(25,24,24);
}
 
.scrollbar::-webkit-scrollbar
{
	width: 10px;
    background-color: rgb(25,24,24);
}

.scrollbar::-webkit-scrollbar-thumb
{
	background-color: rgb(0, 177, 169);	
}
 
.jsgrid-grid-body::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: rgb(25,24,24);
}

.jsgrid-grid-body::-webkit-scrollbar
{
	width: 10px;
    background-color: rgb(25,24,24);
}

.jsgrid-grid-body::-webkit-scrollbar-thumb
{
	background-color: rgb(0, 177, 169);	
}

#dGrid-lesson-learnt i {
    margin-right: 10px;
}

.CA-floating-label {
    display: none;
    position: absolute;
    top: -22px;
    left: 30px;
    z-index: 10;
    width: 271px;
    height: 145px;
}

.CA-floating-label2 {
    top: -12px !important;
    left: 50px !important;
}

.CA-floating-label3 {
    top: -18px !important;
    left: 90px !important;
}

.CA-floating-label img {
    width: 271px;
    height: 145px;
}

/*#circle:hover > .CA-floating-label,*/ #circle2:hover > .CA-floating-label, #circle3:hover > .CA-floating-label, 
#invis_25:hover > .CA-floating-label, #invis_26:hover > .CA-floating-label, 
#invis_27:hover > .CA-floating-label, #invis_28:hover > .CA-floating-label, #invis_29:hover > .CA-floating-label, #invis_30:hover > .CA-floating-label, 
#invis_17:hover > .CA-floating-label, #invis_18:hover > .CA-floating-label, #invis_19:hover > .CA-floating-label, #invis_20:hover > .CA-floating-label, 
#invis_13:hover > .CA-floating-label, #invis_16:hover > .CA-floating-label  {
    display: block;
}

/*#circle,*/ #circle2, #circle3, #invis_25, #invis_26, #invis_27, #invis_28, #invis_29, #invis_30, 
#invis_17, #invis_18, #invis_19, #invis_20, 
#invis_13, #invis_16 {
    z-index: 9;
    display: block;
}

.CA-floating-label-show {
    display: block !important;
}

.table-chart th, .table-chart td {
    padding: 5px;
}

.title-details-box {
    padding: 5px;
    border: 2px solid rgb(0, 177, 169);
}

.title-details-title span {
    color: rgb(245, 174, 75);
}

.title-details-content-box {
    height: 52px;
}

.title-details-content {
    float: left;
    display: inline-block;
    width: 50%;
    height: 52px;
    padding: 5px 0;
}

.title-details-content-title {
    font-size: 10px;
    color: rgb(0, 177, 169);
    height: 20px;
    line-height: 20px;
}

.title-details-content-content {
    font-size: 20px;
    font-family:'Conv_MuseoSans_700',Sans-Serif;
    color: rgb(0, 177, 169);
    height: 22px;
    line-height: 22px;
    white-space: nowrap;
    overflow: hidden;
}

.title-details-content-content2 {
    font-size: 20px;
    font-family:'Conv_MuseoSans_700',Sans-Serif;
    color: rgb(212, 214, 82);
    height: 22px;
    line-height: 22px;
    text-align: right;
}

.title-details-content-content3 {
    color: rgb(212, 214, 82);
    height: 22px;
    line-height: 22px;
    text-align: right;
}


.custom-radio input:not(old){
    width     : 2em;
    margin    : 0;
    padding   : 0;
    font-size : 1em;
    opacity   : 0;
    display: none;
}

.custom-radio input:not(old) + label{
    display      : inline-block;
    line-height  : 1.5em;
}

.custom-radio input:not(old) + label > span{
    display          : inline-block;
    width            : 0.875em;
    height           : 0.875em;
    margin           : 0.25em 0.5em 0.25em 0.25em;
    border           : 0.0625em solid rgb(0, 177, 169);
    border-radius    : 0.4375em;
    background       : rgba(224,224,224, 0);
    background-image :    -moz-linear-gradient(rgba(240,240,240, 0),rgba(224,224,224, 0));
    background-image :     -ms-linear-gradient(rgba(240,240,240, 0),rgba(224,224,224, 0));
    background-image :      -o-linear-gradient(rgba(240,240,240, 0),rgba(224,224,224, 0));
    background-image : -webkit-linear-gradient(rgba(240,240,240, 0),rgba(224,224,224, 0));
    background-image :         linear-gradient(rgba(240,240,240, 0),rgba(224,224,224, 0));
    vertical-align   : bottom;
    float: right;
}

.custom-radio input:not(old):checked + label > span{
    background-image :    -moz-linear-gradient(rgba(240,240,240, 0),rgba(224,224,224, 0));
    background-image :     -ms-linear-gradient(rgba(240,240,240, 0),rgba(224,224,224, 0));
    background-image :      -o-linear-gradient(rgba(240,240,240, 0),rgba(224,224,224, 0));
    background-image : -webkit-linear-gradient(rgba(240,240,240, 0),rgba(224,224,224, 0));
    background-image :         linear-gradient(rgba(240,240,240, 0),rgba(224,224,224, 0));
    float: right;
}

.custom-radio input:not(old):checked + label > span > span{
    display          : block;
    width            : 0.5em;
    height           : 0.5em;
    margin           : 0.125em;
    border           : 0.0625em solid rgb(0, 177, 169);
    border-radius    : 0.25em;
    background       : rgb(0, 177, 169);
    background-image :    -moz-linear-gradient(rgb(0, 177, 169),rgb(0, 177, 169));
    background-image :     -ms-linear-gradient(rgb(0, 177, 169),rgb(0, 177, 169));
    background-image :      -o-linear-gradient(rgb(0, 177, 169),rgb(0, 177, 169));
    background-image : -webkit-linear-gradient(rgb(0, 177, 169),rgb(0, 177, 169));
    background-image :         linear-gradient(rgb(0, 177, 169),rgb(0, 177, 169));
    float: right;
}

.custom-radio label {
    color: rgb(0, 177, 169);
    font-size: 14px;
    padding-left: 0;
    width: 100%;
}

.simulation-chart-box {
    width: 100%; 
    height: 1105px;
    padding-top: 5px;
}
.simulation-chart {
    width: calc(100% - 25px); 
    height: 1100px;
}

.simulation-chart-title {
    margin-top: 10px;
    margin-left: 20px;
    padding-left: 10px;
    padding-bottom: 10px;
    padding-right: 10px;
    border-left: 1px solid rgb(0, 177, 169);
    border-bottom: 1px solid rgb(0, 177, 169);
    display: inline-block;
}

.simulation-chart-title div {
    display: inline-block;
    color: rgb(245, 174, 75);
    font-family:'Conv_MuseoSans_700',Sans-Serif;
}


.simulation-chart-title #chart-title-3 {
    bottom: 70px;
    left: -62px;
}

.tcot-output {
    width: 290px;
    height: 190px;
    position: relative;
    top: -540px;
    left: 673px;
    padding: 60px 20px 0;
    text-align: center;
    font-size: 16px;
    font-family:'Conv_MuseoSans_700',Sans-Serif;
}

.tcot-output .tcot-result {
    font-size: 22px;
    font-family:'Conv_MuseoSans_900',Sans-Serif;
}

.tcot-output-content {
    margin-top: 80px;
    height: 170px;
    text-align: left;
    font-size: 12px;
    font-family:'Conv_MuseoSans_300',Sans-Serif;
}

.tcot-output hr {
    margin-top: 1px;
    margin-bottom: 1px;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
}

.tcot-output-content label {
    width: 130px;
}

.tcot-output2 {
    width: 290px;
    height: 190px;
    position: relative;
    top: -550px;
    left: 673px;
    padding: 50px 20px 0;
    text-align: center;
    font-size: 16px;
    font-family:'Conv_MuseoSans_700',Sans-Serif;
}

.tcot-output-chart {
    width: 280px;
    height: 200px;
    position: relative;
    top: -550px;
    left: 673px;
}

#tcot-output-west-chart {
    width: 280px;
    height: 200px;
}


.tcot-output-chart2 {
    top: -560px;
    left: 685px;
}

#tcot-output-chart-step-control {
    width: 280px;
    height: 0px;
    position: relative;
    top: -550px;
    left: 673px;
}

.tcot-output-chart2 .form-group {
    margin-bottom: 5px;
}


.tcot-output-chart2 label {
    width: 70px;
    height: 34px;
    line-height: 34px;
}

.tcot-output-chart2 .select {
    width: 205px;
    display: inline-block;
}

.tcot-output-chart3 {
    top: -530px;
    left: 680px;
}


.waterfall-highlight-btn {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 10px;
    right: 10px;
    background: url("../assets/icon-highlight.svg") no-repeat;
    background-size: cover;
    background-position: center;
    cursor: pointer;
}

#chart-gauge {
    width: 170px;
    height: 102px;
    float: left;
}

.title-details-content-gauge {
    float: left;
    display: inline-block;
    width: 50%;
    height: 82px;
}

.title-details-content-box-gauge {
    height: 82px;
}

.title-details-content-title-gauge {
    font-size: 12px;
    color: rgb(0, 177, 169);
    height: 30px;
    line-height: 30px;
}

.title-details-content-content-not-gauge {
    font-size: 20px;
    font-family:'Conv_MuseoSans_700',Sans-Serif;
    color: rgb(0, 177, 169);
    height: 66px;
    line-height: 56px;
    white-space: nowrap;
    overflow: hidden;
}

.title-details-content-content-gauge {
    font-size: 20px;
    font-family:'Conv_MuseoSans_700',Sans-Serif;
    color: rgb(0, 177, 169);
    height: 76px;
    line-height: 66px;
    white-space: nowrap;
    overflow: hidden;
    padding-top: 10px;
}

.title-details-content-content-gauge-content {
    font-size: 20px;
    font-family:'Conv_MuseoSans_700',Sans-Serif;
    color: rgb(0, 177, 169);
    width: 35%;
    height: 41px;
    line-height: 41px;
    white-space: nowrap;
    overflow: hidden;
    float: left;
    margin-top: 0px;
}

.title-details-content-content-gauge-content2 {
    font-size: 20px;
    font-family:'Conv_MuseoSans_700',Sans-Serif;
    color: rgb(212, 214, 82);
    width: 35%;
    height: 41px;
    line-height: 41px;
    white-space: nowrap;
    overflow: hidden;
    float: left;
    margin-top: 0px;
}

.btn-tour {
    position: absolute;
    bottom: 10px;
    right: 0;
    width: 30px;
    height: 30px;
    background: url("../assets/round-info-button.svg") no-repeat;
    background-size: cover;
    background-position: center;
    cursor: pointer;
}

.icon-info {
    position: relative;
    top: 2px;
    left: 5px;
    width: 12px;
    height: 12px;
    display: inline-block;
    background: url("../assets/round-info-button.svg") no-repeat;
    background-size: cover;
    background-position: center;
    cursor: pointer;
}

.tour-divider {
    width: 100%;
    height: 10px;
    border-top: 1px dotted #000;
}

.jsgrid-row-highlight1 td {
    background-color: rgb(45, 45, 45) !important;
}

.jsgrid-row-highlight2 td {
    color: rgb(21, 21, 21) !important;
    background-color: rgb(0, 177, 169) !important;
}

.jsgrid-row-highlight2 .td-color-red {
    color: red !important;
    background-color: rgb(0, 177, 169) !important;
}

.overview-navigate-desc-box {
    width: 1170px;
    height: 110px;
    margin: 0 auto;
    padding: 20px 0 0;
}

.overview-navigate-desc {
    width: calc(50% - 25px);
    height: 90px;
    float: left;
    border: 2px solid rgb(0, 177, 169);
    color: #ffffff;
    text-align: center;
    font-size: 16px;
    padding: 20px;
}


.overview-navigate-separator {
    display: block;
    float: left;
    position: relative;
    width: 30px;
    height: 90px;
    background-image: url("../assets/cover-button/icon-arrow.svg");
    background-size: 30px 35px;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
    margin: 0 10px;
}