.popup{
    background-color: white;
    z-index: 9999;
    padding: 0px 40px;
    position: fixed;
    width: 70%;
    height: 52%;
    top: 25%;
    margin-left: 0.8em;
}
.popup > p{
    padding: 10px 0px;
    text-align: left;
    font-size: 20px;
    float:left;
    width: 100%;
}
.link{
    text-decoration : none;
    color:#3399cc;
	cursor:pointer;
}
.popup > hr{
    border: 1px solid #eee; float: left; width: 100%; 
}
.popup > div{
    float: left; font-size: 20px; margin-top: -1em;
}
.popup > h1{
    text-align: left;
    font-weight: 300;
    float:left;
    width: 11em;
}
.popupBg
{
    background-color:black;
    opacity: 0.20;
    filter: alpha(opacity = 70);
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 9998;
}
body{
    margin : 0;
    text-align : center;
    color:#032B5A;
    font-family: frutiger45light;
    background:white !important;
}
#sec{
    background : linear-gradient(180deg, #0E2B5A 0%, #054D87 40.01%, #057BB7 80.96%, #258EC5 100%);
    color:white;
}
#headTitle{
    font-size: 1.6em;
    font-weight: normal;
    margin: 0;
    font-family: 'Frutiger45Light' !important;
    grid-column: 2 !important;
    -ms-grid-column:2 !important;
    margin-left: 0.95em;
    padding-top: 1em;
    margin-top: -0.4em;
    padding-bottom: 1em;
}
#headerPanel{
    background:rgb(241,241,241);
}
#CustomerGreeting{
        margin-top: -1em;
        background-color: white;
}
#footermessage{
    margin-top: 0em !important;
    margin-bottom: -2em;
    margin-left: 2em;
    margin-right: 2em;
}
.subheadTextStyle{
    font-size: 1.2em;
    font-weight: normal;
    margin: 0;
    font-family: 'Frutiger45Light' !important;
    grid-column: 2;
    -ms-grid-column:2;
    margin-left: 1.4em;
    margin-top: 0.5em;
    padding-bottom: 1.5em;
    display: none;
}
.purpleBanner{
    grid-column: 2;
    -ms-grid-column: 2;
    color: white;
    font-family: frutiger45light;
    font-size: 1em;
    margin-top: 0em; 
    padding-top: 0.5em;
    padding-bottom: 0.4em;
    margin-left: 1.5em;
}
#cexPurpleBanner{
    grid-template-columns: 0.4fr 3fr 1fr;
    -ms-grid-columns: 0.4fr 3fr 1fr;
    text-align: left;
}
.subheader{
    font-weight: 600;
    margin: 0;
    font-family: 'Frutiger45Light' !important;
}

