/* 
    Document   : stylePl
    Created on : Jul 25, 2019, 11:03:12 AM
    Author     : SC DARAM SRL
    Description:
        Purpose of the stylesheet follows.
*/

.payMain {
        font-family: "Montserrat", sans-serif;

font-weight: 400;

font-size: 16px;

line-height: 1.7;

-webkit-text-size-adjust: none;
}

.h1P, .h2P, .h3P, .h4P, .h5P, .h6P {
        font-family: inherit;
        font-weight: 400;
        line-height: 1.42857;
        color: inherit;
    }

.container-pasi-ext {
        padding-top: 30px;
    }
    
    .container-pasi-mid {
        width: 740px;
        margin-right: auto;
        margin-left: auto;
    }
    
    .container-pasi-int {
        width: 100%;
        display: table;
        table-layout: fixed;
    }
    
    .container-titlu {
        width: 100%;
        margin-right: auto;
        margin-left: auto;
        padding-left: 10px;
        padding-right: 10px;
        display: block;
        margin-top: 20px;
        color: #888;
    }

    .step-item {
        width: 25%;
        text-align: center;
        color: #888;
        display: table-cell;
        position: relative;
    }
    
    .step-item.step-active {
            background-color: transparent;
            color: #E4F1F9;
            font-weight: 600;
    }
    
    .step-item.step-active:hover {
        cursor: pointer;
    }
    
    .step-item.step-hover:hover {
        cursor: pointer;
    }
    
    .step-item.step-done {
            cursor: pointer;
    }
    
    .step-item.step-active .step-number {
        background: #fff;
        border-color: #005eb8;
    }

    .step-item .step-number {
        width: 26px;
        height: 26px;
        z-index: 5;
        font-weight: 700;
        border-radius: 50%;
        position: relative;
        line-height: 26px;
        border: 2px solid #888;
    }
    
    .step-item .step-icon {
       
        width:17px; 
                            height:17px;
                            background-size: cover;
                            background-image:url(../img/check_iconS.png); 
                            display: inline-block;

                            /* For IE 7 */
                            zoom: 1;
                            *display: inline;
    }
    
    .step-item .step-number, .step-item .step-text, .step-item .step-icon {
    display: inline-block;
    vertical-align: middle;
}
    

    .step-label {
        text-align: center;
        color: #888;
        display: table-cell;
        position: relative;
        padding: 10px 10px;
    }
    
    .step-label.step-active {
            background-color: transparent;
            color: #E4F1F9;
            font-weight: 600;
    }
    
    .step-label.step-active .step-label-number {
        background: #fff;
        border-color: #005eb8;
    }

    .step-label .step-label-number {
        width: 26px;
        height: 26px;
        z-index: 5;
        font-weight: 700;
        border-radius: 50%;
        position: relative;
        line-height: 22px;
        border: 2px solid #888;
    }
    
    .step-label .step-valid-icon {
        display: none;
    }
    
    .step-label .step-label-number, .step-label .step-label-text {
    display: inline-block;
    vertical-align: middle;
}

    :after, :before {
        box-sizing: border-box;
    }
    
    .page-title {
        display: block;
        position: relative;
        margin-top: 0;
        margin-bottom: 0;
        line-height: 1.26;
        font-size: 20px;
        overflow: hidden;
    }
    
    .page-title2 {
        display: block;
        position: relative;
        margin-top: 0;
        margin-bottom: 0;
        line-height: 1.26;
        font-size: 20px;
        overflow: hidden;
    }
    
    .page-subtitle {
            font-size: 16px;
        }
    
    
    .chenar1CRPA {
	position: relative; 
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	border-color: #EEEEEE;
	border-width: 5px;
	border-style: solid;
	width: 70%;
        background-color: #EEEEEE;
    }
    
    .chenar1CRPA2 {
	position: relative; 
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	border-color: #EEEEEE;
	border-width: 5px;
	border-style: solid;
	width: 70%;
        background-color: #EEEEEE;
    }
    
    .chenar2CRPA {
	position: relative;
	border-color: #D9D9D9;
        background: #FFFFFF;
	border-width: 2px;
	border-style: solid;
	z-index: 0;
	overflow: hidden;
        -moz-border-radius:15px; /* FF1+ */
        -webkit-border-radius:15px; /* Saf3-4 */
	border-radius:15px;
    }
    
                        .radioOpt2_el {
				padding-top: 5px;
				padding-bottom: 5px;
				display: block;
				width: 50%;
				
				text-align: center;
				z-index: 11;
				float: left;
				color: black;
				text-decoration: none;
			}
			
			.radioOpt2_el:hover {
				background-color: #000000;
				-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
				filter: alpha(opacity=30);
				-moz-opacity: 0.3;
				-khtml-opacity: 0.3;
				opacity: 0.3;
				cursor: pointer;
				color: white;
			}
			
			.radioOpt2_el:active {
				background-color: #000000;
				-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
				filter: alpha(opacity=50);
				-moz-opacity: 0.5;
				-khtml-opacity: 0.5;
				opacity: 0.5;
				cursor: pointer;
				color: white;
			}
			
			.radioOpt2_el_sel {
				background-color: #4DA0E5;
				padding-top: 5px;
				padding-bottom: 5px;
				display: block;
				width: 50%;
				
				text-align: center;
				z-index: 11;
				float: left;
				color: white;
				text-decoration: none;
				
			}
                        
                        
                        
                        .radioOpt2_elR {
				padding-top: 5px;
				padding-bottom: 5px;
				display: block;
				width: 50%;
				
				text-align: center;
				z-index: 11;
				float: left;
				color: #ea0000;
				text-decoration: none;
			}
			
			.radioOpt2_elR:hover {
				background-color: #000000;
				-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
				filter: alpha(opacity=30);
				-moz-opacity: 0.3;
				-khtml-opacity: 0.3;
				opacity: 0.3;
				cursor: pointer;
				color: white;
			}
			
			.radioOpt2_elR:active {
				background-color: #000000;
				-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
				filter: alpha(opacity=50);
				-moz-opacity: 0.5;
				-khtml-opacity: 0.5;
				opacity: 0.5;
				cursor: pointer;
				color: white;
			}
			
			.radioOpt2_el_selR {
				background-color: #EA0000;
				padding-top: 5px;
				padding-bottom: 5px;
				display: block;
				width: 50%;
				
				text-align: center;
				z-index: 11;
				float: left;
				color: white;
				text-decoration: none;
				
			}
                        
                        .radioOpt2_elG {
				padding-top: 5px;
				padding-bottom: 5px;
				display: block;
				width: 50%;
				
				text-align: center;
				z-index: 11;
				float: left;
				color: green;
				text-decoration: none;
			}
			
			.radioOpt2_elG:hover {
				background-color: #000000;
				-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
				filter: alpha(opacity=30);
				-moz-opacity: 0.3;
				-khtml-opacity: 0.3;
				opacity: 0.3;
				cursor: pointer;
				color: white;
			}
			
			.radioOpt2_elG:active {
				background-color: #000000;
				-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
				filter: alpha(opacity=50);
				-moz-opacity: 0.5;
				-khtml-opacity: 0.5;
				opacity: 0.5;
				cursor: pointer;
				color: white;
			}
			
			.radioOpt2_el_selG {
				background-color: green;
				padding-top: 5px;
				padding-bottom: 5px;
				display: block;
				width: 50%;
				
				text-align: center;
				z-index: 11;
				float: left;
				color: white;
				text-decoration: none;
				
			}
                        
                        
                        
                        .radioOpt5_el {
				padding-top: 5px;
				padding-bottom: 5px;
				display: block;
				width: 20%;
				
				text-align: center;
				z-index: 11;
				float: left;
				color: black;
				text-decoration: none;
			}
			
			.radioOpt5_el:hover {
				background-color: #000000;
				-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
				filter: alpha(opacity=30);
				-moz-opacity: 0.3;
				-khtml-opacity: 0.3;
				opacity: 0.3;
				cursor: pointer;
				color: white;
			}
			
			.radioOpt5_el:active {
				background-color: #000000;
				-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
				filter: alpha(opacity=50);
				-moz-opacity: 0.5;
				-khtml-opacity: 0.5;
				opacity: 0.5;
				cursor: pointer;
				color: white;
			}
			
			.radioOpt5_el_sel {
				background-color: #4DA0E5;
				padding-top: 5px;
				padding-bottom: 5px;
				display: block;
				width: 20%;
				
				text-align: center;
				z-index: 11;
				float: left;
				color: white;
				text-decoration: none;
				
			}
                        
                        
                        .chenar1aPA {
                            margin-top: 0px;
                            position: relative; 
                            -webkit-border-radius: 5px;
                            -moz-border-radius: 5px;
                            border-radius: 5px;
                            border-color: #EEEEEE;
                            border-width: 5px;
                            border-style: solid;
                            width: 85%;
                        }
                        
                        .chenar1bPA {
                            margin-top: 0px;
                            position: relative; 
                            -webkit-border-radius: 5px;
                            -moz-border-radius: 5px;
                            border-radius: 5px;
                            border-color: #EEEEEE;
                            border-width: 5px;
                            border-style: solid;
                            width: 100%;
                        }
                        
                        .chenarflpPA {
                            position: relative; width: 85%; padding: 0px; margin: 0px; display: block; min-height: 110px;
                        }
                        
                        .chenarflPA {
                            width: 22%;
                            margin-right: 4%;
                            float: left;
                        }
                        
                        .chenar2PA {
                            position: relative; 
                            border-color: #D9D9D9;
                            border-width: 2px;
                            border-style: solid;
                            z-index: 0;
                            overflow: hidden;
                        }
                        
                        .iform2PA {
                                position: relative; 
                                border-width: 0;
                                padding: 5px;
                                margin: 0;
                                width: 100%;
                                outline: none;
                                z-index: 98;
                                color: #000000;
                                font-size: 16px;
                                display: inline-block;
                                -webkit-appearance: none;
                        }
                        
                        .iform3PA {
                                position: relative; 
                                border-width: 0;
                                padding: 5px;
                                margin: 0;
                                width: 70%;
                                outline: none;
                                z-index: 98;
                                color: #000000;
                                font-size: 18px;
                                cursor: pointer;
                        }
                        
                        .myBtnPA {
                                position: relative; 
                                border-width: 0;
                                padding: 5px;
                                margin: 0;
                                outline: none;
                                z-index: 98;
                                color: #000000;
                                font-size: 18px;
                                line-height: 18px;
                                cursor: pointer;
                                text-align: right;
                                height: 40px;
                                margin-right: 10px;
                                float: right;
                            }
                            
                            .myBtnPA:hover {
                                color: #4DA0E5;
                            }
                        
                        .alertPA { 
                            position: absolute;
                            top: 50%; left: 86%;
                            width:17px; 
                            height:17px;
                            background-image:url(../img/error_icon.png); 
                            display: inline-block;
                            
                            margin-top: -8px; 
                            /* For IE 7 */
                            zoom: 1;
                            *display: inline;
                            
                        }
                        
                        .alert3PA { 
                            position: absolute;
                            top: 50%; left: 50%;
                            width:13px; 
                            height:13px;
                            background-image:url(../img/error_icon.png); 
                            background-size: cover;
                            display: inline-block;
                            
                            margin-top: -6px; 
                            /* For IE 7 */
                            zoom: 1;
                            *display: inline;
                            
                        }
                        
                        .alert2PA { 
                            position: absolute;
                            top: 50%; left: 86%;
                            width:17px; 
                            height:17px;
                            background-image:url(../img/check_iconS.png); 
                            display: inline-block;
                            
                            margin-top: -8px; 
                            /* For IE 7 */
                            zoom: 1;
                            *display: inline;
                            
                        }
                        
                        .errLabelPA {
                            padding-left: 5px; padding-top: 5px; color: #ea0000; display: none;
                            font-size: 16px;
                        }
        
                        
                        .blueHr {
                            color: #A6C9E2; display: block;
                            margin-top: 30px;
                            margin-bottom: 30px;
                        }

                        .myLabelPA {
                            font-size: 14px;
                            padding-top: 2px;
                        }

                        .myLabel2PA {
                            font-size: 14px;
                            margin-top: -5px;
                        }
                        
                        .abonamente {
                            margin: 0px 0px;
                            padding: 0px 0px;
                            width: 100%;
                        }
                        
                        .abonamente td {
                            margin: 0px 0px;
                            padding: 0px 0px;
                            text-align: left;
                            width: 73%;
                        }
                        
                        .abonamente td.last {
                            text-align: right;
                            width: 27%;
                        }
                        
                        .ui-widget-content a.myBtnLink {
                            color: #4DA0E5;
                            text-decoration: none;
                        }
                        
                        .ui-widget-content a.myBtnLink:hover {
                            cursor: pointer;
                        }
                        
                        .pasPAM {

    position: relative;
    margin-left: 0%;
    margin-right: 0%;
    padding: 5px 5px 5px 5px;
    margin-bottom: 20px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border-width: 3px;
    border-style: solid;
    border-color: #E4F1F9;
    text-align: left;
    background-color: #E4F1F9;

}

                        .titluPasM {
                            color: #4DA0E5;
                            font-size: 14px;
                            margin: 0 5px 10px 5px;
                            font-weight: normal;
                            line-height: 20px;
                        }
                        
                        .nrPasM {
                            width: 20px;
                            height: 20px;
                            color: #4DA0E5;
                            border-radius: 50%;
                            text-align: center;
                            line-height: 20px;
                            font-weight: 700;
                            font-size: 14px;
                            margin-right: 5px;
                            display: inline-block;
                            margin-left: 5px;
                            border: 2px solid;
                        }
                        
                        .optMeniuClasa {
                            width: 100%;
                            font-size: 120%;
                            position: relative;
                            border: 1px solid #EEEEEE;
                            background-color: #D9D9D9;
                            color: #000000;
                            -moz-border-radius: 15px;
                            -webkit-border-radius: 15px;
                            border-radius: 15px;
                            padding: 8px;
                            margin-right: 10px;
                            margin-top: 10px;
                            text-align: center;
                            display: block;
                            cursor: pointer;
                        }
                        
                        .optMeniuClasa:hover {
                            border:1px solid #D9D9D9;
                            background-color: #FFFFFF;
                            cursor: pointer;
                            color: #888;
                        }
                        
                        .notaClass {
                            float: left;
                            border: 1px solid gray;
                            margin-top: 10px;
                            height: 37px;
                            line-height: 17px;
                            font-size: 17px;
                        }
                        
                        .leftBtn {
                            float: left;
                            border-radius: 50%;
                            width: 37px;
                            height: 37px;
                            margin: 10px 10px;
                            background-image:url(../img/left2.png); 
                        }
                        
                        .rightBtn {
                            float: left;
                             border-radius: 50%;
                            width: 37px;
                            height: 37px;
                            margin: 10px 10px;
                            background-image:url(../img/right2.png); 
                        }
                        
                        .leftBtn:hover {
                            cursor: pointer;
                            box-shadow:
                            1px 0px #EBEBEB,
                            0px 3px 1px #D8D8D8;
                          -moz-box-shadow:
                            1px 0px #EBEBEB,
                            0px 3px 1px #D8D8D8;
                          -webkit-shadow:
                            1px 0px #EBEBEB,
                            0px 3px 1px #D8D8D8;
                        }
                        
                        .rightBtn:hover {
                            cursor: pointer;
                            box-shadow:
                            1px 0px #EBEBEB,
                            0px 3px 1px #D8D8D8;
                          -moz-box-shadow:
                            1px 0px #EBEBEB,
                            0px 3px 1px #D8D8D8;
                          -webkit-shadow:
                            1px 0px #EBEBEB,
                            0px 3px 1px #D8D8D8;
                        }
                        
        
    @media (min-width: 1000px) {
        .container-pasi-ext {
            background: #fff;
            border-top: 1px solid rgba(0,0,0,.1);
            border-bottom: 1px solid rgba(0,0,0,.1);
            padding-top: 0px;
            display: block;
            border-radius: 10px;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            overflow: hidden;
            box-shadow:
              1px 0px #EBEBEB,
              0px 3px 1px #D8D8D8;
            -moz-box-shadow:
              1px 0px #EBEBEB,
              0px 3px 1px #D8D8D8;
            -webkit-shadow:
              1px 0px #EBEBEB,
              0px 3px 1px #D8D8D8;
        }
        
       
        .container-pasi-mid {
            width: 1000px;
        }
        
        .step-item {
            padding: 15px 10px;
            font-size: 16px;
            border-right: 1px solid rgba(0,0,0,.1);
        }
        
        .step-item.step-active {
            background-color: #E4F1F9;
            color: #4DA0E5;
        }
        
        .step-item:first-child {
            border-left: 1px solid rgba(0,0,0,.1);
        }
        
        .step-item .step-number {
            width: 24px;
            height: 24px;
            margin-right: 5px;
            font-size: 14px;
            line-height: 24px;
        }
        
        .step-item.step-active .step-number {
            background: #E4F1F9;
            border-color: #4DA0E5;
        }
        
        .step-item .step-text {
            line-height: 24px;
        }
        
        
        .step-label {
            padding: 15px 10px;
            font-size: 16px;
        }
        
        .step-label.step-active {
            background-color: #E4F1F9;
            color: #fff;
        }
        
        .step-label .step-label-number {
            width: 24px;
            height: 24px;
            margin-right: 5px;
            font-size: 14px;
            line-height: 24px;
        }
        
        .step-label.step-active .step-label-number {
            background: #E4F1F9;
            border-color: #fff;
        }
        
        .step-label .step-label-text {
            line-height: 24px;
        }
        
        .container-titlu {
           width: 1000px;
        }
        
        .page-title {

            font-size: 28px;
            margin-bottom: 5px;

        }
        
        .chenar1aPA {
            width: 70%;
        }
        
        .alertPA { 
            left: 72%;
        }
        
        .alert2PA { 
            left: 72%;
        }
        
        .chenarflpPA {
            width: 70%;
        }
        
        .blueHr {
            margin-top: 50px;
            margin-bottom: 50px;
        }
    }
    

    @media (max-width: 999px) {
        
        .page-title {

            margin: 0px 0px;
            padding: 0px 0px;

        }
        
        
        .step-item.step-active {
            color: #4DA0E5;
           
        }
        
        .step-item .step-number {
            width: 24px;
            height: 24px;
            margin-right: 5px;
            font-size: 14px;
            line-height: 24px;
        }
        
        .step-item.step-active .step-number {
            color: #4DA0E5;
            border-color: #4DA0E5;
        }

        
        .step-item .step-number {
            background: #eee;
        }
        
        .step-item.step-active .step-text {
            font-weight: 700;
        }
        
        .step-item .step-number {
            font-size: 15px;
        }
        
        .step-item .step-text {
            display: block;
            padding: 5px 5px 0;
            font-size: 12px;
        }
        
        .step-item:before {
            content: " ";
            width: 50%;
            height: 1px;
            z-index: 1;
            top: 16px;
            background: #888;
            position: absolute;
            left: 0px;
        }
        
         .step-item:after {
            content: " ";
            width: 50%;
            height: 1px;
            z-index: 1;
            top: 16px;
            background: #888;
            position: absolute;
        }
        
        .payMain {

font-size: 12px;

line-height: 1.4;

-webkit-text-size-adjust: none;

color: #888;
}

    a.myBtnLink {

    color: #4DA0E5;
    text-decoration: none;

}
        
        .container-pasi-ext {
            padding-top: 15px;
        }
        
        .step-label .step-label-number {
            width: 20px;
            height: 20px;
            margin-right: 5px;
            font-size: 14px;
            line-height: 20px;
        }
        
        .container-pasi-mid {
            width: 100%;
        }
        
        .chenar1aPA {
            width: 90%;
        }
        
        .chenar1CRPA {
	
            width: 90%;
        }
        
        .alertPA { 
            left: 95%;
        }
        
        .alert2PA { 
            left: 95%;
        }
        
        .chenarflpPA {
            width: 90%;
        }
        
        .centerMob {
            margin-left: auto;
            margin-right: auto;
        }
        
        .blueHr {
            margin-top: 20px;
            margin-bottom: 20px;
        }
        
        .chenarflpPA {
            min-height: 115px;
        }

    }
    
    @media (max-width: 767px) {
        
        
        
        .page-subtitle {
            font-size: 12px;
        }
        
        .iform2PA {
            font-size: 12px;
        }
        
        .iform3PA {
            font-size: 12px;
            width: 60%;
        }
        
        .myBtnPA {
                                font-size: 12px;
                                line-height: 12px;
                                height: 30px;
                            }
        
        .myLabelPA {
                                font-size: 12px;
                                padding-top: 8px;
                            }       
        
        .myLabel2PA {
            font-size: 12px;
            margin-top: 0px;
            padding-top: 2px;
        }
        
        .errLabelPA {
            font-size: 12px;
        }
        
        a.btn.bigblue {
            font-size: 12px;
        }
        
        a.btn.bigblue2 {
            font-size: 12px;
        }
        
    }
    
                        .accSelTab {
                            width: 100%;
                            
                            border-radius: 20px;
                            margin: 30px 0px 0px 0px;
                            
                            border: 1px solid #F2F2F2;
                            -moz-box-shadow: 0px 4px 10px 3px #F2F2F2;
                            -webkit-box-shadow: 0px 4px 10px 3px #F2F2F2;
                            box-shadow: 0px 4px 10px 3px #F2F2F2;
                            display: flex;
                        }
                        
                        .accSelIcon {
                            width: 80px;
                            
                            display: flex;
                            justify-content: center;
                            align-items: center;                           
                        }
                        
                        .accSelIconCircle {
                            width: 30px;
                            background-color: #4da0e5;
                            border-radius: 50%;
                            height: 30px;

                            display: flex;
                            justify-content: center;
                            align-items: center;
                        }
                        
                        .accSelIconText {
                                margin: 0 auto;
                                width: fit-content;
                                width: -moz-fit-content;
                                color: white;
                                font-size: 140%;
                                font-weight: bold;
                        }
                        
                        .accSelInfo {
                                flex-grow: 1;
                                float: right;
                                
                                display: flex;
                                align-items: center;
                                padding: 10px 0px;
                        }
                        
                        .accSelTitle {
                            font-size: 110%;
                            margin: 0px;
                            padding-right: 5px;
                        }
                        
                        .accSelSub {
                            color: #888;
                            font-size: 100%;
                            margin: 0px;
                            padding-right: 5px;
                        }
                        
                        /**
 * Tooltip Styles
 */

