/**
 * Main
 */

.u-label {    
    font-family: sf_title_font, sans-serif;
    color: #dde4e6;
    font-size: 14px;
}

.b-label {
    font-weight: bold;
    padding-left: 4px;
    padding-right: 4px;
}

.u-labelH {    
    font-family: sf_title_font,  sans-serif;
    color: #CFD8DC;
    font-size: 18px;
}

.block_title{
    
    position:relative;
    top:-10px;
    font-family: sf_title_font,  sans-serif;
    font-size: 16px;
    padding-top: 10px;
    color: #7ee8fe;
    font-weight: bold;
    font-style: normal;
    text-shadow:0px 0px 10px rgba(43,211,237,0.5);  
    height:36px;
    vertical-align: middle;
    text-align: center;
    white-space: nowrap!important;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;    
    box-sizing: border-box;
    
    background:
        
        linear-gradient(to right, rgba(43,211,237,0.5),rgba(43,211,237,0.5) 100%) no-repeat border-box,
        linear-gradient(to right, rgba(43,211,237,0.5),rgba(43,211,237,0.5) 100%) no-repeat border-box,
        linear-gradient(to top, rgba(43,211,237,0.15), rgba(43,211,237,0.15) 100% ) no-repeat border-box;
    
    width:available;
    
    
    background-position: 

        top 0px left 0px,
        bottom 0px left 0px,
        top 0px left 0px;
        
    background-size: 
        
        100% 1px,
        100% 1px,
        100% 100%;
    
}

.label-shadow {
    text-shadow: 0px 0px 20px #00caff;
}

.link-label {
    cursor: pointer;
}

.u-text12 {    
    font-family: Arial,sans-serif;
    color: #dde4e6;
    font-size: 12px;
}

.link-label:hover {    
    text-decoration: underline;
}

.block-shadow {
    
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);

    border: 1px solid rgba(43,211,237, 0.3);
    
    
    box-sizing: border-box;
    backdrop-filter: blur(4px);
    background:

        
        linear-gradient(to right, rgba(43,211,237,1.0),rgba(43,211,237,1.0) 100%) no-repeat border-box,
        linear-gradient(to right, rgba(43,211,237,1.0),rgba(43,211,237,1.0) 100%) no-repeat border-box,
        linear-gradient(to right, rgba(43,211,237,1.0),rgba(43,211,237,1.0) 100%) no-repeat border-box,
        linear-gradient(to right, rgba(43,211,237,1.0),rgba(43,211,237,1.0) 100%) no-repeat border-box,
        linear-gradient(to right, rgba(43,211,237,1.0),rgba(43,211,237,1.0) 100%) no-repeat border-box,
        linear-gradient(to right, rgba(43,211,237,1.0),rgba(43,211,237,1.0) 100%) no-repeat border-box,
        linear-gradient(to right, rgba(43,211,237,1.0),rgba(43,211,237,1.0) 100%) no-repeat border-box,
        linear-gradient(to right, rgba(43,211,237,1.0),rgba(43,211,237,1.0) 100%) no-repeat border-box,
        
        linear-gradient(to top, rgba(0,0,0,0.65), rgba(0,0,0,0.65) 100%) no-repeat border-box;
    
    background-position: 

        top 1px left 0px,
        top 0px left 0px,
        top 0px right 0px,
        top 1px right 0px,
        
        bottom 1px left 0px,
        bottom 0px left 0px,
        bottom 0px right 0px,
        bottom 1px right 0px,
        
        
        top 0px left 0px;
    
    background-size: 
        
        1px 3px,
        4px 1px,
        4px 1px,
        1px 3px,
        
        1px 3px,
        4px 1px,
        4px 1px,
        1px 3px,
        
        
        100% 100%;
    
    margin:10px 10px 10px 10px;
    
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;    
    
}

.cyn-label {
    
    font-family: Arial,sans-serif;
    font-size: 16px;
    color: #88bdd9;
}

img.dhx_combo_option_img {
    z-index: 0!important;
}

.border-red{
    border:1px solid red;
}
/**
 * Container
 */

