/*-------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*---------"outagepanels.css" ontains all CSS for Trelis Outage functionality for deactivate of links in DotDirect panel and Services tiles--------------*/
/*-------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*------------------------ services tiles ----------------------*/

#tiles {
padding-top:3px;
border-right-color:white;
border-radius:12px 12px 0px 0px;
width: fit-content;
min-height:120px;
margin-right:auto;
margin-left:auto;
background-color:#ffffff;
text-align:center;
width: -moz-fit-content;
}




/*------------------------ Samsung S9 Note------------------ */
@media screen  and (min-width: 376px) and (max-width: 399px){
.tile div {
	margin-left: 35px;
	margin-right:5px;
    width: 75px !important;
    font-size: 14px;
    font-weight: 400;
}

.tile {
padding-left:0px !important;
padding-right:0px !important;
}

.tileborder {
    border-right: 0px solid #cccccc;
}

.tiletext {
margin-left: 8px !important;
margin-top: 5px;
}
}






/*------- Samsung S9 note ---*/
@media screen  and (min-width: 415px) and (max-width: 428px){
.tile {
padding-left:0px !important;
padding-right:0px !important;
}	
}


/*--------------------- changes UAT ------------------*/
@media screen  and (min-width: 495px) and (max-width: 576px){
.tile div{
margin-left:3% !important;
}


}


@media screen and (max-width: 1024px){

.loginheading{
display:none !important;
}
}


@media screen and (max-width: 320px){
	

.servicediv{
	width:290px !important;
}

}


@media screen and (min-width:321px) and (max-width: 375px){
	

.servicediv{
	width:330px !important;
}

}

/*------------------------ IPadpro ------------------ */
@media screen  and (min-width: 1024px) and (max-width: 1024px){
.tile div {
    /* width: 143px !important; */
	width:250px !important;
    font-size: 14px;
    font-weight: 400;
}

.tiletext {
    /* max-width: 120px; */
    text-align: center;
    /*margin-left: 20px !important;*/
    margin-top: 5px;
}
    
    
#tiles{
/* width:585px !important; */
margin-top:0px !important;
margin-left:50px !important;
}




.tileborder{
margin-top:30px !important;    
}

#index1{
border-right: 0px solid #cccccc !important ;    
}
#index2{
border-right: 0px solid #cccccc !important;    
}
#index3{
border-right: 0px solid #cccccc !important;    
}
#index4{
border-right: 0px solid #cccccc !important;    
}
#index5{
border-right: 0px solid #cccccc !important;    
}
#index6{
border-right: 0px solid #cccccc !important;    
}










}




@media screen  and (max-width: 320px){
.crossimg{
display:none !important;
}
}
/*----------------------- Surface duo ------------------*/
@media screen  and (min-width: 415px)/*(min-width: 540px)*/ and (max-width: 720px){
#linkoutage{
margin-top:25px !important;
}

.colheadings{
font-size:16px !important;
margin-bottom:-20px !important;
}

.bottombanner {
display:none !important;
}

.mobManIcon{
width: 25px;
height: 25px;
float: left;
margin-top: 20px;
margin-left: 25px;

}

.mobDoTLogo {
margin-top: 15px !important;
margin-left: 30%;
float: left;
width: 166px;
border: 0px #ff0000 solid;
}

#servicesheading{
font-size:28px !important;
margin-bottom:10px !important;
margin-left: -8px !important;
	
}
.servicediv{
width:96% !important;
margin-left: -28px;	
}
.serviceLi{
width:96% !important;
}
.servicedivstext{
display:block;
font-size:14px;
width:96% !important;
margin-top:25px !important;
margin-bottom:16px !important;
margin-left: 0px !important;	
}



#linkoutage{
font-size:16px;
}    
#mobDoTDirect{
margin-left:-10px !important; 
width:393px !important;
} 

.colheadings{
width:100% !important;
max-width:100% !important;
font-size:16px !important;	
}	

.crosstext{
display:block !important;
margin-top:20px;
}
.crossimg{
display:none !important;
}

#dotdirectcross {
    right: 1px;
    margin-top: -206px !important;
    background-color: #0074E2 !important;
    z-index: 200000;
    position: absolute;
} 
div .link.true   {
width: 104% !important;
margin-left: 0px !important;
}

.outagemessage{
width:95% !important;
margin-left:12px !important;
padding-top:20px !important;
padding-bottom:20px !important;
padding-left:20px !important;
padding-right:0px !important;
box-sizing: border-box;
margin-left: 20px;
margin-bottom: 20px !important;
background-color: #ffffff;
/*box-shadow: 0 0 3px #ffffff; */
border-radius: 5px 5px 5px 5px;
/* width: 84% !important; */
max-width: 1200px;
min-height: 60px;
border-left: 5px #b30000 solid;
display: none;	
	
}	

.loginheading {
display:none;	
}

}

/*------------------------ IPad ------------------ */
@media screen  and (min-width: 768px) and (max-width: 768px){

.tile div {
    width: 140px !important;
    height: 100px;
    float: left;
}
.tiletext {
    /* max-width: 120px; */
    text-align: center;
   /* margin-left: 55px !important; */
    margin-top: 5px;
}
.tileborder{
/* width:20px !important; */	
}

#tiles{
/* padding-left:50px !important; */
max-width: 768px !important;
}
#index1{
border-right: 0px solid #cccccc !important;    
}
#index2{
border-right: 0px solid #cccccc !important;    
}
#index3{
border-right: 0px solid #cccccc !important;    
}
#index4{
border-right: 0px solid #cccccc !important;    
}
#index5{
border-right: 0px solid #cccccc !important;    
}
#index6{
border-right: 0px solid #cccccc !important;    
}
}


