/* alertboxes */

.info-box, .success-box, .warning-box, .error-box {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 1px solid;
    margin: 10px 0px;
    width: 600px;
    padding:15px 5px 15px 45px;
    background-repeat: no-repeat;
    font-size: 12px;
}
.error-box b{
    color: #652d86;
}

.info-box {

    color: #652d86;
    background:#fafafa url(https://survey.ace.teliacompany.com/survey/img/survey/info_32x32.png) top left no-repeat;
    background-position: 5px center;
}
.info-box a:link{
    text-decoration: underline;
    color: #652d86;
    font-weight: bold;
    font-style: italic;
}
.info-box a:hover{
    text-decoration: underline;
    color: #9e237a;

}
#surveyListTable a:hover{
    text-decoration: underline;


}
.success-box {
    color: #652d86;
    background:#fafafa url(https://survey.ace.teliacompany.com/survey/img/survey/success_32x32.png) top left no-repeat;
    background-position: 5px center;
}
.warning-box {
    color: #652d86;
    background:#fafafa url(https://survey.ace.teliacompany.com/survey/img/survey/warning_32x32.png) top left no-repeat;
    background-position: 5px center;
}
.error-box {
    color: #652d86;
    background:#fafafa url(https://survey.ace.teliacompany.com/survey/img/survey/error_32x32.png) top left no-repeat;
    background-position: 5px center;
}
/* Sections for content tab menu
   -------------------------------------------------------------------------------------*/
div.contentSection
{
    display:none;
}

div.contentSection.current
{
    display:block;
}

.contentSection h2
{
    color:#652d86;
    font-size:13px;
    font-weight:bold;
}

.contentSection h3
{
    color:#666666;
    font-size:13px;
    font-weight:bold;
    margin-bottom:5px;
}

.contentSection p
{
    margin-top:0;
}


ul.contentMenu {
    background:#fafafa url(https://survey.ace.teliacompany.com/survey/img/survey/dotGrey01.png) left bottom repeat-x;
    font-size:11px;
    list-style-type:none;
    margin:20px 0;
    overflow:auto;
    padding:0;
    width:100%;
}

ul.contentMenu li {
    background:#F3F3ED url(https://survey.ace.teliacompany.com/survey/img/survey/mobile-tab-left.png) no-repeat left top;
    border-bottom:1px solid #C3C3B5;
    display:inline;
    float:left;
    margin:0 2px 0 0;
    padding:0;
    /*	width:auto;*/
}