.main-container {
    position:absolute;
    background: url(/images/backgrounds/main_bg_2048.jpg);
    background-repeat: no-repeat;
    background-position-x: center;
    
    top: 0px;
    left: 0px;
    right:0px;
    bottom:0px;
    min-width: 1124px;
    background-position: center top;
    overflow: hidden;
    min-height:768px;
}

.content-container {
    position:absolute;
    top: 50px;
    left: 0px;
    right:0px;
    bottom:50px;
    min-width: 1024px;
    overflow: auto;
}

div#top-panel {
    overflow: hidden;
    position: absolute;
    top:0px;
    left:0px;
    right:0px;
    height: 50px;
    background: rgba(0, 0, 0, 0.75);
    display:flex;
    align-items: center;
    justify-content: center;
}

div#logo {
    padding-top: 50px;
    text-align: center;
    margin-bottom: -10px;
}

.first-line {
    display: flex;
    justify-content: center;
}


div#flineblock {
    position: relative;
    flex-grow: 1;
    padding: 0px 10px;
    display: flex;
    margin: 0 auto;
}

div#login {
    width: 200px;
    text-align: center;
    height: 160px;
    padding:15px;
}


div#registration {
    width: 200px;
    text-align: center;
    height: 160px;
}




div#registration .regbtn {
    padding: 60px 20px 0px 20px;
}

.regbtn button {
    padding-left: 10px;
    padding-right: 10px;
    height: 42px;
    width: 160px;
    border:1px solid #ebcc83;
    
    background: 
        
        linear-gradient(to top, rgba(152, 104, 28,0.5), rgba(250,181,54,0.5) 100%) no-repeat border-box,
        linear-gradient(to top, rgba(250,181,54,0.9), rgba(250,181,54,0.9) 100%) no-repeat border-box;
}

.regbtn button:hover {
    border: 1px solid #fde8b6;
    background: 
        
        linear-gradient(to top, rgba(250,181,54,0.9), rgba(250,181,54,0.9) 100%) no-repeat border-box,
        linear-gradient(to top, rgba(250,181,54,0.9), rgba(250,181,54,0.9) 100%) no-repeat border-box;

    box-shadow: inset 0px 0px 2px 1px rgba(33, 150, 243,0.25);
    
    text-shadow: 0px 0px 2px rgba(250,181,54,0.9);
}

.regbtn button div {
    font-family: sf_font;
    color: #FFF;
    font-size: 18px;
    text-shadow: 0px 0px 2px rgba(250,181,54,0.9);
}





div#about {    
    padding: 10px 10px 10px 0px;
    width: 580px;
    height: 160px;
}

div#about .info-text {

    font-size: 14px;
    font-weight: normal;
    margin-top: -10px;
    font-family: sf_font;
    color:#89ced9!important;
}

div#about .info-text ul {
    line-height:1.5;
    list-style: lower-greek;
}

div#about li {    
    color: #3ce3f7;
}

div#about li span {    
    
    color: #b8dbe5;
}

div.second-line {
    display: flex;
    justify-content: flex-start;
/*    flex-wrap: wrap;*/
    max-width: 1100px;
}

div.second-line-flex {
    display: flex;
    justify-content: center;
}

div.second-line-inner-flex {
    display: flex;
    flex-wrap: wrap;
    flex-grow: 1;
    
}

div.second-line-side {
    padding: 40px 0px 10px 0px;
    margin: 0px 0px 0px 0px;
    border-right: none;
    height: 347px;
    /* background: rgba(72, 160, 175, 0.43); */
    flex-grow: 2;
    border-right: none;
    clip-path: inset(-5px -1px -5px -5px);
}

div.second-line-side-r {
    flex-grow: 2;
}


div#race-view {   

    height: 420px;
    width: 735px;
    padding: 20px;   
    flex-grow: 0;
}

div#resources-view {   

    height: 420px;
    width: 735px;
    padding: 20px;   
    flex-grow: 0;
    height:auto;
}

div#race-caption {
    
    font-family: sf_title_font,  sans-serif;
    font-size: 16px;
    padding-top: 3px;
    color: #7ee8fe;
    font-weight: bold;
    font-style: normal;
    text-shadow:0px 0px 10px rgba(127,227,252,0.5);
}