#callbackHeader{
    grid-column: 2;
    -ms-grid-column:2;
    margin-top: -1em;
	height: 75px;
    border: 0 solid #979797;
    border-radius: 4px;
    background: linear-gradient(180deg, #f1f1f1 0%, #E6E6E6 100%);
}
#contactHeader{
    grid-column: 2;
    -ms-grid-column:2;
    padding-left: 2.1em;
    background-color: white;
    padding-top:0.5em;
    padding-bottom:0.5em;
}
#reqCallBack{
    font-size: 20px !important;
	background-color: inherit;
    padding-left: 1.5em;
    padding-bottom: 1em;
	padding-top: 1em;
}
#reqContact{
    font-size: 1em !important; 
    margin-top:0.5em;
    margin-bottom:0.5em;
}
#section-a p{
    text-align:left;
    font-family: frutiger45light;
    font-size: 1.6em;
    padding:1.2em;
    margin:0;
}
ul{
    margin:0;
}
#customerAgentImage{
    background: url(/resource/1539856502000/SMBDigital/images/guru-camilla-promo-s-short-1100-dark-210417.jpg);
    color:white;
    border: 1px solid #032B5A;
    height: 12.5em;
}
#headerTitle{
    font-family: frutiger45light;
    color: #032B5A;
    font-weight: 600;
    font-size: 22px;
    margin-top: 56px;
}
.hrshadowcss {
    height: 12px;
    border: 0;
    box-shadow: 0 10px 24px -4px #bfbfbf;
    grid-column: 2;
    -ms-grid-column:2;
	display: block;	
}
.commSelectClass{
    //background: linear-gradient(180deg, #0E2B5A 0%, #054D87 40.01%, #057BB7 80.96%, #258EC5 100%) !important;
    background: white;
    height: 13.6em;
}
#phoneSelectionDiv{
    grid-column: 2 !important;
    -ms-grid-column:2 !important;
    margin-top: -0.5em;
    background:rgb(241, 241, 241);
}
#emailSelectionDiv{
    grid-column: 3;
    -ms-grid-column:3;
    margin-left: 0.06em;
    margin-top: -1em;
    background:rgb(241, 241, 241);
}
.iconOval {
    height: 60px;
    width: 60px;
    background-color: #952D98;
    float: right;
    margin-top: 17px;
    margin-right: 30px;
    border-radius: 50%;
}
.iconOvalEmail {
    height: 60px;
    width: 60px;
    background-color: #FF6633;
    float: right;
    margin-top: 17px;
    margin-right: 30px;
    border-radius: 50%;
}
.imageCallBack{
    margin-top: 0.9em;
    margin-left: 1.3em;
}
.imageEmail {
    margin-top: 0.9em;
    margin-left: 1.02em;
}
.textStylePromo {
    font-size: 24px;
    margin-top: 16px;
    margin-left: 1.4em;
    color: #032B5A;
    padding-top: 1em;
}
.textStyle {
    font-size: 14px;
    margin-top: -0.8em;
    margin-left: 2.6em;
    color: #032B5A;
}
.selectButton {
    height: 39.02px;
    width: 83%;
    border: 1px solid #D2D2D2;
    border-radius: 4px;
    margin-left: 2em;
    background-color: #f1f1f1;
    //float: left;
}
.selectText {
    cursor: pointer;
    //float: left;
    margin-top: 0px;
    padding-left: 0em;
    width: 83%;
    font-family: Frutiger55, sans-serif !important;
    position: absolute;
    z-index: 111;
    color: #032B5A;
    font-size: 16px;
    height: 29px;
    padding-top: 10px;
    text-align:center;
    border-radius: 3px;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
    background-image: linear-gradient(to bottom, #f1f1f1 , #eae6e6);
}
#o2-footer{
    display:none;
}
.xdsoft_datepicker{
    width: 95vw !important;
}
.selectedText {
    //float: left;
    margin-top: 11px;
    margin-left: 70px;
    color: #032B5A;
    font-family: Frutiger55, sans-serif !important;
    display: none;
    position: absolute;
    z-index: 111;
    font-size: 16px;
    text-align:center;
}
.preferedTime{
    text-align: left;
    margin-left: 0em;
}
#calenderselect{
    padding-bottom:10px;
}
.calenderselectinner{
   margin-left: 2em;
   margin-right: 2em;
}
.divideLine {
    color: #cfd1d6fc;
    border-top: 0.8px solid;
    margin-left: 0px;
}
.divideLineR {
    color: #cfd1d6fc;
    border-top: 0.8px solid;
    margin-left: 0px;
    margin-top: -1.4em;
}
.divideLine2 {
    color: #cfd1d6fc;
    border-top: 0.8px solid;
    margin-left: 0px;
}
#hrmiddiv1{
    display: block; margin-top: -0.45em;
}
#hrmiddiv2{
    display: block; padding-bottom: 1em; margin-top: -0.45em;
}
.divideLinemid {
    color: #cfd1d6fc;
    border-top: 14px solid;
    margin-left: 1px;
    margin-top: 0em;
}
.SubtextStyle{
    margin-left: 2.3em;
}
.showContent{
    display:block !important;
}
.hideContent{
    display:none !important;
}
.changeDivColor {
    background: linear-gradient(180deg, #0E2B5A 0%, #054D87 40.01%, #057BB7 80.96%, #258EC5 100%) !important;
}
.changeTextColor {
    color: white;
}  
.phoneEx{
    height: 2.4em;
    border: 1px solid #ccc;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    border-radius: 6px;
    width: 17em;
    padding-left: 0.3em;
}
.emailEx{
    height: 2.1em;
    border: 1px solid #ccc;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    border-radius: 6px;
    width: 22em;
}   
.showToolTip {
    background-image: url(/resource/1539856502000/SMBDigital/images/calendar@2x.png); background-repeat: no-repeat; width: 32px; height: 33px; display: block; float: left; background-size: 1.5em; margin-top: 0.7em;
}
.clockIcon{
    background-image: url(/resource/1539856502000/SMBDigital/images/clock@2x.png);
    background-repeat: no-repeat;
    width: 32px;
    height: 33px;
    display: block;
    float: left;
    margin-top: 5.2em;
    margin-left: -15em;
    background-size: 1.5em;
}
.timeCheck{
    height: 2.4em;
    border: 1px solid #ccc;
    border-radius: 6px;
    width: 7em;
    outline: none;
    padding-left: 0.4em; 
    float: left; 
    margin-left: 0.5em;
    margin-top: 1em;
} 
.timeChecked{
    height: 2.4em;
    border: 1px solid #ccc;
    border-radius: 6px;
    width: 4em;
    outline: none;
    padding-left:1.4em; 
    float: left; 
    margin-top: 6em; 
    margin-left: -7.5em;
}
.timeChecked:disabled {
    background-color: white;
}
.telefonica{
    display: none;
}
.footerText{
    margin-left: 2.2em;
}
.footerImagebubble{
    background: url(/resource/1539856502000/SMBDigital/img/footer/footer-bubbles.png) right bottom no-repeat;
}
#sessionTimeoutP{
    font-size: 36px;
    margin-top: 1em;
    margin-left: -0.5em;
}
.chooseDateText{
    float: left; margin-top: 1.2em;
}
.pickTimeText{
    float: left;
    margin-top: 5.5em;
    margin-left: -13em;
}
#tickboxMsg{font-weight: 600;}
.chooseDate{
    background-color: #e9e9e9;margin-top: 1em;height: 19em;
}
.O2img{
    width: 12%;
    margin-top: 1em;    
}
.customerGreetingP1{
    font-size: 16px !important ;font-weight: 600; padding-top: 0.8em !important; margin-top: -2em !important; margin-left: 0.8em !important;
}
.customerGreetingP2{
    font-size: 16px !important;font-weight: 600;margin-left: 0.8em !important;margin-top: -1em !important;
}
.header{
    margin-top: -1.5em;
}
#mobilefooterText{
    margin-top: 2em; margin-bottom:2em;   grid-column: 1; -ms-grid-column: 1;    padding-left: 1em; display: block;
}
.telefonicaMob{
    grid-column:1; -ms-grid-column:1; display: block; float: right; margin-top: -3.5em;
}
.timeCheck, .timeChecked{
    color: #032B5A;
}
#hrbottomdiv{
    grid-column:2;-ms-grid-column:2; margin-top: -0.5em; display: block;
}
#captchaa{
	margin-left: -1em !important;
}
#errormsgPhNo, #errormsgDateTime{
	float:left;width: 100%;display:none; margin-top: -1em;
}
.divSubmit{
	margin-left: -30px;
}