ul.contentMenu li a {
    background:url(https://survey.ace.teliacompany.com/survey/img/survey/mobile-tab-right.png) no-repeat right top;
    color:#666;
    display:block;
    font-weight:bold;
    margin:0;
    outline:none;
    padding:5px 10px 9px 10px;
    text-decoration:none;
}

ul.contentMenu li a:hover {
    color:#c41b79; /** tsBlushingPink **/
    text-decoration:none;
}

ul.contentMenu li a:visited {
    color:#666666;
    text-decoration:none;
}

ul.contentMenu li.current {
    background-position:left -200px;
    border-bottom:1px solid #FFF;
}


ul.contentMenu li.current a {
    background-position:right -200px;
    color:#c41b79; /** tsBlushingPink **/
}


/** END CONTENT TAB MENU **/


/** FORM BOX **/
#formBox {width:700px; /*height: 20px;*/ margin-top: 10px; margin-bottom: 0; vertical-align: bottom;}

#formBox500 {width:500px; /*height: 20px;*/ margin-top: 0px; padding: 0px; vertical-align: bottom;}
#formBox360 {width:360px; /*height: 20px;*/ margin-top: 0px; padding: 10px; vertical-align: bottom;}
#formBox label{display:inline-block;}
#formBoxAuto {width:auto; /*height: 20px;*/ margin-top: 20px; padding-bottom: 10px;}
#formBox669 {width:669px; padding: 5px;}
#formBox680Quest {width:680px; padding: 5px; margin-top: 20px;}
#formBox680 {width:680px;/*height: 20px;*/ margin-top: 0px; margin-bottom: 0; vertical-align: bottom;}
#formBoxInfo {width:360px; /*height: 20px;*/ margin-top: 20px; padding-bottom: 10px; }
.formBoxWeblink {/*width:680px;height: 20px;*/ margin-top: 10px; vertical-align: bottom; margin-left: 0px; padding-bottom: 10px;  margin-bottom: 10px;  }
.formBoxCreateWeblink {width:700px; /*height: 20px;*/ margin-top: -10px;  vertical-align: bottom; padding-bottom: 10px; padding-left: 5px;}
#formBoxCloseWeblink {width:700px; /*height: 20px;*/ margin-top: 20px; margin-bottom: 0; vertical-align: bottom;}



/** END FORM BOX **/

.h2l {
    background: url("https://survey.ace.teliacompany.com/survey/img/survey/contactsHeader30.png") repeat-x scroll 0 0 transparent;
    border-radius: 3px 0 0 3px;
    color: #FFFFFF;
    font-size: 12px;
    padding: 5px;
    width: auto;
}
.h2c {
    background: url("https://survey.ace.teliacompany.com/survey/img/survey/contactsHeader30.png") repeat-x scroll 0 0 transparent;
    color: #FFFFFF;
    font-size: 12px;
    padding: 5px;
}
.h2r {
    background: url("https://survey.ace.teliacompany.com/survey/img/survey/contactsHeader30.png") repeat-x scroll 0 0 transparent;
    border-radius: 0 3px 3px 0;
    color: #FFFFFF;
    font-size: 12px;
    padding: 5px;
}
.exportQuestionPerColumnH2l {
    background-color: #652d86;
    color: #FFFFFF;
    border-radius: 3px 0 0 3px;
    vertical-align: top;
    font-size: 12px;
    padding: 5px;
    width: 50px;
}
.exportQuestionPerColumnH2c {
    background-color: #652d86;
    color: #FFFFFF;

    vertical-align: top;
    font-size: 12px;
    padding: 5px;
    width: 50px;
}
.exportQuestionPerColumnH2r {
    background-color: #652d86;
    border-radius: 0 3px 3px 0;
    color: #FFFFFF;
    font-size: 12px;
    padding: 5px;
    vertical-align: top;
}
table tr.even {
    background: none ;
}
table tr.odd {
    background-color: #ECE9EE;
}
#paddingTop10{
    padding-top: 10px;
}
table.its td {
    padding-left: 3px;
    padding-right: 1px;
}
.darkrow2 {
    background-color: #ece9ee;

}

#loginButtonBox {
    clear: both;
    text-align: right;
    margin-top: 20px;
    margin-right: -8px;
}
#loginInnerBox{
    padding-top: 5px;
    padding-left:  5px;
    padding-right: 5px;
    padding-bottom: 5px;
}


#loginInput {

    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 5px;



}
#welcome {
    margin-top: 30px;
    margin-left:  0px;
    width: 700px;


}
#inputLabel {
    color: #777470;
    display: block;
    font-size: 11px;



}
#loginLabel {
    color: #777470;
    display: block;
    font-size: 9px;



}
#pageWhite{
    background-color: white;
}
/** END LOGIN PAGE **/

/** FROM OLDER CSS **/

.separator
{
    padding: 0px 5px;
    color:white;
    font-weight: bold;
}


td.listing a
{ color:#652d86;text-decoration:none;cursor:pointer;}
td.listing a:link
{ color:#652d86;text-decoration:none;cursor:pointer;}

td.listing a:hover
{ color:#B887D4;text-decoration:underline;}

/*td.listing a:visited
{ color:#652d86;text-decoration:none;}
*/
tr.hide
{
    display:none;
}



div#navbar2 {
    height: 20px;
    width: 670px;
    border-bottom: solid #652d86 1px;
    background-color: #eee;
    margin-left: 0;
    margin-top: 0;
    padding: 5px;

}

div#navbar2 ul {
    margin: 0px;
    padding: 0px;
    font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: gray;
    line-height: 20px;
    white-space: nowrap;
}
div#navbar2 li {
    list-style-type: none;
    display: inline;
}
div#navbar2 selected a{
    color: #652d86;
}

div#navbar2 li a {
    text-decoration: none;
    padding: 4px 5px;
    color: gray;
}

div#navbar2 li a:hover {
    color: #FFF;
    background-color: #3366FF;
}
div#navbar2 li.selected a{
    background-color: #652d86;
    color: white;
}
div#navbar2 li.selected a:hover{
    background-color: #3366FF;
}

th.h1 {
    background:url("https://survey.ace.teliacompany.com/survey/img/survey/mob_bb_tabel_cellback.png") repeat-x scroll left top transparent;
    border-bottom: solid #ddd 1px;
    color:#333333;
    font-size:11px;
    font-weight:bold;
    height:28px;
    height:28px;
    padding-top:6px;
    text-align:left;
}