/*------------------------ Iphone plus ------------------ */
@media screen  and (min-width: 414px) and (max-width: 414px){

.tile div {
    width: 105px !important;
    font-size: 14px;
    font-weight: 400;
	float:left;
	height:100px;
}

.tiletext{
margin-left:0px !important;
margin-top:5px;    
}


#tiles{
padding-left:25px !important;
max-width: 820px !important;
}
#index1{
border-right: 0px solid #cccccc !important;    
}
#index2{
border-right: 0px solid #cccccc !important;    
}
#index3{
border-right: 0px solid #cccccc !important;    
}
#index4{
border-right: 0px solid #cccccc !important;    
}
#index5{
border-right: 0px solid #cccccc !important;    
}
#index6{
border-right: 0px solid #cccccc !important;    
}
}

/*------------------------ Iphone 6/7  ------------------ */
@media screen and (min-width: 375px) and (max-width: 375px){
	
	
	
	

.tileimg {
margin-bottom:10px !important;
}	
	.tile {
padding-left:0px !important;	
}
.tile div{
 width:100px !important;
/* margin-right:10px; */
/* margin-left:30px; */
font-size: 14px;
font-weight: 400;
margin-bottom:30px;
}
.tiletext{
margin-left:0px !important;
margin-top:5px;    
}


#tiles{
padding-left:22px !important;
max-width: 820px !important;
}
#index1{
border-right: 0px solid #cccccc !important;    
}
#index2{
border-right: 0px solid #cccccc !important;    
}
#index3{
border-right: 0px solid #cccccc !important;    
}
#index4{
border-right: 0px solid #cccccc !important;    
}
#index5{
border-right: 0px solid #cccccc !important;    
}
#index6{
border-right: 0px solid #cccccc !important;    
}



}


/*------------------------ Iphone 5 ------------------ */
@media screen and (min-width: 320px) and (max-width: 320px){
.LoginOrRegister{
margin-right:10px !important;
}

.tile div {
width: 75px !important;
font-size: 14px;
font-weight: 400;
height: 100px;
float: left;
padding-left:10px;
padding-right:0px;
}
.tiletext{
margin-left:-10px !important;
margin-top:5px;  
}
.tileborder {
    float: left;
    margin-top: 15px;
    width: 1px;
    height: 90px;
    margin-left: 12px !important;
    border-right: 1px solid #cccccc;
}
	
#index1{
border-right: 0px solid #cccccc !important;    
}
#index2{
border-right: 0px solid #cccccc !important;    
}
#index3{
border-right: 0px solid #cccccc !important;    
}
#index4{
border-right: 0px solid #cccccc !important;    
}
#index5{
border-right: 0px solid #cccccc !important;    
}
#index6{
border-right: 0px solid #cccccc !important;    
}

	
}

/*------------------------ Samsung S9 ------------------ */

@media screen  and (min-width: 400px) and (max-width: 413px){
.tile div {
    width: 75px !important;
    font-size: 14px;
    font-weight: 400;
	margin-left:0px;
	/* margin-bottom:30px; */
}
.tile{
padding-left:20px !important;
padding-right:20px !important;	
}
.tiletext{
/* margin-left:8px !important; */
margin-top:5px;  
}
#index1{
border-right: 0px solid #cccccc !important;    
}
#index2{
border-right: 0px solid #cccccc !important;    
}
#index3{
border-right: 0px solid #cccccc !important;    
}
#index4{
border-right: 0px solid #cccccc !important;    
}
#index5{
border-right: 0px solid #cccccc !important;    
}
#index6{
border-right: 0px solid #cccccc !important;    
}
}

/*------------------------ Samsung S5 ------------------ */
@media screen  and (min-width: 360px) and (max-width: 360px){
.tile div {
	margin-left: 10px;
	/* margin-right:5px; */
    /* width: 127px !important; */
	width:75px !important;
    font-size: 14px;
    font-weight: 400;
}
.tiletext{
margin-left:0px !important;
margin-top:5px;  
}

#index1{
border-right: 0px solid #cccccc !important;    
}
#index2{
border-right: 0px solid #cccccc !important;    
}
#index3{
border-right: 0px solid #cccccc !important;    
}
#index4{
border-right: 0px solid #cccccc !important;    
}
#index5{
border-right: 0px solid #cccccc !important;    
}
#index6{
border-right: 0px solid #cccccc !important;    
}
.tileborder {
    float: left;
    margin-top: 15px;
    width: 1px;
    height: 90px;
    margin-left: 12px !important;
    border-right: 1px solid #cccccc;
}
}
/*------------------------ end services tiles ----------------------*/



.greydiv
{
    background-color:#000000 !important;
    opacity: 0.5;
    filter: alpha(opacity=40);
    pointer-events: none;
}





@media screen and (max-width:320px){
#servicesheading{
max-height:50px !important;
margin-top:150px !important;
}
.bottombanner{
display:none !important;
}

#mobDotDirectheader{
	float:left;
}
.servicedivs{
margin-left: 15px !important;
margin-top: -20px !important;
}
.serviceLi {
margin-left: 0px !important;
font-size:14px;
}
.colheadings{
margin-left:0px !important;
font-size:16px !important;
}
.outagemessage{
margin-left: auto !important;
margin-right: auto !important;
width:73% !important;
}

.crosstext{
margin-top: -18px !important;
margin-right: -8px !important;
}


.mobDoTLogo{
margin-top: -32px;
margin-left: 80px;
float:left;
width:166px;
border:0px #ff0000 solid;	
}
.mobManIcon{
margin-top: 18px !important;
margin-left: 18px !important;
}
}


@media screen and (min-width:321px) and (max-width:360px){
.LoginOrRegister{
margin-right:10px !important;
}

#servicesheading{
max-height:50px !important;
margin-top:150px !important;
}

