@charset "UTF-8";

:root {
    --color-main-1: #ffffff;
    --color-main-2: #7a5da4;
    --color-main-3: #a2a2af;
    --color-main-4: #563d7c;
    --color-main-5: #cbbde2;
    --color-main-6: #2f4155;
    --color-main-7: #dddddd;
    --color-main-8: #296796;
    --color-main-9: #4090cb;
    --color-main-10: #009245;
    --color-main-11: #00000003;
    --color-main-12: #111111;
    --color-main-13: #f1f1f1;
    --color-main-14: #04AA6D;
    --color-main-15: #1e90ff;
    --color-main-16: #6c757d;
    --color-main-17: #a9a9a9;
    --color-main-18: #212529;
    --color-main-19: #f5f5f5;
    --color-main-20: #dbdbdb;
    --color-main-21: #00000021;
    --color-main-22: #681292;
    --color-main-23: #eeeeee;
    --color-main-24: #ffffff1a;
    --color-main-25: #1a1b2e;
    --color-main-26: #92929217;
    --color-main-27: #777777;
    --color-main-28: #00000033;
    --color-main-29: #00000030;
    --color-main-30: #262626;
    --color-main-31: #999999;
    --color-main-32: #545a60;
    --color-main-33: #888888;
    --color-main-34: #ff0000;
    --color-main-35: #aaaaaa;
    --color-main-36: #fbfbfb;
    --color-main-37: #00000080;
    --color-main-38: #00000000;
    --color-main-39: #000000;
    --color-main-40: #337ab7;
    --color-main-41: #5cb85c;
    --color-main-42: #5bc0de;
    --color-main-43: #f0ad4e;
    --color-main-44: #d9534f;
    --color-main-45: #47bd9a;
    --color-main-46: #47bd9a2e;
    --color-main-47: #47bd9a4d;
    --color-main-48: #e74c5e;
    --color-main-49: #e74c5e2e;
    --color-main-50: #e74c5e66;
    --color-main-51: #f9d570;
    --color-main-52: #f9d5702e;
    --color-main-53: #f9d5704d;
    --color-main-54: #ffa500;
    --color-main-55: #17a2b8;
    --color-main-56: #e9fafd;
    --color-main-57: #a45eed;
    --color-main-58: #e8d4ff;
    --color-main-59: #dec3ff;
    --color-main-60: #007bff;
    --color-main-61: #28a745;
    --color-main-62: #dc3545;
    --color-main-63: #ffc107;
    --color-main-64: #fbb72c;
    --color-main-65: #f8f9fa;
    --color-main-66: #343a40;
    --color-main-67: #0069d9;
    --color-main-68: #0062cc;
    --color-main-69: #5a6268;
    --color-main-70: #545b62;
    --color-main-71: #218838;
    --color-main-72: #1e7e34;
    --color-main-73: #c82333;
    --color-main-74: #bd2130;
    --color-main-75: #e0a800;
    --color-main-76: #d39e00;
    --color-main-77: #f8ae1a;
    --color-main-78: #f8b123e1;
    --color-main-79: #138496;
    --color-main-80: #117a8b;
    --color-main-81: #e2e6ea;
    --color-main-82: #dae0e5;
    --color-main-83: #23272b;
    --color-main-84: #1d2124;
    --color-main-85: #0056b3;
    --color-main-86: #005cbf;
    --color-main-87: #4e555b;
    --color-main-88: #1c7430;
    --color-main-89: #b21f2d;
    --color-main-90: #c69500;
    --color-main-91: #fbb62c;
    --color-main-92: #ecae30;
    --color-main-93: #10707f;
    --color-main-94: #d3d9df;
    --color-main-95: #171a1d;
    --color-main-96: #007bff80;
    --color-main-97: #6c757d80;
    --color-main-98: #28a74580;
    --color-main-99: #dc354580;
    --color-main-100: #ffc10780;
    --color-main-101: #fbb62cb4;
    --color-main-102: #17a2b880;
    --color-main-103: #f8f9fa80;
    --color-main-104: #343a4080;
    --color-main-105: #ffffffff;
    --color-main-106: #0098c9ff;
    --color-main-107: #0082a9ff;
    --color-main-108: #f0e3e7;
    --color-main-109: #f2e7eb;
    --color-main-110: #f2e6e9;
    --color-main-111: #00bcd4;
    --color-main-112: #00d3ee;
    --color-main-113: #ffffffb3;
    --color-main-114: #f2fff2;
    --color-main-115: #f2dede;
    --color-main-116: #e0e0e0;
    --color-main-117: #b0b0b021;
    --color-main-118: #8000801a;
    --color-main-119: #e83e8c;
    --color-main-120: #f8d7da;
    --color-main-121: #fcf8e3;
    --color-main-122: #f1f5f2b3;
    --color-main-123: #faf9fa;
    --color-main-124: #e6e6e6;
    --color-main-125: #efefef;
    --color-main-126: #eaf7e9;
    --color-main-127: #f9fcff;
    --color-main-128: #bcfde7;
    --color-main-129: #fbfbfbee;
    --color-main-130: #04aa6d;
    --color-main-131: #d0eacc;
    --color-main-132: #e7f7ea;
    --color-main-133: #f8efc0;
    --color-main-134: #ebf7fb;
    --color-main-135: #ffcfd3;
    --color-main-136: #e2b709;
    --color-main-137: #f5f9fc;
    --color-main-138: #e9f5ff;
    --color-main-139: #fff2de;
    --color-main-140: #333333;
    --color-main-141: #b32600;
    --color-main-142: #d63384;
    --color-main-143: #222222;
    --color-main-144: #666666;
    --color-main-145: #008000;
    --color-main-146: #cf6972;
    --color-main-147: #c3c3c3;
    --color-main-148: #273239;
    --color-main-149: #b3b3b3;
    --color-main-150: #a8a9aa;
    --color-main-151: #c99400;
    --color-main-152: #847f6d;
    --color-main-153: #ff4500;
    --color-main-154: #363636;
    --color-main-155: #663700;
    --color-main-156: #e9ecef;
    --color-main-157: #349c45;
    --color-main-158: #495057;
    --color-main-159: #80bdff;
    --color-main-160: #007bff40;
    --color-main-161: #e38200;
    --color-main-162: #f5c2c7;
    --color-main-163: #f5e79e;
    --color-main-164: #eef2f6;
    --color-main-165: #ededed;
    --color-main-166: #d0d7de;
    --color-main-167: #7baf73;
    --color-main-168: #a94442;
    --color-main-169: #ebccd1;
    --color-main-170: #d84d3d;
    --color-main-171: #e07164;
    --color-main-172: #b93425;
    --color-main-173: #dfe7f6;
    --color-main-174: #376fc8;
    --color-main-175: #ebedef;
    --color-main-176: #565e6c;
    --color-main-177: #d6f0e0;
    --color-main-178: #139647;
    --color-main-179: #f9e1e5;
    --color-main-180: #d62e4a;
    --color-main-181: #fbf0da;
    --color-main-182: #a17112;
    --color-main-183: #def1f7;
    --color-main-184: #2686a6;
    --color-main-185: #8c8c8c;
    --color-main-186: #332e2e;
    --color-main-187: #e8e8e8;
    --color-main-188: #e3e7eb;
    --color-main-189: #0000001a;
    --color-main-190: #f7d3de;
    --color-main-191: #e35583;
    --color-main-192: #1E252B;
    --color-main-193: #0000ff80;
    --color-main-194: #00000040;
    --color-main-195: #dee2e6;
    --color-main-196: #3e3e3e;
    --color-main-197: #ffffff33;
    --color-main-198: #ffffff80;
    --color-main-199: #00ff0066;
    --color-main-200: #00ff004d;
    --color-main-201: #e3ebf7;
    --color-main-202: #285192;
    --color-main-203: #00000099;
    --color-main-204: #39d03936;
    --color-main-205: #3b71ca;
    --color-main-206: #bdbdbd;
    --color-main-207: #0000000a;
    --color-main-208: #a0cfa9;
    --color-main-209: #fafafa;
    --color-main-210: #8b8e8f;
    --color-main-211: #5b575e;
    --color-main-212: #f0f0f5;
    --color-main-213: #f0faef;
    --color-main-214: #f0f0ef;
    --color-main-215: #00000013;
    --color-main-216: #7baf733d;
    --color-main-217: #e4e7e9;
    --color-main-218: #7baf7300;
    --color-main-219: #ffffff00;
    --color-main-220: #6f1e96;
    --color-main-221: #222;
    --color-main-222: #5a5d60;
    --color-main-223: #00000022;
    --color-main-224: #4dcb6a;
    --color-main-225: #4f8722;
    --color-main-226: #82797980;
    --color-main-227: #b1b1b1;
    --color-main-228: #bbbbbb;
    --color-main-229: #2e8b57;
    --color-main-230: #fff;
    --color-main-231: #555555;
    --color-main-232: #0000001f;
    --color-main-233: #000000cc;
    --color-main-234: #cccccc;
    --color-main-235: #394047;
    --color-main-236: #f9f9f9;
    --color-main-237: #6d6d6d;
    --color-main-238: #4cd964;
    --color-main-239: #fdfdfd;
    --color-main-240: #00000020;
    --color-main-241: #ff6873;
    --color-main-242: #c3f7ea;
    --color-main-243: #ffe57e;
    --color-main-244: #fffffff6;
    --color-main-245: #00000026;
    --color-main-246: #8BC34A;
    --color-main-247: #33691E;
    --color-main-248: #DCEDC8;
    --color-main-249: #f44336;
    --color-main-250: #b71c1c;
    --color-main-251: #FFCCBC;
    --color-main-252: #FFEB3B;
    --color-main-253: #212121;
    --color-main-254: #FFF9C4;
    --color-main-255: #01579B;
    --color-main-256: #B3E5FC;
    --color-main-257: #03A9F4;
    --color-main-258: #FF6F00;
    --color-main-259: #FFF8E1;
    --color-main-260: #e1eafc;
    --color-main-261: #5285eb;
    --color-main-262: #800080;
    --color-main-263: #ffffeb;
    --color-main-264: #68129214;
    --color-main-265: #d9b78a;
    --color-main-266: #68129240;
    --color-main-267: #f26722;
    --color-main-268: #f26722db;
    --color-main-269: #681292a1;
    --color-main-270: #68129294;
    --color-main-271: #ed3529;
    --color-main-272: #681292d1;
    --color-main-273: #672d93;
    --color-main-274: #620092;
    --color-main-275: #dfdfdf;
    --color-main-276: #208f20;
    --color-main-277: #1f1d1d;
    --color-main-278: #f0f0f0;
    --color-main-279: #ff7f50;
    --color-main-280: #e5e5e5;
    --color-main-281: #e1e1e1;
    --color-main-282: #f1786c;
    --color-main-283: #e3747f;
    --color-main-284: #000000e6;
    --color-main-285: #444444;
    --color-main-286: #64acff;
    --color-main-287: #d2d2d2;
    --color-main-288: #e6e6e8;
    --color-main-289: #a4a4a4;
    --color-main-290: #64acff40;
    --color-main-291: #13171c;
    --color-main-292: #1ed025;
    --color-main-293: #f7931a;
    --color-main-294: #fce281;
    --color-main-295: #fa6901;
    --color-main-296: ​#006400;
  }


.darkmode {
    --color-main-1: #1F1F1F;
    --color-main-2: #AA91CD;
    --color-main-3: #6A6A75;
    --color-main-4: #C3AFDF;
    --color-main-5: #564C6A;
    --color-main-6: #B1C0D0;
    --color-main-7: #3A3A3A;
    --color-main-8: #7AADD3;
    --color-main-9: #4E90C1;
    --color-main-10: #3DB576;
    --color-main-11: #DFDFDF03;
    --color-main-12: #DFDFDF;
    --color-main-13: #2B2B2B;
    --color-main-14: #1FA775;
    --color-main-15: #3896DF;
    --color-main-16: #8C949A;
    --color-main-17: #666666;
    --color-main-18: #D0D3D7;
    --color-main-19: #262626;
    --color-main-20: #3D3D3D;
    --color-main-21: #DFDFDF21;
    --color-main-22: #DFB5DF;
    --color-main-23: #2C2C2C;
    --color-main-24: #1F1F1F1a;
    --color-main-25: #D9D9DF;
    --color-main-26: #79797917;
    --color-main-27: #8F8F8F;
    --color-main-28: #DFDFDF33;
    --color-main-29: #DFDFDF30;
    --color-main-30: #D2D2D2;
    --color-main-31: #737373;
    --color-main-32: #A2A8AC;
    --color-main-33: #818181;
    --color-main-34: #DF9797;
    --color-main-35: #656565;
    --color-main-36: #222222;
    --color-main-37: #DFDFDF80;
    --color-main-38: #DFDFDF00;
    --color-main-39: #DFDFDF;
    --color-main-40: #639ED0;
    --color-main-41: #398539;
    --color-main-42: #20738C;
    --color-main-43: #8D561F;
    --color-main-44: #DF7E7B;
    --color-main-45: #218365;
    --color-main-46: #2183652e;
    --color-main-47: #2183654d;
    --color-main-48: #DF7A88; --color-main-48: #df7a8859;
    --color-main-49: #DF7A882e;
    --color-main-50: #DF7A8866;
    --color-main-51: #5E411F;
    --color-main-52: #5E411F2e;
    --color-main-53: #5E411F4d;
    --color-main-54: #A65D1F;
    --color-main-55: #289AAC;
    --color-main-56: #1F292C;
    --color-main-57: #B57ADF;
    --color-main-58: #463659;
    --color-main-59: #563F70;
    --color-main-60: #41A7DF;
    --color-main-61: #37A04F;
    --color-main-62: #DF8896;
    --color-main-63: #85521F;
    --color-main-64: #8B531F;
    --color-main-65: #232425;
    --color-main-66: #BEC3C8;
    --color-main-67: #5CB2DF;
    --color-main-68: #65B6DF;
    --color-main-69: #9DA2A7;
    --color-main-70: #A1A8AD;
    --color-main-71: #5AAF6D;
    --color-main-72: #65B577;
    --color-main-73: #DF98A6;
    --color-main-74: #DF9DA9;
    --color-main-75: #95671F;
    --color-main-76: #9B6F1F;
    --color-main-77: #975A1F;
    --color-main-78: #91571Fe1;
    --color-main-79: #4CA9B8;
    --color-main-80: #58AFBD;
    --color-main-81: #313437;
    --color-main-82: #353A3F;
    --color-main-83: #CFD2D6;
    --color-main-84: #D3D7D9;
    --color-main-85: #76BEDF;
    --color-main-86: #6EBADF;
    --color-main-87: #A7ADB2;
    --color-main-88: #70B880;
    --color-main-89: #DFA2AE;
    --color-main-90: #9F761F;
    --color-main-91: #8C531F;
    --color-main-92: #8E5B1F;
    --color-main-93: #66B5C1;
    --color-main-94: #3B4045;
    --color-main-95: #DADDDF;
    --color-main-96: #41A7DF80;
    --color-main-97: #8C949A80;
    --color-main-98: #37A04F80;
    --color-main-99: #DF889680;
    --color-main-100: #85521F80;
    --color-main-101: #8C531Fb4;
    --color-main-102: #289AAC80;
    --color-main-103: #23242580;
    --color-main-104: #BEC3C880;
    --color-main-105: #1F1F1Fff;
    --color-main-106: #26A4CDff;
    --color-main-107: #44AFD0ff;
    --color-main-108: #3C3134;
    --color-main-109: #382E32;
    --color-main-110: #382E31;
    --color-main-111: #1F95A9;
    --color-main-112: #1F8BA1;
    --color-main-113: #1F1F1Fb3;
    --color-main-114: #1F251F;
    --color-main-115: #433333;
    --color-main-116: #393939;
    --color-main-117: #60606021;
    --color-main-118: #DFB5DF1a;
    --color-main-119: #DF79BA;
    --color-main-120: #4F3437;
    --color-main-121: #2A251F;
    --color-main-122: #252925b3;
    --color-main-123: #242324;
    --color-main-124: #333333;
    --color-main-125: #2C2C2C;
    --color-main-126: #222C21;
    --color-main-127: #1F2223;
    --color-main-128: #1F3A26;
    --color-main-129: #222222ee;
    --color-main-130: #1FA775;
    --color-main-131: #283D25;
    --color-main-132: #202D22;
    --color-main-133: #362E1F;
    --color-main-134: #202A2D;
    --color-main-135: #5D3539;
    --color-main-136: #84601F;
    --color-main-137: #222528;
    --color-main-138: #1F2A31;
    --color-main-139: #32281F;
    --color-main-140: #C7C7C7;
    --color-main-141: #DFA585;
    --color-main-142: #DF84C7;
    --color-main-143: #D6D6D6;
    --color-main-144: #9D9D9D;
    --color-main-145: #5BC45B;
    --color-main-146: #CA767D;
    --color-main-147: #515151;
    --color-main-148: #C2CBD1;
    --color-main-149: #5E5E5E;
    --color-main-150: #656667;
    --color-main-151: #A0761F;
    --color-main-152: #8E887A;
    --color-main-153: #DF7F46;
    --color-main-154: #C5C5C5;
    --color-main-155: #DFBA8D;
    --color-main-156: #2B2E31;
    --color-main-157: #499F56;
    --color-main-158: #ACB1B7;
    --color-main-159: #306398;
    --color-main-160: #41A7DF40;
    --color-main-161: #C3731F;
    --color-main-162: #6A3E43;
    --color-main-163: #43361F;
    --color-main-164: #282B2E;
    --color-main-165: #2D2D2D;
    --color-main-166: #3C4249;
    --color-main-167: #4F7A49;
    --color-main-168: #DF9694;
    --color-main-169: #563D41;
    --color-main-170: #DF8376;
    --color-main-171: #CA6F64;
    --color-main-172: #DF9A8E;
    --color-main-173: #2D3441;
    --color-main-174: #709FDF;
    --color-main-175: #2B2E2E;
    --color-main-176: #9EA5B0;
    --color-main-177: #223629;
    --color-main-178: #41AD6C;
    --color-main-179: #432E33;
    --color-main-180: #DF8DA5;
    --color-main-181: #332A1F;
    --color-main-182: #B68E40;
    --color-main-183: #223135;
    --color-main-184: #52A0BB;
    --color-main-185: #7D7D7D;
    --color-main-186: #CECACA;
    --color-main-187: #323232;
    --color-main-188: #313437;
    --color-main-189: #DFDFDF1a;
    --color-main-190: #53353F;
    --color-main-191: #DF749A;
    --color-main-192: #CFD5DA;
    --color-main-193: #D3D3DF80;
    --color-main-194: #DFDFDF40;
    --color-main-195: #35383C;
    --color-main-196: #BEBEBE;
    --color-main-197: #1F1F1F33;
    --color-main-198: #1F1F1F80;
    --color-main-199: #1F971F66;
    --color-main-200: #1F971F4d;
    --color-main-201: #2B313B;
    --color-main-202: #94B5DF;
    --color-main-203: #DFDFDF99;
    --color-main-204: #1F8D1F36;
    --color-main-205: #709DDF;
    --color-main-206: #555555;
    --color-main-207: #DFDFDF0a;
    --color-main-208: #345B3C;
    --color-main-209: #232323;
    --color-main-210: #7B7D7E;
    --color-main-211: #ACA7AD;
    --color-main-212: #2B2B30;
    --color-main-213: #20281F;
    --color-main-214: #2B2B2B;
    --color-main-215: #DFDFDF13;
    --color-main-216: #4F7A493d;
    --color-main-217: #323435;
    --color-main-218: #4F7A4900;
    --color-main-219: #1F1F1F00;
    --color-main-220: #DFAEDF;
    --color-main-221: #D6D6D6;
    --color-main-222: #A3A5A7;
    --color-main-223: #DFDFDF22;
    --color-main-224: #1F8233;
    --color-main-225: #73A14E;
    --color-main-226: #918B8B80;
    --color-main-227: #5F5F5F;
    --color-main-228: #575757;
    --color-main-229: #59A67B;
    --color-main-230: #1F1F1F;
    --color-main-231: #ACACAC;
    --color-main-232: #DFDFDF1f;
    --color-main-233: #DFDFDFcc;
    --color-main-234: #494949;
    --color-main-235: #B8BEC4;
    --color-main-236: #242424;
    --color-main-237: #979797;
    --color-main-238: #1F7E1F;
    --color-main-239: #202020;
    --color-main-240: #DFDFDF20;
    --color-main-241: #DF656E;
    --color-main-242: #1F3A2E;
    --color-main-243: #4C371F;
    --color-main-244: #1F1F1Ff6;
    --color-main-245: #DFDFDF26;
    --color-main-246: #44731F;
    --color-main-247: #8BB779;
    --color-main-248: #2A381F;
    --color-main-249: #DF7D73;
    --color-main-250: #DFA4A4;
    --color-main-251: #62392B;
    --color-main-252: #4E3D1F;
    --color-main-253: #D6D6D6;
    --color-main-254: #2D281F;
    --color-main-255: #79C0DF;
    --color-main-256: #1F4355;
    --color-main-257: #1F97D6;
    --color-main-258: #DF701F;
    --color-main-259: #2B251F;
    --color-main-260: #2A3141;
    --color-main-261: #5E89DD;
    --color-main-262: #ff00ff;
    --color-main-263: #22221F;
    --color-main-264: #DFB5DF14;
    --color-main-265: #70542E;
    --color-main-266: #DFB5DF40;
    --color-main-267: #DF743B;
    --color-main-268: #DF743Bdb;
    --color-main-269: #DFB5DFa1;
    --color-main-270: #630093a8;
    --color-main-271: #DF867C;
    --color-main-272: #b215ffd1 ;
    --color-main-273: #DCACDF;
    --color-main-274: ##f565fe;
    --color-main-275: #3A3A3A;
    --color-main-276: #54AF54;
    --color-main-277: #DAD9D9;
    --color-main-278: #2B2B2B;
    --color-main-279: #CA613A;
    --color-main-280: #343434;
    --color-main-281: #383838;
    --color-main-282: #C9655B;
    --color-main-283: #C56A73;
    --color-main-284: #DFDFDFe6;
    --color-main-285: #B9B9B9;
    --color-main-286: #3673B6;
    --color-main-287: #444444;
    --color-main-288: #333334;
    --color-main-289: #6A6A6A;
    --color-main-290: #3673B640;
    --color-main-291: #DCDFDF;
    --color-main-292: #1F981F;
    --color-main-293: #B6641F;
    --color-main-294: #4F391F;
    --color-main-295: #DF741F;
    --color-main-296: #7CCE7C;
}