.xdsoft_datetimepicker .xdsoft_calendar th {
	border:none;
	background:white;
	color:#032B5A;
}
.xdsoft_datetimepicker .xdsoft_calendar td, .xdsoft_datetimepicker .xdsoft_calendar th {
	height:45px;
	text-align: center;
	border:none;
	background:white;
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_other_month, .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_disabled, .xdsoft_datetimepicker .xdsoft_time_box >div >div.xdsoft_disabled {
	color: #BAC2C7;
	font-weight: 300;
	opacity: 1;
	background-color: rgba(216,216,216,0.5) !important; border: 2px solid white; cursor: not-allowed;
}
.xdsoft_datetimepicker .xdsoft_calendar td:hover, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div >div:hover {
	background:rgb(0, 204, 204) !important;
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default, .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div >div.xdsoft_current{
	background: rgb(0, 204, 204) !important;
	box-shadow: rgb(0, 204, 204) 0 1px 3px 0 inset;
	color: #fff;
	font-weight: 700;
}
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div >div {
	font-size:16px;
	background: white !important; 
	border-top: none !important; 
	height: 40px !important;
	text-align: center;
	line-height:40px;
}
.xdsoft_select xdsoft_monthselect xdsoft_scroller_box,.xdsoft_select{
	overflow:auto;
}
.xdsoft_datetimepicker .xdsoft_timepicker{
	width: 96px !important; 
}
.xdsoft_noselect{
	font-weight:600;
}
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_other_month.xdsoft_disabled {
	opacity:1;
}
.timeCheck, .timeChecked{
	color: #032B5A;
}
.xdsoft_prev{
	display:none !important;
}
.xdsoft_next{
	display:none !important;
}
.xdsoft_scroller{
	display:none !important;
}
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box{
	overflow:auto;
	width: 114px !important;
	margin-left: -9px !important;
	margin-top: -3px !important;
	margin-bottom: -8px !important;
	height: 175px !important;
}
.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option:hover{
	background:rgb(0, 204, 204) !important;
}
#footermessageP{
		font-size: 16px;
		font-family: frutiger45light;
		font-weight: 600;
	}
#btnContinueOuterDiv{
	grid-column: 2;-ms-grid-column:2;margin-left: 2em;text-align:left;margin-top: 1em;
}