div .link.true{
max-width:90%;
}
.servicedivstext{
margin-bottom:16px;
}
#linkoutage{
margin-top:25px;
}
.bottombanner{
display:none !important;
}

#mobDotDirectheader{
	float:left;
}
.servicedivs{
margin-left: 15px !important;
margin-top: -20px !important;
}
.serviceLi {
margin-left: 0px !important;
}
.colheadings{
margin-left:0px !important;

}
.outagemessage{
margin-left: auto !important;
margin-right: auto !important;
width:73% !important;
}

.crosstext{
margin-top: -18px !important;
margin-right: -8px !important;
}


.mobDoTLogo{
margin-top: -32px;
margin-left:30%;
float:left;
width:166px;
border:0px #ff0000 solid;	
}
.mobManIcon{
margin-top: 18px !important;
margin-left: 18px !important;
}
}


@media screen and (min-width:361px) and (max-width:375px){
.LoginOrRegister{
margin-right:10px !important;
}

#servicesheading{
max-height:50px !important;
margin-top:150px !important;
}
#linkoutage{
margin-top:25px;
}
#mobDotDirectheader{
	float:left;
}

div .link.true {
	max-width:85% !important;
	margin-left:0px !important;
}

.servicedivs{
margin-left: 25px !important;
margin-top: -20px !important;
}
.servicedivstext{
margin-bottom:10px !important;	
}
.serviceLi {
margin-left: 0px !important;
}
.colheadings{
margin-left:0px !important;
font-size:16px !important;
}
.outagemessage{
margin-left: 20px !important;
margin-right: 20px !important;
/* width:100% !important; */
}

.crosstext{
margin-top: -18px !important;
margin-right: -8px !important;
}


.mobDoTLogo{
margin-top: -32px;
margin-left:100px;
float:left;
width:166px;
border:0px #ff0000 solid;	
}
.mobManIcon{
margin-top: 18px !important;
margin-left: 18px !important;
}
}

@media screen and (min-width:376px) and (max-width:413px){
.LoginOrRegister{
margin-right:10px !important;
}

#linkoutage{
margin-top:25px;
}
.servicesheading{
margin-left:-8px !important;
}

div .link.true{
width:96% !important;
margin-left:0px !important;
}

#mobDotDirectheader{
	float:left;
}

#DotDirectMain h2{
margin-left: 8px !important;
margin-top:150px !important;
}

.servicedivstext{
margin-bottom:16px !important;
margin-top:-16px;
}

.servicedivs{
margin-left: 20px !important;
margin-right: 20px !important;
}
.serviceLi {
margin-left: 0px !important;
font-size:14px !important;
}
.colheadings{
margin-left:0px !important;
max-width:96% !important;
font-size:16px !important;
}
.outagemessage{
margin-left: 20px !important;
margin-right: 20px !important;
/* width:100% !important; */
}

.crosstext{
margin-top: -18px !important;
margin-right: -8px !important;
}


.mobDoTLogo{
margin-top: -32px;
margin-left:30%;
float:left;
width:166px;
border:0px #ff0000 solid;	
}
.mobManIcon{
margin-top: 18px !important;
margin-left: 18px !important;
}
}

@media screen and (min-width:415px) and (max-width:539px){

#mobDoTDirect{
margin-left:-10px !important;
}

.crossimg {
display:none !important;
}

.crosstext{
margin-top: 30px !important;
margin-right: -20px !important;
display:block !important;
}

.mobDoTLogo{
margin-top:9px !important;
margin-left:22%;
float:left;
width:166px;
border:0px #ff0000 solid;	
}

#mobDotDirectheader {
border:0px #000000 solid;
max-height:50px;
float:left;
}

.mobManIcon{
margin-top: 12px !important;
margin-left: 12px !important;
}

.bottombanner {
    display:none;
}
}


@media screen and (min-width:768px) and (max-width:768px){
.mobDoTLogo{
margin-top:13px;
margin-left:145px;
float:left;
width:188px;
border:0px #ff0000 solid;	
}

#mobDoTDirect{
	width: 745px !important;
}
	
.bottombanner {
    display:none;
}
}






@media screen and (max-width:1025px) and (min-width:1236px){
.bottombanner {
    display:block !important;
}
}


/*-------------- DotDirect panel helper text ------------------*/

 .DotDirectPanelText{
font-weight:normal;
font-size:16px;
margin-bottom:10px;
margin-top:20px;
text-align:left;
font-size:1em;	
}

@media screen and (max-width:375px){
.DotDirectPanelText{
margin-left:20px;
}

#index1{
border-right: 0px solid #cccccc !important;    
}
#index2{
border-right: 0px solid #cccccc !important;    
}
#index3{
border-right: 0px solid #cccccc !important;    
}
#index4{
border-right: 0px solid #cccccc !important;    
}
#index5{
border-right: 0px solid #cccccc !important;    
}
#index6{
border-right: 0px solid #cccccc !important;    
}

}