/* Base styles for the element that has a tooltip */
[data-tooltip],
.tooltip {
  position: relative;
  cursor: pointer;
}

/* Base styles for the entire tooltip */
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after {
  position: absolute;
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: 
    opacity 0.2s ease-in-out,
    visibility 0.2s ease-in-out,
    -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
  -moz-transition:    
    opacity 0.2s ease-in-out,
    visibility 0.2s ease-in-out,
    -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
  transition:         
    opacity 0.2s ease-in-out,
    visibility 0.2s ease-in-out,
    transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform:    translate3d(0, 0, 0);
  transform:         translate3d(0, 0, 0);
  pointer-events: none;
}

/* Show the entire tooltip on hover and focus */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.tooltip:focus:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

/* Base styles for the tooltip's directional arrow */
.tooltip:before,
[data-tooltip]:before {
  z-index: 1001;
  border: 6px solid transparent;
  background: transparent;
  content: "";
}

/* Base styles for the tooltip's content area */
.tooltip:after,
[data-tooltip]:after {
  z-index: 1000;
  padding: 8px;
  width: 160px;
  background-color: #6FB8D7;
  color: #fff;
  content: attr(data-tooltip);
  font-size: 14px;
  line-height: 1.2;
}

/* Directions */

/* Top (default) */
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after,
.tooltip-top:before,
.tooltip-top:after {
  bottom: 100%;
  left: 50%;
}

