pastebin - collaborative debugging tool
kpaste.net RSS


style
Posted by Anonymous on Wed 6th May 2020 23:30
raw | new post

  1. /* /!\ keep the #custom-container-inner hidden in non-mobile mode */
  2. #custom-container-outer{
  3.     display:none;
  4. }
  5.  
  6. @media screen and (max-width: 1024px){
  7.  
  8.     /*START select-single*/
  9.     .choices.form-group.formio-choices:not([data-type="select-multiple"]).is-open > .choices__list.choices__list--dropdown.is-active{
  10.         display: block;
  11.         position: fixed;
  12.         left: 5px;
  13.         top: 5px;
  14.         width: calc(100% - 10px);
  15.         height: calc(100% - 10px);
  16.         z-index: 999;
  17.         box-shadow: 0 0 0 100px rgba(0, 0, 0, 0.7);
  18.         border-radius: 4px;
  19.     }
  20.     .choices.form-group.formio-choices:not([data-type="select-multiple"]).is-open > .choices__list.choices__list--dropdown.is-active > .choices__list{
  21.         max-height: 100%;
  22.         padding-bottom: 20px;
  23.         padding-top: 45px;
  24.     }
  25.    
  26.     .choices__list.choices__list--single > .choices__item > .choices__button{
  27.         border: 1px solid grey;
  28.         width: 25px !important;
  29.         height: 25px !important;
  30.         top: calc(50% - 3px) !important;
  31.         right: 12px !important;
  32.     }
  33.    
  34.    
  35.     .choices.form-group.formio-choices:not([data-type="select-multiple"]).is-open > .choices__list.choices__list--dropdown.is-active{
  36.         background:#ffffff;
  37.         color:#212121;
  38.     }
  39.     .choices.form-group.formio-choices:not([data-type="select-multiple"]).is-open > .choices__list.choices__list--dropdown.is-active .choices__item{
  40.         font-size: 24px;
  41.         min-height: 67px;
  42.         min-height: 87px;
  43.         border-bottom: 1px solid #e0e0e0;
  44.         width: calc(100% - 25px);
  45.         padding-left: 0;
  46.         /* margin-left: 20px; */
  47.         /* margin-right: 20px; */
  48.         margin: auto;
  49.         background:#FFFFFF;
  50.         color: #333;
  51.         display: flex;
  52.         align-items: center;
  53.         word-break: break-word;
  54.     }
  55.     .choices.form-group.formio-choices:not([data-type="select-multiple"]).is-open > .choices__list.choices__list--dropdown.is-active .choices__item:last-child{
  56.         border-bottom:none;
  57.     }
  58.    
  59.     .choices.form-group.formio-choices:not([data-type="select-multiple"]).is-open > .choices__list.choices__list--dropdown.is-active .choices__item span{
  60.         justify-items:center;
  61.         pointer-events: none;
  62.         display: inline-flex;
  63.         align-items: center;
  64.         max-width: calc(100% - 50px);
  65.         padding-top: 4px;
  66.         /* padding-bottom: 2px; */
  67.     }
  68.    
  69.     .choices.form-group.formio-choices:not([data-type="select-multiple"]).is-open > .choices__list.choices__list--dropdown.is-active .choices__item::before{
  70.         content: ' ';
  71.         font-size:30px;
  72.         width: 27.5px;
  73.         height: 27.5px;
  74.         border: 0.65px solid #5a5a5a;
  75.         display: inline-block;
  76.         border-radius: 100%;
  77.         margin-right: 19px;
  78.     }
  79.     .choices.form-group.formio-choices:not([data-type="select-multiple"]).is-open > .choices__list.choices__list--dropdown.is-active.select-has-value .choices__item.selected-dropdown-item::before{
  80.         border: 0.65px solid #4285f4;
  81.         box-shadow: inset 0 0 0px 3px #FFFFFF, inset 0 0 0px 20px #4285f4;
  82.     }
  83.  
  84.     .choices.form-group.formio-choices:not([data-type="select-multiple"]).is-open > .choices__list.choices__list--dropdown > input.choices__input {
  85.         position: absolute;
  86.         top: 0;
  87.         left: 0;
  88.         z-index: 999;
  89.     }
  90.    
  91.     /*END select-single*/
  92.  
  93.     /*START select-multiple*/
  94.     .choices.form-group.formio-choices[data-type="select-multiple"].is-open{
  95.         position: fixed;
  96.         left: 9999999px;
  97.     }
  98.  
  99.     .choices.form-group.formio-choices[data-type="select-multiple"]:not(.is-open) > .choices__inner > input.choices__input.choices__input--cloned {
  100.         display:none !important;
  101.     }
  102.  
  103.     /********************************************/
  104.  
  105.     #custom-container-outer{
  106.         display: block;
  107.         position: fixed;
  108.         height: calc(100% - 10px);
  109.         width: calc(100% - 10px);
  110.         background: #FFFFFF;
  111.         z-index: 1002;
  112.         top: 5px;
  113.         left: 5px;
  114.         word-break: break-word;
  115.         border-radius: 4px;
  116.         box-shadow: 0 0 0 100px rgba(0, 0, 0, 0.7);
  117.     }
  118.  
  119.     .custom-container-outer-btn-close{
  120.         display: flex;
  121.         align-items:center;
  122.         justify-content:center;
  123.         content:"X";
  124.         position:fixed;
  125.         z-index: 1003;
  126.         color: #d9d9d9;
  127.         top: 3px;
  128.         right: 3px;
  129.         font-size: 32px;
  130.         box-shadow: 0 0 0px 1px rgba(239, 239, 239, 0.53);
  131.         width: 57px;
  132.         height: 57px;
  133.         background: rgba(0,0,0,0.6);
  134.         border-radius:100%;
  135.         border: none;
  136.         cursor: pointer;
  137.         outline: none;
  138.         padding: 0;
  139.     }
  140.  
  141.     #custom-container-outer.hide-custom-container-outer{
  142.         display:none;
  143.     }
  144.  
  145.     #custom-container-outer > .choices__list > .choices__item{
  146.         padding-left: 0;
  147.         background: #FFFFFF;
  148.         display: flex;
  149.         font-size: 24px;
  150.         min-height: 87px;
  151.         border-top: 1px solid #e0e0e0;
  152.         width: 100%;
  153.         align-items: center;
  154.         padding: 0;
  155.         justify-content: flex-start;
  156.         border: none;
  157.         border-bottom: 1px solid #d4d4d4;
  158.     }
  159.  
  160.     #custom-container-outer > .choices__list > .choices__item:last-child{
  161.         border-bottom: none;
  162.     }
  163.  
  164.     #custom-container-outer > .choices__list > .choices__item > .choices__item-state-btn{
  165.         width: 45px;
  166.         height: 45px;
  167.         color: #333;
  168.         background-size: 45px;
  169.         padding: 0;
  170.         border: 1px solid #818183;
  171.         cursor: pointer;
  172.         margin-right: 18px;
  173.         margin-left: 14px;
  174.         outline: none;
  175.         background: #f7f7f7;
  176.     }
  177.     #custom-container-outer > .choices__list > .choices__item > .choices__item-state-btn.selected{
  178.         background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAABmJLR0QAWABYAFj2P5m7AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH5AEMCzYUqSTP1QAAAbxJREFUeNrt3EFSAjEQhtFAeck5IcfEPSLKMJ1097xvyUr+V5GJWl7u9/t9KE1XEwARECACAkRAgAgIEAERECACAkRAgAgIEAERECACAkRAgAjIWfsywfO2bfvx2u12c0KyYLx6HcgCjFkoQHaMHYkCZOfIUShAPhg3AuUKY0v19VxhuBi2wYi4l1xh5ME4JUhmjNOBZMc4FUgFjNOAVME4BUgljDEm/fj9cZRZb7AaxpQT8myUGReyihjhIK9GiUSpihEK8p9RIlAqY4SBvDPKkSjVMUJA9oxyxJAdMFI99n4yaBeMdPeQVacrC0bKi+Hsz59MGCEgR7zBWU9o2TDCTkg0SleM0G9ZUSidMcI/Q45G6Y4xxhiXGf+3N8sfE2THmPaUlWGIChhTH3tXDlIFY/o9ZMUwlTCWXAxnDlQNY9lNfcZQFTGWgUQPVhVjKUjUcJUxloMcPWB1jBQgRw3ZASMNyKeDdsFIBbJ32E4Y6UDeHbgbRkqQ/w7dESMtyF+Dd8VIDfLb8J0x0oM8AnTHGGPSL6jU6IQAERABASIgQAQEiIAAERABASIgQAQEiIAAERABASIgQASkUd/fwbZxQD7a3gAAAABJRU5ErkJggg==');
  179.         background-repeat: no-repeat;
  180.         background-size: contain;
  181.         background-position: center;
  182.         box-shadow: 0 0 0px 2px #818181;
  183.     }
  184.  
  185.     #custom-container-outer > .choices__list > .choices__item > span{
  186.         pointer-events: none;
  187.         display: inline-flex;
  188.         align-items: center;
  189.         max-width: calc(100% - 90px);
  190.         padding-top: 2px;
  191.         padding-bottom: 2px;
  192.         word-break: break-word;
  193.         line-height: 1.45;
  194.     }
  195.  
  196.     #custom-container-outer >  input.choices__input-custom-container-outer{
  197.         width: 100%;
  198.         padding:10px;
  199.         border:none;
  200.         border-top-right-radius: 4px;
  201.         border-top-left-radius: 4px;
  202.         border-bottom: 1px solid #d2d2d2;
  203.         outline: none;
  204.         margin-bottom: 5px;
  205.         height: 42px;
  206.     }
  207.  
  208.     #custom-container-outer > .choices__list{
  209.         max-height: calc(100% - 52px);
  210.         overflow: auto;
  211.         padding-bottom: 10px;
  212.     }
  213.     #custom-container-outer > .choices__list::before{
  214.         content: attr(empty-filter-string);
  215.         position: absolute;
  216.         z-index: -1;
  217.         top: 50px;
  218.         left: 8px;
  219.     }
  220.     .hidden-choices__item{
  221.         display:none !important;
  222.     }
  223.     .choices.form-group.formio-choices[data-type="select-multiple"]:not(.is-open) > .choices__inner > .choices__list > .choices__item,
  224.     .choices.form-group.formio-choices[data-type="select-multiple"]:not(.is-open) > .choices__inner > .choices__list > .choices__item *{
  225.         pointer-events:none;
  226.     }
  227.     /*END select-multiple*/
  228.  
  229.     /*START select-single && select-multiple*/
  230.     html.form-dropdown-shown::before{
  231.         display:flex;
  232.         align-items:center;
  233.         justify-content:center;
  234.         content:"X";
  235.         position:fixed;
  236.         z-index: 9999;
  237.         color: #d9d9d9;
  238.         top: 3px;
  239.         right: 3px;
  240.         font-size: 32px;
  241.         box-shadow: 0 0 0px 1px rgba(239, 239, 239, 0.53);
  242.         width: 45px;
  243.         height: 45px;
  244.         background: rgba(0,0,0,0.6);
  245.         border-radius:100%;
  246.         /* font-weight: bold; */
  247.     }
  248.     .choices__input{
  249.         color:#000000;
  250.     }
  251.     input.choices__input:focus,
  252.     input.choices__input-custom-container-outer:focus{
  253.         color:#000000;
  254.         box-shadow:0 0 3px 1px #585858;
  255.     }
  256.     /*END select-single && select-multiple*/
  257.    
  258. }
  259.  
  260. /**************************************************** progress-indicator  ***************************************************************/
  261.  
  262. .progress-indicator-parent {
  263.         padding: auto !important;
  264. }
  265. .wizard-nav-wrapper {
  266.         padding: 0px !important;
  267. }
  268. .task-edit-form .form-container .form-fields .suggested-actions {
  269.     margin: 0 1em 0em 0 !important;
  270. }
  271.  
  272. .formio-component-var-dataGridFeedingCBL tbody td:first-child,.formio-component-var-dataGridFeedingCBL thead td:first-child{
  273.   width:10%
  274. }
  275.  
  276. .progress-indicator>li.active .bubble:after, .progress-indicator>li.active .bubble:before {
  277.     z-index: -1;
  278.     display: block;
  279.     top: 9px;
  280. }
  281.  
  282. .progress-indicator>li .bubble:after, .progress-indicator>li .bubble:before {
  283.     display: block;
  284.     position: absolute;
  285.     top: 9px;
  286.     width: 100%;
  287.     height: 3px;
  288.     content: '';
  289.     background-color: var(--color2);
  290.     z-index: -1;
  291. }
  292.  
  293. .bubble + .glyphicon{
  294.         margin-left: auto;
  295.     margin-right: 1px;
  296.     margin-bottom: 19px;
  297.     margin-top: -29px;
  298.     display: block;
  299.     font-size: 14px;
  300. }
  301. body.ar .bubble + .glyphicon{
  302.         transform: rotate(180deg) !important;
  303. }
  304. .progress-indicator>li .bubble{
  305.         background-color: #fff !important;
  306.         border:2px solid;
  307.         width: 30px;
  308.     height: 30px;
  309.         margin-top: -2px;
  310. }
  311.  
  312. .progress-indicator>li.active .bubble{
  313.         background-color:#fff;
  314. }
  315.  
  316. .glyphicon-ok-circle:before {
  317.     content: "\e013" !important;
  318. }
  319.  
  320. .glyphicon-edit:before {
  321.     content: "\270f" !important;
  322. }
  323. /*********************************************************General Settings**************************************************************/
  324.  
  325. .pageName {
  326.     font-size: medium;
  327.     font-family: 'DINPro' !important;
  328.     letter-spacing: 0.05em;
  329. }
  330.  
  331.  
  332. .choices__list--multiple .choices__item {
  333.     background-color: #93d5da !important;
  334.     border: 1px solid #b1dff1 !important;
  335.         font-size: large !important;
  336.     font-family: 'DINPro' !important;
  337.     list-style-type: none;
  338.     letter-spacing: 0.05em;
  339. }
  340. .input-group .form-control:last-child {
  341.     font-size: large !important;
  342. }
  343. .choices__list--dropdown {
  344.     z-index: 1000 !important;
  345. }
  346. .col-sm-2 {
  347.     width: auto !important;
  348. }
  349. .col-sm-2{
  350.         padding-right:0px !important;
  351. }
  352.  
  353. p.help-block {
  354.     display: none;
  355. }
  356.  
  357. .imgCheckbox{
  358.         text-align: center;
  359.         margin-top: 2%;
  360.     margin-bottom: 5%;
  361.         width: 60% !important;
  362.         margin-left:20% !important;
  363. }
  364.  
  365. textarea{
  366.        
  367.         resize:none;
  368.         min-height:16px;
  369.         overflow-wrap: break-word !important;
  370.         border: 1px solid #cad8fc !important;
  371.     box-shadow: none!important;
  372.     border-top-right-radius: 10px !important;
  373.     border-bottom-right-radius: 10px !important;
  374. }
  375. body.ar textarea.form-control {
  376.     font-size: large;
  377. }
  378. body.eng textarea.form-control {
  379.     font-size: medium;
  380. }
  381.  
  382. p{
  383.         margin-bottom: 10px;
  384.         margin-top: 12px;
  385.     font-family: 'DINPro' !important;
  386.     list-style-type: none;
  387.     margin-right: 6%;
  388.     letter-spacing: 0.05em;
  389.     clear: none;
  390.     /*color: #6e6e6e;*/
  391.     font-size: large;
  392.     line-height: 30px;
  393. }
  394. label {
  395.         font-size : large !important;
  396.         font-weight:400 !important;
  397.         font-family: 'DINPro' !important;
  398.     list-style-type: none;
  399.     letter-spacing: 0.05em;
  400. }
  401. label.control-label.field-required {
  402.         font-size : large !important;
  403.         font-weight:400 !important;
  404.         color: black;
  405.         font-family: 'DINPro' !important;
  406.     list-style-type: none;
  407.     letter-spacing: 0.05em;
  408. }
  409. input{
  410.         unicode-bidi: embed !important;
  411. }
  412. body.eng .htmlComponentArabic{
  413.         text-align: end;
  414. }
  415. body.ar .htmlComponentArabic{
  416.         text-align: initial;
  417. }
  418. .htmlComponentArabic{
  419.         font-size: x-large !important;
  420.     font-family: 'El Messiri' !important;
  421.     list-style-type: none;
  422.     margin-right: 6%;
  423.     letter-spacing: 0.05em;
  424.     margin-top: x-large;
  425.     line-height: 30px;
  426. }
  427. .htmlComponentEnglish{
  428.         margin-bottom: 10px;
  429.         /*margin-top: 12px;*/
  430.     font-family: 'DINPro' !important;
  431.     list-style-type: none;
  432.     margin-right: 6%;
  433.     letter-spacing: 0.05em;
  434.     clear: none;
  435.     /*color: #6e6e6e;*/
  436.     font-size: large;
  437.     line-height: 30px;
  438. }
  439. body.eng .htmlComponentEnglish{
  440.         text-align: initial;
  441. }
  442. body.ar .htmlComponentEnglish{
  443.         text-align: end;
  444. }
  445. .panel{
  446.         border:none !important;
  447.         unicode-bidi:embed !important;
  448. }
  449.  
  450. .textFieldComponent input {
  451.         /*font-family: Arial,Helvetica,sans-serif;*/
  452.         font-family: 'DINPro' !important;
  453.     font-size: medium;
  454.     line-height: 1.5;
  455.     color: black;
  456.     display: block;
  457.     width: 100%;
  458.     background: #fff;
  459.     border: 1px solid #cad8fc!important;
  460.     height: 50px;
  461.     border-radius: 10px!important;
  462.     padding: 0 20px;
  463.     -webkit-box-shadow: none!important;
  464.     box-shadow: none!important;
  465. }
  466. body.ar .textFieldComponent input {
  467.     font-size: large;
  468.     unicode-bidi: plaintext !important;
  469.     text-align: right !important;
  470. }
  471.  
  472. body.ar .textFieldComponent input::placeholder {
  473.     unicode-bidi: plaintext !important;
  474. }
  475. body.ar .textFieldComponent input.form-control {
  476.         margin-right:0% !important;
  477. }
  478.  
  479. .textFieldComponent label, .textFieldComponent label.control-label.field-required {
  480.     font-family: 'DINPro' !important;
  481.     list-style-type: none;
  482.     letter-spacing: 0.05em;
  483.     clear: none;
  484.     /*color: #6e6e6e;*/
  485.         color:black;
  486.     font-size: large;
  487.     line-height: 30px;
  488. }
  489.  
  490.  
  491. /*****Style date*****/
  492.  
  493. body.eng .dateComponent .form-control.flatpickr-input {
  494.     background-color: #fff;
  495.     font-family: Arial,Helvetica,sans-serif;
  496.     font-size: 15px;
  497.     line-height: 1.5;
  498.     color: black;
  499.     display: block;
  500.     width: 100%;
  501.     background: #fff;
  502.     border: 1px solid #cad8fc;
  503.     height: 50px;
  504.     padding: 0 20px;
  505.     -webkit-box-shadow: none!important;
  506.     box-shadow: none!important;
  507.         border-top-left-radius: 10px !important;
  508.     border-bottom-left-radius: 10px !important;
  509. }
  510. body.ar .dateComponent .form-control.flatpickr-input {
  511.     background-color: #fff;
  512.     font-family: Arial,Helvetica,sans-serif;
  513.     font-size: 15px;
  514.     line-height: 1.5;
  515.     color: black;
  516.     display: block;
  517.     width: 100%;
  518.     background: #fff;
  519.     border: 1px solid #cad8fc;
  520.     height: 50px;
  521.     padding: 0 20px;
  522.     -webkit-box-shadow: none!important;
  523.     box-shadow: none!important;
  524.         border-top-right-radius: 10px !important;
  525.     border-bottom-right-radius: 10px !important;
  526. }
  527. body.eng .dateComponent .input-group-addon:last-child {
  528.     border-left: 0;
  529.     line-height: 1.5;
  530.     border: 1px solid #cad8fc;
  531.     height: 50px;
  532.     padding: 0 20px;
  533.     -webkit-box-shadow: none!important;
  534.     box-shadow: none!important;
  535.     border-top-right-radius: 10px !important;
  536.     border-bottom-right-radius: 10px !important;
  537.     background-color: white;
  538. }
  539. body.ar .dateComponent .input-group-addon:last-child {
  540.     border-left: 0;
  541.     line-height: 1.5;
  542.     border: 1px solid #cad8fc;
  543.     height: 50px;
  544.     padding: 0 20px;
  545.     -webkit-box-shadow: none!important;
  546.     box-shadow: none!important;
  547.     border-top-left-radius: 10px !important;
  548.     border-bottom-left-radius: 10px !important;
  549.     background-color: white;
  550. }
  551.  
  552. i.glyphicon-calendar:before {
  553.     content: "";
  554.     font-family: "FontAwesome" !important;
  555.     content: "\f073" !important;
  556.     color: #cad8fc !important;
  557. }
  558.  
  559. .dayComponent .form-control {
  560.     font-size: 15px;
  561.     line-height: 1.5;
  562.     color: #555;
  563.     border: 1px solid #ccc;
  564.     border-radius: 4px;
  565.     border: 1px solid #cad8fc !important;
  566.     height: 50px;
  567.         width: 100%;
  568.     padding: 0 20px;
  569.     -webkit-box-shadow: none!important;
  570.     box-shadow: none!important;
  571.     border-top-left-radius: 10px !important;
  572.     border-bottom-left-radius: 10px !important;
  573. }
  574.  
  575. /*****Select Style*****/
  576.  
  577. .selectComponent .form-control {
  578.     font-family: Arial,Helvetica,sans-serif;
  579.     font-size: large;
  580.     line-height: 1.5;
  581.     color: black;
  582.     display: block;
  583.     /*width: 100%;*/
  584.     background: #fff;
  585.     border: 1px solid #cad8fc!important;
  586.     height: 50px;
  587.     border-radius: 10px!important;
  588.     padding: 0 20px;
  589.     -webkit-box-shadow: none!important;
  590.     box-shadow: none!important;
  591.     padding-top: 13px;
  592.     /* padding: unset; */
  593. }
  594.  
  595. .selectComponent .choices__item.choices__item--selectable {
  596.     font-family: 'DINPro' !important;
  597.     list-style-type: none;
  598.     letter-spacing: 0.05em;
  599.     clear: none;
  600.     /*color: #6e6e6e;*/
  601.         color:black;
  602.     font-size: 18px;
  603.     line-height: 30px;
  604. }
  605. .selectComponent label.control-label{
  606.         font-family: 'DINPro' !important;
  607.     list-style-type: none;
  608.     letter-spacing: 0.05em;
  609.     clear: none;
  610.     /*color: #6e6e6e;*/
  611.         color:black;
  612.     font-size: large;
  613.     line-height: 30px;
  614. }
  615. .radioComponent{
  616.        
  617. }
  618.  
  619. .showErrorMessage p.help-block {
  620.     display: none;
  621. }
  622.  
  623. /*********************************************************Style Checkbox Slide**************************************************************/
  624.  
  625. /* The container */
  626. div .checkboxSlide:first-child {
  627.                 font-weight: bold !important;
  628.                 font-size: 1.2em !important;
  629.         }
  630.        
  631. /* .checkboxSlide ,
  632.         .checkboxSlide input[type="checkbox"] {
  633.                 color: #aaad3a !important;
  634.                 text-decoration: none !important;
  635.         } */
  636.  
  637. .checkboxSlide a:hover,
  638.         .checkboxSlide a:focus {
  639.                 text-decoration: underline;
  640.         }
  641.  
  642.  
  643.         [type="checkbox"]:not(:checked),
  644.         .checkboxSlide input[type="checkbox"]:checked {
  645.                 position: absolute !important;
  646.                 /*left: -9999px !important;*/
  647.                 visibility:hidden !important;
  648.         }
  649.         .checkboxSlide input[type="checkbox"]:not(:checked) +span,
  650.         .checkboxSlide input[type="checkbox"]:checked +span {
  651.                 position: absolute !important;
  652.                 padding-left: 75px !important;
  653.                 cursor: pointer !important;
  654.         }
  655.     .checkboxSlide input[type="checkbox"]:not(:checked) +span:before,
  656.         .checkboxSlide input[type="checkbox"]:checked + span:before,
  657.         .checkboxSlide input[type="checkbox"]:not(:checked) + span:after,
  658.         .checkboxSlide input[type="checkbox"]:checked + span:after {
  659.                 content: '' !important;
  660.                 position: absolute !important;
  661.         }
  662.    
  663.    
  664.         .checkboxSlide [type="checkbox"]:not(:checked) + span:before,
  665.         .checkboxSlide [type="checkbox"]:checked + span:before {
  666.                 left:0 !important;
  667.         top: -3px !important;
  668.                 width: 65px !important;
  669.         height: 30px !important;
  670.                 background: #DDDDDD !important;
  671.                 border-radius: 15px !important;
  672.                 -webkit-transition: background-color .1s !important;
  673.                 -moz-transition: background-color .1s !important;
  674.                 -ms-transition: background-color .1s !important;
  675.                 transition: background-color .1s !important;
  676.         }
  677.         .checkboxSlide input[type="checkbox"]:not(:checked) + span:after,
  678.         .checkboxSlide input[type="checkbox"]:checked + span:after {
  679.                 width: 20px !important;
  680.                 height: 20px !important;
  681.                 -webkit-transition: all .1s !important;
  682.                 -moz-transition: all .1s !important;
  683.                 -ms-transition: all .1s !important;
  684.                 transition: all .1s !important;
  685.                 border-radius: 50% !important;
  686.                 background: #7F8C9A !important;
  687.                 top: 2px;
  688.                 left: 5px !important;
  689.         }
  690.  
  691.         /* on checked */
  692.         .checkboxSlide input[type="checkbox"]:checked + span:before {
  693.                 background:#95d0d4 !important;
  694.         }
  695.         .checkboxSlide input[type="checkbox"]:checked + span:after {
  696.                 background: #39D2B4 !important;
  697.                 top: 2px !important;
  698.         left: 40px !important;
  699.         }
  700.  
  701.         .checkboxSlide input[type="checkbox"]:checked + span,
  702.         .checkboxSlide input[type="checkbox"]:not(:checked) + span:before,
  703.         .checkboxSlide input[type="checkbox"]:checked + span:after {
  704.                 position: absolute !important;
  705.                 /* left: 6px !important; */
  706.                 /*width: 65px !important;*/
  707.                 border-radius: 15px !important;
  708.                 font-size: 17px !important;
  709.                 font-weight: bold !important;
  710.                 line-height: 22px !important;
  711.                 -webkit-transition: all .1s !important;
  712.                 -moz-transition: all .1s !important;
  713.                 -ms-transition: all .1s !important;
  714.                 transition: all .1s !important;
  715.         }
  716.         .checkboxSlide input[type="checkbox"]:not(:checked) + span:before {
  717.                 /content: "no" !important;/
  718.                 /* left: 32px !important; */
  719.         }
  720.         .checkboxSlide input[type="checkbox"]:checked + span:after {
  721.                 /content: "yes" !important;/
  722.                 color: #95d0d4 !important;
  723.                 width: 20px !important;
  724.                 height: 20px !important;
  725.                 -webkit-transition: all .1s !important;
  726.                 -moz-transition: all .1s !important;
  727.                 -ms-transition: all .1s !important;
  728.                 transition: all .1s !important;
  729.                 border-radius: 50% !important;
  730.                 background: #ffffff !important;
  731.                 top: 2px;
  732.                 left: 40px !important;
  733.         }
  734.         .checkboxSlide input[type="checkbox"]:focus + span:before {
  735.                 border: 1px dashed #777 !important;
  736.                 -webkit-box-sizing: border-box !important;
  737.                 -moz-box-sizing: border-box !important;
  738.                 -ms-box-sizing: border-box !important;
  739.                 box-sizing: border-box !important;
  740.                 margin-top: -1px !important;
  741.         }
  742. .checkboxSlide label {
  743.         width: 100%;
  744.         color :white !important;
  745.         font-size:0px !important;
  746. }
  747. .checkboxSlide {
  748.         margin-top:0px !important;
  749. }
  750. /*********************************************************Style for Circular Checkbox**************************************************************/
  751.  
  752. .checkboxCircular {
  753.     display: block;
  754.     position: relative;
  755.     margin: auto;
  756.     cursor: pointer;
  757.     font-size: 22px;
  758.     line-height: 24px;
  759.     height: 24px;
  760.     width: 24px;
  761.     clear: both;
  762. }
  763.  
  764. .checkboxCircular input {
  765.     position: absolute;
  766.     opacity: 0;
  767.     cursor: pointer;
  768. }
  769.  
  770. .checkboxCircular  {
  771.     position: absolute;
  772.     top: 0px;
  773.     left: 0px;
  774.     height: 24px;
  775.     width: 24px;
  776.     background-color: transparent;
  777.     border-radius: 50px;
  778.     transition: all 0.3s ease-out;
  779.     -webkit-transition: all 0.3s ease-out;
  780.     -moz-transition: all 0.3s ease-out;
  781.     -ms-transition: all 0.3s ease-out;
  782.     -o-transition: all 0.3s ease-out;
  783.     border: 2px solid #95d0d4;
  784. }
  785. .checkboxCircular  label {
  786.         color :white !important;
  787.         font-size:0px !important;
  788. }
  789. .checkboxCircular input:checked ~ span {
  790.     background-color: #95d0d4;
  791.     -webkit-transform: rotate(0deg) scale(1);
  792.     -ms-transform: rotate(0deg) scale(1);
  793.     transform: rotate(0deg) scale(1);
  794.     opacity:1;
  795.     border: 2px solid #95d0d4;
  796.     border-radius: 50px;
  797. }
  798.  
  799. .checkboxCircular span::after {
  800.     position: absolute;
  801.     content: "" !important;
  802.     left: 12px;
  803.     top: 12px;
  804.     height: 0px;
  805.     width: 0px;
  806.     border-radius: 50px;
  807.     border: solid #009BFF;
  808.     border-width: 0 3px 3px 0;
  809.     -webkit-transform: rotate(0deg) scale(0);
  810.     -ms-transform: rotate(0deg) scale(0);
  811.     transform: rotate(0deg) scale(0);
  812.     opacity:1;
  813.     transition: all 0.3s ease-out;
  814.     -webkit-transition: all 0.3s ease-out;
  815.     -moz-transition: all 0.3s ease-out;
  816.     -ms-transition: all 0.3s ease-out;
  817.     -o-transition: all 0.3s ease-out;
  818. }
  819.  
  820. .checkboxCircular input:checked ~ span::after {
  821.   -webkit-transform: rotate(45deg) scale(1);
  822.   -ms-transform: rotate(45deg) scale(1);
  823.   transform: rotate(45deg) scale(1);
  824.   opacity:1;
  825.   left: 8px;
  826.   top: 3px;
  827.   width: 6px;
  828.   height: 12px;
  829.   border: solid #009BFF;
  830.   border-width: 0 2px 2px 0;
  831.   background-color: transparent;
  832.   border-radius: 0;
  833. }
  834.  
  835. /* For Ripple Effect */
  836.  
  837. .checkboxCircular span::before {
  838.     position: absolute;
  839.     content: "";
  840.     left: 10px;
  841.     top: 10px;
  842.     width: 0px;
  843.     height: 0px;
  844.     border-radius: 50px;
  845.     border: 2px solid #95d0d4;
  846.     -webkit-transform: scale(0);
  847.     -ms-transform: scale(0);
  848.     transform: scale(0);    
  849. }
  850.  
  851. .checkboxCircular input:checked ~ span::before {
  852.     left: -3px;
  853.     top: -3px;
  854.     width: 24px;
  855.     height: 24px;
  856.     border-radius: 50px;
  857.     -webkit-transform: scale(3);
  858.     -ms-transform: scale(3);
  859.     transform: scale(3);
  860.     opacity:0;
  861.     z-index: 999;
  862.     transition: all 0.3s ease-out;
  863.     -webkit-transition: all 0.3s ease-out;
  864.     -moz-transition: all 0.3s ease-out;
  865.     -ms-transition: all 0.3s ease-out;
  866.     -o-transition: all 0.3s ease-out;
  867. }
  868. /*********************************************************Style Checkbox Normal**************************************************************/
  869. .checkboxStyle span:after {
  870.     display: block;
  871.     position: relative;
  872.     margin: auto;
  873.     cursor: pointer;
  874.     font-size: 22px;
  875.     line-height: 24px;
  876.     height: 24px;
  877.     width: 24px;
  878.     clear: both;
  879.     margin-left:0% !important;
  880.     margin-bottom:3% !important;
  881. }
  882.  
  883. .checkboxStyle label{
  884.         color: black !important;
  885.         margin-bottom: 0.5em !important;
  886.     font-family: 'DINPro' !important;
  887.     letter-spacing: 0.05em;
  888. }
  889.  
  890. .checkboxStyle input {
  891.     position: absolute;
  892.     opacity: 0;
  893.     cursor: pointer;
  894. }
  895.  
  896. .checkboxStyle span:before  {
  897.     position: absolute;
  898.     top: 0px;
  899.     margin-top: 0px !important;
  900.     height: 24px;
  901.     width: 24px;
  902.     background-color: transparent;
  903.     border-radius: 5px;
  904.     transition: all 0.3s ease-out;
  905.     -webkit-transition: all 0.3s ease-out;
  906.     -moz-transition: all 0.3s ease-out;
  907.     -ms-transition: all 0.3s ease-out;
  908.     -o-transition: all 0.3s ease-out;
  909.     border: 2px solid #009BFF;
  910.     /* padding-left: 8px; */
  911. }
  912.  
  913. body.eng .checkboxStyle span:before  {
  914.     left: 0px
  915. }
  916. body.ar .checkboxStyle span:before  {
  917.     right: 0px
  918. }
  919.  
  920. .checkboxStyle input:checked ~ span {
  921.     background-color: #FFFFFF;
  922.     border-radius: 5px;
  923.     -webkit-transform: rotate(0deg) scale(1);
  924.     -ms-transform: rotate(0deg) scale(1);
  925.     transform: rotate(0deg) scale(1);
  926.     opacity:1;
  927. }
  928.  
  929. .checkboxStyle input:checked ~ span:after {
  930.     border: 2px solid #009BFF;
  931.     /* padding-left: 8px; */
  932. }
  933.  
  934. .checkboxStyle span::after {
  935.     position: absolute;
  936.     content: "";
  937.     top: 12px;
  938.     height: 0px;
  939.     width: 0px;
  940.     border-radius: 5px;
  941.     border: solid #009BFF;
  942.     border-width: 0 3px 3px 0;
  943.     -webkit-transform: rotate(0deg) scale(0);
  944.     -ms-transform: rotate(0deg) scale(0);
  945.     transform: rotate(0deg) scale(0);
  946.     opacity:1;
  947.     transition: all 0.3s ease-out;
  948.     -webkit-transition: all 0.3s ease-out;
  949.     -moz-transition: all 0.3s ease-out;
  950.     -ms-transition: all 0.3s ease-out;
  951.     -o-transition: all 0.3s ease-out;
  952.     /* padding-left: 8px; */
  953. }
  954.  
  955. body.eng .checkboxStyle span::after {
  956.     left: 12px;
  957. }
  958. body.ar .checkboxStyle span::after {
  959.     right: 12px;
  960. }
  961.  
  962.  
  963. .checkboxStyle input:checked ~ span::after {
  964.   -webkit-transform: rotate(45deg) scale(1);
  965.   -ms-transform: rotate(45deg) scale(1);
  966.   transform: rotate(45deg) scale(1);
  967.   opacity:1;
  968.   top: 3px;
  969.   width: 6px;
  970.   height: 12px;
  971.   border: solid #009BFF;
  972.   border-width: 0 2px 2px 0;
  973.   background-color: transparent;
  974.   border-radius: 0;
  975.   /* padding-left: 8px; */
  976. }
  977. body.eng .checkboxStyle input:checked ~ span::after {
  978.   left: 8px;
  979. }
  980. body.ar .checkboxStyle input:checked ~ span::after {
  981.   right: 8px;
  982. }
  983.  
  984. /* For Ripple Effect */
  985. .checkboxStyle span::before {
  986.     position: absolute;
  987.     content: "";
  988.     top: 10px;
  989.     width: 0px;
  990.     height: 0px;
  991.     border-radius: 5px;
  992.     border: 2px solid #FFFFFF;
  993.     -webkit-transform: scale(0);
  994.     -ms-transform: scale(0);
  995.     transform: scale(0);
  996.     /* padding-left: 8px; */
  997. }
  998. body.eng .checkboxStyle span::before {
  999.     left: 10px;
  1000. }
  1001. body.ar .checkboxStyle span::before {
  1002.     right: 10px;
  1003. }
  1004. .checkboxStyle input:checked ~ span::before {
  1005.     top: 5px;
  1006.     width: 9px;
  1007.     height: 9px;
  1008.     border-radius: 3px;
  1009.     -webkit-transform: scale(3);
  1010.     -ms-transform: scale(3);
  1011.     transform: scale(3);
  1012.     opacity: 1;
  1013.     z-index: 999;
  1014.     transition: all 0.3s ease-out;
  1015.     -webkit-transition: all 0.3s ease-out;
  1016.     -moz-transition: all 0.3s ease-out;
  1017.     -ms-transition: all 0.3s ease-out;
  1018.     border: 1px solid #009BFF;
  1019.     -o-transition: all 0.3s ease-out;
  1020.     /* padding-left: 8px; */
  1021. }
  1022. body.eng .checkboxStyle input:checked ~ span::before {
  1023. left: 5px;
  1024. }
  1025. body.ar .checkboxStyle input:checked ~ span::before {
  1026. right: 5px;
  1027. }
  1028. body.eng .checkboxStyle span{
  1029.     padding-left: 8px;
  1030.         }
  1031. body.ar .checkboxStyle span{
  1032.     padding-right: 27px;
  1033.         }
  1034.  
  1035. .checkboxStyle.alert {
  1036.      padding: 0px !important;
  1037. }
  1038.  
  1039.  
  1040. .checkboxStyle input:not(:checked) ~ span {
  1041.     background-color: #FFFFFF;
  1042.     border-radius: 5px;
  1043.     -webkit-transform: rotate(0deg) scale(1);
  1044.     -ms-transform: rotate(0deg) scale(1);
  1045.     transform: rotate(0deg) scale(1);
  1046.     opacity:1;
  1047. }
  1048.  
  1049. .checkboxStyle input:not(:checked) ~ span:after {
  1050.     border: 2px solid #009BFF;
  1051.     /* padding-left: 8px; */
  1052. }
  1053. .checkboxStyle input:not(:checked) ~ span::before {
  1054.     left: 5px;
  1055.     top: 5px;
  1056.     width: 9px;
  1057.     height: 9px;
  1058.     border-radius: 3px;
  1059.     -webkit-transform: scale(3);
  1060.     -ms-transform: scale(3);
  1061.     transform: scale(3);
  1062.     opacity: 1;
  1063.     z-index: 999;
  1064.     transition: all 0.3s ease-out;
  1065.     -webkit-transition: all 0.3s ease-out;
  1066.     -moz-transition: all 0.3s ease-out;
  1067.     -ms-transition: all 0.3s ease-out;
  1068.     border: 1px solid #009BFF;
  1069.     -o-transition: all 0.3s ease-out;
  1070.     /* padding-left: 8px; */
  1071. }
  1072.  
  1073.  
  1074. /*********************************************************Info-bulle**************************************************************/
  1075. .infobulle {
  1076.   text-decoration:none;
  1077.   position:relative;
  1078. }
  1079. .infobulle span {
  1080.   display:none;
  1081.   -moz-border-radius:6px;
  1082.   -webkit-border-radius:6px;
  1083.   border-radius:6px;
  1084.   color:black;
  1085.   background-color: #eff1f3;
  1086.   font-size:10px;
  1087.   font-style:italic;
  1088. }
  1089. .infobulle span{
  1090.   float:left;
  1091.   margin:0px 8px 8px 0;
  1092. }
  1093. .infobulle img{
  1094.   width: 20px !important;
  1095.   height: 20px !important;
  1096. }
  1097. .infobulle:hover span
  1098. {
  1099.   display:block;
  1100.   position:absolute;
  1101.   top:0;
  1102.   left:0;
  1103.   z-index:1000;
  1104.   width:250px;
  1105.   /* max-width:200px; */
  1106.   min-height:20px;
  1107.   border:1px solid black;
  1108.   margin-top:12px;
  1109.   margin-left:32px;
  1110.   overflow:hidden;
  1111.   padding:8px;
  1112. }
  1113.  
  1114. /******************************************** Bouton Next-Previous ***************************************/
  1115.  
  1116. /*****English*****/
  1117.  
  1118. body.eng .glyphicon.glyphicon-backward::before{
  1119. content: "Previous" !important;
  1120. color: white !important;
  1121. font-weight: bold !important;
  1122. }
  1123. body.eng .glyphicon-refresh:before {
  1124.     content: "Reset" !important;
  1125.         color: orange !important;
  1126.         font-weight: bold !important;
  1127. }
  1128. body.eng .glyphicon.glyphicon-forward::before{
  1129. content: "Next" !important;
  1130. color: white !important;
  1131. font-weight: bold !important;
  1132. }
  1133. body.eng .wizard-nav-wrapper {
  1134.         width: 87% !important;
  1135.         text-align: -webkit-right !important;
  1136.         border-color: white !important;
  1137. }
  1138. body.eng .btn-circle {
  1139.         width: 11% !important;
  1140.         top: auto !important;
  1141. }
  1142. body.eng .btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited, .btn-primary:focus, .btn-primary:active:focus {
  1143.     background-color: #95d0d4 !important;
  1144.         border-color: #95d0d4 !important;
  1145. }
  1146. body.eng .btn-danger, .btn-danger:hover, .btn-danger:active, .btn-danger:visited, .btn-danger:focus, .btn-danger:active:focus{
  1147.         background-color: white !important;
  1148.     border-color: orange !important;
  1149. }
  1150. /*
  1151. body.eng .glyphicon {
  1152.     top: 0px !important;
  1153.         font-family: inherit !important;
  1154. }*/
  1155.  
  1156. /*****Arabic*****/
  1157.  
  1158. body.ar .glyphicon.glyphicon-backward::before{
  1159. content: "????" !important;
  1160. color: white !important;
  1161. font-weight: bold !important;
  1162. }
  1163. body.ar .glyphicon-refresh:before {
  1164.     content: "?????" !important;
  1165.         color: orange !important;
  1166.         font-weight: bold !important;
  1167. }
  1168. body.ar .glyphicon.glyphicon-forward::before{
  1169. content: "?????" !important;
  1170. color: white !important;
  1171. font-weight: bold !important;
  1172. }
  1173. body.ar .wizard-nav-wrapper {
  1174.         width: 87% !important;
  1175.         text-align: -webkit-right !important;
  1176.         border-color: white !important;
  1177. }
  1178. body.ar .btn-circle {
  1179.         width: 11% !important;
  1180.         top: auto !important;
  1181. }
  1182. body.ar .btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited, .btn-primary:focus, .btn-primary:active:focus {
  1183.     background-color: #95d0d4 !important;
  1184.         border-color: #95d0d4 !important;
  1185. }
  1186. body.ar .btn-danger, .btn-danger:hover, .btn-danger:active, .btn-danger:visited, .btn-danger:focus, .btn-danger:active:focus{
  1187.         background-color: white !important;
  1188.     border-color: orange !important;
  1189. }
  1190.  
  1191. /*
  1192. body.ar .glyphicon {
  1193.     top: 0px !important;
  1194.         font-family: inherit !important;
  1195. }
  1196. */
  1197. body.ar .btn-wizard-nav-next, .btn-wizard-nav-previous{
  1198.     -webkit-transform: rotate(0deg) !important;
  1199. }
  1200.  
  1201. /********************************************************* Radio Botton **************************************************************/
  1202.  
  1203. /********************************************************* panelFormulaire **************************************************************/
  1204.  
  1205. div.panelFormulaire .panel-border{
  1206.   background-color: #95d0d4 !important;
  1207. }
  1208.  
  1209. div.panelFormulaire .panel-heading {
  1210.   background-color: transparent;
  1211.   border:1px solid #95d0d4 !important;
  1212.   border-top-left-radius: 15px!important;
  1213.   border-top-right-radius: 15px!important;
  1214.   border-top-width: 10px !important;
  1215.   background-color:white !important;
  1216.   height:70px !important;
  1217. }
  1218.  
  1219. div.panelFormulaire .panel-title {
  1220.   font-size: 30px !important;
  1221.   color: #95d0d4;
  1222. }
  1223.  
  1224. div.panelFormulaire .panel-body {
  1225.         border:1px solid #95d0d4 !important;
  1226.     flex: 1 1 auto;
  1227.     box-sizing: border-box;
  1228.     flex: 0 0 100%;
  1229.     max-width: 100%;
  1230.     position: relative;
  1231.     width: 100%;
  1232.     min-height: 1px;
  1233.     border-radius: .25rem!important;
  1234.     /*overflow-y: auto;*/
  1235.         background-color:white !important;
  1236. }
  1237.  
  1238.  
  1239.  
  1240. /********************************************************* Bottons **************************************************************/
  1241. #createAccount {
  1242.         font-family: Arial,Helvetica,sans-serif;
  1243.     font-size: 15px;
  1244.     line-height: 1.5;
  1245.     color: #82d1d4;
  1246.     text-transform: uppercase;
  1247.     height: 50px;
  1248.     border-radius: 10px;
  1249.     background: #fff;
  1250.     border: 1px solid #82d1d4;
  1251.     display: -webkit-box;
  1252.     display: -ms-flexbox;
  1253.     display: flex;
  1254.     padding: 0 40px;
  1255.     -webkit-transition: .4s;
  1256.     transition: .4s;
  1257.     cursor: pointer;
  1258. }
  1259.  
  1260. #createAccount:hover {
  1261.   background-color: white;
  1262.   color: #e2143e;
  1263.    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
  1264. }
  1265.  
  1266. #createAccount1 {
  1267.         font-family: Arial,Helvetica,sans-serif;
  1268.     font-size: 15px;
  1269.     line-height: 1.5;
  1270.     color: #82d1d4;
  1271.     text-transform: uppercase;
  1272.     height: 50px;
  1273.     border-radius: 10px;
  1274.     background: #fff;
  1275.     border: 1px solid #82d1d4;
  1276.     display: -webkit-box;
  1277.     display: -ms-flexbox;
  1278.     display: flex;
  1279.     padding: 0 40px;
  1280.     -webkit-transition: .4s;
  1281.     transition: .4s;
  1282.     cursor: pointer;
  1283.         margin-top:5%;
  1284. }
  1285.  
  1286. #createAccount1:hover {
  1287.   background-color: white;
  1288.   color: #e2143e;
  1289.    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
  1290. }
  1291.  
  1292. #launchBotton{
  1293.                 font-family: Arial,Helvetica,sans-serif;
  1294.     font-size: 15px;
  1295.     line-height: 1.5;
  1296.     color: #82d1d4;
  1297.     text-transform: uppercase;
  1298.     height: 50px;
  1299.     border-radius: 10px;
  1300.     background: #fff;
  1301.     border: 1px solid #82d1d4;
  1302.     display: -webkit-box;
  1303.     display: -ms-flexbox;
  1304.     display: flex;
  1305.     padding: 0 40px;
  1306.     -webkit-transition: .4s;
  1307.     transition: .4s;
  1308.     cursor: pointer;
  1309.         margin-top:5% !important;
  1310.         margin:auto;
  1311.         font-weight: bold;
  1312.     border-width: 2px;
  1313. }
  1314. #launchBotton:hover {
  1315.   background-color: white;
  1316.   color: #e2143e;
  1317.    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
  1318. }
  1319.  
  1320. /********************************************************* Login Page **************************************************************/
  1321.  
  1322. div.loginPanel1 .panel-body {
  1323.     position: relative;
  1324.     border-radius: margin-;
  1325.     margin-left: 3em !important;
  1326.     margin-right: 0px !important;
  1327.     padding: 0% !important;
  1328. }
  1329. div.loginPanel1{
  1330.         margin-bottom: 0% !important;
  1331.         border: none!important;
  1332.         padding-bottom: 0% !important;
  1333. }
  1334.  
  1335. .createAccountTitle1{
  1336.         font-weight: bold !important;
  1337.         font-size: 2em !important;
  1338.         /*text-align: center;*/
  1339.         color: black;
  1340.         margin-left:25%;
  1341.         position: relative !important;
  1342. }
  1343.  
  1344. .loginPage1 p.help-block {
  1345.     display: none;
  1346. }
  1347. .loginPage1 label{
  1348.         font-size:larger !important;
  1349.     font-weight: lighter !important;
  1350.         color: black !important;
  1351. }
  1352.  
  1353. .loginPage1 input{
  1354.         font-family: Arial,Helvetica,sans-serif;
  1355.     font-size: 15px !important;
  1356.     line-height: 1.5;
  1357.     color: #cad8fc !important;
  1358.     display: block;
  1359.     width: 80% !important;
  1360.     background: #fff;
  1361.     border: 1px solid #cad8fc !important;
  1362.     height: 50px;
  1363.     border-radius: 10px !important;
  1364.     padding: 0 20px !important;
  1365.     -webkit-box-shadow: none!important;
  1366.     box-shadow: none!important;
  1367. }
  1368.  
  1369. .loginPagePassword1 p.help-block {
  1370.     display: none;
  1371. }
  1372. .loginPagePassword1 label{
  1373.         font-size:larger !important;
  1374.     font-weight: lighter !important;
  1375.         color: black !important;
  1376. }
  1377. .loginPagePassword1 input{
  1378.         font-family: Arial,Helvetica,sans-serif;
  1379.     font-size: 15px;
  1380.     line-height: 1.5;
  1381.     color: #cad8fc;
  1382.     display: block;
  1383.     width: 80%;
  1384.     background: #fff;
  1385.     border: 1px solid #cad8fc;
  1386.     height: 50px;
  1387.     border-radius: 10px;
  1388.     padding: 0 20px;
  1389.     -webkit-box-shadow: none!important;
  1390.     box-shadow: none!important;
  1391. }
  1392.  
  1393. .loginImg1{
  1394.         position: fixed;
  1395.         width: 15em !important;
  1396.         margin-bottom :4%;
  1397.         position: relative !important;
  1398. }
  1399.  
  1400. .backGroundImage1 {
  1401.     width: 100%;
  1402.     -webkit-box-flex: 0;
  1403.     flex: 0 0 58.33333333%;
  1404.     overflow: hidden;
  1405. }
  1406.  
  1407. /**************************************************** ACCOUNT OPENING  ***************************************************************/
  1408.  
  1409. .htmlAccountOpeningTitle{
  1410.         font-weight: bold !important;
  1411.         color:#f8a073 !important;
  1412.         font-family: 'DINPro' !important;
  1413.     letter-spacing: 0.01em;
  1414.         font-size:x-large !important;
  1415.         padding-bottom: 1em;
  1416.     padding-top: 0.3em;
  1417. }
  1418.  
  1419. .attachedDoc{
  1420.         font-size: large;
  1421.         font-weight: bold;
  1422. }
  1423.  
  1424. .AccountOpeningCheckBox span {
  1425.     font-size: large !important;
  1426.         color: black;
  1427.         padding: inherit;
  1428. }
  1429. .AccountOpeningCheckBox input {
  1430.     transform: scale(2) !important;
  1431.         position: relative !important;
  1432. }
  1433.  
  1434. .AccountOpeningCheckBox p.help-block {
  1435.     display: none;
  1436. }
  1437.  
  1438. .htmlAccountOpening {
  1439.         font-size:large !important;
  1440. }
  1441.  
  1442. /**************************************************** FAMILY ALLOWANCE  ***************************************************************/
  1443.  
  1444. .masterCardCases{
  1445.     color: #000000;
  1446.     font-size: large;
  1447.         font-weight: bold;
  1448.         vertical-align: middle;
  1449. }
  1450. .masterCardCasesLarge{
  1451.         font-size: x-large;
  1452. }
  1453. .masterCardCasesArabic{
  1454.     color: #000000;
  1455.     font-size: x-large;
  1456.         font-weight: bold;
  1457.         vertical-align: middle !important;
  1458.     padding-left: 10%;
  1459. }
  1460.  
  1461. .masterCardLabel label{
  1462.         font-size: large !important;
  1463.         font-weight: bold;
  1464. }
  1465. .masterCardLabelLarge label{
  1466.         font-size: x-large !important;
  1467. }
  1468.  
  1469. .imgCheckbox{
  1470.         text-align: center;
  1471.         margin-top: 2%;
  1472.     margin-bottom: 5%;
  1473.         width: 60% !important;
  1474.         margin-left:20% !important;
  1475. }
  1476.  
  1477.  
  1478. /*********************************************************************************************************************************************************/
  1479.  
  1480. .extranetRequiredMessage p.help-block {
  1481.     display: none;
  1482. }
  1483. .extranetRequiredMessage label{
  1484.         color: black !important;
  1485. }
  1486.  
  1487. .extranetDate p.help-block {
  1488.     display: none;
  1489. }
  1490.  
  1491. .extranetDate label{
  1492.         color: black !important;
  1493. }
  1494.  
  1495. .labelContenuGed label {
  1496.         font-size: large !important;
  1497. }
  1498.  
  1499. .phoneNumber value {
  1500.         unicode-bidi: plaintext;
  1501.         text-align: right;
  1502. }
  1503. .displayLTR input {
  1504.         direction: ltr;
  1505. }
  1506.  
  1507. .validationStartImg{
  1508.     clip-path: inset(0px 0px 0px 0px);
  1509.     margin-left: auto;
  1510.     width:100%;
  1511.     /*margin-top: -51%;*/
  1512. }
  1513.  
  1514.  
  1515. .radio input[type=radio], .radio-inline input[type=radio] {
  1516.     position: inherit;
  1517.     margin-left: 80px;
  1518.     margin-top: auto;
  1519.     width: 17px;
  1520.     height: 17px;
  1521.     cursor: pointer;
  1522. }
  1523.  
  1524. /*************************************** Login Page *****************************************/
  1525.  
  1526. .boutonCreate form .btn-warning {
  1527.     background-color: #B6452B!important;
  1528.     border: 2px solid #B6452B;
  1529.     padding: 4px !important;
  1530.     padding-right: 10px !important;
  1531.     padding-left: 10px !important;
  1532.     width: 100%;
  1533.     color: white !important;
  1534.     font-size: 1.1em;
  1535. }
  1536.  
  1537. .backGroundPanel .panel-body{
  1538.         background-image: url("https://e-service.atib.ly:8443/cover.PNG") !important;
  1539.         background-size: cover;
  1540.     border-radius: 0;
  1541.     box-shadow: 2px 0px 4px grey;
  1542.         /*padding: 10px 25px 0px 25px;*/
  1543.         /*position: relative;*/
  1544.         /* max-height: 5000px;*/
  1545.     /*overflow: auto;*/
  1546.         width: auto;
  1547. }
  1548.  
  1549. .backGroundImage {
  1550.        
  1551. }
  1552.  
  1553. .cssCheckBox input + span:before {
  1554.   font: 16pt FontAwesome;
  1555.   content: '\00f096';
  1556.   display: inline-block;
  1557.   width: 16pt;
  1558.   padding: 2px 0 0 3px;
  1559.   margin-right: 0.5em;
  1560. }
  1561.  
  1562.  
  1563.  
  1564. /***START fixes for Libya ATIB***/
  1565.  
  1566.  
  1567.  
  1568. .form-control{
  1569.     /*testing purposes only*/
  1570.     /*outline:1px solid blue;*/
  1571.     /*testing purposes only*/
  1572.     margin-right: 0;
  1573.     margin-left: 0;
  1574.     width: 100%;
  1575. }
  1576. .dayComponent .form-control{
  1577.     border-radius:4px !important;
  1578. }
  1579. .formio-component{
  1580.     /*outline:1px solid green*/
  1581. }
  1582.  
  1583. /*start .formio-component-datetime*/
  1584. .formio-component-datetime > .input-group{
  1585.     margin-left:0px;
  1586.     margin-right:0px;
  1587. }
  1588. /*end .formio-component-datetime*/
  1589.  
  1590.  
  1591. /*start .formio-component-day*/
  1592. .formio-component-day > .input-group{
  1593.     margin-left:0px;
  1594.     margin-right:0px;
  1595.     display: flex;
  1596.     justify-content:space-between;
  1597. }
  1598. .formio-component-day > .input-group input[type='number'],
  1599. .formio-component-day > .input-group select{
  1600.     padding-left:3px;
  1601.     padding-right:3px;
  1602. }
  1603. .formio-component-day > .input-group::before,
  1604. .formio-component-day > .input-group::after{
  1605.     display:none;
  1606. }
  1607. .panel-body > .row > .col .form-group.formio-component-day > .input-group > .form-group{
  1608.     padding-right:0px;
  1609.     padding-left:0px;
  1610.     max-width:30%;
  1611.     margin: 0px !important;
  1612. }
  1613.  
  1614. @media screen and (min-width:768px) and (max-width:892px){
  1615. .panel-body > .row > .col .form-group.formio-component-day > .input-group > .form-group:nth-child(2){
  1616.     /*min-width:35%;*/
  1617.     max-width:37%;
  1618. }
  1619. .panel-body > .row > .col .form-group.formio-component-day > .input-group > .form-group:nth-child(1),
  1620. .panel-body > .row > .col .form-group.formio-component-day > .input-group > .form-group::nth-child(3){
  1621.     /*min-width:30%;*/
  1622.     max-width:30%;
  1623. }
  1624. }
  1625.  
  1626. body.ar > #formio .panel > .panel-body > .row .formio-component-day > .input-group{
  1627.     flex-direction: row-reverse;
  1628. }
  1629. body.eng > #formio .panel > .panel-body > .row .formio-component-day > .input-group{
  1630.     flex-direction: row;
  1631. }
  1632.  
  1633. @media screen and (max-width:461px){
  1634.     body.ar > #formio .panel > .panel-body > .row .formio-component-day > .input-group{
  1635.         flex-direction:column-reverse;
  1636.     }
  1637.     body.eng > #formio .panel > .panel-body > .row .formio-component-day > .input-group{
  1638.         flex-direction:column;
  1639.     }
  1640.     .panel-body > .row > .col .form-group.formio-component-day > .input-group > .form-group{
  1641.         width:100%;
  1642.         max-width:none;
  1643.     }
  1644. }
  1645. /*end .formio-component-day*/
  1646.  
  1647. .formio-component-number .form-control-number{
  1648.     margin-right:0px;
  1649. }
  1650.  
  1651. /*start .formio-component-select*/
  1652. .formio-component-select > .choices[data-type*=select-one]:after{
  1653.    
  1654. }
  1655. body.ar > #formio .panel > .panel-body > .row .formio-component-select > .choices[data-type*=select-one]:after{
  1656.     margin-right:0px;
  1657.     left: 11.5px;
  1658.     right:auto;
  1659. }
  1660. .formio-component-select > .choices[data-type*=select-one] .choices__button{
  1661.     right:auto;
  1662.     border: 1px solid #676767;
  1663.     width: 23px;
  1664.     height: 23px;
  1665. }
  1666. @media screen and (max-width: 1024px){
  1667.     .choices__list.choices__list--single > .choices__item > .choices__button{
  1668.         width:28px !important;
  1669.         height:28px !important;
  1670.         /* right:auto !important; */
  1671.         /* margin-right: 0px; */
  1672.         /* margin-left: 0px; */
  1673.     }
  1674.  
  1675.     body.ar .choices.form-group.formio-choices:not([data-type="select-multiple"]).is-open > .choices__list.choices__list--dropdown.is-active .choices__item::before{
  1676.         margin-right: 0;
  1677.         margin-left: 19px;
  1678.     }
  1679.  
  1680.     .choices.form-group.formio-choices:not([data-type="select-multiple"]).is-open > .choices__list.choices__list--dropdown.is-active {
  1681.         z-index: 99999 !important;
  1682.     }
  1683.     html.form-dropdown-shown::before{
  1684.         z-index:100000;
  1685.     }
  1686. }
  1687. @media screen and (max-width: 641px){
  1688.      .choices__list.choices__list--single > .choices__item > .choices__button{
  1689.         width:32px !important;
  1690.         height:32px !important;
  1691.     }
  1692.    
  1693.     .panel-body{
  1694.         padding-left:4px;
  1695.         padding-right:4px;
  1696.     }
  1697.     #formio{
  1698.         padding-left:0px;
  1699.         padding-right:0px;
  1700.     }
  1701. }
  1702. /*end .formio-component-select*/
  1703. @media screen and (max-width:460px){
  1704.     .progress-indicator-parent > .progress-indicator{
  1705.         display: flex;
  1706.         flex-direction: column;
  1707.     }
  1708.  
  1709.     .progress-indicator-parent > .progress-indicator li{
  1710.         margin-top:12px;
  1711.     }
  1712.     .progress-indicator-parent > .progress-indicator li .pageName{
  1713.         display:block;
  1714.         margin-top:-10px;
  1715.     }
  1716. }
  1717. .flatpickr-calendar{
  1718.     box-shadow: 0 0 1px 1px #80808094 !important;
  1719. }
  1720.  
  1721. body.ar .wizard-nav-wrapper,
  1722. body.eng .wizard-nav-wrapper{
  1723.     display:flex;
  1724.     justify-content:center;
  1725.     border-top: 1px solid #d6d6d6 !important;
  1726.     width: 100% !important;
  1727.     align-items: center;
  1728.     left: 0;
  1729.     width: 100%;
  1730.     padding: 5px !important;
  1731.     z-index:99998;
  1732. }
  1733.  
  1734. body .wizard-nav-wrapper button{
  1735.     padding:0px;
  1736.     margin: 0px 6%;
  1737.     min-width: 78px;
  1738.     max-width: 130px;
  1739.     z-index:99998 !important;
  1740. }
  1741.  
  1742. body{
  1743.     width: 100%;
  1744. }
  1745. .panel{
  1746.     margin-left:2%;
  1747.     margin-right:2%;
  1748. }
  1749. .masterCardCasesArabic{
  1750.     margin: 0px 0px 5px 0px;
  1751.     /* margin: 0; */
  1752. }
  1753.  
  1754.  
  1755. .panel-body > .row > .col .form-group {
  1756.     /* margin-bottom: 0px; */
  1757.     /* margin: auto; */
  1758.     /* margin-bottom: 25px; */
  1759. }
  1760. .formio-component-select > .form-group,
  1761. .panel-body > .row > .col .form-group .choices:last-child{
  1762.     margin-bottom:0px !important;
  1763. }
  1764. .panel-body > .row > .col .form-group:not(.formio-component-checkbox) {
  1765.     /* flex-grow: 1; */
  1766.     width: 100%;
  1767. }
  1768. .imgCheckbox{
  1769.     margin:auto;
  1770.     display:block;
  1771. }
  1772.  
  1773. .panel-body > .row > .col .form-group.formio-component-checkbox:not(.checkboxCircular):not(.checkboxStyle) {
  1774.     width: 77px;
  1775.     /* height: 50px; */
  1776.     margin:0px;
  1777.     display: flex;
  1778.     align-items: center;
  1779.     margin: 0px auto 20px auto;
  1780. }
  1781.  
  1782. .panel-body > .row > .col .form-group.checkboxSlide label{
  1783.     padding:0px !important;
  1784. }
  1785.  
  1786. .panel-body > .row > .col .form-group.checkboxSlide span{
  1787.     padding-left: 66px !important;
  1788. }
  1789.  
  1790. @media screen and (min-width:768px){
  1791.     .panel-body > .row > .col {
  1792.         margin-bottom: 25px;
  1793.         /*display: flex;*/
  1794.     }
  1795.     .panel .panel-body > .row > .col.col-sm-3:first-child + .col.col-sm-6:not(:last-child) {
  1796.         width: 100%;
  1797.         max-width: 50%;
  1798.     }
  1799.     body.eng > #formio .panel > .panel-body > .row > .col.col-sm-3:first-child{
  1800.         min-width: 25%;
  1801.     }
  1802.     body.eng > #formio .panel > .panel-body > .row > .col.col-sm-3:last-child:nth-child(3){
  1803.         /* display:none; */
  1804.         min-width: 25%;
  1805.     }
  1806.     /***/
  1807.     body.ar > #formio .panel > .panel-body > .row > .col.col-sm-3:first-child{
  1808.         min-width: 25%;
  1809.     }
  1810.     body.ar > #formio .panel > .panel-body > .row > .col.col-sm-3:last-child:nth-child(3){
  1811.         /* display:none; */
  1812.         min-width: 25%;
  1813.     }
  1814. }
  1815.  
  1816. @media screen and (max-width:968px){
  1817.     body.eng > #formio .panel > .panel-body > .row > .col:last-child{
  1818.         /* display:none; */
  1819.     }
  1820.     /***/
  1821.     body.ar > #formio .panel > .panel-body > .row > .col:first-child{
  1822.         /* display:none; */
  1823.     }
  1824. }
  1825.  
  1826. @media screen and (max-width:768px){
  1827.     .panel-body > .row > .col {
  1828.         margin-bottom: 20px;
  1829.     }
  1830.     .panel-body > .row > .col:first-child,.panel-body > .row > .col:last-child {
  1831.         margin-bottom: 2px;
  1832.     }
  1833. }
  1834.  
  1835. /*start specific arabic*/
  1836. .formio-group.formio-component-var-withdrawingFromAnotherBankArabic{
  1837.     margin:0px;
  1838. }
  1839. .formio-group.formio-component-var-withdrawingFromAnotherBankCodeArabic{
  1840.     margin:0px;
  1841. }
  1842. .htmlComponentArabic{
  1843.     text-align: right !important;
  1844. }
  1845. /*end specific arabic*/
  1846. .htmlComponentEnglish{
  1847.     text-align: left !important;
  1848. }
  1849.  
  1850. body.ar .panel:not(.panelMultiLang) .htmlComponentEnglish{
  1851.     display:none;
  1852. }
  1853. body.eng .panel:not(.panelMultiLang) .htmlComponentArabic{
  1854.     display:none;
  1855. }
  1856.  
  1857. body.ar > #formio  .panel:not(.familyAllowanceFirstPanel) > .panel-body > .row,
  1858. body.eng > #formio .panel:not(.familyAllowanceFirstPanel) > .panel-body > .row{
  1859.     display:flex;
  1860.     justify-content: space-between;
  1861. }
  1862. body.ar > #formio .panel > .panel-body > .row{
  1863.     flex-direction:row-reverse;
  1864. }
  1865.  
  1866. body.eng > #formio .panel:last-child >.panel-body{
  1867. }  
  1868.  
  1869. .panel-body > .row[hidden='true']{
  1870.     display:none !important;
  1871. }
  1872.  
  1873. @media screen and (max-width:767px){
  1874.     body.ar > #formio .panel:not(.panelMultiLang) > .panel-body > .row{
  1875.         flex-direction:column-reverse;
  1876.         align-items: normal;
  1877.         margin-bottom:10px;
  1878.     }
  1879.  
  1880.     /**/
  1881.     /*
  1882.     body.ar > #formio > .row > .col > .panelFormulaire:first-child .panel-body > .row:nth-child(5){
  1883.         flex-direction: row-reverse;
  1884.         flex-wrap: wrap;
  1885.     }
  1886.     */
  1887.     /**/
  1888.  
  1889.     body.eng > #formio .panel > .panel-body > .row,
  1890.     body > #formio .panel.panelMultiLang  > .panel-body > .row{
  1891.         flex-direction:column;
  1892.         align-items: normal;
  1893.         margin-bottom:10px;
  1894.     }
  1895.     body > #formio .panel.panelMultiLang  > .panel-body > .row{
  1896.         align-items: flex-end;
  1897.         margin-bottom: 15px;
  1898.     }
  1899.     /*
  1900.     body.eng > #formio > .row > .col > .panelFormulaire:first-child .panel-body > .row:nth-child(5){
  1901.         flex-direction: row;
  1902.         flex-wrap: wrap;
  1903.     }
  1904.     */
  1905.     body > #formio .panel.panelMultiLang  > .panel-body > .row > .col:first-child:not(.col-sm-3),
  1906.     body > #formio .panel.panelMultiLang  > .panel-body > .row > .col:last-child:not(.col-sm-3),
  1907.     body > #formio .panel.panelMultiLang  > .panel-body > .row > .col:not(:last-child):not(:first-child):not(.col-sm-6){
  1908.         align-self:stretch;
  1909.     }
  1910.  
  1911. }
  1912.  
  1913. /*start .formio-component-file*/
  1914. .formio-component-file > ul{
  1915.     padding:0px;
  1916. }
  1917.  
  1918. .formio-component-file > ul > li >.row{
  1919.         display: flex;
  1920.         flex-direction: row-reverse;
  1921.         justify-content: space-between;
  1922.         width:100%;
  1923.         margin: 0;
  1924. }
  1925. .formio-component-file > ul > li >.row > :nth-child(1){
  1926.     text-align:left;
  1927. }
  1928. .formio-component-file > ul > li >.row > :nth-child(2){
  1929.     flex-grow:1;
  1930.     text-align:center;
  1931. }    
  1932. .formio-component-file > ul > li >.row > :nth-child(3){
  1933.     min-width:150px;
  1934. }
  1935. @media screen and (max-width:467px){
  1936.     .formio-component-file > ul > li >.row{
  1937.         flex-direction:column;
  1938.         align-items:center;
  1939.     }
  1940.     .formio-component-file > ul > li >.row > *{
  1941.         text-align:center;
  1942.         margin:8px 0px;
  1943.     }
  1944. }
  1945.  
  1946. /*end .formio-component-file*/
  1947.  
  1948. .checkboxSlideCenterComponent{
  1949.     margin:auto !important;
  1950. }
  1951. .centerHTMLComponent{
  1952.     text-align:center !important;
  1953. }
  1954. .panelMultiLang .form-group:not(.formio-component-checkbox):not(.formio-component-radio) label{
  1955.     display:none;
  1956. }
  1957.  
  1958.  
  1959. @media screen and (max-width:767px){
  1960.  
  1961.     body.eng > #formio .panelMultiLang:not(.panelCheckboxAndHtml) .panel-body > .row,
  1962.     body.ar > #formio .panelMultiLang:not(.panelCheckboxAndHtml) .panel-body > .row{
  1963.         /*display:flex !important;
  1964.         flex-wrap:wrap !important;
  1965.         flex-direction: row;*/
  1966.         position: relative !important;
  1967.         direction:rtl !important;
  1968.     }
  1969.     body.eng > #formio .panelMultiLang .panel-body > .row > .col.col-sm-3:first-child,
  1970.     body.ar > #formio .panelMultiLang .panel-body > .row > .col.col-sm-3:first-child {
  1971.         width: 50% !important;
  1972.         word-break: break-word;
  1973.     }
  1974.     body.eng > #formio .panelMultiLang .panel-body > .row > .col.col-sm-3:nth-child(1) + .col.col-sm-6:nth-child(2),
  1975.     body.ar > #formio .panelMultiLang .panel-body > .row > .col.col-sm-3:nth-child(1) + .col.col-sm-6:nth-child(2) {
  1976.         width:100% !important;
  1977.     }
  1978.    
  1979.     body.eng > #formio .panelMultiLang .panel-body > .row > .col.col-sm-3:last-child,
  1980.     body.ar > #formio .panelMultiLang .panel-body > .row > .col.col-sm-3:last-child {
  1981.         width: 50% !important;
  1982.         word-break: break-word;
  1983.         position: absolute !important;
  1984.         right: 0;
  1985.         top: 0;
  1986.     }
  1987.  
  1988.     body > #formio .panelMultiLang .panel-body > .row > .col.col-sm-3:last-child .htmlComponentArabic{
  1989.         margin:0px;
  1990.     }
  1991.    
  1992. }
  1993. div.panelFormulaire .panel-heading{
  1994.         min-height: 70px !important;
  1995.         height: auto !important;
  1996. }
  1997. .componentLabelRight label{
  1998.     text-align:right;
  1999. }
  2000. .componentLabelLeft label{
  2001.     text-align:left;
  2002. }
  2003.  
  2004. .componentShowLabel label{
  2005.     display:block !important;
  2006. }
  2007. .panelCheckboxAndHtml .panel-body > .row {
  2008.     padding:0 10px
  2009. }
  2010. .panelCheckboxAndHtml .panel-body > .row > .col-sm-12 > .row{
  2011.     display: flex;
  2012.     border-bottom: 1px solid #95d0d4;
  2013.     padding: 8px 0px;
  2014. }
  2015. body.eng .panelCheckboxAndHtml .panel-body > .row > .col-sm-12 > .row{
  2016.     flex-direction: row-reverse;
  2017. }
  2018. bodt.ar .panelCheckboxAndHtml .panel-body > .row > .col-sm-12 > .row{
  2019.     flex-direction:row;
  2020. }
  2021. .panelCheckboxAndHtml .panel-body > .row > .col-sm-12 > .row:last-child{
  2022.     border-bottom: none;
  2023. }
  2024. .panelCheckboxAndHtml > .panel-body{
  2025.     padding-top:0px;
  2026. }
  2027. .panelCheckboxAndHtml .panel-body > .row > .col-sm-12 .row > .col-sm-10{
  2028.     flex-grow:1;
  2029. }
  2030. body.ar .panelCheckboxAndHtml .panel-body > .row > .col-sm-12 .row > .col-sm-2 .checkboxStyle input ~ span::before {
  2031.     top:5px;
  2032.     right:15px;
  2033. }
  2034. body.ar .panelCheckboxAndHtml .panel-body > .row > .col-sm-12 .row > .col-sm-2 .checkboxStyle input:checked ~ span::after{
  2035.     right:15px;
  2036. }
  2037. body.eng .masterCardLabel{
  2038.     text-align:left;
  2039. }
  2040. body.ar .masterCardLabel{
  2041.     text-align:right;
  2042. }
  2043.  
  2044.  
  2045. body.ar .panelFormulaire.panelCheckboxAndHtml .panel-body > .row > * > .row > .col-sm-10 .row:not([hidden]) .row:not([hidden]){
  2046.     display:flex;
  2047.     text-align:right !important;
  2048.     /* justify-content: flex-start; */
  2049.     /* flex-direction:row-reverse; */
  2050. }
  2051. body.eng .panelFormulaire.panelCheckboxAndHtml .panel-body > .row > * > .row > .col-sm-10 .row:not([hidden]) .row:not([hidden]){
  2052.     display:flex;
  2053.     text-align:left !important;
  2054.     justify-content: flex-start;
  2055.     flex-direction:row-reverse;
  2056. }
  2057. @media screen and (max-width:1000px){
  2058.     body.ar .panelFormulaire.panelCheckboxAndHtml .panel-body > .row > * > .row > .col-sm-10 .row:not([hidden]) .row:not([hidden]) > *{
  2059.         flex-grow:1;
  2060.     }
  2061.     body.eng .panelFormulaire.panelCheckboxAndHtml .panel-body > .row > * > .row > .col-sm-10 .row:not([hidden]) .row:not([hidden]) > *{
  2062.         flex-grow:1;
  2063.     }
  2064. }
  2065.  
  2066. body.ar .panelFormulaire.panelCheckboxAndHtml .panel-body > .row > * > .row > .col-sm-10  *{
  2067.     text-align:right !important;
  2068. }
  2069. body.eng .panelFormulaire.panelCheckboxAndHtml .panel-body > .row > * > .row > .col-sm-10  *{
  2070.     text-align:left !important;
  2071. }
  2072.  
  2073. body.ar .panelFormulaire.panelCheckboxAndHtml .panel-body > .row > * > .row > .col-sm-10  >  .row:not([hidden]){
  2074.     display:flex;
  2075.     justify-content:flex-start;
  2076. }
  2077.  
  2078. body.eng .panelFormulaire.panelCheckboxAndHtml .panel-body > .row > * > .row > .col-sm-10  >  .row:not([hidden]){
  2079.     display:flex;
  2080.     justify-content: flex-start;
  2081. }
  2082. @media screen and (max-width:1000px){
  2083.     body.ar .panelFormulaire.panelCheckboxAndHtml .panel-body > .row > * > .row > .col-sm-10 > .row > * {
  2084.         flex-grow:1;
  2085.     }
  2086.     body.eng .panelFormulaire.panelCheckboxAndHtml .panel-body > .row > * > .row > .col-sm-10 > .row > * {
  2087.         flex-grow:1;
  2088.     }
  2089. }
  2090.  
  2091. @media screen and (max-width:600px){
  2092.     body.ar .panelFormulaire.panelCheckboxAndHtml .panel-body > .row > * > .row > .col-sm-10 .row:not([hidden]) .row:not([hidden]):first-child,
  2093.     body.ar .panelFormulaire.panelCheckboxAndHtml .panel-body > .row > * > .row > .col-sm-10 .row:not([hidden]) .row:not([hidden]):nth-child(2){
  2094.         flex-direction:column;
  2095.     }
  2096.     body.eng .panelFormulaire.panelCheckboxAndHtml .panel-body > .row > * > .row > .col-sm-10 .row:not([hidden]) .row:not([hidden]):first-child,
  2097.     body.eng .panelFormulaire.panelCheckboxAndHtml .panel-body > .row > * > .row > .col-sm-10 .row:not([hidden]) .row:not([hidden]):nth-child(2){
  2098.         flex-direction:column;
  2099.     }
  2100.  
  2101.     body.ar .panelFormulaire.panelCheckboxAndHtml .panel-body > .row > * > .row > .col-sm-10  >  .row{
  2102.         flex-direction:column;
  2103.         justify-content:center;
  2104.         align-items:stretch;
  2105.     }
  2106.     body.eng .panelFormulaire.panelCheckboxAndHtml .panel-body > .row > * > .row > .col-sm-10  >  .row{
  2107.         flex-direction:column;
  2108.         justify-content:center;
  2109.         align-items:stretch;
  2110.     }
  2111. }
  2112. body.ar .panelFormulaire.panelCheckboxAndHtml .panel-body > .row > * > .row > .col-sm-10  p{
  2113.     margin-right:0px ;
  2114. }
  2115. body.eng .panelFormulaire.panelCheckboxAndHtml .panel-body > .row > * > .row > .col-sm-10  p{
  2116.     margin-left:0px ;
  2117. }
  2118. .panelFormulaire.panelCheckboxAndHtm *{
  2119.     direction:ltr;
  2120. }
  2121.  
  2122. .radioComponentMultiLang > .input-group-radio{
  2123.     display: flex;
  2124.     justify-content: space-around;
  2125. }
  2126.  
  2127. .radioComponentMultiLang > .input-group-radio > .radio-inline{
  2128.         /* width: 100%; */
  2129.         text-align: left;
  2130.         direction: ltr;
  2131. }
  2132. body.ar .radioComponentMultiLang > .input-group-radio > .radio-inline{
  2133.         text-align:right;
  2134. }
  2135. .radioComponentMultiLang > .input-group-radio > .radio-inline .control-label input[type="radio"]{
  2136.         margin-top: 5px;
  2137.         position:static;
  2138. }
  2139. body.ar .radioComponentMultiLang > .input-group-radio > .radio-inline .control-label input[type="radio"]{
  2140.         margin-left: 0.6em;
  2141. }
  2142.    
  2143. body.eng .radioComponentMultiLang > .input-group-radio > .radio-inline .control-label input[type="radio"]{
  2144.         margin-left: 0px;
  2145.         margin-right: 0.6em;
  2146. }
  2147.  
  2148. body.ar .radioComponentMultiLang > .input-group-radio > .radio-inline .control-label{
  2149.         display:inline-flex;
  2150.         align-items:flex-start;
  2151.         margin:0px;
  2152.         flex-direction: row-reverse;
  2153.         width: 100%;
  2154.         justify-content: flex-start;
  2155. }
  2156. body.eng .radioComponentMultiLang > .input-group-radio > .radio-inline .control-label{
  2157.         display:inline-flex;
  2158.         align-items:flex-start;
  2159.         margin:0px;
  2160.         flex-direction: row;
  2161. }
  2162. @media screen and (max-width:700px){
  2163.         .radioComponentMultiLang > .input-group-radio{
  2164.                 flex-direction:column;
  2165.         }
  2166.         .radioComponentMultiLang > .input-group-radio .radio-inline:not(:last-child){
  2167.                 margin-bottom:30px;
  2168.         }
  2169.          .radioComponentMultiLang > .input-group-radio{
  2170.                 align-items:center;
  2171.         }
  2172.         .radioComponentMultiLang > .input-group-radio .radio-inline{
  2173.                 display: flex;
  2174.                 flex-direction: row;
  2175.                 width: 100%;
  2176.                 margin: 0;
  2177.         }
  2178.         .radioComponentMultiLang > .input-group-radio > .radio-inline .control-label{
  2179.                 width:100%;
  2180.         }
  2181. }
  2182.  
  2183. .radio input[type=radio], .radio-inline input[type=radio]{
  2184.         min-width:17px;
  2185.         min-height:17px;
  2186. }
  2187. /***END fixes for Libya ATIB***/

Submit a correction or amendment below (click here to make a fresh posting)
After submitting an amendment, you'll be able to view the differences between the old and new posts easily.

Syntax highlighting:

To highlight particular lines, prefix each line with {%HIGHLIGHT}




All content is user-submitted.
The administrators of this site (kpaste.net) are not responsible for their content.
Abuse reports should be emailed to us at