@media screen and (min-width:376px) and (max-width:400px){
.DotDirectPanelText{
margin-left:30px;
width:88%;	
}

#index1{
border-right: 0px solid #cccccc !important;    
}
#index2{
border-right: 0px solid #cccccc !important;    
}
#index3{
border-right: 0px solid #cccccc !important;    
}
#index4{
border-right: 0px solid #cccccc !important;    
}
#index5{
border-right: 0px solid #cccccc !important;    
}
#index6{
border-right: 0px solid #cccccc !important;    
}


}
@media screen and (min-width:401px) and (max-width:414px){
.DotDirectPanelText{
margin-left:25px;
width:91%;	
}
#index1{
border-right: 0px solid #cccccc !important;    
}
#index2{
border-right: 0px solid #cccccc !important;    
}
#index3{
border-right: 0px solid #cccccc !important;    
}
#index4{
border-right: 0px solid #cccccc !important;    
}
#index5{
border-right: 0px solid #cccccc !important;    
}
#index6{
border-right: 0px solid #cccccc !important;    
}


}
@media screen and (min-width:415px) and (max-width:768px){
.DotDirectPanelText{
margin-left:25px;
width:91%;	
}

#index1{
border-right: 0px solid #cccccc !important;    
}
#index2{
border-right: 0px solid #cccccc !important;    
}
#index3{
border-right: 0px solid #cccccc !important;    
}
#index4{
border-right: 0px solid #cccccc !important;    
}
#index5{
border-right: 0px solid #cccccc !important;    
}
#index6{
border-right: 0px solid #cccccc !important;    
}





}
@media screen and (min-width:769px) and (max-width:1024px){
.DotDirectPanelText{
margin-left:30px;
width:91%;	
}
}
@media screen and (min-width:1025px){
.DotDirectPanelText{
margin-left:30px;
width:91%;	
}
}



/*-------------- hover behaviour services tiles--------------- */

@media screen and (min-width:1024px){
.master:hover{

border-bottom:3px #0074E2 solid;
/* padding-bottom:5px;
margin-bottom:-15px; */
transition: 0.2s;
}

.tile-covid19:hover{
    border-bottom:3px #ffab00 solid !important;
}

.master:hover img:nth-child(1){ 
/* .master:hover img{ */
margin-top:1px; 
margin-bottom:9px;
transition: 0.2s;
}


.master{
padding-bottom:5px;
height: 100px;
float: left;
margin-left:15px !important;
margin-right:15px !important;
border-top:3px transparent solid;



}


}








/*---------- Cross for DotDirect panel open  ------------*/

@media screen and (min-width:360px) and (max-width: 360px){
#mobDotDirect{
width:100px !important;	
}	
}



@media screen and (min-width:1024px) and (max-width: 1024px){
#linkoutage{
margin-top:25px !important;
}
.loginbutton{
margin-right: -48px !important;
}
#mobDoTDirect{
width:999px !important;	
}

.crosstext{
display:block !important;
z-index:1000000;
margin-top:-50px;
}
.crossimg{
display:none !important;
background-image:url("/images/DSKXDefault.svg");
height:50px;
width:50px;	
}
.crossimg:hover{
background-image:url("/images/DSKXHover.svg");	
}
#dotdirectcross {
font-size:1.7em;
float:right;
color:#CBE5FF;
padding-right:11.2px;
padding-top:2px;
padding-bottom:5px;
margin-right:45px !important;
margin-top:-154px !important;
}



}





@media screen and (min-width:320px) and (max-width: 359px){
.servicedivstext{
margin-bottom:16px;
}
#linkoutage{
margin-top:25px;
}

#mobDoTDirect{
margin-left:-10px !important; 
width:299px !important;
}     


.crosstext{
display:block !important;
margin-top:-26px;
}
.crossimg{
display:none !important;
}



#dotdirectcross {
    right: 1px;
    margin-top: -190px !important;
    background-color: #0074E2 !important;
    z-index: 200000;
    position: absolute;
} 
div.link.true   {
width: 75% !important;
margin-left: 0px !important;
}
.colheadings{
/* width: 75% !important; */
width: 92% !important;
margin-bottom:-16px;
}	


} 




@media screen and (min-width:360px) and (max-width: 413px){
.bottombanner{
display:none !important;
}
    
#mobDoTDirect{
margin-left:-10px !important; 
width:354px !important;
} 

.colheadings{
/* width:87% !important; */
width:92% !important;
margin-bottom:-16px;
}	

.crosstext{
display:block !important;
margin-top:-24px;
}
.crossimg{
display:none !important;
}

#dotdirectcross {
    right: 1px;
    margin-top: -190px !important;
    background-color: #0074E2 !important;
    z-index: 200000;
    position: absolute;
} 
div .link.true{
width:290px;
}	    
}


@media screen and (min-width:360px) and (max-width: 360px){
#mobDoTDirect{
width:339px !important;	
}	
}


@media screen and (min-width:400px) and (max-width: 400px){
#mobDoTDirect{
width:379px !important;	
}	
}



@media screen and (min-width:414px) and (max-width: 414px){

.LoginOrRegister {
    float: right;
    margin-right: 18px;
}

.bottombanner {
display:none !important;
}

.mobManIcon{
width: 25px;
height: 25px;
float: left;
margin-top: 25px;
margin-left: 25px;

}

.mobDoTLogo {
margin-top: 20px !important;
margin-left: 80px;
float: left;
width: 166px;
border: 0px #ff0000 solid;
}

#servicesheading{
font-size:28px !important;
margin-bottom:10px !important;
margin-left: -8px !important;
	
}
.servicediv{
width:366px !important;
margin-left: -28px;	
}
.servicedivstext{
display:block;
font-size:14px;
width:366px;
/* margin-top:-27px; */
float:left;
margin-bottom:33px;
margin-left: 0px !important;	
}



#linkoutage{
font-size:16px;
margin-top: 25px !important;
}    
#mobDoTDirect{
margin-left:-10px !important; 
width:393px !important;
} 

.colheadings{
width:100% !important;
max-width:100% !important;
font-size:16px !important;
margin-bottom: -12px;	
}	

.crosstext{
display:block !important;
margin-top:25px;
}
.crossimg{
display:none !important;
}

#dotdirectcross {
    right: 1px;
    margin-top: -206px !important;
    background-color: #0074E2 !important;
    z-index: 200000;
    position: absolute;
} 
div .link.true   {
/* width:338px !important; */
margin-left: 0px !important;
}

