body { overscroll-behavior-y: none; } .hidden4Mobile{display:inline-block;} #autoFadeMSG { position:fixed; padding:30px; width:320px; text-align: center; left:0; right:0; background-color: rgba(212, 245, 208, 0.9); border:1px solid #36a727; color:green; font-size:18px; cursor: pointer; margin:auto; bottom:-100%; z-index: 1100; opacity:0; transition:all 0.8s; border-radius: 20px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.301); }  .VideoPlayer { display:none; position: fixed; left:0; right:0; top:0; bottom:0; justify-content: center; align-items: center; background-color: rgba(0, 0, 0, 0.85); z-index:15000; } .VPClose { position:absolute; width:40px; height:40px; border-radius: 50%; display:flex; background-color: black; border:3px solid white; font-size:25px; align-items: center; justify-content: center; font-weight: bold; top:5px; right:5px; color:white; cursor: pointer; z-index:502; transition:transform 0.3s; } .VPClose:hover{transform:scale(1.2)} .covered { width:100%; height:0px; position:relative; overflow:hidden; box-sizing: border-box;  transition:all 0.3s; } .uncovered { width:100%; position:relative; overflow:hidden; box-sizing: border-box; border-radius:5px; transition:all 0.3s; }  .C2, .C3, .C4 { display: flex; position:relative; flex-flow: row; justify-content: space-between; width:100%; box-sizing: border-box; padding:5px; flex-wrap: wrap; } .C2>div {position:relative;width:48%;margin-bottom:8px;} .C3>div {position:relative;width:31%;margin-bottom:8px;} .C4>div {position:relative;width:24%;margin-bottom:8px;} .C2>.COLSPAN, .C3>.COLSPAN, .C4>.COLSPAN{position:relative;width:100%;margin-bottom:8px;}  .MessageBox{ position:absolute; top:0px; left:0; right:0; margin: auto; width:95%; text-align: center; font-size: 18px; overflow-y:auto; } .MessageBoxBPOK{ position:absolute; left:0; bottom:10px; width:100%; } .MessageBoxBPYESNO{ position:absolute; left:0; bottom:0px; width:100%; }  .TRoundBP { position:relative; width:36px; height:36px; cursor: pointer; border-radius: 24px; flex-shrink: 0; border:3px solid white; box-shadow: 0 4px 12px silver; display:flex; align-items: center; justify-content: center; transition: all 0.3s; } .TRoundBP>div:last-child { position:absolute; bottom: -5px; left:23px; height:12px; min-width: 8px; padding:1px 3px; text-align: center; border-radius: 9px; font-weight: bold; border:2px solid white; display: none; font-size:11px; } .TRoundBP.Blue { background:radial-gradient(at 60% 0%, #00c1f2,#00c1f2,#016fb8); color:white; } .TRoundBP.Gray { background:radial-gradient(at 60% 0%, #c3c6c7,#c3c6c7,#505050); color:#000000; } .TRoundBP.White { background:radial-gradient(at 60% 0%, #fafbfb,#e7eaeb,#969da0); color:#000000; } .TRoundBP.Red { background:radial-gradient(at 60% 0%, #fd017f,#f20079,#b80110); color:white; } .TRoundBP.Green { background:radial-gradient(at 60% 0%, #02c92d,#02c92d,#047e00); color:white; } .TRoundBP:hover{transform:scale(0.9);box-shadow: 0 0 8px silver;} .TRoundBP img,.TRoundBP svg { width:32px; height: auto; transition: all 0.3s; }  @keyframes fadeFromLeft {0% { left:-20px;opacity:0;} 100%{left:0px;opacity:1;}} @-webkit-keyframes fadeFromLeft {0% {left:-20px; opacity:0;} 100%{left:0px;opacity:1;}} @keyframes fadeToLeft {0% { left:0px;opacity:1;} 100%{left:-20px;opacity:0;}} @-webkit-keyframes fadeToLeft {0% {left:0px; opacity:1;} 100%{left:-20px;opacity:0;}} @keyframes fadeFromRight {0% { left:20px;opacity:0;} 100%{left:0px;opacity:1;}} @-webkit-keyframes fadeFromRight {0% {left:20px; opacity:0;} 100%{left:0px;opacity:1;}} @keyframes fadeToRight {0% { left:0px;opacity:1;} 100%{left:20px;opacity:0;}} @-webkit-keyframes fadeToRight {0% {left:0px; opacity:1;} 100%{left:20px;opacity:0;}} @keyframes fadeFromBottom {0% { top:20px;opacity:0;} 100%{top:0px;opacity:1;}} @-webkit-keyframes fadeFromBottom {0% {top:20px; opacity:0;} 100%{top:0px;opacity:1;}} @keyframes fadeToBottom {0% { top:0px;opacity:1;} 100%{top:40px;opacity:0;}} @-webkit-keyframes fadeToBottom {0% {top:0px; opacity:1;} 100%{top:40px;opacity:0;}} @keyframes fadeFromTop {0% { top:-40px;opacity:0;} 100%{top:0px;opacity:1;}} @-webkit-keyframes fadeFromTop {0% {top:-40px; opacity:0;} 100%{top:0px;opacity:1;}} @keyframes fadeToTop {0% { top:0px;opacity:1;} 100%{top:-40px;opacity:0;}} @-webkit-keyframes fadeToTop {0% {top:0px; opacity:1;} 100%{top:-40px;opacity:0;}} @keyframes fadeIn {0% { opacity:0;} 100%{opacity:1;}} @-webkit-keyframes fadeIn {0% { opacity:0;} 100%{opacity:1;}} @keyframes fadeOut {0% { opacity:1;} 100%{ opacity:0;}} @-webkit-keyframes fadeOut { 0% { opacity:1;} 100%{ opacity:0;} } @keyframes blink {0% { opacity:1;} 30%{ opacity:0} 100%{ opacity:1}} @-webkit-keyframes blink{0% { opacity:1;} 30%{ opacity:0} 100%{ opacity:1}} @keyframes bounce {0% { transform:scale(1);} 50%{ transform:scale(1.2);opacity:1} 100%{ transform:scale(1);opacity:1}} @-webkit-keyframes bounce{0% { transform:scale(1);} 50%{ transform:scale(1.2);opacity:1} 100%{ transform:scale(1);opacity:1}} @keyframes spin { 0% { transform:rotate(0deg);} 100%{ transform:rotate(360deg);}} @-webkit-keyframes spin{ 0% { transform:rotate(0deg);} 100%{ transform:rotate(360deg);}} @keyframes hop {0% { margin-top:0} 50%{ margin-top:-5px} 100%{ margin-top:0}} @-webkit-keyframes hop{0% { transform:scale(1);} 50%{ transform:scale(1.2);opacity:1} 100%{ transform:scale(1);opacity:1}} @keyframes pop {0% { opacity:0;transform:scale(1);} 50%{ transform:scale(1.2);opacity:1} 100%{ transform:scale(1);opacity:1}} @-webkit-keyframes pop{0% { opacity:0;transform:scale(1);} 50%{ transform:scale(1.2);opacity:1} 100%{ transform:scale(1);opacity:1}} .revealPop { animation-name: pop; animation-duration: 1s; animation-fill-mode: both; animation-play-state:paused; } .revealFromLeft { animation-name: fadeFromLeft; animation-duration: 0.6s; animation-fill-mode: both; position: relative; animation-play-state:paused; } .revealFromRight { animation-name: fadeFromRight; animation-duration: 0.6s; animation-fill-mode: both; position: relative; animation-play-state:paused; } .revealFromBottom { animation-name: fadeFromBottom; animation-duration: 0.6s; animation-fill-mode: both; position: relative; animation-play-state:paused; } .revealFromTop { animation-name: fadeFromTop; animation-duration: 0.6s; animation-fill-mode: both; position: relative; animation-play-state:paused; }  .TtabPanel{border-radius:10px 10px 0 0; box-shadow: 0 1px 2px silver;display:flex;height:46px;margin: 10px 0;background:linear-gradient(to top,#e8f6ff, #f9fdff,#ffffff,#f9fdff, #e8f6ff);overflow:hidden;} .TtabPanel>div{width:100%;padding:10px;text-align:center;color:#7f91a0; display:flex;align-items:center;justify-content: center; position:relative;height:40px;border-bottom:1px solid #e8f6ff;border-right:1px solid #e1e8f1;cursor: pointer;transition: all 0.2s;box-sizing: border-box} .TtabPanel>div:last-child{border-right:none} .TtabPanel>div:hover{display:flex;align-items:center;justify-content: center; position:relative;height:100%;border-bottom:5px solid #008cff;transition: all 0.2s;box-sizing: border-box} .TtabPanelSelected,.TtabPanel>.TtabPanelSelected{ color:#0083ee;display:flex;align-items:center;justify-content: center;position:relative;height:100%;border-bottom:5px solid rgb(0, 140, 255);transition: all 0.2s;box-sizing: border-box}  .TSlider { position: relative; padding:0; height: 8px; background-color: #b4c1c5; width:100%; box-sizing: border-box; border-radius: 4px; margin:15px 10px; margin-top:30px; cursor: pointer; } .TSliderLabel { position:absolute; font-size: 14px; color:#6D828F; top:-31px; text-align: center; margin: auto; left:0; right: 0; } .TSliderCursor { position: absolute; width:26px; height: 26px; top:0px; left:0%; border-radius: 50%; margin-left:-10px; margin-top:-10px; background-color: #52c0ff; border:1px solid silver; cursor: pointer; border:2px solid white; box-sizing: border-box; }  .TColorPicker { position:relative; } .TColorPicker-Button { position:relative; width:30px; height:30px; border-radius:50%; border:2px solid white; box-shadow: 0 0 8px silver; cursor: pointer; transition: all 0.3s; } .TColorPicker-Button:hover{transform:scale(1.2)} .TColorPicker-Palette { position:absolute; display:none; width:250px; z-index:10000; border-radius: 15px; box-shadow: 0 0 16px silver; padding:10px; background-color: white; font-family: Arial,Arial, Helvetica, sans-serif; transition: all 0.3s; } .TColorPicker-Closer { position:absolute; right:-10px; top:-10px; width:20px; height:20px; background-color: white; border:1px solid silver; border-radius:50%; display:flex; justify-content: center; align-items: center; font-size: 12px; font-weight: bold; transition: all 0.3s; cursor: pointer; color:gray; } .TColorPicker-Closer:hover{transform: scale(1.2);} .TColorPicker-Fav { width:100%; display:flex; justify-content: center; margin-bottom: 5px; flex-wrap: wrap; } .TColorPicker-Fav>div { position:relative; width:19px; height:16px; border-radius: 4px; border:1px solid silver; cursor: pointer; margin:3px; } .TColorPicker-Preview { position:relative; width:30px; height:30px; border-radius: 5px; border:1px solid silver; margin:2px; } .TColorPicker-Selection { display:flex; justify-content: space-between; align-items: center; } .TColorPicker-Selection>input { width:50%; height:18px; font-size: 14px; text-align:center; } .TColorPickerTitle { font-size: 14px; color:#6D828F; width:34px; display:flex; justify-content: center; position:absolute; top:-20px; left:0; }  .icon30 { height:30px; width:auto; margin:0 5px; vertical-align: middle; } .icon40 { height:40px; width:auto; margin:0 5px; vertical-align: middle; } .TNumpadBG { position: fixed; display:none; top:0; left:0; right:0; bottom:0; background:rgba(0, 0, 0, 0.5); justify-content: center; align-content: center; z-index:1000; } .TNumpadConsol { display:block; position:relative; width:320px; height:428px; color:#5c799e; margin:auto; } .TNumpadDisplay { position:absolute; width:100%; height:70px; left:0; top:0; box-sizing: border-box; background-color: #fdba01; background:linear-gradient(#fda501,#fdba01,#fdba01,#fda501); box-shadow: inset 0 -2px 5px #d88527; color:white; text-align:center; font-size: 60px; font-weight: bold; padding:0px 70px; border-radius:20px 20px 0 0; overflow:hidden; text-shadow: 2px 2px 3px #6b2700; } .TNumpadClearBP { position:absolute; right:20px; top:0px; width:70px; display:flex; height:70px; justify-content: center; align-items: center; } .TNumpadKeyPad { position:absolute; display:flex; flex-flow: column; align-items:center; justify-content: space-around; width:100%; left:0; top:70px; background: white; border-radius: 0 0 20px 20px; box-shadow: 0 2px 10px #424242, inset 0 0 10px #dfdfdf; padding:8px; box-sizing: border-box; } .TNumpadKeyPad>div { display:flex; flex-flow: row; width: 100%; align-items:center; justify-content: space-around; } .TNumpadKey { position:relative; width:60px; height:60px; border-radius:30px; margin:8px; display:flex; justify-content: center; align-items: center; font-size:30px; box-sizing: border-box; background-color: #fafcfc; box-shadow: inset 0 0 20px #d8dde0; cursor: pointer; transition: all 0.3s; } .TNumpadOK { position:relative; width:60px; height:60px; border-radius:30px; margin:8px 10px; display:flex; justify-content: center; align-items: center; font-size:25px; color:white; background-color: #28ac25; box-shadow: inset 0 0 20px #035802; cursor: pointer; transition: all 0.3s; } .TNumpadCancel { position:absolute; display:flex; align-items: center; justify-content: center; font-size: 20px; width:120px; bottom:0; left:100px; background: white; height:40px; border-radius: 0 0 20px 20px; box-shadow: 0 2px 10px #424242, inset 0 0 10px #dfdfdf; cursor: pointer; transition: all 0.3s; } .TNumpadKey:hover,.TNumpadOK:hover,.TNumpadCancel:hover{animation: bounce 0.3s;}  .TRibbonCorner { position:absolute; top:-10px; right:-10px; width:94px; height:94px; background-image: url('/ihm/ribbon.png'); color:white; transition: all 0.3s; opacity:1; } .TRibbonCorner>div { position:relative; transform:rotate(45deg); width:100%; overflow: hidden; top:30px; left:10px; text-align:center; } h1{ color:#0066b9; } h2{ color:#fa6541; margin:2px; } h3{ color:#179230; margin:2px; } h4{ color:#019cb8; margin:2px; } h5{ color:#E41150; margin:2px; } .Shadow{box-shadow: 0px 0px 8px rgba(0,0,0,0.2);} .TBGyellow{ background-color: #ffd900; background: linear-gradient(to bottom right, #ffd900, #ffae00); color:brown; } .TBGgreen{ background-color: rgb(0,160,0); background: linear-gradient(to bottom right, #00FF00, rgb(0,100,0)); } .TBGorange{background-color: #D68B00; background: linear-gradient(to bottom right, #FFD900, #CA4005);} .TBGred{ background-color: rgb(160,0,0); background: linear-gradient(to bottom right, #FF0000, rgb(100,0,0));} .TLabel { font-size: 16px; position: relative; } .TCenter{text-align: center;} .TSmallText { font-size: 12px; position: relative; } .TBGWhite { background-color: #f6fcff; background: linear-gradient(to bottom, #fbfeff,#fbfeff, #d0dee6); } .TBGsilver { background-color: #bdc1c3; background: linear-gradient(to bottom right, #cfd4d6,#bdc1c3, #a8b3b9); } .TBGDarkGreen { background-color: #418341; background: linear-gradient(to bottom , #4a954a,#3b773b); } .TBGNavyBlue { background-color: #467195; background: linear-gradient(to bottom , #5886ac,#3f6687); } .TBGHotPink { background-color: #db1c6c; background: linear-gradient( #ff6ddf,#8d0623); } .TBGPetrol { background-color: #028ca5; background: linear-gradient(to bottom , #0cacc9,#003c46); } .TBGTeal { background-color: #27b0cd; background: linear-gradient(to bottom , #4fd8f3,#0a7a90); } .TBGWhiteShadow{background: linear-gradient( white,white,white,white,white, #ECEDEE);} .TBGPink{background-color:#e2389d; background: linear-gradient( #f12ba2,#75035d);} .FBlue {color: #00aeff;} .FDeepblue {color:#0071d0;} .FDarkblue {color:#003f83}; .FRed {color: #E41150; } .FGreen {color: #00a000;} .TBGblue { background: #00aeff; background: linear-gradient(to bottom right, #00aeff,#00aeff, #006699); } .TBGblueDown { background: #00aeff; background: linear-gradient(to bottom, #00aeff,#00aeff, #006699); } .TBGPurple{background-color: #4d1488; background: linear-gradient(to bottom right, #4d1488,#4d1488, #190430);} .TBGLiteblue { background: #edf7ff; background: linear-gradient(to top, white,white, #edf7ff); } .TBGDark { background-color: #1F2329; background: linear-gradient( #6D8EB4,#343F52, #242930,#242930,black); } .TBGDarkDown { background-color: #1F2329; background: linear-gradient(to top, #6D8EB4,#343F52, #242930,#242930,black); } .THelp { position:relative; display:inline-block; width:18px; height:18px; left:5px; top:3px; margin-right:5px; box-sizing: border-box; font-weight: normal; border-radius: 9px; color:rgb(59, 17, 0); background-color: #ffd000; } .THelp::before{ position:absolute; content: "?"; font-weight: bold; text-align: center; width:100%; left:0; line-height: 18px; } .THelp>div { display:none;text-align: justify;position:absolute; top:16px;left:10px;width:240px;border-radius:0px 8px 8px 8px;border: 1px solid #ffc013; line-height: 17px;z-index:120;padding:8px;box-shadow: 0 4px 8px #00000066; background-color: #fffbe9;} .THelp a,.THelp a:visited{color:#ff9100;text-decoration: underline;} .THelp:hover>div{display:block;} .BlueHint {color:#0a62c7;} .YellowHelp {color:#ffd000;} .THint { position:relative; display:inline-block; width:18px; height:18px; left:5px; top:3px; margin-right:5px; box-sizing: border-box; font-weight: normal; border-radius: 9px; color:#0a62c7; background-color: #d4ecff; } .THint::before{ position:absolute; content: "i"; font-weight: bold; text-align: center; width:100%; left:0; line-height: 18px; } .THint>div { display:none;text-align: justify; position:absolute; top:16px;left:10px;width:240px;border-radius:8px;border: 1px solid #a2d8ff;line-height: 17px;z-index:120;padding:8px;box-shadow: 0 4px 8px #00000066;color:#0750a3;background-color: #f1f9ff; } .THint a, .THint a:visited{color:#ff9100;text-decoration: underline;font-weight: bold;} .THint:hover>div{display:block} .THCenter>div {left:50%;margin-left:-120px;border-radius: 8px;} .THLeft>div {left:0;margin-left:-250px; border-radius:8px 0px 8px 8px;} .TImgButton { position:relative; cursor: pointer; transition: all 0.3s; } .TImgButton:hover{opacity: 1;animation: bounce 0.3s;} .TEditionPanel{ position:fixed; width:auto; height:44px; right:5px; top:60px; z-index:20; } .TEditionBP { display:inline-block; width:44px; height:44px; margin:0; padding:0; box-sizing: border-box; cursor: pointer; opacity:0.7; } .TEditionBP:hover{opacity:1} .TEditionBP img { position: absolute; width:auto; height:auto; }  TLabelComponent2 { position: relative; width:100%; margin: 2px 0; box-sizing: border-box; color: #6D828F; font-size: 14px;; transition: all 0.3s; } .TLabelComponent { position: relative; margin:0; margin-top: 10px; margin-bottom: 2px; box-sizing: border-box; font-size: 14px; display: block; color: #6D828F; transition: all 0.3s; } .TLabelComponentFocus { position: relative; margin-top: 10px; margin-bottom: 2px; display: block; font-weight: bold; box-sizing: border-box; transition: all 0.3s; color: #1293CF; transition: all 0.3s; } .TInnerLabel { right:8px; text-align: right; position: absolute; font-size: 16px; display:block; color: #6D828F; margin-top:-25px; } .TInnerLabelOnLeft { left:10px; text-align: left; position: absolute; font-size: 16px; display:block; color: #6D828F; margin-top:-25px; } .T3Column .TInnerLabel{right:23px;}  .TCheckbox { display:none; } .TCheckboxContainer { display:flex; align-items: center; } .TCheckbox + label { float: none; display: inline-block; width: 20px; margin:10px 0; margin-right:5px; cursor: pointer; height: 20px; border-radius: 10px; border: 3px solid rgb(225,225,225); vertical-align: middle; background: linear-gradient(to bottom, white, rgb(240,240,240)); } .TCheckbox + label::after { content: "\2713"; position: relative; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 27px; left: -5px; top: -12px; color: #0048DD; color: rgb(0,164,255); opacity: 0; transition: all 0.3s; } .TCheckbox:checked + label::after { opacity: 1; left: 0px; } .TCheckbox:disabled + label::after{color:#98a1a7;} .TCheckbox:checked + label { border-color: rgba(0,102,204,0.25); box-shadow: none; } .TCheckboxContainer:focus { -webkit-appearance: none; -moz-appearance: none; outline: none; } .TCheckboxContainer:focus .TCheckbox + label { -webkit-appearance: none; -moz-appearance: none; outline: none; box-shadow: 0px 0px 8px rgba(0, 164, 225, 0.5); background: white; }  .TRadio { display: none; } .TRadioC { display:flex; flex-flow: row; align-items: center; justify-content: flex-start; cursor: pointer; margin-bottom: 5px; } .TRadioC>div:nth-child(1) { width:35px; display:flex; align-items: center; justify-content: center; } .TRadioC>div:nth-child(2) { width:90%; box-sizing: border-box; padding-left:10px; } .TRadioC input[type=radio] + label { position: relative; display:flex; font-size: 30px; color: rgb(225,225,225); transition: all 0.3s; } .TRadioC input[type=radio]:checked + label {color: rgb(0,164,255);}  .TSwitch{display:none} .TSwitchBP { position:relative; display:block; width:70px; height:30px; margin:5px; border:1px solid silver; border-radius: 15px; flex-shrink:0; overflow: hidden; z-index:3; } .TSwitchBP>label { width:111px; position:absolute; height:30px; top:0px; left:-41px; transition: all 0.3s; cursor: pointer; } .TSwitchBP>input[type=checkbox]:checked + label { left:0px; } .TSwitchBP>label>div:nth-child(1) { position:absolute; top:0; left:0; width:55px; height:30px; background-color: rgb(0, 160, 235); display:flex; align-items: center; justify-content: center; font-size: 15px; font-weight: bold; color:white; padding-right:14px; box-sizing: border-box; z-index:1; } .TSwitchBP>label>div:nth-child(2) { position:absolute; top:0px; left:57px; padding-left:5px; width:56px; height:30px; background-color: #bbcbd4; display:flex; align-items: center; justify-content: center; font-size: 15px; font-weight: bold; color:white; box-sizing: border-box; z-index:1; } .TSwitchBP>label>div:nth-child(3) { position:absolute; top:0px; left:40px; border-radius: 15px; width:30px; height:30px; background-color: white; box-shadow: 0 0 4px #626364,inset 0 0 6px #adb6be; z-index:2; } .TSwitchBP>input[type=checkbox]:disabled + label{opacity:0.20;filter:grayscale()}  .XTitle { position:absolute; left:0; top:-18px; color:#6D828F; } .XTitleFocus { position:absolute; left:0; top:-18px; font-weight: bold; color:#1293CF; } .XLabel,.XUnit { position:absolute; bottom:11px; color:#6D828F; } .XLabel{left:5px;} .XUnit{right:7px;} .XEdit{  position:relative; height:38px; box-sizing:border-box; transition: all 0.3s; } .TEdit,.TCreditCard,.TPhone,.TEmail,.TNumber { position:relative; box-sizing:border-box; color:#121e2e; border:0; padding:0 5px; height:38px; margin:0; width:100%; border-radius: 10px; font-size:16px; border: 1px solid #cacaca; background: linear-gradient(to bottom, white,white, #edf7ff); } .TEdit,.TEmail ,.TNumber{ font-size: 16px; } .TEmail,.TPhone{border-radius: 10px 20px 20px 10px;} .TEdit:focus ,.TCreditCard:focus, .TPhone:focus, .TEmail:focus,.TNumber:focus,.TCombobox:focus { -webkit-appearance: none; -moz-appearance: none; outline: none; box-shadow: 0px 0px 8px rgba(0, 164, 225, 0.5); background: white; } .TEdit:disabled,.TCreditCard:disabled,.TPhone:disabled,.TEmail:disabled,.TNumber:disabled { background: linear-gradient(to bottom, white,#eef1f3, #dadddf); }  input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0;  } input[type=number] { -moz-appearance: textfield; } input[type=number] { -moz-appearance: textfield; }  .TCreditCard,.TPhone {font-size: 20px;}  .TCombobox { position:relative; height:38px; border-radius: 10px 19px 19px 10px; border: 1px solid #cacaca; background: linear-gradient(to bottom, white,white, #edf7ff); box-sizing:border-box; } .TComboboxStart { position:absolute; right:3px; display: none; animation: hop 1s linear infinite; -webkit-animation: hop 1s linear infinite; } .TComboboxStart img{transform: rotate(180deg);} .TComboboxEnd { position:absolute; right:3px; display: none; animation: hop 1s linear infinite; -webkit-animation: hop 1s linear infinite; } .XComboList { position:fixed; width: 100%; top:-1px; left:-1px; height:auto; max-height:35vh; display: none; z-index:1001; background-color: white; background: linear-gradient(to bottom, white,white, #edf7ff); overflow-y:auto; border:1px solid #94b5ca; box-sizing: content-box; border-radius: 10px 3px 3px 10px; } .XComboSelection { position:absolute; box-sizing: border-box; left:0; top:0; width: 100%; height:100%; display:flex; align-items: center; overflow: hidden; cursor: pointer; padding-left:5px; padding-right:30px; } .XComboSelection>img{height:30px;width:auto;margin-right:5px;} .XComboItem { display:flex; align-items:center; cursor: pointer; color:black; padding:10px 5px; padding-left:10px; } .XComboItem>img{height:30px;width:auto;margin-right:5px;} .XComboDropDown { position:absolute; width:32px; height:32px; right:3px; top:3px; } .XComboDropDown>img{width:100%;height: auto} .XComboItem:hover{background-color: rgb(106, 194, 252);color:white}  .TButtonYesNo { position: relative; display:flex; justify-content: space-around; align-items: center; width:100%; padding:15px 0; } .TButtonYesNo>div { position: relative; justify-content: center; align-items: center; width: 40%; padding:9px 5px; display:flex; border-radius: 20px; box-sizing: border-box; cursor: pointer; font-size: 18px; text-shadow: 2px 1px #0000004d; box-shadow: 0px 0px 5px #00000040; transition: all 0.3s; color: white; } .TButtonYesNo>div:nth-child(1)  { background-color: #00a000; background: linear-gradient(to bottom right, #00FF00, #006400);} .TButtonYesNo>div:nth-child(2)  { background-color: #a00000; background: linear-gradient(to bottom right, #FF0000, #640000);} .TButtonYesNo>div:hover,.TButtonYesNo>div:focus { -webkit-appearance: none; -moz-appearance: none; outline: none; text-decoration:none; box-shadow: inset 0px 0px 10px #0000004d; transform: scale(1.08); }  .TButtonOK { position: relative; float: left; margin: 15px 4%; width: 40%; padding:9px 1%; display:flex; justify-content: center; align-items: center; border-radius: 20px; cursor: pointer; text-decoration:none; background-color: rgb(0,160,0); background: linear-gradient(to bottom right, #00FF00, rgb(0,100,0)); color: white; font-size: 18px; text-shadow: 2px 1px rgba(0,0,0,0.3); box-shadow: 0px 0px 5px rgba(0,0,0,0.25); transition: all 0.3s; }  .TButtonCancel { position: relative; float: left; margin:15px 4%; width: 40%; padding:9px 1%; display:flex; justify-content: center; align-items: center; text-decoration:none; color: white; font-size: 20px; text-shadow: 2px 1px rgba(0,0,0,0.3); border-radius: 18px; cursor: pointer; background-color: rgb(160,0,0); background: linear-gradient(to bottom right, #FF0000, rgb(100,0,0)); box-shadow: 0px 0px 5px rgba(0,0,0,0.5); transition: all 0.3s; } .TButtonCancel:focus,.TButtonOK:focus,.TButton:focus { -webkit-appearance: none; -moz-appearance: none; outline: none; text-decoration:none; box-shadow: inset 0px 0px 10px #0000004d; transform: scale(0.92); }  .TVGroup:first-child { border-radius: 20px 20px 0 0; } .TVGroup:last-child { border-radius: 0 0 20px 20px; } .THGroup:first-child { border-radius: 20px 0 0 20px ; } .THGroup:last-child { border-radius: 0 20px 20px 0; } .TCornerLB { border-radius: 0 0 0 20px ; } .TCornerRB { border-radius: 0 0 20px 0; } .TGroupButton { position: relative; float: none; display: inline-block; margin: 0; padding-left: 15px; padding-right: 15px; line-height: 46px; height: 45px; color: #7E7F81; text-decoration:none; border: none; cursor: pointer; text-align: center; box-sizing: border-box; font-size: 17px; vertical-align: middle; transition: opacity 0.3s, transform 0.3s; } .TGroupButton img { position: relative; margin: auto 5px; height: 70%; width: auto; top:-2px; vertical-align: middle; cursor: pointer; } .TSmallBP { padding-left: 12px; padding-right: 12px; line-height: 36px; height: 36px; font-size: 14px; } .TPopupMenuDownLeft { position: absolute; top:39px; display: none; margin: 0; padding:0; height: auto; z-index:100; left:0; opacity: 0; background-color: white; box-shadow: 0px 3px 6px rgba(0,0,0,0.5); } .TPopupMenuDownRight { position: absolute; top:39px; display: none; margin: 0; padding:0; height: auto; z-index:100; right:0; opacity: 0; background-color: white; box-shadow: 0px 3px 6px rgba(0,0,0,0.5); }  .TButton { position: relative; display: flex; justify-content: center; align-items: center; margin: 5px 0; padding:8px 15px; color: white; background-color: rgb(143, 143, 143); text-decoration:none; border: none; border-radius: 20px; cursor: pointer; text-align: center; box-sizing: border-box; font-size: 18px; box-sizing: border-box; box-shadow: inset 0px 0px 0px #0000004d, 0px 0px 5px #0000004d; transition: all 0.3s; } .TButton img { position: relative; margin-right: 5px; height: 28px; width: auto; cursor: pointer; } .TButtonOK:hover, .TButtonCancel:hover,.TGroupButton:hover,.TButton:hover { text-decoration:none; box-shadow: inset 0px 0px 10px #0000004d; }  .TCopyPasteInfo { position: fixed; display:none; text-align: center; border-radius: 10px; background-color: white; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); z-index: 10000; width:200px; padding:10px; } .TCopyPasteInfo>div { position:relative; display:flex; align-items: center; justify-content: center; width:100%; } .TContextMenu { position: fixed; display:none; border-radius: 10px; background-color: white; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); z-index: 10000; } .TKeys { position:relative; display:flex; align-items: center; justify-content: center; width:40px; height:40px; margin:10px; border:1px solid gray; border-radius: 10px; font-size: 18px; } .TContextMenu>div { position:relative; width:100%; padding:10px; white-space: nowrap; font-size: 14px; cursor: pointer; } .TMemoContainer { position: relative; display: block; width: 100%; margin-bottom:8px;  font-family: Arial, Helvetica, sans-serif; font-size: 16px; box-sizing:border-box; } .TMemoUX { display:flex; position:relative; width:100%; box-sizing: border-box; align-items: center; justify-content: flex-start; flex-wrap: wrap; } .TMemoUX .BP { position:relative; width:32px; height:32px; display:flex; margin:4px 0; align-items: center; justify-content: center; box-shadow: 0 0 0px silver; cursor:pointer; transition:all 0.3s; border-radius:6px } .TMemoUX .BP>img { height:24px; width:auto; } .TMemoUX .BP:hover { box-shadow: 0 0 4px silver; } .TMemoBP { font-family: 'Times New Roman', Times, serif; font-size: 18px; border-radius: 10px; top:2px; position:absolute; vertical-align: middle; width: 35px; height: 35px; text-align: center; color: black; background: linear-gradient(to bottom, white,white, rgb(255,255,240)); border: none; padding:5px; cursor:pointer; -webkit-appearance: none; box-shadow: 0px 0px 4px rgba(70, 31, 31, 0.5); } .TMemoBP:hover{opacity:0.5;} .TMemoTextArea { position: relative; display: inline-block; width: 100%; border-radius: 0 0 5px 10px; border: 1px solid darkgray; background: linear-gradient(to bottom, white,white,white, #edf7ff); overflow-y: scroll; box-sizing:border-box; padding:5px; } .TMemoTextArea:focus { -webkit-appearance: none; -moz-appearance: none; outline: none; box-shadow: 0px 0px 8px rgba(0,164,225,0.5); background: white; } .TMemoScrollDown { position: absolute; width: 19px; height: 19px; bottom:5px; background-image: url("/IHM/scrollDown.png"); opacity: 0; transition: all 0.3s; } .TMemoScrollUp { position: absolute; width: 19px; height: 19px; opacity: 0; background-image: url("/IHM/scrollUp.png"); transition: all 0.3s; }  .TPopup { visibility:hidden; } .QuickStart { position: fixed; top: 0; left: 0; right:0; bottom:0; margin: 0; padding: 0; background: rgba(0, 0, 0, 0.5); display: none; z-index: 1000; } .QuickStart>div { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto auto; display:flex; align-items: center; justify-content: space-around; flex-flow: column; background-color: white; box-shadow: 0 0 25px black; border-radius: 25px; width:310px; height:300px; padding:10px; box-sizing: border-box; } .TPopupBG { position: fixed; top: 0px; left: 0px; right:0; bottom:0; margin: 0; padding: 0; background: rgba(0, 0, 0, 0.5); display: none; z-index: 300; } .TPopupWindow { max-width: 100%; max-height: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto auto; background-color: white; border-radius: 10px ; border: 1px solid black; box-sizing: border-box; box-shadow: 0 0 50px rgba(0, 0, 0, 0.7); overflow: hidden; } .TPopupHeader { position:relative; display: inline-block; width: 100%; height: 40px; background-color: #071721; background: linear-gradient(to bottom , #2F343F, #1F2329,#1F2329,black); background: linear-gradient(to bottom , #0097d4,#004b6a); margin: 0; vertical-align: middle; box-shadow: 0 5px 5px rgba(0,0,0,0.25); font-size: 25px; box-sizing: border-box; color: white; } .TPopupHeader img { position:relative; height:34px; width:auto; vertical-align: middle; padding:0; margin:0; top:-4px; left:-5px; } .TPopupTitle { position: absolute; font-size: 25px; color: white; left: 14px; top: 4px; } .TPopupCloseBP { position: absolute; font-family: Arial, Helvetica, sans-serif; font-size: 25px; font-weight: bold; cursor: pointer; color: white; right: 18px; top: 1px; opacity: 0.5; transition:all 0.3s; } .TPopupCloseBP:hover{opacity: 1;} .TPopupContainer { position:relative; display: inline-block; height:92%; top:0; left:0; right:0; width: 100%; padding: 10px; box-sizing: border-box; }  .TAccordion { position: relative; width: 100%; padding: 0; overflow: hidden; border:none; } .TAccordionHeader { position: relative; display:flex; align-items: center; justify-content: space-between; width: 100%; height: 36px; cursor: pointer; padding: 0 10px; font-size: 16px; margin: 0; z-index: 2; box-sizing: border-box; transition: all 0.3s; } .TAccordionHeader>div:nth-child(1) { position: relative; width:100%; display:flex; align-items: center; justify-content: flex-start; } .TAccordionHeader>div:nth-child(1)>* { margin:0 4px; } .TAccordionHeader>div:nth-child(1) img { height: 20px; width:auto; margin-right:8px;} .TAccordionHeader:hover {opacity:0.75;} .TAccordionBP { position: relative; width: 20px; height: 20px; margin:0; padding:0; cursor: pointer; flex-shrink: 0; border-radius: 50%; box-shadow: inset 0 0 3px #767d8a; transition: all 0.3s; box-sizing: border-box; } .TAccordionBP>div:nth-child(2){ position: absolute; margin:auto; padding:0; left:0; top:0; right:0; bottom:0; width:12px; height: 2px; opacity: 1; transition: all 0.1s ; background-color: #3174a8; } .TAccordionBP>div:nth-child(1){ position: absolute; margin:auto; left:0; padding:0; top:0; right:0; bottom:0; height:12px; width: 2px; opacity: 1; background-color: #3174a8; } .TAccordion>div:nth-child(2) { width: 100%; height: 0px; position: relative; margin: 0; padding:0; overflow: hidden; transition: all 0.3s; box-sizing: border-box; }  .TDate { position: relative; width: 120px; border: 1px solid #C4D9DF; height: 38px; font-size: 15px; padding: 0 5px; border-radius: 10px; border-width: 1px; background: linear-gradient(to bottom, white,white, #edf7ff); transition: all 0.3s } .TDate:focus { -webkit-appearance: none; -moz-appearance: none; outline: none; box-shadow: 0px 0px 8px rgba(0,164,225,0.5); background: white; }  .TCalPopupBG { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; margin: 0; padding: 0; background: rgba(0,0,0,0.70); display:none; z-index: 1000; } .TCalPopup { position: absolute; width: 100%; height: 100%; max-width:320px; max-height:426px; top: 0; left: 0; bottom: 0; right: 0; padding: 0; margin: auto auto; background-color: white; transition: all 0.3s; overflow: hidden; border-radius: 10px; border: 1px solid rgba(0,0,0,0.5); box-shadow: 0 0 20px black; box-sizing:border-box; } .TCalHeader { position: absolute; left: 0; top: 0; margin: 0; padding: 0; width: 100%; cursor: pointer; height: 10%; background-color: #26e3eb; overflow: hidden; } .TCalHYear { background-color: #26e3eb; background: linear-gradient(to bottom, #26e3eb,#26e3eb,#26e3eb, #1fbac1); } .TCalHMonth { background-color: #00baff; background: linear-gradient(to top, #00baff,#00baff,#00baff, #0098d1); } .TCal_SELECZOOM { position: absolute; width: 60px; top: 50%; left: 50%; margin: -255px 0 0 -35px; padding: 5px; height: 32px; font-size: 22px; line-height: 30px; color: white; font-weight: bold; text-align: center; vertical-align: middle; border-radius: 21px; visibility: hidden; text-shadow: 0 0 5px rgba(0,0,0,0.3); border: 1px solid rgba(0,0,0,0.5); box-shadow: 0 0 20px black; } .TCalBanner { position: absolute; left: 0; right: 0; top: 0; margin: 0 auto; padding: 0; width: 180px; height: 100%; overflow: hidden; } .TCalBannerSlot { position: relative; display: inline-block; font-size: 120%; line-height: 250%; color: white; text-align: center; vertical-align: middle; opacity: 0.5; padding: 0; margin: 0; width: 60px; height: 100%; } .TCalBannerSelectionSlot { position: relative; display: inline-block; font-size: 150%; line-height: 200%; color: white; font-weight: bold; text-align: center; vertical-align: middle; padding: 0; margin: 0; width:60px; height: 100%; text-shadow: 0 0 5px rgba(0,0,0,0.3); } .TCalBannerSelection { position: absolute; left: 0; right: 0; top: 0; margin: 0 auto; padding: 0; width: 60px; height: 100%; overflow: hidden; } .TCalButton { position: absolute; top: 25%; margin: 0; padding: 0; text-align: center; vertical-align: middle; height: 100%; cursor: pointer; width: 12.5%; } .TCalList { position: relative; left:0px; top:0px; height: 100%; margin: 0; padding: 0; } .TCalcontent { position: absolute; width: 96%; margin: 0; margin-left: 3%; top: 23%; height: 67%; display:flex; justify-content: space-around; align-items: center; flex-wrap: wrap; -ms-flex-wrap: wrap; padding: 0; } .TCalDays { position: relative; display:flex; justify-content: center; align-items: center; font-size: 85%; font-weight: bold; color: #fea100; border-bottom: 1px solid #fea100; padding: 0; margin-bottom: 2px; width: 14.2%; height: 6%; } .TCalDateOFF { position: relative; display:flex; justify-content: center; align-items: center; color: #87b8c2; padding: 0; margin: 0; width: 14.2%; height: 15.2%; box-sizing: border-box; } .TCalDate { position: relative; display:flex; justify-content: center; align-items: center; font-size: 150%; color: #87b8c2; padding: 0; margin: 0; width: 14.2%; line-height: 150%; height: 15.2%; border-radius: 25%; cursor: pointer; box-sizing: border-box; } .TCalDate:hover { background-color: rgba(33, 233, 255, 0.1); font-size: 170%; } .TCalDateToday { position: relative; display:flex; justify-content: center; align-items: center; font-size: 150%; font-style: italic; border: 1px solid rgba(0, 154, 168, 0.5); color: #87b8c2; background-color: rgba(33, 233, 255, 0.1); padding: 0; margin: 0; width: 14.2%; cursor: pointer; height: 15.2%; border-radius:50%; box-sizing: border-box; } .TCalDateSeleceted { position: relative; display:flex; justify-content: center; align-items: center; font-size: 160%; font-weight: bold; color: white; cursor: pointer; border: 1px solid #0096ff; background-color: #26e3eb; background: linear-gradient(to bottom right, #26e3eb,#0096ff); padding: 0; margin: 0; border-radius: 25%; width: 14.2%; height: 15.2%; box-sizing: border-box; box-shadow: 0 0 6px rgba(0,0,0,0.3); } .TCalBpToday { position: absolute; bottom: 6%; right: 0; left: 0; width: 25%;  display:flex; justify-content: center; align-items: center; padding: 5px; margin: 0 auto; cursor: pointer; font-size: 100%; font-style: italic;  border-radius: 15px; border: 1px solid #00c8da; color: #00c8da; transition: all 0.3s; } .TCalBpToday:hover { color: white; background-color: #00c8da; } .TCalFooter { position: absolute; bottom: 0; left: 0; width: 100%; height: 11%; box-shadow: 0 -2px 5px rgba(0,0,20,0.3); } .TCalBpSet { position: absolute; float: left; cursor: pointer; margin: 0; font-size: 170%; font-weight: bold; vertical-align: middle; text-align: right; color: white; right: 5%; text-shadow: 1px 1px black; top: 9%; } .TCalBpCancel { position: relative; float: left; cursor: pointer; margin: 0; font-size: 150%; vertical-align: middle; text-align: center; color: white; left: 5%; top: 14%; text-shadow: 1px 1px black; } .TCalBpClear { position: relative; float: left; cursor: pointer; margin: 0; font-size: 150%; vertical-align: middle; text-align: center; color: white; left: 20%; top: 14%; text-shadow: 1px 1px black; }  .TDateTimeDIV { position: relative; height:38px; top:1px; margin-top:30px; margin-bottom:5px; width:130px; text-align: left; } .TTime { position: absolute; width: 110px; border: 1px solid #C4D9DF; height: 38px; font-size: 16px; padding: 0 5px; border-radius: 10px 20px 20px 10px; border-width: 1px; background: linear-gradient(to bottom, white,white, #edf7ff); transition: all 0.3s } .TTime:focus { -webkit-appearance: none; -moz-appearance: none; outline: none; box-shadow: 0px 0px 8px rgba(0,164,225,0.5); background: white; }   .TimePickerListPopup { position: absolute; display: none; top:33px; width: 119px; height: 140px; padding: 0; margin: 0; z-index: 150; border-radius: 0px 0px 10px 10px; border: 1px solid rgb(235,235,255); overflow-y: scroll; background: linear-gradient(to bottom, white,white, #edf7ff); box-shadow: 0px 2px 6px #b8e3f3; } .TimePickerListPopup div { font-size: 18px; width: 100%; padding-top: 5px; text-align: center; vertical-align: middle; height: 25px; cursor: pointer; color: #888888; } .TimePickerListPopup div:hover { font-weight: bold; color: white; background-color: #53d0f5; box-shadow: inset 0px 0px 5px rgba(0,148,250,0.25),0px 0px 6px rgba(0,43,95,0.3); }  .TimePickerTouchPopupBG { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; margin: 0; padding: 0; background: rgba(0,0,0,0.70); display: none; z-index: 1000; } .TimePickerTouchPopup { position: absolute; width: 100%; max-width: 400px; height: 180px; bottom: 10%; left: 0; right: 0; padding: 0; margin: auto auto; background-color: white; transition: all 0.3s; overflow: hidden; border-radius: 10px; border: 1px solid rgba(0,0,0,0.5); box-shadow: 0 0 20px black; } .TimePickerTouchColumn { position: relative; display: block; text-align: center; float: left; width: 33.33%; height: 140px; margin: 0; padding: 0; overflow: hidden; background: linear-gradient(to bottom,#b9deec,white,white,white,white,white,white,#b9deec); box-shadow: inset 0px 0px 5px rgba(0,148,250,0.25); } .TimePickerTouchList { position: absolute; padding: 0; margin: 0; width: 100%; text-align: center; font-size: 28px; vertical-align: middle; line-height: 40px; color: #cdd7e3; } .TimePickerTouchSelectionZone { position: absolute; width: 100%; height: 40px; margin: 0; padding: 0; left: 0px; top: 50px; overflow: hidden; background-color: #8ce5ff; background: linear-gradient(to bottom, #53d0f5,#8ce5ff,#8ce5ff,#53d0f5); box-shadow: inset 0px 0px 5px rgba(0,148,250,0.25),0px 0px 6px rgba(0,43,95,0.3); z-index: 1100; } .TimePickerTouchSelection { position: absolute; padding: 0; margin: 0; width: 100%; top: 0px; font-weight: bold; font-size: 38px; vertical-align: middle; line-height: 40px; color: white; text-shadow: 0px 0px 5px rgba(0,84,150,0.4); } .TimePickerTouchFooter { position: relative; float: left; width: 100%; height: 40px; margin: 0; padding: 0; bottom: 0; text-align: center; background-color: #00aeff; background: linear-gradient(to bottom right, #00aeff,#00aeff, #006699); box-shadow: 0 -4px 5px rgba(0,0,20,0.3); } .TimePickerTouchBPSet { position: absolute; float: left; padding: 5px; margin: 0; font-size: 28px; font-weight: bold; vertical-align: middle; text-align: right; color: white; right: 20px; text-shadow: 1px 2px black; top: 0px; } .TimePickerTouchBPCancel { position: relative; float: left; padding: 5px; margin: 0; font-size: 28px; vertical-align: middle; text-align: center; color: white; left: 20px; top: 0px; text-shadow: 1px 2px black; }  .TRibbon { top:50px; left:180px; height:40px; box-sizing: border-box; padding-left:20px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); right:0; z-index: 90; position:fixed; background-color:#0e6b70; background: linear-gradient(to bottom, #25b3bd,#25b3bd, #0e6b70); overflow-x:auto; overflow-y:hidden; -webkit-transition: all 0.3s; -moz-transition:all 0.3s; transition:all 0.3s; } .TRibbon button { position: relative; float: none; display: inline-block; margin: 0; bottom:0; padding-left: 15px; padding-right: 15px; line-height: 40px; height: 40px; color:rgba(255, 255, 255, 0.7); text-decoration:none; border: none; font-weight: bold; cursor: pointer; text-align: center; font-size: 17px; vertical-align: middle; background-color: white; background: linear-gradient(to bottom, #25b3bd,#25b3bd, rgb(14, 107, 112)); transition: all 0.3s; -webkit-appearance: none; -moz-appearance: none; outline: none; } .TRibbonEnd { height:40px; position: fixed; right:0; top:50px; width:30px; z-index: 20; opacity: 0; background-color: rgba(255, 255, 255, 0.842); background: linear-gradient(to left , rgba(37, 181, 189, 1),rgba(37, 181, 189, 0)); } .TRibbonBegin { height:40px; position: fixed; left:180px; top:50px; width:30px; z-index: 20; opacity: 0; background-color: rgba(255, 255, 255, 0.842); background: linear-gradient(to right , rgba(37, 181, 189, 1),rgba(37, 181, 189, 0)); } .TRibbon button:disabled { color:rgb(255, 255, 255); border-radius: 0 0 15px 15px; background: linear-gradient(to bottom , #0097d4,#004b6a); box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.3); cursor: default; } .TRibbon button:hover {color: white;} .TRibbon img { position: relative; margin: auto 5px; height: 80%; width: auto; top:-2px; vertical-align: middle; cursor: pointer; }  .TSubRibbon { top:0px; left:180px; height:40px; box-sizing: border-box; padding-left:20px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); right:0; z-index: 89; position:fixed; background-color:#b8c8d1d8; background: linear-gradient(to bottom, #f1faff,#f1faff, #c1d2db); overflow-x:auto; overflow-y:hidden; -webkit-transition: all 0.3s; -moz-transition:all 0.3s; transition:all 0.3s; } .TSubRibbon button { position: relative; float: none; display: inline-block; margin: 0; bottom:0; padding-left: 15px; padding-right: 15px; line-height: 40px; height: 40px; color:rgba(68, 72, 80, 0.616); text-decoration:none; border: none; font-weight: bold; cursor: pointer; text-align: center; font-size: 17px; vertical-align: middle; background-color:#b8c8d1d8; background: linear-gradient(to bottom, #f1faff,#f1faff, #c1d2db); transition: all 0.3s; -webkit-appearance: none; -moz-appearance: none; outline: none; } .TSubRibbonEnd { height:40px; position: fixed; right:0; top:0; width:30px; z-index: 20; opacity: 0; background-color: rgba(255, 255, 255, 0.842); background: linear-gradient(to right, #f1faff00, #c1d2db); transition: all 0.3s; } .TSubRibbonBegin { height:40px; position: fixed; left:180px; top:90px; width:30px; z-index: 20; opacity: 0; background: linear-gradient(to left, #f1faff00, #c1d2db); } .TSubRibbon button:disabled { color:rgb(0, 63, 131); border-radius: 0 0 15px 15px; background: linear-gradient(to bottom , #dff7fd,#bee1ec); box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.3); cursor: default; } .TSubRibbon button:hover { color:rgb(0, 63, 131); } .TSubRibbon img { position: relative; margin: auto 5px; height: 80%; width: auto; top:-2px; vertical-align: middle; cursor: pointer; }   @media screen and (max-width:1024px) { .TCreditCard,.TPhone {font-size: 18px;} } @media screen and (max-width:769px) { .TMemoBP { display: none; } .C2:not(.Fix):not(.Frozen)>div, .C3:not(.Fix):not(.Frozen)>div, .C4:not(.Fix):not(.Frozen)>div {width:100%;} .TLabelComponent, .TLabelComponentFocus { font-size: 15px; } .TRibbonBegin{left:55px;} .TRibbon{padding-left:0; left:55px} .TSubRibbon {left:55px;} .TRibbonEnd{ opacity: 1; } .TSubRibbon{padding-left:0;} .TSubRibbonEnd{ opacity: 1; } } @media screen and (max-width:601px) { .T3Column {right:8px;} .hidden4Mobile{display:none;} .XComboItem{font-size:115%;} .TRibbon { top:45px; left:0px; } .TSubRibbon {left:0px;} .TRibbonBegin { left:0; top:45px; } .TRibbonEnd{ top:45px;} .TSubRibbonBegin { left:0; top:85px; } }  @media screen and (max-width:320px) { .TButton, .TButtonOK, .TButtonCancel { font-size: 15px; } .C2:not(.Frozen)>div, .C3:not(.Frozen)>div, .C4:not(.Frozen)>div {width:100%;} .TLabelComponent, .TLabelComponentFocus, .TLabel { font-size: 15px; } .TPopupTitle { font-size: 20px; line-height: 28px; } }  @media screen and (max-width:240px) { .TRibbon,.TRibbonBegin,.TRibbonEnd{top:30px;} .TButton, .TButtonOK, .TButtonCancel { font-size: 18px; } .TPopupTitle { font-size: 18px; line-height: 30px; } } @media print { .THelp,THint {display: none} .NOPrint {display: none} }