UNPKG

admint

Version:

Open source admin dashboard template

2,304 lines (1,832 loc) 238 kB
@charset "UTF-8"; /* File Link for Light Version */ /*========== Custome Fonts ==========*/ @font-face { font-family: 'SanFranciscoPro'; src: url("../fonts/SF-Pro-Display-Medium.otf") format("truetype"); font-weight: 500; font-style: normal; } @font-face { font-family: 'SanFranciscoPro'; src: url("../fonts/SF-Pro-Display-Regular.otf") format("truetype"); font-weight: 400; font-style: normal; } /*========== End Custome Fonts ==========*/ /*========== Start Basic Typography ==========*/ html { background-color: #fff; } body { color: rgba(34, 34, 34, 0.7); font-family: -apple-system, "SanFranciscoPro", sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6em; background-color: rgba(34, 34, 34, 0.02); overflow-x: hidden; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h3, h5, h6 { clear: both; color: #222; padding: 0; margin: 0 0 10px 0; font-weight: 500; } h1 { font-size: 40px; } h2 { font-size: 34px; } h3 { font-size: 26px; } h4 { font-size: 22px; } h5 { font-size: 18px; } h6 { font-size: 15px; } p { margin-bottom: 12px; } ul { margin: 0 0 15px 0; padding-left: 15px; list-style: square outside none; } ol { padding-left: 15px; margin-bottom: 15px; } li { font-size: 14px; } dfn, cite, em, i { font-style: italic; } blockquote { margin: 0 14px; } address { margin: 0 0 15px; } img { border: 0; max-width: 100%; height: auto; } a { color: inherit; background-color: transparent; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } a:hover, a:focus, a:active { color: #222; text-decoration: none; } a:focus, a:hover, a:active { outline: none; } hr { border-color: rgba(34, 34, 34, 0.1); margin: 0; } /*========== End Basic Typography ==========*/ /*========== Start Default Spacing ==========*/ @media screen and (min-width: 992px) { .yoo-height-b0 { height: 0px; } .yoo-height-b5 { height: 5px; } .yoo-height-b10 { height: 10px; } .yoo-height-b15 { height: 15px; } .yoo-height-b20 { height: 20px; } .yoo-height-b25 { height: 25px; } .yoo-height-b30 { height: 30px; } .yoo-height-b35 { height: 35px; } .yoo-height-b40 { height: 40px; } .yoo-height-b45 { height: 45px; } .yoo-height-b50 { height: 50px; } .yoo-height-b55 { height: 55px; } .yoo-height-b60 { height: 60px; } .yoo-height-b65 { height: 65px; } .yoo-height-b70 { height: 70px; } .yoo-height-b75 { height: 75px; } .yoo-height-b80 { height: 80px; } .yoo-height-b85 { height: 85px; } .yoo-height-b90 { height: 90px; } .yoo-height-b95 { height: 95px; } .yoo-height-b100 { height: 100px; } .yoo-height-b105 { height: 105px; } .yoo-height-b110 { height: 110px; } .yoo-height-b115 { height: 115px; } .yoo-height-b120 { height: 120px; } .yoo-height-b125 { height: 125px; } .yoo-height-b130 { height: 130px; } .yoo-height-b135 { height: 135px; } .yoo-height-b140 { height: 140px; } .yoo-height-b145 { height: 145px; } .yoo-height-b150 { height: 150px; } .yoo-height-b155 { height: 155px; } .yoo-height-b160 { height: 160px; } .yoo-height-b165 { height: 165px; } .yoo-height-b170 { height: 170px; } .yoo-height-b175 { height: 175px; } .yoo-height-b180 { height: 180px; } .yoo-height-b185 { height: 185px; } .yoo-height-b190 { height: 190px; } .yoo-height-b195 { height: 195px; } .yoo-height-b200 { height: 200px; } .yoo-height-b205 { height: 205px; } .yoo-height-b210 { height: 210px; } } @media screen and (max-width: 991px) { .yoo-height-lg-b0 { height: 0px; } .yoo-height-lg-b5 { height: 5px; } .yoo-height-lg-b10 { height: 10px; } .yoo-height-lg-b15 { height: 15px; } .yoo-height-lg-b20 { height: 20px; } .yoo-height-lg-b25 { height: 25px; } .yoo-height-lg-b30 { height: 30px; } .yoo-height-lg-b35 { height: 35px; } .yoo-height-lg-b40 { height: 40px; } .yoo-height-lg-b45 { height: 45px; } .yoo-height-lg-b50 { height: 50px; } .yoo-height-lg-b55 { height: 55px; } .yoo-height-lg-b60 { height: 60px; } .yoo-height-lg-b65 { height: 65px; } .yoo-height-lg-b70 { height: 70px; } .yoo-height-lg-b75 { height: 75px; } .yoo-height-lg-b80 { height: 80px; } .yoo-height-lg-b85 { height: 85px; } .yoo-height-lg-b90 { height: 90px; } .yoo-height-lg-b95 { height: 95px; } .yoo-height-lg-b100 { height: 100px; } .yoo-height-lg-b105 { height: 105px; } .yoo-height-lg-b110 { height: 110px; } .yoo-height-lg-b115 { height: 115px; } .yoo-height-lg-b120 { height: 120px; } .yoo-height-lg-b125 { height: 125px; } .yoo-height-lg-b130 { height: 130px; } .yoo-height-lg-b135 { height: 135px; } .yoo-height-lg-b140 { height: 140px; } .yoo-height-lg-b145 { height: 145px; } .yoo-height-lg-b150 { height: 150px; } .yoo-height-lg-b155 { height: 155px; } .yoo-height-lg-b160 { height: 160px; } .yoo-height-lg-b165 { height: 165px; } .yoo-height-lg-b170 { height: 170px; } .yoo-height-lg-b175 { height: 175px; } .yoo-height-lg-b180 { height: 180px; } .yoo-height-lg-b185 { height: 185px; } .yoo-height-lg-b190 { height: 190px; } .yoo-height-lg-b195 { height: 195px; } .yoo-height-lg-b200 { height: 200px; } .yoo-height-lg-b205 { height: 205px; } .yoo-height-lg-b210 { height: 210px; } } /*========== End Default Spacing ==========*/ /*========== Start General Style ==========*/ .container-fluid { padding-left: 30px; padding-right: 30px; } .row { margin-top: -30px; } .row > div { margin-top: 30px; } /* Margin Classes */ .yoo-margin-0 { margin: 0; } .yoo-margin-1 { margin: 1px; } .yoo-margin-2 { margin: 2px; } .yoo-margin-3 { margin: 3px; } .yoo-margin-4 { margin: 4px; } .yoo-margin-5 { margin: 5px; } .yoo-margin-6 { margin: 6px; } .yoo-margin-7 { margin: 7px; } .yoo-margin-8 { margin: 8px; } .yoo-margin-9 { margin: 9px; } .yoo-margin-10 { margin: 10px; } .yoo-margin-11 { margin: 11px; } .yoo-margin-12 { margin: 12px; } .yoo-margin-13 { margin: 13px; } .yoo-margin-14 { margin: 14px; } .yoo-margin-15 { margin: 15px; } .yoo-margin-top-0 { margin-top: 0; } .yoo-margin-top-1 { margin-top: 1px; } .yoo-margin-top-2 { margin-top: 2px; } .yoo-margin-top-3 { margin-top: 3px; } .yoo-margin-top-4 { margin-top: 4px; } .yoo-margin-top-5 { margin-top: 5px; } .yoo-margin-top-6 { margin-top: 6px; } .yoo-margin-top-7 { margin-top: 7px; } .yoo-margin-top-8 { margin-top: 8px; } .yoo-margin-top-9 { margin-top: 9px; } .yoo-margin-top-10 { margin-top: 10px; } .yoo-margin-top-11 { margin-top: 11px; } .yoo-margin-top-12 { margin-top: 12px; } .yoo-margin-top-13 { margin-top: 13px; } .yoo-margin-top-14 { margin-top: 14px; } .yoo-margin-top-15 { margin-top: 15px; } .yoo-margin-bottom-0 { margin-bottom: 0; } .yoo-margin-bottom-1 { margin-bottom: 1px; } .yoo-margin-bottom-2 { margin-bottom: 2px; } .yoo-margin-bottom-3 { margin-bottom: 3px; } .yoo-margin-bottom-4 { margin-bottom: 4px; } .yoo-margin-bottom-5 { margin-bottom: 5px; } .yoo-margin-bottom-6 { margin-bottom: 6px; } .yoo-margin-bottom-7 { margin-bottom: 7px; } .yoo-margin-bottom-8 { margin-bottom: 8px; } .yoo-margin-bottom-9 { margin-bottom: 9px; } .yoo-margin-bottom-10 { margin-bottom: 10px; } .yoo-margin-bottom-11 { margin-bottom: 11px; } .yoo-margin-bottom-12 { margin-bottom: 12px; } .yoo-margin-bottom-13 { margin-bottom: 13px; } .yoo-margin-bottom-14 { margin-bottom: 14px; } .yoo-margin-bottom-15 { margin-bottom: 15px; } .yoo-margin-left-0 { margin-left: 0; } .yoo-margin-left-1 { margin-left: 1px; } .yoo-margin-left-2 { margin-left: 2px; } .yoo-margin-left-3 { margin-left: 3px; } .yoo-margin-left-4 { margin-left: 4px; } .yoo-margin-left-5 { margin-left: 5px; } .yoo-margin-left-6 { margin-left: 6px; } .yoo-margin-left-7 { margin-left: 7px; } .yoo-margin-left-8 { margin-left: 8px; } .yoo-margin-left-9 { margin-left: 9px; } .yoo-margin-left-10 { margin-left: 10px; } .yoo-margin-left-11 { margin-left: 11px; } .yoo-margin-left-12 { margin-left: 12px; } .yoo-margin-left-13 { margin-left: 13px; } .yoo-margin-left-14 { margin-left: 14px; } .yoo-margin-left-15 { margin-left: 15px; } .yoo-margin-right-0 { margin-right: 0; } .yoo-margin-right-1 { margin-right: 1px; } .yoo-margin-right-2 { margin-right: 2px; } .yoo-margin-right-3 { margin-right: 3px; } .yoo-margin-right-4 { margin-right: 4px; } .yoo-margin-right-5 { margin-right: 5px; } .yoo-margin-right-6 { margin-right: 6px; } .yoo-margin-right-7 { margin-right: 7px; } .yoo-margin-right-8 { margin-right: 8px; } .yoo-margin-right-9 { margin-right: 9px; } .yoo-margin-right-10 { margin-right: 10px; } .yoo-margin-right-11 { margin-right: 11px; } .yoo-margin-right-12 { margin-right: 12px; } .yoo-margin-right-13 { margin-right: 13px; } .yoo-margin-right-14 { margin-right: 14px; } .yoo-margin-right-15 { margin-right: 15px; } /* End Margin Classes */ /* Padidng Classes */ .yoo-padding-0 { padding: 0; } .yoo-padding-1 { padding: 1px; } .yoo-padding-2 { padding: 2px; } .yoo-padding-3 { padding: 3px; } .yoo-padding-4 { padding: 4px; } .yoo-padding-5 { padding: 5px; } .yoo-padding-6 { padding: 6px; } .yoo-padding-7 { padding: 7px; } .yoo-padding-8 { padding: 8px; } .yoo-padding-9 { padding: 9px; } .yoo-padding-10 { padding: 10px; } .yoo-padding-11 { padding: 11px; } .yoo-padding-12 { padding: 12px; } .yoo-padding-13 { padding: 13px; } .yoo-padding-14 { padding: 14px; } .yoo-padding-15 { padding: 15px; } .yoo-padding-top-0 { padding-top: 0; } .yoo-padding-top-1 { padding-top: 1px; } .yoo-padding-top-2 { padding-top: 2px; } .yoo-padding-top-3 { padding-top: 3px; } .yoo-padding-top-4 { padding-top: 4px; } .yoo-padding-top-5 { padding-top: 5px; } .yoo-padding-top-6 { padding-top: 6px; } .yoo-padding-top-7 { padding-top: 7px; } .yoo-padding-top-8 { padding-top: 8px; } .yoo-padding-top-9 { padding-top: 9px; } .yoo-padding-top-10 { padding-top: 10px; } .yoo-padding-top-11 { padding-top: 11px; } .yoo-padding-top-12 { padding-top: 12px; } .yoo-padding-top-13 { padding-top: 13px; } .yoo-padding-top-14 { padding-top: 14px; } .yoo-padding-top-15 { padding-top: 15px; } .yoo-padding-bottom-0 { padding-bottom: 0; } .yoo-padding-bottom-1 { padding-bottom: 1px; } .yoo-padding-bottom-2 { padding-bottom: 2px; } .yoo-padding-bottom-3 { padding-bottom: 3px; } .yoo-padding-bottom-4 { padding-bottom: 4px; } .yoo-padding-bottom-5 { padding-bottom: 5px; } .yoo-padding-bottom-6 { padding-bottom: 6px; } .yoo-padding-bottom-7 { padding-bottom: 7px; } .yoo-padding-bottom-8 { padding-bottom: 8px; } .yoo-padding-bottom-9 { padding-bottom: 9px; } .yoo-padding-bottom-10 { padding-bottom: 10px; } .yoo-padding-bottom-11 { padding-bottom: 11px; } .yoo-padding-bottom-12 { padding-bottom: 12px; } .yoo-padding-bottom-13 { padding-bottom: 13px; } .yoo-padding-bottom-14 { padding-bottom: 14px; } .yoo-padding-bottom-15 { padding-bottom: 15px; } .yoo-padding-left-0 { padding-left: 0; } .yoo-padding-left-1 { padding-left: 1px; } .yoo-padding-left-2 { padding-left: 2px; } .yoo-padding-left-3 { padding-left: 3px; } .yoo-padding-left-4 { padding-left: 4px; } .yoo-padding-left-5 { padding-left: 5px; } .yoo-padding-left-6 { padding-left: 6px; } .yoo-padding-left-7 { padding-left: 7px; } .yoo-padding-left-8 { padding-left: 8px; } .yoo-padding-left-9 { padding-left: 9px; } .yoo-padding-left-10 { padding-left: 10px; } .yoo-padding-left-11 { padding-left: 11px; } .yoo-padding-left-12 { padding-left: 12px; } .yoo-padding-left-13 { padding-left: 13px; } .yoo-padding-left-14 { padding-left: 14px; } .yoo-padding-left-15 { padding-left: 15px; } .yoo-padding-right-0 { padding-right: 0; } .yoo-padding-right-1 { padding-right: 1px; } .yoo-padding-right-2 { padding-right: 2px; } .yoo-padding-right-3 { padding-right: 3px; } .yoo-padding-right-4 { padding-right: 4px; } .yoo-padding-right-5 { padding-right: 5px; } .yoo-padding-right-6 { padding-right: 6px; } .yoo-padding-right-7 { padding-right: 7px; } .yoo-padding-right-8 { padding-right: 8px; } .yoo-padding-right-9 { padding-right: 9px; } .yoo-padding-right-10 { padding-right: 10px; } .yoo-padding-right-11 { padding-right: 11px; } .yoo-padding-right-12 { padding-right: 12px; } .yoo-padding-right-13 { padding-right: 13px; } .yoo-padding-right-14 { padding-right: 14px; } .yoo-padding-right-15 { padding-right: 15px; } /* End Padidng Classes */ .yoo-text-transform-u { text-transform: uppercase; } .yoo-text-transform-l { text-transform: lowercase; } .yoo-text-transform-c { text-transform: capitalize; } .yoo-font-style-i { font-style: italic; } .yoo-font-light { font-weight: 300; } .yoo-font-regular { font-weight: 400; } .yoo-font-medium { font-weight: 500; } .yoo-font-semi-bold { font-weight: 600; } .yoo-font-bold { font-weight: 700; } .yoo-font-black { font-weight: 900; } .yoo-radious1 { border-radius: 1px; } .yoo-radious2 { border-radius: 2px; } .yoo-radious3 { border-radius: 3px; } .yoo-radious4 { border-radius: 4px; } .yoo-radious5 { border-radius: 5px; } .yoo-radious6 { border-radius: 6px; } .yoo-radious7 { border-radius: 7px; } .yoo-radious8 { border-radius: 8px; } .yoo-radious9 { border-radius: 9px; } .yoo-radious10 { border-radius: 10px; } .yoo-radious20 { border-radius: 20px; } .yoo-radious50 { border-radius: 50%; overflow: hidden; } .yoo-padding-lr30 { padding-left: 30px; padding-right: 30px; } .yoo-mp0 { margin: 0; padding: 0; list-style: none; } .yoo-un-list { padding-left: 0; list-style: disc; list-style-position: inside; margin-bottom: 0; } .yoo-un-list li { font-size: 16px; line-height: 1.6em; margin-top: 10px; } .yoo-un-list ul { padding-left: 23px; list-style: disc; list-style-position: inside; } .yoo-un-list > li:first-child { margin-top: 0; } ol.yoo-un-list { list-style-type: decimal; } .yoo-icon-color1 { background-color: rgba(255, 59, 48, 0.1); color: #ff3b30; } .yoo-icon-color2 { background-color: rgba(52, 199, 89, 0.1); color: #34c759; } .yoo-icon-color3 { background-color: rgba(0, 122, 255, 0.1); color: #007aff; } .yoo-icon-color4 { background-color: rgba(88, 86, 214, 0.1); color: #5856d6; } .yoo-icon-color5 { background-color: rgba(34, 34, 34, 0.1); color: rgba(34, 34, 34, 0.7); } .yoo-box-colo1, .yoo-box-colo2, .yoo-box-colo3, .yoo-box-colo4, .yoo-box-colo5, .yoo-box-colo6, .yoo-box-colo7, .yoo-box-colo8 { color: #fff; } .yoo-box-colo1 { background-color: #5856d6; } .yoo-box-colo2 { background-color: #007aff; } .yoo-box-colo3 { background-color: #34c759; } .yoo-box-colo4 { background-color: #ff3b30; } .yoo-box-colo5 { background-color: #ffcc00; } .yoo-box-colo6 { background-color: #5ac8fa; } .yoo-box-colo7 { background-color: #8e8e93; } .yoo-box-colo8 { background-color: #ff9500; } .yoo-box-transparent-colo1 { background-color: rgba(88, 86, 214, 0.1); color: #5856d6; } a.yoo-box-transparent-colo1:hover { background-color: #5856d6; color: #fff; } .yoo-box-transparent-colo2 { background-color: rgba(0, 122, 255, 0.1); color: #007aff; } a.yoo-box-transparent-colo2:hover { background-color: #007aff; color: #fff; } .yoo-box-transparent-colo3 { background-color: rgba(52, 199, 89, 0.1); color: #34c759; } a.yoo-box-transparent-colo3:hover { background-color: #34c759; color: #fff; } .yoo-box-transparent-colo4 { background-color: rgba(255, 59, 48, 0.1); color: #ff3b30; } a.yoo-box-transparent-colo4:hover { background-color: #ff3b30; color: #fff; } .yoo-box-transparent-colo5 { background-color: rgba(255, 204, 0, 0.1); color: #ffcc00; } a.yoo-box-transparent-colo5:hover { background-color: #ffcc00; color: #fff; } .yoo-box-transparent-colo6 { background-color: rgba(90, 200, 250, 0.1); color: #5ac8fa; } a.yoo-box-transparent-colo6:hover { background-color: #5ac8fa; color: #fff; } .yoo-box-transparent-colo7 { background-color: rgba(90, 200, 250, 0.1); color: #8e8e93; } a.yoo-box-transparent-colo7:hover { background-color: #8e8e93; color: #fff; } .yoo-box-transparent-colo8 { background-color: rgba(255, 149, 0, 0.1); color: #ff9500; } a.yoo-box-transparent-colo8:hover { background-color: #5ac8fa; color: #fff; } .yoo-success-color { color: #34c759; } .yoo-success-color-bg { background-color: #34c759; color: rgba(255, 255, 255, 0.9); } .yoo-danger-color { color: #ff3b30; } .yoo-color-plate-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .yoo-color-plate-wrap.yoo-style1 { color: #fff; } .yoo-color-plate-wrap.yoo-style2 div { border: 1px solid rgba(34, 34, 34, 0.1); } .yoo-color-plate-wrap div { padding: 12px 20px; min-width: 150px; margin-bottom: 10px; margin-right: 10px; text-align: center; border-radius: 4px; } .yoo-accent-bg1 { background-color: #5856d6; } .yoo-accent-bg2 { background-color: #007aff; } .yoo-accent-bg3 { background-color: #34c759; } .yoo-accent-bg4 { background-color: #ff3b30; } .yoo-accent-bg5 { background-color: #ffcc00; } .yoo-accent-bg6 { background-color: #5ac8fa; } .yoo-accent-bg7 { background-color: #8e8e93; } .yoo-accent-bg8 { background-color: #ff9500; } .yoo-accent-color1 { color: #5856d6; } .yoo-accent-color2 { color: #007aff; } .yoo-accent-color3 { color: #34c759; } .yoo-accent-color4 { color: #ff3b30; } .yoo-accent-color5 { color: #ffcc00; } .yoo-accent-color6 { color: #5ac8fa; } .yoo-accent-color7 { color: #8e8e93; } .yoo-accent-color8 { color: #ff9500; } .yoo-base-bg1 { background-color: #222; } .yoo-base-bg2 { background-color: rgba(34, 34, 34, 0.7); } .yoo-base-bg3 { background-color: rgba(34, 34, 34, 0.4); } .yoo-base-bg4 { background-color: rgba(34, 34, 34, 0.1); } .yoo-base-bg5 { background-color: rgba(34, 34, 34, 0.02); } .yoo-base-bg6 { background-color: rgba(34, 34, 34, 0.05); } .yoo-base-color1 { color: #222; } .yoo-base-color2 { color: rgba(34, 34, 34, 0.7); } .yoo-base-color3 { color: rgba(34, 34, 34, 0.4); } .yoo-base-color4 { color: rgba(34, 34, 34, 0.1); } .yoo-base-color5 { color: rgba(34, 34, 34, 0.02); } .yoo-base-color6 { color: rgba(34, 34, 34, 0.05); } .yoo-white-bg { background-color: #fff; } .yoo-gray-bg { background-color: rgba(34, 34, 34, 0.02); } .yoo-flex { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } .yoo-height-100p { height: 100%; } .yoo-card.yoo-style1 { border: 1px solid rgba(34, 34, 34, 0.1); border-radius: 4px; background-color: #fff; } .yoo-card.yoo-style1.yoo-height-auto { height: auto; } .yoo-card.yoo-style1 .yoo-card-heading { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 10px 30px; min-height: 50px; border-bottom: 1px solid rgba(34, 34, 34, 0.1); position: relative; z-index: 5; } .yoo-card.yoo-style1 .yoo-card-title { font-size: 16px; font-weight: 500; margin-bottom: 0; } .yoo-box-50 { height: 50px; width: 50px; border-radius: 50%; overflow: hidden; font-size: 14px; font-weight: 500; text-transform: uppercase; -webkit-box-flex: 0; -ms-flex: none; flex: none; } .yoo-box-50 img { height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; } .yoo-padd-lr-30 { padding-left: 30px; padding-right: 30px; } .yoo-padd-lr-15 { padding-left: 15px; padding-right: 15px; } .yoo-content.yoo-style1 { padding-left: 270px; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; min-height: calc(100vh - 60px); overflow: hidden; } .yoo-content.yoo-style2 { padding-left: 360px; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .yoo-content.yoo-style3 { padding-right: 340px; } .yoo-content.yoo-style4 { background-color: #fff; z-index: 10; overflow-x: hidden; } .yoo-content.yoo-style4 .container-fluid { padding: 0 70px; } .yoo-content.yoo-style1.yoo-sp-content-container { min-height: calc(100vh - 103px); } .material-icons { font-size: inherit; } .yoo-card-content-height1 { height: 419px; overflow: auto; } .yoo-opacity9 { opacity: 0.9; } .yoo-opacity8 { opacity: 0.8; } .yoo-opacity7 { opacity: 0.7; } .yoo-opacity6 { opacity: 0.6; } .yoo-opacity5 { opacity: 0.5; } .yoo-opacity4 { opacity: 0.4; } .yoo-opacity3 { opacity: 0.3; } .yoo-opacity2 { opacity: 0.2; } .yoo-opacity1 { opacity: 1; } .yoo-navigation.yoo-style1 { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; border-radius: 4px; border: 1px solid rgba(34, 34, 34, 0.1); } .yoo-navigation.yoo-style1 .yoo-prev, .yoo-navigation.yoo-style1 .yoo-next { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 18px; height: 30px; width: 30px; } .yoo-navigation.yoo-style1 .yoo-prev:hover, .yoo-navigation.yoo-style1 .yoo-next:hover { background-color: rgba(34, 34, 34, 0.02); } .yoo-navigation.yoo-style1 .yoo-prev { border-right: 1px solid rgba(34, 34, 34, 0.1); } .yoo-get-star { display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 24px; position: relative; cursor: pointer; height: 24px; width: 24px; color: rgba(34, 34, 34, 0.4); } .yoo-get-star i { display: inline-block; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .yoo-get-star i:first-child { position: absolute; left: 0; top: 0; opacity: 0; } .yoo-get-star.active i:first-child { opacity: 1; } .yoo-get-star.active i:last-child { opacity: 0; } .yoo-search.yoo-style2 { position: relative; min-width: 400px; background-color: #fff; border-radius: 4px; } .yoo-search.yoo-style2 input { border: 1px solid rgba(34, 34, 34, 0.1); height: 30px; border-radius: 4px; padding: 5px 10px; padding-left: 32px; width: 100%; font-size: 14px; background-color: transparent; color: rgba(34, 34, 34, 0.7); } .yoo-search.yoo-style2 input:focus { outline: none; } .yoo-search.yoo-style2 input::-webkit-input-placeholder { color: rgba(34, 34, 34, 0.4); } .yoo-search.yoo-style2 input::-moz-placeholder { color: rgba(34, 34, 34, 0.4); } .yoo-search.yoo-style2 input:-ms-input-placeholder { color: rgba(34, 34, 34, 0.4); } .yoo-search.yoo-style2 input:-moz-placeholder { color: rgba(34, 34, 34, 0.4); } .yoo-search.yoo-style2 button { position: absolute; top: 0; font-size: 20px; padding: 0; border: 0; background: transparent; height: 100%; width: 32px; cursor: pointer; color: rgba(34, 34, 34, 0.4); padding-top: 2px; } .yoo-online-status { height: 6px; width: 6px; background-color: #b5b5b5; display: inline-block; border-radius: 50%; } .yoo-online-status.yoo-live { background-color: #34c759; } .yoo-uikits-heading { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; border-bottom: 1px solid rgba(34, 34, 34, 0.1); height: 60px; } .yoo-uikits-heading .yoo-uikits-title { font-size: 21px; font-weight: 500; margin-bottom: 0; margin-right: 20px; } .yoo-breadcamb.yoo-style1 { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .yoo-breadcamb.yoo-style1 li:not(:last-child) { padding-right: 10px; margin-right: 10px; position: relative; } .yoo-breadcamb.yoo-style1 li:not(:last-child):before { content: ''; height: 5px; width: 5px; border: 1px solid rgba(34, 34, 34, 0.7); position: absolute; -webkit-transform: rotate(45deg); transform: rotate(45deg); right: -1px; top: 9px; border-left: none; border-bottom: none; } .yoo-bg { background-repeat: no-repeat; background-size: cover; background-position: center; } .yoo-overlay.yoo-style1 { position: absolute; height: 100%; width: 100%; left: 0; top: 0; background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.7))); background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)); } .yoo-zoom-effect { position: relative; overflow: hidden; } .yoo-zoom-effect .yoo-zoom-effect-in { -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .yoo-zoom-effect:hover .yoo-zoom-effect-in { -webkit-transform: scale(1.07); transform: scale(1.07); } .yoo-vertical-middle { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100%; } .yoo-vertical-middle-in { width: 100%; -webkit-box-flex: 0; -ms-flex: none; flex: none; } .yoo-gutter-less { padding-left: 1px; } .yoo-gutter-less .row > div { padding: 0; margin-left: -1px; } .yoo-border { border: 1px solid rgba(34, 34, 34, 0.1); } .yoo-custom-input-area { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; position: relative; } .yoo-custom-input-area .yoo-custom-input-field { height: 100%; width: 100%; padding: 5px 0; font-size: 16px; line-height: 1.6em; } .yoo-custom-input-area .yoo-custom-input-field:focus { outline: none; } .yoo-custom-input-area [contentEditable=true]:empty:not(:focus):before { content: attr(data-placeholder); color: rgba(34, 34, 34, 0.4); } .yoo-mobile-toggle-btn { font-size: 24px; color: rgba(34, 34, 34, 0.4); display: none; } .yoo-with-mobile-toggle { position: relative; } .nicescroll-rails div { background-color: rgba(34, 34, 34, 0.1) !important; } @media screen and (max-width: 1199px) { .yoo-content.yoo-style2 { padding-left: 0px; } .yoo-mobile-toggle-btn { display: -webkit-box; display: -ms-flexbox; display: flex; } .yoo-mobile-toggle-btn + .yoo-search.yoo-style2 { display: none; } .yoo-mobile-toggle-btn.active + .yoo-search.yoo-style2 { display: block; } .yoo-search.yoo-style2 { position: absolute; top: 110%; right: 0; z-index: 100; } .yoo-contact-wrap.yoo-style1 .yoo-search.yoo-style2 { position: initial; min-width: 100%; } } @media screen and (max-width: 575px) { .yoo-hide-mobile { display: none; } } .yoo-chart-tooltip { pointer-events: none; position: absolute; font-size: 13px; text-align: center; background: white; padding: 3px 12px 4px; z-index: 5; margin: 0 auto; border-radius: 4px; border: 1px solid rgba(34, 34, 34, 0.1); -webkit-transform: translateX(-50%); transform: translateX(-50%); display: none; z-index: 1000; color: rgba(34, 34, 34, 0.7); background-color: #fff; } .yoo-chart-tooltip.active { display: block; } .yoo-chart-tooltip:after { content: ""; position: absolute; margin-left: -5px; height: 10px; width: 10px; border: 1px solid rgba(34, 34, 34, 0.1); -webkit-transform: rotate(45deg); transform: rotate(45deg); left: 50%; bottom: -6px; background-color: #fff; border-left: 0; border-top: 0; } /*Custome Sticky*/ .tt-sticky-content { position: relative; } .tt-active-sticky .tt-sticky-content-in { position: fixed; bottom: 0px; } .tt-active-sticky-sm .tt-sticky-content-in { position: fixed; top: 0px; } .tt-active-sticky.tt-active-absoulut .tt-sticky-content-in { position: absolute; top: initial; left: 0 !important; } .tt-active-sticky-sm.tt-active-absoulut-bal .tt-sticky-content-in { position: absolute; bottom: 0; top: initial; left: 0 !important; } .yoo-card-settings { display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 18px; color: rgba(34, 34, 34, 0.4); } .yoo-card-settings button { border: none; background-color: transparent; display: -webkit-box; display: -ms-flexbox; display: flex; padding: 0 4px; color: inherit; cursor: pointer; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .yoo-card-settings button:focus { outline: none; } .yoo-card-settings button:hover { color: rgba(34, 34, 34, 0.7); } .yoo-dragable-card-toggle.yoo-active { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .yoo-card-heading .yoo-card-settings { margin-right: -8px; } .yoo-draggable-card-wrap .yoo-card:not(:last-child) { margin-bottom: 30px; } .yoo-icons-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .yoo-icons-wrap li { width: 16.666667%; padding: 0 15px; } .yoo-icons-wrap .yoo-icons-wrap-in { text-align: center; border: 1px solid rgba(34, 34, 34, 0.1); border-radius: 4px; margin-bottom: 30px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .yoo-icons-wrap .yoo-icons-wrap-in:hover { -webkit-transform: translateY(-6px); transform: translateY(-6px); } .yoo-icons-wrap i { display: block; font-size: 40px; padding: 30px 0; } .yoo-icons-wrap .yoo-icons-classes { font-size: 14px; border-top: 1px solid rgba(34, 34, 34, 0.1); display: block; padding: 10px 0; } .breadcrumb { background-color: rgba(34, 34, 34, 0.02); } .breadcrumb .breadcrumb-item.active { color: rgba(34, 34, 34, 0.7); } .page-link { color: rgba(34, 34, 34, 0.7); border-color: rgba(34, 34, 34, 0.1); background-color: #fff; } .page-item.disabled .page-link { background-color: #fff; border-color: rgba(34, 34, 34, 0.1); } .page-link:focus, .page-link:hover { color: #5856d6; text-decoration: none; background-color: rgba(34, 34, 34, 0.02); border-color: rgba(34, 34, 34, 0.1); } .page-item.active .page-link { background-color: #5856d6; border-color: #5856d6; } .pagination i { line-height: 1em; font-size: 18px; position: relative; margin-top: -5px; top: 4px; } /* Ensure that the demo table scrolls */ .yoo-data-table th, .yoo-data-table td { white-space: nowrap; } .yoo-data-table .dataTables_wrapper { width: 100%; margin: 0 auto; } .yoo-badge-group.yoo-style1 .yoo-badge { margin-right: 10px; } .yoo-badge { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; padding: 0 5px; border-radius: 2px; text-transform: uppercase; font-size: 10px; font-weight: 500; line-height: 17px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .yoo-section-heading.yoo-style1 .yoo-section-title { font-size: 50px; margin-bottom: 1px; } .yoo-section-heading.yoo-style1 .yoo-section-subtitle { font-size: 21px; line-height: 1.6em; } .yoo-section-heading.yoo-style2 .yoo-section-title { font-size: 70px; margin-bottom: 2px; } .yoo-section-heading.yoo-style2 .yoo-section-subtitle { font-size: 21px; line-height: 1.6em; } .yoo-section-heading.yoo-style2.yoo-white .yoo-section-title { color: #fff; } .yoo-section-heading.yoo-style2.yoo-white .yoo-section-subtitle { color: rgba(255, 255, 255, 0.7); } .yoo-landing-testimonial { border: 2px solid #eaeaea; padding: 30px 40px; padding-bottom: 40px; border-radius: 10px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .yoo-landing-testimonial:hover { -webkit-transform: translateY(-5px); transform: translateY(-5px); -webkit-box-shadow: 4.386px 14.345px 25.5px 4.5px rgba(17, 17, 18, 0.1); box-shadow: 4.386px 14.345px 25.5px 4.5px rgba(17, 17, 18, 0.1); } .yoo-landing-testimonial .yoo-landing-testimonial-text { font-size: 21px; line-height: 1.6em; margin-bottom: 18px; } .yoo-landing-testimonial .yoo-landing-testimonial-meta { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .yoo-landing-testimonial .yoo-landing-testimonial-img { -webkit-box-flex: 0; -ms-flex: none; flex: none; margin-right: 8px; } .yoo-landing-testimonial .yoo-landing-testimonial-name { font-size: 18px; font-weight: 500; margin-bottom: 0; } .yoo-landing-testimonial .yoo-landing-testimonial-desc { font-size: 16px; line-height: 1.6em; } .yoo-side-footer { background-color: #101010; overflow: hidden; } .yoo-side-footer .yoo-footer-img { width: calc(100% + 200px); position: relative; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); margin-bottom: -60px; } .yoo-footer-btn { color: #fff; border: 2px solid rgba(255, 255, 255, 0.7); border-radius: 4px; padding: 0.4em 2.4em; font-size: 16px; line-height: 1.6em; } .yoo-footer-btn:hover { color: #101010; background-color: #fff; border-color: #fff; -webkit-transform: translateY(-1px); transform: translateY(-1px); } .yoo-dropdown { list-style: none; position: absolute; width: 220px; background: #fff; left: 0; top: 100%; padding: 10px 0; opacity: 0; visibility: hidden; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; border: 1px solid rgba(34, 34, 34, 0.1); border-radius: 4px; display: block; z-index: 6; -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); } .yoo-fade-up .yoo-desktop-nav .yoo-nav-list .yoo-dropdown.yoo-style1 .yoo-has-children > a { position: relative; } .yoo-fade-up .yoo-desktop-nav .yoo-nav-list .yoo-dropdown.yoo-style1 .yoo-has-children > a:before { content: ''; position: absolute; height: 6px; width: 6px; border: 1px solid rgba(34, 34, 34, 0.4); border-left: 0; border-top: 0; right: 15px; top: 15px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .yoo-drop-style1 .yoo-toggle-btn { display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 24px; padding: 5px 0; } .yoo-drop-style1 .yoo-toggle-btn.yoo-large-size { font-size: 30px; } .yoo-drop-style1 .yoo-toggle-btn.yoo-small-size { font-size: 18px; } .yoo-drop-style1 .yoo-drop-dropdown-list { padding: 0; } .yoo-drop-style1 .btn:focus { outline: none; -webkit-box-shadow: none; box-shadow: none; } .yoo-toggle-list.yoo-style1 { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .yoo-toggle-list.yoo-style1 .yoo-toggle-body { margin-right: 20px; } .yoo-toggle-list.yoo-style1 .yoo-toggle-body:last-child { margin-right: 0; } .yoo-drop-style1 .yoo-toggle-btn { cursor: pointer; } .yoo-drop-style1 .yoo-dropdown { margin-top: 10px; } .yoo-drop-style1 .yoo-dropdown.active { margin-top: 0; opacity: 1; visibility: visible; } .yoo-left-dropdown .yoo-dropdown { left: 0; } .yoo-right-dropdown .yoo-dropdown { left: inherit; right: 0; } .custom-control-input:focus ~ .custom-control-label::before, .btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show > .btn-primary.dropdown-toggle:focus { -webkit-box-shadow: none; box-shadow: none; } .modal-content { background-color: #fff; } .modal-header, .modal-footer { border-color: rgba(34, 34, 34, 0.1); } .close, .close:hover { text-shadow: none; color: rgba(34, 34, 34, 0.7); opacity: 0.7; } .close:hover { opacity: 1; } .dropdown-item { font-size: 14px; } .table { color: rgba(34, 34, 34, 0.7); } .yoo-card-heading-right { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .yoo-card-heading-right .yoo-search.yoo-style2 { min-width: 180px; margin-right: 10px; } .yoo-card-heading-right .yoo-search.yoo-style2 input { height: 28px; } .yoo-card-heading-right .yoo-search.yoo-style2 button { top: 1px; font-size: 18px; } .yoo-add { padding: 20px; position: absolute; bottom: 0px; left: 0; width: 100%; z-index: 10; background-color: #fff; } .yoo-add .yoo-add-in { padding: 25px 15px; display: block; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; background-color: #f2f2f6; border: 1px solid #eaeaea; border-radius: 4px; text-align: center; } .yoo-add .yoo-add-thumb { display: block; -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15); width: 160px; margin: auto; margin-bottom: 16px; } .yoo-add .yoo-add-title { font-size: 16px; margin: 0; font-weight: 500; margin-bottom: 16px; } pre { margin: 0; padding: 5px 10px; border: 1px solid rgba(34, 34, 34, 0.1); background-color: rgba(34, 34, 34, 0.02); border-radius: 4px; } @media screen and (min-width: 991px) { .yoo-add + .yoo-sidebarheader-in { height: calc(100% - 260px) !important; } } @media screen and (max-width: 991px) { .yoo-add { display: none; } } @media screen and (max-width: 991px) { .tt-sticky-content-in { width: 100% !important; left: 0 !important; position: initial !important; } .tt-sticky-content-middle, .tt-sticky-content { height: initial !important; } .yoo-card-content-height1 { height: initial; } .yoo-icons-wrap li { width: 33.333333%; } } @media screen and (max-width: 575px) { .yoo-icons-wrap li { width: 50%; } } @media screen and (max-width: 400px) { .yoo-icons-wrap li { width: 100%; } } /*========== End General Style ==========*/ /*========== Start Smooth Scrollbar Style ==========*/ scrollbar, [scrollbar], [data-scrollbar] { display: block; position: relative; overflow: scroll; } scrollbar .scroll-content, [scrollbar] .scroll-content, [data-scrollbar] .scroll-content { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); will-change: transform; } scrollbar.scrolling .scroll-content, [scrollbar].scrolling .scroll-content, [data-scrollbar].scrolling .scroll-content { pointer-events: none; } scrollbar.scrolling .scroll-content .scroll-content, [scrollbar].scrolling .scroll-content .scroll-content, [data-scrollbar].scrolling .scroll-content .scroll-content { pointer-events: auto; } scrollbar .scrollbar-track, [scrollbar] .scrollbar-track, [data-scrollbar] .scrollbar-track { position: absolute; opacity: 0; z-index: 1; -webkit-transition: opacity 0.5s 1s ease-out, background 0.5s ease-out; transition: opacity 0.5s 1s ease-out, background 0.5s ease-out; background: none; } scrollbar .scrollbar-track.show, [scrollbar] .scrollbar-track.show, [data-scrollbar] .scrollbar-track.show, scrollbar .scrollbar-track:hover, [scrollbar] .scrollbar-track:hover, [data-scrollbar] .scrollbar-track:hover { opacity: 1; -webkit-transition-delay: 0s; transition-delay: 0s; } scrollbar .scrollbar-track:hover, [scrollbar] .scrollbar-track:hover, [data-scrollbar] .scrollbar-track:hover { background: transparent; } scrollbar .scrollbar-track-x, [scrollbar] .scrollbar-track-x, [data-scrollbar] .scrollbar-track-x { bottom: 0; left: 0; width: 100%; height: 8px; } scrollbar .scrollbar-track-y, [scrollbar] .scrollbar-track-y, [data-scrollbar] .scrollbar-track-y { top: 0; right: 0; width: 6px; height: 100%; } scrollbar .scrollbar-thumb, [scrollbar] .scrollbar-thumb, [data-scrollbar] .scrollbar-thumb { position: absolute; top: 0; left: -5px; width: 6px; height: 8px; background: transparent; border-radius: 4px; } [data-scrollbar] .scrollbar-thumb:before, [data-scrollbar] .scrollbar-thumb:after { content: ''; position: absolute; height: calc(100% - 40px); width: 6px; background: rgba(34, 34, 34, 0.1); top: 20px; right: 0; border-radius: 4px; } [data-scrollbar] .scrollbar-thumb:before { z-index: 1; } [data-scrollbar] .scrollbar-thumb:after { background-color: #fff; } /*========== End Smooth Scrollbar Style ==========*/ /*========== Start Icon Box ==========*/ .yoo-iconbox.yoo-style1 .yoo-icon, .yoo-iconbox.yoo-style2 .yoo-icon { height: 50px; width: 50px; font-size: 24px; } .yoo-iconbox.yoo-style1 .yoo-icon { margin: auto; } .yoo-iconbox.yoo-style1 .yoo-iconbox-sub-heading { line-height: 1.3em; } .yoo-iconbox.yoo-style1 .yoo-iconbox-heading { font-size: 36px; margin-top: 5px; margin-bottom: 0px; font-weight: 400; } .yoo-iconbox.yoo-style1 .yoo-progress-lavel { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 8px 0; } .yoo-iconbox.yoo-style2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 20px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; } .yoo-iconbox.yoo-style2 .yoo-iconbox-text { text-align: right; } .yoo-iconbox.yoo-style2 .yoo-icon { -webkit-box-flex: 0; -ms-flex: none; flex: none; margin-right: 15px; } .yoo-iconbox.yoo-style2 .yoo-iconbox-heading { font-size: 24px; font-weight: 400; margin-bottom: 0; } .yoo-iconbox.yoo-style2 .yoo-iconbox-sub-heading { font-size: 14px; } .yoo-iconbox.yoo-style2 .yoo-progressbar-wrap.yoo-style1 { -webkit-box-flex: 0; -ms-flex: none; flex: none; width: 100%; margin-top: 15px; } .yoo-iconbox.yoo-style3 { padding: 15px 20px; } .yoo-iconbox.yoo-style3 .yoo-iconbox-text { position: relative; } .yoo-iconbox.yoo-style3 .yoo-iconbox-heading { font-size: 24px; font-weight: 400; margin-bottom: 3px; line-height: 1.2em; } .yoo-iconbox.yoo-style3 .yoo-iconbox-sub-heading { font-size: 14px; } .yoo-iconbox.yoo-style3 .yoo-icon { font-size: 24px; position: absolute; right: 0; top: 0; } .yoo-iconbox.yoo-style3 .yoo-progress-lavel { position: absolute; bottom: 0; right: 0; } .yoo-iconbox.yoo-style4 { display: -webkit-box; display: -ms-flexbox; display: flex; border-radius: 4px; padding: 30px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; } .yoo-iconbox.yoo-style4:before { content: ''; border-radius: 4px; position: absolute; height: 100%; width: 100%; left: 0; top: 0; background-image: -webkit-gradient(linear, right top, left top, from(rgba(255, 255, 255, 0.3)), to(rgba(255, 244, 240, 0))); background-image: linear-gradient(to left, rgba(255, 255, 255, 0.3) 0%, rgba(255, 244, 240, 0) 100%); } .yoo-iconbox.yoo-style4.yoo-color1 { background-color: #5856d6; -webkit-box-shadow: 0px 5px 18px 2px rgba(88, 86, 214, 0.2); box-shadow: 0px 5px 18px 2px rgba(88, 86, 214, 0.2); } .yoo-iconbox.yoo-style4.yoo-color2 { background-color: #007aff; -webkit-box-shadow: 0px 5px 18px 2px rgba(0, 122, 255, 0.2); box-shadow: 0px 5px 18px 2px rgba(0, 122, 255, 0.2); } .yoo-iconbox.yoo-style4.yoo-color3 { background-color: #5ac8fa; -webkit-box-shadow: 0px 5px 18px 2px rgba(90, 200, 250, 0.2); box-shadow: 0px 5px 18px 2px rgba(90, 200, 250, 0.2); } .yoo-iconbox.yoo-style4.yoo-color4 { background-color: #8e8e93; -webkit-box-shadow: 0px 5px 18px 2px rgba(142, 142, 147, 0.2); box-shadow: 0px 5px 18px 2px rgba(142, 142, 147, 0.2); } .yoo-iconbox.yoo-style4 .yoo-icon { height: 70px; width: 70px; color: rgba(255, 255, 255, 0.9); background-color: rgba(255, 255, 255, 0.1); font-size: 30px; margin-right: 15px; border-radius: 4px; position: relative; z-index: 1; } .yoo-iconbox.yoo-style4 .yoo-iconbox-text { position: relative; z-index: 1; } .yoo-iconbox.yoo-style4 .yoo-iconbox-heading { font-size: 32px; color: rgba(255, 255, 255, 0.9); margin-bottom: 0; } .yoo-iconbox.yoo-style4 .yoo-iconbox-sub-heading { font-size: 14px; color: rgba(255, 255, 255, 0.7); } /*========== End Icon Box ==========*/ /*========== Start Tabs ==========*/ .yoo-tab-body-text { font-size: 14px; line-height: 1.6em; } .yoo-tab-body-text p:last-child { margin-bottom: 0; } .yoo-tab { display: none; } .yoo-tab.yoo-active { display: block; } .yoo-tabs.yoo-style1 .yoo-tab-links { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0; padding: 0; list-style: none; -ms-flex-wrap: wrap; flex-wrap: wrap; } .yoo-tabs.yoo-style1 .yoo-tab-links a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-width: 140px; border-right: 1px solid rgba(34, 34, 34, 0.1); border-bottom: 1px solid rgba(34, 34, 34, 0.1); padding: 15px; position: relative; } .yoo-tabs.yoo-style1 .yoo-tab-links a:hover { background-color: rgba(34, 34, 34, 0.02); } .yoo-tabs.yoo-style1 .yoo-tab-links a:before { content: ''; height: 3px; width: 0%; position: absolute; top: 0; left: 0; background-color: #5856d6; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .yoo-tabs.yoo-style1 .yoo-tab-links .yoo-active a { border-bottom-color: transparent; } .yoo-tabs.yoo-style1 .yoo-tab-links .yoo-active a:before { width: 100%; } .yoo-tabs.yoo-style1 .yoo-tab-links .yoo-active a:hover { background-color: transparent; } .yoo-tabs.yoo-style1 .