.outagemessage{
width:366px;
margin-left:12px !important;
padding-top:20px !important;
padding-bottom:20px !important;
padding-left:20px !important;
padding-right:0px !important;
box-sizing: border-box;
margin-left: 20px;
margin-bottom: 20px !important;
background-color: #ffffff;
/*box-shadow: 0 0 3px #ffffff; */
border-radius: 5px 5px 5px 5px;
/* width: 84% !important; */
max-width: 1200px;
min-height: 60px;
border-left: 5px #b30000 solid;
display: none;	
	
}	

.loginheading {
display:none;	
}




    
}


@media screen and (min-width:721px) and (max-width:767px){
.LoginOrRegister{
margin-right:18px !important;
}
.colheadings{
font-size:16px !important;
margin-bottom:-16px !important;
}
 .servicedivstext{
margin-bottom:16px !important;
margin-left:20px !important;
margin-top:-10px !important;
 }
 
 #linkoutage{
margin-top:25px !important;
 }
.crossimg{
display:none !important;
}
.crosstext{
display:block !important;
margin-top: -105px !important;
margin-right: -10px;
}

.mobManIcon{
width: 25px;
height: 25px;
float: left;
margin-top: 20px;
margin-left: 25px;

}

.mobDoTLogo {
margin-top: 16px !important;
margin-left: 220px;
float: left;
width: 166px;
border: 0px #ff0000 solid;
}

#servicesheading{
font-size:28px !important;
margin-bottom:10px !important;
margin-left: -8px !important;
	
}












}





@media screen and (min-width:769px) and (max-width: 1023px){
 #linkoutage{
margin-top:25px !important;
 }
 .crosstext{
display:block !important;
margin-top: -18px !important;
margin-right: 35px !important;
}
.crossimg{
display:none !important;
}
#dotdirectcross {
    right: 1px;
    margin-top: -185px !important;
    background-color: #0074E2 !important;
    z-index: 200000;
    position: absolute;
} 
div .link.true   {
width:96%;
}
.colheadings{
width:93% !important;	
}
.outagemessage{
padding-top:20px !important;
padding-bottom:20px !important;
padding-left:20px !important;
padding-right:0px !important;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
background-color: #ffffff;
/*box-shadow: 0 0 3px #ffffff; */
border-radius: 5px 5px 5px 5px;
/* width: 92% !important; */
max-width: 1200px;
min-height: 60px;
border-left: 5px #b30000 solid;
display: none;	
	
}
}








@media screen and (min-width:1025px){
	
	div .link.true   {
/* width:93%; */
}
	
}

/* -------- Mobile -------*/
@media screen and (max-width: 400px){
/* .outagemessage {
    width: 72% !important; */
}
}

@media screen and (max-width: 480px){

#mobDotDirectheader
{
display:block;
z-index:100000;
background-color:#0074E2 !important;
}


.bottombanner {
    display:none;
}



/* .outagemessage {
width:72% !important;
} */

#dotdirectcross {
/* font: normal normal bold 36px/44px Work Sans; */
}



.LoginOrRegister
{
float:right;
margin-right:10px;
}

.registerbutton {
margin-left: 0px !important;
}

.outageimagered {
    /* height: 250px !important; */
}

}
/* -------- End of Mobile -------*/


/* --------- start of between desktop and tablet --------*/

@media screen and (min-width:1025px) and (max-width:1199px)
{
.crossimg{
margin-right:20px !important;
}
}

@media screen and  (min-width:1201px){
.crossimg{
margin-right:24px !important;
}
}
@media screen and  (min-width:1200px) and (max-width:1200px){
.servicediv{
width:  33.5%!important;
margin-right:10px !important;
margin-left: -22px;
}	
}	

@media screen and  (min-width:1200px) /*and (max-width:1232px)*/ {
.crossimg{
margin-top:-45px !important;
}
div .link.true{
margin-left:0px !important;
width:94% !important;
max-width: 325px;
}

#DotDirectMain h2 {
padding-top:0px !important;
padding-bottom:20px;	
}

#dotdirectcross {
margin-top:-55px !important;
margin-left:0px !important	
}
.loginheading{
height:65px !important
}
.loginheading p{
margin-top:-10px !important;
}
#servicesheading {
margin-top:40px !important;
margin-right:0px !important;
margin-left:10px;
width:fit-content !important;
}

.servicediv{
    width: 33.5% !important;
margin-right:10px !important;
margin-left: -22px;
}	

.servicedivs {
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    padding-left: 26px !important;
}

.servicedivstext{
float:left;
width:100%;
margin-left:12px;
border:0px #000000 solid !important;
display:none !important;

}

.colheadings{
width:88%;
max-width:340px !important;
}

.serviceLi{
margin-bottom:2em !important;	
}
.bottombanner{
margin-top:-10px !important;	
}


}


@media screen and (min-width: 1025px) and (max-width:1199px) {
#servicesheading{
margin-top: 30px !important;
margin-left:12px;
}

#dotdirectcross
{
margin-top: -58px !important;
margin-right:0px !important
}

div .link.true{
width:100% !important;
}    
/* .bottombanner {
    display:none; 
}*/
    
.tiletext{
margin-left:10px !important;
  max-width:120px;
  margin-top:5px;
}    
#index6{
border-right: 0px solid #cccccc;    
}
/*div .true {
width:280px !important;
} */

.tile div{
width: 133px !important;
font-size:14px;
font-weight:400;
}
.servicedivs{
margin-left:-20px !important;	
}
.servicediv{
width:30.7% !important;
margin-right:0px !important;
margin-left:20px !important;
}
.servicedivstext{
	display:none;
}