.darkmode .product-card > div {
    border: 2px solid #1e431e;
}
.darkmode .coin-icon-image, .darkmode .navbar-expand-md .navbar-nav .nav-link img {
    filter: invert(1) !important;
}
.darkmode .product-links.heart-icon,
.darkmode .pencil-icon-image,
.darkmode .caret-down-small-icon,
.darkmode .caret-right-icon,
.darkmode .icon,
.darkmode .icon,
.darkmode .refresh-icon {
    -webkit-filter: invert(100%) hue-rotate(180deg) brightness(110%) contrast(75%) !important;
    filter: invert(100%) hue-rotate(180deg) brightness(110%) contrast(75%) !important;
    will-change: filter;
}
.darkmode .black-player {
    filter: invert(0.4) !important;
}
.cssonlyalert.centered {
    box-shadow: 0 -9px 28px -16px var(--color-main-33);
}
.alert.alert-danger {
    box-shadow: none !important;
}

  
  
  * {
      box-sizing: border-box
  }
  
  html {
      background: var(--color-main-1);
  }
  
  #main {
      padding-top: 1rem;
  }
  @media (min-width: 768px) {
      body {
          /* overflow: hidden; */
      }
      #main {
          /* max-height: calc(100vh - 100px - 2rem);
          overflow: auto; */
      }
  }
  
  .landingpage_image {
      /* Full height */
      height: 100%;
      background: var(--color-main-2);
      background-image: url("/assets/site/images/newloginbackground-desktop.png");
  
      /* Center and scale the image nicely */
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
  }
  /* Small devices (landscape phones, 576px and down)*/
  @media (max-width: 577px) {
      .landingpage_image {
          /* background-image: url("/assets/site/images/newloginbackground-mobile.png"); */
      }
  }
  
  .form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
      color: var(--color-main-3) !important;
      opacity: 1; /* Firefox */
  }
  
  .form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
      color: var(--color-main-3) !important;
  }
  
  .form-control::-ms-input-placeholder { /* Microsoft Edge */
      color: var(--color-main-3) !important;
  }
  
  .bg-theme {
      /* background-color: var(--color-main-4) !important;
      color: var(--color-main-5);
      background: var(--color-main-6) !important;
      color: var(--color-main-7); */
  }
  
  .bg-theme:hover {
      /* color: var(--color-main-1); */
  }
  
  .pagination-sm .page-link {
      padding:.1rem .5rem;
      color: var(--color-main-8) !important;
  }
  .pagination .page-link.disabled {
      /* background-color: var(--color-main-9) !important;
      background: var(--color-main-10) !important;
      border-color: var(--color-main-9) !important;
      color: var(--color-main-1) !important; */
      opacity: 1 !important;
  }
  
  .hover-opacity-7:hover {
      opacity: 0.7; /* Set desired opacity on hover */
  }
  
  .hover-underline:hover {
      text-decoration: underline;
  }
  
  .underline-0 {
      text-decoration: none !important;
  }
  .underline {
      text-decoration: underline;
  }
  .underline-offset-2 {
      text-underline-offset: 2px;
  }
  .font-decoration-line-through {
      text-decoration: line-through;
  }
  .font-weight-600 {
      font-weight: 600;
  }
  
  /* Add padding to containers */
  .container {
      padding: 16px;
      width: 100%;
  }
  
  @media (min-width: 768px) {
      #sidebar {
          min-height: 350px;
      }
      #sidebar > ul {
          background: var(--color-main-11) !important;
      }
  }
  
  .table thead th {
      border-top: none;
      border-bottom-width: 1px;
  }
  .table td.fit, .table th.fit {
      white-space: nowrap;
      width: 1%;
  }
  
  svg.reg_image001 {
      width: 100%;
  }
  
  /* Full-width input fields */
  input[type=text], input[type=password], input[type=number] {
      width: 100%;
      padding: 17px 9px;
      margin: 5px 0 22px 0;
      display: inline-block;
      border: none;
  }
  
  input[type=text]:focus, input[type=password]:focus {
      background-color: var(--color-main-7);
      outline: none;
  }
  input.bg-black[type=text]:focus, input.bg-black[type=password]:focus {
      color: var(--color-main-12) !important;
  }
  
  /* Overwrite default styles of hr */
  hr {
      border: 1px solid var(--color-main-13);
      margin-bottom: 25px;
  }
  
  a:hover {
      text-decoration-color: inherit !important;
  }
  
  /* Set a style for the submit/register button */
  .registerbtn {
      background-color: var(--color-main-14);
      color: var(--color-main-1);
      padding: 16px 20px;
      margin: 8px 0;
      border: none;
      cursor: pointer;
      width: 100%;
      opacity: 0.9;
  }
  
  .registerbtn:hover {
      opacity: 1;
  }
  
  /* Add a blue text color to links */
  a {
      color: var(--color-main-15);
  }
  
  a.disabled {
      pointer-events: none;
      cursor: not-allowed;
      opacity: 0.6;
      text-decoration: none;
  }
  
  .breadcrumb-item + .breadcrumb-item::before {
      display: inline-block;
      /* padding-right: 0.5rem; */
      color: var(--color-main-16);
      content: "/";
      content: '>';
      font-weight: bold;
      font-family: monospace;
      color: var(--color-main-17);
      /* padding: 0 14px 0 5px; */
  }
  
  li.breadcrumb-item a {
      /* color: var(--color-main-18);
      color: inherit; */
  }
  
  .active {
      background-color: var(--color-main-19) !important;
  }
  
  .isImageAUrl:not(:checked) ~ label .btn:first-of-type, .isImageAUrl:checked ~ label .btn:last-of-type {
      border-color: var(--color-main-20);
      background-image: none;
      -webkit-box-shadow: inset 0 3px 5px var(--color-main-21);
      box-shadow: inset 0 3px 5px var(--color-main-21);
      background-color: var(--color-main-19) !important;
  }
  
  .btn.border.active {
      border-color: transparent !important;
  }
  
  .highlight-primary {
      background: var(--color-main-15);
      color: var(--color-main-1);
  }
  
  .ftttext {
      color: var(--color-main-22) !important;
  }
  
  .ttltext {
      color: var(--color-main-10);
  }
  
  input[type=radio]:checked ~ .highlight-primary-checked, input[type=checkbox]:checked ~ .highlight-primary-checked {
      background: var(--color-main-15);
      color: var(--color-main-1);
  }
  
  .fttbg {
      background: var(--color-main-22);
  }
  
  .ttlbg {
      background: var(--color-main-10);
  }
  
  input[type=radio]:checked~.highlight-primary-checked, input[type=checkbox]:checked~.highlight-primary-checked {
      background: var(--color-main-15);
      color: var(--color-main-1);
  }
  
  /* Set a grey background color and center the text of the "sign in" section */
  .signin {
      /* background-color: var(--color-main-13);
      text-align: center; */
      color: var(--color-main-1);
  }
  
  
  .captchabtn:focus {
      outline: none;
      box-shadow: none;
  }
  
  #error_explanation {
      margin: 5px 0px 22px;
      margin: 0;
      border-radius: 0;
  }
  
  #error_explanation ul {
      margin-bottom: 0;
      padding-left: 1rem;
      /* margin: 0 0 18px 0;
      padding-left: 16px;
      list-style: circle; */
  }
  
  .divider:after, .divider:before {
      content: "";
      flex: 1;
      height: 1px;
      background: var(--color-main-23);
  }
  
  .notify {
      display: inline-flex;
      align-items: center;
      justify-content: flex-start;
      border: 1px solid var(--color-main-24);
      background-color: var(--color-main-25);
      border-radius: 50px;
      cursor: default;
  }
  
  .notify .icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background-color: var(--color-main-1);
      border-radius: 50px;
      width: 54px;
      min-width: 54px;
      height: 54px;
  }
  
  .notify .text {
      padding: 0 25px 0 20px;
      color: var(--color-main-1);
      font-weight: 400;
      text-align: left;
  }
  
  
  
  .widget-numbers {
      font-weight: 700;
      font-size: 1.5rem;
      display: block;
      line-height: 1;
      margin: 1rem auto;
  }
  
  
  .se-i .box-icon {
      width: 28px;
      /* background-color: var(--color-main-25); */
  }
  
  footer .list-inline-item {
      width: 60px;
  }
  
  @media (max-width: 767px) {
      footer .list-inline-item {
          margin-top: 20px;
      }
  }
  
  footer img {
      height: 30px;
      width: 30px;
      /* height: 24px;
      width: 24px; */
  }
  
  .header-bg {
      background: var(--color-main-19);
      /* background-color: var(--color-main-26); */
  }
  
  #logoutmenu .dropdown-menu {
      min-width: 290px;
      top: calc(100% + 1px);
      left: unset;
      right: 0;
      color: var(--color-main-27);
  }
  
  @media (max-width: 767px) {
      #logoutmenu .dropdown-menu {
          /* left: 0;
          right: unset; */
          position: absolute;
      }
  }
  
  @media (max-width: 530px) {
      #logoutmenu .dropdown-menu {
          position: absolute;
          left: 0;
      }
  }
  
  @media (max-width: 454px) {
      #logoutmenu .dropdown-menu {
          /* position: absolute;
          left: 0;
          right: unset; */
      }
  }
  
  
  #logoutmenu li a {
      display: inline-block;
      padding: 1px 3px 2px;
      margin-bottom: 2px;
      background: inherit;
      /* color: dodgerblue !important; */
      color: var(--color-main-18);
      color: var(--color-main-27);
  }
  
  .header-notifications {
      width: 300px;
      width: 340px;
      max-width: calc(100vw - 2rem);
      top: 35px;
      position: absolute !important;
      left: unset;
      right: 0;
      /* height: 0px; */
      /* opacity: 0; */
      /* border-radius: 5px 0px 5px 5px; */
      /* background-color: var(--color-main-1); */
      /* box-shadow: 0 4px 8px 0 var(--color-main-28), 0 6px 20px 0 var(--color-main-29); */
  }
  @media (min-width: 768px) {
      .header-notifications {
          width: 700px;
          left: -315px;
          right: unset;
      }
  }
  .header-notifications-item {
      color: var(--color-main-27);
      cursor: pointer;
  }
  .header-notifications-item:hover {
      /* color: var(--color-main-30);
      text-decoration: none;
      background-color: var(--color-main-19); */
  }
  .header-notifications-item > * {
      border-bottom: 1px solid var(--color-main-23);
  }
  .header-notifications-item:last-of-type > * {
      border-bottom: none;
      /* padding: 6px 9px; */
      margin-bottom: 0px;
  }
  .header-notifications-item * {
      /* color: var(--color-main-27);
      color: var(--color-main-31); */
  }
  .header-notifications-item a.link:hover, .header-notifications-item a.clearall:hover {
      color: var(--color-main-32) !important;
      text-decoration: none;
  }
  .header-notifications h4 {
      font-weight: 550;
      padding: 10px 1.75rem;
      border-bottom: 1px solid var(--color-main-23);
      color: var(--color-main-33);
      /* font-size: 14px;
      padding: 10px;
      border-bottom: 1px solid var(--color-main-23);
      color: var(--color-main-31); */
  }
  .header-notifications h4 span {
      color: var(--color-main-34);
  }
  .header-notifications-item .text h4 {
      font-size: 16px;
      margin-top: 3px;
  }
  .header-notifications-item .text p {
      /* color: var(--color-main-35);
      font-size: 12px; */
      color: var(--color-main-27);
  }
  .header-notifications-item img {
      display: block;
      width: 50px;
      height: 50px;
      margin-right: 9px;
      border-radius: 50%;
      margin-top: 2px;
  }
  
  .close-icon {
      height: 21px;
      display: inline-block;
      width: 21px;
      background-image: url(/assets/site/images/close-icon-red.png);
      transform: scale(0.7);
      margin-top: 15%;
  }
  
  .heart-icon {
      height: 21px;
      display: inline-block;
      width: 21px;
      background-image: url("/assets/site/images/heart-icon-black.png");
  }
  .heart-icon.text-success {
      background-image: url("/assets/site/images/heart-icon-green.png");
  }
  
  .binoculars-icon {
      display: inline-block;
      width: 21px;
      height: 21px;
      background-image: url(/assets/site/images/binoculars.png);
  }
  
  .cart-buy-icon {
      height: 21px;
      display: inline-block;
      width: 21px;
      background-image: url("/assets/site/images/shopping-cart-black-2.png");
  }
  
  .featured-star-icon {
      display: inline-block;
      width: 40px;
      height: 40px;
      background-image: url("/assets/site/images/star-icon-yellow-black_border.png");
  }
  
  .featured_product-icon {
      display: inline-block;
      height: 40px;
      background-image: url("/assets/site/images/featured_product.png");
  }
  
  .refresh-icon {
      display: inline-block;
      width: 28px;
      height: 28px;
      transform: scale(0.75);
      background-image: url("/assets/site/images/reload-icon-black.png");
  }
  
  .caret-right-icon {
      display: inline-block;
      width: 28px;
      height: 28px;
      background-image: url("/assets/site/images/caret-right-icon-black.png");
  }
  .caret-down-small-icon {
      display: inline-block;
      width: 24px;
      height: 24px;
      background-image: url("/assets/site/images/caret-down-icon-black-small.png");
  }
  .caret-up-small-icon {
      display: inline-block;
      width: 24px;
      height: 24px;
      background-image: url("/assets/site/images/caret-up-icon-black-small.png");
  }
  
  .arrow-back-icon {
      display: inline-block;
      width: 24px;
      height: 24px;
      background-image: url("/assets/site/images/arrow-left-icon-black.png");
      background-repeat: no-repeat;
  }
  
  .info-icon {
      display: inline-block;
      width: 23px;
      height: 23px;
      background-image: url("/assets/site/images/info-icon-black-rounded-50.png");
  }
  
  .clock-icon {
      display: inline-block;
      width: 28px;
      height: 28px;
      background-image: url("/assets/site/images/clock-icon-black-rounded-50.png");
  }
  
  .clock-icon-small {
      display: inline-block;
      width: 18px;
      height: 18px;
      background-image: url("/assets/site/images/clock-icon-lightgray-small-rounded-50.png");
      vertical-align: text-bottom;
  }
  
  .delete-icon {
      height: 25px;
      display: inline-block;
      width: 25px;
      background-image: url("/assets/site/images/trash_can-icon-black.png");
  }
  
  .broom-icon {
      height: 25px;
      display: inline-block;
      width: 25px;
      background-image: url("/assets/site/images/broom-icon-black.png");
  }
  
  .ellipsis-icon {
      height: 25px;
      display: inline-block;
      width: 25px;
      background-image: url("/assets/site/images/ellipsis-black.png");
  }
  
  .external-link-small-icon {
      display: inline-block;
      width: 21px;
      height: 21px;
      background-size: cover;
      background-image: url(/assets/site/images/hyperlink_external_open-black.png);
      background-image: url(/assets/site/images/hyperlink_external_open-blue.png);
  }.external-link-small-icon:hover {
      opacity: 0.8;
  }
  
  #main-category .caret-right-icon {
      transform: scale(0.6);
  }
  
  /* -------------------------------------------------------------------------- */
  /*                               Bootstrap 3 css                              */
  /* -------------------------------------------------------------------------- */
  .h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6 {
      font-weight: bold;
  }
  .text-decoration-line-through {
      text-decoration: line-through !important;
  }
  @media (min-width: 768px) {
      .text-md-left {
          text-align: left !important;
      }
      .text-md-center {
          text-align: center !important;
      }
      .text-md-right {
          text-align: right !important;
      }
  }
  
  @media (max-width: 767px) {
      .hidden-xs {
          display: none !important;
      }
  }
  @media (max-width:767px) {
      .noborder-sm {
          border: none !important;
      }
  }
  .card.noborder-sm {
      background: var(--color-main-36);
      border-color: var(--color-main-36) !important;
  }
  .no-after:after, .no-before:after {
      content:none;
  }
  .wrap {
      white-space: normal;
      word-wrap: break-word;
      word-break: break-all;
  }
  .nowrap {
      white-space: nowrap;
  }
  .flex-break, .flex-break-row {
      flex-basis: 100%;
      height: 0;
  }
  .flex-break-column {
      flex-basis: 100%;
      width: 0;
  }
  .fw-600 {
      font-weight: 600 !important;
  }
  .box-shadow-0 {
      box-shadow: none !important;
  }
  
  
  .box-shadow-rounded-bottom {
      position: relative;
  }
  .box-shadow-rounded-bottom::after {
      content: ' ';
      position: absolute;
      top: 110%;
      top: 102%;
      left: 50%;
      /* width: calc(100%); */
      height: calc(100% / 3);
      transition: 0.4s;
      left: 50%;
      transform: translateX(-50%);
      -webkit-transition: 0.4s;
      -webkit-transform: translateX(-50%);
      -moz-transition: 0.4s;
      -moz-transform: translateX(-50%);
      /* border-radius: 100%; */
      /* background: radial-gradient(var(--color-main-37), var(--color-main-38), var(--color-main-38)); */
      }.box-shadow-rounded-bottom.underline::after {
          /* background: radial-gradient(var(--color-main-37), var(--color-main-38), var(--color-main-38)); */
  }
  .box-shadow-rounded-bottom:hover::after {
      /* content: attr(title); */
      text-align: center;
      color: var(--color-main-39);
  }
  
  .outline-0 {
      outline: 0 !important;
  }
  .label {
      display: inline;
      padding: 0.2em 0.6em 0.3em;
      font-size: 75%;
      font-weight: 700;
      line-height: 1;
      color: var(--color-main-1);
      text-align: center;
      white-space: nowrap;
      vertical-align: baseline;
      border-radius: 0.25em;
  }
  .label-primary {
      background-color: var(--color-main-40);
  }
  .label-primary {
      background-color: var(--color-main-40);
  }
  .label {
      display: inline;
      padding: 0.2em 0.6em 0.3em;
      font-size: 75%;
      font-weight: 700;
      line-height: 1;
      color: var(--color-main-1);
      text-align: center;
      white-space: nowrap;
      vertical-align: baseline;
      border-radius: 0.25em;
  }
  .label-default {
      background-color: var(--color-main-27);
  }
  .label-success {
      background-color: var(--color-main-41);
      background-image: linear-gradient(to bottom, var(--color-main-10) 0, var(--color-main-41) 100%);
  }
  .label-info {
      background-color: var(--color-main-42);
  }
  .label-warning {
      background-color: var(--color-main-43);
  }
  .label-danger {
      background-color: var(--color-main-44);
  }
  
  .badge {
      cursor: default;
  }
  .badge-soft-success {
      color: var(--color-main-45);
      background-color: var(--color-main-46);
  }
  .badge-soft-success:hover {
      color: var(--color-main-45) !important;
      background-color: var(--color-main-47);
  }
  .badge-soft-danger {
      color: var(--color-main-48);
      background-color: var(--color-main-49);
  }
  .badge-soft-danger:hover {
      color: var(--color-main-48) !important;
      background-color: var(--color-main-50);
  }
  .badge-soft-warning {
      color: var(--color-main-51);
      background-color: var(--color-main-52);
  }
  .badge-soft-warning:hover {
      color: var(--color-main-51) !important;
      background-color: var(--color-main-53);
  }
  .badge-orange {
      color: var(--color-main-39);
      background-color: var(--color-main-54);
      background-color: dark​var(--color-main-54);
  }
  .badge-soft-info {
      color: var(--color-main-55);
      background-color: var(--color-main-56);
  }
  .badge-soft-warning:hover {
      color: var(--color-main-55) !important;
      background-color: var(--color-main-56);
  }
  .badge-soft-purple {
      color: var(--color-main-57);
      background-color: var(--color-main-58);
  }
  .badge-soft-purple:hover {
      color: var(--color-main-57) !important;
      background-color: var(--color-main-59);
  }
  .badge-orange {
      color: var(--color-main-39);
      background-color: var(--color-main-54);
  }
  
  
  .btn-group {
      border-radius: 0.25rem;
  }
  
  .btn-group>.btn-group:not(:first-child)>.btn, .btn-group>.btn:not(:first-child) {
      border-radius: inherit;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
  }
  
  .btn-group>.btn-group:first-child>.btn, .btn-group>.btn:first-child:not(.dropdown-toggle) {
      border-radius: inherit;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
  }
  
  .btn-primary {
      color: var(--color-main-1);
      background-color: var(--color-main-60);
      border-color: var(--color-main-60);
      background-image: unset;
  }
  .btn-secondary {
      color: var(--color-main-1);
      background-color: var(--color-main-16);
      border-color: var(--color-main-16);
  }
  .btn-success {
      color: var(--color-main-1);
      background-color: var(--color-main-61);
      border-color: var(--color-main-61);
      /* background-image: linear-gradient(to bottom, var(--color-main-41) 0, var(--color-main-10) 100%); */
      background-image: unset;
  }
  .btn-danger {
      color: var(--color-main-1);
      background-color: var(--color-main-62);
      border-color: var(--color-main-62);
      background-image: unset;
  }
  .btn-warning {
      color: var(--color-main-18);
      background-color: var(--color-main-63);
      border-color: var(--color-main-63);
      background-image: unset;
  }
  .btn-orange {
      color: var(--color-main-18);
      background-color: var(--color-main-64);
      border-color: var(--color-main-64);
      background-image: unset;
  }
  .btn-outline-orange {
      color: var(--color-main-18);
      border-color: var(--color-main-64);
      background-image: unset;
  }
  .btn-info {
      color: var(--color-main-1);
      background-color: var(--color-main-55);
      border-color: var(--color-main-55);
      background-image: unset;
  }
  .btn-light {
      color: var(--color-main-18);
      background-color: var(--color-main-65);
      border-color: var(--color-main-65);
  }
  .btn-dark {
      color: var(--color-main-1);
      background-color: var(--color-main-66);
      border-color: var(--color-main-66);
      background-image: unset;
  }
  .btn-purple {
      color: var(--color-main-1);
      background: var(--color-main-57);
      background-image: unset;
  }
  .btn-link {
      font-weight: 400;
      color: var(--color-main-60);
      background-color: transparent;
  }
  .btn-primary:hover {
      color: var(--color-main-1);
      background-color: var(--color-main-67);
      border-color: var(--color-main-68);
  }
  .btn-secondary:hover {
      color: var(--color-main-1);
      background-color: var(--color-main-69);
      border-color: var(--color-main-70);
  }
  .btn-success:hover {
      color: var(--color-main-1);
      background-color: var(--color-main-71);
      border-color: var(--color-main-72);
  }
  .btn-danger:hover {
      color: var(--color-main-1);
      background-color: var(--color-main-73);
      border-color: var(--color-main-74);
  }
  .btn-warning:hover {
      color: var(--color-main-18);
      background-color: var(--color-main-75);
      border-color: var(--color-main-76);
  }
  .btn-orange:hover, .btn-outline-orange:hover {
      color: var(--color-main-18);
      background-color: var(--color-main-77);
      border-color: var(--color-main-78);
  }
  .btn-info:hover {
      color: var(--color-main-1);
      background-color: var(--color-main-79);
      border-color: var(--color-main-80);
  }
  .btn-light:hover {
      color: var(--color-main-18);
      background-color: var(--color-main-81);
      border-color: var(--color-main-82);
  }
  .btn-dark:hover {
      color: var(--color-main-1);
      background-color: var(--color-main-83);
      border-color: var(--color-main-84);
  }
  .btn-link:hover {
      color: var(--color-main-85);
      text-decoration: underline;
      background-color: transparent;
      border-color: transparent;
  }
  .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle {
      color: var(--color-main-1);
      background-color: var(--color-main-68);
      border-color: var(--color-main-86);
  }
  .btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show > .btn-secondary.dropdown-toggle {
      color: var(--color-main-1);
      background-color: var(--color-main-70);
      border-color: var(--color-main-87);
  }
  .btn-success:not(:disabled):not(.disabled).active, .btn-success:not(:disabled):not(.disabled):active, .show > .btn-success.dropdown-toggle {
      color: var(--color-main-1);
      background-color: var(--color-main-72);
      border-color: var(--color-main-88);
  }
  .btn-danger:not(:disabled):not(.disabled).active, .btn-danger:not(:disabled):not(.disabled):active, .show > .btn-danger.dropdown-toggle {
      color: var(--color-main-1);
      background-color: var(--color-main-74);
      border-color: var(--color-main-89);
  }
  .btn-warning:not(:disabled):not(.disabled).active, .btn-warning:not(:disabled):not(.disabled):active, .show > .btn-warning.dropdown-toggle {
      color: var(--color-main-18);
      background-color: var(--color-main-76);
      border-color: var(--color-main-90);
  }
  .btn-orange:not(:disabled):not(.disabled).active, .btn-orange:not(:disabled):not(.disabled):active, .show > .btn-orange.dropdown-toggle {
      color: var(--color-main-18);
      background-color: var(--color-main-91);
      border-color: var(--color-main-92);
  }
  .btn-info:not(:disabled):not(.disabled).active, .btn-info:not(:disabled):not(.disabled):active, .show > .btn-info.dropdown-toggle {
      color: var(--color-main-1);
      background-color: var(--color-main-80);
      border-color: var(--color-main-93);
  }
  .btn-light:not(:disabled):not(.disabled).active, .btn-light:not(:disabled):not(.disabled):active, .show > .btn-light.dropdown-toggle {
      color: var(--color-main-18);
      background-color: var(--color-main-82);
      border-color: var(--color-main-94);
  }
  .btn-dark:not(:disabled):not(.disabled).active, .btn-dark:not(:disabled):not(.disabled):active, .show > .btn-dark.dropdown-toggle {
      color: var(--color-main-1);
      background-color: var(--color-main-84);
      border-color: var(--color-main-95);
  }
  .btn-primary.focus, .btn-primary:focus {
      box-shadow: 0 0 0 .2rem var(--color-main-96);
  }
  .btn-secondary.focus, .btn-secondary:focus {
      box-shadow: 0 0 0 .2rem var(--color-main-97);
  }
  .btn-success.focus, .btn-success:focus {
      box-shadow: 0 0 0 .2rem var(--color-main-98);
  }
  .btn-danger.focus, .btn-danger:focus {
      box-shadow: 0 0 0 .2rem var(--color-main-99);
  }
  .btn-warning.focus, .btn-warning:focus {
      box-shadow: 0 0 0 .2rem var(--color-main-100);
  }
  .btn-orange.focus, .btn-orange:focus {
      box-shadow: 0 0 0 .2rem var(--color-main-101);
  }
  .btn-info.focus, .btn-info:focus {
      box-shadow: 0 0 0 .2rem var(--color-main-102);
  }
  .btn-light.focus, .btn-light:focus {
      box-shadow: 0 0 0 .2rem var(--color-main-103);
  }
  .btn-dark.focus, .btn-dark:focus {
      box-shadow: 0 0 0 .2rem var(--color-main-104);
  }
  .btn-link.focus, .btn-link:focus {
      text-decoration: underline;
      border-color: transparent;
      box-shadow: none;
  }
  
  
  .btn-pacificblue {
      display: inline-block;
      box-sizing: border-box;
      color: var(--color-main-105);
      background: var(--color-main-106);
      border-color: var(--color-main-106);
      text-decoration: none;
  }
  .btn-pacificblue:hover {
      -webkit-text-size-adjust: 100%;
      --reach-tabs: 1;
      --reach-menu-button: 1;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      text-align: center;
      -webkit-tap-highlight-color: transparent;
      display: inline-block;
      box-sizing: border-box;
      color: var(--color-main-105);
      fill: var(--color-main-105);
      border-width: 1px solid var(--color-main-107);
      text-decoration: none;
      cursor: pointer;
      background: var(--color-main-107);
  }
  .btn-primary-soft {
      color: var(--color-main-39);
      background-color: var(--color-main-108);
      border-color: var(--color-main-108);
  }
  .btn-primary-soft:hover {
      color: var(--color-main-39);
      background-color: var(--color-main-109);
      border-color: var(--color-main-110);
  }
  .btn-danger-soft {
      color: var(--color-main-39);
      background-color: var(--color-main-108);
      border-color: var(--color-main-108);
  }
  .btn-danger-soft:hover {
      color: var(--color-main-39);
      background-color: var(--color-main-109);
      border-color: var(--color-main-110);
  }
  .btn-cyan {
      color: var(--color-main-1);
      background-color: var(--color-main-111) !important;
  }
  .btn-cyan:hover {
      color: var(--color-main-1);
      background-color: var(--color-main-112);
  }
  
  
  .bg-inherit {
      background-color: inherit;
  }
  .bg-transparent {
      background-color: transparent;
      color: inherit;
  }
  .bg-white-01 {
      background: var(--color-main-24);
  }
  .bg-white-07 {
      background: var(--color-main-113);
  }
  .bg-success-light {
      background-color: var(--color-main-114);
  }
  .bg-danger-light {
      background-color: var(--color-main-49);
      /* background-color: var(--color-main-115); */
  }
  .bg-e0e0e0 {
      background: var(--color-main-116);
  }
  .bg-b0b0b021 {
      background: var(--color-main-117);
  }
  .bg-8000801a {
      background: var(--color-main-118);
  }
  .bg-e83e8c {
      background: var(--color-main-119);
  }
  .bg-f8d7da {
      background: var(--color-main-120);
  }
  .bg-black {
      background: var(--color-main-39);
  }
  .bg-white {
      background: var(--color-main-1);
  }
  .bg-f8f9fa {
      background-color: var(--color-main-65)
  }
  .bg-fcf8e3 {
      background: var(--color-main-121);
  }
  .bg-f1f5f2b3 {
      background: var(--color-main-122);
  }
  .bg-f1f1f1 {
      background: var(--color-main-13);
  }
  .bg-faf9fa {
      background: var(--color-main-123);
  }
  .bg-e6e6e6 {
      background: var(--color-main-124);
  }
  .bg-efefef {
      background: var(--color-main-125);
  }
  .bg-009245 {
      background: var(--color-main-10);
  }
  .bg-eaf7e9, .bg-limegreen {
      background: var(--color-main-126);
  }
  textarea.disabled, input.disabled {
      background-color: var(--color-main-127) !important;
      pointer-events: none;
  }
  .bg-bcfde7 {
      background: var(--color-main-128);
  }
  .bg-fbfbfb {
      background: var(--color-main-36);
  }
  .bg-eaf7e9 {
      background: var(--color-main-126);
  }
  .bg-f5f5f5 {
      background: var(--color-main-19);
  }
  .bg-fbfbfbee {
      background: var(--color-main-129);
  }
  .bg-04aa6d {
      background: var(--color-main-130);
  }
  .bg-#dodgerblue {
      background: var(--color-main-15);
  }
  .bg-d0eacc {
      background: var(--color-main-131);
  }
  .bg-e7f7ea {
      background: var(--color-main-132);
  }
  .bg-f8efc0 {
      background: var(--color-main-133);
  }
  .bg-ebf7fb {
      background: var(--color-main-134);
  }
  .bg-ffcfd3 {
      background: var(--color-main-135);
  }
  .bg-darkgray {
      background: var(--color-main-17);
  }
  .bg-e2b709 {
      background: var(--color-main-136);
  }
  .bg-111 {
      background: var(--color-main-12);
  }
  .bg-222 {
      background: var(--color-main-143);
  }
  .bg-28a745 {
      background: var(--color-main-61);
  }
  
  
  .chat-box .message {
      background-color: var(--color-main-125);
  }
  .chat-box.right .message, .chat-box .message.lime-green {
      background-color: var(--color-main-1);
      background: var(--color-main-126);
  }
  .chat-box .message.buyer {
      background: var(--color-main-137);
  }
  .chat-box .message.seller {
      background: var(--color-main-138);
  }
  .chat-box .message.staff {
      background: var(--color-main-139);
  }
  li.active {
      background-color: var(--color-main-23) !important;
  }
  
  
  
  .text-black {
      color: var(--color-main-39);
  }
  .text-crimson {
      color: crimson;
  }
  .text-28a745 {
      color: var(--color-main-61);
  }
  .text-#dodgerblue {
      color: var(--color-main-15);
  }
  .text-333 {
      color: var(--color-main-140);
  }
  .text-fbb72c {
      color: var(--color-main-64);
  }
  .text-inherit {
      color: inherit;
  }
  .text-b32600 {
      color: var(--color-main-141);
  }
  code {
      color: var(--color-main-142);
  }
  .text-222 {
      color: var(--color-main-143);
  }
  .text-e83e8c {
      color: var(--color-main-119);
  }
  .text-666 {
      color: var(--color-main-144);
  }
  .text-green {
      color: var(--color-main-145);
  }
  .text-cf6972 {
      color: var(--color-main-146);
  }
  .text-aaa {
      color: var(--color-main-35);
  }
  .text-firebrick {
      color: firebrick;
  }
  .text-silver {
      color: var(--color-main-147) !important;
  }
  .text-purple {
      color: var(--color-main-57) !important;
  }
  .text-success {
      color: var(--color-main-10) !important;
  }
  .text-273239 {
      color: var(--color-main-148);
  }
  .text-red {
      color: var(--color-main-34);
  }
  .text-b3b3b3 {
      color: var(--color-main-149);
  }
  .text-a8a9aa {
      color: var(--color-main-150);
  }
  .text-c99400 {
      color: var(--color-main-151);
  }
  .text-777 {
      color: var(--color-main-27);
  }
  .text-847f6d {
      color: var(--color-main-152);
  }
  .text-orangered {
      color: var(--color-main-153);
  }
  .text-darkgreen {
      color: var(--color-main-296);
  }
  .text-111 {
      color: 111;
  }
  .text-black {
      color: var(--color-main-39);
  }
  .text-muted-999 {
      color: var(--color-main-31) !important;
  }
  .text-999-nothover-notfocus:not(:hover):not(:focus) {
      color: var(--color-main-31) !important;
  }
  .text-363636-nothover-notfocus:not(:hover):not(:focus) {
      color: var(--color-main-154) !important;
  }
  
  
  .bc-663700 {
      border-color: var(--color-main-155);
  }
  .bc-e9ecef {
      border-color: var(--color-main-156);
  }
  .bc-349c45 {
      border-color: var(--color-main-157);
  }
  .bc-ddd {
      border-color: var(--color-main-7);
  }
  .bc-eee {
      border-color: var(--color-main-23);
  }
  .bc-white {
      border-color: var(--color-main-1);
  }
  .chat-box {
      border-bottom: 2px solid var(--color-main-23);
  }
  .chat-box .message:after {
      border: solid transparent;
      border-right-color: var(--color-main-125);
  }
  .chat-box.right .message:after {
      border: solid transparent;
      border-left-color: var(--color-main-1);
      border-left-color: var(--color-main-1);
      border-left-color: var(--color-main-126);
  }
  .chat-box .message.lime-green:after {
      border-right-color: var(--color-main-126);
  }
  .chat-box .message.buyer:after {
      border-right-color: var(--color-main-137);
  }
  .chat-box .message.seller:after {
      border-right-color: var(--color-main-138);
  }
  .chat-box .message.staff:after {
      border-right-color: var(--color-main-139);
  }
  .form-control:focus {
      color: var(--color-main-158);
      border-color: var(--color-main-159);
      box-shadow: 0 0 0 0.2rem var(--color-main-160);
  }
  .bc-663700 {
      border-color: var(--color-main-155);
  }
  .bc-e38200-left {
      border-color: var(--color-main-161);
  }
  .bc-f5c2c7 {
      border-color: var(--color-main-162);
  }
  .bc-f5e79e {
      border-color: var(--color-main-163);
  }
  .bc-eef2f6 {
      border-color: var(--color-main-164);
  }
  .bc-f5f5f5 {
      border-color: var(--color-main-19);
  }
  .bc-5bc0de {
      border-color: var(--color-main-42);
  }
  .bc-ededed {
      border-color: var(--color-main-165);
  }
  .bc-ebf7fb {
      border-color: var(--color-main-134);
  }
  .bc-d0d7de {
      border-color: var(--color-main-166);
  }
  .bc-orangered {
      border-color: var(--color-main-153);
  }
  .bc-darkgreen {
      border-color: var(--color-main-296);
  }
  .bc-7baf73 {
      border-color: var(--color-main-167);
  }
  .bc-663700 {
      border-color: var(--color-main-155);
  }
  .bc-663700 {
      border-color: var(--color-main-155);
  }
  .bc-663700 {
      border-color: var(--color-main-155);
  }
  .bc-663700 {
      border-color: var(--color-main-155);
  }
  .bc-663700 {
      border-color: var(--color-main-155);
  }
  .bc-663700 {
      border-color: var(--color-main-155);
  }
  .bc-663700 {
      border-color: var(--color-main-155);
  }
  .bc-663700 {
      border-color: var(--color-main-155);
  }
  .bc-663700 {
      border-color: var(--color-main-155);
  }
  .bc-663700 {
      border-color: var(--color-main-155);
  }
  .bc-663700 {
      border-color: var(--color-main-155);
  }
  .bc-663700 {
      border-color: var(--color-main-155);
  }
  .bc-663700 {
      border-color: var(--color-main-155);
  }
  .bc-663700 {
      border-color: var(--color-main-155);
  }
  .bc-663700 {
      border-color: var(--color-main-155);
  }
  .bc-663700 {
      border-color: var(--color-main-155);
  }
  .bc-663700 {
      border-color: var(--color-main-155);
  }
  .bc-663700 {
      border-color: var(--color-main-155);
  }
  .bc-663700 {
      border-color: var(--color-main-155);
  }
  .bc-663700 {
      border-color: var(--color-main-155);
  }
  .bc-663700 {
      border-color: var(--color-main-155);
  }
  .bc-663700 {
      border-color: var(--color-main-155);
  }
  .bc-663700 {
      border-color: var(--color-main-155);
  }
  .bc-663700 {
      border-color: var(--color-main-155);
  }
  .bc-663700 {
      border-color: var(--color-main-155);
  }
  .bc-663700 {
      border-color: var(--color-main-155);
  }
  .bc-663700 {
      border-color: var(--color-main-155);
  }
  .bc-663700 {
      border-color: var(--color-main-155);
  }
  .bc-663700 {
      border-color: var(--color-main-155);
  }
  .bc-663700 {
      border-color: var(--color-main-155);
  }
  .bc-663700 {
      border-color: var(--color-main-155);
  }
  .bc-663700 {
      border-color: var(--color-main-155);
  }
  .bc-663700 {
      border-color: var(--color-main-155);
  }
  .bc-663700 {
      border-color: var(--color-main-155);
  }
  
  .alert-danger {
      color: var(--color-main-168);
      color: var(--color-main-62);
      background-image: unset;
      color: var(--color-main-168);
      background-color: var(--color-main-115);
      border-color: var(--color-main-169);
  }
  
  .alert.alert-success {
      
  }
  .alert.alert-warning {
      border: 2px solid var(--color-main-136) !important;
  }
  .alert.alert-danger {
      border: none !important;
  }
  
  .button-red {
      background-color: var(--color-main-170);
      border-color: var(--color-main-171);
      border-bottom: 3px solid var(--color-main-172);
      color: var(--color-main-1);
  }
  
  .button-red:focus, .button-red:hover {
      background-color: var(--color-main-172);
      border-color: var(--color-main-172);
      color: var(--color-main-1);
  }
  
  .note {
      padding: 10px;
      border-left: 6px solid;
      border-radius: 5px
  }
  
  .note strong {
      font-weight: 600
  }
  
  .note-primary {
      background-color: var(--color-main-173);
      border-color: var(--color-main-174)
  }
  
  .note-secondary {
      background-color: var(--color-main-175);
      border-color: var(--color-main-176)
  }
  
  .note-success {
      background-color: var(--color-main-177);
      border-color: var(--color-main-178)
  }
  
  .note-success-light {
      background-color: var(--color-main-114);
      border-color: var(--color-main-178)
  }
  
  .note-danger {
      background-color: var(--color-main-179);
      border-color: var(--color-main-180)
  }
  
  .note-warning {
      background-color: var(--color-main-181);
      border-color: var(--color-main-182)
  }
  
  .note-info {
      background-color: var(--color-main-183);
      border-color: var(--color-main-184)
  }
  
  .note-light {
      background-color: var(--color-main-19);
      border-color: var(--color-main-185)
  }
  
  .note-dark {
      background-color: var(--color-main-186);
      border-color: var(--color-main-187)
  }
  
  
  @media (min-width: 576px) {
      .position-sm-static {
          position: static !important;
      }
      .position-sm-relative {
          position: relative !important;
      }
      .position-sm-absolute {
          position: absolute !important;
      }
      .position-sm-fixed {
          position: fixed !important;
      }
      .position-sm-sticky {
          position: sticky !important;
      }
  }
  
  @media (min-width: 768px) {
      .position-md-static {
          position: static !important;
      }
      .position-md-relative {
          position: relative !important;
      }
      .position-md-absolute {
          position: absolute !important;
      }
      .position-md-fixed {
          position: fixed !important;
      }
      .position-md-sticky {
          position: sticky !important;
      }
  }
  
  @media (min-width: 992px) {
      .position-lg-static {
          position: static !important;
      }
      .position-lg-relative {
          position: relative !important;
      }
      .position-lg-absolute {
          position: absolute !important;
      }
      .position-lg-fixed {
          position: fixed !important;
      }
      .position-lg-sticky {
          position: sticky !important;
      }
  }
  
  @media (min-width: 1200px) {
      .position-xl-static {
          position: static !important;
      }
      .position-xl-relative {
          position: relative !important;
      }
      .position-xl-absolute {
          position: absolute !important;
      }
      .position-xl-fixed {
          position: fixed !important;
      }
      .position-xl-sticky {
          position: sticky !important;
      }
  }
  
  
  
  /* Small devices (landscape phones, 576px and up)*/
  @media (min-width: 576px) {
      .w-sm-auto {
          width: auto !important;
      }
      .w-sm-100 {
          width: 100% !important;
      }
      .w-sm-90 {
          width: 90% !important;
      }
      .w-sm-80 {
          width: 80% !important;
      }
      .w-sm-75 {
          width: 75% !important;
      }
      .w-sm-70 {
          width: 70% !important;
      }
      .w-sm-60 {
          width: 60% !important;
      }
      .w-sm-50 {
          width: 50% !important;
      }
      .w-sm-40 {
          width: 40% !important;
      }
      .w-sm-30 {
          width: 30% !important;
      }
      .w-sm-25 {
          width: 25% !important;
      }
      .w-sm-20 {
          width: 20% !important;
      }
      .w-sm-15 {
          width: 15% !important;
      }
      .w-sm-10 {
          width: 10% !important;
      }
  
      .h-sm-auto {
          height: auto !important;
      }
      .h-sm-100 {
          height: 100% !important;
      }
      .h-sm-90 {
          height: 90% !important;
      }
      .h-sm-80 {
          height: 80% !important;
      }
      .h-sm-75 {
          height: 75% !important;
      }
      .h-sm-70 {
          height: 70% !important;
      }
      .h-sm-60 {
          height: 60% !important;
      }
      .h-sm-50 {
          height: 50% !important;
      }
      .h-sm-40 {
          height: 40% !important;
      }
      .h-sm-30 {
          height: 30% !important;
      }
      .h-sm-25 {
          height: 25% !important;
      }
      .h-sm-20 {
          height: 20% !important;
      }
      .h-sm-15 {
          height: 15% !important;
      }
      .h-sm-10 {
          height: 10% !important;
      }
  
      .d-sm-block {
          display: block;
      }
      .d-sm-inline-block {
          display: inline-block;
      }
      .d-sm-none {
          display: none;
      }
  
      .justify-content-sm-evenly {
          justify-content: space-evenly;
      }
  }
  
  /* Medium devices (tablets, 768px and up)*/
  @media (min-width: 768px) {
      .w-md-auto {
          width: auto !important;
      }
      .w-md-100 {
          width: 100% !important;
      }
      .w-md-90 {
          width: 90% !important;
      }
      .w-md-80 {
          width: 80% !important;
      }
      .w-md-75 {
          width: 75% !important;
      }
      .w-md-70 {
          width: 70% !important;
      }
      .w-md-60 {
          width: 60% !important;
      }
      .w-md-50 {
          width: 50% !important;
      }
      .w-md-40 {
          width: 40% !important;
      }
      .w-md-30 {
          width: 30% !important;
      }
      .w-md-25 {
          width: 25% !important;
      }
      .w-md-20 {
          width: 20% !important;
      }
      .w-md-15 {
          width: 15% !important;
      }
      .w-md-10 {
          width: 10% !important;
      }
  
      .h-md-auto {
          height: auto !important;
      }
      .h-md-100 {
          height: 100% !important;
      }
      .h-md-90 {
          height: 90% !important;
      }
      .h-md-80 {
          height: 80% !important;
      }
      .h-md-75 {
          height: 75% !important;
      }
      .h-md-70 {
          height: 70% !important;
      }
      .h-md-60 {
          height: 60% !important;
      }
      .h-md-50 {
          height: 50% !important;
      }
      .h-md-40 {
          height: 40% !important;
      }
      .h-md-30 {
          height: 30% !important;
      }
      .h-md-25 {
          height: 25% !important;
      }
      .h-md-20 {
          height: 20% !important;
      }
      .h-md-15 {
          height: 15% !important;
      }
      .h-md-10 {
          height: 10% !important;
      }
  
      .d-md-block {
          display: block;
      }
      .d-md-inline-block {
          display: inline-block;
      }
      .d-md-none {
          display: none;
      }
  
      .justify-content-md-evenly {
          justify-content: space-evenly;
      }
  }
  
  /* Large devices (desktops, 992px and up)*/
  @media (min-width: 992px) {
      .w-lg-auto {
          width: auto !important;
      }
      .w-lg-100 {
          width: 100% !important;
      }
      .w-lg-90 {
          width: 90% !important;
      }
      .w-lg-80 {
          width: 80% !important;
      }
      .w-lg-75 {
          width: 75% !important;
      }
      .w-lg-70 {
          width: 70% !important;
      }
      .w-lg-60 {
          width: 60% !important;
      }
      .w-lg-50 {
          width: 50% !important;
      }
      .w-lg-40 {
          width: 40% !important;
      }
      .w-lg-30 {
          width: 30% !important;
      }
      .w-lg-25 {
          width: 25% !important;
      }
      .w-lg-20 {
          width: 20% !important;
      }
      .w-lg-15 {
          width: 15% !important;
      }
      .w-lg-10 {
          width: 10% !important;
      }
  
      .h-lg-auto {
          height: auto !important;
      }
      .h-lg-100 {
          height: 100% !important;
      }
      .h-lg-90 {
          height: 90% !important;
      }
      .h-lg-80 {
          height: 80% !important;
      }
      .h-lg-75 {
          height: 75% !important;
      }
      .h-lg-70 {
          height: 70% !important;
      }
      .h-lg-60 {
          height: 60% !important;
      }
      .h-lg-50 {
          height: 50% !important;
      }
      .h-lg-40 {
          height: 75% !important;
      }
      .h-lg-30 {
          height: 75% !important;
      }
      .h-lg-25 {
          height: 25% !important;
      }
      .h-lg-20 {
          height: 25% !important;
      }
      .h-lg-15 {
          height: 15% !important;
      }
      .h-lg-10 {
          height: 25% !important;
      }
  
      .d-lg-block {
          display: block;
      }
      .d-lg-inline-block {
          display: inline-block;
      }
      .d-lg-none {
          display: none;
      }
  
      .justify-content-lg-evenly {
          justify-content: space-evenly;
      }
  }
  
  /* Extra large devices (large desktops, 1200px and up)*/
  @media (min-width: 1200px) {
      .w-xl-auto {
          width: auto !important;
      }
      .w-xl-100 {
          width: 100% !important;
      }
      .w-xl-90 {
          width: 90% !important;
      }
      .w-xl-80 {
          width: 80% !important;
      }
      .w-xl-75 {
          width: 75% !important;
      }
      .w-xl-70 {
          width: 70% !important;
      }
      .w-xl-60 {
          width: 60% !important;
      }
      .w-xl-50 {
          width: 50% !important;
      }
      .w-xl-40 {
          width: 40% !important;
      }
      .w-xl-30 {
          width: 30% !important;
      }
      .w-xl-25 {
          width: 25% !important;
      }
      .w-xl-20 {
          width: 20% !important;
      }
      .w-xl-15 {
          width: 15% !important;
      }
      .w-xl-10 {
          width: 10% !important;
      }
  
      .h-xl-auto {
          height: auto !important;
      }
      .h-xl-100 {
          height: 100% !important;
      }
      .h-xl-90 {
          height: 90% !important;
      }
      .h-xl-80 {
          height: 80% !important;
      }
      .h-xl-75 {
          height: 75% !important;
      }
      .h-xl-70 {
          height: 70% !important;
      }
      .h-xl-60 {
          height: 60% !important;
      }
      .h-xl-50 {
          height: 50% !important;
      }
      .h-xl-40 {
          height: 40% !important;
      }
      .h-xl-30 {
          height: 30% !important;
      }
      .h-xl-25 {
          height: 25% !important;
      }
      .h-xl-20 {
          height: 20% !important;
      }
      .h-xl-15 {
          height: 15% !important;
      }
      .h-xl-10 {
          height: 10% !important;
      }
  
      .d-xl-block {
          display: block;
      }
      .d-xl-inline-block {
          display: inline-block;
      }
      .d-xl-none {
          display: none;
      }
      
      .justify-content-xl-evenly {
          justify-content: space-evenly;
      }
  }
  
  .rounded-inherit {
      border-radius: inherit;
  }
  .rounded-1 {
      border-radius: 0.25rem;
  }
  .rounded-2 {
      border-radius: 0.5rem;
  }
  .rounded-3 {
      border-radius: 1rem;
  }
  .rounded-4 {
      border-radius: 1.5rem;
  }
  .rounded-5 {
      border-radius: 5rem;
  }
  
  .dot {
      width: 12px;
      height: 12px;
  }
  
  .img-xs {
      width: 50px;
      height: 50px;
  }
  .img-sm {
      width: 72px;
      height: 72px;
  }
  .img-md {
      width: 96px;
      height: 96px;
  }
  .img-lg {
      width: 128px;
      height: 128px;
  }
  .img-xs, .img-sm, .img-md, .img-lg {
      display: inline-block;
      -o-object-fit: cover;
      object-fit: cover;
      flex-shrink: 0;
      flex-grow: 0;
  }
  
  
  .icon {
      height:2.875rem
  }
  .icon.icon-xxs {
      height:1rem
  }
  .icon.icon-xs {
      height:1.25rem
  }
  .icon.icon-sm {
      height:1.5rem
  }
  .icon.icon-lg {
      height:3.5rem
  }
  .icon.icon-xl {
      height:4.5rem
  }
  .icon.icon-xxl {
      height:6rem
  }
  
  
  
  @media (min-width: 576px) {
      .border-sm-top {
          border-top: 1px solid var(--color-main-188) !important;
      }
      .border-sm-right {
          border-right: 1px solid var(--color-main-188) !important;
      }
      .border-sm-bottom {
          border-bottom: 1px solid var(--color-main-188) !important;
      }
      .border-sm-left {
          border-left: 1px solid var(--color-main-188) !important;
      }
      .border-sm-top-0 {
          border-top: 0 !important;
      }
      .border-sm-right-0 {
          border-right: 0 !important;
      }
      .border-sm-bottom-0 {
          border-bottom: 0 !important;
      }
      .border-sm-left-0 {
          border-left: 0 !important;
      }
      .border-sm-x {
          border-left: 1px solid var(--color-main-188) !important;
          border-right: 1px solid var(--color-main-188) !important;
      }
      .border-sm-y {
          border-top: 1px solid var(--color-main-188) !important;
          border-bottom: 1px solid var(--color-main-188) !important;
      }
      .border-sm {
          border-top: 1px solid var(--color-main-188) !important;
          border-bottom: 1px solid var(--color-main-188) !important;
          border-left: 1px solid var(--color-main-188) !important;
          border-right: 1px solid var(--color-main-188) !important;
      }
      .border-sm-0 {
          border-top: 0 !important;
          border-bottom: 0 !important;
          border-left: 0 !important;
          border-right: 0 !important;
      }
  }
  
  @media (min-width: 768px) {
      .border-md-top {
          border-top: 1px solid var(--color-main-188) !important;
      }
      .border-md-right {
          border-right: 1px solid var(--color-main-188) !important;
      }
      .border-md-bottom {
          border-bottom: 1px solid var(--color-main-188) !important;
      }
      .border-md-left {
          border-left: 1px solid var(--color-main-188) !important;
      }
      .border-md-top-0 {
          border-top: 0 !important;
      }
      .border-md-right-0 {
          border-right: 0 !important;
      }
      .border-md-bottom-0 {
          border-bottom: 0 !important;
      }
      .border-md-left-0 {
          border-left: 0 !important;
      }
      .border-md-x {
          border-left: 1px solid var(--color-main-188) !important;
          border-right: 1px solid var(--color-main-188) !important;
      }
      .border-md-y {
          border-top: 1px solid var(--color-main-188) !important;
          border-bottom: 1px solid var(--color-main-188) !important;
      }
      .border-md {
          border-top: 1px solid var(--color-main-188) !important;
          border-bottom: 1px solid var(--color-main-188) !important;
          border-left: 1px solid var(--color-main-188) !important;
          border-right: 1px solid var(--color-main-188) !important;
      }
      .border-md-0 {
          border-top: 0 !important;
          border-bottom: 0 !important;
          border-left: 0 !important;
          border-right: 0 !important;
      }
  }
  
  @media (min-width: 992px) {
      .border-lg-top {
          border-top: 1px solid var(--color-main-188) !important;
      }
      .border-lg-right {
          border-right: 1px solid var(--color-main-188) !important;
      }
      .border-lg-bottom {
          border-bottom: 1px solid var(--color-main-188) !important;
      }
      .border-lg-left {
          border-left: 1px solid var(--color-main-188) !important;
      }
      .border-lg-top-0 {
          border-top: 0 !important;
      }
      .border-lg-right-0 {
          border-right: 0 !important;
      }
      .border-lg-bottom-0 {
          border-bottom: 0 !important;
      }
      .border-lg-left-0 {
          border-left: 0 !important;
      }
      .border-lg-x {
          border-left: 1px solid var(--color-main-188) !important;
          border-right: 1px solid var(--color-main-188) !important;
      }
      .border-lg-y {
          border-top: 1px solid var(--color-main-188) !important;
          border-bottom: 1px solid var(--color-main-188) !important;
      }
      .border-lg {
          border-top: 1px solid var(--color-main-188) !important;
          border-bottom: 1px solid var(--color-main-188) !important;
          border-left: 1px solid var(--color-main-188) !important;
          border-right: 1px solid var(--color-main-188) !important;
      }
      .border-lg-0 {
          border-top: 0 !important;
          border-bottom: 0 !important;
          border-left: 0 !important;
          border-right: 0 !important;
      }
  }
  
  @media (min-width: 1200px) {
      .border-xl-top {
          border-top: 1px solid var(--color-main-188) !important;
      }
      .border-xl-right {
          border-right: 1px solid var(--color-main-188) !important;
      }
      .border-xl-bottom {
          border-bottom: 1px solid var(--color-main-188) !important;
      }
      .border-xl-left {
          border-left: 1px solid var(--color-main-188) !important;
      }
      .border-xl-top-0 {
          border-top: 0 !important;
      }
      .border-xl-right-0 {
          border-right: 0 !important;
      }
      .border-xl-bottom-0 {
          border-bottom: 0 !important;
      }
      .border-xl-left-0 {
          border-left: 0 !important;
      }
      .border-xl-x {
          border-left: 1px solid var(--color-main-188) !important;
          border-right: 1px solid var(--color-main-188) !important;
      }
      .border-xl-y {
          border-top: 1px solid var(--color-main-188) !important;
          border-bottom: 1px solid var(--color-main-188) !important;
      }
      .border-xl {
          border-top: 1px solid var(--color-main-188) !important;
          border-bottom: 1px solid var(--color-main-188) !important;
          border-left: 1px solid var(--color-main-188) !important;
          border-right: 1px solid var(--color-main-188) !important;
      }
      .border-xl-0 {
          border-top: 0 !important;
          border-bottom: 0 !important;
          border-left: 0 !important;
          border-right: 0 !important;
      }
  }
  
  
  /* -------------------------------------------------------------------------- */
  /*                        Css Only Hover to Show Child                        */
  /* -------------------------------------------------------------------------- */
  .onhover {
      height: 24px;
      width: 24px;
      position: relative;
      margin-bottom: 0;
      display: inline-block;
      vertical-align: middle;
  }
  .onhover:hover {
      z-index: 1000;
  }
  .onhover-child, .onhover-sibling  {
      position: absolute;
      opacity: 0.0;
      transition: width 500ms ease-in-out;
  }
  .onhover:hover .onhover-child {
      top: -150px;
      padding: 7px 10px;
      position: absolute;
      opacity: 1.0;
      visibility: visible;
      box-shadow: 0 1px 6px var(--color-main-189);
    }.onhover:hover:hover .onhover-child-slidedown-1000 {
      height: 100%;
  }
  .onhover:not(:hover) .onhover-child {
      padding: 0 !important;
      width: 0;
      height: 0;
      overflow: hidden;
  }
  .onhover:hover + .onhover-sibling {
      top: -150px;
      padding: 7px 10px;
      position: absolute;
      opacity: 1 !important;
      visibility: visible;
      box-shadow: 0 1px 6px var(--color-main-189);
  }
  .onhover:not(:hover) + .onhover-sibling {
      padding: 0 !important;
      width: 0;
      height: 0;
      overflow: hidden;
  }
  .onhover:not(:hover) .onhover-child *, .onhover:not(:hover) + .onhover-sibling *, .onhover:not(:hover) .onhover-child:before, .onhover:not(:hover) + .onhover-sibling:before {
      display: none !important;
  }
  
  .onhover-child.onhover-child-slidedown-1000:hover {
      margin-top: 1000px !important;
      transition: all 15s linear;
      transition: all 1s cubic-bezier(1, 0, 1, -0.09);
  }
  
  
  .onhover-delay-hide-slide + a:not(:hover) {
      display: none !important;
  }
  .onhover-delay-hide-slide {
      position: static;
  }
  .onhover-delay-hide-slide:hover {
      position: fixed;
      left: 200vw;
      transition: all 1.5s cubic-bezier(1, 0, 1, -0.09);
  }
  
  
  
  
  /* -------------------------------------------------------------------------- */
  /*                   Css tooltip. Works with onhover system                   */
  /* -------------------------------------------------------------------------- */
  .tooltip-wrapper a {
      color: var(--color-main-190);
      text-decoration: underline;
      font-weight: bold;
  }
  .tooltip-wrapper a:hover {
  color: var(--color-main-1);
  }
  
  .tooltip-wrapper[x-placement]::before {
      content: ' ';
      display: block;
      width: 0;
      height: 0;
      border-style: solid;
      position: absolute;
      margin: 5px;
      border-color: var(--color-main-191);
      /* border-color: var(--color-main-192); */
  }
  
  .tooltip-wrapper[x-placement^="top"] {
      margin-bottom: 10px;
  }
  .tooltip-wrapper[x-placement^="top"]::before {
      border-width: 8px 8px 0 8px;
      border-left-color: transparent;
      border-right-color: transparent;
      border-bottom-color: transparent;
      bottom: -5px;
      left: calc(50% - 11px);
      margin-top: 0;
      margin-bottom: 0;
  }
  .tooltip-wrapper[x-placement^="bottom"] {
      margin-top: 5px;
  }
  
  .tooltip-wrapper[x-placement^="bottom"]::before {
      border-width: 0 5px 5px 5px;
      border-left-color: transparent;
      border-right-color: transparent;
      border-top-color: transparent;
      top: -5px;
      left: calc(50% - 5px);
      margin-top: 0;
      margin-bottom: 0;
  }
  .tooltip-wrapper[x-placement^="right"] {
      margin-left: 5px;
  }
  .tooltip-wrapper[x-placement^="right"]::before {
      border-width: 5px 5px 5px 0;
      border-left-color: transparent;
      border-top-color: transparent;
      border-bottom-color: transparent;
      left: -5px;
      top: calc(50% - 5px);
      margin-left: 0;
      margin-right: 0;
  }
  .tooltip-wrapper[x-placement^="left"] {
      margin-right: 10px;
  }
  .tooltip-wrapper[x-placement^="left"]::before {
      border-width: 8px 0 8px 8px;
      border-top-color: transparent;
      border-right-color: transparent;
      border-bottom-color: transparent;
      right: -5px;
      top: calc(50% - 11px);
      margin-left: 0;
      margin-right: 0;
  }
  
  
  /* -------------------------------------------------------------------------- */
  /*                              Css Only Carousel                             */
  /* -------------------------------------------------------------------------- */
  .carousel {
      display: block;
      text-align: left;
      position: relative;
      margin-bottom: 22px;
  }
  .carousel > input {
      clip: rect(1px, 1px, 1px, 1px);
      clip-path: inset(50%);
      height: 1px;
      width: 1px;
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
  }
  .carousel > input:nth-of-type(20):checked ~ .carousel__slides .carousel__slide:nth-of-type(20) {
      margin-left: -1900%;
  }
  .carousel > input:nth-of-type(19):checked ~ .carousel__slides .carousel__slide:nth-of-type(19) {
      margin-left: -1800%;
  }
  .carousel > input:nth-of-type(18):checked ~ .carousel__slides .carousel__slide:nth-of-type(18) {
      margin-left: -1700%;
  }
  .carousel > input:nth-of-type(17):checked ~ .carousel__slides .carousel__slide:nth-of-type(17) {
      margin-left: -1600%;
  }
  .carousel > input:nth-of-type(16):checked ~ .carousel__slides .carousel__slide:nth-of-type(16) {
      margin-left: -1500%;
  }
  .carousel > input:nth-of-type(15):checked ~ .carousel__slides .carousel__slide:nth-of-type(15) {
      margin-left: -1400%;
  }
  .carousel > input:nth-of-type(14):checked ~ .carousel__slides .carousel__slide:nth-of-type(14) {
      margin-left: -1300%;
  }
  .carousel > input:nth-of-type(13):checked ~ .carousel__slides .carousel__slide:nth-of-type(13) {
      margin-left: -1200%;
  }
  .carousel > input:nth-of-type(12):checked ~ .carousel__slides .carousel__slide:nth-of-type(12) {
      margin-left: -1100%;
  }
  .carousel > input:nth-of-type(11):checked ~ .carousel__slides .carousel__slide:nth-of-type(11) {
      margin-left: -1000%;
  }
  .carousel > input:nth-of-type(10):checked ~ .carousel__slides .carousel__slide:nth-of-type(10) {
      margin-left: -900%;
  }
  .carousel > input:nth-of-type(9):checked ~ .carousel__slides .carousel__slide:nth-of-type(9) {
      margin-left: -800%;
  }
  .carousel > input:nth-of-type(8):checked ~ .carousel__slides .carousel__slide:nth-of-type(8) {
      margin-left: -700%;
  }
  .carousel > input:nth-of-type(7):checked ~ .carousel__slides .carousel__slide:nth-of-type(7) {
      margin-left: -600%;
  }
  .carousel > input:nth-of-type(6):checked ~ .carousel__slides .carousel__slide:nth-of-type(6) {
      margin-left: -500%;
  }
  .carousel > input:nth-of-type(5):checked ~ .carousel__slides .carousel__slide:nth-of-type(5) {
      margin-left: -400%;
  }
  .carousel > input:nth-of-type(4):checked ~ .carousel__slides .carousel__slide:nth-of-type(4) {
      margin-left: -300%;
  }
  .carousel > input:nth-of-type(3):checked ~ .carousel__slides .carousel__slide:nth-of-type(3) {
      margin-left: -200%;
  }
  .carousel > input:nth-of-type(2):checked ~ .carousel__slides .carousel__slide:nth-of-type(2) {
      margin-left: -100%;
  }
  .carousel > input:nth-of-type(1):checked ~ .carousel__slides .carousel__slide:nth-of-type(1) {
      margin-left: 0%;
  }
  .carousel > input:nth-of-type(1):checked ~ .carousel__thumbnails li:nth-of-type(1) {
      box-shadow: 0px 0px 0px 5px var(--color-main-193);
  }
  .carousel > input:nth-of-type(2):checked ~ .carousel__thumbnails li:nth-of-type(2) {
      box-shadow: 0px 0px 0px 5px var(--color-main-193);
  }
  .carousel > input:nth-of-type(3):checked ~ .carousel__thumbnails li:nth-of-type(3) {
      box-shadow: 0px 0px 0px 5px var(--color-main-193);
  }
  .carousel > input:nth-of-type(4):checked ~ .carousel__thumbnails li:nth-of-type(4) {
      box-shadow: 0px 0px 0px 5px var(--color-main-193);
  }
  .carousel > input:nth-of-type(5):checked ~ .carousel__thumbnails li:nth-of-type(5) {
      box-shadow: 0px 0px 0px 5px var(--color-main-193);
  }
  .carousel > input:nth-of-type(6):checked ~ .carousel__thumbnails li:nth-of-type(6) {
      box-shadow: 0px 0px 0px 5px var(--color-main-193);
  }
  .carousel > input:nth-of-type(7):checked ~ .carousel__thumbnails li:nth-of-type(7) {
      box-shadow: 0px 0px 0px 5px var(--color-main-193);
  }
  .carousel > input:nth-of-type(8):checked ~ .carousel__thumbnails li:nth-of-type(8) {
      box-shadow: 0px 0px 0px 5px var(--color-main-193);
  }
  .carousel > input:nth-of-type(9):checked ~ .carousel__thumbnails li:nth-of-type(9) {
      box-shadow: 0px 0px 0px 5px var(--color-main-193);
  }
  .carousel > input:nth-of-type(10):checked ~ .carousel__thumbnails li:nth-of-type(10) {
      box-shadow: 0px 0px 0px 5px var(--color-main-193);
  }
  .carousel > input:nth-of-type(11):checked ~ .carousel__thumbnails li:nth-of-type(11) {
      box-shadow: 0px 0px 0px 5px var(--color-main-193);
  }
  .carousel > input:nth-of-type(12):checked ~ .carousel__thumbnails li:nth-of-type(12) {
      box-shadow: 0px 0px 0px 5px var(--color-main-193);
  }
  .carousel > input:nth-of-type(13):checked ~ .carousel__thumbnails li:nth-of-type(13) {
      box-shadow: 0px 0px 0px 5px var(--color-main-193);
  }
  .carousel > input:nth-of-type(14):checked ~ .carousel__thumbnails li:nth-of-type(14) {
      box-shadow: 0px 0px 0px 5px var(--color-main-193);
  }
  .carousel > input:nth-of-type(15):checked ~ .carousel__thumbnails li:nth-of-type(15) {
      box-shadow: 0px 0px 0px 5px var(--color-main-193);
  }
  .carousel > input:nth-of-type(16):checked ~ .carousel__thumbnails li:nth-of-type(16) {
      box-shadow: 0px 0px 0px 5px var(--color-main-193);
  }
  .carousel > input:nth-of-type(17):checked ~ .carousel__thumbnails li:nth-of-type(17) {
      box-shadow: 0px 0px 0px 5px var(--color-main-193);
  }
  .carousel > input:nth-of-type(18):checked ~ .carousel__thumbnails li:nth-of-type(18) {
      box-shadow: 0px 0px 0px 5px var(--color-main-193);
  }
  .carousel > input:nth-of-type(19):checked ~ .carousel__thumbnails li:nth-of-type(19) {
      box-shadow: 0px 0px 0px 5px var(--color-main-193);
  }
  .carousel > input:nth-of-type(20):checked ~ .carousel__thumbnails li:nth-of-type(20) {
      box-shadow: 0px 0px 0px 5px var(--color-main-193);
  }
  .carousel__slides {
      position: relative;
      z-index: 1;
      padding: 0;
      margin: 0;
      overflow: hidden;
      white-space: nowrap;
      box-sizing: border-box;
      display: flex;
  }
  .carousel .carousel__slide {
      position: relative;
      display: block;
      flex: 1 0 100%;
      width: 100%;
      height: 100%;
      overflow: hidden;
      transition: all 300ms ease-out;
      vertical-align: top;
      box-sizing: border-box;
      white-space: normal;
  }
  .carousel .carousel__slide figure {
      display: flex;
      margin: 0;
  }
  .carousel .carousel__slide div {
      position: relative;
      width: 100%;
  }
  .carousel .carousel__slide div:before {
      display: block;
      content: "";
      width: 100%;
      padding-top: 50.6666666667%;
  }
  .carousel .carousel__slide div > img {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      height: 100%;
  }
  .carousel .carousel__slide img {
      display: block;
      flex: 1 1 auto;
      /* object-fit: cover; */
  }
  .carousel .carousel__slide figcaption {
      align-self: flex-end;
      padding: 20px 20px 0 20px;
      flex: 0 0 auto;
      width: 25%;
      min-width: 150px;
  }
  .carousel .carousel__slide .credit {
      margin-top: 1rem;
      color: var(--color-main-37);
      display: block;
  }
  .carousel .carousel__slide.scrollable {
      overflow-y: scroll;
  }
  .carousel .carousel__thumbnails {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      margin: 0 -10px;
      justify-content: center;
  }
  .carousel .carousel__slides + .carousel__thumbnails {
      margin-top: 8px;
  }
  .carousel .carousel__thumbnails li {
      flex: 1 1 auto;
      max-width: calc((100% / 6) - 20px);
      margin: 0 10px;
      transition: all 300ms ease-in-out;
  }
  .carousel .carousel__thumbnails label {
      display: block;
      position: relative;
  }
  .carousel .carousel__thumbnails label:before {
      display: block;
      content: "";
      width: 100%;
      padding-top: 100%;
  }
  .carousel .carousel__thumbnails label > img {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
  }
  .carousel .carousel__thumbnails label:hover, .carousel__thumbnails label:focus {
      cursor: pointer;
  }
  .carousel .carousel__thumbnails label:hover img, .carousel__thumbnails label:focus img {
      box-shadow: 0px 0px 0px 1px var(--color-main-194);
      transition: all 300ms ease-in-out;
  }
  .carousel .carousel__thumbnails img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
  }
  
  
  
  /* -------------------------------------------------------------------------- */
  /*                                Css Only Tabs                               */
  /* -------------------------------------------------------------------------- */
  input#tabno1, input#tabno2, input#tabno3, input#tabno4, input#tabno5, input#tabno6, input#tabno7, input#tabno8, input#tabno9, input#tabno10, .tab-content .tabno1, .tab-content .tabno2, .tab-content .tabno3, .tab-content .tabno4, .tab-content .tabno5, .tab-content .tabno6, .tab-content .tabno7, .tab-content .tabno8, .tab-content .tabno9, .tab-content .tabno10 {
      display: none;
  }
  #tabno1:checked ~ * > .navno1, #tabno2:checked ~ * > .navno2, #tabno3:checked ~ * > .navno3, #tabno4:checked ~ * > .navno4, #tabno5:checked ~ * > .navno5, #tabno6:checked ~ * > .navno6, #tabno7:checked ~ * > .navno7, #tabno8:checked ~ * > .navno8, #tabno9:checked ~ * > .navno9, #tabno10:checked ~ * > .navno10 {
      border-color: var(--color-main-195) var(--color-main-195) var(--color-main-1);
      /* border-color: var(--color-main-156) var(--color-main-156) var(--color-main-195); */
      background: var(--color-main-1);
  }
  #tabno1:checked ~ * label[for=tabno1], #tabno2:checked ~ * label[for=tabno2], #tabno3:checked ~ * label[for=tabno3], #tabno4:checked ~ * label[for=tabno4], #tabno5:checked ~ * label[for=tabno5], #tabno6:checked ~ * label[for=tabno6], #tabno7:checked ~ * label[for=tabno7], #tabno8:checked ~ * label[for=tabno8], #tabno9:checked ~ * label[for=tabno9], #tabno10:checked ~ * label[for=tabno10] {
      color: var(--color-main-158);
  }
  #tabno1:checked ~ * > .tabno1, #tabno2:checked ~ * > .tabno2, #tabno3:checked ~ * > .tabno3, #tabno4:checked ~ * > .tabno4, #tabno5:checked ~ * > .tabno5, #tabno6:checked ~ * > .tabno6, #tabno7:checked ~ * > .tabno7, #tabno8:checked ~ * > .tabno8, #tabno9:checked ~ * > .tabno9, #tabno10:checked ~ * > .tabno10 {
      display: block;
      opacity: 1;
  }
  
  
  
  /* -------------------------------------------------------------------------- */
  /*                           Css Only Date Selector                           */
  /* -------------------------------------------------------------------------- */
  [type="date"] {
      background: var(--color-main-1) url(/assets/site/images/calendar_2.png) 97% 50% no-repeat;
  }
  
  [type="date"]::-webkit-inner-spin-button {
      display: none;
  }
  
  [type="date"]::-webkit-calendar-picker-indicator {
      opacity: 0;
  }
  
  
  
  /* -------------------------------------------------------------------------- */
  /*                          Css Only PIN Inputs Entry                         */
  /* -------------------------------------------------------------------------- */
  .pinBox {
      width: 240px;
      width: 360px;
      text-align: left;
      display: inline-block;
  }
  .pinBox .pinEntry {
      padding: 0;
      margin-bottom: 0;
      width: 260px;
      width: 390px;
      font-size: 32px;
      font-weight: 600;
      color: var(--color-main-196);
      background-color: transparent;
      border: 0;
      text-indent: 12px;
      margin-left: 0;
      margin-top: 0;
      letter-spacing: 45px;
      font-family: sans-serif !important;
      /* Mozilla: Hide Arrows From Input Number */
      -moz-appearance: textfield;
  }
  /* Chrome, Safari, Edge, Opera, Hide Arrows From Input Number */
  .pinBox .pinEntry::-webkit-outer-spin-button,
  .pinBox .pinEntry::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
  }
  .pinBox .pinEntry:focus {
      background-color: transparent;
      box-shadow: none;
      outline: none;
  }
  .pinBox .pinEntry:invalid {
      text-indent: 0 !important;
      overflow: hidden;
      text-overflow: clip;
  }
  .pinBox svg {
      position: relative;
      display: block;
      width: 240px;
      width: 374px;
      height: 2px;
  }
  
  
  
  /* -------------------------------------------------------------------------- */
  /*                                 Css Only FILE INPUT                                 */
  /* -------------------------------------------------------------------------- */
  .file-area {
      width: 100%;
      position: relative;
  }
  
  .file-area input[type=file] {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 3.2rem 2.6rem;
      border: none !important;
      outline: none !important;
      box-shadow: none !important;
      background: transparent;
      /* opacity: 0; */
      cursor: pointer;
  }
  
  input.form-control::-webkit-file-upload-button {
      visibility: hidden;
      display: none;
  }
  
  .file-area .file-dummy {
      width: 100%;
      padding: 45px 30px 15px;
      background: var(--color-main-197);
      border: 2px dashed var(--color-main-197);
      /* text-align: center; */
      transition: background 0.3s ease-in-out;
      /* background: url(/assets/site/images/image_upload_default.png);
      background-repeat: no-repeat;
      height: 100%;
      background-size: contain;
      padding-left: 5rem; */
  }
  
  .file-area .file-dummy .file-success img, .file-area .file-dummy .file-default img {
      width: 70px;
      height: 60px;
  }
  
  .file-area .file-dummy .file-success {
      display: none;
  }
  
  .file-area:hover .file-dummy {
      /* background: var(--color-main-24); */
  }
  
  .file-area input[type=file]:focus + .file-dummy {
      outline: 2px solid var(--color-main-198);
      outline: -webkit-focus-ring-color auto 5px;
  }
  
  /* .file-area input[type=file]:valid + .file-dummy {
      border-color: var(--color-main-199);
      background-color: var(--color-main-200);
      background-color: var(--color-main-201);
      color: var(--color-main-202);
      border-color: var(--color-main-202);
  }
  .file-area input[type=file]:valid + .file-dummy .file-success {
      display: inline-block;
  }
  .file-area input[type=file]:valid + .file-dummy .file-default {
      display: none;
  } */
  
  /* -------------------------------------------------------------------------- */
  /*                       Special Textarea Focus Effects                       */
  /* -------------------------------------------------------------------------- */
  .form-outline .form-control ~ .form-label {
      position: absolute;
      top: 2px;
      max-width: 90%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      left: .75rem;
      padding-top: .37rem;
      pointer-events: none;
      transform-origin: 0 0;
      transition: all .2s ease-out;
      color: var(--color-main-203);
      margin-bottom: 0;
      margin-left: 0;
  }

  .form-outline .form-control:not(:focus) ~ .form-label {
    background: transparent !important;
  }
  
  .form-control:focus {
      border-color: var(--color-main-204);
      box-shadow: 0 0 0 .2rem var(--color-main-204);
  }
  
  .form-outline .form-control:focus {
      /* box-shadow: none !important; */
  }
  
  .form-outline .form-control:not(:focus):valid ~ .form-label {
      display: none;
  }
  .form-outline .form-control:focus:valid ~ .form-label {
      display: none;
  }
  .form-control {
      background: var(--color-main-65);
  }
  .form-outline .form-control {
      min-height: auto;
      padding: .33em .75em;
      border: 0;
      /* background: transparent; */
      transition: all .2s linear;
  }
  
  .form-outline .form-control:focus ~ .form-label {
      color: var(--color-main-205);
  }
  
  .form-outline .form-control.active ~ .form-label, .form-outline .form-control:focus ~ .form-label {
      transform: translateY(-1.1rem) translateY(.1rem) scale(.9);
      opacity: 1 !important;
      z-index: 1;
  }
  
  .form-outline .form-control ~ .form-notch {
      display: flex;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      max-width: 100%;
      height: 100%;
      text-align: left;
      pointer-events: none;
  }
  
  .form-outline .form-control ~ .form-notch div {
      pointer-events: none;
      border: 1px solid var(--color-main-206);
      border-color: var(--color-main-206);
      border-color: transparent;
      border-color: var(--color-main-156);
      border-left-style: solid;
      border-left-width: 1px;
      box-sizing: border-box;
      background: transparent;
      transition: all .2s linear;
  }
  
  .form-outline .form-control ~ .form-notch .form-notch-leading {
      left: 0;
      top: 0;
      height: 100%;
      width: .5rem;
      border-right: none;
      border-radius: .25rem 0 0 .25rem;
  }
  
  .form-outline .form-control.active ~ .form-notch .form-notch-leading,
  .form-outline .form-control:focus ~ .form-notch .form-notch-leading {
      border-right: none;
      border-right-color: currentcolor;
  }
  
  .form-outline .form-control:focus ~ .form-notch .form-notch-leading {
      border-color: var(--color-main-205);
      box-shadow: -1px 0 0 0 var(--color-main-205), 0 1px 0 0 var(--color-main-205), 0 -1px 0 0 var(--color-main-205);
  }
  
  .form-outline .form-control ~ .form-notch .form-notch-middle {
      flex: 0 0 auto;
      width: auto;
      max-width: calc(100% - 1rem);
      height: 100%;
      border-right: none;
      border-left: none;
  }
  
  .form-outline .form-control.active ~ .form-notch .form-notch-middle,
  .form-outline .form-control:focus ~ .form-notch .form-notch-middle {
      border-right: none;
      border-right-color: currentcolor;
      border-left: none;
      border-left-color: currentcolor;
      border-top: 1px solid transparent;
  }
  
  .form-outline .form-control:focus ~ .form-notch .form-notch-middle {
      border-color: var(--color-main-205);
      border-top-color: var(--color-main-205);
      box-shadow: 0 1px 0 0 var(--color-main-205);
      border-top: 1px solid transparent;
  }
  
  .form-outline .form-control:focus:valid ~ .form-notch .form-notch-middle {
      border-color: var(--color-main-205);
      box-shadow: 0 -1px 0 0 var(--color-main-205), 0 1px 0 0 var(--color-main-205);
  }
  
  .form-outline .form-control ~ .form-notch .form-notch-trailing {
      flex-grow: 1;
      height: 100%;
      border-left: none;
      border-radius: 0 .25rem .25rem 0;
  }
  
  .form-outline .form-control.active ~ .form-notch .form-notch-trailing,
  .form-outline .form-control:focus ~ .form-notch .form-notch-trailing {
      border-left: none;
      border-left-color: currentcolor;
  }
  
  .form-outline .form-control:focus ~ .form-notch .form-notch-trailing {
      border-color: var(--color-main-205);
      box-shadow: 1px 0 0 0 var(--color-main-205), 0 -1px 0 0 var(--color-main-205), 0 1px 0 0 var(--color-main-205);
  }
  
  
  nav#Categories:not(:focus-within) {
      /* height: 45px; */
      /* min-height: 30px; */
      background: var(--color-main-1);
      /* box-shadow: 0 3px 3px 0 var(--color-main-207);
      background: var(--color-main-10); */
      background: var(--color-main-132);
      background: inherit;
  }
  @media (max-width: 1000px) {
      nav#Categories:not(:focus-within) {
          /* height: 70px; */
      }
      #navbar-first {
          flex-direction: column;
      }
  }
  @media (max-width: 767px) {
      #navbar-first {
          flex-direction: row;
      }
  }
  .navbar-toggler {
      padding: 1rem 1.2rem;
      margin-right: 0.7rem;
  }
  .navbar-expand-md .navbar-nav .nav-link {
      display: flex;
      justify-content: center;
      align-items: center;
      /* height: 33px; */
      /* width: 35px; */
      /* height: 36px; */
      /* height: 26px; */
      height: 33.6px;
      height: 38px;
      height: 40px;
      /* height: 45px; */
      width: 43px;
      width: 45px;
      width: 50px;
      width: 57px;
      /* border-radius: 50%; */
      /* border-radius: 1px; */
      /* border-radius: .25rem; */
      /* border-radius: 15px; */
      border-radius: 5px;
      /* border: 2px solid var(--color-main-208); */
      /* padding-left: 14px !important;
      padding-right: 14px !important; */
      text-align: center;
      /* background: var(--color-main-209); */
      /* padding: 7px !important; */
      line-height: 1.7;
      /* color: var(--color-main-210);
      color: var(--color-main-61);
      color: var(--color-main-22);
      color: var(--color-main-39);
      color: var(--color-main-60);
      color: var(--color-main-211); */
      /* background-color: var(--color-main-13); */
      /* background: inherit; */
      /* background: var(--color-main-212);
      background: var(--color-main-213);
      background: var(--color-main-213);
      background: var(--color-main-214);
      background: inherit; */
      /* box-shadow: 0 1px 2px var(--color-main-215); */
      white-space: nowrap;
  }
  .navbar-expand-md .navbar-nav .nav-link.btn-light {
      /* border: 1px solid black !important; */
      border: 1px solid var(--color-main-23) !important;
      /* border: 1px solid var(--color-main-216) !important; */
      /* border: 3px solid var(--color-main-216) !important; */
      background-color: var(--color-main-217);
      background: var(--color-main-210);
      background-color: var(--color-main-31);
      background: var(--color-main-218);
      background: var(--color-main-216);
      background: var(--color-main-219);
      background: var(--color-main-131);
  }
  .navbar-expand-md .navbar-nav .nav-link.relog {
      height: 34px;
      border-radius: 0;
      color: var(--color-main-39);
  }
  .navbar-expand-md .navbar-nav .nav-link.relog:hover {
      color: var(--color-main-27);
  }
  @media (min-width: 992px) {
      .navbar-expand-md .navbar-nav .nav-link {
          width: 70px;
      }
  }
  @media (min-width: 768px) {
      .navbar-expand-md .navbar-nav .nav-item {
          /* margin-right: 1.25rem !important;
          margin-right: 1rem !important;
          margin-left: 1rem !important; */
      }
      .navbar-expand-md .navbar-nav .nav-item:last-of-type {
          margin-right: 0 !important;
      }
      .navbar-expand-md .navbar-nav .nav-link {
          /* height: 52px !important;
          width: 52px;
          height: 40px !important;
          width: 40px; */
          display: flex;
          justify-content: center;
          align-items: center;
          /* border-radius: .25rem;
          border-radius: 2px; */
          text-align: center;
          /* padding: 5px 5px 5px 3px !important; */
      }
      .navbar-expand-md .navbar-nav .nav-link svg {
          width: 22px;
          height: 22px;
      }
  }
  .navbar-expand-md .navbar-nav .nav-link.hover-underline.underline {
      /* border: 3px solid var(--color-main-220);
      border: 1px solid var(--color-main-220); */
      /* border: 1px solid var(--color-main-221) !important; */
      /* border-color: var(--color-main-159); */
      /* border-color: var(--color-main-145); */
      /* background: var(--color-main-160); */
      /* background: var(--color-main-222); */
      /* color: var(--color-main-39); */
      /* background: var(--color-main-132);
      background: var(--color-main-223);
      background: var(--color-main-208);
      background-color: var(--color-main-61); */
      /* background: var(--color-main-61); */
      /* background: var(--color-main-144); */
      /* background: var(--color-main-224); */
      /* background-color: var(--color-main-71); */
      /* background-image: linear-gradient(to bottom, var(--color-main-10) 0, var(--color-main-41) 100%); */
      /* background-image: linear-gradient(to bottom, var(--color-main-10) 0, var(--color-main-225) 100%); */
      /* opacity: 0.7; */
      outline: 0;
      /* box-shadow: 0 0 0 0.2rem var(--color-main-160);
      box-shadow: 0 0 0 0.2rem var(--color-main-222);
      box-shadow: 0 0 1px 0.2rem var(--color-main-208);
      box-shadow: 0 0 1px 0.2rem var(--color-main-61); */
      /* box-shadow: 0 0 0 .2rem var(--color-main-98);
      box-shadow: 0 0 0 0px var(--color-main-98), 1px 2px 3px 2px var(--color-main-226); */
      /* box-shadow: none !important; */
  }
  .navbar-expand-md .navbar-nav .nav-link.hover-underline.underline.relog {
      background: var(--color-main-208);
      color: var(--color-main-39);
      opacity: 1;
  }
  .navbar-expand-md .navbar-nav .nav-link.hover-underline:not(.underline)::focus-within {
      box-shadow: 0 0 0 0.2rem var(--color-main-160);
  }
  .navbar-expand-md .navbar-nav .nav-link:hover {
  }
  .navbar-expand-md .navbar-nav .nav-link.hover-underline:not(.underline):hover {
      background: var(--color-main-223);
      background: linear-gradient(to bottom, var(--color-main-41) 0, var(--color-main-10) 100%);
      /* background: var(--color-main-132); */
      opacity: 0.7;
      /* box-shadow: 0 0 1px 0.2rem var(--color-main-223); */
  }
  
  .navbar-expand-md .navbar-nav .nav-link img {
      height: 24px;
      height: 23px;
      height: 20px;
      height: 24px;
      height: 31px;
      height: 28px;
      /* width: 30px; */
      /* filter: drop-shadow(0px 2px 0px white) drop-shadow(2px 2px 0px var(--color-main-227));
      filter: drop-shadow(0px 2px 0px white) drop-shadow(5px -1px 0px var(--color-main-228));
      filter: drop-shadow(0px 2px 0px white) drop-shadow(2px 2px 0px var(--color-main-39));
      filter: drop-shadow(0px 2px 0px white) drop-shadow(2px 2px 0px ​var(--color-main-229));
      filter: drop-shadow(0px 2px 0px white) drop-shadow(2px 2px 0px white) drop-shadow(2px 2px 2px chartreuse); */
      /* filter: drop-shadow(0px 2px 0px white) drop-shadow(0px 5px 1px var(--color-main-230)); */
  }
  .navbar-expand-md .navbar-nav .nav-link.hover-underline.underline img {
      /* filter: invert(1); */
      /* filter: invert(0.9); */
      /* filter: invert(0.6); */
      /* filter: drop-shadow(0px 2px 0px white) drop-shadow(0px 5px 1px ​var(--color-main-145)); */
  }
  
  .navbar-expand-md .navbar-nav .nav-link > .fa {
      font-size: 1.5rem;
      color: var(--color-main-140);
      /* color: var(--color-main-22); */
  }
  
  .navbar-expand-md .navbar-nav .nav-link > span {
      display: none;
      /* filter: drop-shadow(0px 2px 0px white) drop-shadow(2px 2px 0px white) drop-shadow(2px 2px 2px var(--color-main-231)); */
  }
  
  .category-nav label {
      color: inherit;
      cursor: pointer;
  }
  
  .category-nav ul {
      /* min-width: 230px;
      box-shadow: 0 0 10px var(--color-main-232);
      border: none;
      border-radius: 0px;
      padding: 0;
      margin-top: -2px; */
  }
  
  .category-nav > ul {
      width: 360px;
      height: 100vh;
      top: -55px !important;
  }
  
  .category-nav .close-icon {
      display: block;
      width: 50px;
      height: 50px;
      color: var(--color-main-1);
      position: fixed;
      top: 0;
      left: unset;
      right: 0;
      font-size: 50px;
      z-index: 11;
  }
  @media (max-width: 386px) {
      .category-nav .close-icon {
          color: inherit;
      }
  }
  @media (max-width: 420px) {
      .category-nav .close-icon {
          z-index: 1101;
      }
  }
  .category-nav .category-overlay {
      display: block;
      width: 100vw;
      height: 100vh;
      top: 0;
      position: fixed;
      background-color: var(--color-main-233);
  }
  
  .category-nav ul:hover {
      z-index: 10;
  }
  
  .category-nav ul.category-ul, .category-nav ul.subcategory-ul {
      display: none;
      height: calc(100% - 139px);
      width: 100%;
      left: 0 !important;
      position: absolute;
      left: 0;
      top: 134px;
      right: 0;
      bottom: 0;
      overflow-y: auto;
      box-shadow: none;
      /* box-shadow: 0 1px 2px var(--color-main-215); */
  }
  
  .category-nav ul ul ul {
      top: -3px;
      left: 100% !important;
      position: absolute !important;
  }
  
  .category-nav input[type="radio"]:checked + ul.category-ul, .category-nav input[type="radio"]:checked + ul.subcategory-ul, .category-nav input[type="checkbox"]:checked + ul.category-ul, .category-nav input[type="checkbox"]:checked + ul.subcategory-ul {
      display: block;
      background: var(--color-main-131);
  }
  
  .category-nav input[type="radio"], .category-nav input[type="checkbox"], .category-nav input[type="checkbox"]:not(:checked) ~ ul.subcategory-ul {
      display: none;
  }
  
  .category-nav ul.dropdown-menu li > a, .category-nav ul.dropdown-menu li > label, .sidebar ul li > a, .sidebar ul li > label {
      display: inline-block;
      padding: 4px 15px;
      /* border-bottom: solid 1px var(--color-main-23); */
      color: inherit;
  }
  .sidebar ul li > a.active {
      background: var(--color-main-208) !important;
  }
  
  .category-nav ul.dropdown-menu li > a:hover, .category-nav ul.dropdown-menu li > label:hover, .sidebar ul li > a:hover, .sidebar ul li > label:hover {
      /* background-color: transparent; */
      color: var(--color-main-30);
      text-decoration: none;
      /* background-color: var(--color-main-19); */
  }
  
  .category-nav li.dropdown ul.dropdown-menu li:last-child > a {
      border-bottom: none;
  }
  
  .category-nav .fa-caret-right {
      margin: auto 0 auto auto;
  }
  
  
  
  #Categories:focus-within ~ #navbar-first {
      display: none;
  }
  .cat-focus-opener {
      display: block;
  }
  /* .cat-focus-opener:focus, .cat-focus-opener:focus-within, .cat-focus-container:focus-within .cat-focus-opener, .cat-focus-container:hover:focus-within .cat-focus-closer { */
  .cat-focus-opener:focus, .cat-focus-opener:focus-within, .cat-focus-container:focus-within .cat-focus-opener, .cat-focus-container:focus-within .cat-focus-closer {
      opacity: 0;
      z-index: -1 !important;
  }
  /* .cat-focus-container:focus-within:not(:hover) .cat-focus-closer { */
  .cat-focus-container:focus-within .cat-focus-closer {
      opacity: 1;
      z-index: initial !important;
      display: inline-block !important;
      pointer-events: none;
      user-select: none;
      position: absolute !important;
      left: calc(50% - 40px);
      transform: translateX(-50%);
  }
  .cat-focus-closer {
      display: none;
  }
  .cat-focus-opener:focus ~ .cat-focus-closer, .cat-focus-opener:focus-within ~ .cat-focus-closer {
      display: block;
  }
  .cat-focus-child, .main-category-list {
      opacity: 0;
      max-height: 0;
      height: 0;
      width: 0 !important;
      /* padding: 0 !important; */
      overflow: hidden;
      transition: height 4s linear;
  }
  /* .cat-focus-container:hover:focus-within .cat-focus-child { */
  .cat-focus-container:focus-within .cat-focus-child, .category-nav input[type="checkbox"]:checked + .main-category-list {
      opacity: 1 !important;
      max-height: unset !important;
      height: auto;
      width: auto !important;
      padding-top: 1rem !important;
      padding-bottom: 1rem !important;
      overflow: visible;
      visibility: visible !important;
      row-gap: 0;
      top: 0 !important;
      /* box-shadow: 0 1px 2px var(--color-main-215) !important; */
  }
  
  
  
  #search_wrapper {
      box-shadow: 0px 0px 0px 1px var(--color-main-7);
      box-shadow: 0px 0px 0px 1px var(--color-main-157);
      box-shadow: 0px 0px 0px 1px ​var(--color-main-234);
      box-shadow: 0px 0px 0px 1px var(--color-main-23);
  }
  #search_wrapper:focus-within {
      /* border-radius: 4px !important; */
      /* background: var(--color-main-1); */
      background: inherit;
      box-shadow: 0 0 0 0.2rem var(--color-main-160);
      box-shadow: 0 0 0 0.2rem var(--color-main-222);
      box-shadow: 0 0 0 0.16rem var(--color-main-208) !important;
      box-shadow: 0 0 0 1px var(--color-main-10) !important;
      /* box-shadow: 0px 0px 0px 3px var(--color-main-7); */
  }
  #search {
      height: 39px;
      border-top-left-radius: inherit !important;
      border-bottom-left-radius: inherit !important;
      color: var(--color-main-235);
      box-shadow: none !important;
  }
  #search:not(:valid) {
      font-size: 16px;
      padding: 0.625rem 0.75rem;
  }
  #search:focus {
      margin-right: 2px;
  }
  #search:not(:focus) {
     background: inherit;
     background: var(--color-main-13);
     /* background: var(--color-main-236); */
     /* background-color: var(--color-main-23); */
     /* background: var(--color-main-131); */
     /* background: var(--color-main-208); */
     background: transparent;
  }
  #search:not(:focus)::placeholder {
      color: var(--color-main-31) !important;
      color: var(--color-main-33) !important;
  }
  #search + div, #search:focus + div + div, #search:valid + div + div, #search + div:focus + div, #search + div:hover + div {
      display: none;
  }
  #search:focus + div, #search:valid + div, #search + div:focus, #search + div:hover {
      display: inline-block;
      box-shadow: 0 0 0 0.2rem var(--color-main-160);
      box-shadow: 0 0 0 0.2rem var(--color-main-222);
      box-shadow: 0 0 0 0.06rem var(--color-main-208);
      box-shadow: none;
      z-index: 3;
  }
  #search ~ div button {
      padding: 0.3rem 0.75rem;
  }
  
  img.search-icon-dark-small-image, img.search-icon-image {
      transform: scale(0.75);
  }
  
  
  /* -------------------------------------------------------------------------- */
  /*         Css To Make Bootstrap Switch checkbox work outside the unit        */
  /* -------------------------------------------------------------------------- */
  .custom-control-label::before {
      border-color: var(--color-main-39);
  }
  .custom-control-input:checked ~ * .custom-control-label::before, .custom-control-input:checked ~ * .custom-control-label.custom-control-primary::before {
      top: 5px;
      color: var(--color-main-1);
      border-color: var(--color-main-71);
      /* background-color: var(--color-main-60); */
      background-color: var(--color-main-71);
      /* background-color: var(--color-main-131); */
  }
  .custom-switch .custom-control-label::before {
      top: 4px;
  }
  .custom-control-input:checked ~ * .custom-control-label.custom-control-success::before {
      color: var(--color-main-1);
      border-color: var(--color-main-145);
      background-color: var(--color-main-145);
  }
  .custom-control-input:checked ~ * .custom-control-label.custom-control-dark::before {
      color: var(--color-main-1);
      border-color: var(--color-main-143);
      background-color: var(--color-main-143);
  }
  .custom-control-input:checked ~ * .custom-control-label.custom-control-danger::before {
      color: var(--color-main-1);
      border-color: var(--color-main-44);
      background-color: var(--color-main-44);
  }
  
  .custom-control-input:checked ~ * .custom-control-label::after {
      top: calc(.25rem + 3px);
      background-color: var(--color-main-1);
      -webkit-transform: translateX(0.75rem);
      transform: translateX(0.75rem);
  }
  .custom-switch .custom-control-label::after {
      top: calc(.25rem + 2px);
      background: var(--color-main-237);
  }
  
  
  
  /* -------------------------------------------------------------------------- */
  /*               Css Only Switches. Checkboxes, Radios Beautiful              */
  /* -------------------------------------------------------------------------- */
  .custom-control.material-checkbox .material-control-input {
      display: none;
  }
  .custom-control.material-checkbox .material-control-input:checked ~ .material-control-indicator {
      border-color: var(--color-main-238);
      transform: rotateZ(45deg) translate(1px, -5px);
      width: 10px;
      border-top: 0px solid var(--color-main-1);
      border-left: 0px solid var(--color-main-1);
  }
  .custom-control.material-checkbox .material-control-indicator {
      display: inline-block;
      position: absolute;
      top: 4px;
      left: 0;
      width: 16px;
      height: 16px;
      border: 2px solid var(--color-main-35);
      transition: 0.3s;
  }
  .custom-control.fill-checkbox .fill-control-input {
      display: none;
  }
  .custom-control.fill-checkbox .fill-control-input:checked ~ .fill-control-indicator {
      background-color: var(--color-main-238);
      border-color: var(--color-main-238);
      background-size: 80%;
  }
  .custom-control.fill-checkbox .fill-control-indicator {
      border-radius: 3px;
      display: inline-block;
      position: absolute;
      top: 4px;
      left: 0;
      width: 16px;
      height: 16px;
      border: 2px solid var(--color-main-35);
      transition: 0.3s;
      background: transperent;
      background-size: 0%;
      background-position: center;
      background-repeat: no-repeat;
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E");
  }
  .custom-control.overflow-checkbox .overflow-control-input {
      display: none;
  }
  .custom-control.overflow-checkbox .overflow-control-input:checked ~ .overflow-control-indicator::after {
      transform: rotateZ(45deg) scale(1);
      top: -6px;
      left: 5px;
  }
  .custom-control.overflow-checkbox .overflow-control-input:checked ~ .overflow-control-indicator::before {
      opacity: 1;
  }
  .custom-control.overflow-checkbox .overflow-control-indicator {
      border-radius: 3px;
      display: inline-block;
      position: absolute;
      top: 4px;
      left: 0;
      width: 16px;
      height: 16px;
      border: 2px solid var(--color-main-35);
  }
  .custom-control.overflow-checkbox .overflow-control-indicator::after {
      content: "";
      display: block;
      position: absolute;
      width: 16px;
      height: 16px;
      transition: 0.3s;
      transform: rotateZ(90deg) scale(0);
      width: 10px;
      border-bottom: 4px solid var(--color-main-61);
      border-right: 4px solid var(--color-main-61);
      border-radius: 3px;
      top: -2px;
      left: 2px;
  }
  .custom-control.overflow-checkbox .overflow-control-indicator::before {
      content: "";
      display: block;
      position: absolute;
      width: 16px;
      height: 16px;
      transition: 0.3s;
      width: 10px;
      border-right: 7px solid var(--color-main-1);
      border-radius: 3px;
      transform: rotateZ(45deg) scale(1);
      top: -4px;
      left: 5px;
      opacity: 0;
  }
  .custom-control.material-switch {
      padding-left: 0;
  }
  .custom-control.material-switch .material-switch-control-input {
      display: none;
  }
  .custom-control.material-switch .material-switch-control-input:checked ~ .material-switch-control-indicator::after {
      background-color: var(--color-main-238);
      left: 17px;
  }
  .custom-control.material-switch .material-switch-control-indicator {
      display: inline-block;
      position: relative;
      margin: 0 10px;
      top: 4px;
      width: 32px;
      height: 16px;
      background: var(--color-main-7);
      border-radius: 16px;
      transition: 0.3s;
  }
  .custom-control.material-switch .material-switch-control-indicator::after {
      content: "";
      display: block;
      position: absolute;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      transition: 0.3s;
      top: -1px;
      left: -1px;
      background: var(--color-main-239);
      box-shadow: 0 2px 10px var(--color-main-35);
  }
  .custom-control.ios-switch {
      padding-left: 0;
  }
  .custom-control.ios-switch .ios-switch-control-input {
      display: none;
  }
  .custom-control.ios-switch .ios-switch-control-input:active ~ .ios-switch-control-indicator::after {
      width: 20px;
  }
  .custom-control.ios-switch .ios-switch-control-input:checked ~ .ios-switch-control-indicator {
      border: 7px solid var(--color-main-238);
  }
  .custom-control.ios-switch .ios-switch-control-input:checked ~ .ios-switch-control-indicator::after {
      top: -5px;
      left: 10px;
  }
  .custom-control.ios-switch .ios-switch-control-input:checked:active ~ .ios-switch-control-indicator::after {
      left: 0px;
  }
  .custom-control.ios-switch .ios-switch-control-indicator {
      display: inline-block;
      position: relative;
      margin: 0 10px;
      top: 4px;
      width: 32px;
      height: 21px;
      background: var(--color-main-1);
      border-radius: 16px;
      transition: 0.3s;
      border: 2px solid var(--color-main-7);
  }
  .custom-control.ios-switch .ios-switch-control-indicator::after {
      content: "";
      display: block;
      position: absolute;
      width: 18px;
      height: 18px;
      border-radius: 16px;
      transition: 0.3s;
      top: 0px;
      left: 0px;
      background: var(--color-main-1);
      box-shadow: 0 0 2px var(--color-main-35), 0 2px 5px var(--color-main-31);
  }
  .custom-control.border-switch {
      padding-left: 0;
  }
  .custom-control.border-switch .border-switch-control-input {
      display: none;
  }
  .custom-control.border-switch .border-switch-control-input:checked ~ .border-switch-control-indicator {
      border-color: var(--color-main-238);
  }
  .custom-control.border-switch .border-switch-control-input:checked ~ .border-switch-control-indicator::after {
      left: 14px;
      background-color: var(--color-main-238);
  }
  .custom-control.border-switch .border-switch-control-indicator {
      display: inline-block;
      position: relative;
      margin: 0 10px;
      top: 4px;
      width: 32px;
      height: 20px;
      background: var(--color-main-1);
      border-radius: 16px;
      transition: 0.3s;
      border: 2px solid ​var(--color-main-234);
  }
  .custom-control.border-switch .border-switch-control-indicator::after {
      content: "";
      display: block;
      position: absolute;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      transition: 0.3s;
      top: 2px;
      left: 2px;
      background: var(--color-main-234);
  }
  .custom-control.teleport-switch {
      padding-left: 0;
  }
  .custom-control.teleport-switch .teleport-switch-control-input {
      display: none;
  }
  .custom-control.teleport-switch .teleport-switch-control-input:checked ~ .teleport-switch-control-indicator {
      border-color: var(--color-main-238);
  }
  .custom-control.teleport-switch .teleport-switch-control-input:checked ~ .teleport-switch-control-indicator::after {
      left: -14px;
  }
  .custom-control.teleport-switch .teleport-switch-control-input:checked ~ .teleport-switch-control-indicator::before {
      right: 2px;
      background-color: var(--color-main-238);
  }
  .custom-control.teleport-switch .teleport-switch-control-indicator {
      display: inline-block;
      position: relative;
      margin: 0 10px;
      top: 4px;
      width: 32px;
      height: 20px;
      background: var(--color-main-1);
      border-radius: 16px;
      transition: 0.3s;
      border: 2px solid ​var(--color-main-234);
      overflow: hidden;
  }
  .custom-control.teleport-switch .teleport-switch-control-indicator::after {
      content: "";
      display: block;
      position: absolute;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      transition: 0.3s;
      top: 2px;
      left: 2px;
      background: var(--color-main-234);
  }
  .custom-control.teleport-switch .teleport-switch-control-indicator::before {
      content: "";
      display: block;
      position: absolute;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      transition: 0.3s;
      top: 2px;
      right: -14px;
      background: var(--color-main-234);
  }
  
  .list-group:first-child .list-group-control:first-child {
      border-top-left-radius: 0.25rem;
      border-top-right-radius: 0.25rem;
  }
  .list-group::last-child .list-group-control:last-child {
      border-bottom-left-radius: 0.25rem;
      border-bottom-right-radius: 0.25rem;
  }
  .list-group.list-group-flush:last-child .list-group-control:last-child {
      border-bottom: 0;
      margin-bottom: 0;
  }
  .list-group.list-group-flush:first-child .list-group-control:first-child {
      border-top: 0;
  }
  .list-group.list-group-flush .list-group-control {
      border-right: 0;
      border-left: 0;
      border-radius: 0;
  }
  .list-group .list-group-control {
      position: relative;
      display: block;
      margin-bottom: -1px;
      background-color: var(--color-main-1);
      border: 1px solid var(--color-main-240);
  }
  .custom-control {
      user-select: none;
  }
  .list-group .list-group-control .custom-control {
      margin: 0;
      padding: 0.75rem 1.25rem;
      padding-left: 3rem;
      display: block;
  }
  .list-group .list-group-control .custom-control .custom-control-indicator, .list-group .list-group-control .custom-control .material-control-indicator, .list-group .list-group-control .custom-control .fill-control-indicator, .list-group .list-group-control .custom-control .overflow-control-indicator {
      top: 1rem;
      left: 1.25rem;
  }
  
  
  
  
  /* -------------------------------------------------------------------------- */
  /*                         Css Show/Hide Feedback box                         */
  /* -------------------------------------------------------------------------- */
  .comment-box-radio:not(:checked) ~ .comment-box-textarea, .comment-box-radio:not(:checked) ~ .comment-box-submit, .comment-box-radio:checked ~ .comment-box-old {
      display: none !important;
  }
  .comment-box-radio:checked ~ .comment-box-textarea, .comment-box-radio:checked ~ .comment-box-submit, .comment-box-radio:not(:checked) ~ .comment-box-old {
      display: block !important;
  }
  
  
  
  /* -------------------------------------------------------------------------- */
  /*                          Css Show/Hide any box                         */
  /* -------------------------------------------------------------------------- */
  .showable-box-radio:not(:checked) ~ .showable-box {
      display: none !important;
  }
  .showable-box-radio:checked ~ .showable-box {
      display: block !important;
  }
  
  
  
  /* -------------------------------------------------------------------------- */
  /*             Css Show/Hide For Editable TR (editable table row)             */
  /* -------------------------------------------------------------------------- */
  /* ------------------------ See Reviews.php frontend ------------------------ */
  tr td input[type=checkbox]:not(:checked) ~ *.edit-unit, tr td input[type=checkbox]:checked ~ *.non-edit-unit {
      display: none !important;
  }
  tr td input[type=checkbox]:checked ~ *.edit-unit, tr td input[type=checkbox]:not(:checked) ~ *.non-edit-unit {
      display: flex-item !important;
  }
  
  
  
  
  /* -------------------------------------------------------------------------- */
  /*          Css Only Multi-steps Dropdown built with Multiple Radios          */
  /* -------------------------------------------------------------------------- */
  
  
  
  /* -------------------------------------------------------------------------- */
  /*                         Css Only Dropdown on Hover                         */
  /* -------------------------------------------------------------------------- */
  .dropdown.cssonly_dropdown .dropdown-toggle:hover + .dropdown-menu, .dropdown.cssonly_dropdown .dropdown-toggle:hover ~ .dropdown-menu, .dropdown.cssonly_dropdown .dropdown-anchor:hover + .dropdown-menu, .dropdown.cssonly_dropdown .dropdown-menu:hover {
      display: block;
      background-color: var(--color-main-1);
  }
  
  
  /* -------------------------------------------------------------------------- */
  /*                         Css Only Focus To Open Menu                        */
  /* -------------------------------------------------------------------------- */
  .cssonly_focusopen-container:focus-within .cssonly_focusopen-child {
      display: block !important;
  }
  
  
  /* -------------------------------------------------------------------------- */
  /*                   Css Only Dropdown Menu on Focus of btn                   */
  /* -------------------------------------------------------------------------- */
  .dropdown-toggle-split:focus ~ .dropdown-menu, .dropdown-menu:hover {
      display: block;
  }
  
  
  /* -------------------------------------------------------------------------- */
  /*                  Css Only Dropdown Menu By Direct Sibling                  */
  /* -------------------------------------------------------------------------- */
  .cssonly-select-container {
      position: relative;
      cursor: pointer;
  }
  .cssonly-selecttoggler {
      position: relative;
      cursor: pointer;
  }
  .cssonly-selectmenu {
      min-width: 100%;
      position: absolute;
      left: 0;
      top: 100%;
      list-style: none;
      z-index: 1;
      cursor: pointer;
  }
  .cssonly-selectmenu:not(:hover) {
      display: none;
  }
  .cssonly-selecttoggler:focus + .cssonly-selectmenu, .cssonly-select-container:focus-within .cssonly-selectmenu {
      display: block !important;
  }
  .cssonly-select-container .cssonly-selectmenu:focus-within {
      background: transparent !important;
      color: transparent ! IMPORTANT;
      opacity: 0;
      z-index: -1 !important;
      -webkit-transition: all 0.3s cubic-bezier(1, 0.03, 0.39, 0.27);
      -moz-transition: all 0.3s cubic-bezier(1, 0.03, 0.39, 0.27);
      transition: all 0.3s cubic-bezier(1, 0.03, 0.39, 0.27);
      box-shadow: none !important;
  }
  .cssonly-selectoption {
      /* border-bottom: 1px solid var(--color-main-195); */
  }
  .cssonly-selectoption:last-of-type {
      border-bottom: none !important;
  }
  .cssonly-selectoption:hover {
      background-color: var(--color-main-65);
  }
  
  
  /* -------------------------------------------------------------------------- */
  /*                        Css Only AddMore Input Fields                       */
  /* -------------------------------------------------------------------------- */
  .cssonly-addmore-group, .cssonly-addmore-checkbox {
      display: none;
  }
  .cssonly-addmore-checkbox:checked + .cssonly-addmore-group {
      display: block;
  }
  .cssonly-addmore-checkbox:checked + .cssonly-addmore-group .cssonly-addmore-toggler, .cssonly-addmore-checkbox:checked + .cssonly-addmore-group + .cssonly-addmore-toggler {
      display: none !important;
  }
  .cssonly-addmore-checkbox:checked + .cssonly-addmore-group + .cssonly-addmore-toggler + .cssonly-addmore-checkbox:not(:checked) +  .cssonly-addmore-group + .cssonly-addmore-toggler {
      display: block !important;
  }
  
  
  
  /* -------------------------------------------------------------------------- */
  /*                             Css Only Accordion                             */
  /* -------------------------------------------------------------------------- */
  /*
   * The accordion should be wrapped in a label
   * Also the label should have a for attribute matching the checkbox id
   */
  .accordion-title {
      display: block !important;
      width: 100%;
      padding: 1em 3em;
      position: relative;
      z-index: 599;
      background: var(--color-main-36);
      border-bottom: 1px solid var(--color-main-23);
      -webkit-transition: all 0.3s linear;
      -moz-transition: all 0.3s linear;
      transition: all 0.3s linear;
  }
  .accordion-title:hover {
      cursor: pointer;
      background: var(--color-main-19);
  }
  .accordion-content {
      position: relative;
      padding: 0;
      max-height: 0px;
      overflow: hidden;
      border-bottom: 1px solid var(--color-main-23);
      -webkit-transition: max-height 0.3s linear;
      -moz-transition: max-height 0.3s linear;
      transition: max-height 0.3s linear;
  }
  .accordion-content > * {
      position: relative;
      padding: 1.2em 3em;
      margin: 0;
      -webkit-transform: scale(0);
      -moz-transform: scale(0);
      -ms-transform: scale(0);
      -o-transform: scale(0);
      transform: scale(0);
      opacity: 0;
      -webkit-transition: all 0.55s ease;
      -moz-transition: all 0.55s ease;
      transition: all 0.55s ease;
  }
  .accordion-caret {
      position: absolute;
      transform: translate(-6px, 0);
      margin: 0;
      top: 1rem;
      right: 1rem;
  }
  .accordion-caret::before, .accordion-caret::after {
      content: "";
      position: absolute;
      background-color: var(--color-main-241);
      width: 3px;
      height: 9px;
      transition: all 0.25s ease-in-out;
  }
  input.accordion-checkbox:not(:checked) ~ .accordion-caret::before, input.accordion-checkbox:not(:checked) ~ .accordion-title .accordion-caret::before {
      transform: translate(2px, 0) rotate(45deg);
  }
  input.accordion-checkbox:not(:checked) ~ .accordion-caret::after, input.accordion-checkbox:not(:checked) ~ .accordion-title .accordion-caret::after {
      transform: translate(-2px, 0) rotate(-45deg);
  }
  .accordion-caret::before {
      transform: translate(-2px, 0) rotate(45deg);
  }
  .accordion-caret::after {
      transform: translate(2px, 0) rotate(-45deg);
  }
  input.accordion-checkbox {
      display: none;
  }
  input.accordion-checkbox:checked + .accordion-title {
      background: var(--color-main-242);
  }
  input.accordion-checkbox:not(:checked) + .accordion-title {
      display: block !important;
  }
  input.accordion-checkbox:checked + .accordion-title + .accordion-content {
      display: block !important;
      max-height: 555px;
      overflow-y: auto;
  }
  input.accordion-checkbox:checked + .accordion-title + .accordion-content > * {
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      -o-transform: scale(1);
      transform: scale(1);
      opacity: 1;
  }
  
  
  /* -------------------------------------------------------------------------- */
  /*                              Css Only collapse                             */
  /* -------------------------------------------------------------------------- */
  /* REQ: No javascript solution for collapse */
  @media (max-width: 767px) {
      input.cssonly_collapse_toggler, input.cssonly_collapse_toggler.cssonly_collapse_toggler_767 ~ .collapse, input.cssonly_collapse_toggler.cssonly_collapse_toggler_480 ~ .collapse {
          display: none !important;
      }
  }
  
  input.cssonly_collapse_toggler ~ * .collapse, input.cssonly_collapse_toggler ~ * .collapse, input.cssonly_collapse_toggler:checked ~ .footer-section {
      display: none !important;
  }
  
  input.cssonly_collapse_toggler:checked ~ #page_container {
      max-height: calc(100vh - 97px);
      overflow: hidden;
  }
  
  label.cssonly_collapse_toggler {
      width: 100%;
      height: 100%;
      display: inline-block;
  }
  
  input.cssonly_collapse_toggler:checked ~ .collapse, input.cssonly_collapse_toggler:checked ~ * .collapse {
      display: initial !important;
      top: 0px !important;
      margin: 0;
  }
  
  input.cssonly_collapse_toggler:checked ~ .navbar-nav .collapse {
      position: fixed !important;
  }
  
  @media (max-width: 767px) and (min-width: 1170px) {
      .navbar-expand-md .navbar-nav .nav-link > span {
          display: none !important;
      }
  }
  
  
  
  /* -------------------------------------------------------------------------- */
  /*                              Bootstrap Cursors Plugins                            */
  /* -------------------------------------------------------------------------- */
  .cursor-pointer {
      cursor: pointer;
  }
  .cursor-default {
      cursor: default;
  }
  
  
  /* -------------------------------------------------------------------------- */
  /*                       Css Only Dismissable Modal Box                       */
  /* -------------------------------------------------------------------------- */
  .cssonlymodal {
      overflow: visible;
      padding: 0 !important;
      margin: 0 !important;
      border: none !important;
      width: 0;
      /* width: calc(100% - 30px); */
      display: block;
      /* text-align: center; */
      background: transparent;
      z-index: 99999999999999999999999999;
      position: fixed !important;
      top: 0;
      left: 0;
  }
  
  .cssonlymodal .modal {
      display: block;
  }
  
  .cssonlymodal .modal .modal-dialog {
      -webkit-transform: none;
      transform: none;
      top: 48%;
      transform: translateY(-50%);
      /* padding: 1px; */
      background-position: 2%;
      /* border: 2px solid var(--color-main-136); */
      /* background-color: var(--color-main-243); */
      background-color: transparent;
      border-radius: 0.5rem;
      box-shadow: 0 5px 90px var(--color-main-33);
  }
  
  @media (max-width: 767px) {
      .cssonlymodal .modal .modal-dialog {
          top: 50%;
          max-width: 100vw;
          margin: auto;
      }
  }
  @media (min-width: 576px) {
      .cssonlymodal .modal .modal-dialog {
          max-width: 576px;
      }
  }
  
  .modal-content {
      border: none;
      border-radius: inherit;
      background-color: var(--color-main-244);
  }
  
  .cssonlymodal input.cssonlymodal-input[type="checkbox"] {
      display: none !important;
  }
  
  .cssonlymodal input.cssonlymodal-input:checked ~ *, .cssonlymodal input.cssonlymodal-input:checked {
      display: none;
  }
  
  .modal-header {
      padding: 1rem 1.5rem;
  }
  
  .modal-header .close {
      margin: -1rem -1.25rem -1rem auto;
  }
  
  .modal-footer {
      background-color: var(--color-main-19);
      border-top: 1px solid var(--color-main-7);
      -webkit-border-radius: 0 0 6px 6px;
      -moz-border-radius: 0 0 6px 6px;
      border-radius: 0 0 6px 6px;
      -webkit-box-shadow: inset 0 1px 0 var(--color-main-1);
      -moz-box-shadow: inset 0 1px 0 var(--color-main-1);
      box-shadow: inset 0 1px 0 var(--color-main-1);
  }
  
  .modal-footer .btn {
      padding: .275rem .75rem;
  }
  
  .modal-backdrop {
      background-color: var(--color-main-37);
  }
  
  
  /* -------------------------------------------------------------------------- */
  /*                         Css Only Dismissable Alert                         */
  /* -------------------------------------------------------------------------- */
  .cssonlyalert {
      overflow: visible;
      padding: 0 !important;
      margin: 0 !important;
      /* border: none !important; */
      width: 100%;
      min-width: 350px;
      /* width: calc(100% - 30px); */
      display: block;
      text-align: center;
      background: transparent;
      z-index: 99999999999999999999999999;
      position: fixed !important;
      top: 0;
      left: 0;
  }
  
  .cssonlyalert.centered {
      width: auto;
      width: 489px;
      max-width: 100vw;
      top: 0;
      transform: translateX(-50%);
      left: 50%;
      right: unset;
      position: fixed;
      margin-top: 200px !important;
      margin-right: auto;
      margin-bottom: 0;
      padding: 5px;
      z-index: 1100;
      text-align: center;
      display: inline;
      /* border: 1px solid var(--color-main-136); */
      background-color: var(--color-main-243);
      border-radius: 5px;
      /* box-shadow: 0 5px 90px var(--color-main-33); */
  }
  
  @media (max-width: 576px) {
      .cssonlyalert {
          min-width: 90% !important;
      }
  }
  
  .cssonlyalert input[type="checkbox"] {
      display: none !important;
  }
  
  .cssonlyalert .alert {
      text-align: left;
      display: inline-block;
      width: auto;
      width: 100%;
      border-radius: 0;
      box-shadow: 0 -1.5rem 1.5rem var(--color-main-245);
  }
  
  .cssonlyalert input:checked + *, .cssonlyalert input:checked {
      display: none;
  }
  
  /* ------------------------ Bootstrap 3 Media Queries ----------------------- */
  /*==========  Mobile First Method  ==========*/
  /* Custom, iPhone Retina */
  /* Extra Small Devices, Phones */
  /* Small Devices, Tablets */
  /* Medium Devices, Desktops */
  /* Large Devices, Wide Screens */
  /*==========  Non-Mobile First Method  ==========*/
  /* Large Devices, Wide Screens */
  /* Medium Devices, Desktops */
  /* Small Devices, Tablets */
  /* Extra Small Devices, Phones */
  /* Custom, iPhone Retina */
  /* ---------------------- Bootstrap 2.3.2 Media Queries --------------------- */
  /* default styles here for older browsers. 
     I tend to go for a 600px - 960px width max but using percentages
  */
  @media only screen and (min-width: 960px) {
      /* styles for browsers larger than 960px; */
  }
  
  @media only screen and (min-width: 1440px) {
      /* styles for browsers larger than 1440px; */
  }
  
  @media only screen and (min-width: 2000px) {
      /* for sumo sized (mac) screens */
  }
  
  @media only screen and (max-device-width: 480px) {
      /* styles for mobile browsers smaller than 480px; (iPhone) */
  }
  
  @media only screen and (device-width: 768px) {
      /* default iPad screens */
  }
  
  /* different techniques for iPad screening */
  @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: portrait) {
      /* For portrait layouts only */
  }
  
  @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: landscape) {
      /* For landscape layouts only */
  }
  
  /*******Nuevos mensajes de error******/
  .new-message-box {
      /* margin: 15px 0; */
      margin: 0;
      padding-left: 20px;
      margin-bottom: 25px !important;
  }
  
  .new-message-box p {
      width: calc(100% - 30px);
      /* font-size: 1.15em; */
      /* font-weight: 600; */
  }
  
  .info-tab {
      width: 40px;
      height: 40px;
      display: inline-block;
      position: relative;
      top: 8px;
  }
  
  .info-tab {
      float: left;
      margin-left: -23px;
  }
  
  .info-tab i::before {
      width: 24px;
      height: 24px;
      box-shadow: inset 12px 0 13px var(--color-main-37);
  }
  
  .info-tab i::after {
      width: 0;
      height: 0;
      border: 12px solid transparent;
      border-bottom-color: var(--color-main-1);
      border-left-color: var(--color-main-1);
      bottom: -18px;
  }
  
  .info-tab i::before, .info-tab i::after {
      content: "";
      display: inline-block;
      position: absolute;
      left: 0;
      bottom: -17px;
      transform: rotateX(60deg);
  }
  
  .note-box, .warning-box, .tip-box-success, .tip-box-danger, .tip-box-warning, .tip-box-info, .tip-box-alert {
      padding: 12px 8px 3px 26px;
  }
  
  /***Success****/
  .new-message-box-success {
      /* background: var(--color-main-23); */
      /* padding: 3px; */
      padding: 0;
      /* margin: 10px 0; */
  }
  
  .tip-icon-success {
      background: var(--color-main-246);
  }
  
  .tip-box-success {
      color: var(--color-main-247);
      background: var(--color-main-248);
  }
  
  .tip-icon-success::before {
      font-size: 25px;
      content: "";
      top: 8px;
      left: 11px;
      font-family: "Font Awesome 6 Free";
      position: absolute;
      color: var(--color-main-1);
  }
  
  .tip-icon-success i::before {
      background: var(--color-main-246);
  }
  
  /*******Danger*******/
  .new-message-box-danger {
      background: var(--color-main-23);
      padding: 3px;
      margin: 10px 0;
  }
  
  .tip-icon-danger {
      background: var(--color-main-249);
  }
  
  .tip-box-danger {
      color: var(--color-main-250);
      background: var(--color-main-251);
  }
  
  .tip-icon-danger::before {
      font-size: 25px;
      content: "";
      top: 8px;
      left: 11px;
      font-family: "Font Awesome 6 Free";
      position: absolute;
      color: var(--color-main-1);
  }
  
  .tip-icon-danger i::before {
      background: var(--color-main-249);
  }
  
  /*******warning*******/
  .new-message-box-warning {
      background: var(--color-main-23);
      padding: 3px;
      margin: 10px 0;
  }
  
  .tip-icon-warning {
      background: var(--color-main-252);
  }
  
  .tip-box-warning {
      color: var(--color-main-253);
      background: var(--color-main-254);
  }
  
  .tip-icon-warning::before {
      font-size: 25px;
      content: "";
      top: 8px;
      left: 11px;
      font-family: "Font Awesome 6 Free";
      position: absolute;
      color: var(--color-main-253);
  }
  
  .tip-icon-warning i::before {
      background: var(--color-main-252);
  }
  
  /*******info*******/
  .new-message-box-info {
      background: var(--color-main-23);
      padding: 3px;
      margin: 10px 0;
  }
  
  .tip-box-info {
      color: var(--color-main-255);
      background: var(--color-main-256);
  }
  
  .tip-icon-info {
      background: var(--color-main-257);
  }
  
  .tip-icon-info::before {
      font-size: 25px;
      content: "";
      top: 8px;
      left: 11px;
      font-family: "Font Awesome 6 Free";
      position: absolute;
      color: var(--color-main-1);
  }
  
  .tip-icon-info i::before {
      background: var(--color-main-257);
  }
  
  /*******info*******/
  .new-message-box-alert {
      background: var(--color-main-258);
      padding: 3px;
      margin: 10px 0;
  }
  
  .tip-box-alert {
      color: var(--color-main-253);
      background: var(--color-main-259);
  }
  
  .tip-icon-alert {
      background: var(--color-main-258);
  }
  
  .tip-icon-alert::before {
      font-size: 25px;
      content: "";
      top: 8px;
      left: 11px;
      font-family: "Font Awesome 6 Free";
      position: absolute;
      color: var(--color-main-1);
  }
  
  .tip-icon-alert i::before {
      background: var(--color-main-258);
  }
  
  .utf8_list_style_hand_pointer {
      list-style-type: "👉 ";
  }
  
  
  /* -------------------------------------------------------------------------- */
  /*                              Css Vertical Tree                             */
  /* -------------------------------------------------------------------------- */
  .vertical-tree li {
      margin: 0px 0;
      list-style-type: none;
      position: relative;
      padding: 20px 5px 0px 5px;
  }
  
  .vertical-tree li a {
      display: inline-block;
      padding: 8px 30px;
      text-decoration: none;
      background-color: var(--color-main-260);
      color: var(--color-main-39);
      border: 1px solid var(--color-main-261);
      font-size: 13px;
      border-radius: 4px;
  }
  
  .vertical-tree > ul > li::before, .vertical-tree > ul > li::after {
      border: 0;
  }
  
  .vertical-tree li::before {
      content: '';
      position: absolute;
      top: 0;
      width: 1px;
      height: 100%;
      right: auto;
      left: -20px;
      border-left: 2px solid ​var(--color-main-234);
      bottom: 50px;
  }
  
  .vertical-tree li::after {
      content: '';
      position: absolute;
      top: 34px;
      width: 25px;
      height: 20px;
      right: auto;
      left: -20px;
      border-top: 2px solid ​var(--color-main-234);
  }
  
  
  
  /* -------------------------------------------------------------------------- */
  /*               Star Rating System using variables  (READONLY)               */
  /* -------------------------------------------------------------------------- */
  
  .rating-star {
      --percent: calc(var(--rating) / 5 * 100%);
      display: inline-block;
      font-family: Times;
      font-size: 1.5rem;
      /* font: normal 900 1.5rem/1 "Font Awesome 6 Free"; */
      line-height: 1;
      letter-spacing: 1px;
  }
  .rating-star::before {
      content: "⭐⭐⭐⭐⭐";
      background: linear-gradient(90deg, var(--color-main-262) var(--percent), var(--color-main-7) var(--percent));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
  }
  .darkmode .rating-star::before {
    color: var(--color-main-28);
  }
  .rating-text {
      font-size: 1rem;
      font-weight: normal !important;
      font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  }
  
  .single-half-star-icon::before {
      content: '⭐';
      content: '☆';
      font-style: normal;
      font-size: 2.5rem;
  }
  .single-full-star-icon::before {
      content: '⭐';
      content: '☆';
      font-style: normal;
      font-size: 2.5rem;
  }
  
  /*  
   *  Pure CSS star rating that works without reversing order
   *  of inputs
   *  -------------------------------------------------------
   *  NOTE: For the styling to work, there needs to be a radio
   *        input selected by default. There also needs to be a
   *        radio input before the first star, regardless of
   *        whether you offer a 'no rating' or 0 stars option
   *  
   *  This codepen uses FontAwesome icons
   */
  .half-stars-review-input-system {
      /* use display:inline-flex to prevent whitespace issues. alternatively, you can put all the children of .rating-group on a single line */
      /* make hover effect work properly in IE */
      /* hide radio inputs */
      /* set icon padding and size */
      /* add padding and positioning to half star labels */
      /* set default star color */
      /* set color of none icon when unchecked */
      /* if none icon is checked, make it ​var(--color-main-34) */
      /* if any input is checked, make its following siblings grey */
      /* make all stars orange on rating group hover */
      /* make hove​var(--color-main-34) input's following siblings grey on hover */
      /* make none icon grey on rating group hover */
      /* make none icon ​var(--color-main-34) on hover */
  }
  .half-stars-review-input-system .rating-group {
      display: inline-flex;
  }
  .half-stars-review-input-system .rating__icon {
      pointer-events: none;
  }
  .half-stars-review-input-system .rating__input {
      position: absolute !important;
      left: -9999px !important;
  }
  .half-stars-review-input-system .rating__label {
      display: block !important;
      height: 44px;
      height: 35px;
      line-height: 100%;
      margin: 0;
      cursor: pointer;
      /* if you change the left/right padding, update the margin-right property of .rating__label--half as well. */
      padding: 0 0.1em;
      font-size: 2rem;
  }
  .half-stars-review-input-system .rating__label--half {
      display: block !important;
      padding: 0;
      /* margin-right: -0.6em; */
      z-index: 2;
  }
  .half-stars-review-input-system .rating__label:not(.rating__label--half) {
      width: 36px;
      position: relative;
      z-index: 3;
      padding: 0 !important;
      background: var(--color-main-1);
      left: -17px;
  }
  .half-stars-review-input-system .rating__icon--star {
      color: var(--color-main-54);
  }
  .half-stars-review-input-system .rating__icon--none {
      color: var(--color-main-23);
  }
  .half-stars-review-input-system .rating__input--none:checked + .rating__label .rating__icon--none {
      color: var(--color-main-34);
  }
  .half-stars-review-input-system .rating__input:checked ~ .rating__label .rating__icon--star {
      color: var(--color-main-7);
  }
  .half-stars-review-input-system .rating-group:hover .rating__label .rating__icon--star,
  .half-stars-review-input-system .rating-group:hover .rating__label--half .rating__icon--star {
      color: var(--color-main-54);
  }
  .half-stars-review-input-system .rating__input:hover ~ .rating__label .rating__icon--star,
  .half-stars-review-input-system .rating__input:hover ~ .rating__label--half .rating__icon--star {
      color: var(--color-main-7);
  }
  .half-stars-review-input-system .rating-group:hover .rating__input--none:not(:hover) + .rating__label .rating__icon--none {
      color: var(--color-main-23);
  }
  .half-stars-review-input-system .rating__input--none:hover + .rating__label .rating__icon--none {
      color: var(--color-main-34);
  }
  .rating__icon.rating__icon--star.single-full-star-icon {
      position: absolute;
      /* left: -15px; */
      /* width: 20px; */
      /* z-index: 2; */
      /* overflow: hidden; */
      width: 100%;
      display: block;
      height: 100%;
      left: -23px;
  }
  .rating__icon.rating__icon--star.single-full-star-icon:before {
      position: absolute;
      /* text-indent: -17px; */
      /* -webkit-clip-path: inset(0 0 0 50%); */
      clip-path: inset(0 0 0 50%);
  }
  .half-stars-review-input-system .rating-numeral {
      display: none !important;
  }
  .half-stars-review-input-system [id*=rating-00]:checked ~ .rating-numeral.rating-numeral-00 {
      display: block !important;
  }
  .half-stars-review-input-system [id*=rating-05]:checked ~ .rating-numeral.rating-numeral-05 {
      display: block !important;
  }
  .half-stars-review-input-system [id*=rating-10]:checked ~ .rating-numeral.rating-numeral-10 {
      display: block !important;
  }
  .half-stars-review-input-system [id*=rating-15]:checked ~ .rating-numeral.rating-numeral-15 {
      display: block !important;
  }
  .half-stars-review-input-system [id*=rating-20]:checked ~ .rating-numeral.rating-numeral-20 {
      display: block !important;
  }
  .half-stars-review-input-system [id*=rating-25]:checked ~ .rating-numeral.rating-numeral-25 {
      display: block !important;
  }
  .half-stars-review-input-system [id*=rating-30]:checked ~ .rating-numeral.rating-numeral-30 {
      display: block !important;
  }
  .half-stars-review-input-system [id*=rating-35]:checked ~ .rating-numeral.rating-numeral-35 {
      display: block !important;
  }
  .half-stars-review-input-system [id*=rating-40]:checked ~ .rating-numeral.rating-numeral-40 {
      display: block !important;
  }
  .half-stars-review-input-system [id*=rating-45]:checked ~ .rating-numeral.rating-numeral-45 {
      display: block !important;
  }
  .half-stars-review-input-system [id*=rating-50]:checked ~ .rating-numeral.rating-numeral-50 {
      display: block !important;
  }
  
  
  /* -------------------------------------------------------------------------- */
  /*                                Level System                                */
  /* -------------------------------------------------------------------------- */
  .trustlevel-1, .vendorlevel-1 {
      background: var(--color-main-263) !important;
      background: var(--color-main-264) !important;
      color: var(--color-main-39) !Important;
  } 
  .trustlevel-2, .vendorlevel-2 {
      background: var(--color-main-265) !important;
      background: var(--color-main-266) !important;
      color: var(--color-main-39) !Important;
  } 
  .trustlevel-3, .vendorlevel-3 {
      background: var(--color-main-267) !important;
      background: var(--color-main-268) !important;
      background: var(--color-main-269) !important;
      background: var(--color-main-270) !important;
      color: var(--color-main-1) !important;
  } 
  .trustlevel-4, .vendorlevel-4 {
      background: var(--color-main-271) !important;
      background: var(--color-main-272) !important;
      color: var(--color-main-1) !important;
  } 
  .trustlevel-5, .vendorlevel-5 {
      background: var(--color-main-273) !important;
      background: var(--color-main-274) !important;
      color: var(--color-main-1) !important;
  }
  
  
  /* -------------------------------------------------------------------------- */
  /*                            Product Listing Cards                           */
  /* -------------------------------------------------------------------------- */
  .product-card {
      min-width: 300px;
      max-width: 330px;
      position: relative;
      margin: 0;
      padding: 0;
  }
  
  .product-card > div {
      background: var(--color-main-209);
      background: var(--color-main-1);
      background: var(--color-main-36);
  }
  @media (max-width: 767px) {
      .product-card > div {
          /* border: 1px solid var(--color-main-7); */
      }
  }
  
  
  
  .product-card > div:hover {
      /* box-shadow: 0 2px 7px var(--color-main-275); */
      /* -webkit-transition: all .3s ease-in-out;
      transition: all .3s ease-in-out;
      -webkit-box-shadow: 0 0 20px var(--color-main-194);
      box-shadow: 0 0 20px var(--color-main-194); */
  }
  
  .product-card .hot-badge, .product-card .new-badge, .product-card .outofstock-badge, .product-similar {
      border: 1px solid var(--color-main-195) !important;
      /* border-top-left-radius: inherit;
      border-bottom-right-radius: 12px; */
      text-transform: uppercase;
      font-size: 13px;
      /* font-weight: 700; */
      /* background: var(--color-main-34); */
      color: var(--color-main-1);
      padding: 1px 10px;
  }
  
  .product-card .new-badge {
      /* background-color: var(--color-main-276); */
      background: lightgoldenrodyellow;
      /* color: var(--color-main-276); */
      color: var(--color-main-39);
      text-transform: capitalize;
      border-radius: inherit;
      /* border: none !important; */
  }
  
  .product-card .outofstock-badge {
      background-color: var(--color-main-277);
  }
  
  .product-card .product-similar {
      /* display: inline-block;
      border: none !important;
      border-radius: 0;
      border-top-right-radius: 12px !important;
      border-bottom-left-radius: inherit !important; */
      /* font-size: 12px; */
      font-size: 14px;
      /* font-weight: 700; */
      font-weight: 500;
      font-weight: normal;
      text-transform: uppercase;
      text-transform: capitalize;
      /* color: var(--color-main-15); */
      color: var(--color-main-33);
      color: var(--color-main-64);
      /* background: transparent; */
  }
  
  .product-card .product-tumb {
      display: flex;
      align-items: center;
      justify-content: center;
      /* height: 190px; */
      /* height: 120px; */
      max-height: 310px;
      width: 100%;
      overflow: hidden;
      border-top-left-radius: inherit;
      border-top-right-radius: inherit;
      background: var(--color-main-117);
  }
  
  .product-card .product-tumb > a > img {
      width: 140px;
      width: 100%;
  }
  
  .product-card .product-tumb > a > img:hover {
      /* transform: scale(1.5); */
      transform: scale(1.1);
  }
  
  .product-card .product-tumb img {
      max-width: 100%;
      max-height: 100%;
  }
  .product-card .product-tumb:hover img {
      position: relative;
      z-index: 1;
  }
  
  .product-card .product-details {
      padding: 30px;
      /* padding: 20px 25px; */
      padding: 10px 20px 15px;
      background: var(--color-main-278);
  }
  
  .product-card .reviews {
      display: block;
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      color: var(--color-main-234) !important;
      margin-bottom: 12px;
  }
  
  .product-card .product-details h4 a {
      font-weight: bold;
      display: block;
      margin-bottom: 18px;
      margin-bottom: 10px;
      text-align: center;
      text-transform: uppercase;
      color: var(--color-main-154);
      text-decoration: none;
      /* transition: 0.3s; */
  }
  
  .product-card .product-details h4 a:hover {
      text-decoration: underline !important;
      color: var(--color-main-64);
  }
  
  .product-card .product-details p {
      font-size: 15px;
      line-height: 22px;
      margin-bottom: 18px;
      text-align: left;
      color: var(--color-main-31);
      word-wrap: break-word;
  }
  
  .product-card .product-bottom-details {
      overflow: hidden;
      /* border-top: 1px solid var(--color-main-23); */
      padding-top: 20px;
      padding-top: 12px;
  }
  
  .product-card .product-price {
      /* font-size: 18px;
      font-weight: 600; */
      font-size: 1rem;
      font-weight: normal;
      color: var(--color-main-64);
      color: var(--color-main-141);
      /* font-size: 1.5em; */
      /* color: var(--color-main-279); */
      color: sea​​var(--color-main-145);
      color: var(--color-main-61);
      font-weight: bold;
      font-weight: 500;
  }
  
  .product-card .product-bottom-details div {
      float: left;
      width: 50%;
      text-align: center;
      /* justify-content: space-between; */
      justify-content: center;
      font-weight: 600;
      color: var(--color-main-144);
  }
  
  .product-card .product-bottom-details div div {
      border-color: var(--color-main-61) !important;
      border-color: var(--color-main-280) !important;
  }
  
  .product-card .product-price small {
      font-size: 80%;
      font-weight: 600;
      /* text-decoration: line-through; */
      display: inline-block;
      margin-right: 5px;
  }
  
  .product-card .product-links a {
      display: inline-block;
      margin-left: 5px;
      color: var(--color-main-281);
      transition: 0.3s;
      font-size: 17px;
      margin: auto 8px;
      color: var(--color-main-154);
  }
  
  .product-card .product-links a:hover, .product-card .product-links button:hover {
      opacity: .6;
  }
  .product-deactivated:after, .product-blacklisted:after {
      background: var(--color-main-282);
      background: var(--color-main-283);
      color: var(--color-main-1);
      box-shadow: 0 -0.95rem 7.25rem var(--color-main-284);
      box-shadow: 0 0.05rem 0.25rem var(--color-main-284);
  }
  .product-blacklisted:after {
      background: var(--color-main-285);
  }
  
  
  
  /* -------------------------------------------------------------------------- */
  /*                      Product Mini-listing Horizontally                     */
  /* -------------------------------------------------------------------------- */
  .itemside {
      position: relative;
      display: flex;
      width: 100%;
  }
  .itemside .info {
      padding-left: 0.75rem;
      flex-grow: 1;
  }
  .itemside .aside {
      position: relative;
      flex-shrink: 0;
  }
  
  
  
  /* -------------------------------------------------------------------------- */
  /*                                Progress Bar                                */
  /* -------------------------------------------------------------------------- */
  
  /*! CSS Used from: https://sandbox.nowpayments.io/css/page-payment.css?v=f7476ad50a3616802de1752669aede6b */
  
  .transaction-status-item__title br {
      display: none;
  }
  .transaction-status-item__text span {
      color: var(--color-main-286);
  }
  .transaction-status-item {
      position: relative;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: start;
      justify-content: flex-start;
      -ms-flex-align: start;
      align-items: flex-start;
  }
  .transaction-status-item:before {
      content: "";
      width: 1px;
      height: calc(100% - 2px);
      background-color: var(--color-main-287);
      position: absolute;
      top: 23px;
      left: 7.5px;
      z-index: 1;
      opacity: 0.5;
  }
  .transaction-status-item:last-child:before, .transaction-status-item_finished:last-child .transaction-status-item__title
      br {
      display: none;
  }
  .transaction-status-item__progress {
      width: 16px;
      height: 16px;
      -ms-flex-negative: 0;
      flex-shrink: 0;
      margin-top: 4px;
  }
  .transaction-status-item__progress-circle {
      width: 16px;
      height: 16px;
      border: 1px solid var(--color-main-288);
      border-radius: 50%;
  }
  .transaction-status-item__content {
      margin-left: 12px;
  }
  .transaction-status-item__title {
      font-weight: 400;
      font-size: 18px;
      line-height: 22px;
      color: var(--color-main-289);
  }
  .transaction-status-item__spinner {
      position: relative;
      width: 16px;
      height: 16px;
      border: 2px solid var(--color-main-286);
      border-right-color: var(--color-main-290);
      border-radius: 50%;
      -webkit-animation: transaction-status-spinner-animation 0.75s linear infinite;
      animation: transaction-status-spinner-animation 0.75s linear infinite;
  }
  .transaction-status-item_loading .transaction-status-item__title {
      color: var(--color-main-286);
  }
  .transaction-status-item__text {
      font-weight: 400;
      font-size: 13px;
      line-height: 18px;
      color: var(--color-main-289);
      margin-top: 4px;
  }
  .transaction-status-item_success:before {
      background-color: var(--color-main-286);
  }
  .transaction-status-item_success .transaction-status-item__title {
      color: var(--color-main-291);
  }
  .transaction-status-item_finished .transaction-status-item__title {
      color: var(--color-main-292);
  }
  @media screen and (min-width: 1024px) {
      .transaction-status-item {
          -ms-flex-direction: column;
          flex-direction: column;
          -ms-flex-align: center;
          align-items: center;
          text-align: center;
          width: 20%;
          margin-top: 0;
      }
      .transaction-status-item:before {
          width: 70%;
          height: 1px;
          top: 7.5px;
          left: 65%;
      }
      .transaction-status-item__progress {
          margin-top: 0;
      }
      .transaction-status-item__content {
          margin-left: 0;
          margin-top: 15px;
      }
      .transaction-status-item__title {
          font-size: 16px;
      }
      .transaction-status-item__title br {
          display: block;
      }
      .transaction-status-item__text {
          text-align: center;
      }
  }
  @media screen and (min-width: 1200px) {
      .transaction-status-item__title {
          font-size: 18px;
      }
  }
  .transaction-status__item {
      margin-top: 21px;
  }
  .transaction-status__item:first-child {
      margin-top: 0;
  }
  @media screen and (min-width: 1024px) {
      .transaction-status {
          display: -ms-flexbox;
          display: flex;
          -ms-flex-pack: start;
          justify-content: flex-start;
          -ms-flex-align: start;
          align-items: flex-start;
      }
      .transaction-status__item {
          margin-top: 0;
      }
  }
  .payment-info-step__section-status {
      padding: 40px 15px 0;
      background-color: var(--color-main-236);
  }
  .payment-info-step__panel-help {
      margin-top: 20px;
  }
  .payment-info-step__form-mobile {
      display: none;
  }
  @media screen and (min-width: 1024px) {
      .payment-info-step__section-status {
          padding-top: 30px;
          border-radius: 0 0 8px 8px;
          padding-left: 25px;
          padding-right: 25px;
      }
      .payment-info-step__form-mobile {
          display: none;
      }
      .payment-info-step__panel-help {
          padding-left: 16px;
          padding-right: 16px;
      }
  }
  /*! CSS Used keyframes */
  @-webkit-keyframes transaction-status-spinner-animation {
      0% {
          -webkit-transform: rotate(0);
          transform: rotate(0);
      }
          to {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
      }
  }
  @keyframes transaction-status-spinner-animation {
      0% {
          -webkit-transform: rotate(0);
          transform: rotate(0);
      }
          to {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
      }
  }
  
  
  
  
  .chart-css-bg-btc, .chart-css-bg-bitcoin {
      background: var(--color-main-293) !important;
  }
  .chart-css-bg-usdt_tron, .chart-css-bg-tether {
      background: var(--color-main-294) !important;
  }
  .chart-css-bg-xmr, .chart-css-bg-monero {
      background: var(--color-main-295) !important;
  }
  .chart-css-bg-btc {
      background: var(--color-main-293);
  }
  .chart-css-bg-btc {
      background: var(--color-main-293);
  }