@media screen and (min-device-width : 420px) and  (max-device-width : 699px){
    .O2img {
		width: 7%;
	}
}
@media(min-width:700px){
    body{
        background-color:rgb(241, 241, 241) !important;
    }
    .divSubmit{
            margin-left: -27px;
    }
    .popup{
        background-color: white;
        z-index: 9999;
        padding: 0px 47px;
        position: fixed;
        width: 60%;
        height: 38%;
        top: 25%;
        margin: 0px 15%;
    }
    .popup > p{
        padding: 15px 0px;
        text-align: left;
        font-size: 20px;
        float:left;
        width: 100%;
        margin-top: 0em;
    }
    .popup > h1 {
        text-align: left;
        font-weight: 300;
        float: left;
        width: 21em;
        padding-top: 1em;
    }
    .O2img{
        width: 9%;
        margin-top: 0em;
    }
    .showToolTip{
        margin-top: 0.5em;
    }
    #headTitle{
        margin-left: 0.7em;
        font-size: 2.5em;
        margin-left: 0.7em;
        padding-bottom: 0em;
		padding-top: 0.7em;
    }
    #o2-footer{
        display:block !important;
        margin-top: -2em !important;
    }
    #hrbottomdiv{
        display: none; 
    }
    #hrmiddiv1{
        display: none;
    }
    #hrmiddiv2{
        display: none;
    }
    .divideLine {
        margin-left: 30px;
    }
    .header{
        margin-top: 0em;
    }
    .subheadTextStyle{
        margin-left: 1.3em;
        font-size: 1.4em;
        margin-top: 0.5em;
        padding-bottom: 0.7em;
        display: block;
    }
	.selectButtonCallback :hover { background-color: #D2D2D2; background-image: linear-gradient(to right, #D2D2D2 , #e0dcdc);}
	.selectButtonEmail :hover { background-color: #D2D2D2; background-image: linear-gradient(to right, #D2D2D2 , #e0dcdc);}
    .customerGreetingP1{
        margin-top: -1.5em !important;
    }
    #footermessage{
        margin-bottom: 0em;
        margin-left: 2.5em;
    }
    #phoneSelectionDiv{
        margin-top: 0em;
        background:white;
    }
    #reqCallBack{
        font-size: 20px !important;
		background-color: inherit;
		padding-left: 0em;
		padding-top: 0.5em;
    }
    .grid{
        display:grid;
        grid-template-columns:0.44fr 2.3fr 2fr;
        display: -ms-grid;
        -ms-grid-columns: 0.44fr 2.3fr 2fr;
    }
    #sec>h1{
        grid-column:span 3; 
        -ms-grid-column:3;
    }
    #customerAgentImage{
        grid-column:3;
        -ms-grid-column:3;
        margin:2em;
    }
    #CustomerGreeting{
        grid-column:2;
        -ms-grid-column:2;
        margin-top: 0em;
        background-color: inherit;
    }
    .preferedTime {
        text-align: left;
        margin-left: 2em;
    }
    #contactHeader{
        background-color: inherit;
    }
    #emailSelectionDiv{
        margin-top: 0em;
        background:white;
    }
    #mobilefooterText{
        display: none;
    }
    .telefonicaMob{
        display: none;
    }
    #captchaa{margin-left: -0.5em !important;}
    #tickboxMsg{font-weight: 600; margin-left: 0.5em;}
    .purpleBanner{
        grid-column: 2;
        -ms-grid-column: 2;
        margin-left: 1.5em;
        font-family: frutiger45light;
        font-size: 1em;
        color: white;
        height: 0.5em;
    }
    .commSelectClass{
        height: 12.6em;
    }
    .textStylePromo {
        margin-left: 0.9em;
        padding-top: 0em;
    }
    .textStyle {
        margin-left: 1.6em;
    } 
    .SubtextStyle{
        margin-left: 1.5em;
    }
    .hrshadowcss{
        margin-left:30px;
		display: block;
    }
	.divideLineR {
		margin-left: 30px;
	}
    .selectText {
        text-align:left;
        padding-left: 5em;
        width: 132px;
    }
    .selectedText {
        text-align:left;
    }
    .selectButton {
        margin-left: 1.3em; 
    }
    .telefonica{
        margin-left: 24em; 
        margin-top: 1.5em;
        display: block;
    }
    .footerText{
        margin-left: 9.2em; padding-top: 3em;
    }
    #sessionTimeoutP{
        margin-top: 1em;
        float: left;
        margin-left: 2em;
    }
    .chooseDateText{
        float: left; margin-top: 0.8em;
    }
    .pickTimeText{
        float: left;  margin-top: 0.8em;  margin-left: 0.4em;
    }
    .timeCheck{
        height: 2.4em;
        border: 1px solid #ccc;
        border-radius: 6px;
        width: 7em;
        outline: none;
        padding-left: 0.4em; 
        float: left; 
        margin-left: 0.5em;
        margin-top: 0.5em;
    } 
    .timeChecked{
        height: 2.4em;
        border: 1px solid #ccc;
        border-radius: 6px;
        width: 4em;
        outline: none;
        padding-left: 1.4em; 
        float: left; 
        margin-top: 0.5em; 
        margin-left: 0.5em;;
    }
    .chooseDate{
        height: 13em;
    }
    .confirmMsg{margin-top: -2em; padding-bottom: 0.5em; font-weight: 600;margin-left: -1em;}
    .clockIcon{
        margin-top: 0.5em;
        margin-left: 2.5em;
        margin-right: -7px;
    }
	.xdsoft_datepicker{
		width: 296px !important;
	}
	#callbackHeader{
		margin-left: 2.1em;width: 1010px;
	}
	#footermessageP{
		width: 40em;
		margin-left: 0.8em;
	}
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ CSS styles go here */
    .subheadTextStyle{
        margin-top: 4em;
        display: block;
    }
    .divideLine {
        border-top: 0.01px solid;
        margin-top: 3em;
        margin-left: 1em;
    }
	.divideLineR {
        margin-top: 3em;
    }
    .hrshadowcss{
        margin-top: -1em;
    }
    #contactHeader{
        margin-top: 2em;
        background-color: inherit;
    }
    #divSubmit{
        margin-top: 3.5em;
    }
    .popup{
        width: 64%;
    }
    #btnContinueOuterDiv{
		margin-top: 5em;
    }
	#btnContinueOuterDiv{
		position: absolute;
	}
	#footermessageP{
		margin-top: 4em;
	}
	.confirmMsg{
		margin-top: 2.5em;
		margin-left: -1em;
	}
	#divSubmiteEmail{
		margin-left: -1em;
		margin-top: -0.5em;
	}
}