.colheadings{
/* width:287px; */
}
.tiletext{
margin-left:8px !important;
}    
}


@media screen and (max-width:1199px) and (min-width: 1191px) {
    
/* .bottombanner {
    display:none;
} */

.tiletext{
  max-width:120px;
  margin-top:5px;
}
#index6{
border-right: 0px solid #cccccc;    
}
div .true {
width:287px !important;
} 

.colheadings{
width:287px !important;
}

.tile div{
width: 133px !important;
font-size:14px;
font-weight:400;
}



}
/* --------- end of between desktop and tablet --------*/


.servicedivs{
margin-left:12px;	
}





#mobDotDirectheader
{
display:block;
z-index:100000;
background-color:#0074E2 !important;
}

#mobDoTDirect{
display:block !important;
float:left;
margin-left:-8px;
width:100% !important;
border: 0px solid #055FAB;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 10px;
padding-left: 10px;
border-radius: 0px 0px 10px 10px;
background-color:#055FAB;
background: linear-gradient(#034E8E 1%, #055FAB );
margin-bottom:20px;
    margin-top: 1px;
    /* position: absolute; */
    z-index:300000;
}

#mobDoTDirect img{
margin-left:10px;    
}

.LoginOrRegister
{
float:right;
}


/* --------- start of tablet --------*/
.tiletext{
}

@media screen and (min-width: 768px) and (max-width: 768px){
#linkoutage{
margin-top:25px;
}
.true.loginbuttonoutage {
margin-right: -45px;
}

.registerbutton {
    margin-right: 5px;
    margin-left: 48px;
}

.loginbutton{
margin-right: -48px !important;
}
.crossimg{
display:none !important;
}
.crosstext{
display:block !important;
margin-top:-125px !important;
margin-right:22px !important;
}

.mobDoTLogo{
margin-top:14px;
margin-left:200px;
float:left;
width:188px;
border:0px #ff0000 solid;	
}

.mobManIcon{
width: 25px;
height: 25px;
margin-left: 60px !important;
margin-top: 22px !important;
float: left;
}

.LoginOrRegister{
margin-right:50px;
}
#mobDoTDirect img {
    margin-left: 50px !important;
}

#mobDotDirectheader{
max-height: 95px !important;
margin-top: 0px !important;

}

.outagemessage{
margin-left:50px !important;
margin-right:50px !important;
}

.servicedivstext{
margin-top:-23px !important;
margin-bottom: 16px !important;
margin-left: 38px !important;
}

div .link.true {
/* width:fit-content !important; */
width: 45% !important;
padding-bottom: 4px !important;
padding-right: 10px !important;
padding-left: 5px !important;
font-size: 18px !important;
margin-top: 18px !important;
margin-left: -2px !important;
}

.loginheading{
display:none !important;
}
.colheadings{
max-width:88% !important;
width:88% !important;
margin-left:38px !important;
font-size:16px !important;
margin-bottom: -18px;
}    
.bottombanner {
    display:none;
}

#mobDoTDirect{
width:100% !important;
margin-left: -9px;
}    
    
.tiletext {
    /* max-width: 120px; */
    text-align: center;
    margin-left: 0px ;
    margin-top: 5px;
}



.master{
margin-left: 50px;
margin-right: 30px;
margin-top:0px;
}

div .true {
padding-left:0px !important;
} 


.servicediv{
width:100% !important;
}
.serviceLi{
margin-left:38px !important;
}
#servicesheading{
margin-left:30px !important;
}








	
	
}




@media screen and (max-width:1024px){
.bottombanner {
 display:none;
}	
}





@media screen and (max-width:1024px) and (min-width: 769px) {


.true.loginbuttonoutage {
margin-right: -45px;
}

#index1{
border-right: 0px solid #cccccc !important;    
}
#index2{
border-right: 0px solid #cccccc !important;    
}
#index3{
border-right: 0px solid #cccccc !important;    
}
#index4{
border-right: 0px solid #cccccc !important;    
}
#index5{
border-right: 0px solid #cccccc !important;    
}
#index6{
border-right: 0px solid #cccccc !important;    
}


.registerbutton {
    margin-right: 5px;
    margin-left: 48px;
}

.loginbutton{
margin-right: -48px !important;
}


.mobDoTLogo{
margin-top:14px;
margin-left:33%;
float:left;
width:188px;
border:0px #ff0000 solid;	
}

.mobManIcon{
width: 25px;
height: 25px;
margin-left: 60px !important;
margin-top: 22px !important;
float: left;
}

.LoginOrRegister{
margin-right:50px;
}
#mobDoTDirect img {
    margin-left: 50px !important;
}

#mobDotDirectheader{
max-height: 95px !important;
margin-top: 0px !important;

}

.outagemessage{
margin-left:50px !important;
margin-right:50px !important;
}

.servicedivstext{
margin-top:-23px !important;
margin-bottom: 15px !important;
margin-left: 38px !important;
}

div .link.true {
/* width:fit-content !important; */
width: 45% !important;
padding-bottom: 4px !important;
padding-right: 10px !important;
padding-left: 5px !important;
font-size: 18px !important;
margin-top: 18px !important;
margin-left: -2px !important;
}

.loginheading{
display:none !important;
}
.colheadings{
max-width:91% !important;
width:100% !important;
margin-left:38px !important;
font-size:16px !important;
margin-bottom: -14px;
}    
/* .bottombanner {
    display:none;
} */

#mobDoTDirect{
margin-left: -9px !important;
width: 99.8% !important;
}    
    
.tiletext {
    /* max-width: 120px; */
    text-align: center;
    margin-left: 0px ;
    margin-top: 5px;
}