.img_col {
    width:12px;
    padding-right: 0;
}
.img_col_info {
    padding-right: 0;
}
.surveyName_col {
    padding-left: 0px;
}
.icon_col {
    width:30px;
    text-align:left;
    padding-right: 6px;
}
.leftBorder{
    border-left: solid #ddd 1px;

}
.leftBorderStrong{
    border-left: solid #652d86 1px;
}
.topBorderStrong{
    border-top: solid #652d86 1px;
}
.bottomBorderStrong{
    border-bottom: solid #ddd 1px;
}
.leftRightPadding{
    padding-right: 10px;
    padding-left: 10px;
}
.info_col {
    width:70px;
    text-align:left;
    border-right: solid #ddd 1px;
    white-space:nowrap;
}

.stepsHeader{


}
.divListHeader{
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    color: #652d86;
    text-align: left;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
}

.center{
    margin:auto;
    width:50%;
}
.right {
    float: right;
}
.paddingLeft{
    padding-left: 4px;
}
.changed:after {
    content: "*";
}

/** END OLDER CSS **/

#popupContentLeft{
    width: 350px;
    margin-bottom: 10px;

    /*height: 270px;*/
}
#popupContentLeftSetting{
    width: 350px;
    margin-bottom: 10px;

    /*height: 110px; */
}
#popupContentRightLoadFile{
    width: 350px;
    margin-bottom: 10px;

    /*height: 85px;*/
}
#popupContentTTS{
    width: 350px;
    margin-bottom: 10px;

    /*height: 63px;*/
}
#popupContentRight{
    width: auto;
    margin-bottom: 20px;

    height: auto;
}

.listing {padding-top: 2px; padding-bottom: 2px; border-bottom: dotted 1px #d3d3d3;}
.padding2 {padding: 2px;}
.tableFootText {padding: 2px; font-size: 11px; font-style: italic;}
.boxPadding2{
    padding: 7px;
}
#surveyCaption{width:940px; /*height: 20px;*/ margin-top: 20px; margin-bottom: 0; vertical-align: top;}
#surveyCaption label{display:inline-block;width:60px;}
#surveyListButton{width: 740px; height: 20px; text-align: right;   margin-right:-10px; margin-top: -10px; vertical-align: top;   margin-bottom: 15px;}
#newSurveyButton{width: 100%; height: 20px; text-align: right;   margin-right:20px; margin-top: -20px; vertical-align: top;   margin-bottom: 20px;}
#surveyList {margin-top: 0px;}
#surveyListErrorBox{width:680px; /*height: 20px;*/ margin-top: 0px; margin-bottom: 0; vertical-align: bottom;}

.buttonRight {
    float: right;
    margin-top: 5px;
    margin-bottom: 10px;
    /* margin-right: -5px;*/

}
.buttonRightSave {
    float: right;

    margin-bottom: 10px;
    margin-right: -10px;

}
.buttonRightQuest {
    float: right;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-right: -21px;

}
.buttonRightNewQuest {
    float: right;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-right: -2px;


}
.tdEditInput{
    padding-bottom: 5px;
    padding-top: 2px;
    padding-right: 5px;
    vertical-align: top;
    padding-left:5px;

}
.tdPaddingTop5{

    padding-top: 5px;


}
.tdBottom10{

    padding-bottom: 10px;


}
.tdInputTextBottom{
    padding-bottom: 2px;
    padding-top: 2px;
    padding-right: 5px;
    text-align: right;

}
.resultTD{
    text-align: right;


}
.detractors{
    background-color: #c41b79;
    color: #ffffff;
    font-weight: bold;

}
.passives{
    background-color: #ff6319;
    color: #ffffff;
    font-weight: bold;
}
.promotors{
    background-color: #00b48c;
    color: #ffffff;
    font-weight: bold;
}
.negativeNps{
    color: #c41b79;
    font-weight: bold;
}
.neutralNps{
    color: #ff6319;
    font-weight: bold;
}
.positiveNps{
    color: #00b48c;
    font-weight: bold;
}
.resultTDLeft{
    text-align: left;


}
.buttonInTable{
    padding-top: 15px;


}
.selectInTable{
    padding-top: 2px;
    padding-bottom: 15px;

}
.selectInAnswers{
    padding-top: 2px;
    padding-bottom: 5px;

}

#questionDiv{
    margin-top: 20px;
}
#marginTop10{
    margin-top: 10px;
}
#marginTop20{
    margin-top: 20px;
}
#questionCurved{
    width: 325px;



}
#popupTitle{
    margin-top: 10px;
    margin-bottom: 10px;
    width: 500px;
}
#surveyTitle{
    margin-top: 20px;
    margin-bottom: 20px;
    width: 940px;
}
#surveyTitleQuest{
    margin-top: 20px;
    margin-bottom: 0px;
    width: 940px;
}
#surveyUserTitle{
    margin-top: 20px;
    margin-bottom: 10px;
    width: 940px;
}
#imgBottomA{
    vertical-align: bottom;
}
#imgInput{
    border: none;
    box-shadow: none;
    background: none;
    margin-left: -2px;
    margin-right: 1px;
    padding:  0px;
    vertical-align: top;
}
#right{
    float: right;

    margin-left: 5px;
    margin-top: 10px;
}
.rightPromptButton{
    float: right;
    /*margin-top: -20px;*/
}
.rightTitleButton{
    float: right;
    margin-top: -2.5px;
    margin-right: -5px;
}
.surveyTableh1{

    border:0px solid #e0e0e0;
    border-radius:3px;
    box-shadow:inset 0px 1px 1px #fafafa;
    margin-bottom:5px;
    padding:4px;
    -moz-border-radius:3px;
    -moz-box-shadow:inset 0px 1px 1px #fafafa;
    -webkit-border-radius:3px;
    -webkit-box-shadow:inset 0px 1px 1px #fafafa;



}
#mainMenu #customize	{
    background:url(https://survey.ace.teliacompany.com/survey/img/survey/settings.svg) 0px 0px no-repeat;
    height:6px;
    width:12px; 
    float:right; 
    margin-top: 5px;
}