div#race-view div.race-unit { 
  overflow:hidden; 
  float:left; 
  /*height: 100%;*/
  width:50px;  
  margin-left: -2px;
}

div.race-unit-selected {
    border: 1px solid rgba(95, 240, 253, 0.2);
    box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.5);
}

div#race-view div.race-unit-selected .panel {
    background: rgba(0, 0, 0, 0.1);
}

table.r-table {
    margin: 0px;
    text-align: center;
    width: 100%;
}

tr.r-table-row-even {
    background-color: rgba(0, 0, 0, 0.2);
}

tr.r-table-row-odd {
}

td.r-text-shadow-green {
    text-shadow: 0px 2px 6px #011711;
    color: #06f3b3;
}

td.r-text-shadow-yellow {
    text-shadow: 0px 2px 6px rgb(0, 15, 16);
    color: #3ce3f7;
}

td.r-text-shadow-red {
    text-shadow: 0px 2px 6px #000203;
    color: #11666f;
}

td.r-text-shadow-none {
    text-shadow: 0px 2px 6px #010c0c;
    color: rgb(27, 151, 181);
}

div#race-view div.panelh {
    float: left;
    width: 140px;
    height: 346px;
} 

div#race-view div.panel {
    float: left;
    width: 50px;
    height: 346px;
    background: rgba(56, 104, 122, 0.3);
    cursor: pointer;
}

div#race-view div.panel:hover {
    float: left;
    width: 50px;
    height: 346px;
    background: rgba(78, 120, 146, 0.6);
}

div#race-view div.header-transform {
    /*transform: rotateY(1deg) skew(0deg,2deg);*/
    background: rgba(21, 55, 64, 0.4);
    box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
}

div#race-view div.unit-transform {
/*    transform: rotateY(5deg) skew(0deg,3deg);*/
    background: rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
}

div#race-view div.header-transform table {
    text-align: right;
}

div#race-view div.img-cnt {
    height: 346px;
    background: #000;
    margin-left: 50px;
    box-shadow: inset 0 0 20px 10px rgba(0, 0, 0, 1);   
}

img.img-icon {
    cursor: pointer;
    box-shadow: 0 0 4px 1px rgba(0, 192, 255, 0.5);
}

img.img-icon:hover {
    cursor: pointer;
    box-shadow: 0 0 4px 1px rgba(255, 255, 255, 0.5);
    padding: 1px;
    margin-bottom: 2px;
    background-color: #fff;
}

div#race-info {
    /*height: 110px; */
    width: 90%;
    background: rgba(0, 0, 0, 0.55);
    float: left;
    /* position: absolute; */
    color: white;
    text-shadow: 0px 0px 10px #000000;
    padding: 15px 5px 10px 10px;
    margin: 0px 0px -110px 20px;
    background-color: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(78, 208, 255, 0.2);
}

div#news-block {   
    padding: 10px 20px 10px 20px;
    width: 300px;
    height: auto;
/*    flex-grow: 1;
    margin: 0px 0px 20px 0px;
    min-width: 300px;
    max-width: 600px;
*/
}

table.news-list {
    /*width: 265px;*/
    margin-top: 20px;
    border-collapse: collapse;

}

.newscontainer {
    /* display: inline-block; */
    padding: 5px 5px 5px 10px;
    background: url(/images/ui/text/text_container_topleft.png), url(/images/ui/text/text_container_top.png), url(/images/ui/text/text_container_bottom.png), url(/images/ui/text/text_container_left.png), url(/images/ui/text/text_container_right.png), url(/images/ui/text/text_container_bg.png);
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    background-position: top left, top left 5px, bottom right 10px, top 5px left, bottom 65px right 0px, top 1px left 5px;
    background-size: 5px 5px, 100% 1px, 100% 1px, 5px 100%, 5px 100%, 100% 100%;
}

div#bottom-panel {
    bottom: 0px;
    position: absolute;
    height: 50px;
    width: 100%;
    background: rgba(0, 0, 0, 0.75);
    z-index: 100;
    left: 0px;
}

div#bottom-panel div.contact-info {
    float: right;
    text-align: center;
}



div.login-panel {
    
    display:flex;
    justify-content: center;
    align-items:  center;
}