.master{
/* margin-left: 50px; */ 
margin-left:12%;
/* margin-right: 30px; */
margin-right:auto;
margin-top:0px;
}

div .true {
padding-left:0px !important;

} 


.servicediv{
width:100% !important;
}
.serviceLi{
margin-left:38px !important;
}
#servicesheading{
margin-left:30px !important;
}

}
/* --------- end  tablet --------*/
@media screen and (min-width:1024px) {
#tiles
{
margin-top:-120px;  
}    

#tiletext{
margin-left:35px !important;    
}

#servicesheading{
margin-top:-50px;
}

}

@media screen and (min-width: 1025px) {

#mobDotDirectheader
{
display:none;
}

#mobDoTDirect{
display:none !important;
}

}


#DotDirectMain a:hover
{
 text-decoration:none;   
}




.herocell
{
width:100%;
float:left;
}
.greydiv
{
    background-color:#000000 !important;
    opacity: 0.5;
    filter: alpha(opacity=40);
    pointer-events: none;
}


.greydiv  img{
    opacity: 0.2;
    filter: alpha(opacity=40); /* msie */
    pointer-events: none;
}

.greydiv.hicon-boxes-wraper
{
    background-color:#000000 !important;
    opacity: .5;
    filter: alpha(opacity=40); /* msie */  
    pointer-events: none;
}

.greydiv.hero
{
    background-color:#000000;
    opacity: .5;
    filter: alpha(opacity=40); /* msie */ 
    pointer-events: none;
}





#tiles {
padding-top:3px;

border-right-color:white;
border-radius:12px 12px 0px 0px;
/* max-width:820px; */
width: fit-content;
min-height:120px;
margin-right:auto;
margin-left:auto;
background-color:#ffffff;
text-align:center;
width: -moz-fit-content;

}




.tile{
font-weight:normal; 
font-size:14px;
line-height:18px;
color:#424242;
padding-left:8px;
padding-right:8px;
}

.tile1.true{
opacity:.5;
pointer-events: none;
cursor: default;
}

.TRELISAPP-CustomUnavailable .tileimg{
    opacity:.5;
    pointer-events: none;
    cursor: default;
    color: #7099BC !important;
}



.tile div {
width:133px;
height:100px;
float:left;    
}
.tiletext{
    /*max-width: 120px;*/
    text-align: center;
   margin-left:0px;
   margin-top:5px;
}
@media screen  and (min-width: 1025px){
#index1{
border-right: 1.5px solid #cccccc !important;    
}
#index2{
border-right: 1.5px solid #cccccc !important;    
}
#index3{
border-right: 1.5px solid #cccccc !important;    
}
#index4{
border-right: 1.5px solid #cccccc !important;    
}
#index5{
border-right: 1.5px solid #cccccc !important;    
}
#index6{
border-right: 0px solid #cccccc !important;    
}
}

@media screen  and (min-width: 700px) and (max-width: 767px){
#index1{
border-right: 0px solid #cccccc !important;    
}
#index2{
border-right: 0px solid #cccccc !important;    
}
#index3{
border-right: 0px solid #cccccc !important;    
}
#index4{
border-right: 0px solid #cccccc !important;    
}
#index5{
border-right: 0px solid #cccccc !important;    
}
#index6{
border-right: 0px solid #cccccc !important;    
}
}

@media screen  and (min-width: 769px) and (max-width: 921px){
#index1{
border-right: 0px solid #cccccc !important;    
}
#index2{
border-right: 0px solid #cccccc !important;    
}
#index3{
border-right: 0px solid #cccccc !important;    
}
#index4{
border-right: 0px solid #cccccc !important;    
}
#index5{
border-right: 0px solid #cccccc !important;    
}
#index6{
border-right: 0px solid #cccccc !important;    
}
}




.headingdiv{
margin-bottom:50px;
margin-left:20px;
margin-top:-40px;
}

.tileimg {
height:34px;
width:34px;
margin-top:10px;    
}

.true .tileimg{
margin-top:10px !important;   
}

@media screen  and (min-width: 1025px){
.tile{
padding-left:8px !important;
padding-right:8px !important;	
}
.tileborder {
float:left;
margin-top:18px !important;
/*width:1px;*/
border-width:2.5px !important;
/*height:90px;*/
height:90px !important;
border-right: 1px solid #cccccc;
}
.master{
padding-left:35px;
padding-right:35px;	
margin-left:0px;
margin-right:0px;
}	
}


.tileborder {
float:left;
margin-top:15px;
/* width:1px; */
border-width:2.5px !important;
height:90px;
/*height:120px !important;*/
border-right: 1px solid #cccccc;
}

.CustomUnavailable a {
pointer-events: none;
cursor: default;
font-size:.9em;
box-shadow: none;
}

.CustomUnavailable .tiletext {
opacity: .5;
}

#DotDirectMain h2 {
opacity:.87;
/* font-family:workSans,Bold, sans-serif; */
font-size:28px;
/* padding-top:80px; */
margin-top:80px;
max-width:900px;
} 

#DotDirectMain a {color:#ffffff;}   
#DotDirectMain {
width:100%;  
color: #ffffff;
font-size:16px;
background-color:#0074E2;    
left: 0px;
top: 0px;
z-index:100000;
position:absolute;
margin-top:0px;
display:none;




margin-left:auto;
margin-right:auto;
}


#DotDirectMain .rd {
color:#ffffff;  
margin-right:5px;
}

#servicesheading {
color:#ffffff;
border:0px #000000 solid;
margin-bottom:30px;
margin-top:10px;
padding-left:20px;
font-weight:bold;
line-height:44px;
}



.true  a {
pointer-events: none;
cursor: default;
font-size:.9em;
margin-bottom:2px;
box-shadow: none;
color:#7099BC !important;
}