#mainMenu #surveyHelp {
    float:right;
}
#mainMenu #promptHandler {
    float:right;
}
#mainMenu #surveyLogout {
    float:right;
}



#welcometext {
    margin: 25px 0 0 0;
    padding: 5px;
    width: 500px;
}
#threeStepsPic {
    margin-top: 15px;
    margin-left: 0px;


}
#design{
    margin:0 0 0 5px;
    padding: 0px;
    width:155px;
}
#publish{
    margin: 0 0 0 0px;
    padding: 0px;
    width:155px;
}
#analyse{
    margin: 0 0 0 0px;
    padding: 0px;
    width:155px;
}

#toolDescription {
    margin: 0;
    padding: 5px;
    width: 550px;
}
.hidden
{
    display: none;
}

/*** LANG SWITCHER **/
#footerContent > a.sv{
    background: url("https://survey.ace.teliacompany.com/survey/img/survey/SV.png") no-repeat scroll 0 0 transparent;

    padding-left: 20px;

}


#footerContent > a.en-gb {
    background: url("https://survey.ace.teliacompany.com/survey/img/survey/GB.png") no-repeat scroll 0 0 transparent;
    padding-left: 20px;
}

/*** END LANG SWITCHER **/

#ui-datepicker-div {
    font-size: 8pt;
}
#loginTitle{
    width: 960px;
    color: #652D86;
    font-size: 19px;
    font-weight: bold;
    letter-spacing: -0.025em;
    padding-bottom: 10px;
}
#startimgSV{
    background:url(https://survey.ace.teliacompany.com/survey/img/survey/survey_3steg_sv_sprite.png) left top;


}
#startimgEN{
    background:url(https://survey.ace.teliacompany.com/survey/img/survey/survey_3steg_en_sprite.png) left top;


}
option[disabled] { color: red; }
.npsDescription{
    margin-top: 0px;
    margin-bottom: 10px;
    width: 400px;
}
.maxlengthinfo{
    font-size: 10px;
    color: #666666;
    text-align: right;
    font-style: oblique;
}
.titleText{
    font-weight: normal;
    color: #000000;
}
.extraSpace{
    margin: 10px;
}
.headingTextInList{
    font-weight: bold;
}