[data-tooltip]:before,
.tooltip:before,
.tooltip-top:before {
  margin-left: -6px;
  margin-bottom: -12px;
  border-top-color: #6FB8D7;
}

/* Horizontally align top/bottom tooltips */
[data-tooltip]:after,
.tooltip:after,
.tooltip-top:after {
  margin-left: -80px;
}

[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.tooltip:focus:after,
.tooltip-top:hover:before,
.tooltip-top:hover:after,
.tooltip-top:focus:before,
.tooltip-top:focus:after {
  -webkit-transform: translateY(-12px);
  -moz-transform:    translateY(-12px);
  transform:         translateY(-12px); 
}

/* Left */
.tooltip-left:before,
.tooltip-left:after {
  right: 100%;
  bottom: 50%;
  left: auto;
}

.tooltip-left:before {
  margin-left: 0;
  margin-right: -12px;
  margin-bottom: 0;
  border-top-color: transparent;
  border-left-color: #6FB8D7;
}

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

/* Bottom */
.tooltip-bottom:before,
.tooltip-bottom:after {
  top: 100%;
  bottom: auto;
  left: 50%;
}

.tooltip-bottom:before {
  margin-top: -12px;
  margin-bottom: 0;
  border-top-color: transparent;
  border-bottom-color: #6FB8D7;
}

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

/* Right */
.tooltip-right:before,
.tooltip-right:after {
  bottom: 50%;
  left: 100%;
}

.tooltip-right:before {
  margin-bottom: 0;
  margin-left: -12px;
  border-top-color: transparent;
  border-right-color: #6FB8D7;
}

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

/* Move directional arrows down a bit for left/right tooltips */
.tooltip-left:before,
.tooltip-right:before {
  top: 3px;
}

/* Vertically center tooltip content for left/right tooltips */
.tooltip-left:after,
.tooltip-right:after {
  margin-left: 0;
  margin-bottom: -16px;
}

.infoIcon {
  color: #6FB8D7;
  font-size: 150%;
  top: 3px;
  text-decoration: none;
}