.true .login
{
display:none;
}


div .link.true   {

color:#7099BC !important;
/* padding-left:5px;
padding-right:5px; */

margin-left: -8px;
padding-top: 5px;
padding-bottom: 2px;
padding-left: 5px;
background-color:#055FAB;
border: 0px solid;
border-radius: 5px;
height:25px;
width:358px;

font-size:16px;
/* margin-top:6px !important; */
}

div .imgout {
    display: none;
}

div .true img {
    display: inline;
    margin-right: 5px;
    margin-left: 5px;
   /* margin-top:1px; */
}


/* Small red outage icon Online services link in header */
 
.SmallRedOutageIcon {
    display: none;
}


.SmallRedOutageIcon.true {
    display: block !important;
    margin-right:-37px !important;
    margin-top:-45px !important;
    float:right;
}

/* End Small red outage icon Online services link in header */


/* Man Icon in header */

img.true.IconOutage {
    display: none;
}

img.IconRedOutage {
    display: none;
}

img.true.IconRedOutage {
    display: block !important;
    float:left;
    /* pointer-events:none; */
   /* cursor:default; */
    margin-top: 0px !important;
}

/* End of man Icon in header */




div .true a:link {
    text-decoration: none;
}



.mainservicediv
{
width:100%;    
padding:0px; 
padding-bottom:0px;
}

.mainservicediv a{
text-decoration:underline;    
}

.mainservicediv a:hover{
text-decoration:none;    
}

.servicediv {
color:#ffffff;
float:left;
width:354px;
text-align:left;
margin-right: 40px;
}

.serviceLi {
/* margin-top:10px; */
/* margin-bottom:10px; */
margin-bottom: 2em !important;
list-style:none;
}

#mobDotDirectheader
{
margin-left:-10px;
/* margin-top:-64px; */
height:65px;
width:100%;
background-color:#ffffff;
/* position:absolute; */
z-index:100000;
}



#mainservicediv hr {
width:50px;
float:left;
border-top: 0px solid #ffffff;
padding-left:0px;
margin-left:40px;
margin-right:40px;
}

#mainservicediv span {
float:left;

}
.servicelink
{
}

#mainservicediv {
float:right;
margin-top:-70px;
margin-right:-50px;
display: inline-block;
}
.crosstext{
display:none;
}
.crossimg{
display:block;
background-image:url("/images/DSKXDefault.svg");
height:50px;
width:50px;
margin-top:-20px;	
}
.crossimg:hover{
background-image:url("/images/DSKXHover.svg");	
}
#dotdirectcross {
font-size:1.7em;
float:right;
color:#CBE5FF;
/* border-radius: 100%; background-color: #055FAB; */
/*background-image: url(/images/DSKXDefault.svg);*/
padding-left:12px;
padding-right:11.2px;
padding-top:2px;
padding-bottom:5px;
margin-right:18px;
margin-top:-80px;
}
.colheadings
{
font-weight:600;
font-size: 24px;
/* padding-top:10px; */
margin-left:30px;
border-bottom:1px #eeeeee solid;
line-height:2em;
max-width:354px;
}

.loginheading
{
padding-top:0px;
margin-left:0px; 
border:0px #eeeeee solid;
width:100%;
Height:145px;
background-color:#0074E2;
float:left;
text-align:center;
}

.loginheading p{
margin-top:55px;
/* margin-left:30px; */
}
.logintext
{
font-weight:normal;
padding-top:0px;
margin-left:30px; 
border-bottom:0px #eeeeee solid;
width:100%;
line-height:2em;
background-color:#3366ff;
float:left;
height:250px;
}
.loginbut
{
margin-top:20px;
margin-right:20px;
}
.bottombanner
{
font-weight:normal;
padding-top:30px;
margin-left:0px;
margin-top:8px; 
border-bottom:0px #eeeeee solid;
width:100%;
line-height:1em;
background-color:#055FAB;
float:left;
text-align:center;
height:116px;
}


.bottombanner img{
vertical-align:middle;    
}

.outageimagered
{
height: 90px;
float: left;
padding-top: 5px;
margin-right: 15px;
}

.outagemessage
{
padding:26px;
/*margin-left:auto;
margin-right:auto; */
margin-left: 30px;
margin-right: 30px;

margin-bottom:45px;
background-color:#ffffff;
/* box-shadow: 0 0 3px #ffffff; */
border-radius: 5px 5px 5px 5px;
/* width:100%; */
max-width:1060px;
min-height:60px;
border-left: 5px #b30000 solid;
display:none;
}

.outagetext
{
font-weight:normal;
padding:5px;
margin-left:45px; 
width:80%;
color:#000000;
line-height:1.5em;
background-color:#ffffff;
max-width:900px;
}
.tilesoutagetext
{
text-align:center;
margin-top:5px;
font-weight:normal;
}


.registerbutton
{
margin-right:5px;
}



.registerbuttonoutage
{
display:none;
}

.true.registerbutton
{
display:none;
}

.true.registerbuttonoutage
{
display:inline;    
}

.Registerfordotdirect
{
color:#7099BC;    
}


.loginbutton
{
margin-left:20px;

}


.loginbuttonoutage
{
margin-left:20px;
display:none;
}

.true.loginbutton
{
display:none;
}

.true.loginbuttonoutage
{
display:inline;
}

.btn-primary.true{
	background-color:#666666 !important;
    pointer-events:none;
    cursor:default;
    opacity:.2;	
}
.Outage {
    display: block !important;
    pointer-events:none;
    cursor:default;
    opacity:.2;
}


.register
{
float:left;    
}

.login
{
float:left;      
}
.login1{
width:170px;
height:60px;
}
.master a{
color:#000000;
}