.questionOrder{
    color: #652d86;
}
.pagefootInList{
    font-style: oblique;
    font-size: 12px;
}
.hrTelia{
    color: #652d86;
}
.space20{
    margin-left:20px;
}
.space19{
    margin-left:13px;
}
.showAgentEvalGoal{
    margin-left:25px;
}
.agentEvalLimitRight{
    margin-top: 5px;
    display: inline-block;
    margin-left: -15px;
}
.buttonNewRight{
    width: 30px;
    padding-left: 6px;
    padding-right: 4px;
    padding-bottom: 5px;
}
.answersDescription{
    width: 320px;
}
.divFilter{
    margin-top:10px;
    width: 715px;
}
.divFilterButton{
    margin-top: 15px;
    margin-bottom: 10px;
    margin-right:0px;
    padding-right: 0px;
}
.filterTitle{
    font-weight: bold;


}
.rightOKButton {
    float: right;
    margin-right: -5px;
}
.showHideFilterText{
    width: 500px;
    margin-left: 5px;
    margin-top:10px;
    text-decoration: underline;
}

#agentEvalDescription{
    color: #000000;

}
.divWidth940{
    margin-top: -10px;
    margin-bottom: 20px;
    width: 735px;

}
.divSurveyCaption{
    width:940px; /*height: 20px;*/ margin-top: 20px; margin-bottom: 0; vertical-align: top;
}
.noQuestionsMsg{
    font-weight: normal;
}
.deleteIconTdWidth{
    width: 5px;

}
.spaceBetween{
    padding-right: 20px;
}
.buttonBesideTab{
    width: 690px ;
}
.showBoxToExport{
    margin-bottom: 10px;
    display: inline;

}
.goalLimitSelect{
    width: 360px;
    padding: 3px;

}
.goalLimitSelectEn{
    width: 270px;
    padding: 3px;


}
.goalLimitSelectBox{

    float: right;


}
.goalLimitSelectAverage{
    padding: 3px;
}
.icon{
    text-align: center;

}
.textIndent{
    padding-left: 4px;
}
.divWidth{
    margin-top: 0px;
    margin-bottom: 20px;
    width: 735px;


}
.divFilterWidth{
    margin-top: -10px;
    margin-bottom: 20px;
    width: 580px;

}
.divFilterAddButton{
    margin-top: 10px;
    padding-left: 5px;
}
#lists{
    padding: 5px;
}
.customizeTableTdWidth{


}
.filterTable{
    width: 940px;
    padding: 0px;
}
.defaultCursor{
    cursor: inherit;
}
.top10{
    padding-top: 20px;

}
#pswd_info {
    /* position:absolute;
     bottom:76px;
     bottom: -115px\9;
     right:650px;  */

    width:250px;
    padding:15px;
    background:#fefefe;
    font-size:.875em;
    border-radius:5px;
    box-shadow:0 1px 3px #ccc;
    border:1px solid #ddd;
}
#user_info {
    /* position:absolute;
     bottom:160px;
     bottom: -115px\9;
     right:650px;  */
    width:250px;
    padding:15px;
    background:#fefefe;
    font-size:.875em;
    border-radius:5px;
    box-shadow:0 1px 3px #ccc;
    border:1px solid #ddd;
}
#pswd_info h4 {
    margin:0 0 10px 0;
    padding:0;
    font-weight:normal;
}
#user_info h4 {
    margin:0 0 10px 0;
    padding:0;
    font-weight:normal;
}
/*#pswd_info::before {
    content: "\25B2";
    position:absolute;
    top:-12px;
    left:45%;
    font-size:14px;
    line-height:14px;
    color:#ddd;
    text-shadow:none;
    display:block;
}  */
.invalid {
    background:url(https://survey.ace.teliacompany.com/survey/img/survey/287.png) no-repeat 0 50%;
    padding-left:22px;
    line-height:24px;
    color:#ec3f41;
}
.valid {
    background:url(https://survey.ace.teliacompany.com/survey/img/survey/286.png) no-repeat 0 50%;
    padding-left:22px;
    line-height:24px;
    color:#3a7d34;
}
.hideZeroValid{
    display: none;
}
#pswd_info, #user_info {
    display:none;
}
#pswd_info ul li{
    list-style-type: none;
}
#user_info ul li{
    list-style-type: none;
}


/*** Setting layout ***/
.settingBox{
    margin: 5px;
    margin-bottom: 10px;

}

.settingFormBox{
    width:auto; /*height: 20px;*/ margin-top: 0px; margin-bottom: 0; vertical-align: bottom;

}
.selectStyle{
    width: 100px;
}