.login_label{

    font-family: sf_font, Tahoma, sans-serif;
    font-size: 14px;
    white-space:nowrap;
    color:#7ee8fe;
    text-shadow:0px 0px 8px rgba(127,227,252,0.5);
    font-family: sf_title_font, Tahoma, sans-serif;
    font-style: normal;
    text-align: right!important;
    padding-right: 2px;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;    
}

.login_label:after{
    content:':';
}

form#main-login {
    
    margin-bottom: 0px;
}

button.text-btn26 { 
    
    padding-left: 10px;
    padding-right: 10px;
    height: 26px; 
    background-position: left 0px top 0px,right 0px top 0px, left 2px top !important;
    background-size: 2px 26px, 3px 26px, 81px 26px !important;
    width: 85px;
}


div.r-data-info {
    cursor: pointer;
    width: 190px;
    height: 20px;
    top: 304px;
    background-color: rgba(0, 0, 0, 0.5);
    display:table-cell;
    left: 0px;
    padding: 10px;
    text-align:center;
    vertical-align: middle;
}



/**
 * Registration
 */

div#registration-popup {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 100;
}

div#registration-container {   
    position: absolute;
    left: 50%;
    top: 25%;
    margin-left: -250px;
    margin-top: -40px;
    width: 450px;
    /*height: 614px;*/
    background-size: 26px 48px, 42px 14px, 335px 14px, 39px 14px, 18px 48px, 14px 484px, 14px 66px, 18px 16px, 49px 14px, 332px 14px, 37px 14px, 16px 16px, 14px 60px, 14px 462px, 14px 28px, 42px 7px, 336px 7px, 29px 7px, 406px 27px !important;
}

div.container-background {
    margin: 14px;
}

div.registration-frame-title {
    padding: 4px 0px 0px 0px;
    font-family: Arial,sans-serif;
    color: #fff;
    font-size: 18px;
    text-align: center;
}

div.registration-frame-content {
    padding: 20px 20px 34px 20px;
    background-color: rgba(0, 0, 0, 0.7);
}

div.registration-frame-content .fieldLabel {
    font-family: Arial,sans-serif;
    color: #dde4e6;
    font-size: 14px;
}

div.registration-frame-content .label {
    font-family: Arial,sans-serif;
    color: #dde4e6;
    font-size: 12px;
}

div.popup-frame-close {
    position: absolute;
    top: 18px;
    right: 22px;
    font-size: 14px;
}

.blur-filter {
    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -o-filter: blur(2px);
    -ms-filter: blur(2px);
    filter: blur(2px);
}

/**
 * Race info
 */

div#rinfo-popup {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 100;
}

div#rinfo-container {   
    position: absolute;
    left: 50%;
    top: 25%;
    margin-left: -400px;
    margin-top: -40px;
    width: 800px;
    height: 600px;
    background-size: 26px 48px, 42px 14px, 675px 14px, 39px 14px, 18px 48px, 14px 496px, 14px 66px, 18px 16px, 49px 14px, 682px 14px, 37px 14px, 16px 16px, 14px 60px, 14px 474px, 14px 28px, 42px 7px, 736px 7px, 29px 7px, 756px 27px !important;
}

div#rinfo-content-title {    
    font-family: Arial,sans-serif;
    color: #fff;
    font-size: 18px;
    text-align: center;
}

div#info-box {
    height: 460px;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 10px 0px 10px 10px;
}

div#rinfo-content {
    color: #dde4e6;
    font-size: 13px;
    font-family: Arial,sans-serif;    
}

div#reg-info-box {
    text-align: center;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.5);
}

/**
 * Licence
 */

div#licence-popup {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 100;
}

div#licence-container {
    position: absolute;
    left: 50%;
    top: 25%;
    margin-left: -400px;
    margin-top: -40px;
    width: 800px;
    height: 600px;
    background: #fff;
}

div#licence-content-title {
    padding: 2px 0px 0px 0px;
    font-family: Arial,sans-serif;
    color: #5a5a5a;
    font-size: 18px;
    text-align: center;
    text-shadow: 0px 0px 0px #ffffff;
}

div#licence-content-title .popup-frame-close {
    color: #000;
}

