/* Style for demo RadDateTimeControl */ /* Importing syles */ @import url('lib.css'); /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++ SART - RESET RADDATETIME PICKER CONTROL +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ /* ------ START ----- COMMMON STYLES ------------------------ */ /* border */ /* Class : .RadPicker_Metro */ .RadPicker_Metro, /* Class : .RadInput_Metro */ .RadPicker_Metro .RadInput_Metro, /* Class : .riTextBox */ .RadPicker_Metro .RadInput_Metro .riTextBox, /* Class : .rcSelect */ .RadPicker_Metro .RadInput_Metro .rcSelect, .RadPicker_Metro .RadInput_Metro a, .RadPicker_Metro .RadInput_Metro a:hover, .RadPicker_Metro .RadInput_Metro a:focus, .RadPicker_Metro .RadInput_Metro a:active, /* Class : rcCalPopup && rcTimePopup => tag element a */ .RadPicker_Metro .RadInput_Metro a, .RadPicker_Metro .RadInput_Metro a:hover, .RadPicker_Metro .RadInput_Metro a:focus, .RadPicker_Metro .RadInput_Metro a:active, /* Class : .rcCalPopupOpen */ .RadPicker_Metro.rcCalPopupOpen .RadInput, /* Class : .rcTimePopupOpen */ .RadPicker_Metro.rcTimePopupOpen .RadInput, /* Class : .rcMYPopupOpen */ .RadPicker_Metro.rcMYPopupOpen .RadInput, /* Class : .RadCalendar */ .RadCalendarPopup .RadCalendar_Metro, /* Class : .rcTitlebar ( this is a div container ) */ .RadCalendarPopup .RadCalendar_Metro .rcTitlebar, /* Class : .rcFastPrev */ .RadCalendarPopup .RadCalendar_Metro .rcTitlebar .rcFastPrev, /* Class : .rcPrev */ .RadCalendarPopup .RadCalendar_Metro .rcTitlebar .rcPrev, /* Class : .t-button */ .RadCalendarPopup .RadCalendar_Metro .rcTitlebar .t-button, .RadCalendarPopup .RadCalendar_Metro .rcTitlebar .t-button:hover, .RadCalendarPopup .RadCalendar_Metro .rcTitlebar .t-button:active, /* Class : .rcNextButtons */ .RadCalendarPopup .RadCalendar_Metro .rcTitlebar .rcNextButtons, /* Class : .t-button .rcNext .t-button */ .RadCalendarPopup .RadCalendar_Metro .rcTitlebar .rcNext .t-button, /* Class : .rcMain ( body of RadCalendar ) */ .RadCalendarPopup .RadCalendar_Metro .rcMain, /* Class : .rcMainTable ( calendar table ) */ .RadCalendarPopup .RadCalendar_Metro table, /* Class : .rcWeek th element tag */ .RadCalendarPopup .RadCalendar_Metro .rcWeek th, /* Class : .rcRow */ .RadCalendarPopup .RadCalendar_Metro table tbody tr.rcRow, /* Class : .rcRow */ .RadCalendarPopup .RadCalendar_Metro table tbody tr.rcRow, .RadCalendarPopup .RadCalendar_Metro table tbody tr.rcRow th, .RadCalendarPopup .RadCalendar_Metro table tbody tr.rcRow td, .RadCalendarPopup .RadCalendar_Metro table tbody tr.rcRow td.rcHover, .RadCalendarPopup .RadCalendar_Metro table tbody tr.rcRow td.rcSelected .RadCalendarPopup .RadCalendar_Metro tr.rcRow a, .RadCalendarPopup .RadCalendar_Metro tr.rcRow span, /* Class : .RadCalendarTimeView_Metro || .RadCalendarTimeView ( table tag ) */ .RadCalendarPopup .RadCalendarTimeView_Metro, .RadCalendarPopup .RadCalendarTimeView_Metro td, .RadCalendarPopup .RadCalendarTimeView_Metro th, .RadCalendarPopup .RadCalendarTimeView_Metro tr td.rcHover a, .RadCalendarPopup .RadCalendarTimeView_Metro tr td.rcSelected a, /* Class : .RadCalendarMonthView_Metro */ .RadCalendarFastNavPopup .RadCalendarMonthView_Metro, .RadCalendarFastNavPopup .RadCalendarMonthView_Metro th, .RadCalendarFastNavPopup .RadCalendarMonthView_Metro td, .RadCalendarFastNavPopup .RadCalendarMonthView_Metro a, .RadCalendarFastNavPopup .RadCalendarMonthView_Metro a:hover, .RadCalendarFastNavPopup .RadCalendarMonthView_Metro a:focus, .RadCalendarFastNavPopup .RadCalendarMonthView_Metro a:active, .RadCalendarFastNavPopup .RadCalendarMonthView_Metro .rcSelected a, .RadCalendarFastNavPopup .RadCalendarMonthView_Metro .rcButtons a, .RadCalendarFastNavPopup .RadCalendarMonthView_Metro .rcButtons a:hover { border : solid 0em transparent; border-color : none; border-style : none; } /* ------- / border */ /* margin : 0em; */ /* Class : .RadPicker_Metro */ .RadPicker_Metro, /* Class : .RadInput_Metro */ /*.RadPicker_Metro .RadInput_Metro,*/ /* Class : .riTextBox */ .RadPicker_Metro .RadInput_Metro .riTextBox, /* Class : .RadCalendar */ .RadCalendarPopup .RadCalendar_Metro, /* Class : .rcFastPrev */ .RadCalendarPopup .RadCalendar_Metro .rcTitlebar .rcFastPrev, /* Class : .rcPrev */ .RadCalendarPopup .RadCalendar_Metro .rcTitlebar .rcPrev, /* Class : .t-button */ .RadCalendarPopup .RadCalendar_Metro .rcTitlebar .t-button, /* Class : .rcNextButtons */ .RadCalendarPopup .RadCalendar_Metro .rcTitlebar .rcNextButtons, /* Class : .t-button .rcNext .t-button */ .RadCalendarPopup .RadCalendar_Metro .rcTitlebar .rcNextButtons .t-button, /* Class : .t-button .rcNext .t-button */ .RadCalendarPopup .RadCalendar_Metro .rcTitlebar .rcNext .t-button, /* Class : .rcTtile */ .RadCalendarPopup .RadCalendar_Metro .rcTitlebar .rcTitle, /* Class : .rcMain ( body of RadCalendar ) */ .RadCalendarPopup .RadCalendar_Metro .rcMain, /* Class : .rcMainTable ( calendar table ) */ .RadCalendarPopup .RadCalendar_Metro table , /* Class : .RadCalendarMonthView */ .RadCalendarFastNavPopup .RadCalendarMonthView_Metro { margin : 0em 0em; } /* ------- / margin: 0em; */ /* padding : 0em; */ /* Class : .RadPicker_Metro */ .RadPicker_Metro, /* Class : .RadInput_Metro */ /*.RadPicker_Metro .RadInput_Metro,*/ /* Class : rcCalPopup && rcTimePopup => tag element a */ .RadPicker_Metro .RadInput_Metro a , /* Class : .RadCalendar */ .RadCalendarPopup .RadCalendar_Metro, /* Class : .rcTitlebar ( this is a div container ) */ .RadCalendarPopup .RadCalendar_Metro .rcTitlebar, /* Class : .rcFastPrev */ .RadCalendarPopup .RadCalendar_Metro .rcTitlebar .rcFastPrev, /* Class : .rcPrev */ .RadCalendarPopup .RadCalendar_Metro .rcTitlebar .rcPrev, /* Class : .t-button */ .RadCalendarPopup .RadCalendar_Metro .rcTitlebar .t-button, /* Class : .rcNextButtons */ .RadCalendarPopup .RadCalendar_Metro .rcTitlebar .rcNextButtons, /* Class : .t-button .rcNext .t-button */ .RadCalendarPopup .RadCalendar_Metro .rcTitlebar .rcNext .t-button, /* Class : .rcTtile */ .RadCalendarPopup .RadCalendar_Metro .rcTitlebar .rcTitle, /* Class : .rcMain ( body of RadCalendar ) */ .RadCalendarPopup .RadCalendar_Metro .rcMain, /* Class : .rcMainTable ( calendar table ) */ .RadCalendarPopup .RadCalendar_Metro table, /* Class : .rcRow */ .RadCalendarPopup .RadCalendar_Metro table tbody tr.rcRow, /* Class : .rcRow */ .RadCalendarPopup .RadCalendar_Metro table tbody tr.rcRow, .RadCalendarPopup .RadCalendar_Metro table tbody tr.rcRow th, .RadCalendarPopup .RadCalendar_Metro table tbody tr.rcRow td, .RadCalendarPopup .RadCalendar_Metro tr.rcRow a, .RadCalendarPopup .RadCalendar_Metro tr.rcRow span, .RadCalendarPopup .RadCalendarTimeView_Metro th, /* Class : .RadCalendarTimeView_Metro || .RadCalendarTimeView ( table tag ) */ .RadCalendarPopup .RadCalendarTimeView_Metro tr td.rcHover a, /* Class : .RadCalendarMonthView_Metro */ { padding : 0em 0em; } /* ------- / padding : 0em */ /* background : transparent; */ /* Class : .RadPicker_Metro */ .RadPicker_Metro, /* Class : .riTextBox */ .RadPicker_Metro .RadInput_Metro .riTextBox, /* Class .rcCalPopup */ .RadPicker_Metro .RadInput_Metro .rcSelect, /* Class : rcCalPopup && rcTimePopup => tag element a */ .RadPicker_Metro .RadInput_Metro a, .RadPicker_Metro .RadInput_Metro a:hover, .RadPicker_Metro .RadInput_Metro a:focus, .RadPicker_Metro .RadInput_Metro a:active, /* Class : .rcCalPopupOpen */ .RadPicker_Metro.rcCalPopupOpen .RadInput, /* Class : .rcTimePopupOpen */ .RadPicker_Metro.rcTimePopupOpen .RadInput, /* Class : .rcMYPopupOpen */ .RadPicker_Metro.rcMYPopupOpen .RadInput, /* Class : .RadCalendar */ .RadCalendarPopup .RadCalendar_Metro, /* Class : .rcTitlebar ( this is a div container ) */ .RadCalendarPopup .RadCalendar_Metro .rcTitlebar, /* Class : .rcFastPrev */ .RadCalendarPopup .RadCalendar_Metro .rcTitlebar .rcFastPrev, .RadCalendarPopup .RadCalendar_Metro .rcTitlebar .rcFastPrev:hover, /* Class : .rcPrev */ .RadCalendarPopup .RadCalendar_Metro .rcTitlebar .rcPrev, .RadCalendarPopup .RadCalendar_Metro .rcTitlebar .rcPrev:hover, /* Class : .t-button */ .RadCalendarPopup .RadCalendar_Metro .rcTitlebar .t-button, .RadCalendarPopup .RadCalendar_Metro .rcTitlebar .t-button:hover, .RadCalendarPopup .RadCalendar_Metro .rcTitlebar .t-button:active, /* Class : .rcNextButtons */ .RadCalendarPopup .RadCalendar_Metro .rcTitlebar .rcNextButtons, /* Class : .t-button .rcNext .t-button */ .RadCalendarPopup .RadCalendar_Metro .rcTitlebar .rcNextButtons .t-button, .RadCalendarPopup .RadCalendar_Metro .rcTitlebar .rcNextButtons .t-button:hover, /* Class : .rcMain ( body of RadCalendar ) */ .RadCalendarPopup .RadCalendar_Metro .rcMain, /* Class : .rcMainTable ( calendar table ) */ .RadCalendarPopup .RadCalendar_Metro table, /* Class : .rcWeek th element tag */ .RadCalendarPopup .RadCalendar_Metro .rcWeek th, /* Class : .rcWeek th element tag */ .RadCalendarPopup .RadCalendar_Metro .rcWeek th, /* Class : .rcRow */ .RadCalendarPopup .RadCalendar_Metro table tbody tr.rcRow, .RadCalendarPopup .RadCalendar_Metro table tbody tr.rcRow th, .RadCalendarPopup .RadCalendar_Metro table tbody tr.rcRow td, /* Class : .RadCalendarTimeView_Metro || .RadCalendarTimeView ( table tag ) */ .RadCalendarPopup .RadCalendarTimeView_Metro, .RadCalendarPopup .RadCalendarTimeView_Metro th, .RadCalendarPopup .RadCalendarTimeView_Metro tr.rcHeader .RadCalendarPopup .RadCalendarTimeView_Metro tr td, .RadCalendarPopup .RadCalendarTimeView_Metro tr td.rcHover a, .RadCalendarPopup .RadCalendarTimeView_Metro tr td.rcSelected a, /* Class : .RadCalendarMonthView_Metro */ .RadCalendarFastNavPopup .RadCalendarMonthView_Metro, .RadCalendarFastNavPopup .RadCalendarMonthView_Metro a, .RadCalendarFastNavPopup .RadCalendarMonthView_Metro a:hover, .RadCalendarFastNavPopup .RadCalendarMonthView_Metro a:focus, .RadCalendarFastNavPopup .RadCalendarMonthView_Metro a:active, .RadCalendarFastNavPopup .RadCalendarMonthView_Metro .rcSelected a, .RadCalendarFastNavPopup .RadCalendarMonthView_Metro .rcButtons a, .RadPicker_Metro.rcCalPopupOpen .RadInput.RadInput_Metro, .RadPicker_Metro.rcTimePopupOpen .RadInput.RadInput_Metro { background-color : transparent; } /* ------- / background : transparent; */ /* ------- / display : none; */ /* content : ""; */ /* Class .rcCalPopup */ .RadPicker_Metro .rcSelect a.rcCalPopup::before, /* DatePciker icon */ /* Class : .rcTimePopup */ .RadPicker_Metro .rcSelect a.rcTimePopup::before, /* TimePicker icon */ /* Class : span t-font-icon t-i-arrow-double-60-left */ .RadCalendarPopup .RadCalendar_Metro .rcTitlebar .rcFastPrev .t-font-icon::before, /* Class : span t-font-icon t-i-arrow-left */ .RadCalendarPopup .RadCalendar_Metro .rcTitlebar .rcPrev .t-font-icon::before, /* Class : .t-button */ .RadCalendarPopup .RadCalendar_Metro .rcTitlebar .t-button::before, /* Class : .t-font-icon t-i-arrow-right */ .RadCalendarPopup .RadCalendar_Metro .rcTitlebar .rcNext .t-font-icon::before, /* Class : .rcFastNext span t-font-icon t-i-arrow-double-60-right */ .RadCalendarPopup .RadCalendar_Metro .rcTitlebar .rcFastNext .t-font-icon::before { content : ""; } /* ------- / content : ""; */ /* width :0em ; */ /* Class : .RadPicker_Metro */ .RadPicker_Metro, /* Class : .riTextBox */ /*.RadPicker_Metro .RadInput_Metro .riTextBox,*/ /* Class : span t-font-icon t-i-arrow-double-60-left */ .RadCalendarPopup .RadCalendar_Metro .rcTitlebar .rcFastPrev .t-font-icon, /* Class : span t-font-icon t-i-arrow-left */ .RadCalendarPopup .RadCalendar_Metro .rcTitlebar .rcFastPrev .t-font-icon, /* Class : span t-font-icon t-i-arrow-double-60-right */ .RadCalendarPopup .RadCalendar_Metro .rcTitlebar .rcFastNext .t-font-icon, /* Class : .t-font-icon t-i-arrow-right */ .RadCalendarPopup .RadCalendar_Metro .rcTitlebar .rcNext .t-font-icon /* Class : .rcMain ( body of RadCalendar ) */ /* .RadCalendarPopup .RadCalendar_Metro .rcMain */ /* Class : .rcRow */ .RadCalendarPopup .RadCalendar_Metro tr.rcRow a, .RadCalendarPopup .RadCalendar_Metro tr.rcRow span /* Class : .RadCalendarMonthView_Metro */ /* .RadCalendarFastNavPopup .RadCalendarMonthView_Metro a, .RadCalendarFastNavPopup .RadCalendarMonthView_Metro .rcButtons a */ { width : 0em; } /* ------- / width : 0em; */ /* border-radius : 0px */ /* Class : .riTextBox */ .RadPicker_Metro .RadInput_Metro .riTextBox, .RadPicker_Metro .RadInput_Metro a, .RadPicker_Metro .RadInput_Metro a:hover, .RadPicker_Metro .RadInput_Metro a:focus, .RadPicker_Metro .RadInput_Metro a:active, /* Class : .RadCalendar */ .RadCalendarPopup .RadCalendar_Metro, /* Class : .rcFastPrev */ .RadCalendarPopup .RadCalendar_Metro .rcTitlebar .rcFastPrev, /* Class : .rcRow */ .RadCalendarPopup .RadCalendar_Metro tr.rcRow a, .RadCalendarPopup .RadCalendar_Metro tr.rcRow span, /* Class : .RadCalendarTimeView_Metro || .RadCalendarTimeView ( table tag ) */ .RadCalendarPopup .RadCalendarTimeView_Metro td a, /* Class : .RadCalendarMonthView_Metro */ .RadCalendarFastNavPopup .RadCalendarMonthView_Metro, .RadCalendarFastNavPopup .RadCalendarMonthView_Metro th, .RadCalendarFastNavPopup .RadCalendarMonthView_Metro td, .RadCalendarFastNavPopup .RadCalendarMonthView_Metro a, .RadCalendarFastNavPopup .RadCalendarMonthView_Metro a:hover, .RadCalendarFastNavPopup .RadCalendarMonthView_Metro a:focus, .RadCalendarFastNavPopup .RadCalendarMonthView_Metro a:active, .RadCalendarFastNavPopup .RadCalendarMonthView_Metro .rcSelected a, .RadCalendarFastNavPopup .RadCalendarMonthView_Metro .rcButtons a, /* Class : .RadCalendarMonthView_Metro */ .RadCalendarFastNavPopup .RadCalendarMonthView_Metro a, .RadCalendarFastNavPopup .RadCalendarMonthView_Metro .rcButtons a { border-radius : 0px; -webkit-border-radius : 0px; /* for Google Chrome browser */ -ms-border-radius : 0px; /* for Internet Edge && IE browser */ -moz-border-radius : 0px; /* for Mozilla FireFox browser */ -o-border-radius : 0px; /* for Opera browser */ } /* -------- / border-radius : 0px */ /* box-shadow : none; */ /* Class : .riTextBox */ .RadPicker_Metro .RadInput_Metro .riTextBox, .RadPicker_Metro .RadInput_Metro a, .RadPicker_Metro .RadInput_Metro a:hover, .RadPicker_Metro .RadInput_Metro a:focus, .RadPicker_Metro .RadInput_Metro a:active, /* Class : .RadCalendar */ .RadCalendarPopup .RadCalendar_Metro, /* Class : .rcTitlebar ( this is a div container ) */ .RadCalendarPopup .RadCalendar_Metro .rcTitlebar { box-shadow : none; } /* -------- / box-shadow : none; */ /* ---------- END ---------------- / COMMMON STYLES ----------------------- */ /* Class : .RadPikcer_Metro */ .RadPicker_Metro { color: inherit; font-family: 'Roboto', sans-serif; /*line-height: 0em;*/ } /* Class : .RadInput_Metro */ .RadInput_Metro { border-width: 0em; } /* Class : .riTextBox */ .RadPicker_Metro .RadInput_Metro .riTextBox { color : #000; vertical-align : auto; font-size : 12px; box-shadow: none; -webkit-box-shadow: none; /* for Google Chrome browser */ -ms-box-shadow: none; /* for Internet Edge and IE browser */ -moz-box-shadow: none; /* for Mozilla FireFox Chrome browser */ -o-box-shadow: none; /* for Opera Chrome browser */ } /* Class : .RadCalendar */ .RadCalendarPopup .RadCalendar_Metro { /*line-height: 0em;*/ } /* Class : .rcTitlebar ( this is a div container ) */ .RadCalendarPopup .RadCalendar_Metro .rcTitlebar { text-align: unset; color : #000; } /* Class : span t-font-icon t-i-arrow-double-60-left */ .RadCalendarPopup .RadCalendar_Metro .rcTitlebar .rcFastPrev .t-font-icon, /* Class : span t-font-icon t-i-arrow-left */ .RadCalendarPopup .RadCalendar_Metro .rcTitlebar .rcFastPrev .t-font-icon, /* Class : .t-font-icon t-i-arrow-right */ .RadCalendarPopup .RadCalendar_Metro .rcTitlebar .rcNext .t-font-icon::before, /* Class : span t-font-icon t-i-arrow-double-60-right */ .RadCalendarPopup .RadCalendar_Metro .rcTitlebar .rcFastNext .t-font-icon, /* Class : .rcWeek th element tag */ .RadCalendarPopup .RadCalendar_Metro .rcWeek th { font-size : 12px; color : #000; text-align: unset; /*/*height: 0em;*/*/ vertical-align: unset; } /* Class : .t-button */ .RadCalendarPopup .RadCalendar_Metro .rcTitlebar .t-button, /* Class : .RadCalendarMonthView */ .RadCalendarFastNavPopup .RadCalendarMonthView_Metro a, .RadCalendarFastNavPopup .RadCalendarMonthView_Metro .rcButtons a { line-height: 0em; outline: none; font-family: 'Roboto', sans-serif; font-size: 12px; text-align: unset; } /* Class : .rcTtile ( this is a span html tag ) */ .RadCalendarPopup .RadCalendar_Metro .rcTitlebar .rcTitle { font-size : 12px; color : #000; display : none ; } /* Class : .rcRow */ .RadCalendarPopup .RadCalendar_Metro table tbody tr.rcRow, .RadCalendarPopup .RadCalendar_Metro table tbody tr.rcRow th, .RadCalendarPopup .RadCalendar_Metro table tbody tr.rcRow td, .RadCalendarPopup .RadCalendar_Metro table tbody tr.rcRow td.rcHover, .RadCalendarPopup .RadCalendar_Metro table tbody tr.rcRow td.rcSelected { text-align: upset; } /* Class : .RadCalendarTimeView_Metro || .RadCalendarTimeView ( table tag ) */ .RadCalendarPopup .RadCalendarTimeView_Metro { line-height: 0; text-align: upset; } .RadCalendarPopup .RadCalendarTimeView_Metro tr td.rcHover a, .RadCalendarPopup .RadCalendarTimeView_Metro tr td.rcSelect a { color: #000; font-size: 12px; font-family: 'Roboto', sans-serif; } /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++ END - RESET RADDATETIMR PICKER CONTROL ++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ /* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ START - NEW STYLE DESIGN RADDATETIME PICKER CONTROL +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ /* DateTime */ .container .RadPicker { /* border: solid 1px; */ height: 24px !important; max-height: 24px !important; border-radius: .25em; min-width: 50px; margin-top: .15em; margin-bottom: .15em; } .container .RadPicker > .RadInput { border: solid 1px #C3C0C0; /*PC3*/ padding: 0px 0px 0px 0px !important; width: 100%; border-radius: .25em; font-size: 14px !important; height: 23px !important; max-height: 23px !important; display: flex; justify-content: space-between; align-items: center; background-color:white; /*border: solid 1px blue;*/ } /* Class: .rcCalPopupOpen when is clicked tag */ .container .RadPicker.rcCalPopupOpen > .RadInput { border: solid 1px #C3C0C0 !important; /* PC3 */ } .container .RadPicker .RadInput.RadInputHovered { background: transparent; } .container .RadPicker .RadInput input[type="text"].riTextBox { /*border: solid 1px #000000 !important;*/ height: 23px !important; padding: 0em 0em; padding-left: .15em; min-width: 25px; width: 100%; font-size: 14px; } .container .RadPicker .RadInput div.rcSelect { /*border: solid 1px cyan;*/ width: 50px !important; max-width: 50px !important; height: 21px; position: initial !important; color: #000000; display: flex; justify-content: flex-end; align-items: center; flex-direction: row; } .container .RadPicker .RadInput div.rcSelect a { color: var(--cw-color-primary); font-size: 12px; width: 24px; height: 21px; margin-top: 1px; display: flex; justify-content: center; align-items: center; } .container .RadPicker.rcCalPopupOpen .RadInput div.rcSelect a, .container .RadDateTimePicker.rcTimePopupOpen .RadInput div.rcSelect a.rcTimePopup { background: transparent !important; } /* Date */ .container .RadPicker .RadInput div.rcSelect a.rcCalPopup::before { font-family: "NewCwIcons"; content: "\ea1b"; } .container .RadPicker .RadInput div.rcSelect a.rcTimePopup::before { font-family: "NewCwIcons"; content: "\ea35"; } /* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ END - NEW STYLE DESIGN RADDATETIME PICKER CONTROL +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ /*----------------------------------------------------------------------------------------------------------------------------------------*/ /* ++++++++++++++++++++++++++++++++++++++++++++++++++++ Start: .RadCalendar ++++++++++++++++++++++++++++++++++++++++++++++++++ */ /* Class : .RadCalendar */ html .RadCalendarPopup .RadCalendar { border: solid 1px var(--cw-color-primary); border-radius: .25em; box-shadow: 0em 0em .25em var(--cw-color-shadow); } /* Class : .rcTitlebar : Title bar of the calendar */ html .RadCalendarPopup .RadCalendar > div.rcTitlebar { display: flex; flex-direction: row; justify-content: space-between; align-items: center; color: #fff; height: 20px !important; min-height: 20px !important; max-height: 20px !important; } html .RadCalendarPopup .RadCalendar > div.rcTitlebar .t-button.rcFastPrev, html .RadCalendarPopup .RadCalendar > div.rcTitlebar .t-button.rcPrev, html .RadCalendarPopup .RadCalendar > div.rcTitlebar div.rcNextButtons .t-button.rcFastNext, html .RadCalendarPopup .RadCalendar > div.rcTitlebar div.rcNextButtons .t-button.rcNext { width: 25px; height: 25px; padding: 0px 0px !important; display: flex; justify-content: center; align-items: center; } /* Changing order elements of title bar with flexbox */ html .RadCalendarPopup .RadCalendar > div.rcTitlebar .t-button.rcFastPrev { /*border: solid 1px green;*/ order: 1; } html .RadCalendarPopup .RadCalendar > div.rcTitlebar .t-button.rcFastPrev span.t-font-icon.t-i-arrow-double-60-left::before { font-family: "NewCwIcons"; content: "\ea2e"; font-size: 14px; color: #000000; } html .RadCalendarPopup .RadCalendar > div.rcTitlebar .t-button.rcPrev { /*border: solid 1px blue;*/ order: 2; } html .RadCalendarPopup .RadCalendar > div.rcTitlebar .t-button.rcPrev span.t-font-icon.t-i-arrow-left::before { font-family: "NewCwIcons"; content: "\ea07"; clear: both; font-size: 14px; color: #000000; } html .RadCalendarPopup .RadCalendar > div.rcTitlebar span.rcTitle { /*border: solid 1px cyan;*/ order: 3; min-width: 200px; display: flex; justify-content: center; align-items: center; } html .RadCalendarPopup .RadCalendar > div.rcTitlebar div.rcNextButtons { /* border: solid 1px violet; */ order: 4; width: auto; } html .RadCalendarPopup .RadCalendar > div.rcTitlebar div.rcNextButtons .t-button { width: 25px; height: 25px; /*border: solid 1px green;*/ color: #000000; } html .RadCalendarPopup .RadCalendar > div.rcTitlebar div.rcNextButtons .t-button.rcFastNext span.t-font-icon.t-i-arrow-double-60-right::before { font-family: "NewCwIcons"; content: "\ea05"; clear: both; font-size: 14px; color: #000000; } html .RadCalendarPopup .RadCalendar > div.rcTitlebar div.rcNextButtons .t-button.rcNext span.t-font-icon.t-i-arrow-right::before { font-family: "NewCwIcons"; content: "\ea03"; clear: both; font-size: 14px; color: #000000; } html .RadCalendarPopup .RadCalendar > div.rcTitlebar, html .RadCalendarPopup .RadCalendar > div.rcMain table thead { background: #C3C0C0; /* Pc3 */ } html .RadCalendarPopup .RadCalendar > div.rcMain table thead tr.rcWeek { } html .RadCalendarPopup .RadCalendar > div.rcMain table thead tr.rcWeek th { text-align: center; vertical-align: middle; } html .RadCalendarPopup .RadCalendar > div.rcMain table.rcMainTable tbody { background: #ffffff; } html .RadCalendarPopup .RadCalendar > div.rcMain table.rcMainTable tbody tr td, html .RadCalendarPopup .RadCalendar > div.rcMain table.rcMainTable tbody tr th { vertical-align: middle; text-align: center; } html .RadCalendarPopup .RadCalendar > div.rcMain table.rcMainTable tbody tr.rcRow { /* border: solid 1px green; */ } html .RadCalendarPopup .RadCalendar > div.rcMain table tbody tr th { /* border: solid 1px green; */ } html .RadCalendarPopup .RadCalendar > div.rcMain table.rcMainTable tbody tr.rcRow td.rcOtherMonth { /* border: solid 1px green; */ } html .RadCalendarPopup .RadCalendar > div.rcMain table.rcMainTable tbody tr.rcRow td.rcHover { } html .RadCalendarPopup .RadCalendar > div.rcMain table.rcMainTable tbody tr.rcRow td.rcHover a { color: #ffffff; background: var(--cw-color-primary) !important; } html .RadCalendarPopup .RadCalendar > div.rcMain table.rcMainTable tbody tr.rcRow td.rcSelected a { background: var(--cw-color-primary) !important; /* PC2 */ } html .RadCalendarPopup .RadCalendar > div.rcMain table.rcMainTable tbody tr.rcRow td a { /* border: solid 1px green; */ font-size: 14px; font-family: 'Roboto Flex Variable', 'Roboto', sans-serif; border: solid 1px var(--cw-color-primary); border-radius: 100%; } /* Table RadCalendar navigation dates */ html .RadCalendarFastNavPopup { background: #ffffff; border-radius: .25em; box-shadow: 0em 0em .25em rgba(54, 142, 224,.7); } html .RadCalendarFastNavPopup table.RadCalendarMonthView tbody { background: #ffffff; } html .RadCalendarFastNavPopup table.RadCalendarMonthView tr td { padding: .25em; } html .RadCalendarFastNavPopup table.RadCalendarMonthView tr td:hover a { color: var(--cw-color-primary); } html .RadCalendarFastNavPopup table.RadCalendarMonthView tr td a { /*border: solid 1px green;*/ padding: .45em; font-family: 'Roboto Flex Variable', 'Roboto', sans-serif; font-size: 14px !important; color: #000000; display: flex; justify-content: center; align-items: center; } html .RadCalendarFastNavPopup table.RadCalendarMonthView tr td.rcSelected a { color: var(--cw-color-primary); } /* Buttons */ html .RadCalendarFastNavPopup table.RadCalendarMonthView tr td.rcButtons { /*border: solid 1px;*/ text-align: left; } html .RadCalendarFastNavPopup table.RadCalendarMonthView tr td.rcButtons:hover a { color: #000000; } html .RadCalendarFastNavPopup table.RadCalendarMonthView tr td.rcButtons a { display: inline-block; margin-top: 4px; } html .RadCalendarFastNavPopup table.RadCalendarMonthView tr td.rcButtons a:hover { background: transparent; } /* Today */ html .RadCalendarFastNavPopup table.RadCalendarMonthView tr td.rcButtons a#rcMView_Today:hover { color: var(--cw-color-primary); } html .RadCalendarFastNavPopup table.RadCalendarMonthView tr td.rcButtons a#rcMView_Today::after { } /* Ok */ html .RadCalendarFastNavPopup table.RadCalendarMonthView tr td.rcButtons a#rcMView_OK:hover { color: var(--cw-color-primary); } html .RadCalendarFastNavPopup table.RadCalendarMonthView tr td.rcButtons a#rcMView_OK::after { } /* Cancel */ html .RadCalendarFastNavPopup table.RadCalendarMonthView tr td.rcButtons a#rcMView_Cancel:hover { color: var(--cw-color-primary); } html .RadCalendarFastNavPopup table.RadCalendarMonthView tr td.rcButtons a#rcMView_Cancel::after { } /* Prev and next button s*/ html .RadCalendarFastNavPopup table.RadCalendarMonthView tr td#rcMView_PrevY a, html .RadCalendarFastNavPopup table.RadCalendarMonthView tr td#rcMView_NextY a { font-size: 0em !important; display: inline-block; } html .RadCalendarFastNavPopup table.RadCalendarMonthView tr td#rcMView_PrevY a::before { font-family: "NewCwIcons"; content: "\ea07"; clear: both; font-size: 14px; color: #000000; margin-left: 6px; } html .RadCalendarFastNavPopup table.RadCalendarMonthView tr td#rcMView_PrevY:hover a::before { color: var(--cw-color-primary); } html .RadCalendarFastNavPopup table.RadCalendarMonthView tr td#rcMView_NextY a::before { font-family: "NewCwIcons"; content: "\ea03"; clear: both; font-size: 14px; color: #000000; margin-left: 6px; } html .RadCalendarFastNavPopup table.RadCalendarMonthView tr td#rcMView_NextY:hover a::before { color: var(--cw-color-primary); } /* ------------------------------------------------------- / Table RadCalendar navigation dates */ /* ++++++++++++++++++++++++++++++++++++++++++++++++++++ End: .RadCalendar ++++++++++++++++++++++++++++++++++++++++++++++++++ */ /* ++++++++++++++++++++++++++++++++++++++++++++++++++++ Start: .RadCalendarTimeView ++++++++++++++++++++++++++++++++++++++++++++++++++ */ html .RadCalendarPopup .RadCalendarTimeView { border: solid 1px var(--cw-color-primary); border-radius: .25em; box-shadow: 0em 0em .25em rgba(54, 142, 224,.7); } html .RadCalendarPopup .RadCalendarTimeView tbody { background: #fff; } html .RadCalendarPopup .RadCalendarTimeView tbody tr { padding-top: 1em; padding-bottom: 1em; } html .RadCalendarPopup .RadCalendarTimeView tbody tr th.rcHeader { background: #C3C0C0; /* PC3 */ font-family: 'Roboto Flex Variable', 'Roboto', sans-serif; font-size: 14px; color: #000000; padding: 1em 1em; } html .RadCalendarPopup .RadCalendarTimeView tbody tr td { } html .RadCalendarPopup .RadCalendarTimeView tbody tr td a { font-family: 'Roboto Flex Variable', 'Roboto', sans-serif; font-size: 14px; color: #000000; padding: .45em; } html .RadCalendarPopup .RadCalendarTimeView tbody tr td.rcHover a, html .RadCalendarPopup .RadCalendarTimeView tbody tr td:hover a { transform: scale(1) !important; font-family: 'Roboto Flex Variable', 'Roboto', sans-serif; color: #000; font-size: 14px; } /* Selected hour */ html .RadCalendarPopup .RadCalendarTimeView tbody tr td.rcSelected a { color: var(--cw-color-primary); } /* ++++++++++++++++++++++++++++++++++++++++++++++++++++ End: .RadCalendarTimeView ++++++++++++++++++++++++++++++++++++++++++++++++++ */ /* .rgEditForm */ .container .RadGrid td div.rgEditForm table tbody tr td .RadPicker, .container .RadGrid .rgMasterTable thead tr td div.rgEditForm table tbody tr td .RadPicker { margin-top: -0.25em; } .container .RadGrid td div.rgEditForm table tbody tr td .RadPicker div.RadInput input.riTextBox, .container .RadGrid .rgMasterTable thead tr td div.rgEditForm table tbody tr td .RadPicker div.RadInput input.riTextBox { width: 100%; height: 36px; float: right; padding-left: 1.15em; margin-top: -0.008em; border: solid 0em transparent !important; border-top-left-radius: 25px; border-bottom-left-radius: 25px; } /* ------------------------------------------------------------------------------------------------------------------------------------------------------------ / .rgEditForm */ /* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ END - NEW STYLE DESIGN RADDATETIME PICKER CONTROL ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ @media only screen and ( mmax-width: 100px) { /* Class : .RadPikcer */ .RadPicker, div .RadPicker { width: 100px; /*border: solid 1px cyan;*/ } } /* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ START - TRANSITION ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ /* Class : .RadPicker */ .RadPicker, .RadPicker .RadInput a.rcCalPopup, .RadPicker .RadInput a.rcTimePopup, .RadPicker .RadInput .rcSelect, /* Class : .rcFastPrev */ .RadCalendarPopup .RadCalendar .rcTitlebar .rcFastPrev, /* Class : .rcPrev */ .RadCalendarPopup .RadCalendar .rcTitlebar .rcPrev, /* Class : .rcFastNext */ .RadCalendarPopup .RadCalendar .rcTitlebar .rcNextButtons .rcFastNext, /* Class : .rcNext */ .RadCalendarPopup .RadCalendar .rcTitlebar .rcNextButtons .rcNext, /* Class : .rcHover*/ .RadCalendarPopup .RadCalendar .rcMain .rcMainTable tr.rcRow td.rcHover a, /* Class : .rcRow */ .RadCalendarPopup .RadCalendar .rcMain .rcMainTable tr.rcRow th:hover .RadCalendarPopup .RadCalendar .rcMain .rcMainTable tr.rcRow td a, .RadCalendarPopup .RadCalendar .rcMain .rcMainTable tr.rcRow th, /* Class : .RadCalendarMonthView_Metro */ .RadCalendarFastNavPopup .RadCalendarMonthView_Metro a, .RadCalendarFastNavPopup .RadCalendarMonthView_Metro .rcSelected a, .RadCalendarFastNavPopup .RadCalendarMonthView_Metro .rcButtons a, .RadCalendarFastNavPopup .RadCalendarMonthView tr td.rcButtons a#rcMView_Today, .RadCalendarFastNavPopup .RadCalendarMonthView tr td.rcButtons a#rcMView_OK, .RadCalendarFastNavPopup .RadCalendarMonthView tr td.rcButtons a#rcMView_Cancel, .RadCalendarFastNavPopup .RadCalendarMonthView tr td.rcButtons #rcMView_Today::after, .RadCalendarFastNavPopup .RadCalendarMonthView tr td.rcButtons #rcMView_OK::after, .RadCalendarFastNavPopup .RadCalendarMonthView tr td.rcButtons #rcMView_Cancel::after, /* Class : .RadCalendarTimeView ( table html tag ) */ .RadCalendarPopup .RadCalendarTimeView tr td a { transition : all 0.2s ease-out; } /* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ END - TRANSITION +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */