5 background: #FAFAFA !important;
6 /* background-image: linear-gradient(-45deg, #000 10%, #fff 0);
7 background-size: 6px 6px; */
9 font-family: 'Nunito' !important;
10 color: #1B3E6F !important;
16 .custom-control-label::before{
17 border: solid 1px #1B3E6F !important;
18 border-radius: 0 !important;
20 .custom-control-input:checked ~ .custom-control-label::before{
21 background: #1B3E6F !important;
41 background-color:#fff;
57 .primary-nav .menu li{
71 vertical-align: middle;
77 text-decoration: none!important;
92 .menu-dropdown li .icon{
96 .menu-dropdown li.active .icon{
101 .menu-dropdown li:hover{
111 .menu input[type="checkbox"]{
114 input#menu[type="checkbox"]{
123 width: calc(100% - 50px);
124 transition: transform .45s cubic-bezier(0.77, 0, 0.175, 1);
126 #menu:checked + ul.menu-dropdown{
128 -webkit-animation: all .45s cubic-bezier(0.77, 0, 0.175, 1);
129 animation: all .45s cubic-bezier(0.77, 0, 0.175, 1);
131 .sub-menu-checkbox:checked + ul.sub-menu-dropdown{
132 display: block!important;
133 -webkit-animation: grow .45s cubic-bezier(0.77, 0, 0.175, 1);
134 animation: grow .45s cubic-bezier(0.77, 0, 0.175, 1);
135 border-top: solid 2px #1B3E6F;
137 .openNav .new-wrapper{
139 transform: translate3d(200px, 0, 0);
140 width: calc(100% - 250px);
141 transition: transform .45s cubic-bezier(0.77, 0, 0.175, 1);
144 background: transparent;
164 transition: all 0.45s cubic-bezier(0.77, 0, 0.175, 1);
165 background-color: #1B3E6F;
174 height: calc(100vh - 60px)!important;
176 border-top: 60px solid #fff;
182 position: absolute !important;
187 /* .sub-menu-dropdown{
188 background-color: #333;
195 .openNav .menu:hover{
202 transform: translate3d(200px, 0, 0);
203 transition: transform .45s cubic-bezier(0.77, 0, 0.175, 1);
205 @-webkit-keyframes grow{
233 .userProfile .dropdown{
236 .userProfile .dropdown:hover{
237 background: #172B4D !important;
239 .userProfile .dropdown-text{
240 background: transparent;
246 /* .userProfile .dropdown-toggle{
249 .userProfile .dropdown-toggle:hover ~ .dropdown-text,
250 .userProfile .dropdown-toggle:focus ~ .dropdown-text{
251 background: transparent !important;
252 border-radius: 0 !important;
253 box-shadow: none !important;
256 .userProfile .dropdown-text::after {
261 background: url(/assets/img/img-userProfile.png) center center no-repeat;
263 .packagesFilter .custom-checkbox{
266 .packagesFilter .custom-control-label{
267 line-height: 28px !important;
268 font-size: 14px !important;
269 text-indent: 6px !important;
277 .sort-packages .dropdown{
280 .sort-packages .dropdown-text{
281 background: transparent;
286 .sort-packages .dropdown-text::after{
287 border-color: #1B3E6F transparent transparent transparent;
289 .sort-packages .dropdown-toggle:focus ~ .dropdown-text::after{
290 border-color: transparent transparent #1B3E6F transparent;
292 .sort-packages .dropdown-toggle:hover ~ .dropdown-text,
293 .sort-packages .dropdown-toggle:focus ~ .dropdown-text{
294 box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15);
297 .sort-packages .dropdown-content:hover,
298 .sort-packages .dropdown-toggle:focus ~ .dropdown-content{
301 .sort-packages .dropdown-content{
307 box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15);
309 .sort-packages .dropdown-content a{
313 .sort-packages .dropdown-content a:hover{
314 background-color: #F4F9FE;
315 text-decoration: unset;
318 .page-item .page-link,
319 .page-item.disabled .page-link{
320 background: transparent !important;
322 color: #1B3E6F !important;
326 color: #fff !important;
327 background-color: #C3CDDB !important;
330 /**Packages Cards***/
331 /***Package Info Card***/
332 .packages-card .card{
336 box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1);
338 .packages-card .card-title{
339 margin-bottom: 0 !important;
347 /***Add Package Card***/
350 background: #F4F9FE !important;
351 border: solid 1px #D7E7F9 !important;
353 .addPaackage-card img{
359 padding: 10px 10px 10px 32px;
362 text-transform: uppercase;
366 background-position: 10px center;
367 background-repeat: no-repeat;
369 .addPaackage-card a:hover{
370 text-decoration: unset;
373 .btn-create-package:hover{
374 background-color: #1B3E6F;
375 border-color: #1B3E6F;
377 background-image: url(../src/assets/img/icon-create-white.svg);
380 .btn-import-package:hover{
382 background-image: url(../src/assets/img/icon-import-blue.svg);
385 .packages-card .dropdown{
389 .packages-card .dropdown-text{
390 background: transparent;
395 border-bottom-left-radius: 0;
396 border-bottom-right-radius: 0;
399 .packages-card .dropdown-text::after{
402 .packages-card .dropdown-text img{
405 .packages-card .dropdown-content{
413 /* .userProfile .dropdown-content{
414 bottom: 40px !important;
415 top: unset !important;
420 border-bottom-color: #ECEDF2 !important;
423 padding: 15px 20px 15px 0 !important;
424 text-transform: uppercase !important;
427 color: #C3CDDB !important;
428 border: none !important;
430 .nav-tabs .nav-link:focus,
431 .nav-tabs .nav-link:hover{
432 border: 0 !important;
434 .nav-tabs .nav-link:hover{
435 color: #1B3E6F !important;
437 .nav-tabs .nav-link.active{
438 color: #1B3E6F !important;
439 background: transparent !important;
440 border: 0 !important;
441 border-bottom: solid 2px #1B3E6F !important;
443 .nav-tabs .nav-link::before{
445 padding-right: 20px !important;
449 .nav-tabs .nav-link:first-child::before{
452 .nav-tabs .nav-link:first-child{
453 padding-left: 20px !important;
455 /**Sliding Search Input**/
460 transform: translate(0%,-0%);
466 padding-left: 0 !important;
467 padding-right: 24px !important;
470 background: url(../src/assets/img/icon-search.svg) center center no-repeat;
471 background-size: 28%;
472 border: 0 !important;
473 border-right: solid 1px #1B3E6F !important;
475 justify-content: center;
479 .searchBox:hover > .searchInput{
481 border-bottom: solid 1px #C3CDDB;
483 .searchBox:hover > .searchButton{
498 .searchInput::placeholder{
503 border-bottom: solid 1px #C3CDDB;
508 display: inline-block;
518 background-color: #eee;
519 border: 1px solid #ccc;
521 box-shadow: 0 1px 0 rgba(255,255,255, .9) inset, 0 1px 3px rgba(0,0,0, .1);
524 .dropdown-text:after{
532 border-width: 5px 4px 0 4px;
533 border-color: #555 transparent transparent transparent;
544 background: transparent;
549 .dropdown-toggle:focus{
560 -webkit-transition: all .25s ease;
561 -moz-transition: all .25s ease;
562 -ms-transition: all .25s ease;
563 -o-transition: all .25s ease;
564 transition: all .25s ease;
565 list-style-type: none;
569 background-color: #eee;
570 border: 1px solid #ccc;
575 .dropdown-content a:hover{
578 .dropdown-toggle:hover ~ .dropdown-text,
579 .dropdown-toggle:focus ~ .dropdown-text{
580 background-color: #e8e8e8;
582 .dropdown-toggle:focus ~ .dropdown-text{
583 box-shadow: 0 1px 3px rgba(0,0,0, .2) inset, 0 1px 0 rgba(255,255,255, 0.8);
586 .dropdown-toggle:focus ~ .dropdown-text:after{
587 border-width: 0 4px 5px 4px;
588 border-color: transparent transparent #555 transparent;
590 .dropdown-content:hover,
591 .dropdown-toggle:focus ~ .dropdown-content{
600 transform: translateY(-3px);
603 transform: translateY(-6px);
608 transform: translateY(6px);
612 transform: translateY(3px);
616 transform: translateY(6px);
621 /* display: inline-block;
623 transition-duration: 0.2s;
624 transition-property: transform;
625 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
626 transform: translateZ(0); */
627 margin-bottom: 25px !important;
628 box-shadow: 0 0 1px rgba(0, 0, 0, 0);
631 pointer-events: none;
640 background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 70%);
641 transition-duration: 0.2s;
642 transition-property: transform opacity;
645 transform: translateY(-3px);
646 animation-name: hover;
647 animation-duration: 1s;
648 animation-delay: 0.2s;
649 animation-timing-function: linear;
650 animation-iteration-count: 1;
651 animation-direction: alternate;
655 transform: translateY(3px);
656 animation-name: card;
657 animation-duration: 1s;
658 animation-delay: .2s;
659 animation-timing-function: linear;
660 animation-iteration-count: 1;
661 animation-direction: alternate;
664 padding: 20px !important;
669 padding: 0 !important;
675 border-left: solid 1px #FAFAFA;
677 -webkit-box-shadow: 0 4px 10px 0 #eef0f5;
678 box-shadow: 0 4px 10px 0 #eef0f5;
692 padding: 0 30px !important;
695 padding-right: 0 !important;
696 border-bottom: solid 1px #ECEDF2 !important;
698 /**Packages Filter**/
703 .packagesFilter .dropdown-toggle{
704 height: 36px !important;
706 .packagesFilter .dropdown-toggle:focus ~ .dropdown-text::after{
707 border-color: transparent transparent #1B3E6F transparent;
709 .packagesFilter .dropdown-text{
710 background: transparent;
717 .packagesFilter .dropdown-text::after{
719 border-color: #1B3E6F transparent transparent transparent;
721 .packagesFilter .dropdown-toggle:hover ~ .dropdown-text,
722 .packagesFilter .dropdown-toggle:focus ~ .dropdown-text{
723 background-color: transparent;
727 .packagesFilter .dropdown-toggle:focus ~ .dropdown-text{
729 box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15);
731 .packagesFilter .dropdown-text::after{
734 .packagesFilter .dropdown-content{
737 box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15);
739 border-top-left-radius: 0;
740 border-top-right-radius: 0;
741 border-bottom-left-radius: 2px;
742 border-bottom-right-radius: 2px;
744 .packagesFilter .dropdown-content:hover,
745 .packagesFilter .dropdown-toggle:focus ~ .dropdown-content{
748 .packagesFilter .form-control{
749 padding: 12px 9px 12px 38px !important;
750 border: 0 !important;
751 border-bottom: solid 1px #D7E7F9 !important;
752 background: url(../src/assets/img/icon-search.svg) 15px center no-repeat;
754 border-radius: 0 !important;
758 .packagesFilter .form-control::placeholder{
761 .packagesFilter .form-control:focus{
762 box-shadow: none !important;
763 border-bottom: solid 1px #1B3E6F !important;
765 .packagesFilter .custom-checkbox{
768 .packagesFilter .custom-control-label{
769 line-height: 28px !important;
770 font-size: 13px !important;
771 text-indent: 6px !important;
779 .sort-packages .dropdown{
782 .sort-packages .dropdown-text{
783 background: transparent;
788 .sort-packages .dropdown-text::after{
789 border-color: #1B3E6F transparent transparent transparent;
791 .sort-packages .dropdown-toggle:focus ~ .dropdown-text::after{
792 border-color: transparent transparent #1B3E6F transparent;
794 .sort-packages .dropdown-toggle:hover ~ .dropdown-text,
795 .sort-packages .dropdown-toggle:focus ~ .dropdown-text{
796 box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15);
799 .sort-packages .dropdown-content:hover,
800 .sort-packages .dropdown-toggle:focus ~ .dropdown-content{
803 .sort-packages .dropdown-content{
809 box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15);
811 .sort-packages .dropdown-content a{
815 .sort-packages .dropdown-content a:hover{
816 background-color: #F4F9FE;
817 text-decoration: unset;
820 .page-item .page-link,
821 .page-item.disabled .page-link{
822 background: transparent !important;
824 color: #1B3E6F !important;
828 color: #fff !important;
829 background-color: #C3CDDB !important;
832 /**Packages Cards***/
833 /***Package Info Card***/
834 .packages-card .card{
838 box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1);
840 .packages-card .card:hover{
841 box-shadow: 0 2px 13px 6px rgba(47, 83, 151, .15);
842 transition: all 0.5s ease;
844 .packages-card .card-title{
845 margin-bottom: 0 !important;
853 .packages-card .card-body{
854 padding-bottom: 0 !important;
856 .packages-card .card-footer .col{
860 .packages-card .card-footer .col:last-child{
863 /***Add Package Card***/
865 background: #F4F9FE !important;
866 border: solid 1px #D7E7F9 !important;
868 .addPaackage-card:hover{
869 box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1) !important;
871 .addPaackage-card img{
877 padding: 10px 10px 10px 32px;
880 text-transform: uppercase;
884 background-position: 10px center;
885 background-repeat: no-repeat;
888 .addPaackage-card a:hover{
889 text-decoration: unset;
891 .addPaackage-card .card-footer .col{
895 .addPaackage-card .card-footer .col:last-child{
899 .btn-create-package:hover{
900 background-color: #1B3E6F;
901 border-color: #1B3E6F;
903 background-image: url(../src/assets/img/icon-create-white.svg);
904 background-repeat: no-repeat;
907 .btn-import-package:hover{
909 background-image: url(../src/assets/img/icon-import-blue.svg);
912 .packages-card .dropdown{
916 .packages-card .dropdown-text{
917 background: transparent;
922 border-bottom-left-radius: 0;
923 border-bottom-right-radius: 0;
926 .packages-card .dropdown-text::after{
929 .packages-card .dropdown-text img{
932 .packages-card .dropdown-content{
939 border-top-left-radius: 0;
940 border-top-right-radius: 0;
943 .packages-card .dropdown-content a{
947 background-position: 20px center;
948 background-size: 10%;
949 background-repeat: no-repeat;
951 .packages-card .dropdown-content a:hover{
952 background-color: #172B4D;
953 text-decoration: unset;
955 .packages-card .action-clone a,
956 .packages-card .action-clone a:hover{
957 background-image: url(../src/assets/img/icon-clone-sm.svg);
959 .packages-card .action-archive a,
960 .packages-card .action-archive a:hover{
961 background-image: url(../src/assets/img/icon-archive-sm.svg);
963 .packages-card .action-delete a,
964 .packages-card .action-delete a:hover{
965 background-image: url(../src/assets/img/icon-delete-sm.svg);
967 .packages-card .dropdown-content:hover,
968 .packages-card .dropdown-toggle:focus ~ .dropdown-content{
971 .packages-card .dropdown-toggle:hover ~ .dropdown-text{
972 background: transparent;
975 .packages-card .dropdown-toggle:focus ~ .dropdown-text{
981 ul.package-contributers{
982 /*margin-bottom: 0 !important;*/
983 padding-left: 0 !important;
985 .package-contributers li{
987 display: inline-block;
989 .package-contributers li{
992 .package-contributers li:first-child{
995 .package-contributers li:last-child{
999 .package-contributers button{
1000 padding: 0 !important;
1001 border-radius: 100%;
1002 border: 0 !important;
1004 -webkit-transition: box-shadow 0.2s ease;
1005 -moz-transition: box-shadow 0.2s ease;
1006 transition: box-shadow 0.2s ease;
1007 -webkit-backface-visibility: hidden;
1008 backface-visibility: hidden;
1009 display: inline-block;
1012 .package-modifier:before,
1013 .package-contributers button:before{
1014 -webkit-transition: all 0.2s ease;
1015 -moz-transition: all 0.2s ease;
1016 transition: all 0.2s ease;
1019 box-shadow: 0 0 0 2px #fff;
1026 .package-modifier:hover,
1027 .package-contributers button:hover{
1028 box-shadow: 0 0 0 2px #D7E7F9;
1029 text-decoration: none;
1031 .package-modifier:hover:before,
1032 .package-contributers button:hover:before{
1033 -webkit-transform: scale(0.925);
1034 -moz-transform: scale(0.925);
1035 -ms-transform: scale(0.925);
1036 -o-transform: scale(0.925);
1037 transform: scale(0.925);
1038 box-shadow: 0 0 0 1px #D7E7F9;
1041 .package-modifier img,
1042 .package-contributers button img{
1046 vertical-align: top;
1047 border-radius: 100%;
1049 .package-contributers a{
1053 .package-contributers a:hover{
1054 text-decoration: unset;
1056 /***Package Footer***/
1057 .packages-card .card-footer{
1058 padding: 0 20px !important;
1059 background: transparent !important;
1060 border-top-color: #F7F6F6 !important;
1062 .packages-card .card-footer .col:first-child{
1063 border-right: solid 1px #F7F6F6;
1065 .packages-card .card-footer .btn{
1066 background-color: transparent !important;
1067 color: #C3CDDB !important;
1072 .packages-card .card-footer .btn:hover{
1077 padding: 15px 0 15px 28px !important;
1078 background-size: 16%;
1079 background-position: left center;
1080 background-repeat: no-repeat;
1083 background-image: url(../src/assets/img/icon-btn-card-config.svg);
1086 background-image: url(../src/assets/img/icon-btn-card-topology.svg);
1091 background: url(../src/assets/img/icon-deploy.svg) center center no-repeat;
1105 display: inline-block;
1106 transition-duration: 0.3s;
1107 transition-property: box-shadow;
1108 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
1109 transform: translateZ(0);
1110 box-shadow: inset 0 0 0 4px #ececec, 0 0 1px rgba(0, 0, 0, 0);
1111 /* Hack to improve aliasing on mobile/tablet devices */
1113 .border-fade:hover {
1114 box-shadow: inset 0 0 0 4px #666, 0 0 1px rgba(0, 0, 0, 0);
1115 /* Hack to improve aliasing on mobile/tablet devices */
1119 /**Title Action Buttons**/
1120 .page-title-actions li{
1121 display: inline-block;
1125 -webkit-transition: box-shadow 0.2s ease;
1126 -moz-transition: box-shadow 0.2s ease;
1127 transition: box-shadow 0.2s ease;
1128 -webkit-backface-visibility: hidden;
1129 backface-visibility: hidden;
1132 display: inline-block;
1138 text-transform: lowercase;
1143 .title-action:before{
1144 -webkit-transition: all 0.2s ease;
1145 -moz-transition: all 0.2s ease;
1146 transition: all 0.2s ease;
1149 box-shadow: 0 0 0 1px #000;
1156 .title-action:hover{
1157 box-shadow: 0 0 0 7px #07819b;
1158 text-decoration: none;
1160 .title-action:hover:before{
1161 -webkit-transform: scale(0.925);
1162 -moz-transform: scale(0.925);
1163 -ms-transform: scale(0.925);
1164 -o-transform: scale(0.925);
1165 transform: scale(0.925);
1166 box-shadow: 0 0 0 1px #07819b;
1170 /*Animation Button*/
1173 display: inline-block;
1174 transition-duration: 0.3s;
1175 transition-property: transform;
1176 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
1177 transform: translateZ(0);
1178 box-shadow: 0 0 1px rgba(0, 0, 0, 0);
1181 transform: translateY(-5px);
1185 /* Base styles for the element that has a tooltip */
1193 /* Base styles for the entire tooltip */
1194 [data-tooltip]:before,
1195 [data-tooltip]:after,
1200 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
1201 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
1204 opacity 0.2s ease-in-out,
1205 visibility 0.2s ease-in-out,
1206 -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
1208 opacity 0.2s ease-in-out,
1209 visibility 0.2s ease-in-out,
1210 -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
1212 opacity 0.2s ease-in-out,
1213 visibility 0.2s ease-in-out,
1214 transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
1215 -webkit-transform: translate3d(0, 0, 0);
1216 -moz-transform: translate3d(0, 0, 0);
1217 transform: translate3d(0, 0, 0);
1218 pointer-events: none;
1221 /* Show the entire tooltip on hover and focus */
1222 [data-tooltip]:hover:before,
1223 [data-tooltip]:hover:after,
1224 [data-tooltip]:focus:before,
1225 [data-tooltip]:focus:after,
1226 .tooltip:hover:before,
1227 .tooltip:hover:after,
1228 .tooltip:focus:before,
1229 .tooltip:focus:after {
1230 visibility: visible;
1231 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
1232 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
1236 /* Base styles for the tooltip's directional arrow */
1238 [data-tooltip]:before {
1240 border: 6px solid transparent;
1241 background: transparent;
1245 /* Base styles for the tooltip's content area */
1247 [data-tooltip]:after {
1251 background-color: #DEE8F3;
1252 background-color: rgba(222, 232, 243, 1.0);
1254 content: attr(data-tooltip);
1263 [data-tooltip]:before,
1264 [data-tooltip]:after,
1267 .tooltip-top:before,
1268 .tooltip-top:after {
1273 [data-tooltip]:before,
1275 .tooltip-top:before {
1277 margin-bottom: -12px;
1279 border-bottom-color: #DEE8F3;
1280 border-bottom-color: rgba(222, 232, 243, 1.0);
1283 /* Horizontally align top/bottom tooltips */
1284 [data-tooltip]:after,
1286 .tooltip-top:after {
1290 [data-tooltip]:hover:before,
1291 [data-tooltip]:hover:after,
1292 [data-tooltip]:focus:before,
1293 [data-tooltip]:focus:after,
1294 .tooltip:hover:before,
1295 .tooltip:hover:after,
1296 .tooltip:focus:before,
1297 .tooltip:focus:after,
1298 .tooltip-top:hover:before,
1299 .tooltip-top:hover:after,
1300 .tooltip-top:focus:before,
1301 .tooltip-top:focus:after {
1302 -webkit-transform: translateY(-12px);
1303 -moz-transform: translateY(-12px);
1304 transform: translateY(-12px);
1308 .tooltip-left:before,
1309 .tooltip-left:after {
1315 .tooltip-left:before {
1317 margin-right: -12px;
1319 border-top-color: transparent;
1320 border-left-color: #000;
1321 border-left-color: hsla(0, 0%, 20%, 0.9);
1324 .tooltip-left:hover:before,
1325 .tooltip-left:hover:after,
1326 .tooltip-left:focus:before,
1327 .tooltip-left:focus:after {
1328 -webkit-transform: translateX(-12px);
1329 -moz-transform: translateX(-12px);
1330 transform: translateX(-12px);
1334 .tooltip-bottom:before,
1335 .tooltip-bottom:after {
1341 .tooltip-bottom:before {
1344 border-top-color: transparent;
1345 border-bottom-color: #DEE8F3;
1346 border-bottom-color: rgba(222, 232, 243, 1.0);
1349 .tooltip-bottom:hover:before,
1350 .tooltip-bottom:hover:after,
1351 .tooltip-bottom:focus:before,
1352 .tooltip-bottom:focus:after {
1353 -webkit-transform: translateY(12px);
1354 -moz-transform: translateY(12px);
1355 transform: translateY(12px);
1359 .tooltip-right:before,
1360 .tooltip-right:after {
1365 .tooltip-right:before {
1368 border-top-color: transparent;
1369 border-right-color: #000;
1370 border-right-color: hsla(0, 0%, 20%, 0.9);
1373 .tooltip-right:hover:before,
1374 .tooltip-right:hover:after,
1375 .tooltip-right:focus:before,
1376 .tooltip-right:focus:after {
1377 -webkit-transform: translateX(12px);
1378 -moz-transform: translateX(12px);
1379 transform: translateX(12px);
1382 /* Move directional arrows down a bit for left/right tooltips */
1383 .tooltip-left:before,
1384 .tooltip-right:before {
1388 /* Vertically center tooltip content for left/right tooltips */
1389 .tooltip-left:after,
1390 .tooltip-right:after {
1392 margin-bottom: -16px;
1394 /* Extra small devices (portrait phones, less than 576px) */
1395 @media (max-width: 575.98px) {
1401 /* Small devices (landscape phones, 576px and up) */
1402 @media (min-width: 576px) and (max-width: 767.98px) {
1406 /* Medium devices (tablets, 768px and up) */
1407 @media (min-width: 768px) and (max-width: 991.98px) {
1411 /* Large devices (desktops, 992px and up) */
1412 @media (min-width: 992px) and (max-width: 1199.98px) {
1416 /* Extra large devices (large desktops, 1200px and up) */
1417 @media (min-width: 1200px) {