div#licence-box {
    height: 500px;
    overflow: auto;  
    margin-top: 10px;  
    padding: 10px;
}

div#licence-content span.title {
    color: #0c0c0c;
    text-shadow: 0px 0px 0px #ffffff;
}

div#licence-content ul.title li {
    color: #0c0c0c;
    text-shadow: 0px 0px 0px #ffffff;
}

div#licence-content ul.text_n li{
    color: #0c0c0c;
    text-shadow: 0px 0px 0px #ffffff;
}

div#licence-content a.text_n {
    text-shadow: 0px 0px 0px #ffffff;
}

/**
 * Tooltip Styles
 */

[data-tooltip] {
    position: relative;
    z-index: 2;
    cursor: pointer;
}

[data-tooltip]:before,
[data-tooltip]:after {
    visibility: hidden;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    pointer-events: none;
}

[data-tooltip]:before {
    position: absolute;
    bottom: 100%;
    left: 10px;
    margin-bottom: 5px;
    padding: 7px;
    width: 180px;
    border:1px solid rgba(44,211,237,0.0);
    border-radius: 3px;
    box-shadow: 0px 0px 2px 2px rgba(44,211,237,0.1);
    padding: 5px;
    backdrop-filter:blur(5px);
    background:rgba(0,0,0,0.5);
    content: attr(data-tooltip);
    text-align: center;
    font-size: 14px;
    line-height: 1.2;
    z-index:100;
}

[data-tooltip]:after {
    position: absolute;
    bottom: 150%;
    left: 50%;
    margin-left: -5px;
    width: 0;
    content: " ";
    font-size: 0;
    line-height: 0;
}

[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
    visibility: visible;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
}


.race-icon {
    
    width:32px;
    height:32px;
    

    
    border-width:1px;
    border-style: solid;
}

.race-icon:hover {
    
    width:40px;
    height:40px;
    
    border-width:1.5px;
}

.race-icon.selected {
    
    width:48px;
    height:48px;
    
    margin:4px;
    
    border-width:2px;
    
}

.bg-grid{
    
    box-sizing: border-box;
    
    background:

        url('/images/backgrounds/textbox-g-10.png') repeat border-box!important;
}

.textbox-g{
    
    padding:5px;

    border:1px solid rgba(43,211,237,0.1);
    box-sizing: border-box;
    
    background:
        
        url('/images/backgrounds/textbox-g-10.png') repeat border-box,
        linear-gradient(to top, rgba(43,211,237,0.05), rgba(43,211,237,0.05) 100%) no-repeat border-box;
    
    
    width:auto;
    height:auto;    
    
    background-position: 
        top 0px left 0px,
        top 0px left 0px;

    background-size: 
        
        17px 17px,
        100% 100%;
    
    overflow: auto;
}

.titlebox-race{

    padding:0px;
    height:32px;
    /*
    display:table-cell;
    vertical-align: middle;*/
    
    text-align: center;
    font-family: sf_title_font, Tahoma, sans-serif;
    color: rgba(43,211,237,1.0);
    
    /*text-shadow:0px 0px 5px rgba(43,211,237,0.5)*/;  
    
    font-size:12px;
    
    /*white-space: nowrap!important;*/
    
    display:flex;
    align-items:center;
    justify-content:center;
    align-content:center;
    flex-flow: row nowrap;
    
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;    
    
    box-sizing: border-box;
    
    background:

        
        linear-gradient(to right, rgba(43,211,237,0.5),rgba(43,211,237,0.5) 100%) no-repeat border-box,
        linear-gradient(to right, rgba(43,211,237,0.5),rgba(43,211,237,0.5) 100%) no-repeat border-box,
        
        linear-gradient(to top, rgba(43,211,237,0.15), rgba(43,211,237,0.15) 100% ) no-repeat border-box;
    
    width:auto;
    
    
    background-position: 

        top 0px left 0px,
        bottom 0px left 0px,
    
        top 0px left 0px;
        
    background-size: 
        
        
        100% 1px,
        100% 1px,
        
        100% 100%;
}


.bg-blur{
    
    backdrop-filter:blur(5px); 
}

.bg-blur-3{
    
    backdrop-filter:blur(3px); 
}