/*------------------------------------------------------------------ [TABLE OF CONTENTS] => font => anim => transform => border radius => flex => ellipsis => image => box-shadow => common utils -------------------------------------------------------------------*/ /*========================================================================== => font ==========================================================================*/ /*========================================================================== => anim ==========================================================================*/ /*========================================================================== => transform ==========================================================================*/ /*========================================================================== => border radius ==========================================================================*/ /*========================================================================== => flex ==========================================================================*/ /*========================================================================== => ellipsis ==========================================================================*/ /*========================================================================== => image ==========================================================================*/ /*========================================================================== => box-shadow ==========================================================================*/ /*========================================================================== => box-shadow ==========================================================================*/ :root { --header-height: 80px; --header-scroll-height: 70px; --sideBarWidth: 320px; --clr-white: #fff; --clr-black: #232323; --clr-blackbody: #343434; --clr-grey: #666666; --clr-greylig: #E1E1E1; --clr-dblue: #033864; --clr-blue: #007FFF; --clr-bluelig: #E8F5FF; --clr-green: #22C55E; --clr-greenlig: #E3FAEC; --clr-yellow: #D57900; --clr-yellowlig: #FFF6DD; --clr-purple: #7718D5; --clr-purplelig: rgba(219, 183, 255, 0.3); --clr-red: #E14634; --clr-redlig: #FFE1E1; --clr-border: #F5F5F5; --fs128: clamp(42px, 6.67vw, 128px); --fs92: clamp(40px, 6vw, 92px); --fs90: clamp(36px, 4.6vw, 90px); --fs88: clamp(36px, 4.17vw, 88px); --fs80: clamp(34px, 4.17vw, 80px); --fs72: clamp(32px, 3.75vw, 72px); --fs64: clamp(26px, 3.33vw, 64px); --fs60: clamp(26px, 3.13vw, 60px); --fs56: clamp(26px, 2.92vw, 56px); --fs48: clamp(24px, 2.5vw, 48px); --fs42: clamp(24px, 2.19vw, 42px); --fs40: clamp(24px, 2.08vw, 40px); --fs36: clamp(24px, 1.88vw, 36px); --fs32: clamp(20px, 1.67vw, 32px); --fs30: clamp(20px, 1.56vw, 30px); --fs28: clamp(18px, 1.46vw, 28px); --fs26: clamp(16px, 1.35vw, 26px); --fs24: clamp(16px, 1.25vw, 24px); --fs22: clamp(16px, 1.15vw, 22px); --fs20: clamp(16px, 1.04vw, 20px); --fs18: clamp(16px, 0.94vw, 18px); --fs16: 16px; --fs14: 14px; --fs12: 12px; --pad60: clamp(24px, 3.13vw, 60px); --spc280: clamp(24px, 14.58vw, 280px); --spc200: clamp(36px, 10.42vw, 200px); --spc40120: clamp(40px, 6.25vw, 120px); --spc4080: clamp(40px, 4.17vw, 80px); --spc4060: clamp(40px, 3.13vw, 60px); --spc2460: clamp(24px, 3.13vw, 60px); --spc60: 60px; --spc48: clamp(24px, 2.5vw, 48px); --spc40: clamp(24px, 2.08vw, 40px); --spc32: clamp(24px, 1.67vw, 32px); --spc24: 24px; --br30: clamp(14px, 1.56vw, 30px); --br24: clamp(14px, 1.25vw, 24px); --br20: clamp(14px, 1.04vw, 20px); } /*------------------------------------------------------------------ [TABLE OF CONTENTS] => Color => Common => Fonts => Custom Grid => Global Styles => buttons => Form Elements => Radio Small => Checkbox Small => Modal => Accordion => Most common => Animation -------------------------------------------------------------------*/ @font-face { font-family: 'Inter'; font-style: italic; font-weight: 100; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCM3FwrK3iLTcvneQg7Ca725JhhKnNqk4j1ebLhAm8SrXTc2dphjQ.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 100; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCM3FwrK3iLTcvneQg7Ca725JhhKnOKk4j1ebLhAm8SrXTc2dphjQ.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 100; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCM3FwrK3iLTcvneQg7Ca725JhhKnOCk4j1ebLhAm8SrXTc2dphjQ.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 100; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCM3FwrK3iLTcvneQg7Ca725JhhKnOak4j1ebLhAm8SrXTc2dphjQ.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 100; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCM3FwrK3iLTcvneQg7Ca725JhhKnOqk4j1ebLhAm8SrXTc2dphjQ.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 100; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCM3FwrK3iLTcvneQg7Ca725JhhKnPKk4j1ebLhAm8SrXTc2dphjQ.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 100; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCM3FwrK3iLTcvneQg7Ca725JhhKnPqk4j1ebLhAm8SrXTc2dphjQ.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 200; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCM3FwrK3iLTcvneQg7Ca725JhhKnNqk4j1ebLhAm8SrXTcWdthjQ.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 200; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCM3FwrK3iLTcvneQg7Ca725JhhKnOKk4j1ebLhAm8SrXTcWdthjQ.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 200; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCM3FwrK3iLTcvneQg7Ca725JhhKnOCk4j1ebLhAm8SrXTcWdthjQ.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 200; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCM3FwrK3iLTcvneQg7Ca725JhhKnOak4j1ebLhAm8SrXTcWdthjQ.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 200; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCM3FwrK3iLTcvneQg7Ca725JhhKnOqk4j1ebLhAm8SrXTcWdthjQ.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 200; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCM3FwrK3iLTcvneQg7Ca725JhhKnPKk4j1ebLhAm8SrXTcWdthjQ.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 200; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCM3FwrK3iLTcvneQg7Ca725JhhKnPqk4j1ebLhAm8SrXTcWdthjQ.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 300; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCM3FwrK3iLTcvneQg7Ca725JhhKnNqk4j1ebLhAm8SrXTch9thjQ.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 300; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCM3FwrK3iLTcvneQg7Ca725JhhKnOKk4j1ebLhAm8SrXTch9thjQ.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 300; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCM3FwrK3iLTcvneQg7Ca725JhhKnOCk4j1ebLhAm8SrXTch9thjQ.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 300; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCM3FwrK3iLTcvneQg7Ca725JhhKnOak4j1ebLhAm8SrXTch9thjQ.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 300; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCM3FwrK3iLTcvneQg7Ca725JhhKnOqk4j1ebLhAm8SrXTch9thjQ.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 300; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCM3FwrK3iLTcvneQg7Ca725JhhKnPKk4j1ebLhAm8SrXTch9thjQ.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 300; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCM3FwrK3iLTcvneQg7Ca725JhhKnPqk4j1ebLhAm8SrXTch9thjQ.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCM3FwrK3iLTcvneQg7Ca725JhhKnNqk4j1ebLhAm8SrXTc2dthjQ.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCM3FwrK3iLTcvneQg7Ca725JhhKnOKk4j1ebLhAm8SrXTc2dthjQ.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCM3FwrK3iLTcvneQg7Ca725JhhKnOCk4j1ebLhAm8SrXTc2dthjQ.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCM3FwrK3iLTcvneQg7Ca725JhhKnOak4j1ebLhAm8SrXTc2dthjQ.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCM3FwrK3iLTcvneQg7Ca725JhhKnOqk4j1ebLhAm8SrXTc2dthjQ.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCM3FwrK3iLTcvneQg7Ca725JhhKnPKk4j1ebLhAm8SrXTc2dthjQ.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCM3FwrK3iLTcvneQg7Ca725JhhKnPqk4j1ebLhAm8SrXTc2dthjQ.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCM3FwrK3iLTcvneQg7Ca725JhhKnNqk4j1ebLhAm8SrXTc69thjQ.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCM3FwrK3iLTcvneQg7Ca725JhhKnOKk4j1ebLhAm8SrXTc69thjQ.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCM3FwrK3iLTcvneQg7Ca725JhhKnOCk4j1ebLhAm8SrXTc69thjQ.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCM3FwrK3iLTcvneQg7Ca725JhhKnOak4j1ebLhAm8SrXTc69thjQ.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCM3FwrK3iLTcvneQg7Ca725JhhKnOqk4j1ebLhAm8SrXTc69thjQ.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCM3FwrK3iLTcvneQg7Ca725JhhKnPKk4j1ebLhAm8SrXTc69thjQ.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCM3FwrK3iLTcvneQg7Ca725JhhKnPqk4j1ebLhAm8SrXTc69thjQ.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 600; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCM3FwrK3iLTcvneQg7Ca725JhhKnNqk4j1ebLhAm8SrXTcB9xhjQ.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 600; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCM3FwrK3iLTcvneQg7Ca725JhhKnOKk4j1ebLhAm8SrXTcB9xhjQ.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 600; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCM3FwrK3iLTcvneQg7Ca725JhhKnOCk4j1ebLhAm8SrXTcB9xhjQ.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 600; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCM3FwrK3iLTcvneQg7Ca725JhhKnOak4j1ebLhAm8SrXTcB9xhjQ.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 600; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCM3FwrK3iLTcvneQg7Ca725JhhKnOqk4j1ebLhAm8SrXTcB9xhjQ.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 600; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCM3FwrK3iLTcvneQg7Ca725JhhKnPKk4j1ebLhAm8SrXTcB9xhjQ.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 600; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCM3FwrK3iLTcvneQg7Ca725JhhKnPqk4j1ebLhAm8SrXTcB9xhjQ.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCM3FwrK3iLTcvneQg7Ca725JhhKnNqk4j1ebLhAm8SrXTcPtxhjQ.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCM3FwrK3iLTcvneQg7Ca725JhhKnOKk4j1ebLhAm8SrXTcPtxhjQ.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCM3FwrK3iLTcvneQg7Ca725JhhKnOCk4j1ebLhAm8SrXTcPtxhjQ.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCM3FwrK3iLTcvneQg7Ca725JhhKnOak4j1ebLhAm8SrXTcPtxhjQ.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCM3FwrK3iLTcvneQg7Ca725JhhKnOqk4j1ebLhAm8SrXTcPtxhjQ.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCM3FwrK3iLTcvneQg7Ca725JhhKnPKk4j1ebLhAm8SrXTcPtxhjQ.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCM3FwrK3iLTcvneQg7Ca725JhhKnPqk4j1ebLhAm8SrXTcPtxhjQ.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 800; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCM3FwrK3iLTcvneQg7Ca725JhhKnNqk4j1ebLhAm8SrXTcWdxhjQ.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 800; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCM3FwrK3iLTcvneQg7Ca725JhhKnOKk4j1ebLhAm8SrXTcWdxhjQ.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 800; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCM3FwrK3iLTcvneQg7Ca725JhhKnOCk4j1ebLhAm8SrXTcWdxhjQ.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 800; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCM3FwrK3iLTcvneQg7Ca725JhhKnOak4j1ebLhAm8SrXTcWdxhjQ.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 800; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCM3FwrK3iLTcvneQg7Ca725JhhKnOqk4j1ebLhAm8SrXTcWdxhjQ.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 800; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCM3FwrK3iLTcvneQg7Ca725JhhKnPKk4j1ebLhAm8SrXTcWdxhjQ.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 800; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCM3FwrK3iLTcvneQg7Ca725JhhKnPqk4j1ebLhAm8SrXTcWdxhjQ.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 900; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCM3FwrK3iLTcvneQg7Ca725JhhKnNqk4j1ebLhAm8SrXTccNxhjQ.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 900; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCM3FwrK3iLTcvneQg7Ca725JhhKnOKk4j1ebLhAm8SrXTccNxhjQ.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 900; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCM3FwrK3iLTcvneQg7Ca725JhhKnOCk4j1ebLhAm8SrXTccNxhjQ.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 900; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCM3FwrK3iLTcvneQg7Ca725JhhKnOak4j1ebLhAm8SrXTccNxhjQ.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 900; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCM3FwrK3iLTcvneQg7Ca725JhhKnOqk4j1ebLhAm8SrXTccNxhjQ.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 900; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCM3FwrK3iLTcvneQg7Ca725JhhKnPKk4j1ebLhAm8SrXTccNxhjQ.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 900; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCM3FwrK3iLTcvneQg7Ca725JhhKnPqk4j1ebLhAm8SrXTccNxhjQ.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyeMZg.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50qjIw2boKoduKmMEVuLyeMZg.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50ojIw2boKoduKmMEVuLyeMZg.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50ujIw2boKoduKmMEVuLyeMZg.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50ijIw2boKoduKmMEVuLyeMZg.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp506jIw2boKoduKmMEVuLyeMZg.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50yjIw2boKoduKmMEVuLyeMZg.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 200; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuDyfMZg.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 200; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50qjIw2boKoduKmMEVuDyfMZg.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 200; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50ojIw2boKoduKmMEVuDyfMZg.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 200; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50ujIw2boKoduKmMEVuDyfMZg.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 200; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50ijIw2boKoduKmMEVuDyfMZg.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 200; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp506jIw2boKoduKmMEVuDyfMZg.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 200; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50yjIw2boKoduKmMEVuDyfMZg.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuOKfMZg.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50qjIw2boKoduKmMEVuOKfMZg.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50ojIw2boKoduKmMEVuOKfMZg.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50ujIw2boKoduKmMEVuOKfMZg.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50ijIw2boKoduKmMEVuOKfMZg.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp506jIw2boKoduKmMEVuOKfMZg.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50yjIw2boKoduKmMEVuOKfMZg.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfMZg.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50qjIw2boKoduKmMEVuLyfMZg.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50ojIw2boKoduKmMEVuLyfMZg.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50ujIw2boKoduKmMEVuLyfMZg.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50ijIw2boKoduKmMEVuLyfMZg.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp506jIw2boKoduKmMEVuLyfMZg.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50yjIw2boKoduKmMEVuLyfMZg.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuI6fMZg.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50qjIw2boKoduKmMEVuI6fMZg.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50ojIw2boKoduKmMEVuI6fMZg.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50ujIw2boKoduKmMEVuI6fMZg.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50ijIw2boKoduKmMEVuI6fMZg.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp506jIw2boKoduKmMEVuI6fMZg.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50yjIw2boKoduKmMEVuI6fMZg.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuGKYMZg.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50qjIw2boKoduKmMEVuGKYMZg.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50ojIw2boKoduKmMEVuGKYMZg.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50ujIw2boKoduKmMEVuGKYMZg.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50ijIw2boKoduKmMEVuGKYMZg.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp506jIw2boKoduKmMEVuGKYMZg.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50yjIw2boKoduKmMEVuGKYMZg.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuFuYMZg.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50qjIw2boKoduKmMEVuFuYMZg.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50ojIw2boKoduKmMEVuFuYMZg.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50ujIw2boKoduKmMEVuFuYMZg.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50ijIw2boKoduKmMEVuFuYMZg.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp506jIw2boKoduKmMEVuFuYMZg.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50yjIw2boKoduKmMEVuFuYMZg.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuDyYMZg.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50qjIw2boKoduKmMEVuDyYMZg.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50ojIw2boKoduKmMEVuDyYMZg.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50ujIw2boKoduKmMEVuDyYMZg.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50ijIw2boKoduKmMEVuDyYMZg.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp506jIw2boKoduKmMEVuDyYMZg.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50yjIw2boKoduKmMEVuDyYMZg.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 900; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuBWYMZg.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 900; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50qjIw2boKoduKmMEVuBWYMZg.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 900; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50ojIw2boKoduKmMEVuBWYMZg.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 900; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50ujIw2boKoduKmMEVuBWYMZg.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 900; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50ijIw2boKoduKmMEVuBWYMZg.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 900; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp506jIw2boKoduKmMEVuBWYMZg.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 900; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50yjIw2boKoduKmMEVuBWYMZg.ttf) format('truetype'); } @font-face { font-family: 'Poppins'; font-style: italic; font-weight: 100; font-display: swap; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiAyp8kv8JHgFVrJJLmE3tF.ttf) format('truetype'); } @font-face { font-family: 'Poppins'; font-style: italic; font-weight: 200; font-display: swap; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiDyp8kv8JHgFVrJJLmv1plEA.ttf) format('truetype'); } @font-face { font-family: 'Poppins'; font-style: italic; font-weight: 300; font-display: swap; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiDyp8kv8JHgFVrJJLm21llEA.ttf) format('truetype'); } @font-face { font-family: 'Poppins'; font-style: italic; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiGyp8kv8JHgFVrJJLedw.ttf) format('truetype'); } @font-face { font-family: 'Poppins'; font-style: italic; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiDyp8kv8JHgFVrJJLmg1hlEA.ttf) format('truetype'); } @font-face { font-family: 'Poppins'; font-style: italic; font-weight: 600; font-display: swap; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiDyp8kv8JHgFVrJJLmr19lEA.ttf) format('truetype'); } @font-face { font-family: 'Poppins'; font-style: italic; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiDyp8kv8JHgFVrJJLmy15lEA.ttf) format('truetype'); } @font-face { font-family: 'Poppins'; font-style: italic; font-weight: 800; font-display: swap; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiDyp8kv8JHgFVrJJLm111lEA.ttf) format('truetype'); } @font-face { font-family: 'Poppins'; font-style: italic; font-weight: 900; font-display: swap; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiDyp8kv8JHgFVrJJLm81xlEA.ttf) format('truetype'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 100; font-display: swap; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiGyp8kv8JHgFVrLPTedw.ttf) format('truetype'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 200; font-display: swap; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLFj_V1s.ttf) format('truetype'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLDz8V1s.ttf) format('truetype'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiEyp8kv8JHgFVrFJA.ttf) format('truetype'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLGT9V1s.ttf) format('truetype'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLEj6V1s.ttf) format('truetype'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLCz7V1s.ttf) format('truetype'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLDD4V1s.ttf) format('truetype'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 900; font-display: swap; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLBT5V1s.ttf) format('truetype'); } html, body { font-family: "Inter", sans-serif; font-weight: 400; line-height: 1.5; } .font-pop { font-family: "Poppins", sans-serif !important; } /*========================================================================== => Color ==========================================================================*/ :root { /* input */ --input-height: 50px; --input-fs-main: 16px; --input-fs-top: 14px; --input-icon-fs: 18px; --input-icon: #1baac4; --input-border: #aaa; --input-error: #ff2323; /* input end */ /* button */ --button-fill: #3AB2FB; --button-line: #30223B; /* button end */ } /*========================================================================== => Common ==========================================================================*/ /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Firefox */ input[type=number] { -moz-appearance: textfield; } /*========================================================================== => Fonts ==========================================================================*/ * { font-weight: normal; margin-bottom: 0; } @font-face { font-family: 'icomoon'; src: url('../fonts/icomoon.eot?ay2qbl'); src: url('../fonts/icomoon.eot?ay2qbl#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?ay2qbl') format('truetype'), url('../fonts/icomoon.woff?ay2qbl') format('woff'), url('../fonts/icomoon.svg?ay2qbl#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; } [class^="icon-"], [class*=" icon-"] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'icomoon' !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-logout:before { content: "\e944"; } /*========================================================================== => Custom Grid ==========================================================================*/ /* Grid */ .f-row { display: flex; margin-left: -8px; margin-right: -8px; flex-wrap: wrap; } .f-col { padding: 0 8px; } /* flex col */ .f-10 .f-col { width: 10%; } .f-9 .f-col { width: 11.11111111%; } .f-8 .f-col { width: 12.5%; } .f-7 .f-col { width: 14.28571429%; } .f-6 .f-col { width: 16.66666667%; } .f-5 .f-col { width: 20%; } .f-4 .f-col { width: 25%; } .f-3 .f-col { width: 33.33333333%; } .f-2 .f-col { width: 50%; } .f-1 .f-col { width: 100%; } /* flex col end */ /* Grid */ .g-10 { grid-template-columns: repeat(10, 1fr); } .g-9 { grid-template-columns: repeat(9, 1fr); } .g-8 { grid-template-columns: repeat(8, 1fr); } .g-7 { grid-template-columns: repeat(7, 1fr); } .g-6 { grid-template-columns: repeat(6, 1fr); } .g-5 { grid-template-columns: repeat(5, 1fr); } .g-4 { grid-template-columns: repeat(4, 1fr); } .g-3 { grid-template-columns: repeat(3, 1fr); } .g-2 { grid-template-columns: repeat(2, 1fr); } .g-1 { grid-template-columns: repeat(1, 1fr); } /* Grid */ .gp-70 { gap: 70px; } .gp-65 { gap: 65px; } .gp-60 { gap: 60px; } .gp-55 { gap: 55px; } .gp-50 { gap: 50px; } .gp-45 { gap: 45px; } .gp-40 { gap: 40px; } .gp-35 { gap: 35px; } .gp-30 { gap: 30px; } .gp-25 { gap: 25px; } .gp-20 { gap: 20px; } .gp-15 { gap: 15px; } .gp-10 { gap: 10px; } .gp-5 { gap: 5px; } .gp-0 { gap: 0px; } /* Width */ .w100 { width: 100%; padding-left: 8px; padding-right: 8px; } .w95 { width: 95%; padding-left: 8px; padding-right: 8px; } .w90 { width: 90%; padding-left: 8px; padding-right: 8px; } .w85 { width: 85%; padding-left: 8px; padding-right: 8px; } .w80 { width: 80%; padding-left: 8px; padding-right: 8px; } .w75 { width: 75%; padding-left: 8px; padding-right: 8px; } .w70 { width: 70%; padding-left: 8px; padding-right: 8px; } .w65 { width: 65%; padding-left: 8px; padding-right: 8px; } .w60 { width: 60%; padding-left: 8px; padding-right: 8px; } .w55 { width: 55%; padding-left: 8px; padding-right: 8px; } .w50 { width: 50%; padding-left: 8px; padding-right: 8px; } .w45 { width: 45%; padding-left: 8px; padding-right: 8px; } .w40 { width: 40%; padding-left: 8px; padding-right: 8px; } .w35 { width: 35%; padding-left: 8px; padding-right: 8px; } .w30 { width: 30%; padding-left: 8px; padding-right: 8px; } .w25 { width: 25%; padding-left: 8px; padding-right: 8px; } .w20 { width: 20%; padding-left: 8px; padding-right: 8px; } .w15 { width: 15%; padding-left: 8px; padding-right: 8px; } .w10 { width: 10%; padding-left: 8px; padding-right: 8px; } .w5 { width: 5%; padding-left: 8px; padding-right: 8px; } .w33 { width: 33.33%; padding-left: 8px; padding-right: 8px; } .w35 { width: 35%; padding-left: 8px; padding-right: 8px; } .w65 { width: 65%; padding-left: 8px; padding-right: 8px; } .w16 { width: 16.666666%; padding-left: 8px; padding-right: 8px; } /* Margin */ .mb-100 { margin-bottom: 100px; } .mb-95 { margin-bottom: 95px; } .mb-90 { margin-bottom: 90px; } .mb-85 { margin-bottom: 85px; } .mb-80 { margin-bottom: 80px; } .mb-75 { margin-bottom: 75px; } .mb-70 { margin-bottom: 70px; } .mb-65 { margin-bottom: 65px; } .mb-60 { margin-bottom: 60px; } .mb-55 { margin-bottom: 55px; } .mb-50 { margin-bottom: 50px; } .mb-45 { margin-bottom: 45px; } .mb-40 { margin-bottom: 40px; } .mb-35 { margin-bottom: 35px; } .mb-30 { margin-bottom: 30px; } .mb-25 { margin-bottom: 25px; } .mb-20 { margin-bottom: 20px; } .mb-15 { margin-bottom: 15px; } .mb-10 { margin-bottom: 10px; } .mb-5 { margin-bottom: 5px; } .mb-0 { margin-bottom: 0px; } /* Padding */ .pb-100 { padding-bottom: 100px; } .pb-95 { padding-bottom: 95px; } .pb-90 { padding-bottom: 90px; } .pb-85 { padding-bottom: 85px; } .pb-80 { padding-bottom: 80px; } .pb-75 { padding-bottom: 75px; } .pb-70 { padding-bottom: 70px; } .pb-65 { padding-bottom: 65px; } .pb-60 { padding-bottom: 60px; } .pb-55 { padding-bottom: 55px; } .pb-50 { padding-bottom: 50px; } .pb-45 { padding-bottom: 45px; } .pb-40 { padding-bottom: 40px; } .pb-35 { padding-bottom: 35px; } .pb-30 { padding-bottom: 30px; } .pb-25 { padding-bottom: 25px; } .pb-20 { padding-bottom: 20px; } .pb-15 { padding-bottom: 15px; } .pb-10 { padding-bottom: 10px; } .pb-5 { padding-bottom: 5px; } .pb-0 { padding-bottom: 0px; } .comm-grid { display: grid; width: 100%; } @media all and (max-width: 1440px) { .f-1440-10 .f-col { width: 10%; } .f-1440-9 .f-col { width: 11.11111111%; } .f-1440-8 .f-col { width: 12.5%; } .f-1440-7 .f-col { width: 14.28571429%; } .f-1440-6 .f-col { width: 16.66666667%; } .f-1440-5 .f-col { width: 20%; } .f-1440-4 .f-col { width: 25%; } .f-1440-3 .f-col { width: 33.33333333%; } .f-1440-2 .f-col { width: 50%; } .f-1440-1 .f-col { width: 100%; } .g-1440-10 { grid-template-columns: repeat(10, 1fr); } .g-1440-9 { grid-template-columns: repeat(9, 1fr); } .g-1440-8 { grid-template-columns: repeat(8, 1fr); } .g-1440-7 { grid-template-columns: repeat(7, 1fr); } .g-1440-6 { grid-template-columns: repeat(6, 1fr); } .g-1440-5 { grid-template-columns: repeat(5, 1fr); } .g-1440-4 { grid-template-columns: repeat(4, 1fr); } .g-1440-3 { grid-template-columns: repeat(3, 1fr); } .g-1440-2 { grid-template-columns: repeat(2, 1fr); } .g-1440-1 { grid-template-columns: repeat(1, 1fr); } .gp-1440-70 { gap: 70px; } .gp-1440-65 { gap: 65px; } .gp-1440-60 { gap: 60px; } .gp-1440-55 { gap: 55px; } .gp-1440-50 { gap: 50px; } .gp-1440-45 { gap: 45px; } .gp-1440-40 { gap: 40px; } .gp-1440-35 { gap: 35px; } .gp-1440-30 { gap: 30px; } .gp-1440-25 { gap: 25px; } .gp-1440-20 { gap: 20px; } .gp-1440-15 { gap: 15px; } .gp-1440-10 { gap: 10px; } .gp-1440-5 { gap: 5px; } .gp-1440-0 { gap: 0px; } .w-1440-100 { width: 100%; padding-left: 8px; padding-right: 8px; } .w-1440-95 { width: 95%; padding-left: 8px; padding-right: 8px; } .w-1440-90 { width: 90%; padding-left: 8px; padding-right: 8px; } .w-1440-85 { width: 85%; padding-left: 8px; padding-right: 8px; } .w-1440-80 { width: 80%; padding-left: 8px; padding-right: 8px; } .w-1440-75 { width: 75%; padding-left: 8px; padding-right: 8px; } .w-1440-70 { width: 70%; padding-left: 8px; padding-right: 8px; } .w-1440-65 { width: 65%; padding-left: 8px; padding-right: 8px; } .w-1440-60 { width: 60%; padding-left: 8px; padding-right: 8px; } .w-1440-55 { width: 55%; padding-left: 8px; padding-right: 8px; } .w-1440-50 { width: 50%; padding-left: 8px; padding-right: 8px; } .w-1440-45 { width: 45%; padding-left: 8px; padding-right: 8px; } .w-1440-40 { width: 40%; padding-left: 8px; padding-right: 8px; } .w-1440-35 { width: 35%; padding-left: 8px; padding-right: 8px; } .w-1440-30 { width: 30%; padding-left: 8px; padding-right: 8px; } .w-1440-25 { width: 25%; padding-left: 8px; padding-right: 8px; } .w-1440-20 { width: 20%; padding-left: 8px; padding-right: 8px; } .w-1440-15 { width: 15%; padding-left: 8px; padding-right: 8px; } .w-1440-10 { width: 10%; padding-left: 8px; padding-right: 8px; } .w-1440-5 { width: 5%; padding-left: 8px; padding-right: 8px; } .w-1440-33 { width: 33%; } .w-1440-16 { width: 16.666666%; } .mb-1440-100 { margin-bottom: 100px; } .mb-1440-95 { margin-bottom: 95px; } .mb-1440-90 { margin-bottom: 90px; } .mb-1440-85 { margin-bottom: 85px; } .mb-1440-80 { margin-bottom: 80px; } .mb-1440-75 { margin-bottom: 75px; } .mb-1440-70 { margin-bottom: 70px; } .mb-1440-65 { margin-bottom: 65px; } .mb-1440-60 { margin-bottom: 60px; } .mb-1440-55 { margin-bottom: 55px; } .mb-1440-50 { margin-bottom: 50px; } .mb-1440-45 { margin-bottom: 45px; } .mb-1440-40 { margin-bottom: 40px; } .mb-1440-35 { margin-bottom: 35px; } .mb-1440-30 { margin-bottom: 30px; } .mb-1440-25 { margin-bottom: 25px; } .mb-1440-20 { margin-bottom: 20px; } .mb-1440-15 { margin-bottom: 15px; } .mb-1440-10 { margin-bottom: 10px; } .mb-1440-5 { margin-bottom: 5px; } .mb-1440-0 { margin-bottom: 0px; } .pb-1440-100 { padding-bottom: 100px; } .pb-1440-95 { padding-bottom: 95px; } .pb-1440-90 { padding-bottom: 90px; } .pb-1440-85 { padding-bottom: 85px; } .pb-1440-80 { padding-bottom: 80px; } .pb-1440-75 { padding-bottom: 75px; } .pb-1440-70 { padding-bottom: 70px; } .pb-1440-65 { padding-bottom: 65px; } .pb-1440-60 { padding-bottom: 60px; } .pb-1440-55 { padding-bottom: 55px; } .pb-1440-50 { padding-bottom: 50px; } .pb-1440-45 { padding-bottom: 45px; } .pb-1440-40 { padding-bottom: 40px; } .pb-1440-35 { padding-bottom: 35px; } .pb-1440-30 { padding-bottom: 30px; } .pb-1440-25 { padding-bottom: 25px; } .pb-1440-20 { padding-bottom: 20px; } .pb-1440-15 { padding-bottom: 15px; } .pb-1440-10 { padding-bottom: 10px; } .pb-1440-5 { padding-bottom: 5px; } .pb-1440-0 { padding-bottom: 0px; } } @media all and (max-width: 1366px) { .f-1366-10 .f-col { width: 10%; } .f-1366-9 .f-col { width: 11.11111111%; } .f-1366-8 .f-col { width: 12.5%; } .f-1366-7 .f-col { width: 14.28571429%; } .f-1366-6 .f-col { width: 16.66666667%; } .f-1366-5 .f-col { width: 20%; } .f-1366-4 .f-col { width: 25%; } .f-1366-3 .f-col { width: 33.33333333%; } .f-1366-2 .f-col { width: 50%; } .f-1366-1 .f-col { width: 100%; } .g-1366-10 { grid-template-columns: repeat(10, 1fr); } .g-1366-9 { grid-template-columns: repeat(9, 1fr); } .g-1366-8 { grid-template-columns: repeat(8, 1fr); } .g-1366-7 { grid-template-columns: repeat(7, 1fr); } .g-1366-6 { grid-template-columns: repeat(6, 1fr); } .g-1366-5 { grid-template-columns: repeat(5, 1fr); } .g-1366-4 { grid-template-columns: repeat(4, 1fr); } .g-1366-3 { grid-template-columns: repeat(3, 1fr); } .g-1366-2 { grid-template-columns: repeat(2, 1fr); } .g-1366-1 { grid-template-columns: repeat(1, 1fr); } .gp-1366-70 { gap: 70px; } .gp-1366-65 { gap: 65px; } .gp-1366-60 { gap: 60px; } .gp-1366-55 { gap: 55px; } .gp-1366-50 { gap: 50px; } .gp-1366-45 { gap: 45px; } .gp-1366-40 { gap: 40px; } .gp-1366-35 { gap: 35px; } .gp-1366-30 { gap: 30px; } .gp-1366-25 { gap: 25px; } .gp-1366-20 { gap: 20px; } .gp-1366-15 { gap: 15px; } .gp-1366-10 { gap: 10px; } .gp-1366-5 { gap: 5px; } .gp-1366-0 { gap: 0px; } .w-1366-100 { width: 100%; padding-left: 8px; padding-right: 8px; } .w-1366-95 { width: 95%; padding-left: 8px; padding-right: 8px; } .w-1366-90 { width: 90%; padding-left: 8px; padding-right: 8px; } .w-1366-85 { width: 85%; padding-left: 8px; padding-right: 8px; } .w-1366-80 { width: 80%; padding-left: 8px; padding-right: 8px; } .w-1366-75 { width: 75%; padding-left: 8px; padding-right: 8px; } .w-1366-70 { width: 70%; padding-left: 8px; padding-right: 8px; } .w-1366-65 { width: 65%; padding-left: 8px; padding-right: 8px; } .w-1366-60 { width: 60%; padding-left: 8px; padding-right: 8px; } .w-1366-55 { width: 55%; padding-left: 8px; padding-right: 8px; } .w-1366-50 { width: 50%; padding-left: 8px; padding-right: 8px; } .w-1366-45 { width: 45%; padding-left: 8px; padding-right: 8px; } .w-1366-40 { width: 40%; padding-left: 8px; padding-right: 8px; } .w-1366-35 { width: 35%; padding-left: 8px; padding-right: 8px; } .w-1366-30 { width: 30%; padding-left: 8px; padding-right: 8px; } .w-1366-25 { width: 25%; padding-left: 8px; padding-right: 8px; } .w-1366-20 { width: 20%; padding-left: 8px; padding-right: 8px; } .w-1366-15 { width: 15%; padding-left: 8px; padding-right: 8px; } .w-1366-10 { width: 10%; padding-left: 8px; padding-right: 8px; } .w-1366-5 { width: 5%; padding-left: 8px; padding-right: 8px; } .w-1366-33 { width: 33%; } .w-1366-16 { width: 16.666666%; } .mb-1366-100 { margin-bottom: 100px; } .mb-1366-95 { margin-bottom: 95px; } .mb-1366-90 { margin-bottom: 90px; } .mb-1366-85 { margin-bottom: 85px; } .mb-1366-80 { margin-bottom: 80px; } .mb-1366-75 { margin-bottom: 75px; } .mb-1366-70 { margin-bottom: 70px; } .mb-1366-65 { margin-bottom: 65px; } .mb-1366-60 { margin-bottom: 60px; } .mb-1366-55 { margin-bottom: 55px; } .mb-1366-50 { margin-bottom: 50px; } .mb-1366-45 { margin-bottom: 45px; } .mb-1366-40 { margin-bottom: 40px; } .mb-1366-35 { margin-bottom: 35px; } .mb-1366-30 { margin-bottom: 30px; } .mb-1366-25 { margin-bottom: 25px; } .mb-1366-20 { margin-bottom: 20px; } .mb-1366-15 { margin-bottom: 15px; } .mb-1366-10 { margin-bottom: 10px; } .mb-1366-5 { margin-bottom: 5px; } .mb-1366-0 { margin-bottom: 0px; } .pb-1366-100 { padding-bottom: 100px; } .pb-1366-95 { padding-bottom: 95px; } .pb-1366-90 { padding-bottom: 90px; } .pb-1366-85 { padding-bottom: 85px; } .pb-1366-80 { padding-bottom: 80px; } .pb-1366-75 { padding-bottom: 75px; } .pb-1366-70 { padding-bottom: 70px; } .pb-1366-65 { padding-bottom: 65px; } .pb-1366-60 { padding-bottom: 60px; } .pb-1366-55 { padding-bottom: 55px; } .pb-1366-50 { padding-bottom: 50px; } .pb-1366-45 { padding-bottom: 45px; } .pb-1366-40 { padding-bottom: 40px; } .pb-1366-35 { padding-bottom: 35px; } .pb-1366-30 { padding-bottom: 30px; } .pb-1366-25 { padding-bottom: 25px; } .pb-1366-20 { padding-bottom: 20px; } .pb-1366-15 { padding-bottom: 15px; } .pb-1366-10 { padding-bottom: 10px; } .pb-1366-5 { padding-bottom: 5px; } .pb-1366-0 { padding-bottom: 0px; } } @media all and (max-width: 1200px) { .f-1200-10 .f-col { width: 10%; } .f-1200-9 .f-col { width: 11.11111111%; } .f-1200-8 .f-col { width: 12.5%; } .f-1200-7 .f-col { width: 14.28571429%; } .f-1200-6 .f-col { width: 16.66666667%; } .f-1200-5 .f-col { width: 20%; } .f-1200-4 .f-col { width: 25%; } .f-1200-3 .f-col { width: 33.33333333%; } .f-1200-2 .f-col { width: 50%; } .f-1200-1 .f-col { width: 100%; } .w-1200-100 { width: 100%; padding-left: 8px; padding-right: 8px; } .w-1200-95 { width: 95%; padding-left: 8px; padding-right: 8px; } .w-1200-90 { width: 90%; padding-left: 8px; padding-right: 8px; } .w-1200-85 { width: 85%; padding-left: 8px; padding-right: 8px; } .w-1200-80 { width: 80%; padding-left: 8px; padding-right: 8px; } .w-1200-75 { width: 75%; padding-left: 8px; padding-right: 8px; } .w-1200-70 { width: 70%; padding-left: 8px; padding-right: 8px; } .w-1200-65 { width: 65%; padding-left: 8px; padding-right: 8px; } .w-1200-60 { width: 60%; padding-left: 8px; padding-right: 8px; } .w-1200-55 { width: 55%; padding-left: 8px; padding-right: 8px; } .w-1200-50 { width: 50%; padding-left: 8px; padding-right: 8px; } .w-1200-45 { width: 45%; padding-left: 8px; padding-right: 8px; } .w-1200-40 { width: 40%; padding-left: 8px; padding-right: 8px; } .w-1200-35 { width: 35%; padding-left: 8px; padding-right: 8px; } .w-1200-30 { width: 30%; padding-left: 8px; padding-right: 8px; } .w-1200-25 { width: 25%; padding-left: 8px; padding-right: 8px; } .w-1200-20 { width: 20%; padding-left: 8px; padding-right: 8px; } .w-1200-15 { width: 15%; padding-left: 8px; padding-right: 8px; } .w-1200-10 { width: 10%; padding-left: 8px; padding-right: 8px; } .w-1200-5 { width: 5%; padding-left: 8px; padding-right: 8px; } .g-1200-10 { grid-template-columns: repeat(10, 1fr); } .g-1200-9 { grid-template-columns: repeat(9, 1fr); } .g-1200-8 { grid-template-columns: repeat(8, 1fr); } .g-1200-7 { grid-template-columns: repeat(7, 1fr); } .g-1200-6 { grid-template-columns: repeat(6, 1fr); } .g-1200-5 { grid-template-columns: repeat(5, 1fr); } .g-1200-4 { grid-template-columns: repeat(4, 1fr); } .g-1200-3 { grid-template-columns: repeat(3, 1fr); } .g-1200-2 { grid-template-columns: repeat(2, 1fr); } .g-1200-1 { grid-template-columns: repeat(1, 1fr); } .gp-1200-70 { gap: 70px; } .gp-1200-65 { gap: 65px; } .gp-1200-60 { gap: 60px; } .gp-1200-55 { gap: 55px; } .gp-1200-50 { gap: 50px; } .gp-1200-45 { gap: 45px; } .gp-1200-40 { gap: 40px; } .gp-1200-35 { gap: 35px; } .gp-1200-30 { gap: 30px; } .gp-1200-25 { gap: 25px; } .gp-1200-20 { gap: 20px; } .gp-1200-15 { gap: 15px; } .gp-1200-10 { gap: 10px; } .gp-1200-5 { gap: 5px; } .gp-1200-0 { gap: 0px; } .w-1200-33 { width: 33%; } .w-1200-16 { width: 16.666666%; } .mb-1200-100 { margin-bottom: 100px; } .mb-1200-95 { margin-bottom: 95px; } .mb-1200-90 { margin-bottom: 90px; } .mb-1200-85 { margin-bottom: 85px; } .mb-1200-80 { margin-bottom: 80px; } .mb-1200-75 { margin-bottom: 75px; } .mb-1200-70 { margin-bottom: 70px; } .mb-1200-65 { margin-bottom: 65px; } .mb-1200-60 { margin-bottom: 60px; } .mb-1200-55 { margin-bottom: 55px; } .mb-1200-50 { margin-bottom: 50px; } .mb-1200-45 { margin-bottom: 45px; } .mb-1200-40 { margin-bottom: 40px; } .mb-1200-35 { margin-bottom: 35px; } .mb-1200-30 { margin-bottom: 30px; } .mb-1200-25 { margin-bottom: 25px; } .mb-1200-20 { margin-bottom: 20px; } .mb-1200-15 { margin-bottom: 15px; } .mb-1200-10 { margin-bottom: 10px; } .mb-1200-5 { margin-bottom: 5px; } .mb-1200-0 { margin-bottom: 0px; } .pb-1200-100 { padding-bottom: 100px; } .pb-1200-95 { padding-bottom: 95px; } .pb-1200-90 { padding-bottom: 90px; } .pb-1200-85 { padding-bottom: 85px; } .pb-1200-80 { padding-bottom: 80px; } .pb-1200-75 { padding-bottom: 75px; } .pb-1200-70 { padding-bottom: 70px; } .pb-1200-65 { padding-bottom: 65px; } .pb-1200-60 { padding-bottom: 60px; } .pb-1200-55 { padding-bottom: 55px; } .pb-1200-50 { padding-bottom: 50px; } .pb-1200-45 { padding-bottom: 45px; } .pb-1200-40 { padding-bottom: 40px; } .pb-1200-35 { padding-bottom: 35px; } .pb-1200-30 { padding-bottom: 30px; } .pb-1200-25 { padding-bottom: 25px; } .pb-1200-20 { padding-bottom: 20px; } .pb-1200-15 { padding-bottom: 15px; } .pb-1200-10 { padding-bottom: 10px; } .pb-1200-5 { padding-bottom: 5px; } .pb-1200-0 { padding-bottom: 0px; } } @media all and (max-width: 1024px) { .f-1024-10 .f-col { width: 10%; } .f-1024-9 .f-col { width: 11.11111111%; } .f-1024-8 .f-col { width: 12.5%; } .f-1024-7 .f-col { width: 14.28571429%; } .f-1024-6 .f-col { width: 16.66666667%; } .f-1024-5 .f-col { width: 20%; } .f-1024-4 .f-col { width: 25%; } .f-1024-3 .f-col { width: 33.33333333%; } .f-1024-2 .f-col { width: 50%; } .f-1024-1 .f-col { width: 100%; } .g-1024-10 { grid-template-columns: repeat(10, 1fr); } .g-1024-9 { grid-template-columns: repeat(9, 1fr); } .g-1024-8 { grid-template-columns: repeat(8, 1fr); } .g-1024-7 { grid-template-columns: repeat(7, 1fr); } .g-1024-6 { grid-template-columns: repeat(6, 1fr); } .g-1024-5 { grid-template-columns: repeat(5, 1fr); } .g-1024-4 { grid-template-columns: repeat(4, 1fr); } .g-1024-3 { grid-template-columns: repeat(3, 1fr); } .g-1024-2 { grid-template-columns: repeat(2, 1fr); } .g-1024-1 { grid-template-columns: repeat(1, 1fr); } .gp-1024-70 { gap: 70px; } .gp-1024-65 { gap: 65px; } .gp-1024-60 { gap: 60px; } .gp-1024-55 { gap: 55px; } .gp-1024-50 { gap: 50px; } .gp-1024-45 { gap: 45px; } .gp-1024-40 { gap: 40px; } .gp-1024-35 { gap: 35px; } .gp-1024-30 { gap: 30px; } .gp-1024-25 { gap: 25px; } .gp-1024-20 { gap: 20px; } .gp-1024-15 { gap: 15px; } .gp-1024-10 { gap: 10px; } .gp-1024-5 { gap: 5px; } .gp-1024-0 { gap: 0px; } .w-1024-100 { width: 100%; padding-left: 8px; padding-right: 8px; } .w-1024-95 { width: 95%; padding-left: 8px; padding-right: 8px; } .w-1024-90 { width: 90%; padding-left: 8px; padding-right: 8px; } .w-1024-85 { width: 85%; padding-left: 8px; padding-right: 8px; } .w-1024-80 { width: 80%; padding-left: 8px; padding-right: 8px; } .w-1024-75 { width: 75%; padding-left: 8px; padding-right: 8px; } .w-1024-70 { width: 70%; padding-left: 8px; padding-right: 8px; } .w-1024-65 { width: 65%; padding-left: 8px; padding-right: 8px; } .w-1024-60 { width: 60%; padding-left: 8px; padding-right: 8px; } .w-1024-55 { width: 55%; padding-left: 8px; padding-right: 8px; } .w-1024-50 { width: 50%; padding-left: 8px; padding-right: 8px; } .w-1024-45 { width: 45%; padding-left: 8px; padding-right: 8px; } .w-1024-40 { width: 40%; padding-left: 8px; padding-right: 8px; } .w-1024-35 { width: 35%; padding-left: 8px; padding-right: 8px; } .w-1024-30 { width: 30%; padding-left: 8px; padding-right: 8px; } .w-1024-25 { width: 25%; padding-left: 8px; padding-right: 8px; } .w-1024-20 { width: 20%; padding-left: 8px; padding-right: 8px; } .w-1024-15 { width: 15%; padding-left: 8px; padding-right: 8px; } .w-1024-10 { width: 10%; padding-left: 8px; padding-right: 8px; } .w-1024-5 { width: 5%; padding-left: 8px; padding-right: 8px; } .w-1024-33 { width: 33%; } .w-1024-16 { width: 16.666666%; } .mb-1024-100 { margin-bottom: 100px; } .mb-1024-95 { margin-bottom: 95px; } .mb-1024-90 { margin-bottom: 90px; } .mb-1024-85 { margin-bottom: 85px; } .mb-1024-80 { margin-bottom: 80px; } .mb-1024-75 { margin-bottom: 75px; } .mb-1024-70 { margin-bottom: 70px; } .mb-1024-65 { margin-bottom: 65px; } .mb-1024-60 { margin-bottom: 60px; } .mb-1024-55 { margin-bottom: 55px; } .mb-1024-50 { margin-bottom: 50px; } .mb-1024-45 { margin-bottom: 45px; } .mb-1024-40 { margin-bottom: 40px; } .mb-1024-35 { margin-bottom: 35px; } .mb-1024-30 { margin-bottom: 30px; } .mb-1024-25 { margin-bottom: 25px; } .mb-1024-20 { margin-bottom: 20px; } .mb-1024-15 { margin-bottom: 15px; } .mb-1024-10 { margin-bottom: 10px; } .mb-1024-5 { margin-bottom: 5px; } .mb-1024-0 { margin-bottom: 0px; } .pb-1024-100 { padding-bottom: 100px; } .pb-1024-95 { padding-bottom: 95px; } .pb-1024-90 { padding-bottom: 90px; } .pb-1024-85 { padding-bottom: 85px; } .pb-1024-80 { padding-bottom: 80px; } .pb-1024-75 { padding-bottom: 75px; } .pb-1024-70 { padding-bottom: 70px; } .pb-1024-65 { padding-bottom: 65px; } .pb-1024-60 { padding-bottom: 60px; } .pb-1024-55 { padding-bottom: 55px; } .pb-1024-50 { padding-bottom: 50px; } .pb-1024-45 { padding-bottom: 45px; } .pb-1024-40 { padding-bottom: 40px; } .pb-1024-35 { padding-bottom: 35px; } .pb-1024-30 { padding-bottom: 30px; } .pb-1024-25 { padding-bottom: 25px; } .pb-1024-20 { padding-bottom: 20px; } .pb-1024-15 { padding-bottom: 15px; } .pb-1024-10 { padding-bottom: 10px; } .pb-1024-5 { padding-bottom: 5px; } .pb-1024-0 { padding-bottom: 0px; } } @media all and (max-width: 990px) { .f-990-10 .f-col { width: 10%; } .f-990-9 .f-col { width: 11.11111111%; } .f-990-8 .f-col { width: 12.5%; } .f-990-7 .f-col { width: 14.28571429%; } .f-990-6 .f-col { width: 16.66666667%; } .f-990-5 .f-col { width: 20%; } .f-990-4 .f-col { width: 25%; } .f-990-3 .f-col { width: 33.33333333%; } .f-990-2 .f-col { width: 50%; } .f-990-1 .f-col { width: 100%; } .w-990-100 { width: 100%; padding-left: 8px; padding-right: 8px; } .w-990-95 { width: 95%; padding-left: 8px; padding-right: 8px; } .w-990-90 { width: 90%; padding-left: 8px; padding-right: 8px; } .w-990-85 { width: 85%; padding-left: 8px; padding-right: 8px; } .w-990-80 { width: 80%; padding-left: 8px; padding-right: 8px; } .w-990-75 { width: 75%; padding-left: 8px; padding-right: 8px; } .w-990-70 { width: 70%; padding-left: 8px; padding-right: 8px; } .w-990-65 { width: 65%; padding-left: 8px; padding-right: 8px; } .w-990-60 { width: 60%; padding-left: 8px; padding-right: 8px; } .w-990-55 { width: 55%; padding-left: 8px; padding-right: 8px; } .w-990-50 { width: 50%; padding-left: 8px; padding-right: 8px; } .w-990-45 { width: 45%; padding-left: 8px; padding-right: 8px; } .w-990-40 { width: 40%; padding-left: 8px; padding-right: 8px; } .w-990-35 { width: 35%; padding-left: 8px; padding-right: 8px; } .w-990-30 { width: 30%; padding-left: 8px; padding-right: 8px; } .w-990-25 { width: 25%; padding-left: 8px; padding-right: 8px; } .w-990-20 { width: 20%; padding-left: 8px; padding-right: 8px; } .w-990-15 { width: 15%; padding-left: 8px; padding-right: 8px; } .w-990-10 { width: 10%; padding-left: 8px; padding-right: 8px; } .w-990-5 { width: 5%; padding-left: 8px; padding-right: 8px; } .g-990-10 { grid-template-columns: repeat(10, 1fr); } .g-990-9 { grid-template-columns: repeat(9, 1fr); } .g-990-8 { grid-template-columns: repeat(8, 1fr); } .g-990-7 { grid-template-columns: repeat(7, 1fr); } .g-990-6 { grid-template-columns: repeat(6, 1fr); } .g-990-5 { grid-template-columns: repeat(5, 1fr); } .g-990-4 { grid-template-columns: repeat(4, 1fr); } .g-990-3 { grid-template-columns: repeat(3, 1fr); } .g-990-2 { grid-template-columns: repeat(2, 1fr); } .g-990-1 { grid-template-columns: repeat(1, 1fr); } .gp-990-70 { gap: 70px; } .gp-990-65 { gap: 65px; } .gp-990-60 { gap: 60px; } .gp-990-55 { gap: 55px; } .gp-990-50 { gap: 50px; } .gp-990-45 { gap: 45px; } .gp-990-40 { gap: 40px; } .gp-990-35 { gap: 35px; } .gp-990-30 { gap: 30px; } .gp-990-25 { gap: 25px; } .gp-990-20 { gap: 20px; } .gp-990-15 { gap: 15px; } .gp-990-10 { gap: 10px; } .gp-990-5 { gap: 5px; } .gp-990-0 { gap: 0px; } .mb-990-100 { margin-bottom: 100px; } .mb-990-95 { margin-bottom: 95px; } .mb-990-90 { margin-bottom: 90px; } .mb-990-85 { margin-bottom: 85px; } .mb-990-80 { margin-bottom: 80px; } .mb-990-75 { margin-bottom: 75px; } .mb-990-70 { margin-bottom: 70px; } .mb-990-65 { margin-bottom: 65px; } .mb-990-60 { margin-bottom: 60px; } .mb-990-55 { margin-bottom: 55px; } .mb-990-50 { margin-bottom: 50px; } .mb-990-45 { margin-bottom: 45px; } .mb-990-40 { margin-bottom: 40px; } .mb-990-35 { margin-bottom: 35px; } .mb-990-30 { margin-bottom: 30px; } .mb-990-25 { margin-bottom: 25px; } .mb-990-20 { margin-bottom: 20px; } .mb-990-15 { margin-bottom: 15px; } .mb-990-10 { margin-bottom: 10px; } .mb-990-5 { margin-bottom: 5px; } .mb-990-0 { margin-bottom: 0px; } .w-990-33 { width: 33%; } .w-990-16 { width: 16.666666%; } .mb-990-100 { margin-bottom: 100px; } .mb-990-95 { margin-bottom: 95px; } .mb-990-90 { margin-bottom: 90px; } .mb-990-85 { margin-bottom: 85px; } .mb-990-80 { margin-bottom: 80px; } .mb-990-75 { margin-bottom: 75px; } .mb-990-70 { margin-bottom: 70px; } .mb-990-65 { margin-bottom: 65px; } .mb-990-60 { margin-bottom: 60px; } .mb-990-55 { margin-bottom: 55px; } .mb-990-50 { margin-bottom: 50px; } .mb-990-45 { margin-bottom: 45px; } .mb-990-40 { margin-bottom: 40px; } .mb-990-35 { margin-bottom: 35px; } .mb-990-30 { margin-bottom: 30px; } .mb-990-25 { margin-bottom: 25px; } .mb-990-20 { margin-bottom: 20px; } .mb-990-15 { margin-bottom: 15px; } .mb-990-10 { margin-bottom: 10px; } .mb-990-5 { margin-bottom: 5px; } .mb-990-0 { margin-bottom: 0px; } .pb-990-100 { padding-bottom: 100px; } .pb-990-95 { padding-bottom: 95px; } .pb-990-90 { padding-bottom: 90px; } .pb-990-85 { padding-bottom: 85px; } .pb-990-80 { padding-bottom: 80px; } .pb-990-75 { padding-bottom: 75px; } .pb-990-70 { padding-bottom: 70px; } .pb-990-65 { padding-bottom: 65px; } .pb-990-60 { padding-bottom: 60px; } .pb-990-55 { padding-bottom: 55px; } .pb-990-50 { padding-bottom: 50px; } .pb-990-45 { padding-bottom: 45px; } .pb-990-40 { padding-bottom: 40px; } .pb-990-35 { padding-bottom: 35px; } .pb-990-30 { padding-bottom: 30px; } .pb-990-25 { padding-bottom: 25px; } .pb-990-20 { padding-bottom: 20px; } .pb-990-15 { padding-bottom: 15px; } .pb-990-10 { padding-bottom: 10px; } .pb-990-5 { padding-bottom: 5px; } .pb-990-0 { padding-bottom: 0px; } } @media all and (max-width: 768px) { .f-768-10 .f-col { width: 10%; } .f-768-9 .f-col { width: 11.11111111%; } .f-768-8 .f-col { width: 12.5%; } .f-768-7 .f-col { width: 14.28571429%; } .f-768-6 .f-col { width: 16.66666667%; } .f-768-5 .f-col { width: 20%; } .f-768-4 .f-col { width: 25%; } .f-768-3 .f-col { width: 33.33333333%; } .f-768-2 .f-col { width: 50%; } .f-768-1 .f-col { width: 100%; } .w-768-100 { width: 100%; padding-left: 8px; padding-right: 8px; } .w-768-95 { width: 95%; padding-left: 8px; padding-right: 8px; } .w-768-90 { width: 90%; padding-left: 8px; padding-right: 8px; } .w-768-85 { width: 85%; padding-left: 8px; padding-right: 8px; } .w-768-80 { width: 80%; padding-left: 8px; padding-right: 8px; } .w-768-75 { width: 75%; padding-left: 8px; padding-right: 8px; } .w-768-70 { width: 70%; padding-left: 8px; padding-right: 8px; } .w-768-65 { width: 65%; padding-left: 8px; padding-right: 8px; } .w-768-60 { width: 60%; padding-left: 8px; padding-right: 8px; } .w-768-55 { width: 55%; padding-left: 8px; padding-right: 8px; } .w-768-50 { width: 50%; padding-left: 8px; padding-right: 8px; } .w-768-45 { width: 45%; padding-left: 8px; padding-right: 8px; } .w-768-40 { width: 40%; padding-left: 8px; padding-right: 8px; } .w-768-35 { width: 35%; padding-left: 8px; padding-right: 8px; } .w-768-30 { width: 30%; padding-left: 8px; padding-right: 8px; } .w-768-25 { width: 25%; padding-left: 8px; padding-right: 8px; } .w-768-20 { width: 20%; padding-left: 8px; padding-right: 8px; } .w-768-15 { width: 15%; padding-left: 8px; padding-right: 8px; } .w-768-10 { width: 10%; padding-left: 8px; padding-right: 8px; } .w-768-5 { width: 5%; padding-left: 8px; padding-right: 8px; } .g-768-10 { grid-template-columns: repeat(10, 1fr); } .g-768-9 { grid-template-columns: repeat(9, 1fr); } .g-768-8 { grid-template-columns: repeat(8, 1fr); } .g-768-7 { grid-template-columns: repeat(7, 1fr); } .g-768-6 { grid-template-columns: repeat(6, 1fr); } .g-768-5 { grid-template-columns: repeat(5, 1fr); } .g-768-4 { grid-template-columns: repeat(4, 1fr); } .g-768-3 { grid-template-columns: repeat(3, 1fr); } .g-768-2 { grid-template-columns: repeat(2, 1fr); } .g-768-1 { grid-template-columns: repeat(1, 1fr); } .gp-768-70 { gap: 70px; } .gp-768-65 { gap: 65px; } .gp-768-60 { gap: 60px; } .gp-768-55 { gap: 55px; } .gp-768-50 { gap: 50px; } .gp-768-45 { gap: 45px; } .gp-768-40 { gap: 40px; } .gp-768-35 { gap: 35px; } .gp-768-30 { gap: 30px; } .gp-768-25 { gap: 25px; } .gp-768-20 { gap: 20px; } .gp-768-15 { gap: 15px; } .gp-768-10 { gap: 10px; } .gp-768-5 { gap: 5px; } .gp-768-0 { gap: 0px; } .w-768-33 { width: 33%; } .w-768-16 { width: 16.666666%; } .mb-768-100 { margin-bottom: 100px; } .mb-768-95 { margin-bottom: 95px; } .mb-768-90 { margin-bottom: 90px; } .mb-768-85 { margin-bottom: 85px; } .mb-768-80 { margin-bottom: 80px; } .mb-768-75 { margin-bottom: 75px; } .mb-768-70 { margin-bottom: 70px; } .mb-768-65 { margin-bottom: 65px; } .mb-768-60 { margin-bottom: 60px; } .mb-768-55 { margin-bottom: 55px; } .mb-768-50 { margin-bottom: 50px; } .mb-768-45 { margin-bottom: 45px; } .mb-768-40 { margin-bottom: 40px; } .mb-768-35 { margin-bottom: 35px; } .mb-768-30 { margin-bottom: 30px; } .mb-768-25 { margin-bottom: 25px; } .mb-768-20 { margin-bottom: 20px; } .mb-768-15 { margin-bottom: 15px; } .mb-768-10 { margin-bottom: 10px; } .mb-768-5 { margin-bottom: 5px; } .mb-768-0 { margin-bottom: 0px; } .pb-768-100 { padding-bottom: 100px; } .pb-768-95 { padding-bottom: 95px; } .pb-768-90 { padding-bottom: 90px; } .pb-768-85 { padding-bottom: 85px; } .pb-768-80 { padding-bottom: 80px; } .pb-768-75 { padding-bottom: 75px; } .pb-768-70 { padding-bottom: 70px; } .pb-768-65 { padding-bottom: 65px; } .pb-768-60 { padding-bottom: 60px; } .pb-768-55 { padding-bottom: 55px; } .pb-768-50 { padding-bottom: 50px; } .pb-768-45 { padding-bottom: 45px; } .pb-768-40 { padding-bottom: 40px; } .pb-768-35 { padding-bottom: 35px; } .pb-768-30 { padding-bottom: 30px; } .pb-768-25 { padding-bottom: 25px; } .pb-768-20 { padding-bottom: 20px; } .pb-768-15 { padding-bottom: 15px; } .pb-768-10 { padding-bottom: 10px; } .pb-768-5 { padding-bottom: 5px; } .pb-768-0 { padding-bottom: 0px; } } @media all and (max-width: 640px) { .f-640-10 .f-col { width: 10%; } .f-640-9 .f-col { width: 11.11111111%; } .f-640-8 .f-col { width: 12.5%; } .f-640-7 .f-col { width: 14.28571429%; } .f-640-6 .f-col { width: 16.66666667%; } .f-640-5 .f-col { width: 20%; } .f-640-4 .f-col { width: 25%; } .f-640-3 .f-col { width: 33.33333333%; } .f-640-2 .f-col { width: 50%; } .f-640-1 .f-col { width: 100%; } .w-640-100 { width: 100%; padding-left: 8px; padding-right: 8px; } .w-640-95 { width: 95%; padding-left: 8px; padding-right: 8px; } .w-640-90 { width: 90%; padding-left: 8px; padding-right: 8px; } .w-640-85 { width: 85%; padding-left: 8px; padding-right: 8px; } .w-640-80 { width: 80%; padding-left: 8px; padding-right: 8px; } .w-640-75 { width: 75%; padding-left: 8px; padding-right: 8px; } .w-640-70 { width: 70%; padding-left: 8px; padding-right: 8px; } .w-640-65 { width: 65%; padding-left: 8px; padding-right: 8px; } .w-640-60 { width: 60%; padding-left: 8px; padding-right: 8px; } .w-640-55 { width: 55%; padding-left: 8px; padding-right: 8px; } .w-640-50 { width: 50%; padding-left: 8px; padding-right: 8px; } .w-640-45 { width: 45%; padding-left: 8px; padding-right: 8px; } .w-640-40 { width: 40%; padding-left: 8px; padding-right: 8px; } .w-640-35 { width: 35%; padding-left: 8px; padding-right: 8px; } .w-640-30 { width: 30%; padding-left: 8px; padding-right: 8px; } .w-640-25 { width: 25%; padding-left: 8px; padding-right: 8px; } .w-640-20 { width: 20%; padding-left: 8px; padding-right: 8px; } .w-640-15 { width: 15%; padding-left: 8px; padding-right: 8px; } .w-640-10 { width: 10%; padding-left: 8px; padding-right: 8px; } .w-640-5 { width: 5%; padding-left: 8px; padding-right: 8px; } .g-640-10 { grid-template-columns: repeat(10, 1fr); } .g-640-9 { grid-template-columns: repeat(9, 1fr); } .g-640-8 { grid-template-columns: repeat(8, 1fr); } .g-640-7 { grid-template-columns: repeat(7, 1fr); } .g-640-6 { grid-template-columns: repeat(6, 1fr); } .g-640-5 { grid-template-columns: repeat(5, 1fr); } .g-640-4 { grid-template-columns: repeat(4, 1fr); } .g-640-3 { grid-template-columns: repeat(3, 1fr); } .g-640-2 { grid-template-columns: repeat(2, 1fr); } .g-640-1 { grid-template-columns: repeat(1, 1fr); } .gp-640-70 { gap: 70px; } .gp-640-65 { gap: 65px; } .gp-640-60 { gap: 60px; } .gp-640-55 { gap: 55px; } .gp-640-50 { gap: 50px; } .gp-640-45 { gap: 45px; } .gp-640-40 { gap: 40px; } .gp-640-35 { gap: 35px; } .gp-640-30 { gap: 30px; } .gp-640-25 { gap: 25px; } .gp-640-20 { gap: 20px; } .gp-640-15 { gap: 15px; } .gp-640-10 { gap: 10px; } .gp-640-5 { gap: 5px; } .gp-640-0 { gap: 0px; } .w-640-33 { width: 33%; } .w-640-16 { width: 16.666666%; } .mb-640-100 { margin-bottom: 100px; } .mb-640-95 { margin-bottom: 95px; } .mb-640-90 { margin-bottom: 90px; } .mb-640-85 { margin-bottom: 85px; } .mb-640-80 { margin-bottom: 80px; } .mb-640-75 { margin-bottom: 75px; } .mb-640-70 { margin-bottom: 70px; } .mb-640-65 { margin-bottom: 65px; } .mb-640-60 { margin-bottom: 60px; } .mb-640-55 { margin-bottom: 55px; } .mb-640-50 { margin-bottom: 50px; } .mb-640-45 { margin-bottom: 45px; } .mb-640-40 { margin-bottom: 40px; } .mb-640-35 { margin-bottom: 35px; } .mb-640-30 { margin-bottom: 30px; } .mb-640-25 { margin-bottom: 25px; } .mb-640-20 { margin-bottom: 20px; } .mb-640-15 { margin-bottom: 15px; } .mb-640-10 { margin-bottom: 10px; } .mb-640-5 { margin-bottom: 5px; } .mb-640-0 { margin-bottom: 0px; } .pb-640-100 { padding-bottom: 100px; } .pb-640-95 { padding-bottom: 95px; } .pb-640-90 { padding-bottom: 90px; } .pb-640-85 { padding-bottom: 85px; } .pb-640-80 { padding-bottom: 80px; } .pb-640-75 { padding-bottom: 75px; } .pb-640-70 { padding-bottom: 70px; } .pb-640-65 { padding-bottom: 65px; } .pb-640-60 { padding-bottom: 60px; } .pb-640-55 { padding-bottom: 55px; } .pb-640-50 { padding-bottom: 50px; } .pb-640-45 { padding-bottom: 45px; } .pb-640-40 { padding-bottom: 40px; } .pb-640-35 { padding-bottom: 35px; } .pb-640-30 { padding-bottom: 30px; } .pb-640-25 { padding-bottom: 25px; } .pb-640-20 { padding-bottom: 20px; } .pb-640-15 { padding-bottom: 15px; } .pb-640-10 { padding-bottom: 10px; } .pb-640-5 { padding-bottom: 5px; } .pb-640-0 { padding-bottom: 0px; } } @media all and (max-width: 576px) { .f-576-10 .f-col { width: 10%; } .f-576-9 .f-col { width: 11.11111111%; } .f-576-8 .f-col { width: 12.5%; } .f-576-7 .f-col { width: 14.28571429%; } .f-576-6 .f-col { width: 16.66666667%; } .f-576-5 .f-col { width: 20%; } .f-576-4 .f-col { width: 25%; } .f-576-3 .f-col { width: 33.33333333%; } .f-576-2 .f-col { width: 50%; } .f-576-1 .f-col { width: 100%; } .g-576-10 { grid-template-columns: repeat(10, 1fr); } .g-576-9 { grid-template-columns: repeat(9, 1fr); } .g-576-8 { grid-template-columns: repeat(8, 1fr); } .g-576-7 { grid-template-columns: repeat(7, 1fr); } .g-576-6 { grid-template-columns: repeat(6, 1fr); } .g-576-5 { grid-template-columns: repeat(5, 1fr); } .g-576-4 { grid-template-columns: repeat(4, 1fr); } .g-576-3 { grid-template-columns: repeat(3, 1fr); } .g-576-2 { grid-template-columns: repeat(2, 1fr); } .g-576-1 { grid-template-columns: repeat(1, 1fr); } .gp-576-70 { gap: 70px; } .gp-576-65 { gap: 65px; } .gp-576-60 { gap: 60px; } .gp-576-55 { gap: 55px; } .gp-576-50 { gap: 50px; } .gp-576-45 { gap: 45px; } .gp-576-40 { gap: 40px; } .gp-576-35 { gap: 35px; } .gp-576-30 { gap: 30px; } .gp-576-25 { gap: 25px; } .gp-576-20 { gap: 20px; } .gp-576-15 { gap: 15px; } .gp-576-10 { gap: 10px; } .gp-576-5 { gap: 5px; } .gp-576-0 { gap: 0px; } .w-576-100 { width: 100%; padding-left: 8px; padding-right: 8px; } .w-576-95 { width: 95%; padding-left: 8px; padding-right: 8px; } .w-576-90 { width: 90%; padding-left: 8px; padding-right: 8px; } .w-576-85 { width: 85%; padding-left: 8px; padding-right: 8px; } .w-576-80 { width: 80%; padding-left: 8px; padding-right: 8px; } .w-576-75 { width: 75%; padding-left: 8px; padding-right: 8px; } .w-576-70 { width: 70%; padding-left: 8px; padding-right: 8px; } .w-576-65 { width: 65%; padding-left: 8px; padding-right: 8px; } .w-576-60 { width: 60%; padding-left: 8px; padding-right: 8px; } .w-576-55 { width: 55%; padding-left: 8px; padding-right: 8px; } .w-576-50 { width: 50%; padding-left: 8px; padding-right: 8px; } .w-576-45 { width: 45%; padding-left: 8px; padding-right: 8px; } .w-576-40 { width: 40%; padding-left: 8px; padding-right: 8px; } .w-576-35 { width: 35%; padding-left: 8px; padding-right: 8px; } .w-576-30 { width: 30%; padding-left: 8px; padding-right: 8px; } .w-576-25 { width: 25%; padding-left: 8px; padding-right: 8px; } .w-576-20 { width: 20%; padding-left: 8px; padding-right: 8px; } .w-576-15 { width: 15%; padding-left: 8px; padding-right: 8px; } .w-576-10 { width: 10%; padding-left: 8px; padding-right: 8px; } .w-576-5 { width: 5%; padding-left: 8px; padding-right: 8px; } .w-576-33 { width: 33%; } .w-576-16 { width: 16.666666%; } .mb-576-100 { margin-bottom: 100px; } .mb-576-95 { margin-bottom: 95px; } .mb-576-90 { margin-bottom: 90px; } .mb-576-85 { margin-bottom: 85px; } .mb-576-80 { margin-bottom: 80px; } .mb-576-75 { margin-bottom: 75px; } .mb-576-70 { margin-bottom: 70px; } .mb-576-65 { margin-bottom: 65px; } .mb-576-60 { margin-bottom: 60px; } .mb-576-55 { margin-bottom: 55px; } .mb-576-50 { margin-bottom: 50px; } .mb-576-45 { margin-bottom: 45px; } .mb-576-40 { margin-bottom: 40px; } .mb-576-35 { margin-bottom: 35px; } .mb-576-30 { margin-bottom: 30px; } .mb-576-25 { margin-bottom: 25px; } .mb-576-20 { margin-bottom: 20px; } .mb-576-15 { margin-bottom: 15px; } .mb-576-10 { margin-bottom: 10px; } .mb-576-5 { margin-bottom: 5px; } .mb-576-0 { margin-bottom: 0px; } .pb-576-100 { padding-bottom: 100px; } .pb-576-95 { padding-bottom: 95px; } .pb-576-90 { padding-bottom: 90px; } .pb-576-85 { padding-bottom: 85px; } .pb-576-80 { padding-bottom: 80px; } .pb-576-75 { padding-bottom: 75px; } .pb-576-70 { padding-bottom: 70px; } .pb-576-65 { padding-bottom: 65px; } .pb-576-60 { padding-bottom: 60px; } .pb-576-55 { padding-bottom: 55px; } .pb-576-50 { padding-bottom: 50px; } .pb-576-45 { padding-bottom: 45px; } .pb-576-40 { padding-bottom: 40px; } .pb-576-35 { padding-bottom: 35px; } .pb-576-30 { padding-bottom: 30px; } .pb-576-25 { padding-bottom: 25px; } .pb-576-20 { padding-bottom: 20px; } .pb-576-15 { padding-bottom: 15px; } .pb-576-10 { padding-bottom: 10px; } .pb-576-5 { padding-bottom: 5px; } .pb-576-0 { padding-bottom: 0px; } } @media all and (max-width: 480px) { .f-480-10 .f-col { width: 10%; } .f-480-9 .f-col { width: 11.11111111%; } .f-480-8 .f-col { width: 12.5%; } .f-480-7 .f-col { width: 14.28571429%; } .f-480-6 .f-col { width: 16.66666667%; } .f-480-5 .f-col { width: 20%; } .f-480-4 .f-col { width: 25%; } .f-480-3 .f-col { width: 33.33333333%; } .f-480-2 .f-col { width: 50%; } .f-480-1 .f-col { width: 100%; } .w-480-100 { width: 100%; padding-left: 8px; padding-right: 8px; } .w-480-95 { width: 95%; padding-left: 8px; padding-right: 8px; } .w-480-90 { width: 90%; padding-left: 8px; padding-right: 8px; } .w-480-85 { width: 85%; padding-left: 8px; padding-right: 8px; } .w-480-80 { width: 80%; padding-left: 8px; padding-right: 8px; } .w-480-75 { width: 75%; padding-left: 8px; padding-right: 8px; } .w-480-70 { width: 70%; padding-left: 8px; padding-right: 8px; } .w-480-65 { width: 65%; padding-left: 8px; padding-right: 8px; } .w-480-60 { width: 60%; padding-left: 8px; padding-right: 8px; } .w-480-55 { width: 55%; padding-left: 8px; padding-right: 8px; } .w-480-50 { width: 50%; padding-left: 8px; padding-right: 8px; } .w-480-45 { width: 45%; padding-left: 8px; padding-right: 8px; } .w-480-40 { width: 40%; padding-left: 8px; padding-right: 8px; } .w-480-35 { width: 35%; padding-left: 8px; padding-right: 8px; } .w-480-30 { width: 30%; padding-left: 8px; padding-right: 8px; } .w-480-25 { width: 25%; padding-left: 8px; padding-right: 8px; } .w-480-20 { width: 20%; padding-left: 8px; padding-right: 8px; } .w-480-15 { width: 15%; padding-left: 8px; padding-right: 8px; } .w-480-10 { width: 10%; padding-left: 8px; padding-right: 8px; } .w-480-5 { width: 5%; padding-left: 8px; padding-right: 8px; } .g-480-10 { grid-template-columns: repeat(10, 1fr); } .g-480-9 { grid-template-columns: repeat(9, 1fr); } .g-480-8 { grid-template-columns: repeat(8, 1fr); } .g-480-7 { grid-template-columns: repeat(7, 1fr); } .g-480-6 { grid-template-columns: repeat(6, 1fr); } .g-480-5 { grid-template-columns: repeat(5, 1fr); } .g-480-4 { grid-template-columns: repeat(4, 1fr); } .g-480-3 { grid-template-columns: repeat(3, 1fr); } .g-480-2 { grid-template-columns: repeat(2, 1fr); } .g-480-1 { grid-template-columns: repeat(1, 1fr); } .gp-480-70 { gap: 70px; } .gp-480-65 { gap: 65px; } .gp-480-60 { gap: 60px; } .gp-480-55 { gap: 55px; } .gp-480-50 { gap: 50px; } .gp-480-45 { gap: 45px; } .gp-480-40 { gap: 40px; } .gp-480-35 { gap: 35px; } .gp-480-30 { gap: 30px; } .gp-480-25 { gap: 25px; } .gp-480-20 { gap: 20px; } .gp-480-15 { gap: 15px; } .gp-480-10 { gap: 10px; } .gp-480-5 { gap: 5px; } .gp-480-0 { gap: 0px; } .w-480-33 { width: 33%; } .w-480-16 { width: 16.666666%; } .mb-480-100 { margin-bottom: 100px; } .mb-480-95 { margin-bottom: 95px; } .mb-480-90 { margin-bottom: 90px; } .mb-480-85 { margin-bottom: 85px; } .mb-480-80 { margin-bottom: 80px; } .mb-480-75 { margin-bottom: 75px; } .mb-480-70 { margin-bottom: 70px; } .mb-480-65 { margin-bottom: 65px; } .mb-480-60 { margin-bottom: 60px; } .mb-480-55 { margin-bottom: 55px; } .mb-480-50 { margin-bottom: 50px; } .mb-480-45 { margin-bottom: 45px; } .mb-480-40 { margin-bottom: 40px; } .mb-480-35 { margin-bottom: 35px; } .mb-480-30 { margin-bottom: 30px; } .mb-480-25 { margin-bottom: 25px; } .mb-480-20 { margin-bottom: 20px; } .mb-480-15 { margin-bottom: 15px; } .mb-480-10 { margin-bottom: 10px; } .mb-480-5 { margin-bottom: 5px; } .mb-480-0 { margin-bottom: 0px; } .pb-480-100 { padding-bottom: 100px; } .pb-480-95 { padding-bottom: 95px; } .pb-480-90 { padding-bottom: 90px; } .pb-480-85 { padding-bottom: 85px; } .pb-480-80 { padding-bottom: 80px; } .pb-480-75 { padding-bottom: 75px; } .pb-480-70 { padding-bottom: 70px; } .pb-480-65 { padding-bottom: 65px; } .pb-480-60 { padding-bottom: 60px; } .pb-480-55 { padding-bottom: 55px; } .pb-480-50 { padding-bottom: 50px; } .pb-480-45 { padding-bottom: 45px; } .pb-480-40 { padding-bottom: 40px; } .pb-480-35 { padding-bottom: 35px; } .pb-480-30 { padding-bottom: 30px; } .pb-480-25 { padding-bottom: 25px; } .pb-480-20 { padding-bottom: 20px; } .pb-480-15 { padding-bottom: 15px; } .pb-480-10 { padding-bottom: 10px; } .pb-480-5 { padding-bottom: 5px; } .pb-480-0 { padding-bottom: 0px; } } @media all and (max-width: 400px) { .f-400-10 .f-col { width: 10%; } .f-400-9 .f-col { width: 11.11111111%; } .f-400-8 .f-col { width: 12.5%; } .f-400-7 .f-col { width: 14.28571429%; } .f-400-6 .f-col { width: 16.66666667%; } .f-400-5 .f-col { width: 20%; } .f-400-4 .f-col { width: 25%; } .f-400-3 .f-col { width: 33.33333333%; } .f-400-2 .f-col { width: 50%; } .f-400-1 .f-col { width: 100%; } .w-400-100 { width: 100%; padding-left: 8px; padding-right: 8px; } .w-400-95 { width: 95%; padding-left: 8px; padding-right: 8px; } .w-400-90 { width: 90%; padding-left: 8px; padding-right: 8px; } .w-400-85 { width: 85%; padding-left: 8px; padding-right: 8px; } .w-400-80 { width: 80%; padding-left: 8px; padding-right: 8px; } .w-400-75 { width: 75%; padding-left: 8px; padding-right: 8px; } .w-400-70 { width: 70%; padding-left: 8px; padding-right: 8px; } .w-400-65 { width: 65%; padding-left: 8px; padding-right: 8px; } .w-400-60 { width: 60%; padding-left: 8px; padding-right: 8px; } .w-400-55 { width: 55%; padding-left: 8px; padding-right: 8px; } .w-400-50 { width: 50%; padding-left: 8px; padding-right: 8px; } .w-400-45 { width: 45%; padding-left: 8px; padding-right: 8px; } .w-400-40 { width: 40%; padding-left: 8px; padding-right: 8px; } .w-400-35 { width: 35%; padding-left: 8px; padding-right: 8px; } .w-400-30 { width: 30%; padding-left: 8px; padding-right: 8px; } .w-400-25 { width: 25%; padding-left: 8px; padding-right: 8px; } .w-400-20 { width: 20%; padding-left: 8px; padding-right: 8px; } .w-400-15 { width: 15%; padding-left: 8px; padding-right: 8px; } .w-400-10 { width: 10%; padding-left: 8px; padding-right: 8px; } .w-400-5 { width: 5%; padding-left: 8px; padding-right: 8px; } .g-400-10 { grid-template-columns: repeat(10, 1fr); } .g-400-9 { grid-template-columns: repeat(9, 1fr); } .g-400-8 { grid-template-columns: repeat(8, 1fr); } .g-400-7 { grid-template-columns: repeat(7, 1fr); } .g-400-6 { grid-template-columns: repeat(6, 1fr); } .g-400-5 { grid-template-columns: repeat(5, 1fr); } .g-400-4 { grid-template-columns: repeat(4, 1fr); } .g-400-3 { grid-template-columns: repeat(3, 1fr); } .g-400-2 { grid-template-columns: repeat(2, 1fr); } .g-400-1 { grid-template-columns: repeat(1, 1fr); } .gp-400-70 { gap: 70px; } .gp-400-65 { gap: 65px; } .gp-400-60 { gap: 60px; } .gp-400-55 { gap: 55px; } .gp-400-50 { gap: 50px; } .gp-400-45 { gap: 45px; } .gp-400-40 { gap: 40px; } .gp-400-35 { gap: 35px; } .gp-400-30 { gap: 30px; } .gp-400-25 { gap: 25px; } .gp-400-20 { gap: 20px; } .gp-400-15 { gap: 15px; } .gp-400-10 { gap: 10px; } .gp-400-5 { gap: 5px; } .gp-400-0 { gap: 0px; } .w-400-33 { width: 33%; } .w-400-16 { width: 16.666666%; } .mb-400-100 { margin-bottom: 100px; } .mb-400-95 { margin-bottom: 95px; } .mb-400-90 { margin-bottom: 90px; } .mb-400-85 { margin-bottom: 85px; } .mb-400-80 { margin-bottom: 80px; } .mb-400-75 { margin-bottom: 75px; } .mb-400-70 { margin-bottom: 70px; } .mb-400-65 { margin-bottom: 65px; } .mb-400-60 { margin-bottom: 60px; } .mb-400-55 { margin-bottom: 55px; } .mb-400-50 { margin-bottom: 50px; } .mb-400-45 { margin-bottom: 45px; } .mb-400-40 { margin-bottom: 40px; } .mb-400-35 { margin-bottom: 35px; } .mb-400-30 { margin-bottom: 30px; } .mb-400-25 { margin-bottom: 25px; } .mb-400-20 { margin-bottom: 20px; } .mb-400-15 { margin-bottom: 15px; } .mb-400-10 { margin-bottom: 10px; } .mb-400-5 { margin-bottom: 5px; } .mb-400-0 { margin-bottom: 0px; } .pb-400-100 { padding-bottom: 100px; } .pb-400-95 { padding-bottom: 95px; } .pb-400-90 { padding-bottom: 90px; } .pb-400-85 { padding-bottom: 85px; } .pb-400-80 { padding-bottom: 80px; } .pb-400-75 { padding-bottom: 75px; } .pb-400-70 { padding-bottom: 70px; } .pb-400-65 { padding-bottom: 65px; } .pb-400-60 { padding-bottom: 60px; } .pb-400-55 { padding-bottom: 55px; } .pb-400-50 { padding-bottom: 50px; } .pb-400-45 { padding-bottom: 45px; } .pb-400-40 { padding-bottom: 40px; } .pb-400-35 { padding-bottom: 35px; } .pb-400-30 { padding-bottom: 30px; } .pb-400-25 { padding-bottom: 25px; } .pb-400-20 { padding-bottom: 20px; } .pb-400-15 { padding-bottom: 15px; } .pb-400-10 { padding-bottom: 10px; } .pb-400-5 { padding-bottom: 5px; } .pb-400-0 { padding-bottom: 0px; } } /*========================================================================== => Global Styles ========================================================================== */ *, *:before, *:after { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } audio, canvas, video { display: inline-block; } audio:not([controls]) { display: none; height: 0; } [hidden] { display: none; } html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; width: 100%; } body { width: 100%; margin: 0; padding: 0; overflow-x: hidden; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } dfn { font-style: italic; } hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; } mark { background: #ff0; color: #000; } code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; } pre { white-space: pre-wrap; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } svg:not(:root) { overflow: hidden; } figure { margin: 0; } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { border: 0; padding: 0; } button, input, select, textarea { font-family: inherit; font-size: 100%; margin: 0; } button, input { line-height: normal; } button, select { text-transform: none; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } button[disabled], html input[disabled] { cursor: default; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; } input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } textarea { overflow: auto; vertical-align: top; } table { border-collapse: collapse; border-spacing: 0; } input, button, select, textarea { font-family: inherit; font-size: inherit; line-height: inherit; } button, input, select[multiple], textarea { background-image: none; } a { transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; text-decoration: none; } a:hover { text-decoration: none; } a:active, a:hover, a:focus { outline: 0; text-decoration: none; } img { max-width: 100%; width: 100%; height: 100%; border: 0; vertical-align: middle; } img.obj-cover { width: 100%; height: 100%; object-fit: cover; } img.obj-contain { width: 100%; height: 100%; object-fit: contain; } ul { list-style: none; padding: 0; margin: 0; } ul, ol, dl { -webkit-margin-after: 0; -webkit-margin-before: 0; } hr { margin-top: 20px; margin-bottom: 20px; border: 0; border-top: 1px solid #CFD1D4; } /*========================================================================== => checkbox contact form 7 ========================================================================== */ span.wpcf7-list-item { display: block; } .wpcf7-list-item { display: flex; align-items: center; margin: 0 0 40px 0; } .wpcf7-list-item input { display: none; } .wpcf7-list-item-label { font-size: 24px; line-height: 1.1; color: #000000; position: relative; cursor: pointer; padding-left: 48px; display: block; } .wpcf7-list-item input[type="checkbox"] ~ span::before { content: ""; -webkit-appearance: none; background-color: transparent; border: 1px solid #000; padding: 10px; display: inline-block; position: absolute; left: 0; vertical-align: middle; cursor: pointer; width: 26px; height: 26px; border-radius: 6px; } .wpcf7-list-item input[type="checkbox"]:checked ~ span::after { content: ""; display: block; position: absolute; top: 5px; left: 10px; width: 7px; height: 14px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); border-bottom-right-radius: 2px; } .wpcf7-list-item input[type="checkbox"]:checked ~ span::before { background: #03333F; border: 1px solid #03333F; } .wpcf7-list-item-label::before, .wpcf7-list-item-label::after { content: " "; display: none; } .wpcf7-form .button { margin-right: 10px; } .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output { border: none; color: #ff6900; } /*========================================================================== => buttons ========================================================================== */ .button { background: var(--button-fill); border: none; outline: none; border: 1px solid transparent; color: #ffffff; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; line-height: 40px; padding: 0 16px; border-radius: 60px; font-size: 16px; text-align: center; font-family: "Poppins", sans-serif; cursor: pointer; transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; } .button:hover { background: transparent; border: 1px solid var(--button-fill); color: var(--button-fill); } .button.line { background: transparent; border: 1px solid var(--button-fill); color: var(--button-fill); } .button.line:hover { background: var(--button-line); border: 1px solid var(--button-line); color: #fff; } .button.black { background: transparent; border: 1px solid #343434; color: #343434; } .button.black:hover { background: var(--button-line); border: 1px solid var(--button-line); color: #fff; } .button-sm { height: 40px; font-size: 14px; padding: 0 12px; } .button i { font-size: var(--fs20); } .button:hover, .button:focus, .button:active { text-decoration: none; outline: none; } button:focus { outline: none; } .button--block { width: 100%; } .button svg { position: relative; top: -2px; } .button svg path { transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; } .button .phone { margin-right: 5px; } /*========================================================================== => Form Elements ========================================================================== */ .element-section { padding: 50px 0; border-bottom: 1px solid #ddd; } .element-section .ehdn1 { margin-bottom: 30px; } .element-section .ehdn2 { font-size: 18px; margin-bottom: 20px; margin-top: 30px; } .myElem { display: block; border: 1px solid #ccc; padding: 20px; text-align: center; } .form-grp, .form-textarea-group { position: relative; margin-bottom: 20px; } .form-grp .inputError { border-bottom: 1px solid var(--input-error); } .error-msg { font-size: 12px; color: var(--input-error); margin: 0; } .error-msg2 { font-size: 12px; color: var(--input-error); margin-bottom: 20px; } .whatsapp { margin-right: 0; } .form-field { height: var(--input-height); font-size: var(--fs16); border-radius: 10px; overflow: hidden; border: 1px solid #E1E1E1; width: 100%; z-index: 2; position: relative; background: transparent; color: #000; outline: none; padding: 0 20px; background-color: #fff; transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; } .form-field:-webkit-autofill, .form-field:-webkit-autofill:hover, .form-field:-webkit-autofill:focus, .form-field:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 30px white inset !important; } .form-field:focus, .form-field.field--not-empty { border: 1px solid #000; } .form-label { color: #343434; font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: -0.28px; margin-bottom: 6px; } .form-field:focus ~ .form-label, .form-field.field--not-empty ~ .form-label, .form-grp.sTop .form-label { font-size: var(--input-fs-top); background: #fff; top: -10px; z-index: 2; } .form-textarea-group .form-field { height: 80px; line-height: 1.4; padding: 16px; resize: none; } /* Password View */ .form-grp.int-padl input, .form-grp.int-padl select { padding-left: 50px; } .form-grp.int-padr input, .form-grp.int-padr select { padding-right: 50px; } .form-grp .form-icon { position: absolute; right: 15px; bottom: 26px; line-height: 0; font-size: 22px; cursor: pointer; z-index: 9; } .form-grp .view-pass { position: absolute; right: 10px; bottom: 15px; line-height: 0; font-size: 22px; cursor: pointer; z-index: 9; } .form-grp.disabled-field { background: #f5f5f5; } .form-grp.disabled-field .form-field { border-color: #f5f5f5; } .form-grp.disabled-field .form-label { color: #999; background: transparent; width: 100%; transition: all 0s ease-in-out; -webkit-transition: all 0s ease-in-out; } /* Password View end */ /* date Picker */ .datetimepicker-input ~ i { position: absolute; right: 20px; top: 25px; line-height: 0; font-size: 22px; color: #A7B3C4; } .daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect { border: 1px solid #a7b3c4; height: 30px; z-index: 2; padding: 0 10px; font-size: 14px; color: #1c2d41; font-weight: 400; outline: none; border-radius: 5px; background: transparent url(../img/drop-down-arrow.svg) no-repeat calc(100% - 5px) center / 10px; -webkit-appearance: none; } .daterangepicker { border: 0; color: #425061; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; background: #fff; -webkit-box-shadow: 1px 9px 21px rgba(53, 143, 207, 0.2); -moz-box-shadow: 1px 9px 21px rgba(53, 143, 207, 0.2); box-shadow: 1px 9px 21px rgba(53, 143, 207, 0.2); padding: 10px; z-index: 10000; } .daterangepicker td.start-date { border-radius: 50% 0 0 50%; } .daterangepicker td.end-date { border-radius: 0 50% 50% 0; } .daterangepicker .calendar-table .next span, .daterangepicker .calendar-table .prev span { color: #A7B3C4; border: 0; -webkit-transform: rotate(0deg); transform: rotate(0deg); } .daterangepicker .calendar-table .next span:hover, .daterangepicker .calendar-table .prev span:hover { color: #3592cf; } .daterangepicker .calendar-table .next span:before, .daterangepicker .calendar-table .prev span:before { border: 1px solid #A7B3C4; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; display: block; min-width: 24px; width: 24px; height: 24px; line-height: 24px; font-size: 10px; } .daterangepicker .calendar-table .next span:hover:before, .daterangepicker .calendar-table .prev span:hover:before { border: 1px solid #3490cf; } .daterangepicker .calendar-table .next span:before { content: "\e918"; font-family: 'icomoon' !important; } .daterangepicker .calendar-table .prev span:before { content: "\e912"; font-family: 'icomoon' !important; } .daterangepicker .calendar-table th, .daterangepicker .calendar-table td { height: 32px; } .daterangepicker .btn-primary { font-family: "medium"; border-color: transparent; background: #1baac4; color: #fff; box-shadow: none !important; } .daterangepicker:before { border-bottom: 0; } .daterangepicker .calendar-table th { font-family: "bold"; font-size: 14px; color: #000000; } .daterangepicker th.month { font-family: "medium"; font-size: 18px; letter-spacing: 0.01em; color: #000; } .daterangepicker td.in-range { background-color: #3592cf; color: #fff; } .daterangepicker td.active, .daterangepicker td.active:hover { background-color: #3592cf; } .daterangepicker .calendar-table td { font-family: "regular"; font-size: 14px; } .daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date { color: rgba(167, 179, 196, 0.5); } .daterangepicker th.available:hover { background-color: transparent; } .daterangepicker.show-calendar .drp-buttons { border-top: 0; } .daterangepicker.show-calendar .drp-buttons .drp-selected, .daterangepicker.show-calendar .drp-buttons .cancelBtn { display: none; } .daterangepicker .drp-buttons .btn { margin-left: 0; width: 100%; padding: 6px 8px; } .daterangepicker td.start-date.end-date { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; background-color: #1baac4; } /* date Picker end */ /* Select */ .select-field { background: url('../img/drop-down-arrow.svg') no-repeat calc(100% - 15px) center; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #ffffff; } .select-field option { color: #9fa4a9; } .select-field option:checked, .select-field option:hover { background: #7cb2f6; color: #fff; } /* // Select */ /* Placeholder */ .form-grp input::-webkit-input-placeholder, .form-grp input:-ms-input-placeholder, .form-grp input::placeholder { color: #666; } .form-grp input::-webkit-input-placeholder { color: #666; } /* Placeholder end */ label.error { font-weight: 400; margin: 0; margin-top: 5px; line-height: 2; font-size: 14px; color: #f71336; position: relative; } /*========================================================================== => Radio Small ========================================================================== */ .radio-box { position: relative; display: inline-block; margin-right: 20px; margin-bottom: 30px; } .radio-box input { position: absolute; width: 0; opacity: 0; } .radio-box label { font-size: 18px; color: #000; margin: 0; padding: 5px; padding-left: 36px; cursor: pointer; position: relative; } .radio-box label:before { content: ""; width: 25px; height: 25px; border-radius: 50%; background: transparent; border: 1px solid #000; display: inline-block; position: absolute; left: 0; top: 5px; transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; } .radio-box input:checked ~ label::before { border: 7px solid #000; } .radio-box label.error { display: none !important; } .radio-box input.error ~ label { color: #ff2323; } .radio-box input.error ~ .chk-label:before { border: 1px solid #ff2323; } /* // Radio Box */ /*========================================================================== => Checkbox Small ========================================================================== */ .checkbox-box { position: relative; display: flex; margin-bottom: 20px; } .checkbox-box input { position: absolute; width: 0; opacity: 0; } .checkbox-box input.only-chkbox { position: absolute; width: 20px; height: 20px; top: 6px; left: 1px; cursor: pointer; z-index: 2; opacity: 0; } .checkbox-box .chk-label { font-size: 14px; font-weight: 500; color: var(--clr-grey); line-height: 1.6; margin: 0; padding: 5px; padding-left: 30px; cursor: pointer; position: relative; transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; } .checkbox-box .chk-label:before { content: ""; width: 20px; height: 20px; border-radius: 4px; background: #fff; border: 1.5px solid #A7A7A7; display: inline-block; position: absolute; left: 0; top: 6px; transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; } .checkbox-box .chk-label:after { content: ""; border-radius: 3px; display: inline-block; position: absolute; left: 2px; top: 8px; } .checkbox-box input:checked ~ .chk-label { color: #000; } .checkbox-box input:checked ~ .chk-label::before { border-color: var(--clr-blue); background: var(--clr-blue); } .checkbox-box input:checked ~ .chk-label::after { font: normal normal normal 1em / 1 "Phosphor"; content: "\e182"; color: #000; font-size: 16px; } .checkbox-box label.error { display: none !important; } .checkbox-box input.error ~ .chk-label { color: #ff2323; } .checkbox-box input.error ~ .chk-label:before { border: 1px solid #ff2323; } /* // Checkbox */ /* checkbox 2 */ .checkbox-box.chk-rd .chk-label:before { border-radius: 100%; } .checkbox-box input:checked ~ .chk-label::before { background: var(--clr-blue); } .checkbox-box input:checked ~ .chk-label::after { color: #ffffff; } /* checkbox 2 end */ /* checkbox 3 */ .checkbox-box.check-three { width: 100%; margin-bottom: 0; padding-bottom: 30px; } .checkbox-box.check-three label { border: 1px solid #e7e9ec; text-align: center; border-radius: 8px; padding: 25px 50px; max-width: 255px; width: 100%; height: 100%; display: flex; justify-content: center; flex-direction: column; } .checkbox-box.check-three label i { display: block; font-size: 60px; margin-bottom: 20px; color: #8594AF; } .checkbox-box.check-three label span { border-radius: 8px; font-size: 18px; color: #8594af; } .checkbox-box.check-three label:before { border-radius: 100%; border: 1px solid #000; } .checkbox-box.check-three label:before, .checkbox-box.check-three label:after { left: inherit; right: 15px; top: 15px; } .checkbox-box.check-three input:checked ~ .chk-label { border: 1px solid #000; } .checkbox-box.check-three input:checked ~ .chk-label span { font-family: 700; color: #30223b; } .checkbox-box.check-three input:checked ~ .chk-label i { color: #000; } .checkbox-box.check-three input:checked ~ .chk-label .home-img { filter: none; } .checkbox-box.check-three input:checked ~ .chk-label::after { width: 22px; height: 22px; border-radius: 100%; position: absolute; background: #000; color: #fff; display: -webkit-flex; display: -webkit-box; display: -moz-flex; display: -moz-box; display: -ms-flexbox; display: flex; justify-content: center; align-items: center; } /* checkbox 3 end */ /* checkbox 4 */ .checkbox-box.chk-four { margin-right: 10px; } .checkbox-box.chk-four label { padding: 7px 15px; border: 1px solid #DDE3EE; border-radius: 8px; display: -webkit-flex; display: -webkit-box; display: -moz-flex; display: -moz-box; display: -ms-flexbox; display: flex; justify-content: flex-start; align-items: center; } .checkbox-box.chk-four label i { font-size: 18px; color: #8594AF; margin-right: 10px; position: absolute; left: 15px; } .checkbox-box.chk-four label span { font-family: 500; font-size: 14px; color: #000; margin-left: 25px; } .checkbox-box.chk-four label:before, .checkbox-box.chk-four label:after { display: none; } .checkbox-box.chk-four.chk-err input:checked ~ .chk-label { border: 1px solid var(--clr-red); } .checkbox-box.chk-four.chk-err input:checked ~ .chk-label i { color: var(--clr-red); } .checkbox-box.chk-four input:checked ~ .chk-label { border: 1px solid var(--clr-grn); } .checkbox-box.chk-four input:checked ~ .chk-label i { color: var(--clr-grn); } /* checkbox 4 end */ /* checkbox 5 */ .checkbox-box.check-five .chk-label { padding: 12px 25px; border: 1px solid #DDE3EE; border-radius: 8px; display: -webkit-flex; display: -webkit-box; display: -moz-flex; display: -moz-box; display: -ms-flexbox; display: flex; justify-content: flex-start; align-items: center; } .checkbox-box.check-five .chk-label span { font-family: 500; font-size: 16px; color: #8594AF; } .checkbox-box.check-five .chk-label:before { border-radius: 100%; border: none; } .checkbox-box.check-five .chk-label:before, .checkbox-box.check-five .chk-label:after { left: inherit; right: -11px; top: -11px; } .checkbox-box.check-five input:checked ~ .chk-label { border: 1px solid #000; } .checkbox-box.check-five input:checked ~ .chk-label span { color: #000000; } .checkbox-box.check-five input:checked ~ .chk-label::after { width: 22px; height: 22px; border-radius: 100%; position: absolute; color: #fff; display: -webkit-flex; display: -webkit-box; display: -moz-flex; display: -moz-box; display: -ms-flexbox; display: flex; justify-content: center; align-items: center; } /* checkbox 5 end */ /*========================================================================== => Modal ==========================================================================*/ .modal-subTitle { font-size: 14px; line-height: 1.2; color: #000000; margin-bottom: 4px; } .modal-title { font-weight: 600; font-size: 26px; margin-bottom: 20px; line-height: 1.2; color: #003f59; border-bottom: 1px solid rgba(0, 63, 89, 0.1); padding-bottom: 10px; } .modal-para p { font-size: 16px; line-height: 1.6; color: #8793a2; margin-bottom: 8px; } .modal-para p:last-child { margin-bottom: 0; } .modal-cancel { cursor: pointer; position: absolute; top: 20px; right: 20px; z-index: 9; font-size: 24px; line-height: 1; transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; } .modal-cross { display: flex; font-size: 22px; margin: 0 auto 12px; margin-right: 0; color: #000000; width: fit-content; cursor: pointer; } .modal-cross i { transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; } .modal-cross:hover i { transform: rotate(90deg); } .modal-content { display: block; border: none; border-radius: 10px; padding: 24px; box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.1); } .window-1440 { max-width: 1440px; padding: 0 15px; } .window-990 { max-width: 990px; padding: 0 15px; } .window-500 { max-width: 500px; padding: 0 15px; } .static-cont { margin-bottom: 32px; } .static-cont li { font-size: 14px; color: #233037; padding-left: 20px; margin-bottom: 6px; position: relative; } .static-cont li p { margin-bottom: 10px; } .static-cont li:before { content: ''; position: absolute; left: 0; top: 0; width: 7px; height: 7px; background: #fd9933; border-radius: 50%; top: 7px; } .static-cont p { font-size: 14px; color: #233037; margin-bottom: 20px; } .modal-backdrop.show { opacity: 0.9; } .modal-backdrop { background-color: #fff; } .modal-cancel:hover { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .ellipsis1 { white-space: normal; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .ellipsis2 { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ellipsis3 { white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .ellipsis4 { white-space: normal; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .flex-justify { display: -webkit-flex; display: -webkit-box; display: -moz-flex; display: -moz-box; display: -ms-flexbox; display: flex; justify-content: center; align-items: center; } .element-head { font-size: 40px; font-weight: bold; } /* content page */ .content-hdn { font-weight: 700; font-size: 42px; color: #171717; text-align: center; margin-bottom: 48px; } .content-body { margin-bottom: 80px; } .content-body img { height: 400px; width: 100%; object-fit: cover; border-radius: 10px; overflow: hidden; margin-bottom: 24px; } .content-body h1, .content-body h2, .content-body h3, .content-body h4, .content-body h5, .content-body h6 { font-size: 32px; color: var(--clr-black); margin: 32px 0 16px; } .content-body h1:first-child, .content-body h2:first-child, .content-body h3:first-child, .content-body h4:first-child, .content-body h5:first-child, .content-body h6:first-child { margin-top: 0; } .content-body p { font-size: 16px; line-height: 1.6; color: var(--clr-dgrey); margin-bottom: 16px; } .content-body a { color: var(--clr-blue); } .content-body a:hover { color: var(--clr-maroon); } .content-body blockquote { border-radius: 10px; background: var(--clr-lgrey); color: var(--clr-black); padding: 20px; display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; } .content-body blockquote p { margin-bottom: 0; } .content-body ul { display: flex; flex-direction: column; gap: 16px; margin-bottom: 16px; } .content-body ul li { position: relative; margin-bottom: 14px; padding-left: 15px; font-size: 16px; line-height: 1.6; color: var(--clr-dgrey); margin-bottom: 0; } .content-body ul li p { margin-bottom: 0; } .content-body ul li a { color: var(--clr-blue); } .content-body ul li a:hover { color: var(--clr-maroon); } .content-body ul li::before { content: ''; position: absolute; width: 4px; height: 4px; border-radius: 100%; display: block; top: 8px; left: 0; background: var(--clr-dgrey); } .content-body ul li:last-child { margin-bottom: 0; } @media all and (max-width: 990px) { .content-hdn { font-size: 36px; margin-bottom: 40px; } } @media all and (max-width: 480px) { .content-hdn { font-size: 32px; margin-bottom: 32px; } .content-body h1, .content-body h2, .content-body h3, .content-body h4, .content-body h5, .content-body h6 { font-size: 24px; margin: 32px 0 12px; } } /* content page end */ .thankyou-contain { height: 100dvh; display: flex; align-items: center; } .thankyou-card { text-align: center; margin: auto; max-width: 480px; } .thankyou-img { width: calc(100% - 100px); margin: 0 auto 32px; } .thankyou-hdn { font-size: 48px; color: #202135; margin-bottom: 18px; } .thankyou-para p { color: #455a64; font-size: 18px; font-weight: 400; line-height: 1.6; margin-bottom: 10px; } .thankyou-para p:last-child { margin-bottom: 0; } @media all and (max-width: 990px) { .thankyou-hdn { font-size: 42px; margin-bottom: 12px; } } @media all and (max-width: 480px) { .thankyou-hdn { font-size: 32px; margin-bottom: 8px; } } .error-wrap { height: calc(100dvh - var(--header-height)); display: -webkit-flex; display: -webkit-box; display: -moz-flex; display: -moz-box; display: -ms-flexbox; display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 30px; position: relative; } .error-sec { overflow: hidden; position: relative; } .error-img { width: 40vw; height: auto; } .ty-img { width: 11vw; height: auto; } .error-title { color: #FFF; text-align: center; font-size: var(--font48); font-weight: 500; line-height: 1; text-transform: capitalize; max-width: 447px; } @media all and (max-width: 1366px) { .ty-img { width: 30vw; } } /*========================================================================== => Accordion ==========================================================================*/ .accordion { background: transparent; cursor: pointer; padding: 32px 36px; width: 100%; border: none; outline: none; transition: 0.4s; position: relative; color: #fff; font-size: 15px; text-align: left; font-size: 24px; } .accordion::after, .accordion:before { content: ''; width: 20px; height: 2px; background-color: #FFF; display: inline-block; position: absolute; right: 36px; top: 50%; } .accordion::before { transform: rotate(90deg); transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; } .panel { display: none; padding: 0 30px 32px 36px; } .panel p { font-size: 16px; line-height: 1.9; color: #FFF; } .acc-container { max-width: 1065px; width: 100%; margin: 50px auto; } .acc-item { margin-bottom: 30px; border-radius: 24px; overflow: hidden; background: var(--button-fill); } .acc-item p { margin-bottom: 20px; } .acc-item p:last-child { margin-bottom: 0; } .acc-item:last-child { margin-bottom: 0; } .acc-item.active .accordion { padding: 32px 70px 16px 36px; } .acc-item.active .accordion::before { transform: rotate(180deg); } /*========================================================================== => Multiple Tab ==========================================================================*/ .tabs { display: -webkit-flex; display: -webkit-box; display: -moz-flex; display: -moz-box; display: -ms-flexbox; display: flex; justify-content: center; align-items: center; } .tabs ul { display: flex; align-items: center; border-bottom: 1px solid rgba(0, 0, 0, 0.14); width: fit-content; position: relative; } .tabs ul li { color: #565656; font-size: 14px; font-weight: 700; line-height: 1.5; letter-spacing: 2px; text-transform: uppercase; padding: 0 15px 10px; cursor: pointer; transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; } .tabs ul li.active { color: var(--clr-black); } .indicator { width: 0; height: 1px; background: var(--clr-black); position: absolute; bottom: 0; transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; } .comm-tab-wrap { width: 100%; margin: 50px auto; } .comm-tab-wrap ul.tabs { width: 100%; justify-content: center; } .comm-tab-wrap ul.tabs li { width: 100%; text-align: center; max-width: 270px; flex: 1; } .comm-tab-wrap .tab_container { max-width: 1060px; margin: 0 auto; } .tab_content { opacity: 0; visibility: hidden; display: none; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; } .tab_content.active { opacity: 1; visibility: visible; display: block; } .comm-tab-box { width: 100%; margin-bottom: 60px; } /* Most common */ .ml0 { margin-left: 0px !important; } .mr0 { margin-right: 0px !important; } .mt0 { margin-top: 0px !important; } .mb0 { margin-bottom: 0px !important; } .pl0 { padding-left: 0 !important; } .pr0 { padding-right: 0 !important; } .pt0 { padding-top: 0 !important; } .pb0 { padding-bottom: 0 !important; } .over-visible { overflow: visible; } .over-hidden { overflow: hidden; } .swiper-slide { transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; } .swiper-fitw .swiper-wrapper { transition-timing-function: linear; } .swiper-fitw .swiper-slide { width: fit-content; } .swiper-op .swiper-slide { opacity: 0.5; transform: scale(0.9); } .swiper-op .swiper-slide-active { opacity: 1; transform: scale(1); } .swiper-height .swiper-slide { height: auto; } .swiper-height .swiper-slide > div { height: 100%; } .fw-400 { font-weight: 400 !important; } .fw-500 { font-weight: 500 !important; } .fw-600 { font-weight: 600 !important; } .font12r { color: var(--clr-black); font-size: var(--fs12); line-height: 133.33%; letter-spacing: 0.54px; } .font14r { color: var(--clr-black); font-size: var(--fs14); line-height: 1.6; } .font16r { color: var(--clr-black); font-size: var(--fs16); line-height: 1.6; } .font18r { color: var(--clr-black); font-size: var(--fs18); line-height: 1.6; } .font20r { color: var(--clr-black); font-size: var(--fs20); line-height: 1.6; } .font22r { color: var(--clr-black); font-size: var(--fs22); line-height: 1.6; } .font24r { color: var(--clr-black); font-size: var(--fs24); line-height: 1.6; } .font30r { color: var(--clr-black); font-size: var(--fs30); line-height: 1.4; } .font36r { color: var(--clr-black); font-size: var(--fs36); line-height: 1.3; } .font48r { color: var(--clr-black); font-size: var(--fs48); line-height: 1.2; } .font72r { color: var(--clr-black); font-size: var(--fs72); line-height: 1; } .t-cen { text-align: center; } .tt-uc { text-transform: uppercase; } .t-ul { text-decoration: underline; } .txt-white { color: var(--clr-white) !important; } .txt-black { color: var(--clr-black) !important; } .txt-blackbody { color: var(--clr-blackbody) !important; } .txt-grey { color: var(--clr-grey) !important; } .txt-grey p, .txt-grey ul li { color: var(--clr-grey) !important; } .txt-dgrey { color: var(--clr-dgrey) !important; } .txt-dgrey p, .txt-dgrey ul li { color: var(--clr-dgrey) !important; } .txt-blue { color: var(--clr-blue) !important; } .bg-border { background: var(--clr-border) !important; } .bg-green { background: var(--clr-green) !important; } .bg-greenlig { background: var(--clr-greenlig) !important; } .bg-blue { background: var(--clr-blue) !important; } .bg-bluelig { background: var(--clr-bluelig) !important; } .bg-red { background: var(--clr-red) !important; } .bg-redlig { background: var(--clr-redlig) !important; } .bg-white { background: var(--clr-white); } .bg-purple { background: var(--clr-purple) !important; } .txt-purple { color: var(--clr-purple) !important; } .txt-red { color: var(--clr-red) !important; } .bg-purplelig { background: var(--clr-purplelig) !important; } .comm-cont { display: flex; flex-direction: column; gap: 16px; } .comm-cont p { color: var(--clr-black); font-size: var(--fs18); } .comm-cont ul ul { margin-top: 16px; } .comm-cont ul ul li::before { border-radius: 0; width: 8px; height: 2px; } .comm-cont ul li { position: relative; margin-bottom: 14px; padding-left: 20px; color: var(--clr-black); font-size: var(--fs18); } .comm-cont ul li::before { content: ""; position: absolute; width: 6px; height: 6px; border-radius: 100%; display: block; top: 10px; left: 0; background: var(--clr-green); } .comm-cont ul li:last-child { margin-bottom: 0; } .comm-btn-flex { display: flex; gap: 16px; } .comm-btn-flex .comm-nav-icon:first-child i { rotate: 180deg; } .comm-nav-icon { display: flex; align-items: center; justify-content: center; cursor: pointer; width: 50px; height: 50px; border: 1px solid var(--clr-black); border-radius: 100%; transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; } .comm-nav-icon:hover { background: var(--clr-black); } .comm-nav-icon:hover i { color: var(--clr-white); } .comm-nav-icon i { color: var(--clr-black); font-size: 12px; } .comm-nav-icon.swiper-button-disabled { opacity: 0.2; pointer-events: none; } .comm-nav { cursor: pointer; width: 48px; transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; } .comm-nav img { width: 100%; height: 100%; object-fit: contain; } .comm-nav.swiper-button-disabled { opacity: 0.2; pointer-events: none; } .anim-text div { background: linear-gradient(to right, var(--clr-white) 50%, var(--clr-grey) 50%); background-size: 200% 100%; background-position-x: 100%; color: transparent; background-clip: text; -webkit-background-clip: text; opacity: 0.3; } .comm-video-box { height: 0; padding-top: 65%; overflow: hidden; display: block; border-radius: 20px; position: relative; } .comm-video-box img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; } .comm-pagination { margin-top: 60px; } .comm-pagination ul { display: flex; justify-content: center; gap: 16px; } .comm-pagination li { font-size: var(--fs24); font-weight: 600; letter-spacing: -0.72px; width: 50px; height: 50px; line-height: 50px; border-radius: 50%; overflow: hidden; display: -webkit-flex; display: -webkit-box; display: -moz-flex; display: -moz-box; display: -ms-flexbox; display: flex; justify-content: center; align-items: center; } .comm-pagination li span { display: -webkit-flex; display: -webkit-box; display: -moz-flex; display: -moz-box; display: -ms-flexbox; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; } .comm-pagination li a, .comm-pagination li span { color: var(--clr-black); } .comm-pagination li .next span, .comm-pagination li .prev span { color: var(--clr-maroon); } .comm-pagination li .current { background: var(--clr-maroon); color: var(--clr-white); } /* Most common end */ /*========================================================================== => Animation ==========================================================================*/ /* Text Focus Starts */ .text-focus-in { -webkit-animation: text-focus-in 0.8s cubic-bezier(0.55, 0.085, 0.68, 0.53) both; animation: text-focus-in 0.8s cubic-bezier(0.55, 0.085, 0.68, 0.53) both; } @-webkit-keyframes text-focus-in { 0% { -webkit-filter: blur(12px); filter: blur(12px); opacity: 0; } 100% { -webkit-filter: blur(0px); filter: blur(0px); opacity: 1; } } @keyframes text-focus-in { 0% { -webkit-filter: blur(12px); filter: blur(12px); opacity: 0; } 100% { -webkit-filter: blur(0px); filter: blur(0px); opacity: 1; } } /* Text Focus Ends */ /* Fade Up Starts */ .fade-in-bottom { -webkit-animation: fade-in-bottom 0.8s cubic-bezier(0.39, 0.575, 0.565, 1) both; animation: fade-in-bottom 0.8s cubic-bezier(0.39, 0.575, 0.565, 1) both; } @-webkit-keyframes fade-in-bottom { 0% { -webkit-transform: translateY(50px); transform: translateY(50px); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @keyframes fade-in-bottom { 0% { -webkit-transform: translateY(50px); transform: translateY(50px); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } /* Fade Up Ends */ /* components */ /* common */ .comm-box { border-radius: 16px; background: var(--clr-white); padding: 20px; width: 100%; } .comm-btm-shad { position: relative; padding-bottom: 0; } .comm-btm-shad::before { content: ''; position: absolute; width: 100%; height: 75px; bottom: 0; left: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 40.37%, rgba(255, 255, 255, 0.64) 66.6%, #FFF 94.4%); z-index: 2; } .comm-top-box { display: flex; align-items: center; justify-content: space-between; gap: 15px; } .comm-line-saperator > div { padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--clr-greylig); } .comm-line-saperator > div:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: none; } /* common end */ .dash-stats-box { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; } .dash-top { display: flex; gap: 8px; } .dash-icon { width: 24px; height: 24px; display: -webkit-flex; display: -webkit-box; display: -moz-flex; display: -moz-box; display: -ms-flexbox; display: flex; justify-content: center; align-items: center; border-radius: 6px; } .dash-icon i { font-size: 16px; } .dash-icon.blue { background: var(--clr-bluelig); } .dash-icon.blue i { color: var(--clr-blue); } .dash-icon.green { background: var(--clr-greenlig); } .dash-icon.green i { color: var(--clr-green); } .dash-icon.yellow { background: var(--clr-yellowlig); } .dash-icon.yellow i { color: var(--clr-yellow); } .dash-icon.red { background: var(--clr-redlig); } .dash-icon.red i { color: var(--clr-red); } .dash-btm { display: -webkit-flex; display: -webkit-box; display: -moz-flex; display: -moz-box; display: -ms-flexbox; display: flex; justify-content: space-between; align-items: center; gap: 20px; } /* Make dashboard stat cards slightly more compact without affecting other boxes */ .dash-stats-box.comm-box { padding: 14px; } /* Reduce the big number font-size inside the stat cards only */ .dash-stats-box .dash-btm .font24r { font-size: 20px; } .dash-pl { display: flex; align-items: center; gap: 5px; } .dash-pl i { font-size: 16px; } .dash-pl.up { color: var(--clr-green); } .dash-pl.up p { color: var(--clr-green); } .dash-pl.down { color: var(--clr-red); } .dash-pl.down p { color: var(--clr-red); } .quick-action-box { background: var(--clr-white); border-radius: 12px; border: 1px solid var(--clr-greylig); padding: 16px; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; cursor: pointer; transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; } .quick-action-box i { font-size: 26px; color: var(--clr-blue); } .quick-action-box:hover { border: 1px solid transparent; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; } .badge { border-radius: 40px; padding: 6px 12px; font-size: 12px; font-weight: 500; width: fit-content; } .badge.blue { background: var(--clr-bluelig); color: var(--clr-blue); } .badge.red { background: var(--clr-redlig); color: var(--clr-red); } .badge.green { background: var(--clr-greenlig); color: var(--clr-green); } .badge.yellow { background: var(--clr-yellowlig); color: var(--clr-yellow); } .badge.purple { background: var(--clr-purplelig); color: var(--clr-purple); } .badge.grey { background: var(--clr-border); color: var(--clr-grey); } .notify-box { display: -webkit-flex; display: -webkit-box; display: -moz-flex; display: -moz-box; display: -ms-flexbox; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 16px; padding-left: 26px; border-radius: 10px; border: 1px solid var(--clr-greylig); position: relative; overflow: hidden; } .notify-box::before { content: ''; width: 10px; height: 100%; position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .notify-box.red .badge { background: var(--clr-redlig); color: var(--clr-red); } .notify-box.red::before { background: var(--clr-red); } .notify-box.green .badge { background: var(--clr-greenlig); color: var(--clr-green); } .notify-box.green::before { background: var(--clr-green); } .notify-name { max-width: 500px; width: 100%; } .notify-due { position: relative; padding-left: 10px; } .notify-due::before { content: ''; width: 5px; height: 5px; border-radius: 100%; position: absolute; background: var(--clr-grey); left: 0; top: 50%; transform: translateY(-50%); } .user-list-box > div { padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--clr-border); } .user-list-box > div:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: none; } .user-list { display: -webkit-flex; display: -webkit-box; display: -moz-flex; display: -moz-box; display: -ms-flexbox; display: flex; justify-content: space-between; align-items: center; gap: 16px; } .user-hdn { display: flex; align-items: center; gap: 12px; } .user-list-pic { width: 40px; height: 40px; overflow: hidden; border-radius: 50%; margin: 0; } .user-list-pic img { width: 100%; height: 100%; object-fit: cover; } .deadline-date { display: flex; flex-direction: column; gap: 10px; text-align: right; } .progress-bar { border-radius: 20px; background: var(--clr-greylig); width: 100%; height: 6px; display: block; position: relative; overflow: hidden; } .progress-thumb { height: 100%; background: var(--button-fill); display: block; position: absolute; left: 0; top: 0; border-radius: 20px; transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; } .performace-hdn { display: -webkit-flex; display: -webkit-box; display: -moz-flex; display: -moz-box; display: -ms-flexbox; display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .task-box > div { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--clr-border); } .task-box > div:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: none; } .task-list { display: -webkit-flex; display: -webkit-box; display: -moz-flex; display: -moz-box; display: -ms-flexbox; display: flex; justify-content: space-between; align-items: center; gap: 16px; } .select-badge { border-radius: 20px; padding: 6px 10px; padding-right: 30px; font-size: 12px; font-weight: 500; background: url(../img/drop-down-arrow.svg) no-repeat calc(100% - 10px) center #F5F5F5 !important; background-size: 14px; border: none; } .comm-tab { display: flex; border-bottom: 1px solid var(--clr-greylig); margin-bottom: 24px; } .comm-tab li.active a { color: var(--clr-blue); } .comm-tab li.active a::after { content: ''; width: 100%; height: 1px; background: var(--clr-blue); position: absolute; bottom: -1px; left: 0; transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; } .comm-tab a { position: relative; font-size: 16px; color: var(--clr-grey); font-weight: 500; padding: 15px; padding-top: 0; display: flex; align-items: center; border-radius: 8px; gap: 8px; transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; } .tab-badge { width: 24px; height: 24px; border-radius: 20px; font-size: 12px; font-weight: 500; display: -webkit-flex; display: -webkit-box; display: -moz-flex; display: -moz-box; display: -ms-flexbox; display: flex; justify-content: center; align-items: center; } .tab-badge.yellow { background: var(--clr-yellowlig) !important; color: var(--clr-yellow) !important; } .tab-badge.red { background: var(--clr-redlig) !important; color: var(--clr-red) !important; } .table-main-box { border-radius: 16px; border: 1px solid var(--Light-grey-02, #E1E1E1); min-height: 640px; overflow: visible; position: relative; } .table-scroll { overflow: visible; width: 100%; height: auto; } .table-hdn { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 25px; } .table-box { min-width: max-content; border-collapse: collapse; display: table; width: 100%; } .table-box th, .table-box td { padding: 12px 20px; } .table-head { background-color: var(--clr-bluelig); overflow: hidden; } .table-head th { font-size: var(--fs14); color: var(--clr-black); font-weight: 500; letter-spacing: -0.28px; text-align: left; } .table-head th:first-child { border-top-left-radius: 16px; } .table-head th:last-child { border-top-right-radius: 16px; } .table-head .chk-label { font-size: var(--fs14); color: var(--clr-black); font-weight: 500; } .table-body td { border-bottom: 1px solid var(--clr-greylig); } .report-table a, .report-table p, .report-table h6, .report-table .chk-label { font-size: 14px; font-weight: 400; } .report-table .font12r { font-size: 12px !important; } .table-green { background: var(--clr-greenlig); } .table-green a, .table-green p, .table-green h6, .table-green .chk-label { color: var(--clr-green); } .table-green .checkbox-box input:checked ~ .chk-label { color: var(--clr-green); } .table-blue { background: var(--clr-bluelig); } .table-blue a, .table-blue p, .table-blue h6, .table-blue .chk-label { color: var(--clr-blue); } .table-blue .checkbox-box input:checked ~ .chk-label { color: var(--clr-blue); } .table-red { background: var(--clr-redlig); } .table-red a, .table-red p, .table-red h6, .table-red .chk-label { color: var(--clr-red); text-decoration-line: line-through; } .table-red .chk-label:before, .table-red .chk-label:after { opacity: 0.2; } .table-red .checkbox-box input:checked ~ .chk-label { color: var(--clr-red); } .table-purple { background: var(--clr-purplelig); } .table-purple a, .table-purple p, .table-purple h6, .table-purple .chk-label { color: var(--clr-purple); } .table-purple .checkbox-box input:checked ~ .chk-label { color: var(--clr-purple); } .pagination-box { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 15px 30px; } .pagination-box .pagi-btn { border: none; background: transparent; cursor: pointer; width: 32px; height: 32px; line-height: 32px; font-size: 14px; font-family: "Poppins", sans-serif; font-weight: 500; display: -webkit-flex; display: -webkit-box; display: -moz-flex; display: -moz-box; display: -ms-flexbox; display: flex; justify-content: center; align-items: center; transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; } .pagination-box .pagi-btn.active { background: var(--clr-dblue); color: var(--clr-white); border-radius: 100%; } .pagination-box .pagi-btn:disabled { opacity: 0.2; pointer-events: none; } .pagination-box .pagi-btn.prev, .pagination-box .pagi-btn.next { width: auto; gap: 8px; } .pagi-num { display: flex; gap: 8px; } .comm-flex-input { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .comm-flex-input .form-grp { margin-bottom: 0; } .flex1 { flex: 1; min-width: 0; } .flex-jb { display: -webkit-flex; display: -webkit-box; display: -moz-flex; display: -moz-box; display: -ms-flexbox; display: flex; justify-content: space-between; align-items: center; } .comm-tab-flex { display: -webkit-flex; display: -webkit-box; display: -moz-flex; display: -moz-box; display: -ms-flexbox; display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 24px; padding-bottom: 6px; border-bottom: 1px solid var(--clr-greylig); } .comm-tab-flex .comm-tab { flex: 1; margin-bottom: 0; border-bottom: none; } .comm-tab-flex .comm-tab li.active a::after { bottom: -7px; } .comm-drop-btn { position: relative; } .comm-drop-btn .form-field { display: flex; align-items: center; gap: 8px; width: fit-content; cursor: pointer; } .drop-box-cont { position: absolute; right: 0; transform: translateY(0px); width: 400px; background: #fff; border-radius: 8px; overflow: hidden; z-index: 9; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); opacity: 0; visibility: hidden; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; } .drop-box-cont.show { opacity: 1; transform: translateY(10px); visibility: visible; } .drop-box-hdn { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--clr-greylig); padding: 15px 20px; } .drop-box-hdn i { font-size: 24px; color: var(--clr-black); cursor: pointer; } .drop-box-btm li { display: flex; align-items: center; gap: 6px; padding: 15px 20px; border-bottom: 1px solid var(--clr-greylig); } .drop-box-btm li:last-child { border-bottom: none; } .drop-box-btm i { font-size: 24px; color: var(--clr-blue); } .comm-action-box { position: relative; } .action-list-box { width: 155px; position: absolute; right: 0; transform: translateY(0px); background: #fff; border-radius: 8px; overflow: visible; z-index: 999; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); opacity: 0; visibility: hidden; padding: 16px; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; } .action-list-box.show { opacity: 1; transform: translateY(5px); visibility: visible; } .action-list li { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--clr-greylig); } .action-list li i { font-size: 24px; color: var(--clr-black); } .action-list li:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .dflex { gap: 24px 0; } .dflex > div { display: flex; } .comm-scroll-box { max-height: 330px; overflow: hidden; overflow-y: auto; padding-right: 8px; } .comm-scroll-box::-webkit-scrollbar { border-radius: 20px; width: 4px; } .comm-scroll-box::-webkit-scrollbar-thumb { background: #A7A7A7; border-radius: 20px; overflow: hidden; } .comm-scroll-box::-webkit-scrollbar-track { background: #E1E1E1; } .report-search { display: -webkit-flex; display: -webkit-box; display: -moz-flex; display: -moz-box; display: -ms-flexbox; display: flex; justify-content: space-between; align-items: center; padding-bottom: 25px; margin-bottom: 25px; border-bottom: 1px solid var(--clr-greylig); gap: 20px; } .table-flex { display: flex; align-items: center; gap: 6px; } .table-flex i { font-size: 22px; } .checkbox-box .dot { display: block; width: 16px; height: 16px; border-radius: 16px; } .checkbox-box i { font-size: 22px; } .report-check .chk-label { display: flex; align-items: center; gap: 8px; } .report-user-box { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 25px; } .report-user-left { max-width: 560px; width: 100%; } .report-user-right { display: flex; align-items: center; gap: 16px; } .report-check-main { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 25px; } .report-check-list { display: flex; flex-wrap: wrap; gap: 16px; } .comm-icon-txt { display: flex; align-items: center; gap: 4px; } .comm-icon-txt i { font-size: 22px; } .report-stats { display: flex; align-items: center; flex-wrap: wrap; gap: 30px; margin-bottom: 25px; } .report-total { display: flex; align-items: center; gap: 8px; } .report-value { padding: 4px 8px; border-radius: 4px; border: 1px solid #A7A7A7; } .report-progess-box { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; } .report-progess { display: flex; align-items: center; width: 360px; gap: 8px; } .comm-flex-btn { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .report-progress-main { margin-top: 50px; display: flex; align-items: flex-start; justify-content: space-between; gap: 25px; } .report-progess-middle { width: 350px; } /* components end */ /* Var Starts */ .txt-green { color: var(--clr-green); } .bg-greylig { background: rgba(245, 245, 245, 0.65); } .button { white-space: nowrap; } /* Var Ends */ /* Common CSS Starts */ .ml-auto { margin-left: auto; } .mr-auto { margin-right: auto; } img { width: 100%; height: 100%; object-fit: cover; } .bb-grey { border-bottom: 1px solid #E1E1E1; } .comm-card-box { border-radius: 8px; padding: 16px; height: -webkit-fill-available; } .border-grey { border: 1px solid #E1E1E1; } .gp-row-15 { row-gap: 15px; } .mw-full { max-width: 100% !important; } .w-full { width: 100% !important; } .h-full { height: 100% !important; } .flex-rr { flex-direction: row-reverse; } .items-start { align-items: flex-start; } .d-block { display: block; } /* Common CSS Ends */ /* Header Starts */ #header { position: fixed; top: 0; left: 0; width: 100%; height: var(--header-height); background: #fff; z-index: 40; } .header-box { padding: 0 40px; display: flex; align-items: center; height: 100%; } .logo-box { max-width: 320px; width: 100%; display: flex; align-items: center; } .logo-box i { display: none; } .logo { width: 165px; } .logo img { object-fit: contain; } .header-right { display: flex; align-items: center; justify-content: space-between; flex: 1; } .comm-search-box { max-width: 600px; width: 100%; height: 50px; border-radius: 10px; border: 1px solid #E1E1E1; background: #FFF; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 15px 0 20px; } .comm-search-box input { outline: none; border: none; color: #666; font-size: var(--fs16); line-height: 1.5; letter-spacing: -0.32px; width: 100%; } .comm-search-box i { font-size: var(--fs26); color: #666; } .comm-search-box.sm { max-width: 320px; width: 100%; height: 40px; } .comm-search-box.sm i { font-size: var(--fs20); } .header-notification-cont { display: flex; align-items: center; gap: 40px; } .notification-box { position: relative; cursor: pointer; display: flex; } .notification-box i { font-size: 30px; color: #666; } .notification-box span { width: 16px; height: 16px; background: #009DF2; position: absolute; top: -4px; right: -4px; color: #FFF; text-align: center; font-size: 10px; font-weight: 600; line-height: 1.5; letter-spacing: -0.24px; border-radius: 100%; overflow: hidden; display: -webkit-flex; display: -webkit-box; display: -moz-flex; display: -moz-box; display: -ms-flexbox; display: flex; justify-content: center; align-items: center; } .user-cont { width: 50px; height: 50px; overflow: hidden; border-radius: 50%; margin: 0; } .user-cont img { width: 100%; height: 100%; object-fit: cover; } /* Header Ends */ /* Sidebar Starts */ .sidebar { max-width: var(--sideBarWidth); width: 100%; height: calc(100vh - (var(--header-height) + 2px)); padding: 44px 24px; position: fixed; top: calc(var(--header-height) + 2px); left: 0; background: #FFF; overflow: hidden; overflow-y: auto; z-index: 5; } .sidebar::-webkit-scrollbar { width: 4px; } .sidebar::-webkit-scrollbar-thumb { background: #A7A7A7; border-radius: 20px; overflow: hidden; } .sidebar::-webkit-scrollbar-track { background: #E1E1E1; } .sidebar ul { margin-bottom: 30px; display: flex; flex-direction: column; gap: 8px; } .sidebar ul:last-child { margin-bottom: 0; } .sidebar li { padding: 0 16px; display: flex; align-items: center; justify-content: space-between; height: 46px; border-radius: 10px; gap: 16px; cursor: pointer; transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; } .sidebar li:hover { background: #E8F5FF; } .sidebar li:hover i, .sidebar li:hover p { color: #232323; } .sidebar li.active { background: #E8F5FF; } .sidebar li.active i, .sidebar li.active p { color: #232323; } .sidebar li span { padding: 0 10px; border-radius: 40px; background: #232323; color: #FFF; text-align: center; font-size: 14px; font-weight: 600; line-height: 22px; letter-spacing: -0.28px; height: 22px; display: -webkit-flex; display: -webkit-box; display: -moz-flex; display: -moz-box; display: -ms-flexbox; display: flex; justify-content: center; align-items: center; } .sidebar-mob-top-wrap { display: -webkit-flex; display: -webkit-box; display: -moz-flex; display: -moz-box; display: -ms-flexbox; display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 24px; display: none; } .nav-cont-wrap { display: flex; align-items: center; gap: 12px; } .nav-cont-wrap i { font-size: 22px; color: #666; transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; } .nav-cont-wrap p { color: #666; font-size: 14px; font-weight: 500; line-height: 1.42; letter-spacing: -0.28px; transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; } .sidebar-hdn { color: #A7A7A7; font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: 0.7px; margin-bottom: 16px; } /* Sidebar Ends */ .component-box { padding: 24px 24px 24px calc(var(--sideBarWidth) + 24px); } /* Popup Starts */ .comm-popup { background: var(--clr-white); padding: 24px; max-width: 1230px; width: 100%; border-radius: var(--br20); overflow: hidden; margin: 40px auto; position: relative; } .comm-popup-xl { max-width: 930px; } .comm-popup-md { max-width: 750px; } .comm-popup-sm { max-width: 530px; } .close-popup { position: absolute; top: 20px; right: 20px; cursor: pointer; } .close-popup i { color: #000; font-size: 24px; } /* Popup Ends */ /* Dashboard Starts */ .task-hdn-box { margin-bottom: 16px; } .task-hdn-box p { overflow: hidden; color: #343434; font-size: var(--fs16); line-height: 1.5; letter-spacing: -0.32px; } .comm-hdn-icon-wrap { display: -webkit-flex; display: -webkit-box; display: -moz-flex; display: -moz-box; display: -ms-flexbox; display: flex; justify-content: flex-start; align-items: center; gap: 8px; } .comm-hdn-icon-wrap i { color: #007FFF; font-size: var(--fs28); } .comm-btn-wrap { display: flex; align-items: center; gap: 6px; width: fit-content; } .search-student-box { border-radius: 10px; border: 1px solid #E1E1E1; padding: 14px; margin-bottom: 28px; } .search-student-hdn-wrap { display: -webkit-flex; display: -webkit-box; display: -moz-flex; display: -moz-box; display: -ms-flexbox; display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 18px; } .search-student-hdn-wrap .button { height: 32px; font-size: 12px; } .student-check-list-box { padding-right: 8px; overflow: hidden; overflow-y: auto; height: 130px; } .student-check-list-box::-webkit-scrollbar { width: 4px; } .student-check-list-box::-webkit-scrollbar-thumb { background: #A7A7A7; border-radius: 20px; overflow: hidden; } .student-check-list-box::-webkit-scrollbar-track { background: #E1E1E1; } .student-check-list { display: flex; align-items: center; gap: 8px; } .checkbox-box.check-flex { display: flex; } .checkbox-box.check-flex .chk-label:before { top: 15px; } .checkbox-box.check-flex .chk-label:after { top: 16px; } .success-lottie { width: 120px; height: 120px; margin: 0 auto 32px; } .success-lottie img { object-fit: contain; } .success-box { text-align: center; } /* Dashboard Ends */ /* Verification Starts */ .suggestion-box { padding: 10px 16px; padding-left: 26px; border-radius: 10px; border: 1px solid #3AB2FB; position: relative; overflow: hidden; background: #fff; } .suggestion-box::before { content: ''; width: 10px; height: 100%; position: absolute; left: 0; top: 50%; transform: translateY(-50%); background: #3AB2FB; } .suggestion-box .comm-top-box { margin-bottom: 16px; padding-bottom: 20px; border-bottom: 1px solid #E1E1E1; } .comm-sm-hdn-icon { display: flex; align-items: center; gap: 8px; } .comm-sm-hdn-icon i { font-size: var(--fs20); color: #3AB2FB; } .suggestion-wrap { display: flex; justify-content: space-between; gap: 24px; } .sugg-cont-wrap { display: flex; gap: 40px; max-width: 730px; width: 100%; } .sugg-cont-box { width: calc(50% - 20px); border-radius: 10px; overflow: hidden; border: 1px solid #F5F5F5; } .sugg-cont-box:nth-child(even) .sugg-hdn-box { color: #7718D5; } .sugg-hdn-box { padding: 12px 20px; color: #3AB2FB; font-size: 14px; font-weight: 500; line-height: 1.42; letter-spacing: -0.28px; background: rgba(178, 220, 255, 0.3); } .sugg-cont { padding: 16px 20px; } .comm-detail-list li { padding-left: 10px; position: relative; } .comm-detail-list li::before { content: ""; width: 5px; height: 5px; overflow: hidden; border-radius: 50%; margin: 0; position: absolute; top: 7px; left: 0; background: #033864; } .comm-detail-list li::before img { width: 100%; height: 100%; object-fit: cover; } .comm-detail-list li > * { line-height: 1.42; letter-spacing: -0.32px; } .sugg-cont-btn-wrap { display: flex; flex-wrap: wrap; max-width: 400px; width: 100%; gap: 12px; height: fit-content; } .sugg-cont-btn-wrap .button { width: calc(50% - 6px); } .sugg-cont-btn-wrap .button:last-child { width: 100%; } .chips-wrap ul { display: flex; gap: 12px; flex-wrap: wrap; } .chips-wrap li { padding: 0 12px; height: 34px; border-radius: var(--br20); overflow: hidden; color: #343434; font-size: 12px; font-weight: 500; line-height: 1.5; letter-spacing: -0.24px; font-family: Poppins; display: -webkit-flex; display: -webkit-box; display: -moz-flex; display: -moz-box; display: -ms-flexbox; display: flex; justify-content: center; align-items: center; } .chips-wrap.grey li { background: #F5F5F5; } .chips-wrap.line li { border: 1px solid #A7A7A7; } .student-sugg-box { overflow: hidden; overflow-y: auto; padding-right: 6px; height: 390px; margin-bottom: 30px; } .student-sugg-box::-webkit-scrollbar { width: 4px; } .student-sugg-box::-webkit-scrollbar-thumb { background: #A7A7A7; border-radius: 20px; overflow: hidden; } .student-sugg-box::-webkit-scrollbar-track { background: #E1E1E1; } .student-sugg-card { border-radius: 8px; padding: 14px; border: 1px solid #E1E1E1; display: -webkit-flex; display: -webkit-box; display: -moz-flex; display: -moz-box; display: -ms-flexbox; display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 16px; } .student-sugg-card:last-child { margin-bottom: 0; } .student-sugg-card .comm-detail-list { flex: 1; } .student-sugg-card .user-hdn { align-items: flex-start; } .student-btn { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } .user-hdn ul { display: flex; gap: 8px; } .user-hdn li { padding-left: 13px; position: relative; color: #343434; font-size: 14px; line-height: 1.4; letter-spacing: -0.28px; } .user-hdn li::before { content: ""; width: 5px; height: 5px; overflow: hidden; border-radius: 50%; margin: 0; position: absolute; top: 50%; left: 0; transform: translateY(-50%); background: #033864; } .user-hdn li::before img { width: 100%; height: 100%; object-fit: cover; } .user-hdn li > * { line-height: 1.42; letter-spacing: -0.32px; } .user-hdn li:first-child { padding-left: 0; } .user-hdn li:first-child::before { display: none; } .cont-icon-wrap { padding: 12px; border-radius: 10px; overflow: hidden; display: flex; align-items: flex-start; gap: 6px; } .cont-icon-wrap i { font-size: var(--fs20); transform: translateY(2px); } .user-pic-sm { width: 32px; height: 32px; } /* Verification Ends */ /* Placeholder (empty) to satisfy import order */ :root { --header-height: 80px; --header-scroll-height: 70px; } html, body { width: 100%; background-color: #F5F5F5; } .container { max-width: 1600px; width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } .main-container { padding-top: var(--header-height); } .comm-section-wm { margin: var(--spc4080) 0; padding: var(--spc4080) 0; position: relative; } .comm-section { padding: var(--spc4080) 0; position: relative; } @media all and (max-width: 1600px) { /* Header And Sidebar Starts */ :root { --header-height: 70px; --sideBarWidth: 300px; } .sidebar { padding: 30px 20px; } .sidebar ul { margin-bottom: 20px; gap: 6px; } .sidebar li { height: 40px; padding: 0 8px; } .sidebar-hdn { margin-bottom: 10px; } .logo-box { max-width: var(--sideBarWidth); } .header-box { padding: 0 20px; } .logo { width: 140px; } .comm-search-box { max-width: 500px; height: 44px; padding: 0 16px; } .header-notification-cont { gap: 20px; } .notification-box i { font-size: 26px; } .user-cont { width: 40px; height: 40px; } .nav-cont-wrap { gap: 10px; } /* Header And Sidebar Ends */ .sugg-cont-wrap { gap: 20px; max-width: 650px; } } @media all and (max-width: 1440px) { .sugg-cont-btn-wrap { max-width: 360px; } } @media all and (max-width: 1366px) { :root { --sideBarWidth: 260px; } .comm-box { padding: 16px; } .suggestion-box .comm-top-box { margin-bottom: 14px; padding-bottom: 14px; } } @media all and (max-width: 1280px) { :root { --sideBarWidth: 300px; } /* Header And Sidebar Starts */ .sidebar { height: 100%; position: fixed; left: 0; top: 0; transform: translateX(-100%); opacity: 0; visibility: hidden; z-index: 50; padding: 20px 14px; box-shadow: 3px 0 14.1px 4px rgba(0, 0, 0, 0.04); transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; } .sidebar.show { opacity: 1; visibility: visible; transform: translate(0); } .sidebar-mob-top-wrap { display: flex; } .sidebar-mob-top-wrap i { font-size: 20px; color: #000; } .logo { width: 120px; } .header-box { gap: 18px; } .logo-box { max-width: fit-content; } .logo-box .logo { display: none; } .logo-box i { display: block; font-size: 24px; color: #232323; cursor: pointer; } /* Header And Sidebar Ends */ .component-box { padding: 22px 16px; } .comm-search-box { max-width: 400px; } } @media all and (max-width: 1200px) { .suggestion-wrap { flex-direction: column; align-items: center; } } @media all and (max-width: 990px) { :root { --header-height: 60px; } /* Header And Sidebar Starts */ .header-right .comm-search-box { border: none; max-width: fit-content; height: auto; padding: 0; } .header-right .comm-search-box input { position: fixed; top: calc(var(--header-height) + 4px); left: 50%; transform: translate(-50%, 40%); width: calc(100% - 32px); height: 40px; padding: 0 12px; border-radius: 8px; background: #E8F5FF; border: 1px solid #000; opacity: 0; visibility: hidden; transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; } .header-right .comm-search-box i { font-size: 20px; color: #000; } .header-right .comm-search-box.show input { opacity: 1; visibility: visible; transform: translate(-50%, 0%); } .user-cont { width: 36px; height: 36px; } /* Header And Sidebar Ends */ .comm-tab a { padding: 10px; white-space: nowrap; } .comm-tab-flex { flex-direction: column; gap: 20px; border: none; } .comm-tab-flex .comm-tab { border-bottom: 1px solid #ddd; width: fit-content; margin: 0 auto; } .comm-tab-scroll { overflow: hidden; overflow-x: auto; width: 100%; padding-bottom: 12px; } .comm-tab-scroll::-webkit-scrollbar { height: 2px; } .comm-tab-scroll::-webkit-scrollbar-thumb { background: #A7A7A7; border-radius: 20px; overflow: hidden; } .comm-tab-scroll::-webkit-scrollbar-track { background: #E1E1E1; } .comm-tab-flex .comm-tab li.active a::after { bottom: 0px; } .student-sugg-card { align-items: flex-start; padding: 12px; flex-direction: column; gap: 14px; } .student-btn { flex-direction: row-reverse; align-items: center; width: 100%; justify-content: space-between; } } @media all and (max-width: 768px) { .comm-popup { padding: 36px 16px 22px; } .close-popup { top: 12px; right: 12px; } .close-popup i { font-size: 20px; } } @media all and (max-width: 640px) { .flex-640-col { flex-direction: column; gap: 14px; align-items: flex-start; } .user-hdn ul { flex-direction: column; } .notify-box { padding: 12px; padding-left: 22px; } .suggestion-box { padding: 12px; padding-left: 22px; } .comm-card-box { padding: 14px; } .comm-btn-wrap { align-items: normal; flex-direction: column; } .sugg-cont-wrap { flex-direction: column; } .sugg-cont-box { width: 100%; } .sugg-cont-btn-wrap { flex-direction: column; } .sugg-cont-btn-wrap .button { width: 100%; } .suggestion-box::before { width: 8px; } .sugg-cont { padding: 16px; } .chips-wrap li { height: 30px; } .comm-top-box { flex-direction: column; align-items: flex-start; } .comm-popup .comm-btn-wrap { flex-direction: row; } } @media all and (max-width: 480px) { .comm-tab-flex .button { width: 100%; } } @media all and (max-width: 1600px) { :root { --input-height: 44px; } .form-field { font-size: var(--fs14); padding: 0 10px; } } @media all and (max-width: 1440px) { .notify-box { flex-direction: column; align-items: flex-start; } .w-1440-full { width: 100%; } .report-search { flex-direction: column; align-items: flex-start; gap: 10px; } .report-search .comm-search-box { max-width: 100%; } } @media all and (max-width: 640px) { :root { --input-height: 40px; } .table-hdn .comm-search-box { max-width: 500px; height: 40px; padding: 0 10px; } .form-textarea-group .form-field { padding: 10px; } .form-grp, .form-textarea-group { margin-bottom: 16px; } .form-grp.int-padl input, .form-grp.int-padl select { padding-left: 40px; } .form-grp.int-padr input, .form-grp.int-padr select { padding-right: 40px; } .form-grp .form-icon { right: 10px; bottom: 20px; font-size: 20px; } .select-field { background: url(../img/drop-down-arrow.svg) no-repeat calc(100% - 10px) center; background-size: 16px; } .button { font-size: 14px; } .search-student-hdn-wrap { flex-direction: column; align-items: flex-start; gap: 10px; } .search-student-hdn-wrap .comm-search-box { max-width: 100%; } } @media all and (max-width: 480px) { .dash-stats-box { gap: 25px; } }