.buttonMarginBottom10px{
    margin-bottom: 10px;
    margin-top: 15px;
}
.ttsTextArea{
    width: 500px;
    min-height: 150px;
}
.surveyListWidth{
    min-width: 940px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: #000000 !important;
    border: 1px solid #652d86;
    background-color: #f6f6f6;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f6f6f6), color-stop(100%, #652d86));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #f6f6f6 0%, #652d86 100%);
    /* Chrome10+,Safari5.1+ */
    background: -moz-linear-gradient(top, #f6f6f6 0%, #652d86 100%);
    /* FF3.6+ */
    background: -ms-linear-gradient(top, #f6f6f6 0%, #652d86 100%);
    /* IE10+ */
    background: -o-linear-gradient(top, #f6f6f6 0%, #652d86 100%);
    /* Opera 11.10+ */
    background: linear-gradient(to bottom, #f6f6f6 0%, #652d86 100%);
    /* W3C */ }
.dataTables_wrapper .dataTables_length{
    padding-bottom: 5px;
    float: left;
}

table.dataTable thead .sorting{
    background: url(https://survey.ace.teliacompany.com/survey/img/survey/sort.png) no-repeat center right;
}
.errorMsgIndent{
    text-indent: 10px;

}
.top20{
    margin-top:20px;
}

.texCenter{
    text-align: center;
}
.boldText{
    font-weight: bold;
}
.bottomMargin20{
    margin-bottom: 20px;
}
.bottomMargin10{
    margin-bottom: 10px;
}
.obligatoryquestionDesc {
    clear: both;
    color: red;
    margin-right: 5px;
    font-size: 10px;
    float: right;
}
.obligatoryField {
    clear: both;
    color: red;
    font-size: 13px;
    margin-right: 3px;
}
.left5px{
    margin-left: 5px;
}
/*Answer Frequency*/
.answerFrequencyTitle{
    color: #6c6f70;
}
.divAnswerFrequency{
    margin-top: 10px;
    margin-bottom: 40px;
}
.ansFreqTotal{
    text-align: right;
    padding-right:	0px;
    padding-top:	10px;
}
.ansFreqDigits{
    text-align: center;
    color:	#000;
}
.ansFreqTotalDigits{
    padding-top:	10px;
}


[data-tooltip] {
    display: inline-block;
    position: relative;
    cursor: help;
    padding: 4px;
}
/* Tooltip styling */
[data-tooltip]:before {
    content: attr(data-tooltip);
    display: none;
    position: absolute;
    background: #d3d3d3;
    color: #000;
    padding: 4px 8px;
    font-size: 12px;
    line-height: 1.4;
    min-width: 150px;
    text-align: center;
    border-radius: 4px;
}
/* Dynamic horizontal centering */
[data-tooltip-position="top"]:before,
[data-tooltip-position="bottom"]:before {
    left: 50%;
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
/* Dynamic vertical centering */
[data-tooltip-position="right"]:before,
[data-tooltip-position="left"]:before {
    top: 50%;
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
[data-tooltip-position="top"]:before {
    bottom: 100%;
    margin-bottom: 6px;
}
[data-tooltip-position="right"]:before {
    left: 100%;
    margin-left: 6px;
}
[data-tooltip-position="bottom"]:before {
    top: 100%;
    margin-top: 6px;
}
[data-tooltip-position="left"]:before {
    right: 100%;
    margin-right: 6px;
}

/* Tooltip arrow styling/placement */
[data-tooltip]:after {
    content: '';
    display: none;
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}
/* Dynamic horizontal centering for the tooltip */
[data-tooltip-position="top"]:after,
[data-tooltip-position="bottom"]:after {
    left: 50%;
    margin-left: -6px;
}
/* Dynamic vertical centering for the tooltip */
[data-tooltip-position="right"]:after,
[data-tooltip-position="left"]:after {
    top: 50%;
    margin-top: -6px;
}
[data-tooltip-position="top"]:after {
    bottom: 100%;
    border-width: 6px 6px 0;
    border-top-color: #d3d3d3;
}
[data-tooltip-position="right"]:after {
    left: 100%;
    border-width: 6px 6px 6px 0;
    border-right-color: #d3d3d3;
}
[data-tooltip-position="bottom"]:after {
    top: 100%;
    border-width: 0 6px 6px;
    border-bottom-color: #d3d3d3;
}
[data-tooltip-position="left"]:after {
    right: 100%;
    border-width: 6px 0 6px 6px;
    border-left-color: #d3d3d3;
}
/* Show the tooltip when hovering */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
    display: block;
    z-index: 50;
}