.donut--1:before {
  animation: rota1-1 .8s forwards
}
@keyframes rota1-1 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(3.6deg)
  }
}
.donut--2:before {
  animation: rota1-2 .8s forwards
}
@keyframes rota1-2 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(7.2deg)
  }
}
.donut--3:before {
  animation: rota1-3 .8s forwards
}
@keyframes rota1-3 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(10.8deg)
  }
}
.donut--4:before {
  animation: rota1-4 .8s forwards
}
@keyframes rota1-4 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(14.4deg)
  }
}
.donut--5:before {
  animation: rota1-5 .8s forwards
}
@keyframes rota1-5 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(18deg)
  }
}
.donut--6:before {
  animation: rota1-6 .8s forwards
}
@keyframes rota1-6 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(21.6deg)
  }
}
.donut--7:before {
  animation: rota1-7 .8s forwards
}
@keyframes rota1-7 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(25.2deg)
  }
}
.donut--8:before {
  animation: rota1-8 .8s forwards
}
@keyframes rota1-8 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(28.8deg)
  }
}
.donut--9:before {
  animation: rota1-9 .8s forwards
}
@keyframes rota1-9 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(32.4deg)
  }
}
.donut--10:before {
  animation: rota1-10 .8s forwards
}
@keyframes rota1-10 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(36deg)
  }
}
.donut--11:before {
  animation: rota1-11 .8s forwards
}
@keyframes rota1-11 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(39.6deg)
  }
}
.donut--12:before {
  animation: rota1-12 .8s forwards
}
@keyframes rota1-12 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(43.2deg)
  }
}
.donut--13:before {
  animation: rota1-13 .8s forwards
}
@keyframes rota1-13 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(46.8deg)
  }
}
.donut--14:before {
  animation: rota1-14 .8s forwards
}
@keyframes rota1-14 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(50.4deg)
  }
}
.donut--15:before {
  animation: rota1-15 .8s forwards
}
@keyframes rota1-15 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(54deg)
  }
}
.donut--16:before {
  animation: rota1-16 .8s forwards
}
@keyframes rota1-16 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(57.6deg)
  }
}
.donut--17:before {
  animation: rota1-17 .8s forwards
}
@keyframes rota1-17 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(61.2deg)
  }
}
.donut--18:before {
  animation: rota1-18 .8s forwards
}
@keyframes rota1-18 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(64.8deg)
  }
}
.donut--19:before {
  animation: rota1-19 .8s forwards
}
@keyframes rota1-19 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(68.4deg)
  }
}
.donut--20:before {
  animation: rota1-20 .8s forwards
}
@keyframes rota1-20 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(72deg)
  }
}
.donut--21:before {
  animation: rota1-21 .8s forwards
}
@keyframes rota1-21 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(75.6deg)
  }
}
.donut--22:before {
  animation: rota1-22 .8s forwards
}
@keyframes rota1-22 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(79.2deg)
  }
}
.donut--23:before {
  animation: rota1-23 .8s forwards
}
@keyframes rota1-23 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(82.8deg)
  }
}
.donut--24:before {
  animation: rota1-24 .8s forwards
}
@keyframes rota1-24 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(86.4deg)
  }
}
.donut--25:before {
  animation: rota1-25 .8s forwards
}
@keyframes rota1-25 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(90deg)
  }
}
.donut--26:before {
  animation: rota1-26 .8s forwards
}
@keyframes rota1-26 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(93.6deg)
  }
}
.donut--27:before {
  animation: rota1-27 .8s forwards
}
@keyframes rota1-27 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(97.2deg)
  }
}
.donut--28:before {
  animation: rota1-28 .8s forwards
}
@keyframes rota1-28 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(100.8deg)
  }
}
.donut--29:before {
  animation: rota1-29 .8s forwards
}
@keyframes rota1-29 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(104.4deg)
  }
}
.donut--30:before {
  animation: rota1-30 .8s forwards
}
@keyframes rota1-30 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(108deg)
  }
}
.donut--31:before {
  animation: rota1-31 .8s forwards
}
@keyframes rota1-31 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(111.6deg)
  }
}
.donut--32:before {
  animation: rota1-32 .8s forwards
}
@keyframes rota1-32 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(115.2deg)
  }
}
.donut--33:before {
  animation: rota1-33 .8s forwards
}
@keyframes rota1-33 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(118.8deg)
  }
}
.donut--34:before {
  animation: rota1-34 .8s forwards
}
@keyframes rota1-34 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(122.4deg)
  }
}
.donut--35:before {
  animation: rota1-35 .8s forwards
}
@keyframes rota1-35 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(126deg)
  }
}
.donut--36:before {
  animation: rota1-36 .8s forwards
}
@keyframes rota1-36 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(129.6deg)
  }
}
.donut--37:before {
  animation: rota1-37 .8s forwards
}
@keyframes rota1-37 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(133.2deg)
  }
}
.donut--38:before {
  animation: rota1-38 .8s forwards
}
@keyframes rota1-38 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(136.8deg)
  }
}
.donut--39:before {
  animation: rota1-39 .8s forwards
}
@keyframes rota1-39 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(140.4deg)
  }
}
.donut--40:before {
  animation: rota1-40 .8s forwards
}
@keyframes rota1-40 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(144deg)
  }
}
.donut--41:before {
  animation: rota1-41 .8s forwards
}
@keyframes rota1-41 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(147.6deg)
  }
}
.donut--42:before {
  animation: rota1-42 .8s forwards
}
@keyframes rota1-42 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(151.2deg)
  }
}
.donut--43:before {
  animation: rota1-43 .8s forwards
}
@keyframes rota1-43 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(154.8deg)
  }
}
.donut--44:before {
  animation: rota1-44 .8s forwards
}
@keyframes rota1-44 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(158.4deg)
  }
}
.donut--45:before {
  animation: rota1-45 .8s forwards
}
@keyframes rota1-45 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(162deg)
  }
}
.donut--46:before {
  animation: rota1-46 .8s forwards
}
@keyframes rota1-46 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(165.6deg)
  }
}
.donut--47:before {
  animation: rota1-47 .8s forwards
}
@keyframes rota1-47 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(169.2deg)
  }
}
.donut--48:before {
  animation: rota1-48 .8s forwards
}
@keyframes rota1-48 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(172.8deg)
  }
}
.donut--49:before {
  animation: rota1-49 .8s forwards
}
@keyframes rota1-49 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(176.4deg)
  }
}
.donut--50:before {
  animation: rota1-50 .8s forwards
}
.donut--50:after {
  animation: rota2-500s forwards .8s
}
@keyframes rota1-50 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(180deg)
  }
}
@keyframes rota2-50 {
  0% {
    transform: rotate(180deg);
    opacity: 1
  }
  100% {
    transform: rotate(180deg);
    opacity: 1
  }
}
.donut--51:before {
  animation: rota1-51 .8s forwards
}
.donut--51:after {
  animation: rota2-51.016s forwards .8s
}
@keyframes rota1-51 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(180deg)
  }
}
@keyframes rota2-51 {
  0% {
    transform: rotate(180deg);
    opacity: 1
  }
  100% {
    transform: rotate(183.6deg);
    opacity: 1
  }
}
.donut--52:before {
  animation: rota1-52 .8s forwards
}
.donut--52:after {
  animation: rota2-52.032s forwards .8s
}
@keyframes rota1-52 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(180deg)
  }
}
@keyframes rota2-52 {
  0% {
    transform: rotate(180deg);
    opacity: 1
  }
  100% {
    transform: rotate(187.2deg);
    opacity: 1
  }
}
.donut--53:before {
  animation: rota1-53 .8s forwards
}
.donut--53:after {
  animation: rota2-53.048s forwards .8s
}
@keyframes rota1-53 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(180deg)
  }
}
@keyframes rota2-53 {
  0% {
    transform: rotate(180deg);
    opacity: 1
  }
  100% {
    transform: rotate(190.8deg);
    opacity: 1
  }
}
.donut--54:before {
  animation: rota1-54 .8s forwards
}
.donut--54:after {
  animation: rota2-54.064s forwards .8s
}
@keyframes rota1-54 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(180deg)
  }
}
@keyframes rota2-54 {
  0% {
    transform: rotate(180deg);
    opacity: 1
  }
  100% {
    transform: rotate(194.4deg);
    opacity: 1
  }
}
.donut--55:before {
  animation: rota1-55 .8s forwards
}
.donut--55:after {
  animation: rota2-55.08s forwards .8s
}
@keyframes rota1-55 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(180deg)
  }
}
@keyframes rota2-55 {
  0% {
    transform: rotate(180deg);
    opacity: 1
  }
  100% {
    transform: rotate(198deg);
    opacity: 1
  }
}
.donut--56:before {
  animation: rota1-56 .8s forwards
}
.donut--56:after {
  animation: rota2-56.096s forwards .8s
}
@keyframes rota1-56 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(180deg)
  }
}
@keyframes rota2-56 {
  0% {
    transform: rotate(180deg);
    opacity: 1
  }
  100% {
    transform: rotate(201.6deg);
    opacity: 1
  }
}
.donut--57:before {
  animation: rota1-57 .8s forwards
}
.donut--57:after {
  animation: rota2-57.112s forwards .8s
}
@keyframes rota1-57 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(180deg)
  }
}
@keyframes rota2-57 {
  0% {
    transform: rotate(180deg);
    opacity: 1
  }
  100% {
    transform: rotate(205.2deg);
    opacity: 1
  }
}
.donut--58:before {
  animation: rota1-58 .8s forwards
}
.donut--58:after {
  animation: rota2-58.128s forwards .8s
}
@keyframes rota1-58 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(180deg)
  }
}
@keyframes rota2-58 {
  0% {
    transform: rotate(180deg);
    opacity: 1
  }
  100% {
    transform: rotate(208.8deg);
    opacity: 1
  }
}
.donut--59:before {
  animation: rota1-59 .8s forwards
}
.donut--59:after {
  animation: rota2-59.144s forwards .8s
}
@keyframes rota1-59 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(180deg)
  }
}
@keyframes rota2-59 {
  0% {
    transform: rotate(180deg);
    opacity: 1
  }
  100% {
    transform: rotate(212.4deg);
    opacity: 1
  }
}
.donut--60:before {
  animation: rota1-60 .8s forwards
}
.donut--60:after {
  animation: rota2-60.16s forwards .8s
}
@keyframes rota1-60 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(180deg)
  }
}
@keyframes rota2-60 {
  0% {
    transform: rotate(180deg);
    opacity: 1
  }
  100% {
    transform: rotate(216deg);
    opacity: 1
  }
}
.donut--61:before {
  animation: rota1-61 .8s forwards
}
.donut--61:after {
  animation: rota2-61.176s forwards .8s
}
@keyframes rota1-61 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(180deg)
  }
}
@keyframes rota2-61 {
  0% {
    transform: rotate(180deg);
    opacity: 1
  }
  100% {
    transform: rotate(219.6deg);
    opacity: 1
  }
}
.donut--62:before {
  animation: rota1-62 .8s forwards
}
.donut--62:after {
  animation: rota2-62.192s forwards .8s
}
@keyframes rota1-62 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(180deg)
  }
}
@keyframes rota2-62 {
  0% {
    transform: rotate(180deg);
    opacity: 1
  }
  100% {
    transform: rotate(223.2deg);
    opacity: 1
  }
}
.donut--63:before {
  animation: rota1-63 .8s forwards
}
.donut--63:after {
  animation: rota2-63.208s forwards .8s
}
@keyframes rota1-63 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(180deg)
  }
}
@keyframes rota2-63 {
  0% {
    transform: rotate(180deg);
    opacity: 1
  }
  100% {
    transform: rotate(226.8deg);
    opacity: 1
  }
}
.donut--64:before {
  animation: rota1-64 .8s forwards
}
.donut--64:after {
  animation: rota2-64.224s forwards .8s
}
@keyframes rota1-64 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(180deg)
  }
}
@keyframes rota2-64 {
  0% {
    transform: rotate(180deg);
    opacity: 1
  }
  100% {
    transform: rotate(230.4deg);
    opacity: 1
  }
}
.donut--65:before {
  animation: rota1-65 .8s forwards
}
.donut--65:after {
  animation: rota2-65.24s forwards .8s
}
@keyframes rota1-65 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(180deg)
  }
}
@keyframes rota2-65 {
  0% {
    transform: rotate(180deg);
    opacity: 1
  }
  100% {
    transform: rotate(234deg);
    opacity: 1
  }
}
.donut--66:before {
  animation: rota1-66 .8s forwards
}
.donut--66:after {
  animation: rota2-66.256s forwards .8s
}
@keyframes rota1-66 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(180deg)
  }
}
@keyframes rota2-66 {
  0% {
    transform: rotate(180deg);
    opacity: 1
  }
  100% {
    transform: rotate(237.6deg);
    opacity: 1
  }
}
.donut--67:before {
  animation: rota1-67 .8s forwards
}
.donut--67:after {
  animation: rota2-67.272s forwards .8s
}
@keyframes rota1-67 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(180deg)
  }
}
@keyframes rota2-67 {
  0% {
    transform: rotate(180deg);
    opacity: 1
  }
  100% {
    transform: rotate(241.2deg);
    opacity: 1
  }
}
.donut--68:before {
  animation: rota1-68 .8s forwards
}
.donut--68:after {
  animation: rota2-68.288s forwards .8s
}
@keyframes rota1-68 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(180deg)
  }
}
@keyframes rota2-68 {
  0% {
    transform: rotate(180deg);
    opacity: 1
  }
  100% {
    transform: rotate(244.8deg);
    opacity: 1
  }
}
.donut--69:before {
  animation: rota1-69 .8s forwards
}
.donut--69:after {
  animation: rota2-69.304s forwards .8s
}
@keyframes rota1-69 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(180deg)
  }
}
@keyframes rota2-69 {
  0% {
    transform: rotate(180deg);
    opacity: 1
  }
  100% {
    transform: rotate(248.4deg);
    opacity: 1
  }
}
.donut--70:before {
  animation: rota1-70 .8s forwards
}
.donut--70:after {
  animation: rota2-70.32s forwards .8s
}
@keyframes rota1-70 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(180deg)
  }
}
@keyframes rota2-70 {
  0% {
    transform: rotate(180deg);
    opacity: 1
  }
  100% {
    transform: rotate(252deg);
    opacity: 1
  }
}
.donut--71:before {
  animation: rota1-71 .8s forwards
}
.donut--71:after {
  animation: rota2-71.336s forwards .8s
}
@keyframes rota1-71 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(180deg)
  }
}
@keyframes rota2-71 {
  0% {
    transform: rotate(180deg);
    opacity: 1
  }
  100% {
    transform: rotate(255.6deg);
    opacity: 1
  }
}
.donut--72:before {
  animation: rota1-72 .8s forwards
}
.donut--72:after {
  animation: rota2-72.352s forwards .8s
}
@keyframes rota1-72 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(180deg)
  }
}
@keyframes rota2-72 {
  0% {
    transform: rotate(180deg);
    opacity: 1
  }
  100% {
    transform: rotate(259.2deg);
    opacity: 1
  }
}
.donut--73:before {
  animation: rota1-73 .8s forwards
}
.donut--73:after {
  animation: rota2-73.368s forwards .8s
}
@keyframes rota1-73 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(180deg)
  }
}
@keyframes rota2-73 {
  0% {
    transform: rotate(180deg);
    opacity: 1
  }
  100% {
    transform: rotate(262.8deg);
    opacity: 1
  }
}
.donut--74:before {
  animation: rota1-74 .8s forwards
}
.donut--74:after {
  animation: rota2-74.384s forwards .8s
}
@keyframes rota1-74 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(180deg)
  }
}
@keyframes rota2-74 {
  0% {
    transform: rotate(180deg);
    opacity: 1
  }
  100% {
    transform: rotate(266.4deg);
    opacity: 1
  }
}
.donut--75:before {
  animation: rota1-75 .8s forwards
}
.donut--75:after {
  animation: rota2-75.4s forwards .8s
}
@keyframes rota1-75 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(180deg)
  }
}
@keyframes rota2-75 {
  0% {
    transform: rotate(180deg);
    opacity: 1
  }
  100% {
    transform: rotate(270deg);
    opacity: 1
  }
}
.donut--76:before {
  animation: rota1-76 .8s forwards
}
.donut--76:after {
  animation: rota2-76.416s forwards .8s
}
@keyframes rota1-76 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(180deg)
  }
}
@keyframes rota2-76 {
  0% {
    transform: rotate(180deg);
    opacity: 1
  }
  100% {
    transform: rotate(273.6deg);
    opacity: 1
  }
}
.donut--77:before {
  animation: rota1-77 .8s forwards
}
.donut--77:after {
  animation: rota2-77.432s forwards .8s
}
@keyframes rota1-77 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(180deg)
  }
}
@keyframes rota2-77 {
  0% {
    transform: rotate(180deg);
    opacity: 1
  }
  100% {
    transform: rotate(277.2deg);
    opacity: 1
  }
}
.donut--78:before {
  animation: rota1-78 .8s forwards
}
.donut--78:after {
  animation: rota2-78.448s forwards .8s
}
@keyframes rota1-78 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(180deg)
  }
}
@keyframes rota2-78 {
  0% {
    transform: rotate(180deg);
    opacity: 1
  }
  100% {
    transform: rotate(280.8deg);
    opacity: 1
  }
}
.donut--79:before {
  animation: rota1-79 .8s forwards
}
.donut--79:after {
  animation: rota2-79.464s forwards .8s
}
@keyframes rota1-79 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(180deg)
  }
}
@keyframes rota2-79 {
  0% {
    transform: rotate(180deg);
    opacity: 1
  }
  100% {
    transform: rotate(284.4deg);
    opacity: 1
  }
}
.donut--80:before {
  animation: rota1-80 .8s forwards
}
.donut--80:after {
  animation: rota2-80.48s forwards .8s
}
@keyframes rota1-80 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(180deg)
  }
}
@keyframes rota2-80 {
  0% {
    transform: rotate(180deg);
    opacity: 1
  }
  100% {
    transform: rotate(288deg);
    opacity: 1
  }
}
.donut--81:before {
  animation: rota1-81 .8s forwards
}
.donut--81:after {
  animation: rota2-81.496s forwards .8s
}
@keyframes rota1-81 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(180deg)
  }
}
@keyframes rota2-81 {
  0% {
    transform: rotate(180deg);
    opacity: 1
  }
  100% {
    transform: rotate(291.6deg);
    opacity: 1
  }
}
.donut--82:before {
  animation: rota1-82 .8s forwards
}
.donut--82:after {
  animation: rota2-82.512s forwards .8s
}
@keyframes rota1-82 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(180deg)
  }
}
@keyframes rota2-82 {
  0% {
    transform: rotate(180deg);
    opacity: 1
  }
  100% {
    transform: rotate(295.2deg);
    opacity: 1
  }
}
.donut--83:before {
  animation: rota1-83 .8s forwards
}
.donut--83:after {
  animation: rota2-83.528s forwards .8s
}
@keyframes rota1-83 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(180deg)
  }
}
@keyframes rota2-83 {
  0% {
    transform: rotate(180deg);
    opacity: 1
  }
  100% {
    transform: rotate(298.8deg);
    opacity: 1
  }
}
.donut--84:before {
  animation: rota1-84 .8s forwards
}
.donut--84:after {
  animation: rota2-84.544s forwards .8s
}
@keyframes rota1-84 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(180deg)
  }
}
@keyframes rota2-84 {
  0% {
    transform: rotate(180deg);
    opacity: 1
  }
  100% {
    transform: rotate(302.4deg);
    opacity: 1
  }
}
.donut--85:before {
  animation: rota1-85 .8s forwards
}
.donut--85:after {
  animation: rota2-85.56s forwards .8s
}
@keyframes rota1-85 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(180deg)
  }
}
@keyframes rota2-85 {
  0% {
    transform: rotate(180deg);
    opacity: 1
  }
  100% {
    transform: rotate(306deg);
    opacity: 1
  }
}
.donut--86:before {
  animation: rota1-86 .8s forwards
}
.donut--86:after {
  animation: rota2-86.576s forwards .8s
}
@keyframes rota1-86 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(180deg)
  }
}
@keyframes rota2-86 {
  0% {
    transform: rotate(180deg);
    opacity: 1
  }
  100% {
    transform: rotate(309.6deg);
    opacity: 1
  }
}
.donut--87:before {
  animation: rota1-87 .8s forwards
}
.donut--87:after {
  animation: rota2-87.592s forwards .8s
}
@keyframes rota1-87 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(180deg)
  }
}
@keyframes rota2-87 {
  0% {
    transform: rotate(180deg);
    opacity: 1
  }
  100% {
    transform: rotate(313.2deg);
    opacity: 1
  }
}
.donut--88:before {
  animation: rota1-88 .8s forwards
}
.donut--88:after {
  animation: rota2-88.608s forwards .8s
}
@keyframes rota1-88 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(180deg)
  }
}
@keyframes rota2-88 {
  0% {
    transform: rotate(180deg);
    opacity: 1
  }
  100% {
    transform: rotate(316.8deg);
    opacity: 1
  }
}
.donut--89:before {
  animation: rota1-89 .8s forwards
}
.donut--89:after {
  animation: rota2-89.624s forwards .8s
}
@keyframes rota1-89 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(180deg)
  }
}
@keyframes rota2-89 {
  0% {
    transform: rotate(180deg);
    opacity: 1
  }
  100% {
    transform: rotate(320.4deg);
    opacity: 1
  }
}
.donut--90:before {
  animation: rota1-90 .8s forwards
}
.donut--90:after {
  animation: rota2-90.64s forwards .8s
}
@keyframes rota1-90 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(180deg)
  }
}
@keyframes rota2-90 {
  0% {
    transform: rotate(180deg);
    opacity: 1
  }
  100% {
    transform: rotate(324deg);
    opacity: 1
  }
}
.donut--91:before {
  animation: rota1-91 .8s forwards
}
.donut--91:after {
  animation: rota2-91.656s forwards .8s
}
@keyframes rota1-91 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(180deg)
  }
}
@keyframes rota2-91 {
  0% {
    transform: rotate(180deg);
    opacity: 1
  }
  100% {
    transform: rotate(327.6deg);
    opacity: 1
  }
}
.donut--92:before {
  animation: rota1-92 .8s forwards
}
.donut--92:after {
  animation: rota2-92.672s forwards .8s
}
@keyframes rota1-92 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(180deg)
  }
}
@keyframes rota2-92 {
  0% {
    transform: rotate(180deg);
    opacity: 1
  }
  100% {
    transform: rotate(331.2deg);
    opacity: 1
  }
}
.donut--93:before {
  animation: rota1-93 .8s forwards
}
.donut--93:after {
  animation: rota2-93.688s forwards .8s
}
@keyframes rota1-93 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(180deg)
  }
}
@keyframes rota2-93 {
  0% {
    transform: rotate(180deg);
    opacity: 1
  }
  100% {
    transform: rotate(334.8deg);
    opacity: 1
  }
}
.donut--94:before {
  animation: rota1-94 .8s forwards
}
.donut--94:after {
  animation: rota2-94.704s forwards .8s
}
@keyframes rota1-94 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(180deg)
  }
}
@keyframes rota2-94 {
  0% {
    transform: rotate(180deg);
    opacity: 1
  }
  100% {
    transform: rotate(338.4deg);
    opacity: 1
  }
}
.donut--95:before {
  animation: rota1-95 .8s forwards
}
.donut--95:after {
  animation: rota2-95.72s forwards .8s
}
@keyframes rota1-95 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(180deg)
  }
}
@keyframes rota2-95 {
  0% {
    transform: rotate(180deg);
    opacity: 1
  }
  100% {
    transform: rotate(342deg);
    opacity: 1
  }
}
.donut--96:before {
  animation: rota1-96 .8s forwards
}
.donut--96:after {
  animation: rota2-96.736s forwards .8s
}
@keyframes rota1-96 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(180deg)
  }
}
@keyframes rota2-96 {
  0% {
    transform: rotate(180deg);
    opacity: 1
  }
  100% {
    transform: rotate(345.6deg);
    opacity: 1
  }
}
.donut--97:before {
  animation: rota1-97 .8s forwards
}
.donut--97:after {
  animation: rota2-97.752s forwards .8s
}
@keyframes rota1-97 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(180deg)
  }
}
@keyframes rota2-97 {
  0% {
    transform: rotate(180deg);
    opacity: 1
  }
  100% {
    transform: rotate(349.2deg);
    opacity: 1
  }
}
.donut--98:before {
  animation: rota1-98 .8s forwards
}
.donut--98:after {
  animation: rota2-98.768s forwards .8s
}
@keyframes rota1-98 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(180deg)
  }
}
@keyframes rota2-98 {
  0% {
    transform: rotate(180deg);
    opacity: 1
  }
  100% {
    transform: rotate(352.8deg);
    opacity: 1
  }
}
.donut--99:before {
  animation: rota1-99 .8s forwards
}
.donut--99:after {
  animation: rota2-99.784s forwards .8s
}
@keyframes rota1-99 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(180deg)
  }
}
@keyframes rota2-99 {
  0% {
    transform: rotate(180deg);
    opacity: 1
  }
  100% {
    transform: rotate(356.4deg);
    opacity: 1
  }
}
.donut--100:before {
  animation: rota1-100 .8s forwards
}
.donut--100:after {
  animation: rota2-100.8s forwards .8s
}
@keyframes rota1-100 {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(180deg)
  }
}
@keyframes rota2-100 {
  0% {
    transform: rotate(180deg);
    opacity: 1
  }
  100% {
    transform: rotate(360deg);
    opacity: 1
  }
}
.topbar .logo, .topbar ul, .sidebar .logo, #loginPage .login .logo {
  *zoom: 1
}
.topbar .logo:before, .topbar ul:before, .sidebar .logo:before, #loginPage .login .logo:before, .topbar .logo:after, .topbar ul:after, .sidebar .logo:after, #loginPage .login .logo:after {
  content: " ";
  display: table
}
.topbar .logo:after, .topbar ul:after, .sidebar .logo:after, #loginPage .login .logo:after {
  clear: both
}
.bg-gradient {
  position: relative;
  background: #FF9D6D !important;
  background: -webkit-linear-gradient(legacy-direction(-270deg), #FF9D6D 0%, #FE616F 100%) !important;
  background: linear-gradient(-270deg, #FF9D6D 0%, #FE616F 100%) !important
}
body, html {
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}
html {
  min-height: 100vh
}
body {
  background: #FDF4EE;
  color: #37474f;
  font-family: system-ui, -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 15px;
  letter-spacing: 0;
  line-height: 1.47;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh
}
@media screen and (max-width: 768px) {
  body {
    padding-left: 0
  }
}
body, input, select, textarea {
  -webkit-transition: all .2s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all .2s cubic-bezier(0.42, 0, 0.58, 1);
  -ms-transition: all .2s cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all .2s cubic-bezier(0.42, 0, 0.58, 1);
  transition: all .2s cubic-bezier(0.42, 0, 0.58, 1)
}
::selection {
  background-color: #ff5722;
  color: #ffffff
}
a {
  -webkit-transition: all .2s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all .2s cubic-bezier(0.42, 0, 0.58, 1);
  -ms-transition: all .2s cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all .2s cubic-bezier(0.42, 0, 0.58, 1);
  transition: all .2s cubic-bezier(0.42, 0, 0.58, 1);
  cursor: pointer;
  color: #37474f;
  text-decoration: none
}
a:hover {
  color: #F01F4B;
  border-color: #F01F4B;
  text-decoration: none !important;
  outline: none !important
}
a:active, a:focus {
  outline: none !important;
  text-decoration: none !important
}
strong, b {
  font-weight: bold
}
em, i {
  font-style: italic
}
p {
  font-family: system-ui, -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  font-size: 15px;
  font-weight: normal;
  letter-spacing: 0.025em
}
p:last-child {
  margin-bottom: 0
}
p a {
  padding-bottom: 2px;
  border-bottom: 1px dashed #76838f
}
abbr[title] {
  border-bottom: none !important;
  cursor: inherit !important;
  text-decoration: none !important
}
h1, h2, h3, h4, h5 {
  font-family: system-ui, -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  line-height: 1.27;
  letter-spacing: .025em
}
h1 a, h2 a, h3 a, h4 a, h5 a {
  color: inherit;
  text-decoration: none
}
h1 small, h2 small, h3 small, h4 small, h5 small {
  color: inherit
}
h1 span, h2 span, h3 span, h4 span, h5 span {
  color: #009688
}
h1.add-line, h2.add-line, h3.add-line, h4.add-line, h5.add-line {
  position: relative;
  padding-bottom: 1.5rem
}
h1.add-line:after, h2.add-line:after, h3.add-line:after, h4.add-line:after, h5.add-line:after {
  display: block;
  position: absolute;
  content: " ";
  bottom: .5rem;
  height: 3px;
  width: 75px;
  background: #37474f;
  opacity: .75;
  filter: alpha(opacity=75)
}
h1.add-line.secondary-line:after, h2.add-line.secondary-line:after, h3.add-line.secondary-line:after, h4.add-line.secondary-line:after, h5.add-line.secondary-line:after {
  background: #d93025
}
h1.add-line.primary-line:after, h2.add-line.primary-line:after, h3.add-line.primary-line:after, h4.add-line.primary-line:after, h5.add-line.primary-line:after {
  background: #009688
}
span.tokubetsu {
  color: #e91e63;
}
small {
  font-size: 85%
}
figure {
  display: block;
  border: 1px solid #E5F5FE;
  padding: 0.75rem 0.75rem 0;
  text-align: center;
  margin-bottom: 2rem
}
figure img {
  max-width: 100%
}
figure figcaption {
  display: block;
  padding: 0.25rem 0.75rem;
  font-size: 85%;
  font-style: italic;
  color: #4c626d
}
section {
  position: relative
}
section.text-center div[class*='col-']:first-child:last-child {
  margin: 0 auto;
  float: none
}
main {
  padding-top: 54px;
  min-height: 100vh
}
pre {
  background-color: #F5F7FA;
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 25px;
  font-size: 13px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px
}
pre code {
  color: #DD6777
}
:not(p) code {
  color: inherit
}
.m-b-0 {
  margin-bottom: 0;
}
.float-left {
  float: left;
}
.float-right {
  float: right;
}
.lead {
  font-size: 20px;
  font-weight: normal;
  color: #76838f;
  margin: 0 0 25px
}
.button {
  border: none;
  padding: 7px 11px;
  text-transform: uppercase;
  outline: none;
  font-weight: bold;
  background: #f4f7fa;
  text-decoration: none;
  margin: 3px 10px;
  cursor: pointer;
  border-radius: 4px;
  height: 45px;
  /*transition: all .8s ease-in-out;*/
  display: flex;
  align-items: center;
  justify-content: center;
}
.button:hover {
  color: #fff;
  background: #C1CFD9;
}
.button.green {
  color: #009688;
  background: #E0F0E1;
}
.button.red {
  color: #e57373;
  background: #ffcdd2;
  color: #F44336;
  background: #FFEBEE;
}
.button.red2 {
  color: #fff;
  background: #ff95a5;
}
.button.grey {
  background: #9e9e9e;
}
.button.blue {
  background: #00bcd45c;
  color: #00a9bf;
}
.button.green:hover,
.button.red:hover,
.button.red2:hover,
.button.blue:hover {
  color: #fff;
  background: #C1CFD9;
}
.button.green-variety {
  color: #fff;
  text-align: center;
  background: #f7f7f7;
  border-radius: 3px;
  background: linear-gradient(to right, #009688, #29ca7f);
  background: #F01F4B;
  transition: all .8s ease-in-out;
  transition: all .1s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
}
.button.green-variety:hover {
  color: #fff;
  background: linear-gradient(to right, #4caf50, #009688);
  background: #A20B2B;
}
.button.red-variety {
  color: #fff;
  background: #f7f7f7;
  border-radius: 3px;
  background: linear-gradient(to right, #dc3544, #ff5722);
  transition: all .8s ease-in-out;
  transition: all .1s ease-in-out;
}
.button.red-variety:hover {
  color: #fff;
  background: #C1CFD9;
}
.red3 {
  background: #f44336;
}
.red3:hover {
  color: #fff;
  background: #C1CFD9;
}
.grey {
  color: #fff;
  background: #e0e0e0;
}
.grey:hover {
  color: #fff;
  background: #bdbdbd;
  background: #dbd7d7;
}
.green {
  color: #fff;
  background: #22c281;
}
.green:hover {
  color: #fff;
  background: #C1CFD9;
}
.dark-green {
  color: #fff;
  background: #009688;
}
.dark-green:hover {
  color: #fff;
  background: #C1CFD9;
}
.blue-green,
.card-body button.blue-green {
  color: #fff;
  background: #F01F4B;
}
.blue-green:hover,
.card-body button.blue-green:hover {
  color: #fff;
  background: #C1CFD9;
}
.blue-green, .card-body button.blue-green a {
  color: #fff;
}
.jumo_but .grey {
  background: #9e9e9e;
}
.jumo_but .grey:hover {
  color: #fff;
  background: #C1CFD9;
}
.but-35 {
  width: 35%;
}
.but-55 {
  width: 55%;
}
.but-a {
  width: 100%;
}
.but-a1 {
  width: 120px;
}
.but-a2 {
  width: 240px;
}
@media (max-width: 700px) {
  .but-a1,
  .but-a2 {
    width: 45%;
  }
}
.boxbut a {
  padding: 12px 7px;
}
.boxbut .green  {
  border: none;
  color: #FFF;
  text-transform: uppercase;
  outline: none;
  font-weight: bold;
  background: linear-gradient(to right, #009688, #29ca7f);
  text-decoration: none;
  letter-spacing: 2px;
  border-radius: 4px;
}
.boxbut .green:hover {
  background: linear-gradient(to right, #C1CFD9, #C1CFD9);
}
/*
For further documentation about CSS Icons, see this pen:
https://codepen.io/stoumann/pen/eYzPVqe
*/

[data-css-icon] {
  --animdur: .3s;
  --loading-animdur: 0.8s;
  --animtf: ease-in;
  --bdw: 2px;
  --bdrs: 50%;
  --bgc: transparent;
  --c: currentcolor;
  --dots-bgc: silver;
  --dots-size: 0.5rem;
  --icon-size: .6rem;
  --size: 1.5rem;

  align-items: center;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}
[data-css-icon] i {
  align-items: center;
  background-color: var(--bgc);
  border-radius: var(--bdrs);
  box-sizing: border-box;
  display: inline-flex;
  height: var(--size);
  justify-content: center;
  position: relative;
  transition: background-color var(--animdur) var(--animtf);
  width: var(--size);
}
[data-css-icon] i::after,
[data-css-icon] i::before {
  transform-origin: 50% 50%;
  transition: all var(--animdur) var(--animtf);
}

[data-css-icon*="down"] i::after,
[data-css-icon*="right"] i::after {
  background: transparent;
  border-color: var(--c);
  border-style: solid;
  box-sizing: border-box;
  content: '';
  display: inline-block;
  height: var(--icon-size) ;
  margin: 0;
  position: relative;
  width: var(--icon-size);
}
[data-css-icon*="down"] i::after {
  border-width: 0 var(--bdw) var(--bdw) 0;
  top: calc(0px - (var(--icon-size) / 4));
  transform: rotate(45deg);
}
[data-css-icon*="right"] i::after {
  border-width: var(--bdw) var(--bdw) 0 0;
  right: calc((var(--icon-size) / 4));
  top: 0;
  transform: rotate(45deg);
}

[data-css-icon*="equals"] i::after,
[data-css-icon*="equals"] i::before,
[data-css-icon*="cross"] i::after,
[data-css-icon*="cross"] i::before,
[data-css-icon*="menu"] i,
[data-css-icon*="menu"] i::after,
[data-css-icon*="menu"] i::before,
[data-css-icon*="plus"] i::after,
[data-css-icon*="plus"] i::before {
  /* Width need to be the diagonal of the down-arrow side-length (--size): sqrt(2) * --size. */
  --w: calc(var(--icon-size) * 1.4142135623730950488016887242097);
  background: var(--c);
  content: '';
  height: var(--bdw);
  position: absolute;
  width: var(--w);
}
[data-css-icon*="cross"] i::before,
[data-css-icon*="plus"] i::before {
  transform: rotate(90deg);
}
[data-css-icon*="equals"] i {
  --m: 4px;
}
[data-css-icon*="equals"] i::after {
  transform: translateY(var(--m));
}
[data-css-icon*="equals"] i::before {
  transform: translateY(calc(0px - var(--m)));
}
[data-css-icon*="dots"],
[data-css-icon*="menu"] {
  height: var(--size);
}
[data-css-icon*="menu"] i {
  --bdrs: 0;
  --m: 7px;
  position: relative;
  right: calc((var(--size) - var(--w)) / 2);
}
[data-css-icon*="menu"] i::after {
  top: var(--m);
}
[data-css-icon*="menu"] i::before {
  top: calc(0px - var(--m));
}

[data-css-icon*="dots"] i,
[data-css-icon*="dots"] i::after,
[data-css-icon*="dots"] i::before {
  animation: dots var(--loading-animdur) infinite alternate;
  background-color: var(--c);
  border-radius: 50%;
  content: "";
  display: inline-block;
  height: var(--dots-size);
  width: var(--dots-size);
}
[data-css-icon*="dots"] i {
  animation-delay: var(--loading-animdur);
  position: relative;
  right: calc((var(--size) - var(--dots-size)) / 4);
}
[data-css-icon*="dots"] i::after {
  animation-delay: 0s;
  left: calc(0px - (var(--dots-size) * 3));
  position: absolute;
}
[data-css-icon*="dots"] i::before {
  animation-delay: calc(var(--loading-animdur) / 2);
  left: calc(0px - (var(--dots-size) * 1.5));
  position: absolute;
}

[data-css-icon*="spin"] i::after {
  animation: spin var(--loading-animdur) infinite linear;
  border-radius: 50%;
  border: var(--bdw) solid var(--dots-bgc);
  border-left: var(--bdw) solid var(--c);
  content: "";
  height: var(--icon-size);
  transform: translateZ(0);
  width: var(--icon-size);
}

/* STATE */
[open] > summary > [data-css-icon*="cross"] i::after {
  transform: rotate(45deg);
}
[open] > summary > [data-css-icon*="cross"] i::before {
  transform: rotate(135deg);
}
[open] > summary > [data-css-icon*="down"] i::after {
  top: var(--bdw);
  transform: rotate(45deg) scale(-1) ;
}
[open] > summary > [data-css-icon*="right"] i::after {
  right: 0;
  top: calc(0px - (var(--icon-size) / 4));
  transform: rotate(135deg);
}
[open] > summary > [data-css-icon*="plus"] i::after {
  transform: rotate(180deg);
}
[open] > summary > [data-css-icon*="plus"] i::before {
  transform: rotate(-0deg);
}

[open] > summary > [data-css-icon*="equals"] i::after { transform: rotate(-45deg); }
[open] > summary > [data-css-icon*="equals"] i::before { transform: rotate(45deg); }

[open] > summary > [data-css-icon*="menu"] i { background-color: transparent; }
[open] > summary > [data-css-icon*="menu"] i::after { transform: translateY(calc(0px - var(--m))) rotate(-45deg); }
[open] > summary > [data-css-icon*="menu"] i::before { transform: translateY(var(--m)) rotate(45deg); }

/* RTL: inset-block-end fails */
[dir="rtl"] [data-css-icon*="right"] i::after {
  left: calc((var(--icon-size) / 4));
}
[dir="rtl"] [data-css-icon*="menu"] i {
  left: 0.5rem;
  right: auto;
}

/* MODIFIERS */
[data-css-icon*="outline"] i {
  border: var(--bdw) solid var(--c);
}
[data-css-icon*="fill"] {
  --bgc: hsl(195, 10%, 30%);
  --c: hsl(195, 10%, 95%);
}
[data-css-icon*="square"] {
  --bdrs: 5px;
}

/* For this demo only */
details {
  height: var(--collapsed);
  overflow: hidden;
  transition: height 300ms cubic-bezier(0.4, 0.01, 0.165, 0.99);
}
details[open] {
  height: var(--expanded);
}
summary {
  background-color: var(--bgc);
  border: 0;
  border-radius: 5px;
  color: var(--c, inherit);
  list-style-type: none;
  margin: 0.5rem 0;
  outline: none;
  padding-bottom: 0.5rem;
  padding-top: 0.5rem;
  padding-inline-end: 0.5rem;
  padding-inline-start: 1rem;
  user-select: none;
}
summary:hover {
  background-color: hsl(174deg 100% 29%);
  color: #fff;
}
summary::marker { display: none; }
summary::-webkit-details-marker { display: none; }

/* 4 States of summary */
summary {
  --bgc: hsl(174deg 100% 29% / 38%)
}
[open] > summary {
  --bgc: hsl(174deg 100% 29%);
  --c: hsl(195, 10%, 92%);
}
summary:focus {
  --bgc: hsl(174deg 100% 29% / 38%)
}
[open] > summary:focus {
  --bgc: hsl(174deg 100% 29%);
    --c: hsl(195, 10%, 99%);
}
[open] > summary:focus > [data-css-icon*="fill"],
[open] > summary > [data-css-icon*="fill"] {
  --bgc: hsl(195, 10%, 80%);
  --c: hsl(195, 10%, 10%);
}
summary + * {
  color: #777;
  line-height: 1.6;
  padding: 0.5rem;
}

@keyframes dots {
  0% {
    background-color: var(--c);
  }
  50%,
  100% {
    background-color: var(--dots-bgc);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(1turn);
  }
}
.array-icon {
  margin-left: 5px;
  cursor: pointer;
}
.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.01em;
  color: white;
  text-transform: uppercase;
  height: 26px;
  line-height: 26px;
  min-width: 54px;
  padding: 0 15px;
  text-align: center;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px
}
.badge-pill {
  -webkit-border-radius: 13px;
  -moz-border-radius: 13px;
  -ms-border-radius: 13px;
  border-radius: 13px
}
.badge-primary {
  background: #009688
}
.container-fluid {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
.container-fluid h6 {
	color: #6c757d;
}
.container-fluid .small-sign {
  font-size: 15px;
  margin-left: 10px;
  color: #36474f;
}
.container-fluid .newPost .editor {
  min-height: 455px;
  margin-bottom: 0;
}
.separator {
  display: block;
  height: 2px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin: 45px 0
}
.img-responsive {
  display: inline-block;
  max-width: 100%
}
.auto-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  position: relative
}
.auto-height>[class*='col-'], .auto-height>.col {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  position: relative
}
.page-container {
  overflow-x: hidden;
  overflow-y: auto
}
.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex
}
.row>[class*='col-'] {
  display: flex;
  flex-direction: column
}
@media (min-width: 1200px) {
  .container {
    width: 1280px;
    max-width: 100%
  }
  .button {
    letter-spacing: 2px;
  }
}
.btn {
  border-color: rgba(0, 0, 0, 0.1)
}
img, .img-responsive {
  max-width: 100%
}
.btn.btn-default {
  background-color: #F5F7FA;
  font-size: 15px
}
.btn.btn-primary {
  color: white !important
}
.input-group-addon {
  background: #F5F7FA;
  border-color: rgba(0, 0, 0, 0.1)
}
.list.list-horizontal {
  width: auto;
  padding: 0;
  margin: 0
}
.list.list-horizontal li {
  display: inline-block;
  list-style-type: none;
  margin-right: 15px
}
.list.list-horizontal li:last-child {
  margin-right: 0
}
.list.list-horizontal li a {
  display: block;
  text-decoration: none
}
.list.list-horizontal li .icon {
  display: inline-block;
  margin-right: 7.5px
}
.list.list-icon {
  list-style: none;
  position: relative;
  padding: 0
}
.list.list-icon li {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding-left: 75px;
  margin: 75px 0
}
.list.list-icon li:first-child {
  margin-top: 0
}
.list.list-icon li:last-child {
  margin-bottom: 0
}
.list.list-icon li .icon {
  position: absolute;
  left: 0;
  width: 50px;
  height: 50px;
  font-size: 1.75em;
  text-align: center
}
.list.list-icon li .content h4 {
  color: #2c398f;
  font-size: 18.75px;
  margin-bottom: 5px
}
.list.list-icon li .content p {
  margin-bottom: 0
}
@media only screen and (min-width: 768px) {
  .list.list-icon.icon-right {
    text-align: right
  }
  .list.list-icon.icon-right li {
    padding-left: 0;
    padding-right: 75px
  }
  .list.list-icon.icon-right li .icon {
    left: auto;
    right: 0
  }
}
@media only screen and (max-width: 768px) {
  .list.list-icon {
    padding-top: 60px;
    padding-bottom: 60px
  }
  .list.list-icon .split {
    padding: 0
  }
  .list.list-icon .split ol li {
    margin: 0 0 30px
  }
}
.list.timeline {
  list-style-type: none;
  margin: 0;
  padding: 0;
  counter-reset: list-counter;
  display: block
}
.list.timeline li {
  display: block;
  min-height: 2rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 3rem;
  position: relative;
  background: rgba(0, 0, 0, 0.1) !important;
  background: -webkit-linear-gradient(legacy-direction(180deg), rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%) !important;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%) !important;
  background-repeat: no-repeat;
  background-size: 2px 100%;
  background-position: 1rem center
}
.list.timeline li:nth-child(1)::before {
  background-position: center 10%
}
.list.timeline li:nth-child(2)::before {
  background-position: center 20%
}
.list.timeline li:nth-child(3)::before {
  background-position: center 30%
}
.list.timeline li:nth-child(4)::before {
  background-position: center 40%
}
.list.timeline li:nth-child(5)::before {
  background-position: center 50%
}
.list.timeline li:nth-child(6)::before {
  background-position: center 60%
}
.list.timeline li:nth-child(7)::before {
  background-position: center 70%
}
.list.timeline li:nth-child(8)::before {
  background-position: center 80%
}
.list.timeline li:nth-child(9)::before {
  background-position: center 90%
}
.list.timeline li:nth-child(10)::before {
  background-position: center 100%
}
.list.timeline li::before {
  background: #0082d5;
  background: #6EC7E6 !important;
  background: -webkit-linear-gradient(legacy-direction(180deg), #6EC7E6 0%, #DD6777 100%) !important;
  background: linear-gradient(180deg, #6EC7E6 0%, #DD6777 100%) !important;
  background-repeat: no-repeat;
  background-size: 2rem 20rem;
  border-radius: 50%;
  color: white;
  content: counter(list-counter);
  counter-increment: list-counter;
  display: block;
  height: 2rem;
  left: 0;
  line-height: 2;
  position: absolute;
  text-align: center;
  width: 2rem
}
.tabs .nav-tabs>li {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: none;
  margin-right: -1px;
  position: relative
}
.tabs .nav-tabs>li a {
  display: block;
  padding: 10px 15px;
  background: #F5F7FA
}
.tabs .nav-tabs>li.active {
  border-color: #009688;
  z-index: 1
}
.tabs .nav-tabs>li.active a {
  color: white;
  background: #009688
}
.tabs .tab-pane {
  padding: 15px
}
.nav-pills>li {
  border: 1px solid transparent;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  z-index: 1
}
.nav-pills>li a {
  display: block;
  padding: 5px 15px;
  border: 1px solid transparent
}
.nav-pills>li a .badge {
  min-width: 0;
  height: auto;
  line-height: inherit;
  background: white;
  color: #009688;
  padding: 2px 5px;
  border: none
}
.nav-pills>li:hover {
  border-color: #009688
}
.nav-pills>li.active {
  border-color: #009688;
  background: #009688;
  color: white
}
.nav-pills>li.active a {
  color: white
}
.nav-pills.nav-stacked {
  display: block
}
.nav-pills.nav-stacked li {
  display: block
}
.nav-pills.nav-stacked li a {
  display: block
}
.pagination li a {
  display: block;
  border: 1px solid transparent;
  padding: 5px 10px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px
}
.pagination li:hover a {
  border-color: #009688
}
.pagination li.active a {
  border-color: #009688;
  background: #009688;
  color: white
}
.pager {
  display: flex;
  list-style: none;
  padding: 0
}
.pager li a {
  display: block;
  padding: 5px 10px;
  border: 1px solid transparent;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px
}
.pager li:hover a {
  border-color: #009688
}
.pager li.active {
  border-color: #009688;
  background: #009688;
  color: white
}
.pager li.active a {
  color: white
}
.progress {
  margin-bottom: 10px
}
.dropdown-menu {
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #37474f;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.08);
  -moz-box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.08);
  box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.08)
}
.dropdown-menu li, .dropdown-menu .dropdown-item {
  background: transparent !important
}
.dropdown-menu li a, .dropdown-menu .dropdown-item a {
  display: block;
  padding: 5px 25px
}
.or-separator {
  display: block;
  width: 70%;
  margin: 15px auto;
  position: relative;
  border-bottom: 2px dashed rgba(0, 0, 0, 0.1);
  text-align: center;
  color: #76838f
}
.or-separator span {
  position: relative;
  z-index: 2;
  background: white;
  padding: 0 15px;
  bottom: -12px
}
.read-more {
  margin: 0;
  font-size: 13px;
  text-align: inherit
}
.read-more a {
  display: block;
  text-align: center;
  color: #009688;
  text-decoration: none;
  border: none;
  font-weight: bold
}
.read-more a:hover {
  text-decoration: underline
}
.display-none {
  display: none !important
}
.display-block {
  display: block !important
}
.display-inline {
  display: inline !important
}
.display-inline-block {
  display: inline-block !important
}
.display-table {
  display: table !important
}
.display-flex {
  display: flex !important
}
.no-margin {
  margin: 0 !important
}
.no-margin-bottom {
  margin-bottom: 0 !important
}
.no-padding-right {
  padding-right: 0 !important
}
.no-margin-top {
  margin-top: 0 !important
}
.no-margin-left {
  margin-left: 0 !important
}
.no-padding {
  padding: 0 !important
}
.no-padding-left {
  padding-left: 0 !important
}
.no-padding-top {
  padding-top: 0 !important
}
.no-padding-right {
  padding-right: 0 !important
}
.no-padding-bottom {
  padding-bottom: 0 !important
}
.no-borders {
  border: none !important
}
.no-style {
  border: none !important;
  text-decoration: none !important;
  font-style: normal !important;
  font-weight: normal !important;
  background: transparent !important;
  color: #37474f !important
}
.bg-dark, .bg-blue, .bg-red, .bg-green {
  color: white
}
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark h6, .bg-dark a, .bg-dark .lead, .bg-blue h1, .bg-blue h2, .bg-blue h3, .bg-blue h4, .bg-blue h5, .bg-blue h6, .bg-blue a, .bg-blue .lead, .bg-red h1, .bg-red h2, .bg-red h3, .bg-red h4, .bg-red h5, .bg-red h6, .bg-red a, .bg-red .lead, .bg-green h1, .bg-green h2, .bg-green h3, .bg-green h4, .bg-green h5, .bg-green h6, .bg-green a, .bg-green .lead {
  color: white
}
.bg-dark {
  background: #F4F6F8
}
.bg-white {
  background: white
}
.bg-grey, .bg-gray {
  background: #F5F7FA
}
.bg-red {
  background: #DD6777 !important
}
.bg-green {
  background: #6FC080 !important
}
.bg-blue {
  background: #6EC7E6 !important
}
.bg-yellow {
  background: #FFCE44 !important;
  color: #37474f
}
.bg-ltorange {
  background: #e9827b !important;
  color: #37474f
}
.bg-image {
  position: relative
}
.bg-image .bg-image-holder {
  will-change: transform, top;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-size: cover !important;
  background-position: 50% 50%;
  z-index: 0;
  -webkit-transition: 0.3s linear;
  -moz-transition: 0.3s linear;
  -ms-transition: 0.3s linear;
  -o-transition: 0.3s linear;
  transition: 0.3s linear
}
.bg-image .bg-image-holder.bg-contain {
  background-size: contain !important
}
.bg-image .bg-image-holder img {
  display: none
}
.bg-gradient h1, .bg-gradient h2, .bg-gradient h3, .bg-gradient h4, .bg-gradient h5, .bg-gradient h6, .bg-gradient p {
  color: white
}
.bg-gradient-bluegreen {
  background: #00c589 !important;
  background: -webkit-linear-gradient(legacy-direction(to bottom right), #00c589 0, #00aeef 75%) !important;
  background: linear-gradient(to bottom right, #00c589 0, #00aeef 75%) !important
}
.bg-gradient-bluegreen h1, .bg-gradient-bluegreen h2, .bg-gradient-bluegreen h3, .bg-gradient-bluegreen h4, .bg-gradient-bluegreen h5, .bg-gradient-bluegreen h6, .bg-gradient-bluegreen p {
  color: white
}
.pri-sec-gradient {
  background: linear-gradient(150deg, #007bff, #7952b3)
}
.sec-pri-gradient {
  background: linear-gradient(150deg, #7952b3, #007bff)
}
.pri-gradient-lighter {
  background: linear-gradient(150deg, #007bff, #66b0ff)
}
.pri-gradient-darker {
  background: linear-gradient(150deg, #007bff, #004a99)
}
.sec-gradient-lighter {
  background: linear-gradient(150deg, #7952b3, #b099d2)
}
.sec-gradient-darker {
  background: linear-gradient(150deg, #7952b3, #49316e)
}
.dark-gradient {
  background: linear-gradient(150deg, #000, #495057);
  color: white !important
}
.light-gradient {
  background: linear-gradient(150deg, #fff, #dee2e6);
  color: #495057 !important
}
.brand-text-gradient {
  background: -webkit-linear-gradient(left, #007bff, #7952b3);
  background: linear-gradient(left, #007bff, #7952b3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent
}
.color-dark {
  color: #F4F6F8
}
.color-white {
  color: white
}
.color-grey, .color-gray {
  color: #666
}
.color-textColor {
  color: #37474f !important
}
.color-red {
  color: #DD6777 !important
}
.color-primary {
  color: #009688 !important
}
.color-green {
  color: #6FC080 !important
}
.color-blue {
  color: #6EC7E6 !important
}
.color-yellow {
  color: #FFCE44 !important
}
.color-ltorange {
  color: #e9827b !important
}
.has-overlay:before {
  position: absolute;
  content: '';
  background: #F4F6F8;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  opacity: .65;
  filter: alpha(opacity=65)
}
.has-overlay>div:not(.bg-image-holder) {
  z-index: 1;
  color: white
}
.has-overlay>div:not(.bg-image-holder) h1, .has-overlay>div:not(.bg-image-holder) h2, .has-overlay>div:not(.bg-image-holder) h3, .has-overlay>div:not(.bg-image-holder) h4, .has-overlay>div:not(.bg-image-holder) h5, .has-overlay>div:not(.bg-image-holder) h6, .has-overlay>div:not(.bg-image-holder) a, .has-overlay>div:not(.bg-image-holder) .lead {
  color: white
}
.has-shadow {
  -webkit-box-shadow: 0 10px 45px 0 rgba(7, 61, 125, 0.1);
  -moz-box-shadow: 0 10px 45px 0 rgba(7, 61, 125, 0.1);
  box-shadow: 0 10px 45px 0 rgba(7, 61, 125, 0.1)
}
.has-shadow-long {
  -webkit-box-shadow: 0 14px 24px rgba(62, 57, 107, 0.1);
  -moz-box-shadow: 0 14px 24px rgba(62, 57, 107, 0.1);
  box-shadow: 0 14px 24px rgba(62, 57, 107, 0.1)
}
.text-light {
  color: #76838f !important
}
.text-primary {
  color: #009688 !important
}
.vh-10 {
  height: 10vh
}
.vh-20 {
  height: 20vh
}
.vh-30 {
  height: 30vh
}
.vh-40 {
  height: 40vh
}
.vh-50 {
  height: 50vh
}
.vh-60 {
  height: 60vh
}
.vh-70 {
  height: 70vh
}
.vh-80 {
  height: 80vh
}
.vh-90 {
  height: 90vh
}
.vh-100 {
  height: 100vh
}
.auto-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  position: relative
}
.auto-height>[class*='col-'], .auto-height>.col {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  position: relative
}
.auto-height>[class*='col-'] .box, .auto-height>.col .box {
  height: 100%
}
@media (max-width: 768px) {
  .col {
    flex: auto;
  }
  .col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,
  .col-md-11,.col-md-12 {
    margin-bottom: 10px;
  }
}
.ptb-1 {
  padding-top: 25px !important;
  padding-bottom: 25px !important
}
.ptb-2 {
  padding-top: 50px !important;
  padding-bottom: 50px !important
}
.ptb-3 {
  padding-top: 75px !important;
  padding-bottom: 75px !important
}
.pt-6 {
  padding-top: 4rem
}
.pt-7 {
  padding-top: 5rem
}
.pt-8 {
  padding-top: 6rem
}
.pt-9 {
  padding-top: 7rem
}
.pt-10 {
  padding-top: 8rem
}
.pb-6 {
  padding-bottom: 4rem
}
.pb-7 {
  padding-bottom: 5rem
}
.pb-8 {
  padding-bottom: 6rem
}
.pb-9 {
  padding-bottom: 7rem
}
.pb-10 {
  padding-bottom: 8rem
}
.pl-6 {
  padding-left: 4rem
}
.pl-7 {
  padding-left: 5rem
}
.pl-8 {
  padding-left: 6rem
}
.pl-9 {
  padding-left: 7rem
}
.pl-10 {
  padding-left: 8rem
}
.pr-6 {
  padding-right: 4rem
}
.pr-7 {
  padding-right: 5rem
}
.pr-8 {
  padding-right: 6rem
}
.pr-9 {
  padding-right: 7rem
}
.pr-10 {
  padding-right: 8rem
}
.mtb-1 {
  margin-top: 25px !important;
  margin-bottom: 25px !important
}
.mtb-2 {
  margin-top: 50px !important;
  margin-bottom: 50px !important
}
.mtb-3 {
  margin-top: 75px !important;
  margin-bottom: 75px !important
}
.mt-6 {
  margin-top: 4rem
}
.mt-7 {
  margin-top: 5rem
}
.mt-8 {
  margin-top: 6rem
}
.mt-9 {
  margin-top: 7rem
}
.mt-10 {
  margin-top: 8rem
}
.mb-6 {
  margin-bottom: 4rem
}
.mb-7 {
  margin-bottom: 5rem
}
.mb-8 {
  margin-bottom: 6rem
}
.mb-9 {
  margin-bottom: 7rem
}
.mb-10 {
  margin-bottom: 8rem
}
.ml-3 {
  margin-left: .5rem
}
.ml-4 {
  margin-left: 1.5rem
}
.ml-6 {
  margin-left: 4rem
}
.ml-7 {
  margin-left: 5rem
}
.ml-8 {
  margin-left: 6rem
}
.ml-9 {
  margin-left: 7rem
}
.ml-10 {
  margin-left: 8rem
}
.mr-3 {
  margin-right: .5rem
}
.mr-5 {
  margin-right: 1rem
}
.mr-6 {
  margin-right: 4rem
}
.mr-7 {
  margin-right: 5rem
}
.mr-8 {
  margin-right: 6rem
}
.mr-9 {
  margin-right: 7rem
}
.mr-10 {
  margin-right: 8rem
}
.m-all-2 {
  margin :1.5rem;
}
.m-all-3 {
  margin :2.5rem;
}
.align-bottom {
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: center;
  justify-content: flex-end;
  align-self: center;
  align-self: center
}
.align-center, .align-middle {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  align-self: center
}
.align-bottom, .aligh-center, .align-middle {
  height: 100%
}
.align-bottom img, .aligh-center img, .align-middle img {
  -webkit-align-self: center;
  align-self: center
}
.position-relative {
  position: relative !important
}
.position-absolute {
  position: absolute !important
}
.position-static {
  position: static !important
}
.position-fixed {
  position: fixed !important
}
.position-inherit {
  position: inherit !important
}
.position-initial {
  position: initial !important
}
.font-small {
  font-size: 13px
}
.font-2x {
  font-size: 30px !important
}
.font-3x {
  font-size: 45px !important
}
.font-4x {
  font-size: 60px !important
}
.font-5x {
  font-size: 75px !important
}
.font-13 {
  font-size: 1.3rem;
  font-size: 13px
}
.font-14 {
  font-size: 1.4rem;
  font-size: 14px
}
.font-15 {
  font-size: 1.5rem;
  font-size: 15px
}
.font-16 {
  font-size: 1.6rem;
  font-size: 16px
}
.font-17 {
  font-size: 1.7rem;
  font-size: 17px
}
.font-18 {
  font-size: 1.8rem;
  font-size: 18px
}
.font-19 {
  font-size: 1.9rem;
  font-size: 19px
}
.font-20 {
  font-size: 2rem;
  font-size: 20px
}
.font-weight-light {
  font-weight: 300 !important
}
.font-weight-normal {
  font-weight: 400 !important
}
.font-weight-bold {
  font-weight: bold !important
}
.font-style-italic {
  font-style: italic !important
}
.font-style-normal {
  font-style: normal !important
}
.font-style-oblique {
  font-style: oblique !important
}
hr {
  width: 100%;
  border-color: rgba(0, 0, 0, 0.1);
  margin: 1rem 0
}
hr.hr-primary {
  border-color: #009688
}
hr.hr-short {
  width: 65px
}
hr.hr-center {
  margin-left: auto;
  margin-right: auto
}
.image, .card {
  max-width: 100%;
  border: none;
  padding: 0;
  width: auto;
  height: auto
}
.image .img, .image img, .card .img, .card img {
  position: relative;
  max-width: 100%;
  z-index: 1
}
.image-rounded, .card-rounded {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 5px;
  overflow: hidden
}
.image-circle, .card-circle {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  overflow: hidden
}
.image-shadow, .card-shadow {
  -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15)
}
.image-shadow-narrow, .card-shadow-narrow {
  -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.06);
  -moz-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.06);
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.06)
}
.image-shadow-wide, .card-shadow-wide {
  -webkit-box-shadow: 0 23px 40px rgba(0, 0, 0, 0.17);
  -moz-box-shadow: 0 23px 40px rgba(0, 0, 0, 0.17);
  box-shadow: 0 23px 40px rgba(0, 0, 0, 0.17)
}
.image-shadow-floating, .card-shadow-floating {
  position: relative;
  overflow: visible
}
.image-shadow-floating:before, .image-shadow-floating:after, .card-shadow-floating:before, .card-shadow-floating:after {
  position: absolute;
  content: "";
  bottom: 15px;
  left: 15px;
  top: 80%;
  width: 45%;
  background: rgba(0, 0, 0, 0.35);
  z-index: 0;
  -webkit-box-shadow: 0 15px 15px rgba(0, 0, 0, 0.35);
  -moz-box-shadow: 0 15px 15px rgba(0, 0, 0, 0.35);
  box-shadow: 0 15px 15px rgba(0, 0, 0, 0.35);
  -moz-transform: rotate(-6deg);
  -o-transform: rotate(-6deg);
  -ms-transform: rotate(-6deg);
  -webkit-transform: rotate(-6deg);
  transform: rotate(-6deg)
}
.image-shadow-floating:after, .card-shadow-floating:after {
  -moz-transform: rotate(6deg);
  -o-transform: rotate(6deg);
  -ms-transform: rotate(6deg);
  -webkit-transform: rotate(6deg);
  transform: rotate(6deg);
  right: 15px;
  left: auto
}
.image-shadow-floating.image-rounded, .image-shadow-floating.card-rounded, .card-shadow-floating.image-rounded, .card-shadow-floating.card-rounded {
  overflow: visible
}
.image-shadow-lifted, .card-shadow-lifted {
  position: relative;
  overflow: visible
}
.image-shadow-lifted:before, .image-shadow-lifted:after, .card-shadow-lifted:before, .card-shadow-lifted:after {
  position: absolute;
  content: "";
  box-shadow: 0 10px 25px 20px rgba(0, 0, 0, 0.25);
  top: 40px;
  left: 15px;
  bottom: 37.5px;
  width: 15%;
  z-index: 0;
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  -webkit-transform: rotate(-3deg);
  transform: rotate(-3deg)
}
.image-shadow-lifted:after, .card-shadow-lifted:after {
  right: 15px;
  left: auto;
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  -webkit-transform: rotate(3deg);
  transform: rotate(3deg)
}
.image-shadow-lifted.image-rounded, .image-shadow-lifted.card-rounded, .card-shadow-lifted.image-rounded, .card-shadow-lifted.card-rounded {
  overflow: visible
}
.image-shadow-layer, .card-shadow-layer {
  position: relative;
  -webkit-box-shadow: 0 2.5rem 2.5rem -2rem rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 2.5rem 2.5rem -2rem rgba(0, 0, 0, 0.2);
  box-shadow: 0 2.5rem 2.5rem -2rem rgba(0, 0, 0, 0.2)
}
.ratio-16-9 {
  padding-top: 56.25%
}
.ratio-4-3 {
  padding-top: 75%
}
@media (max-width: 768px) {
  .hidden-md-down {
    display: none
  }
}
@media (min-width: 992px) {
  .hidden-md-up {
    display: none
  }
}
.image.image-rounded img {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 5px
}
.card-shadow, .card-shadow-narrow, .card-shadow-wide, .card-shadow-floating, .card-shadow-lifted, .card-shadow-layer {
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.1)
}
.card-shadow .card-block, .card-shadow-narrow .card-block, .card-shadow-wide .card-block, .card-shadow-floating .card-block, .card-shadow-lifted .card-block, .card-shadow-layer .card-block {
  position: relative;
  background: white;
  z-index: 1
}
.delay-025s {
  -moz-animation-delay: .25s;
  -webkit-animation-delay: .25s;
  animation-delay: .25s
}
.delay-05s {
  -moz-animation-delay: .5s;
  -webkit-animation-delay: .5s;
  animation-delay: .5s
}
.delay-075s {
  -moz-animation-delay: .75s;
  -webkit-animation-delay: .75s;
  animation-delay: .75s
}
.delay-1s {
  -moz-animation-delay: 1s;
  -webkit-animation-delay: 1s;
  animation-delay: 1s
}
.delay-125s {
  -moz-animation-delay: 1.25s;
  -webkit-animation-delay: 1.25s;
  animation-delay: 1.25s
}
.delay-15s {
  -moz-animation-delay: 1.5s;
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s
}
.delay-175s {
  -moz-animation-delay: 1.75s;
  -webkit-animation-delay: 1.75s;
  animation-delay: 1.75s
}
.delay-2s {
  -moz-animation-delay: 2s;
  -webkit-animation-delay: 2s;
  animation-delay: 2s
}
.delay-225s {
  -moz-animation-delay: 2.25s;
  -webkit-animation-delay: 2.25s;
  animation-delay: 2.25s
}
.delay-25s {
  -moz-animation-delay: 2.5s;
  -webkit-animation-delay: 2.5s;
  animation-delay: 2.5s
}
.delay-275s {
  -moz-animation-delay: 2.75s;
  -webkit-animation-delay: 2.75s;
  animation-delay: 2.75s
}
.delay-3s {
  -moz-animation-delay: 3s;
  -webkit-animation-delay: 3s;
  animation-delay: 3s
}
.delay-325s {
  -moz-animation-delay: 3.25s;
  -webkit-animation-delay: 3.25s;
  animation-delay: 3.25s
}
.delay-35s {
  -moz-animation-delay: 3.5s;
  -webkit-animation-delay: 3.5s;
  animation-delay: 3.5s
}
.delay-375s {
  -moz-animation-delay: 3.75s;
  -webkit-animation-delay: 3.75s;
  animation-delay: 3.75s
}
.delay-4s {
  -moz-animation-delay: 4s;
  -webkit-animation-delay: 4s;
  animation-delay: 4s
}
.delay-5s {
  -moz-animation-delay: 5s;
  -webkit-animation-delay: 5s;
  animation-delay: 5s
}
@media only screen and (max-width: 767px) {
  [class^="delay-"] {
    -moz-animation-delay: 0s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s
  }
}
.hidden-xs-up {
  display: none !important
}
@media (max-width: 479px) {
  .hidden-xs-down {
    display: none !important
  }
}
@media (min-width: 480px) {
  .hidden-sm-up {
    display: none !important
  }
}
@media (max-width: 767px) {
  .hidden-sm-down {
    display: none !important
  }
}
@media (min-width: 768px) {
  .hidden-md-up {
    display: none !important
  }
}
@media (max-width: 991px) {
  .hidden-md-down {
    display: none !important
  }
}
@media (min-width: 992px) {
  .hidden-lg-up {
    display: none !important
  }
}
@media (max-width: 1199px) {
  .hidden-lg-down {
    display: none !important
  }
}
@media (min-width: 1200px) {
  .hidden-xl-up {
    display: none !important
  }
}
@media (max-width: 1599px) {
  .hidden-xl-down {
    display: none !important
  }
}
@media (min-width: 1600px) {
  .hidden-xxl-up {
    display: none !important
  }
}
.hidden-xxl-down {
  display: none !important
}
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  line-height: 100%;
  text-align: center;
  background: #F5F7FA;
  z-index: 100
}
.loading .loading-center {
  width: 100%;
  display: block;
  height: 300px;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%)
}
.loading img {
  max-height: 100%
}
.m-main-header {
  background: #FBB40D;
  min-height: 40%;
}
.topbar {
  background: #FBB40D;
  height: 65px;
  line-height: 65px;
  left: 0;
  z-index: 10;
  position: absolute;
  width: 100%;
  margin: 0;
  padding: 0 0 0 65px;
  color: white
}
.topbar .logo {
  display: none;
  width: 100%;
  height: 65px;
  overflow: hidden;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 15px;
  letter-spacing: 0.05em;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1)
}
.topbar .logo a {
  display: block
}
.topbar .logo .logo-emblem {
  display: block;
  width: 65px;
  height: 65px;
  line-height: 65px;
  color: white;
  text-align: center;
  float: left
}
.topbar .logo .logo-emblem img {
  max-width: 36px;
  max-height: 36px
}
.topbar .logo .logo-full {
  display: block;
  height: 65px;
  line-height: 65px;
  float: left;
  width: 185px
}
.topbar [class^="col-md-"] {
  padding: 0;
  position: relative
}
.topbar a {
  color: #672F0C;
}
.topbar .menu-toggle {
  display: inline-block;
  line-height: 65px;
  padding: 0 15px;
  vertical-align: middle;
  width: 65px;
  text-align: center;
  -webkit-transition: all .2s linear;
  -moz-transition: all .2s linear;
  -ms-transition: all .2s linear;
  -o-transition: all .2s linear;
  transition: all .2s linear
}
.topbar .menu-toggle i {
  display: inline-block;
  text-align: center;
  font-size: 20px
}
.topbar ul {
  padding: 0 0 0 25px;
  margin: 0;
  height: 65px;
  line-height: 65px
}
.topbar ul li {
  list-style-type: none;
  display: block;
  float: left;
  position: relative
}
.topbar ul li>.dropdown-toggle {
  min-width: 65px
}
.topbar ul li>.dropdown-toggle:after {
  display: none
}
.topbar ul li.mobile-menu-toggle {
  display: none
}
.topbar ul li #mobileMenu {
  display: block;
  width: 54px;
  height: 54px;
  line-height: 54px;
  padding: 0;
  text-align: center
}
.topbar ul li #mobileMenu .closed {
  display: block
}
.topbar ul li #mobileMenu .open {
  display: none
}
.topbar ul li #mobileMenu.active {
  color: #009688
}
.topbar ul li #mobileMenu.active .closed {
  display: none
}
.topbar ul li #mobileMenu.active .open {
  display: block
}
.topbar ul li .dropdown-menu {
  height: auto;
  left: auto;
  border: none;
  padding: 0;
  margin: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  border-radius: 0;
  -webkit-box-shadow: 0 2px 5px 0 rgba(62, 57, 107, 0.1);
  -moz-box-shadow: 0 2px 5px 0 rgba(62, 57, 107, 0.1);
  box-shadow: 0 2px 5px 0 rgba(62, 57, 107, 0.1)
}
.topbar ul li .dropdown-menu li {
  display: block;
  width: 100%;
  padding: 0
}
.topbar ul li .dropdown-menu li a {
  display: block;
  font-size: 15px;
  color: #37474f;
  line-height: 1.47;
  padding: 10px 15px;
  border-bottom: 1px solid #F5F7FA
}
.topbar ul li .dropdown-menu li a i {
  margin-right: 10px
}
.topbar ul li .dropdown-menu li a:hover {
  background: #F5F7FA
}
.topbar ul li .dropdown-menu li:last-child a {
  border: none
}
.topbar ul li .btn {
  position: relative;
  border: none;
  background: transparent;
  width: 65px;
  height: 65px;
  line-height: 65px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none
}
.topbar ul li .btn:hover {
  background: #00675d;
  color: white
}
.topbar ul li .btn i {
  font-size: 20px;
  position: relative
}
@media screen and (min-width: 768px) {
  .topbar ul li .btn {
    padding: 0 15px
  }
}
@media screen and (max-width: 767px) {
  .topbar ul li .btn {
    height: 54px;
    line-height: 54px;
    padding: 0 5px;
    width: 100%
  }
}
.topbar ul li.notification {
  font-size: 15px
}
.topbar ul li.notification .btn .notification-count {
  display: block;
  font-family: system-ui, -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  font-size: 10px;
  height: 17.5px;
  line-height: 17.5px;
  text-align: center;
  padding: 0 5px;
  min-width: 17.5px;
  position: absolute;
  right: -15px;
  top: -10px;
  background: white;
  color: #009688;
  -webkit-border-radius: 12.5px;
  -moz-border-radius: 12.5px;
  -ms-border-radius: 12.5px;
  border-radius: 12.5px
}
.topbar ul li.notification .dropdown-menu {
  max-height: 500px;
  width: 400px;
  overflow: auto;
  left: auto !important
}
.topbar ul li.notification .dropdown-menu a {
  display: block;
  position: relative;
  padding: 15px 15px 15px 84px;
  line-height: 1.4
}
.topbar ul li.notification .dropdown-menu a .avatar {
  position: absolute;
  left: 15px;
  top: 15px;
  width: 54px;
  height: 54px;
  overflow: hidden;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%
}
.topbar ul li.notification .dropdown-menu a .avatar img {
  width: 100%
}
.topbar ul li.notification .dropdown-menu a .name, .topbar ul li.notification .dropdown-menu a .message, .topbar ul li.notification .dropdown-menu a .time {
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden
}
.topbar ul li.notification .dropdown-menu a .message {
  color: #76838f;
  font-weight: normal
}
.topbar ul li.notification .dropdown-menu a .time {
  position: absolute;
  right: 15px;
  top: 15px;
  color: #76838f;
  font-size: 13px
}
.topbar ul li.notification .dropdown-menu a.all-notifications {
  display: block;
  border: none;
  text-align: center;
  font-weight: bold;
  padding: 15px
}
.topbar ul li.notification .dropdown-menu a.all-notifications i {
  display: inline-block;
  margin-left: 5px
}
.topbar ul li.notification.show .dropdown-toggle {
  background: #ff5722;
  color: white
}
.topbar ul li.user-account {
  float: right;
  font-size: 15px;
  line-height: 1.4em;
  position: relative
}
.topbar ul li.user-account .dropdown-toggle {
  border: none;
  background: transparent;
  font-size: 15px;
  height: 65px;
  line-height: 1.4em;
  position: relative;
  padding: 0;
  padding-left: 15px;
  padding-right: 80px;
  text-align: right;
  display: table;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none
}
.topbar ul li.user-account .dropdown-toggle .avatar {
  height: 65px;
  width: 65px;
  overflow: hidden;
  display: block;
  vertical-align: middle;
  position: absolute;
  right: -1px;
  top: 0;
  background: #ff5722
}
.topbar ul li.user-account .dropdown-toggle .avatar img {
  max-width: 100%
}
.topbar ul li.user-account .dropdown-toggle .user-content {
  display: table-cell;
  vertical-align: middle;
  line-height: 1.2
}
.topbar ul li.user-account .dropdown-toggle .user-content .user-name {
  display: block;
  font-size: 15px
}
.topbar ul li.user-account .dropdown-toggle .user-content .user-plan {
  display: block;
  font-size: 13px
}
.topbar ul li.user-account .dropdown-toggle:hover {
  background: #ff5722
}
.topbar ul li.user-account .dropdown-menu {
  right: 0
}
.topbar ul li a {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  border-radius: 0
}
.topbar ul li a:hover {
  background: #f7f7f7
}
.topbar ul li a.active {
  background: #ff5722
}
.topbar .text-right>ul>li {
  float: right
}
@media screen and (max-width: 767px) {
  .topbar {
    position: fixed;
    height: 54px;
    line-height: 54px;
    z-index: 30;
    bottom: 0;
    top: auto;
    left: 0;
    width: 100%;
    padding: 0 !important;
    -webkit-box-shadow: 0 2px 5px 0 rgba(62, 57, 107, 0.1);
    -moz-box-shadow: 0 2px 5px 0 rgba(62, 57, 107, 0.1);
    box-shadow: 0 2px 5px 0 rgba(62, 57, 107, 0.1)
  }
  .topbar ul {
    height: 54px;
    line-height: 54px;
    padding: 0
  }
  .topbar ul .dropdown-toggle {
    height: 54px !important;
    line-height: 54px !important
  }
  .topbar ul li {
    width: 25%
  }
  .topbar ul li a {
    width: 100%;
    padding: 0
  }
  .topbar ul li a:hover {
    background: #ff5722
  }
  .topbar ul li.mobile-menu-toggle {
    display: block;
    float: left;
  }
  .topbar ul li.mobile-menu-toggle .menu-toggle {
    width: 100%;
    height: 54px;
    line-height: 54px;
    padding: 0;
    display: block
  }
  .topbar ul li.user-account .dropdown-toggle {
    padding-left: 0;
    padding-right: 0;
    display: block;
    text-align: center;
    padding-top: 7px
  }
  .topbar ul li.user-account .dropdown-toggle .avatar {
    position: relative;
    width: 40px;
    height: 40px;
    overflow: hidden;
    right: unset;
    display: inline-block;
    vertical-align: top;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    border-radius: 20px
  }
  .topbar ul li.user-account .dropdown-toggle .avatar img {
    display: block
  }
  .topbar ul li.user-account .dropdown-toggle .user-content {
    display: none
  }
  .topbar ul li.user-account .dropdown-toggle .user-content .user-name {
    display: none
  }
  .topbar ul li.user-account .dropdown-toggle .user-content .user-plan {
    display: none
  }
  .topbar ul li.notification ul.dropdown-menu {
    position: fixed;
    left: 0;
    width: 95vmin;
    top: 55px
  }
}
.sidebar {
  display: block;
  width: 265px;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  overflow-y: auto;
  background: white;
  z-index: 10;
  font-size: 14px;
  box-shadow: 1px 0 20px rgba(0, 0, 0, 0.08);
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease
}
.sidebar span, .sidebar div, .sidebar ul, .sidebar li, .sidebar a, .sidebar i {
  -webkit-transition: all .2s linear;
  -moz-transition: all .2s linear;
  -ms-transition: all .2s linear;
  -o-transition: all .2s linear;
  transition: all .2s linear
}
.sidebar .logo {
  display: block;
  width: 100%;
  height: 65px;
  overflow: hidden;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 15px;
  letter-spacing: 0.05em;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1)
}
.sidebar .logo a {
  display: block
}
.sidebar .logo .logo-emblem {
  display: block;
  width: 65px;
  height: 65px;
  line-height: 65px;
  color: #009688;
  text-align: center;
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sidebar .logo .logo-emblem img {
  max-width: 36px;
  max-height: 36px
}
.sidebar .logo .logo-full {
  display: block;
  height: 65px;
  line-height: 65px;
  float: left;
  width: 185px
}
.sidebar>ul {
  margin: 0;
  padding: 0
}
.sidebar>ul>li {
  white-space: nowrap;
  position: relative;
  display: block
}
.sidebar>ul>li.spacer {
  display: block;
  height: 14px
}
.sidebar>ul>li.profile {
  display: block;
  padding: 10px 15px;
  position: relative;
  padding-left: 65px;
  height: 65px
}
.sidebar>ul>li.profile span {
  display: block;
  margin: 0;
  padding: 0;
  line-height: 1.3
}
.sidebar>ul>li.profile span.profile-image {
  position: absolute;
  width: 65px;
  height: 65px;
  left: 0;
  top: 0;
  padding: 15px
}
.sidebar>ul>li.profile span.profile-image img {
  display: block;
  width: 35px;
  height: 35px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  overflow: hidden
}
.sidebar>ul>li.profile span.profile-name {
  font-weight: 500;
  padding-top: 3px
}
.sidebar>ul>li.profile span.profile-info {
  font-weight: normal;
  color: #76838f
}
.sidebar>ul>li.button-container {
  padding: 0 15px
}
.sidebar>ul>li.title {
  padding: 0;
  text-transform: uppercase;
  font-size: 12px;
  color: #76838f;
  position: relative;
  width: auto;
  height: 50px;
  line-height: 50px
}
.sidebar>ul>li.title i {
  display: inline-block;
  width: 65px;
  height: 50px;
  line-height: 50px;
  z-index: 3px;
  position: relative;
  font-size: 10px;
  text-align: center;
  color: #76838f
}
.sidebar>ul>li.nav-item>a {
  display: block;
  padding: 0;
  position: relative;
  line-height: 48px;
  color: #37474f
}
.sidebar>ul>li.nav-item>a i {
  display: inline-block;
  width: 65px;
  height: 50px;
  line-height: 50px;
  z-index: 3;
  position: relative;
  text-align: center;
  font-size: 20px
}
.sidebar>ul>li.nav-item>a i.down-arrow,
.sidebar ul li.three-floors i.down-arrow {
  color: #76838f;
  position: absolute;
  right: 0;
  font-size: 15px;
  width: 65px;
  height: 50px;
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg)
}
.sidebar>ul>li.nav-item>a.hover,
.sidebar>ul>li.nav-item>a.hover:hover {
  color: #fff;
  color: #454545;
  background: #f7f7f7;
  background: linear-gradient(to right, #009688, #29ca7f);
  background: #FBB40D;
  margin-right: 20px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
.sidebar>ul>li.nav-item>a .menu-title {
  position: relative;
  top: -2px
}
.sidebar>ul>li.nav-item>a:not(.collapsed):not(.nav-single) {
  background: #f7f7f7;
  /*color: #2c398f*/
}
.sidebar>ul>li.nav-item>a:not(.collapsed):not(.nav-single) i.down-arrow,
.sidebar ul li.three-floors a:not(.collapsed):not(.nav-single) i.down-arrow  {
  -moz-transform: rotate(0);
  -o-transform: rotate(0);
  -ms-transform: rotate(0);
  -webkit-transform: rotate(0);
  transform: rotate(0)
}
.sidebar>ul>li.nav-item>a:hover {
  background: #f7f7f7
}
.sidebar>ul>li.nav-item ul.sub-menu {
  display: block;
  position: relative;
  padding-left: 0;
  background-color: #f7f7f7;
}
.sidebar>ul>li.nav-item ul.sub-menu li {
  list-style-type: square;
  color: #76838f;
  list-style-type: none
}
.sidebar>ul>li.nav-item ul.sub-menu li a {
  padding: 0;
  position: relative;
  line-height: 50px;
  color: #6c8a99
}
.sidebar>ul>li.nav-item ul.sub-menu li a i {
  display: inline-block;
  width: 65px;
  height: 50px;
  line-height: 50px;
  z-index: 3;
  position: relative;
  text-align: center;
  font-size: 13px
}
.sidebar>ul>li.nav-item ul.sub-menu li a i.no {
  color: #f7f7f700;
}
.sidebar>ul>li.nav-item ul.sub-menu li a:hover,
.sidebar>ul>li.nav-item ul.sub-menu li.hover a,
.sidebar>ul>li.nav-item ul.sub-menu li.three-floors .collapse a:hover {
  color: #fff;
  background: #f7f7f7;
  background: linear-gradient(to right, #009688, #29ca7f);
  color: #454545;
  background: #d1d1d1;
  margin-right: 20px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
.sidebar>ul>li.nav-item ul.sub-menu li.three-floors a:hover {
  background: inherit;
  color: #6c8a99;
}
.sidebar>ul>li.nav-item ul.sub-menu li.three-floors a:hover {
  margin-right: 0;
}
.sidebar ul li.three-floors i.down-arrow {
  position: absolute!important;
}
.sidebar.sidebar-dark {
  background: #1C2A36;
  color: #76838f
}
.sidebar.sidebar-dark .logo {
  border-color: #37474f
}
.sidebar.sidebar-dark .logo .logo-full {
  color: #76838f
}
.sidebar.sidebar-dark ul li.nav-item a {
  color: #76838f
}
.sidebar.sidebar-dark ul li.nav-item a:hover, .sidebar.sidebar-dark ul li.nav-item a:not(.collapsed):not(.nav-single) {
  background: #131e26;
  color: #76838f
}
.sidebar.sidebar-dark ul li.nav-item .collapse {
  background: #131e26;
  color: #76838f
}
.sidebar.sidebar-dark ul li.nav-item .collapse a:hover {
  color: white
}
.sidebar-open .topbar {
  padding-left: 265px
}
.sidebar-open .sidebar {
  width: 265px;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
  position: fixed;/* 左邊導覽-至底 */
}
.sidebar-open main {
  padding-left: 265px;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease
}
@media screen and (max-width: 767px) {
  .sidebar-open .topbar {
    padding-left: 0
  }
}
.sidebar-closed:not(.horizontal) .sidebar:not(:hover) {
  width: 65px
}
.sidebar-closed:not(.horizontal) .sidebar:not(:hover) .down-arrow {
  height: 0;
  width: 0;
  overflow: hidden;
  padding: 0;
  margin: 0
}
.sidebar-closed:not(.horizontal) .sidebar:not(:hover)>ul {
  padding: 0;
  margin: 0
}
.sidebar-closed:not(.horizontal) .sidebar:not(:hover)>ul>li {
  position: relative
}
.sidebar-closed:not(.horizontal) .sidebar:not(:hover)>ul>li.profile {
  height: 65px
}
.sidebar-closed:not(.horizontal) .sidebar:not(:hover)>ul>li.profile .profile-name, .sidebar-closed:not(.horizontal) .sidebar:not(:hover)>ul>li.profile .profile-info {
  overflow: hidden;
  display: none
}
.sidebar-closed:not(.horizontal) .sidebar:not(:hover)>ul>li.title i {
  margin: 0;
  display: block
}
.sidebar-closed:not(.horizontal) .sidebar:not(:hover)>ul>li.title .menu-title {
  opacity: 0;
  filter: alpha(opacity=0);
  width: 0;
  display: none;
  overflow: hidden;
  -webkit-transition: all .2s linear;
  -moz-transition: all .2s linear;
  -ms-transition: all .2s linear;
  -o-transition: all .2s linear;
  transition: all .2s linear
}
.sidebar-closed:not(.horizontal) .sidebar:not(:hover)>ul>li.nav-item a {
  padding: 0;
  line-height: 50px;
  height: 50px;
  width: 65px;
  text-align: center;
  -webkit-transition: all .2s linear;
  -moz-transition: all .2s linear;
  -ms-transition: all .2s linear;
  -o-transition: all .2s linear;
  transition: all .2s linear
}
.sidebar-closed:not(.horizontal) .sidebar:not(:hover)>ul>li.nav-item a i {
  margin: 0;
  display: block
}
.sidebar-closed:not(.horizontal) .sidebar:not(:hover)>ul>li.nav-item a i.down-arrow {
  right: -100px;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  -ms-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  transition: all 0.5s linear
}
.sidebar-closed:not(.horizontal) .sidebar:not(:hover)>ul>li.nav-item a .menu-title {
  opacity: 0;
  filter: alpha(opacity=0);
  width: 0;
  display: none;
  overflow: hidden;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  transition: all 0.3s linear;
  -webkit-transition: all .2s linear;
  -moz-transition: all .2s linear;
  -ms-transition: all .2s linear;
  -o-transition: all .2s linear;
  transition: all .2s linear
}
@media screen and (max-width: 767px) {
  #sidebarCookie {
    padding-bottom: 60px;
  }
}
.offcanvas-toggle.active {
  background: #DD6777 !important;
  color: white !important
}
.offcanvas-menu {
  display: block;
  width: 50%;
  height: calc(100vh - $navSize);
  position: fixed;
  right: -100%;
  top: 0;
  bottom: 0;
  overflow-y: auto;
  background: white;
  background: #EFEFEF;
  z-index: 20;
  font-size: 14px;
  box-shadow: -1px 0 20px rgba(0, 0, 0, 0.08);
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease
}
.offcanvas-menu.open {
  right: 0
}
.offcanvas-menu .offcanvas-button a.btn {
  border: 1px solid rgba(0, 0, 0, 0.1);
  height: 65px;
  line-height: 65px;
  padding: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  border-radius: 0
}
.offcanvas-menu .offcanvas-button a.btn:hover {
  background: #DD6777;
  color: white
}
.offcanvas-menu .offcanvas-title {
  font-size: 24px;
  padding: 10px 15px;
  font-weight: bold;
  margin: 0
}
.offcanvas-menu .list-group.revision {
  font-size: 10px;
  flex-direction: initial;
}
.offcanvas-menu .list-group.revision .list-group-item {
  width: 50%;
  float: left;
}
.offcanvas-menu .list-group a.button {
  width: auto;
  display: block;
  margin: 0 0 0 15px;
  padding: 11px 11px;
}
.offcanvas-menu .list-group hr {
  width: 1px;
  height: 16px;
  margin: 0 5px;
  opacity: 1;
  border-color: #616161;
}
.offcanvas-menu .list-group .w-2 {
  width: 20%;
}

.offcanvas-menu .list-group .w-4 {
  width: 40%;
}
.offcanvas-menu .list-group .null .sel.form-control2 {
  background: rgb(0 0 0 / 0%);
  padding: 0 15px 0 0;
}
.waves-effect {
  position: relative;
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.waves-block {
  display: block;
}
.diverse-list-title {
  display: flex;
  align-items: center;
  justify-content: center;
}
.diverse-list-table tr:hover {
  background-color: #eee;
}
.revision .sel.form-control2 .sel__placeholder::before {
  padding: 0;
}
.revision .sel.form-control2::before {
  right: 3px;
}
.revision .style_1 {
  display: flex;
  align-items: center;
  justify-content: center;
}
.revision .style_2 .sel.form-control2 {
  width: 110px;
  margin-left: 15px;
}
.revision .style_2 .sel.form-control2 .sel__placeholder::before {
  padding: 12px 20px;
}
.revision .style_2 .sel.form-control2::before {
  right: 15px;
}
.list-group-flush {
  margin: 15px;
}
.list-group.list-group-box .list-group-item {
  padding: 25px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: #FFF;
  margin: 0 0 10px 0;
  position: relative;
}
.diverse-list-table .list-but-box .avatar {
  width: 25px;
  height: 25px;
}

.list-but-text {
  margin-left: 7px;
}

@media screen and (max-width: 1310px) {
  .offcanvas-menu .list-group.revision {
    flex-direction: column;
  }
  .offcanvas-menu .list-group.revision .list-group-item {
    width: 100%;
  }
  .offcanvas-menu .list-group.revision .list-group-item .w-3 {

  }
}
@media screen and (max-width: 1145px) {
  .table.diverse-list-table .three-butbox {
    height: auto;
    display: initial;
  }
}
@media screen and (max-width: 768px) {
  .revision .style_1 {
    -ms-flex-pack: justify!important;
    justify-content: space-between!important;
    display: block;
  }
  .revision .style_2 .sel.form-control2 {
    margin-left: 0;
  }
}
@media screen and (max-width: 767px) {
  .offcanvas-menu {
    top: 0;
    bottom: 54px
  }
  .offcanvas-menu .list-group .w-3 {
    width: 33%;
  }
}
@media screen and (max-width: 725px) {
  .offcanvas-menu {
    width: 80%;
  }
}
@media screen and (max-width: 490px) {
  .offcanvas-menu {
    width: 95%;
  }
}
@media screen and (max-width: 375px) {
  .offcanvas-menu {
    width: 100%;
  }
}
.card {
  height: 100%;
  margin-bottom: 25px;
  margin-bottom: 10px;
  border: 1px solid rgba(0, 0, 0, 0.065)
}
.card.has-shadow {
  -webkit-box-shadow: 0 2px 5px 0 rgba(62, 57, 107, 0.1);
  -moz-box-shadow: 0 2px 5px 0 rgba(62, 57, 107, 0.1);
  box-shadow: 0 2px 5px 0 rgba(62, 57, 107, 0.1)
}
.card .card-body-title {
  flex: inherit
}
.card.card-hover {
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out
}
.card.card-hover:hover {
  -moz-transform: translateY(-4px) scale(1.01);
  -o-transform: translateY(-4px) scale(1.01);
  -ms-transform: translateY(-4px) scale(1.01);
  -webkit-transform: translateY(-4px) scale(1.01);
  transform: translateY(-4px) scale(1.01);
  -webkit-box-shadow: rgba(45, 45, 45, 0.05) 0px 2px 2px, rgba(49, 49, 49, 0.05) 0px 4px 4px, rgba(42, 42, 42, 0.05) 0px 8px 8px, rgba(32, 32, 32, 0.05) 0px 16px 16px, rgba(49, 49, 49, 0.05) 0px 32px 32px;
  -moz-box-shadow: rgba(45, 45, 45, 0.05) 0px 2px 2px, rgba(49, 49, 49, 0.05) 0px 4px 4px, rgba(42, 42, 42, 0.05) 0px 8px 8px, rgba(32, 32, 32, 0.05) 0px 16px 16px, rgba(49, 49, 49, 0.05) 0px 32px 32px;
  box-shadow: rgba(45, 45, 45, 0.05) 0px 2px 2px, rgba(49, 49, 49, 0.05) 0px 4px 4px, rgba(42, 42, 42, 0.05) 0px 8px 8px, rgba(32, 32, 32, 0.05) 0px 16px 16px, rgba(49, 49, 49, 0.05) 0px 32px 32px;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out
}
.card .card-title {
  font-size: 18px;
  font-weight: 500
}
.card .card-but {
  display: table;
}
.card .card-but.justify-end {
  display: flex;
  justify-content: end;
}
.card .card-but .button {
  letter-spacing: 0px;
  margin: 0;
}
.card .card-but .button a {
  color: #fff;
}
.card.app-detail {
  height: auto;
}
.card.app-detail h2 {
  color: #3d4e56;
}
.card.app-detail i {
  margin-right: 7px;
}
.card.app-detail .shotitle {
  color: #009688;
}
.card.app-detail textarea {
  /*height: 150px;*/
}
.card.app-detail a {
  color: #33b9c3;
}
.card.app-detail a:hover {
  color: #009688;
}
.card.app-detail .test-questions {
  margin-top: 15px;
  height: 450px;
}
.card.app-detail .form-control:focus {
  background: rgba(0, 0, 0, 0.04);
  box-shadow: 0 0 0rem 0 rgb(140 152 164 / 25%);
}
.app-online-course .card.app-detail {
  height: -webkit-fill-available;
  margin-bottom: 50px;
}
@media only screen and (max-width: 575px) {
  .app-online-course .card.app-detail {
    margin-bottom: 20px;
  }
}
.gallery .photo {
  position: relative;
  height: 15rem;
  margin: 1rem 0;
  overflow: hidden;
  background-size: cover;
  overflow: hidden;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  border-radius: 7px;
  -webkit-transition: transform 0.2s linear, box-shadow 0.2s linear;
  -moz-transition: transform 0.2s linear, box-shadow 0.2s linear;
  -ms-transition: transform 0.2s linear, box-shadow 0.2s linear;
  -o-transition: transform 0.2s linear, box-shadow 0.2s linear;
  transition: transform 0.2s linear, box-shadow 0.2s linear
}
.gallery .photo.has-shadow:hover {
  -webkit-box-shadow: 0 14px 24px rgba(62, 57, 107, 0.1);
  -moz-box-shadow: 0 14px 24px rgba(62, 57, 107, 0.1);
  box-shadow: 0 14px 24px rgba(62, 57, 107, 0.1);
  -moz-transform: translateY(-4px) !important;
  -o-transform: translateY(-4px) !important;
  -ms-transform: translateY(-4px) !important;
  -webkit-transform: translateY(-4px) !important;
  transform: translateY(-4px) !important
}
.gallery .photo figure {
  padding: 0;
  margin: 0;
  border: none
}
.gallery .photo figure image {
  position: relative;
  min-height: 100%;
  min-width: 100%
}
.gallery .photo .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 10
}
.gallery .photo .overlay:after {
  content: '';
  width: 100%;
  height: 100%;
  background-color: #202020;
  position: absolute;
  z-index: -10;
  top: 0;
  left: 0;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  border-radius: 7px;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease
}
.gallery .photo .overlay .content {
  text-align: center;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%)
}
.gallery .photo .overlay .content h2 {
  position: relative;
  top: -15rem;
  color: white;
  text-align: center;
  font-size: 2rem;
  margin: 0 0 1rem;
  -webkit-transition: all 0.3s cubic-bezier(0.3, 0, 0, 1.3);
  -moz-transition: all 0.3s cubic-bezier(0.3, 0, 0, 1.3);
  -ms-transition: all 0.3s cubic-bezier(0.3, 0, 0, 1.3);
  -o-transition: all 0.3s cubic-bezier(0.3, 0, 0, 1.3);
  transition: all 0.3s cubic-bezier(0.3, 0, 0, 1.3)
}
.gallery .photo .overlay .content .btn {
  position: relative;
  bottom: -15rem;
  border-color: white;
  color: white;
  text-align: center;
  -webkit-transition: all 0.3s cubic-bezier(0.3, 0, 0, 1.3);
  -moz-transition: all 0.3s cubic-bezier(0.3, 0, 0, 1.3);
  -ms-transition: all 0.3s cubic-bezier(0.3, 0, 0, 1.3);
  -o-transition: all 0.3s cubic-bezier(0.3, 0, 0, 1.3);
  transition: all 0.3s cubic-bezier(0.3, 0, 0, 1.3)
}
.gallery .photo .overlay .content .btn:hover {
  border-color: #009688;
  background: white;
  color: #37474f
}
.gallery .photo:hover {
  color: #37474f;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear
}
.gallery .photo:hover .overlay:after {
  opacity: .75;
  filter: alpha(opacity=75)
}
.gallery .photo:hover .overlay h2 {
  top: 0
}
.gallery .photo:hover .overlay .btn {
  bottom: 0
}
.app-personal .row {
  justify-content: center;
}


.icon {
  max-width: 60px;
  width: 60px;
  height: 60px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  transition: all 0.4s ease
}
.icon.icon-circle {
  border-radius: 50%;
  background-color: #FFFFFF
}
.icon.icon-square {
  border-radius: 0.35rem;
  background-color: #FFFFFF
}
.icon.icon-shadow {
  box-shadow: 0px 9px 30px -6px rgba(17, 17, 17, 0.3)
}
.icon i {
  line-height: 60px
}
.icon.icon-hover:hover {
  box-shadow: 0px 15px 35px 0px rgba(17, 17, 17, 0.35);
  transform: translate3d(0, -0.5rem, 0)
}
.icon-primary {
  box-shadow: 0px 9px 30px -6px rgba(0, 123, 255, 0.3)
}
.icon-primary i {
  color: #007bff
}
.icon-primary.icon-hover:hover {
  box-shadow: 0px 15px 35px 0px rgba(0, 123, 255, 0.35);
  transform: translate3d(0, -0.5rem, 0)
}
.icon-secondary {
  box-shadow: 0px 9px 30px -6px rgba(121, 82, 179, 0.3)
}
.icon-secondary i {
  color: #7952b3
}
.icon-secondary.icon-hover:hover {
  box-shadow: 0px 15px 35px 0px rgba(121, 82, 179, 0.35);
  transform: translate3d(0, -0.5rem, 0)
}
.icon-success {
  box-shadow: 0px 9px 30px -6px rgba(40, 167, 69, 0.3)
}
.icon-success i {
  color: #28a745
}
.icon-success.icon-hover:hover {
  box-shadow: 0px 15px 35px 0px rgba(40, 167, 69, 0.35);
  transform: translate3d(0, -0.5rem, 0)
}
.icon-info {
  box-shadow: 0px 9px 30px -6px rgba(3, 169, 244, 0.3)
}
.icon-info i {
  color: #03a9f4
}
.icon-info.icon-hover:hover {
  box-shadow: 0px 15px 35px 0px rgba(3, 169, 244, 0.35);
  transform: translate3d(0, -0.5rem, 0)
}
.icon-warning {
  box-shadow: 0px 9px 30px -6px rgba(255, 193, 7, 0.3)
}
.icon-warning i {
  color: #ffc107
}
.icon-warning.icon-hover:hover {
  box-shadow: 0px 15px 35px 0px rgba(255, 193, 7, 0.35);
  transform: translate3d(0, -0.5rem, 0)
}
.icon-danger {
  box-shadow: 0px 9px 30px -6px rgba(220, 53, 69, 0.3)
}
.icon-danger i {
  color: #dc3545
}
.icon-danger.icon-hover:hover {
  box-shadow: 0px 15px 35px 0px rgba(220, 53, 69, 0.35);
  transform: translate3d(0, -0.5rem, 0)
}
.icon-light {
  box-shadow: 0px 9px 30px -6px rgba(233, 236, 239, 0.3)
}
.icon-light i {
  color: #e9ecef
}
.icon-light.icon-hover:hover {
  box-shadow: 0px 15px 35px 0px rgba(233, 236, 239, 0.35);
  transform: translate3d(0, -0.5rem, 0)
}
.icon-dark {
  box-shadow: 0px 9px 30px -6px rgba(17, 17, 17, 0.3)
}
.icon-dark i {
  color: #111111
}
.icon-dark.icon-hover:hover {
  box-shadow: 0px 15px 35px 0px rgba(17, 17, 17, 0.35);
  transform: translate3d(0, -0.5rem, 0)
}
.breadcrumb {
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  list-style: none;
  background-color: #e9ecef;
  border-radius: 0.35rem
}
.breadcrumb::after {
  display: block;
  clear: both;
  content: ""
}
.breadcrumb-item {
  float: left
}
.breadcrumb-item+.breadcrumb-item::before {
  display: inline-block;
  padding-right: 0.5rem;
  padding-left: 0.5rem;
  color: #868e96;
  content: "/"
}
.breadcrumb-item+.breadcrumb-item:hover::before {
  text-decoration: underline;
  text-decoration: none
}
.breadcrumb-item.active {
  color: #868e96
}
.pagination {
  display: flex;
  padding-left: 0;
  list-style: none;
  border-radius: 0.35rem
}
.page-item:first-child .page-link {
  margin-left: 0;
  border-top-left-radius: 0.35rem;
  border-bottom-left-radius: 0.35rem
}
.page-item:last-child .page-link {
  border-top-right-radius: 0.35rem;
  border-bottom-right-radius: 0.35rem
}
.page-item.active .page-link {
  z-index: 2;
  color: #fff;
  background-color: #007bff;
  border-color: #007bff
}
.page-item.disabled .page-link {
  color: #868e96;
  pointer-events: none;
  background-color: rgba(255, 255, 255, 0.2);
  border-color: #ddd
}
.page-link {
  position: relative;
  display: block;
  padding: 0.5rem 0.75rem;
  margin-left: -1px;
  line-height: 1.25;
  color: #046960;
  background-color: rgba(255, 255, 255, 0.4);
  border: 1px solid #ddd
}
.page-link:focus, .page-link:hover {
  color: #0056b3;
  text-decoration: none;
  background-color: #dee2e6;
  border-color: #ddd
}
.pagination-lg .page-link {
  padding: 0.75rem 1.5rem;
  font-size: 1.25rem;
  line-height: 1.5
}
.pagination-lg .page-item:first-child .page-link {
  border-top-left-radius: 0.4rem;
  border-bottom-left-radius: 0.4rem
}
.pagination-lg .page-item:last-child .page-link {
  border-top-right-radius: 0.4rem;
  border-bottom-right-radius: 0.4rem
}
.pagination-sm .page-link {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25
}
.pagination-sm .page-item:first-child .page-link {
  border-top-left-radius: 0.3rem;
  border-bottom-left-radius: 0.3rem
}
.pagination-sm .page-item:last-child .page-link {
  border-top-right-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem
}
.pagination-wrapper {
  text-align: center;
}
.pagination {
  display: inline-block;
  height: 35px;
  padding: 0 25px;
  border-radius: 35px;
  /*background-color: #eee;*/
}
@media only screen and (max-width: 1199px) {
  .pagination {
    height: 50px;
    padding: 0 10px;
    border-radius: 25px;
  }
}
.page-numbers {
  display: block;
  padding: 0 15px;
  float: left;
  transition: 400ms ease;
  color: #595959;
  font-size: 15px;
  letter-spacing: 0.1em;
  line-height: 35px;
}
.page-numbers:hover, .page-numbers.current {
  background-color: #009688;
  color: #fff;
  color: #ffffff;
  background-color: #FBB40D;
  border-color: transparent;
  box-shadow: 0 2px 0 #FF9800;
  border-radius: 6px;
}
.page-numbers.prev:hover, .page-numbers.next:hover {
  background-color: transparent;
  color: #ff5722;
  box-shadow: 0 0px 0 #ff5722;
}
@media only screen and (max-width: 1199px) {
  .page-numbers {
    padding: 0 15px;
    font-size: 16px;
    line-height: 35px;
  }
}
@media only screen and (min-width: 120px) and (max-width: 1024px) {
  .page-numbers {
    padding: 0 14px;
    display: none;
  }
  .page-numbers:nth-of-type(2) {
    position: relative;
    padding-right: 50px;
  }
  .page-numbers:nth-of-type(2)::after {
    content: "...";
    position: absolute;
    font-size: 25px;
    top: 0;
    left: 45px;
  }
  .page-numbers:nth-child(-n+3), .page-numbers:nth-last-child(-n+3) {
    display: block;
  }
  .page-numbers:nth-last-child(-n+4) {
    padding-right: 14px;
  }
  .page-numbers:nth-last-child(-n+4)::after {
    content: none;
  }
}
.btn-circle {
  width: 40px;
  height: 40px;
  line-height: 40px;
  padding: 0;
  margin-right: 10px;
  text-align: center;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%
}
.input-group {
  position: relative;
  display: flex;
  width: 100%
}
.input-group .form-control {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  width: 1%;
  margin-bottom: 0
}
.input-group .form-control:focus, .input-group .form-control:active, .input-group .form-control:hover {
  z-index: 3
}
.input-group-addon, .input-group-btn, .input-group .form-control {
  display: flex;
  align-items: center
}
.input-group-addon:not(:first-child):not(:last-child), .input-group-btn:not(:first-child):not(:last-child), .input-group .form-control:not(:first-child):not(:last-child) {
  border-radius: 0
}
.input-group-addon, .input-group-btn {
  white-space: nowrap;
  vertical-align: middle
}
.input-group-addon {
  padding: 0.5rem 1rem;
  margin-bottom: 0;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.25;
  color: #9e9e9e;
  text-align: center;
  background-color: #f5f5f5;
  border: 0px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.35rem;
}
.input-group-addon.form-control-sm {
  padding: 0.25rem 1.25rem;
  font-size: 0.875rem;
  border-radius: 0.3rem
}
.input-group-sm>.input-group-addon, .input-group-sm>.input-group-btn>.input-group-addon.btn {
  padding: 0.25rem 1.25rem;
  font-size: 0.875rem;
  border-radius: 0.3rem
}
.input-group-addon.form-control-lg {
  padding: 1rem 2.25rem;
  font-size: 1.25rem;
  border-radius: 0.4rem
}
.input-group-lg>.input-group-addon, .input-group-lg>.input-group-btn>.input-group-addon.btn {
  padding: 1rem 2.25rem;
  font-size: 1.25rem;
  border-radius: 0.4rem
}
.input-group-addon input[type="radio"], .input-group-addon input[type="checkbox"] {
  margin-top: 0
}
.input-group .form-control:not(:last-child), .input-group-addon:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0
}
.input-group-btn:not(:last-child)>.btn, .input-group-btn:not(:last-child)>.btn-group>.btn, .input-group-btn:not(:last-child)>.dropdown-toggle {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0
}
.input-group-btn:not(:first-child)>.btn:not(:last-child):not(.dropdown-toggle), .input-group-btn:not(:first-child)>.btn-group:not(:last-child)>.btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0
}
.input-group-addon:not(:last-child) {
  border-right: 0
}
.input-group .form-control:not(:first-child), .input-group-addon:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0
}
.input-group-btn:not(:first-child)>.btn, .input-group-btn:not(:first-child)>.btn-group>.btn, .input-group-btn:not(:first-child)>.dropdown-toggle {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0
}
.input-group-btn:not(:last-child)>.btn:not(:first-child), .input-group-btn:not(:last-child)>.btn-group:not(:first-child)>.btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0
}
.form-control+.input-group-addon:not(:first-child) {
  border-left: 0
}
.input-group-btn {
  position: relative;
  font-size: 0;
  white-space: nowrap
}
.input-group-btn>.btn {
  position: relative
}
.input-group-btn>.btn+.btn {
  margin-left: -1px
}
.input-group-btn>.btn:focus, .input-group-btn>.btn:active, .input-group-btn>.btn:hover {
  z-index: 3
}
.input-group-btn:not(:last-child)>.btn, .input-group-btn:not(:last-child)>.btn-group {
  margin-right: -1px
}
.input-group-btn:not(:first-child)>.btn, .input-group-btn:not(:first-child)>.btn-group {
  z-index: 2;
  margin-left: -1px
}
.input-group-btn:not(:first-child)>.btn:focus, .input-group-btn:not(:first-child)>.btn:active {
  z-index: 3
}
.input-group-btn:not(:first-child)>.btn-group:focus, .input-group-btn:not(:first-child)>.btn-group:active {
  z-index: 3
}
.input-group-btn:not(:first-child)>.btn:hover, .input-group-btn:not(:first-child)>.btn-group:hover {
  z-index: 3
}
.styled-checkbox {
  position: absolute;
  opacity: 0;
}
.styled-checkbox + label {
  position: relative;
  cursor: pointer;
  padding: 0;
  display: inline-block;
  height: 35px;
  color: rgba(0, 0, 0, 0.54);
  transition: color 200ms ease;
}
.styled-checkbox + label:before {
  content: "";
  margin-right: 10px;
  display: inline-block;
  vertical-align: text-top;
  width: 20px;
  height: 20px;
  background: #eeeeee;
}
.styled-checkbox:hover + label:before {
  background: #009485;
}
.styled-checkbox:focus + label:before {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}
.styled-checkbox:checked + label:before {
  background: #009485;
}
.styled-checkbox:disabled + label {
  color: #b8b8b8;
  cursor: auto;
}
.styled-checkbox:disabled + label:before {
  box-shadow: none;
  background: #ddd;
}
.styled-checkbox:checked + label:after {
  content: "";
  position: absolute;
  left: 5px;
  top: 9px;
  background: white;
  width: 2px;
  height: 2px;
  box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
  transform: rotate(45deg);
}
.styled-checkbox:checked + .radio__label {
  color: rgba(0, 0, 0, 0.87);
}
.custom-control {
  position: relative;
  display: inline-flex;
  min-height: 1.5rem;
  padding-left: 1.5rem;
  margin-right: 1rem
}
.custom-control-input {
  position: absolute;
  z-index: -1;
  opacity: 0
}
.custom-control-input:checked~.custom-control-indicator {
  color: #fff;
  background-color: #ff5722;
  box-shadow: none
}
.custom-control-input:focus~.custom-control-indicator {
  box-shadow: 0 0 0 1px #dee2e6, 0 0 0 3px #007bff
}
.custom-control-input:active~.custom-control-indicator {
  color: #fff;
  background-color: #b3d7ff;
  box-shadow: none
}
.custom-control-input:disabled~.custom-control-indicator {
  background-color: #e9ecef
}
.custom-control-input:disabled~.custom-control-description {
  color: #868e96
}
.custom-control-indicator {
  position: absolute;
  top: 0.25rem;
  left: 0;
  display: block;
  width: 1rem;
  height: 1rem;
  pointer-events: none;
  user-select: none;
  background-color: #ddd;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 50% 50%;
  box-shadow: inset 0 0.25rem 0.25rem rgba(0, 0, 0, 0.1)
}
.custom-checkbox .custom-control-indicator {
  /*border-radius: 0.35rem*/
  border: 1px solid #ced4da;
  background-color: #fff;
  box-shadow: inset 0 0.25rem 0.25rem rgb(0 0 0 / 0%);
}
.custom-checkbox .custom-control-input:checked~.custom-control-indicator {
  background-image: url("data:image/svg+xml;\a             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-checkbox .custom-control-input:indeterminate~.custom-control-indicator {
  background-color: #007bff;
  background-image: url("data:image/svg+xml;\a             charset=utf8,%3Csvg xmlns='http: //www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='%23fff' d='M0 2h4'/%3E%3C/svg%3E");
  box-shadow: none
}
.custom-radio .custom-control-indicator {
  border-radius: 50%
}
.custom-radio .custom-control-input:checked~.custom-control-indicator {
  background-image: url("data:image/svg+xml;\a         charset=utf8,%3Csvg xmlns='http: //www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E")
}
.custom-controls-stacked {
  display: flex;
  flex-direction: column
}
.custom-controls-stacked .custom-control {
  margin-bottom: 0.25rem
}
.custom-controls-stacked .custom-control+.custom-control {
  margin-left: 0
}
.custom-controls-stacked.sidelong {
  flex-direction: initial;
}
@media (max-width: 700px) {
  .custom-controls-stacked.sidelong {
    flex-direction: column;
  }
}

.custom-file {
  position: relative;
  display: inline-block;
  max-width: 100%;
  height: 2.5rem;
  margin-bottom: 0
}
.custom-file-input {
  min-width: 14rem;
  max-width: 100%;
  height: 2.5rem;
  margin: 0;
  opacity: 0
}
.custom-file-input:focus~.custom-file-control {
  box-shadow: 0 0 0 0.075rem #fff, 0 0 0 0.2rem #007bff
}
.custom-file-control {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 5;
  height: 2.5rem;
  padding: 0.5rem 1rem;
  line-height: 1.5;
  color: #495057;
  pointer-events: none;
  user-select: none;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.35rem;
  box-shadow: inset 0 0.2rem 0.4rem rgba(0, 0, 0, 0.05)
}
.custom-file-control:lang(en):empty::after {
  content: "Choose file..."
}
.custom-file-control::before {
  position: absolute;
  top: -1px;
  right: -1px;
  bottom: -1px;
  z-index: 6;
  display: block;
  height: 2.5rem;
  padding: 0.5rem 1rem;
  line-height: 1.5;
  color: #495057;
  background-color: #e9ecef;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0 0.35rem 0.35rem 0
}
.custom-file-control:lang(en)::before {
  content: "Browse"
}
.table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 1rem;
  background-color: transparent
}
.table th, .table td {
  padding: 0.75rem;
  vertical-align: middle;
  border-top: 1px solid #e9ecef
}
.table thead th {
  vertical-align: bottom;
  border-bottom: 2px solid #e9ecef
}
.table tbody+tbody {
  border-top: 2px solid #e9ecef
}
.table .table {
  background-color: #dee2e6
}
.table td .img {
  width: 60px;
}
.table td label {
  display: block;
}
.table-sm th, .table-sm td {
  padding: 0.3rem
}
.table-bordered {
  border: 1px solid #e9ecef
}
.table-bordered th, .table-bordered td {
  border: 1px solid #e9ecef
}
.table-bordered thead th, .table-bordered thead td {
  border-bottom-width: 2px
}
.table-striped tbody tr:nth-of-type(odd) {
  background-color: #F5F7FA
}
.table-hover tbody tr:hover {
  background-color: rgba(0, 0, 0, 0.075)
}
.table-primary {
  background-color: #b8daff
}
.table-primary>th, .table-primary>td {
  background-color: #b8daff
}
.table-hover .table-primary:hover {
  background-color: #9fcdff
}
.table-hover .table-primary:hover>td, .table-hover .table-primary:hover>th {
  background-color: #9fcdff
}
.table-secondary {
  background-color: #d9cfea
}
.table-secondary>th, .table-secondary>td {
  background-color: #d9cfea
}
.table-hover .table-secondary:hover {
  background-color: #cbbde2
}
.table-hover .table-secondary:hover>td, .table-hover .table-secondary:hover>th {
  background-color: #cbbde2
}
.table-success {
  background-color: #c3e6cb
}
.table-success>th, .table-success>td {
  background-color: #c3e6cb
}
.table-hover .table-success:hover {
  background-color: #b1dfbb
}
.table-hover .table-success:hover>td, .table-hover .table-success:hover>th {
  background-color: #b1dfbb
}
.table-info {
  background-color: #b8e7fc
}
.table-info>th, .table-info>td {
  background-color: #b8e7fc
}
.table-hover .table-info:hover {
  background-color: #a0dffb
}
.table-hover .table-info:hover>td, .table-hover .table-info:hover>th {
  background-color: #a0dffb
}
.table-warning {
  background-color: #ffeeba
}
.table-warning>th, .table-warning>td {
  background-color: #ffeeba
}
.table-hover .table-warning:hover {
  background-color: #ffe8a1
}
.table-hover .table-warning:hover>td, .table-hover .table-warning:hover>th {
  background-color: #ffe8a1
}
.table-danger {
  background-color: #f5c6cb
}
.table-danger>th, .table-danger>td {
  background-color: #f5c6cb
}
.table-hover .table-danger:hover {
  background-color: #f1b0b7
}
.table-hover .table-danger:hover>td, .table-hover .table-danger:hover>th {
  background-color: #f1b0b7
}
.table-light {
  background-color: #f9fafb
}
.table-light>th, .table-light>td {
  background-color: #f9fafb
}
.table-hover .table-light:hover {
  background-color: #eaedf1
}
.table-hover .table-light:hover>td, .table-hover .table-light:hover>th {
  background-color: #eaedf1
}
.table-dark {
  background-color: #bcbcbc
}
.table-dark>th, .table-dark>td {
  background-color: #bcbcbc
}
.table-hover .table-dark:hover {
  background-color: #afafaf
}
.table-hover .table-dark:hover>td, .table-hover .table-dark:hover>th {
  background-color: #afafaf
}
.table-active {
  background-color: rgba(0, 0, 0, 0.075)
}
.table-active>th, .table-active>td {
  background-color: rgba(0, 0, 0, 0.075)
}
.table-hover .table-active:hover {
  background-color: rgba(0, 0, 0, 0.075)
}
.table-hover .table-active:hover>td, .table-hover .table-active:hover>th {
  background-color: rgba(0, 0, 0, 0.075)
}
.thead-inverse th {
  color: #dee2e6;
  background-color: #111111
}
.thead-default th {
  color: #495057;
  background-color: #e9ecef
}
.table-inverse {
  color: #dee2e6;
  background-color: #111111
}
.table-inverse th, .table-inverse td, .table-inverse thead th {
  border-color: #242424
}
.table-inverse.table-bordered {
  border: 0
}
.table-inverse.table-striped tbody tr:nth-of-type(odd) {
  background-color: #F5F7FA
}
.table-inverse.table-hover tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.075)
}
.table .but-download i {
  font-size: 2rem;
  cursor: pointer;
  color: #757575;
}
.table .custom-control {
  padding-left: 0;
  margin-right: 0;
}
.table .custom-control-indicator {
  left: 11px;
}
.table .textp2 {
  width: 54px;
}
.table .textp3 {
  width: 69px;
}
.table .textp6 {
  width: 211px;
}
.table .button {
  margin: 3px 3px;
  display: inline;
  letter-spacing: 1px;
  height: auto;
}
.table .button a {
  transition: all 0s cubic-bezier(0.42, 0, 0.58, 1);
}
@media (max-width: 1145px) {
  .table .but-array {
    display: grid;
  }
  .table .textp6 {
    width: 84px;
  }
  .table .three-butbox {
    height: 30px;
    display: block;
    margin-bottom: 12px;
  }
}
@media (max-width: 991px) {
  .table,
  .table .font-16 {
    font-size: 12px;
  }
  .table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -ms-overflow-style: -ms-autohiding-scrollbar
  }
  .table-responsive.table-bordered {
    border: 0
  }
  .table .textp4 {
    width: 84px;
  }
  .table .textp5 {
    width: 100px;
  }
}
@media (max-width: 768px) {
  .table-responsive .button {
    padding: 7px 4px;
    width: 47px;
    text-align: center;
  }
  .table thead th,
  .table td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 479px;
  }
}
.fc-state-default {
  text-shadow: none;
  box-shadow: none
}
.fc-basic-view .fc-body .fc-row {
  min-height: 5rem
}
.fc-toolbar .fc-button-group {
  border: 1px solid #009688;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px
}
.fc-toolbar .fc-button {
  background: #009688;
  color: #fff;
  border: none;
  text-transform: uppercase
}
.fc-toolbar .fc-button:hover {
  background: #4d7cff;
  opacity: 1;
  filter: alpha(opacity=100)
}
.fc-toolbar .fc-button.fc-state-active {
  background: #fff;
  color: #009688
}
.fc-widget-header {
  border: 0px !important
}
.fc-widget-content {
  border-color: rgba(120, 130, 140, 0.13) !important
}
.fc-widget-content tr {
  border-bottom: none
}
.fc-view {
  margin-top: 0px
}
.fc-toolbar {
  margin: 0px;
  padding: 25px 0
}
.fc-event {
  border: none;
  cursor: move;
  color: #fff !important;
  font-size: 13px;
  margin: 1px -1px 0 -1px;
  padding: 5px 5px;
  text-align: center;
  background: #d93025;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  border-radius: 2px
}
.fc td.fc-today {
  background: #F5F7FA
}
.calendar-add-button {
  position: fixed;
  bottom: 15px;
  right: 15px;
  background: #d93025;
  color: white;
  width: 54px;
  height: 54px;
  line-height: 54px;
  text-align: center;
  font-size: 24px;
  z-index: 4;
  cursor: pointer;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  -webkit-box-shadow: 0 14px 24px rgba(62, 57, 107, 0.1);
  -moz-box-shadow: 0 14px 24px rgba(62, 57, 107, 0.1);
  box-shadow: 0 14px 24px rgba(62, 57, 107, 0.1)
}
.calendar-add-button:hover {
  background: #e15950;
  color: white
}
.tree {
  position: relative;
  padding: 30px;
  font-family: monospace;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  background: #f7f7f7;
  border-left: 3px solid #d93025
}
.tree span {
  font-size: 13px;
  font-style: italic;
  letter-spacing: .4px;
  color: #76838f
}
.tree .fa-folder {
  color: #2c398f
}
.tree .fa-folder-open {
  color: #009688
}
.tree .fa-html5 {
  color: #DD6777
}
.tree ul {
  padding: 0 0 0 5px;
  margin: 0;
  list-style: none
}
.tree ul li {
  position: relative;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 15px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
}
.tree ul li:before {
  position: absolute;
  top: 15px;
  left: 0;
  width: 14px;
  height: 1px;
  margin: auto;
  content: '';
  background-color: rgba(0, 0, 0, 0.25)
}
.tree ul li:after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 100%;
  content: '';
  background-color: rgba(0, 0, 0, 0.25)
}
.tree ul li:last-child:after {
  height: 15px
}
.tree ul a {
  cursor: pointer
}
.tree ul a:hover {
  text-decoration: none
}
#loginPage {
  position: relative;
  background: white
}
#loginPage:before {
  content: " ";
  position: absolute;
  left: 463.75px;
  right: 0;
  top: 0;
  height: 100vh;
  background: url("../../images/demo/bg.jpg") no-repeat center right;
  background-size: cover
}
#loginPage .login-box {
  position: fixed;
  /* top: 0; */
  /* left: 0; */
  /* z-index: 1055; */
  /* display: none; */
  width: 100%;
  height: 100%;
  /* overflow-x: hidden; */
  /* overflow-y: auto; */
  /* outline: 0; */
  /* display: block;*/
}
#loginPage .login {
  position: initial;
  width: 463.75px;
  max-width: 100%;
  height: 100vh;
  left: 0;
  top: 0;
  overflow: hidden;
  z-index: 3;
  min-height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: auto;
  height: calc(100% - 3.5rem);
  transform: none;
  max-width: 680px;
  margin: 1.75rem auto;
}
#loginPage .login .logo {
  display: block;
  width: 100%;
  /*height: 65px;*/
  overflow: hidden;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 0.05em
}
#loginPage .login .logo {
  display: grid;
  /*height: 65px*/
  text-align: center;
}
#loginPage .login .logo .logo-emblem {
  display: block;
  color: #009688;
  text-align: center;
}
#loginPage .login .logo .logo-emblem img {
  max-width: 70px;
  max-height: 70px
}
#loginPage .login .logo .logo-full {
  display: block;
  font-size: 28px;
}
#loginPage .login .logo .logo-gloze {
  font-size: 15px;
  color: #778591;
  font-weight: 100;
}
#loginPage .login .login-container {
  /*position: relative;*/
  /*height: 100vh;*/
  width: 100%;
  background: white;
  -webkit-box-shadow: 10px 0 35px 0 rgba(50, 50, 93, 0.27);
  -moz-box-shadow: 10px 0 35px 0 rgba(50, 50, 93, 0.27);
  box-shadow: 10px 0 35px 0 rgba(50, 50, 93, 0.27);
  border: 2px solid rgba(0, 0, 0, 0.065);
}
#loginPage .login .login-form {
  display: block;
  padding: 2rem 4rem;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%)
}
#loginPage .login .login-form.small-gutter {
  padding: 45px 50px
}
#loginPage .login .login-form h5 {
  margin-top: 15px;
  font-size: 15px
}
#loginPage .login .login-form .form-group {
  padding: 0;
  margin-bottom: 15px;
  position: relative;
  display: block
}
#loginPage .login .login-form .form-group label {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 25px;
  width: 36px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  color: #707070;
  -webkit-transition: all 0.1s ease;
  -moz-transition: all 0.1s ease;
  -ms-transition: all 0.1s ease;
  -o-transition: all 0.1s ease;
  transition: all 0.1s ease
}
#loginPage .login .login-form .form-group input {
  width: 100%;
  background: #ffffff;
  border-radius: 0px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  height: 50px;
  line-height: 50px;
  padding: 0 15px 0 45px;
  color: #37474f;
  -webkit-transition: all 0.1s ease;
  -moz-transition: all 0.1s ease;
  -ms-transition: all 0.1s ease;
  -o-transition: all 0.1s ease;
  transition: all 0.1s ease
}
#loginPage .login .login-form .form-group input:focus {
  outline: none;
  border-color: #37474f;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  -webkit-transition: all 0.1s ease;
  -moz-transition: all 0.1s ease;
  -ms-transition: all 0.1s ease;
  -o-transition: all 0.1s ease;
  transition: all 0.1s ease
}
#loginPage .login .login-form .form-group input:focus~label {
  border-color: #37474f;
  color: #ff5722;
  -webkit-transition: all 0.1s ease;
  -moz-transition: all 0.1s ease;
  -ms-transition: all 0.1s ease;
  -o-transition: all 0.1s ease;
  transition: all 0.1s ease
}
#loginPage .login .login-form .form-group input::placeholder {
  color: #a3acb5;
}
#loginPage .login .login-form .form-group input:-internal-autofill-selected {
  background-color: -internal-light-dark(rgb(232, 240, 254), rgba(70, 90, 126, 0.4)) !important;
}
#loginPage .login .login-form .form-group .select-box {
  font-size: 15px;
  position: relative;
  height: 50px;
  line-height: 50px;
  border: 1px solid rgba(0, 0, 0, 0.1)
}
#loginPage .login .login-form .form-group .select-box select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 40px;
  padding-left: 65px;
  border: none;
  background: transparent;
  color: #37474f
}
#loginPage .login .login-form .form-group .select-box select option:disabled {
  color: #76838f
}
#loginPage .login .login-form .form-group .select-box:after {
  position: absolute;
  right: 0;
  top: 0;
  content: '\21F5';
  pointer-events: none;
  padding: 0 15px;
  color: #76838f;
  height: 50px;
  line-height: 50px
}
#loginPage .login .login-form .login-button {
  margin-top: 7px;
  font-size: 10px;
}
#loginPage .login .login-form .login-button .forgot-password,
#loginPage .login .login-form .login-button .forgot-signuup {
  display: inline-block;
  font-weight: normal;
  color: #76838f;
  font-size: 10px;
}
#loginPage .login .login-form .login-button .forgot-password:hover,
#loginPage .login .login-form .login-button .forgot-signuup:hover {
  color: #009688
}
#loginPage .login .login-form .login-facebook {
  text-align: center;
  margin-top: 0px
}
#loginPage .login .login-info {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 60px;
  background: #d93025;
  background: url("../images/hero/workout-female.png") no-repeat center center;
  background-size: cover
}
#loginPage .login .login-info .register-info {
  display: block;
  text-align: center;
  padding: 15px;
  background: rgba(255, 255, 255, 0.85);
  -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1)
}
@media screen and (max-width: 768px) {
  #loginPage .login .login-form {
    padding: 30px
  }
  #loginPage .login .logo {
    margin-bottom: 30px
  }
}
@media (max-width: 820px) {
  .m-main-header {
    min-height: 40%;
  }
}
@media (max-width: 767px) {
  #loginPage {
    padding: 0;
    height: 100vh
  }
  #loginPage:before {
    left: 0;
    width: 100%;
    background-position: center center
  }
  #loginPage .page-container {
    height: 100vh
  }
  #loginPage .login {
    width: 100%;
    height: auto;
    padding: 15px;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  #loginPage .login .login-container {
    height: auto
  }
  #loginPage .login .login-container .login-form {
    top: 0;
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }
}
#error {
  min-height: calc(100vh - 180px);
  height: 80vh
}
#error .error-box {
  max-width: 800px;
  text-align: center;
  padding: 30px 30px 60px;
  margin: 0 auto;
  background: white;
  -webkit-box-shadow: 0 10px 45px 0 rgba(7, 61, 125, 0.1);
  -moz-box-shadow: 0 10px 45px 0 rgba(7, 61, 125, 0.1);
  box-shadow: 0 10px 45px 0 rgba(7, 61, 125, 0.1);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%)
}
#error .error-box .error-image {
  display: block;
  text-align: center;
  margin-bottom: 2rem
}
#error .error-box .error-image img {
  max-width: 100%
}
#error .error-box h1 {
  font-size: 2rem
}
@media (min-width: 768px) {
  body:not(.mobile).boxed {
    max-width: 1200px;
    position: relative;
    margin: 0 auto
  }
  body:not(.mobile).boxed .page-container {
    background: white;
    -webkit-box-shadow: 0 2px 5px 0 rgba(62, 57, 107, 0.1);
    -moz-box-shadow: 0 2px 5px 0 rgba(62, 57, 107, 0.1);
    box-shadow: 0 2px 5px 0 rgba(62, 57, 107, 0.1)
  }
  body:not(.mobile).horizontal .topbar {
    position: relative;
    padding-left: 0 !important;
    z-index: 15
  }
  body:not(.mobile).horizontal .topbar .menu-toggle {
    display: none
  }
  body:not(.mobile).horizontal .topbar .logo {
    display: block
  }
  body:not(.mobile).horizontal .sidebar {
    position: relative;
    width: 100%;
    height: 52px;
    overflow: visible;
    z-index: 10;
    white-space: nowrap
  }
  body:not(.mobile).horizontal .sidebar .logo {
    display: none
  }
  body:not(.mobile).horizontal .sidebar ul {
    display: flex
  }
  body:not(.mobile).horizontal .sidebar ul li.profile, body:not(.mobile).horizontal .sidebar ul li.spacer, body:not(.mobile).horizontal .sidebar ul li.title {
    display: none
  }
  body:not(.mobile).horizontal .sidebar ul li.nav-item {
    position: relative
  }
  body:not(.mobile).horizontal .sidebar ul li.nav-item>a {
    padding: 0 15px
  }
  body:not(.mobile).horizontal .sidebar ul li.nav-item>a>i {
    width: auto;
    margin-right: 10px
  }
  body:not(.mobile).horizontal .sidebar ul li.nav-item>a>i.down-arrow {
    margin-right: 0;
    margin-left: 10px;
    position: relative;
    display: inline-block;
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg)
  }
  body:not(.mobile).horizontal .sidebar ul li.nav-item>a:not(.collapsed):not(.nav-single) .down-arrow {
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg)
  }
  body:not(.mobile).horizontal .sidebar ul li.nav-item>div {
    position: absolute;
    background: white;
    -webkit-box-shadow: 0 14px 24px rgba(62, 57, 107, 0.1);
    -moz-box-shadow: 0 14px 24px rgba(62, 57, 107, 0.1);
    box-shadow: 0 14px 24px rgba(62, 57, 107, 0.1)
  }
  body:not(.mobile).horizontal .sidebar ul li.nav-item>div ul.sub-menu li {
    display: block;
    width: 100%
  }
  body:not(.mobile).horizontal .sidebar ul li.nav-item>div ul.sub-menu li>a {
    padding: 0 25px
  }
  body:not(.mobile).horizontal .sidebar ul li.nav-item>div ul.sub-menu li>a>i {
    width: auto;
    margin-right: 10px
  }
  body:not(.mobile).horizontal .sidebar ul li.button-container {
    padding-top: 5px
  }
  body:not(.mobile).horizontal main {
    padding: 0;
    margin: 0
  }
}
main {
  padding-top: 65px;
  padding-left: 65px;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease
}
.list-group .list-group-item {
  background-color: initial;
  border: 0px solid rgba(0,0,0,.125);
}
.app-email .list-group .list-group-item {
  padding: 0;
  border: none;
  background: transparent
}
.app-email .list-group .list-group-item.list-group-item-title {
  padding: 10px 15px;
  background: transparent;
  font-weight: bold
}
.app-email .list-group .list-group-item a {
  padding: 10px 15px;
  background: transparent
}
.app-email .list-group .list-group-item a:hover {
  background: white
}
.app-email .list-group .list-group-item.active a {
  background: white;
  -webkit-box-shadow: 0 2px 5px 0 rgba(62, 57, 107, 0.1);
  -moz-box-shadow: 0 2px 5px 0 rgba(62, 57, 107, 0.1);
  box-shadow: 0 2px 5px 0 rgba(62, 57, 107, 0.1)
}
.note-color-row {
  width: 160px
}
.dropdown-item pre {
  padding: 0;
  border: none;
  background: transparent;
  margin: 0;
  padding: 0;
  font-family: monospace;
  font-size: 15px
}
.note-editor.note-frame {
  border-color: rgba(0, 0, 0, 0.1)
}
.page-breadcrumb {
  padding: 15px
}
.page-breadcrumb h1, .page-breadcrumb h2, .page-breadcrumb h3, .page-breadcrumb h4, .page-breadcrumb h5 {
  margin: 0 0 5px
}
    .page-breadcrumb .page-title {
        font-size: 20px;
        margin: 0 0 5px;
        margin: 0;
    }
.page-breadcrumb .breadcrumb {
  background: transparent;
  padding: 0;
  margin: 0;
  font-size: 13px
}
.modal {
  visibility: collapse;
  /*opacity: 0;*/
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /*background: rgba(77, 77, 77, .7);*/
  transition: all .4s;
}
.modal:target {
  visibility: visible;
  opacity: 1;
}
.modal.show {
  visibility: inherit;
}
.modal-dialog {
  min-height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: auto;
}
.modal-dialog-scrollable .modal-content {
  border-radius: 3px;
}
.modal-body {
  border-radius: 4px;
  position: relative;
  background: #fff;
  padding: 1em 2em;
}
.modal-body .close_box {
  font-size: 1.5rem;
}
.modal-body .small_print p {
  margin-bottom: 7px;
}
.modal-body .small_print .button {
  width: 100%;
  letter-spacing: 0px;
  font-size: .1rem;
  display: block;
  border-radius: 3px;
  text-align: center;
}
.modal-title {
  font-size: 2em;
  margin: 0.67em 0;
}
.modal-footer {
  display: block;
  border-top: 0px solid #dee2e6;
}
.modal__close {
  color: #585858;
  text-decoration: none;
}
.modal__but {
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  color: #FFF;
  text-transform: uppercase;
  outline: none;
  font-weight: bold;
  background: linear-gradient(to right, #009688, #29ca7f);
  text-decoration: none;
  letter-spacing: 2px;
  border-radius: 4px;
}
.modal__but:hover {
  background: linear-gradient(to right, #C1CFD9, #b5c3cc);
  color: #fff;
}
.modal-content {
  border: none;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  border-radius: 0;
  -webkit-box-shadow: 0 14px 24px rgba(62, 57, 107, 0.1);
  -moz-box-shadow: 0 14px 24px rgba(62, 57, 107, 0.1);
  box-shadow: 0 14px 24px rgba(62, 57, 107, 0.1)
}
.modal-content .modal-title {
  font-size: 20px;
  font-weight: normal
}
@media (max-width: 767.98px) {
  .modal-dialog-scrollable .modal-content {
    height: auto;
  }
  .modal-content {
    width: 50%;
  }
  .modal-footer .col {
    margin-bottom: 0.5rem;
  }
}
@media (max-width: 500px) {
  .modal-content {
    width: 90%;
  }
}




.course-selection-box .selection-top {
  background-color: #f8f9fa;
  padding: 13px;
  border-bottom: 2px solid #e9ecef;
}

.course-selection-box .selection-title {
  font-weight: bold;
  color: #212529;
}

.course-selection .table .but-array {
  display: table-cell;
}

.course-selection .accordion-button {
  padding-left: 48px;
}

.course-selection .accordion-button::before {
  content: "";
  background-repeat: no-repeat;
  background-size: 1.25rem;
  transition: transform .2s ease-in-out;
  width: 12px;
  height: 12px;
  position: absolute;
  left: 5px;
  bottom: 15px;
  margin: 0 10px;
  border-left: 2px solid #000;
  border-bottom: 2px solid #000;
  -webkit-transform: translate(0,-50%) rotate(-135deg);
  transform: translate(0,-50%) rotate(-135deg);
}

.course-selection .accordion-button:not(.collapsed)::before {
  transform: rotate(316deg);
  bottom: 23px;
}

.course-selection .accordion-button::after {
  content: "";
  display: none;
}

.course-selection .accordion-button:not(.collapsed) {
  color: #009688;
  background-color: #fff;
  box-shadow: inset 0 0px 0 rgb(0 0 0 / 13%);
}

.course-selection .accordion-header {
  display: flex;
}

.course-selection .but-array {
  /*width: 80px;*/
  display: flex;
  align-items: center;
  justify-content: center;
}

.course-selection .but-array .set-but {
  width: 30px;
}
.course-selection .set-but {
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.course-selection .but-array .set-but a {
  padding: 3px;
  font-size: 20px;
}

.course-selection .accordion-collapse {
 background-color: #f9f9f9;
}

.course-selection .accordion-body {
  margin-left: 6%;
  padding: 0rem;
}

.course-selection .accordion_sel {
  display: flex;
  padding: 1rem 0rem;
}

.course-selection .accordion_sel.next_level {
  padding: 0;
}

.course-selection .accordion_sel.next_level .accordion-button {
  background-color: #f9f9f9;
  padding: 1rem 0rem;
}

.course-selection .accordion_sel.next_level .accordion-button::before {
  left: -35px;
}

.course-selection .accordion_subcategory {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.modal-dialog.tap_2 {
  max-width: 100%;
}
.modal-dialog.tap_2 .modal-content {
  width: 95%;
}


@media (max-width: 1220px) {
  .course-selection .but-array {
    width: 84px;
  }
}
@media (max-width: 953px) {
  .course-selection .border-w-1 {
    width: 30%;
  }
  .course-selection .border-w-2 {
    width: 20%;
  }
}
@media (max-width: 808px) {
  .course-selection .table .but-array {
    padding: 0.75rem 0;
  }
}
@media (max-width: 768px) {
  .table-responsive.course-selection .button {
    padding: 7px 11px;
  }
}
@media (max-width: 678px) {
  .course-selection .accordion-body {
    margin-left: 7%;
  }
}
@media (max-width: 575px) {
  .modal-dialog.tap_2 .subject-box {
    display: block;
  }
  .subject-box.style3 .col-5,
  .subject-box.style3 .col-2 {
    width: 100%!important;
  }
  .modal-dialog.tap_2 .modal-content .modal-body {
    padding-top: 5px;
  }
  .subject-box.style3 .col-2 .subject-info-arrows {
    margin-top: 1rem!important;
    display: flex;
  }
  .subject-box.style3 .subject-info-arrows .btn.btn-default {
    margin: 0 12px;
  }
  .subject-box.style3 select.form-control {
    height: 95px!important;
  }
  .subject-box.style3 .jumo_but {
    padding-top: 1rem!important;
  }
  .modal-dialog.tap_2 .subject-info-arrows .btn.btn-default {
    transform: translate(0,0%) rotate(90deg);
    margin: 0 37px;
  }
}
@media (max-width: 500px) {
  .modal-dialog.tap_2 .leave_button {
    display: block;
  }
  .modal-dialog.tap_2 .subject-info-arrows .btn.btn-default {
    margin: 0 1.4rem;
    padding: 0;
    height: 50px;
    width: 50px;
  }
}
@media (max-width: 460px) {
  .course-selection .accordion-header {
    display: initial;
    display: flow-root;
    padding-bottom: 10px;
  }
  .course-selection .but-array {
    display: inline-table;
  }
  .course-selection .set-but {
    float: right;
    width: 130px;
    height: 38px;
    /*justify-content: right;*/
  }
  .course-selection .but-array .set-but {
    width: auto;
    height: 0px;
    right: 130px;
    position: absolute;
  }
  .course-selection .accordion_sel .but-array {
    right: 130px;
    position: absolute;
  }
  .course-selection .accordion_sel .set-but {
    position: absolute;
    right: 0;
    height: 21px;
  }
  .course-selection .accordion_sel.next_level {
    display: inline-flex;
    align-items: center;
  }
  .course-selection .accordion_sel.next_level .set-but {
    height: 0px;
  }
}
@media (min-width: 576px) {
  .modal-dialog.tap_1 {
    max-width: 680px;
    max-width: 80%;
  }
  .modal-dialog.tap_2 {
    max-width: 570px;
  }
  .modal-dialog.tap_2 .modal-content {
    width: 100%;
  }
  .modal-dialog.modal-fullscreen-md-down.tap_2 {
    margin: 1.75rem auto;
  }
}
@media (min-width: 700px) {
  .modal-dialog.tap_2 {
    max-width: 680px;
  }
}
@media (min-width: 991px) {
  .modal-dialog.tap_2 {
    max-width: 900px;
  }
}
/* =====  Uploads ===== */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  src: url(https://fonts.gstatic.com/s/opensans/v29/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4gaVc.ttf) format('truetype');
}
.uploads .border-right {
  display: block;
}
.uploads .border-right ul {
  display: inline-block;
}
.uploads .border-right i {
  font-size: 4.5rem;
  color: #6c6c6c;
  float: right;
  margin-right: 12px;
}
.setting {
  background: #fff;
  padding: 0 12px;
}
.setting h2 {
  color: #999;
  font-size: 14px;
  font-weight: 400;
  margin: 0 0 6px;
  line-height: 24px;
}
.setting a[data-action] {
  cursor: pointer;
  color: #555;
  font-size: 14px;
  line-height: 24px;
  transition: color 0.2s;
}
.setting a[data-action] i {
  width: 1.25em;
  text-align: center;
}
.setting a[data-action]:hover {
  color: #f80;
}
.setting a[data-action].disabled {
  opacity: 0.35;
  cursor: default;
}
.setting a[data-action].disabled:hover {
  color: #555;
}
.image_picker .settings_wrap {
  overflow: hidden;
  position: relative;
}
.image_picker .settings_wrap .drop_target,
.image_picker .settings_wrap .settings_actions {
  float: left;
}
.image_picker .settings_wrap .drop_target {
  margin-right: 18px;
}
.image_picker .settings_wrap .settings_actions {
  margin-top: 12px;
}
.settings_actions.vertical a {
  display: block;
}
.drop_target {
  position: relative;
  cursor: pointer;
  background: hsl(0, 0%, 90%);
  border-top: 1px solid hsl(0, 0%, 80%);
  border-radius: 4px;
  width: 72px;
  height: 72px;
  padding: 4px 6px 6px;
  transition: all 0.2s;
}
.drop_target input[type="file"] {
  visibility: hidden;
}
.drop_target:before {
  content: '\f0ee';
  font-family: FontAwesome;
  position: absolute;
  display: block;
  width: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 32px;
  color: rgba(0, 0, 0, 0.3);
  transition: color 0.2s;
}
.drop_target:hover,
.drop_target.dropping {
  background: #009688;
  border-top-color: #009688;
}
.drop_target:hover:before,
.drop_target.dropping:before {
  color: rgba(0, 0, 0, 0.6);
}
.drop_target .image_preview {
  width: 100%;
  height: 100%;
  background: no-repeat center;
  background-size: contain;
  position: relative;
  z-index: 2;
}
.image_details {
  width: 192px;
  padding: 4px;
  background: hsl(0, 0%, 90%);
  border-radius: 4px;
  position: absolute;
  top: 0;
  left: 84px;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
}
.dropped ~ .image_details {
  opacity: 1;
  pointer-events: all;
}
.image_details:before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-right-color: hsl(0, 0%, 90%);
  position: absolute;
  left: -12px;
  top: 10px;
}
.image_details .input_line {
  display: block;
  overflow: hidden;
  margin-bottom: 4px;
}
.image_details .input_line:last-of-type {
  margin-bottom: 0;
}
.image_details .input_line span,
.image_details .input_line input {
  float: left;
  line-height: 24px;
}
.image_details .input_line span {
  font-size: 12px;
  color: #666;
  width: 20%;
}
.image_details .input_line input[type="text"] {
  width: 100%;
  color: #444444;
  appearance: none;
  border: 1px solid hsl(0, 0%, 90%);
  border-radius: 3px;
  background: #fff;
  height: 24px;
  line-height: 18px;
  padding: 3px 5px;
  font-size: 14px;
  transition: border 0.2s;
}
.image_details .input_line input[type="text"]:hover,
.image_details .input_line input[type="text"]:focus {
  outline: 0;
  border: 1px solid #f80;
}
.image_details .input_line input[type="text"]::-webkit-input-placeholder {
  font-size: 14px;
  color: #999;
}
.image_details a.confirm {
  position: absolute;
  right: -12px;
  top: 50%;
  margin-top: -12px;
  display: block;
  width: 21px;
  height: 21px;
  border-radius: 100%;
  background: #eee;
  line-height: 23px;
  text-align: center;
  font-size: 16px;
}
.dropzone-but {
  width: auto;
  display: inline-block;
}
.dropzone {
  /*position: absolute;*/
  z-index: 1;
  box-sizing: border-box;
  display: table;
  table-layout: fixed;
  width: 100%;
  height: 130px;
  /*top: 86px;*/
  /*left: 100px;*/
  /*border: 1px dashed #A4A4A4;*/
  border-radius: 3px;
  text-align: center;
  overflow: hidden;
}
.dropzone.is-dragover {
  border-color: #666;
  background: #eee;
}
.dropzone .content {
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 100%;
  height: 125px;
  background: hsl(0, 0%, 90%);
  border-top: 1px solid hsl(0, 0%, 80%);
  border-radius: 4px;
}
.dropzone .upload {
  margin: 6px 0 0 2px;
}
.dropzone .filename {
  display: block;
  color: #676767;
  font-size: 14px;
  line-height: 18px;
  position: absolute;
}
.dropzone .input {
  position: absolute;
  width: 100%;
  height: 130px;
  opacity: 0;
  cursor: pointer;
}
.upload-btn {
  position: absolute;
  width: 140px;
  height: 40px;
  left: 80px;
  bottom: 24px;
  background: #6ECE3B;
  border-radius: 3px;
  text-align: center;
  line-height: 40px;
  font-size: 14px;
  box-shadow: 0 2px 0 0 #498C25;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
.upload-btn:hover {
  box-shadow: 0 2px 0 0 #498C25, 0 2px 10px 0 #6ECE3B;
}
.bar {
  position: absolute;
  z-index: 1;
  width: 300px;
  height: 3px;
  top: 49px;
  left: 0;
  background: #6ECE3B;
  transition: all 3s ease-out;
  transform: scaleX(0);
  transform-origin: 0 0;
}
.bar.active {
  transform: scaleX(1) translate3d(0, 0, 0);
}

.syncing {
  position: absolute;
  top: 109px;
  left: 134px;
  opacity: 0;
}
.syncing.active {
  -webkit-animation: syncing 3.2s ease-in-out;
          animation: syncing 3.2s ease-in-out;
}

.done {
  position: absolute;
  top: 112px;
  left: 132px;
  opacity: 0;
}
.done.active {
  -webkit-animation: done 0.5s ease-in 3.2s;
          animation: done 0.5s ease-in 3.2s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

@-webkit-keyframes syncing {
  0% {
    transform: rotate(0deg);
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: rotate(360deg);
    opacity: 0;
  }
}

@keyframes syncing {
  0% {
    transform: rotate(0deg);
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: rotate(360deg);
    opacity: 0;
  }
}
@-webkit-keyframes done {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes done {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* ===== diverse list box ===== */
.diverse-list-table .textp3 {
  width: 15%;
}
.diverse-list-table .set-but {
  height: 42px;
  width: 30px;
  padding: 10px;
  font-size: 20px;
}
.diverse-list-table .dropdown-menu {
  padding: 0;
}
.diverse-list-table .dropdown-menu a:hover {
  color: #fff;
  background: linear-gradient(to right, #009688, #29ca7f) !important;
}
.diverse-list-table .dropdown-menu .fas {
 margin-right: 7px;
 width: 20px;
}
.fa-maru:before {
  content: '';
  width: 7px !important;
  height: 7px !important;
  background: #212529;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  position: absolute;
  margin-top: -9px;
  margin-left: 4px;
}
.diverse-list-table .dropdown-menu a:hover .fa-maru:before {
  background: #fff;
}

/* ===== toggle box ===== */
.toggle-box {
  display: none;
}
.toggle-box + label {
  cursor: pointer;
  display: block;
  font-weight: bold;
  line-height: 21px;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.toggle-box + label:before {
  background-color: #4F5150;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  color: #FFFFFF;
  content: "+";
  display: block;
  float: right;
  font-weight: bold;
  height: 20px;
  line-height: 20px;
  margin-right: 5px;
  text-align: center;
  width: 20px;
}
.toggle-box + label + div {
  display: none;
  margin-bottom: 10px;
}
.toggle-box:checked + label:before {
  content: "−";
}
.toggle-box:checked + label + div {
  display: block;
  padding: 10px;
}

.toggle-box-all {
  display: none;
}
.toggle-box-all + label {
  cursor: pointer;
  display: block;
  font-weight: bold;
  line-height: 21px;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.toggle-box-all:checked + label + .level1 .toggle-box + label + div {
  display: block !important;
}

/* ===== File Picker ===== */
.file_picker {
  height: 390px;
}
.file_picker i {
  width: 17px;
  margin-right: 7px;
}
.file_picker .nav-link:focus,
.file_picker .nav-link:hover {
  color: #009688;
}
.file_picker .nav-item a:hover {
  background: #f7f7f7;
}
.file_picker .nav-item a::before {
  content: "MORE";
  position: absolute;
  transition: all .65s .1s;
  transform: translateX(0px);
  padding: 0.5rem 0;
  margin-top: -8px;
  color: #f7f7f700;
}
.file_picker .nav-item a:hover::before {
  transform: translateX(-45px);
  opacity: .7;
  background: #f7f7f7;
}
.file_picker .flex-column .nav-item a:hover {
  color: #fff;
  background: linear-gradient(to right, #009688, #29ca7f);
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
.file_picker .flex-column .nav-item a::before {
  content: "MORE";
  position: absolute;
  transition: all .65s .1s;
  transform: translateX(0px);
  padding: 0.5rem 0;
  margin-top: -8px;
  opacity: 0;
  color: #f7f7f700;
}
.file_picker .flex-column .nav-item a:hover::before {
  transform: translateX(-45px);
  opacity: 1;
  background: #009688;
}
.file_picker .fileupload .btn-primary {
  width: auto;
  margin: 0;
}
.clearfix {
  *zoom:1;
}
.clearfix:before,
.clearfix:after {
  display:table;
  content:"";
  line-height:0;
}
.clearfix:after {
  clear:both;
}
.hide-text {
  font:0/0 a;
  color:transparent;
  text-shadow:none;
  background-color:transparent;
  border:0;
}
.input-block-level {
  display:block;
  width:100%;
  min-height:30px;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
.btn-file {
  overflow:hidden;
  position:relative;
  vertical-align:middle;
}
.btn-file>input {
  position:absolute;
  top:0;
  right:0;
  margin:0;
  opacity:0;
  filter:alpha(opacity=0);
  transform:translate(-300px, 0) scale(4);
  font-size:23px;
  direction:ltr;
  cursor:pointer;
}
.fileupload {
  margin-bottom:9px;
  display: inline-flex;
}
.fileupload .uneditable-input {
  display: inline-block;
  margin-bottom: 0px;
  vertical-align: middle;
  cursor: text;
}
.fileupload .thumbnail {
  overflow: hidden;
  display: inline-block;
  margin-bottom: 5px;
  vertical-align: middle;
  text-align: center;
}
.fileupload .thumbnail>img {
  display: inline-block;
  vertical-align: middle;
  max-height: 100%;
}
.fileupload .btn {
  vertical-align: middle;
}
.fileupload-exists .fileupload-new, .fileupload-new .fileupload-exists {
  display: none;
}
.fileupload-inline .fileupload-controls {
  display: inline;
}
.fileupload-new .input-append .btn-file {
  -webkit-border-radius: 0 3px 3px 0;
  -moz-border-radius: 0 3px 3px 0;
  border-radius: 0 3px 3px 0;
}
.thumbnail-borderless .thumbnail {
  border: none;
  padding: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
.fileupload-exists .fileupload-preview {
  background-color: #f5f5f5;
  margin-left: 0.5em;
  padding: 0 0.2rem;
  width: 60%;
  line-height: 28px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 479px;
}
.fileupload-exists .close.fileupload-exists {
  float: none;
  width: 34.5px;
  border: none;
  background-color: #d65d38;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fileupload-new.thumbnail-borderless .thumbnail {
  border: 1px solid #ddd;
}
.control-group.warning .fileupload .uneditable-input {
  color: #a47e3c;
  border-color: #a47e3c;
}
.control-group.warning .fileupload .fileupload-preview {
  color: #a47e3c;
}
.control-group.warning .fileupload .thumbnail {
  border-color: #a47e3c;
}
.control-group.error .fileupload .uneditable-input {
  color: #b94a48;
  border-color: #b94a48;
}
.control-group.error .fileupload .fileupload-preview {
  color: #b94a48;
}
.control-group.error .fileupload .thumbnail {
  border-color: #b94a48;
}
.control-group.success .fileupload .uneditable-input {
  color: #468847;
  border-color: #468847;
}
.control-group.success .fileupload .fileupload-preview {
  color: #468847;
}
.control-group.success .fileupload .thumbnail {
  border-color: #468847;
}
/* ===== Accordion ===== */
.accordion_box {
  padding: 0;
}
.collapsible-header {
  display: block;
  cursor: pointer;
  min-height: 3rem;
  /*line-height: 3rem;*/
  height: 50px;
  padding: 0 1rem;
  background-color: #fff;
  border-bottom: 4px solid #f4f7fa;
}
.collapsible-header a {
  display: inline-flex;
  align-items: center;
  height: 50px;
}
.active .collapsible-header {
  border-bottom: 0px solid #f4f7fa;
}
.collapsible-header i {
  width: 27px;
  height: 27px;
  font-size: 1rem;
  line-height: 25px;
  display: block;
  float: right;
  text-align: center;
  border: 1px solid #9e9e9e;
  border-radius: 50rem!important;
  margin: 11px;
}
.active .collapsible-header i.fa-plus,
.collapsible-header i.fa-minus {
  display: none;
}
.collapsible-header i.fa-plus,
.active .collapsible-header i.fa-minus {
  display: block;
}
.collapsible-body {
  display: none;
  border-bottom: 4px solid #f4f7fa;
  box-sizing: border-box;
}
.collapsible-time {
  margin: 0 20px;
}
.collapsible-time .row.toku {
  display: block;
}

.title-masengi .red {
  padding: 0 7px;
  color:red;
  width: 80px;
  height: 80px;
  border-radius: 999em;
  color: white;
  background-color: #B71C1C;
  margin-left: 7px;
}
/* ===== marubox ===== */
.marubox .col-box {
  background-color: #EEEEEE;
  padding: 1rem;
  text-align: center;
}
.marubox .col-3 {
  padding-top: .5rem;
  padding-bottom: .5rem;
}
.marubox .col-box i {
  font-size: 30px;
}

/* ===== Horizontal Rule ===== */
.rule {
  margin: 10px 0;
  border: none;
  height: 1.5px;
  background-image: linear-gradient(left, #f0f0f0, #c9bbae, #f0f0f0);
}

/* ===== Select Box ===== */
.sel {
  /*font-size: 1rem;*/
  /*display: inline-block;*/
  /*margin: 3em 2em;*/
  /*width: 350px;*/
  background-color: transparent;
  position: relative;
  cursor: pointer;
}

.sel::before {
  position: absolute;
  content: '\f063';
  font-family: 'FontAwesome';
  font-size: 2em;
  color: #FFF;
  right: 20px;
  /*top: calc(50% - 0.5em);*/
  content: '';
  width: 8px;
  height: 8px;
  position: absolute;
  right: 5px;
  bottom: 5px;
  border-left: 2px solid #787f86;
  border-bottom: 2px solid #787f86;
  -webkit-transform: translate(0,-50%) rotate(-135deg);
  transform: translate(0,-50%) rotate(-135deg);
}

.sel.active::before {
  transform: translate(0,-50%) rotate(313deg);
}

.sel__placeholder {
  display: block;
  font-family: 'Quicksand';
  /*font-size: 2.3em;*/
  color: #212529;
  color: #787f86;
  padding: 0.2em 0.5em;
  text-align: left;
  pointer-events: none;
  user-select: none;
  visibility: visible;
}

.sel.active .sel__placeholder {
  visibility: hidden;
}

.sel__placeholder::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.2em 0.5em;
  content: attr(data-placeholder);
  visibility: hidden;
}

.sel.active .sel__placeholder::before {
  visibility: visible;
}

.sel__box {
  position: absolute;
  top: calc(100% + 4px);
  left: -4px;
  display: none;
  list-style-type: none;
  text-align: left;
  font-size: 1em;
  background-color: #FFF;
  width: calc(100% + 8px);
  box-sizing: border-box;
}

.sel.active .sel__box {
  display: block;
  animation: fadeInUp 500ms;
  box-shadow: 0 2px 5px 0 rgb(62 57 107 / 10%);
  z-index: 99;
}

.sel .sel__box {
  animation: fadeInUp 500ms;
  box-shadow: 0 2px 5px 0 rgb(62 57 107 / 10%);
  z-index: 99;
}

.sel__box__options {
  display: list-item;
  font-family: 'Quicksand';
  color: #838e95;
  padding: 0.5em 1em;
  user-select: none;
}

.sel__box__options::after {
  content: '\f00c';
  font-family: 'FontAwesome';
  font-size: 0.5em;
  margin-left: 5px;
  display: none;
}

.sel__box__options.selected {
  background-color: #e0e0e0;
}

.sel__box__options.selected::after {
  display: inline;
}

.sel__box__options:hover {
  background-color: #ebedef;
}
.form-control.sel {
	border-radius: 0px;
	padding: 0.2em 0.5em;
}
.form-control.sel:focus {
	box-shadow: 0 0 1rem 0 rgb(140 152 164 / 0%);
	border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
.form-control.sel.styl_1 {
  border: 1px solid rgba(0, 0, 0, 0.3);
}
/* ----- Select Box Black Panther ----- */
.sel {
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
.sel--black-panther {
  /*z-index: 3;*/
}
.sel.w40 {
  width: 40%;
  float: left;
  margin-right: 15px;
}

/* ----- Select Box Superman ----- */
.sel--superman {
/*   display: none; */
  z-index: 2;
}
.sel.form-control2 {
  display: flex;
  align-items: center;
  outline: none;
  display: block;
  background: rgba(0, 0, 0, 0.04);
  /*background: rgb(0 0 0 / 0%);*/
  width: 100%;
  border: 0;
  border-radius: 4px;
  /*border-radius: 0px;*/
  box-sizing: border-box;
  padding: 12px 20px;
  color: rgba(0, 0, 0, 0.6);
  font-family: inherit;
  font-size: inherit;
  font-weight: 500;
  line-height: inherit;
  transition: 0.3s ease;
}
.sel.form-control2::before {
  top: calc(50% - 0em);
  right: 15px;
}
.sel.form-control2 .sel__placeholder {
  padding: 0;
}
.sel.form-control2 .sel__placeholder::before {
  padding: 12px 20px;
}
.small-print {
  font-size: .5rem;
  margin-top: 6px;
}

.title-masengi ul {
  background-color: #F5F5F5;
  padding: 1rem;
  color: #37474f;
}

.selectMultiple {
  width: 100%;
  position: relative;
}
.selectMultiple select {
  display: none;
}
.selectMultiple > div {
  position: relative;
  z-index: 2;
  padding: 8px 12px 2px 12px;
  /*border-radius: 8px;*/
  background: #fff;
  font-size: 14px;
  min-height: 44px;
  /*box-shadow: 0 4px 16px 0 rgba(22, 42, 90, 0.12);*/
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  transition: box-shadow 0.3s ease;
}
.selectMultiple > div:hover {
  /*box-shadow: 0 4px 24px -1px rgba(22, 42, 90, 0.16);*/
}
.selectMultiple > div .arrow {
  right: 1px;
  top: 0;
  bottom: 0;
  cursor: pointer;
  width: 28px;
  height: 47px;
  position: absolute;
}
.selectMultiple > div .arrow:before, .selectMultiple > div .arrow:after {
  content: "";
  position: absolute;
  display: block;
  width: 2px;
  height: 8px;
  border-bottom: 8px solid #797f86;
  top: 43%;
  transition: all 0.3s ease;
}
.selectMultiple > div .arrow:before {
  right: 12px;
  transform: rotate(-130deg);
}
.selectMultiple > div .arrow:after {
  left: 9px;
  left: 14px;
  transform: rotate(130deg);
  top: 15px;
}
.selectMultiple > div span {
  color: #99A3BA;
  display: block;
  position: absolute;
  left: 12px;
  cursor: pointer;
  top: 8px;
  line-height: 28px;
  transition: all 0.3s ease;
  width: 100%;
}
.selectMultiple > div span.hide {
  opacity: 0;
  /*visibility: hidden;*/
  transform: translate(-4px, 0);
}
.selectMultiple > div a {
  position: relative;
  padding: 0 24px 6px 8px;
  line-height: 28px;
  color: #1E2330;
  display: inline-block;
  vertical-align: top;
  margin: 0 6px 0 0;
}
.selectMultiple > div a em {
  font-style: normal;
  display: block;
  white-space: nowrap;
}
.selectMultiple > div a:before {
  content: "";
  left: 0;
  top: 0;
  bottom: 6px;
  width: 100%;
  position: absolute;
  display: block;
  background: rgba(228, 236, 250, 0.7);
  background: rgb(158 158 158 / 11%);
  z-index: -1;
  border-radius: 4px;
}
.selectMultiple > div a i {
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 28px;
  display: block;
}
.selectMultiple > div a i:before, .selectMultiple > div a i:after {
  content: "";
  display: block;
  width: 2px;
  height: 10px;
  position: absolute;
  left: 50%;
  top: 50%;
  background: #4D18FF;
  background: #a30b2b;
  border-radius: 1px;
}
.selectMultiple > div a i:before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.selectMultiple > div a i:after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.selectMultiple > div a.notShown {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.selectMultiple > div a.notShown:before {
  width: 28px;
  transition: width 0.45s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.2s;
}
.selectMultiple > div a.notShown i {
  opacity: 0;
  transition: all 0.3s ease 0.3s;
}
.selectMultiple > div a.notShown em {
  opacity: 0;
  transform: translate(-6px, 0);
  transition: all 0.4s ease 0.3s;
}
.selectMultiple > div a.notShown.shown {
  opacity: 1;
}
.selectMultiple > div a.notShown.shown:before {
  width: 100%;
}
.selectMultiple > div a.notShown.shown i {
  opacity: 1;
}
.selectMultiple > div a.notShown.shown em {
  opacity: 1;
  transform: translate(0, 0);
}
.selectMultiple > div a.remove:before {
  width: 28px;
  transition: width 0.4s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0s;
}
.selectMultiple > div a.remove i {
  opacity: 0;
  transition: all 0.3s ease 0s;
}
.selectMultiple > div a.remove em {
  opacity: 0;
  transform: translate(-12px, 0);
  transition: all 0.4s ease 0s;
}
.selectMultiple > div a.remove.disappear {
  opacity: 0;
  transition: opacity 0.5s ease 0s;
}
.selectMultiple > ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 16px;
  z-index: 1;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  visibility: hidden;
  opacity: 0;
  border-radius: 8px;
  transform: translate(0, 20px) scale(0.8);
  transform-origin: 0 0;
  filter: drop-shadow(0 12px 20px rgba(22, 42, 90, 0.08));
  transition: all 0.4s ease, transform 0.4s cubic-bezier(0.87, -0.41, 0.19, 1.44), filter 0.3s ease 0.2s;
}
.selectMultiple > ul li {
  color: #1E2330;
  background: #fff;
  padding: 12px 16px;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease 0.3s, opacity 0.5s ease 0.3s, border-radius 0.3s ease 0.3s;
}
.selectMultiple > ul li:first-child {
  border-radius: 8px 8px 0 0;
}
.selectMultiple > ul li:first-child:last-child {
  border-radius: 8px;
}
.selectMultiple > ul li:last-child {
  border-radius: 0 0 8px 8px;
}
.selectMultiple > ul li:last-child:first-child {
  border-radius: 8px;
}
.selectMultiple > ul li:hover {
  background: #4D18FF;
  background: #e6e6e6;
  /*color: #fff;*/
}
.selectMultiple > ul li:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  border-radius: 100%;
  transform: scale(1, 1) translate(-50%, -50%);
  transform-origin: 50% 50%;
}
.selectMultiple > ul li.beforeRemove {
  border-radius: 0 0 8px 8px;
}
.selectMultiple > ul li.beforeRemove:first-child {
  border-radius: 8px;
}
.selectMultiple > ul li.afterRemove {
  border-radius: 8px 8px 0 0;
}
.selectMultiple > ul li.afterRemove:last-child {
  border-radius: 8px;
}
.selectMultiple > ul li.remove {
  transform: scale(0);
  opacity: 0;
}
.selectMultiple > ul li.remove:after {
  -webkit-animation: ripple 0.4s ease-out;
          animation: ripple 0.4s ease-out;
}
.selectMultiple > ul li.notShown {
  display: none;
  transform: scale(0);
  opacity: 0;
  transition: transform 0.35s ease, opacity 0.4s ease;
}
.selectMultiple > ul li.notShown.show {
  transform: scale(1);
  opacity: 1;
}
.selectMultiple.open > div {
  /*box-shadow: 0 4px 20px -1px rgba(22, 42, 90, 0.12);*/
}
.selectMultiple.open > div .arrow:before {
  transform: rotate(-50deg);
  top: 17px;
  border-bottom: 14px solid #797f86;
}
.selectMultiple.open > div .arrow:after {
  transform: rotate(50deg);
  top: 17px;
  border-bottom: 14px solid #797f86;
}
.selectMultiple.open > ul {
  transform: translate(0, 12px) scale(1);
  opacity: 1;
  visibility: visible;
  filter: drop-shadow(0 16px 24px rgba(22, 42, 90, 0.16));
}

@-webkit-keyframes ripple {
  0% {
    transform: scale(0, 0);
    opacity: 1;
  }
  25% {
    transform: scale(30, 30);
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(50, 50);
  }
}

@keyframes ripple {
  0% {
    transform: scale(0, 0);
    opacity: 1;
  }
  25% {
    transform: scale(30, 30);
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(50, 50);
  }
}

/* ===== switch but ===== */
.switch-box {
  display: inline-block;
  margin-left: 2rem;
  margin-top: .7rem;
  position: absolute;
}
.switch-title {
  float: left;
  margin-top: 20px;
}
.switch {
  position: absolute;
  width: 150px;
  height: 37px;
  text-align: center;
  background: #009688;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  transition: all 0.2s ease;
  border-radius: 25px;
}
.switch span {
  position: absolute;
  width: 20px;
  height: 4px;
  top: 50%;
  left: 50%;
  margin: -2px 0px 0px -4px;
  background: #fff;
  display: block;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  transition: all 0.2s ease;
  border-radius: 2px;
}
.switch span:after {
  content: "";
  display: block;
  position: absolute;
  width: 4px;
  height: 12px;
  margin-top: -8px;
  background: #fff;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  transition: all 0.2s ease;
  border-radius: 2px;
}
.switch-box input[type=radio] {
  display: none;
}
.switch label {
  cursor: pointer;
  color: rgba(0,0,0,0.2);
  width: 60px;
  line-height: 37px;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.switch-box label[for=yes] {
  position: absolute;
  left: 0px;
  height: 20px;
}
.switch-box label[for=no] {
  position: absolute;
  right: 0px;
}
#no:checked ~ .switch {
  background: #ef5350;
}
#no:checked ~ .switch span {
  background: #fff;
  margin-left: -8px;
}
#no:checked ~ .switch span:after {
  background: #fff;
  height: 20px;
  margin-top: -8px;
  margin-left: 8px;
}
#yes:checked ~ .switch label[for=yes] {
  color: #fff;
}
#no:checked ~ .switch label[for=no] {
  color: #fff;
}

/* ===== subject ===== */
.subject-box h3 {
  background: rgba(0, 0, 0, 0.04);
  text-align: center;
  font-size: 1rem;
  padding: 10px;
  margin-bottom: 0;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  border: 1px solid #e0e0e0;
  border-bottom-width: 0px;
  color: #717a82;
}
.subject-box select.form-control {
  background: rgb(255 255 255 / 4%);
  border: 1px solid #e0e0e0;
  border-top-width: 0px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  padding: 0;
  height: 250px;
}
.subject-box option {
  border-bottom: 1px solid #e0e0e0;
  padding: 0.3rem 0.5rem;
}
.subject-info-box-1 select option:hover,
.subject-info-box-2 select option:hover {
  background: #EEEEEE;
}
.subject-info-arrows {
  float: left;
  display: inline-grid;
  margin: 12px 15px;
  margin-top: 8rem;
}
.subject-info-arrows input {
  width: 100%;
  display: -ms-flexbox;
  margin-bottom: 5px;
  padding: 0 20px;
  box-shadow: 0 2px 2px 0 rgb(0 0 0 / 0%), 0 3px 1px -2px rgb(0 0 0 / 0%), 0 1px 5px 0 rgb(0 0 0 / 0%);
}
.subject-info-arrows .btn.btn-default {
  background-color: #f5f5f5;
  font-size: 15px;
  padding: 7px;
}
.subject-box.style2 {
  margin-top: 1rem;
}
.subject-box.style2 select.form-control {
  border-radius: 4px;
  border: 0px solid #e0e0e0;
  background: rgb(245 245 245);
}
.subject-box.style2 .subject-info-arrows {
  margin: 9px 14px;
}
.subject-box.style2 .btn {
  border: 0px solid transparent;
}
.subject-box.style3 .col-5 {
  width: 45.666667%;
}
.subject-box.style3 .col-2 {
  width: 8.666667%;
  padding: 0;
}
.subject-box.style3 .col-2 .subject-info-arrows {
  margin: 12px 0px;
  margin-top: 5rem;
}
.subject-box.style3 .custom-control {
  margin-right: 3rem;
}
.subject-box.style3 .jumo_but {
  padding-bottom: 0;
  padding-top: 2rem;
}
/* ===== border-line ===== */
.border-right {
  border-right: 1px solid #9e9e9e;
}
/* ===== Keyframes ===== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}
/* ===== leave_button ===== */
.leave_button {
  height: 36px!important;
  position: absolute;
  top: 10px;
  right: 17px;
}
.fixed-tr {
  position: absolute;
  top: 13px;
  right: 15px;
}
.list-but a {
  display: block;
}
.list-but-box .btn {
  border: 0px solid transparent;
}
.card.app-detail .list-but-box a {
  color: #3c4e56;
  display: flex;
  align-items: center;
}
.card.app-detail .list-but-box a:hover .avatar {
  background: #C1CFD9;
}
.card.app-detail .list-but-box .avatar i {
  color: #fff;
  margin-right: auto;
  margin-top: 7px;
}
.list-but-box .avatar {
  box-sizing: border-box;
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  margin-left: 5px;
  margin-right: 1px;
}
.list-but-box .dropdown-toggle::after {
  display: block;
  margin-left: 0;
  vertical-align: 0;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
}
.list-but-box ul.dropdown-menu i {
  font-size: 6px;
}
@media(max-width: 500px) {
  .leave_button {
    display: none;
  }
  .leave_button.sp {
    box-sizing: border-box;
    background: #009688;
    display: block;
    width: 30px;
    height: 30px!important;
    border-radius: 15px;
    position: absolute;
    top: 13px;
    right: 15px;
    z-index: 60;
    cursor: pointer;
  }
}
@media(min-width: 500px) {
  .leave_button.sp {
    display: none;
  }
}
/* ===== Datepicker ===== */
.wrapper {
  display: block;
  /*margin: 0.625rem 0.3125rem;*/
  padding: 0.2em 0.5em;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
.wrapper.text {
  max-width: 25rem;
  border: solid 1px #e3e3e3;
  padding: 0.9375rem;
  margin-bottom: 0.9375rem;
}

input.hasDatepicker {
	width: 100%;
  cursor: pointer;
  border: 0px solid rgba(0, 0, 0, 0.3);
}
input.hasDatepicker :focus-visible {
	outline: 0px solid black;
}
.wrapper:after {
  content: '\f133';
  font-family: FontAwesome;
  position: absolute;
  display: initial;
  width: auto;
  line-height: inherit;
  text-align: center;
  font-size: 1.2rem;
  color: #9E9E9E;
  transition: color 0.2s;
  margin-left: -1rem;
}

.lease_box .card {
  margin-bottom: 1rem;
}
.lease_box .card-body h3 {
  margin-bottom: 1rem;
}
.lease_box input {
  outline: none;
}
.lease_box .bg-light {
  background-color: #9e9e9e70!important;
}
.lease_box .background_color {
  background-color: #9e9e9e0f;
}
.lease_box .lease_time {
  width: 135px;
}
.lease_box .table td {
  border-top: 0px solid #e9ecef;
}
.lease_box .table-responsive .wrapper {
  border-bottom: 0px solid rgba(0, 0, 0, 0.3);
  position: absolute;
  width: 135px;
  padding: 0em 0.5em;
  z-index: 1;
}
.lease_box .fa-pen {
  /*position: absolute;*/
  /*top: 13px;*/
  font-size: 15px;
  color: #959799;
  z-index: 0;
  float: right;
  margin-top: 6px;
}
.lease_box input.hasDatepicker {
  background-color: #00ffff00;
}
.lease_box input.hasDatepicker::placeholder {
  color: #212529;
}
.lease_box .user-name {
  display: flex;
  justify-content: center;
}
.lease_box .card-body .user-name h3 {
  font-size: 22px;
  margin-bottom: 0;
}
.lease_box .company-name {
  display: flex;
  align-items: center;
  justify-content: center;
}
.lease_box .card-body .company-name h3 {
  margin-bottom: 0;
}
@media (max-width: 991px) {
  .lease_box .lease_time {
    width: 125px;
  }
  .lease_box .table-responsive .wrapper {
    width: 110px;
  }
  .lease_box .fa-pen {
    margin-top: 4px;
  }
}
@media (max-width: 953px) {
  .lease_box .course-selection .border-w-2 {
    width: auto;
  }
}
@media (max-width: 860px) {
  .lease_box .card-body .user-name span {
    font-size: 12px;
  }
}
@media (max-width: 768px) {
  .lease_box .col {
    margin-bottom: 15px;
  }
}
@media (max-width: 585px) {
  .lease_box .lease_time {
    width: 113px;
  }
  .lease_box .table td {
    white-space: initial;
  }
  .lease_box .table-responsive .table td {
    padding: 0.75rem 0.4rem;
  }
}
@media (max-width: 550px) {
  .lease_box .fa-pen {
    font-size: 13px;
    margin-top: 5px;
  }
}
@media (max-width: 470px) {
  .lease_box .table td {
    white-space: nowrap;
  }
  .lease_box .lease_time {
    padding: 0.75rem 2rem;
  }
  .lease_box .table-responsive .wrapper {
    position: inherit;
  }
  .lease_box .fa-pen {
    margin-top: -15px;
  }
}


.ui-datepicker {
  border-width: 0;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  width: 18.5rem;
}
.ui-datepicker.ui-corner-all {
  z-index: 10!important;
  z-index: 1055!important;
}
@media (max-width: 480px) {
  .ui-datepicker {
    width: 17rem;
  }
}
.ui-datepicker.ui-corner-all {
  border-radius: 0;
}
.ui-datepicker .ui-datepicker-header {
  background: #FBB40D;
  padding: 15px 0;
  border-width: 0;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  cursor: pointer;
  top: 15px;
}
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
  background: transparent;
  width: 0px;
  height: 0px;
  border-width: 5px 9px;
  border-style: solid;
  border-color: transparent;
  margin-top: 0;
  top: 32%;
}
.ui-datepicker .ui-datepicker-prev span {
  left: 59%;
  border-right-color: #fff;
  border-left-width: 0;
}
.ui-datepicker .ui-datepicker-next span {
  left: 67%;
  border-left-color: #fff;
  border-right-width: 0;
}
.ui-datepicker .ui-datepicker-title {
  text-shadow: none;
}
.ui-datepicker .ui-datepicker-title select {
  border: 0;
  height: 27px;
  width: 45%;
  width: calc(49% - 5px);
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #414141;
  padding-left: 5px;
}
.ui-datepicker .ui-datepicker-title select:focus {
  outline: none;
}
.ui-datepicker .ui-datepicker-title .ui-datepicker-month {
  margin-right: 5px;
}
.ui-datepicker .ui-datepicker-title .ui-datepicker-year {
  margin-left: 5px;
}
.ui-datepicker .ui-datepicker-buttonpane button {
  -webkit-transition: all 0.15s ease-in-out;
  -moz-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
  background: #fff;
  border: 0px;
  font-weight: 600;
  margin: 10px 5px;
  padding: 5px 12px;
  font-size: 16px;
  text-transform: uppercase;
}
.ui-datepicker .ui-datepicker-buttonpane button[data-handler=today]:hover, .ui-datepicker .ui-datepicker-buttonpane button[data-handler=today]:active {
  opacity: 1;
  color: #4f4f4f;
}
.ui-datepicker .ui-datepicker-buttonpane button[data-handler=hide]:hover, .ui-datepicker .ui-datepicker-buttonpane button[data-handler=hide]:active {
  color: #DD5044;
}
.ui-datepicker table {
  margin-top: 0.625rem;
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-size: 14px;
}
.ui-datepicker th {
  font-weight: 600;
  text-transform: uppercase;
}
.ui-datepicker th.ui-datepicker-week-end * {
  color: #DD5044;
}
.ui-datepicker td span,
.ui-datepicker td a {
  padding: 0.4em 0.2em;
  font-size: 14px;
  text-align: center;
}
.ui-datepicker td .ui-state-default.ui-state-hover {
  border-color: transparent;
  text-shadow: none;
  background: #ededed;
  font-weight: normal;
  color: inherit;
}
.ui-datepicker td .ui-state-highlight {
  border-color: transparent;
}
.ui-datepicker td .ui-state-active,
.ui-datepicker td .ui-state-active.ui-state-highlight,
.ui-datepicker td .ui-state-active.ui-state-hover {
  text-shadow: none;
  font-weight: 400;
  background: #ff5722;
  border-color: #ff5722;
  color: #fff;
}
.ui-datepicker td.ui-datepicker-week-end * {
  color: #949494;
}
.ui-datepicker td.ui-datepicker-week-end .ui-state-active {
  color: #fff;
}
.ui-datepicker .ui-datepicker-today {
  border: solid 1px #dbdbdb;
}
.ui-datepicker .ui-widget-content {
  border-color: #e3e3e3;
}
.ui-datepicker .ui-widget-content [type=button] {
  font-size: 14px;
  font-family: "Roboto", Helvetica, Arial, sans-serif;
}

.ui-datepicker-trigger {
  margin: 10px;
}

.datepicker.sample {
  margin-left: 50px;
}


/* ===== upload image ===== */
.file-upload label {
    display: inline-block;
    padding: .5em .75em;
    color: #999;
    font-size: inherit;
    line-height: normal;
    vertical-align: middle;
    background-color: #fdfdfd;
    cursor: pointer;
    border: 1px solid #ebebeb;
    border-bottom-color: #e2e2e2;
    border-radius: .25em;
}
.file-upload input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip:rect(0,0,0,0);
    border: 0;
}

.file-upload input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip:rect(0,0,0,0);
    border: 0;
}

.file-upload label {
    display: inline-block;
    padding: 0.2em 1em;
    color: #37474f;
    font-size: inherit;
    line-height: normal;
    vertical-align: middle;
    background-color: #e9ecef;
    cursor: pointer;
    border: 0px solid #ebebeb;
    border-bottom-color: #e2e2e2;
    border-radius: 0em;
    width: 130px;
    text-align: center;
    margin-left: 1rem;
}
.up-file-name {
  margin-bottom: 0;
  color: #2e3641;
}
.up-filebox {
  display: inherit;
}
.up-filebox .drop_target {
  width: 100%;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.up-filebox .drop_target:before {
  width: 100px;
  line-height: 100px;
  font-size: 4rem;
}
/* named upload */
.file-upload .upload-name {
	width: 100%;
    display: inline-block;
    padding: .25em .5em;
    font-size: inherit;
    font-family: inherit;
    line-height: normal;
    vertical-align: middle;
    background-color: #ffffff;
    border: 0px solid #ebebeb;
    border-bottom-color: #e2e2e2;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 0em;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
/* imaged preview */
.file-upload .upload-display {
    margin-bottom: 5px;
}

@media(min-width: 768px) { 
    .file-upload .upload-display {
        display: inline-block;
        margin-right: 5px;
        margin-bottom: 0;
    }
}

.file-upload .upload-thumb-wrap {
    display: inline-block;
    width: 54px;
    padding: 2px;
    vertical-align: middle;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #fff;
}

.file-upload .upload-display img {
    display: block;
    max-width: 100%;
    width: 100% \9;
    height: auto;
}

/* ===== contenteditable ===== */
.newPost {
  width: 100%;
  min-width: 480px;
  background: #FFF;
  font-family: "Asap", sans-serif;
}
.newPost h3 {
  margin: 0px 0px 20px 0px;
  font-size: 30px;
  color: #2E3641;
}
.newPost input[type=text] {
  padding-left: 15px;
  width: 100%;
  height: 45px;
  border: 1px solid #C1CFD9;
  box-shadow: inset 0px 0px 3px #C1CFD9;
  outline: none;
  font-family: "Bree Serif", serif;
  font-size: 24px;
  color: #C1CFD9;
  margin-bottom: 20px;
}
.newPost .toolbar {
  background: #2E3641;
}
.newPost .toolbar button {
  float: left;
  width: 45px;
  height: 45px;
  background: #2E3641;
  border: none;
  border-right: 1px solid #434f5f;
  color: #C1CFD9;
  outline: none;
}
.newPost .toolbar button:hover {
  background: #394250;
  color: #b1c3cf;
}
.newPost .toolbar .customSelect {
  float: right;
  position: relative;
}
.newPost .toolbar .customSelect select {
  appearance: none;
  border-radius: 0;
  border: none;
  background: #2E3641;
  height: 45px;
  padding-left: 10px;
  padding-right: 25px;
  color: #C1CFD9;
  border-left: 1px solid #434f5f;
  outline: none;
  font-weight: bold;
  cursor: pointer;
}
.newPost .toolbar .customSelect select:hover {
  background: #394250;
  color: #b1c3cf;
}
.newPost .toolbar .customSelect:after {
  content: "";
  font-family: FontAwesome;
  color: #C1CFD9;
  position: absolute;
  right: 10px;
  top: 15px;
}
.newPost .toolbar:after {
  content: "";
  display: block;
  clear: both;
}
.newPost .editor {
  min-height: 300px;
  width: 100%;
  resize: none;
  border: 1px solid #C1CFD9;
  box-shadow: inset 0px 0px 3px #C1CFD9;
  outline: none;
  padding: 15px;
  margin-bottom: 20px;
  position: relative;
}
.newPost .editor .saved {
  position: absolute;
  bottom: 0;
  right: 0;
  display: block;
  width: 45px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  color: #FFF;
  text-transform: uppercase;
  background: #C1CFD9;
  font-weight: bold;
  border-top-left-radius: 15px;
}
.newPost .buttons {
  float: right;
}
.newPost .buttons button {
  float: left;
  width: 120px;
  height: 45px;
  border: none;
  color: #FFF;
  text-transform: uppercase;
  outline: none;
  margin-right: 20px;
  font-weight: bold;
  background: #C1CFD9;
  text-decoration: none;
}
.newPost .buttons button:last-of-type {
  margin-right: 0px;
  background: #F97E76;
}
.newPost .buttons button:last-of-type:hover {
  background: #fa958e;
}
.newPost .buttons button:active {
  box-shadow: inset 0px 4px rgba(0, 0, 0, 0.05);
}
.newPost .buttons button:hover {
  background: #d1dbe3;
}
.newPost .buttons:after {
  content: "";
  display: block;
  clear: both;
}
.newPost:after {
  content: "";
  display: block;
  clear: both;
}
@media (max-width: 510px) {
  .newPost {
    min-width: auto;
  }
}
.card-but .card-body {
  padding: 1rem 0rem;
}
.card-body button,
.btn-success {
	height: 45px;
	border: none;
	color: #FFF;
	text-transform: uppercase;
	outline: none;
	font-weight: bold;
	background: linear-gradient(to right, #009688, #29ca7f);
  background: #009688;
	text-decoration: none;
	letter-spacing: 2px;
  border-radius: 4px;
}
.card-body button:hover,
.btn-success:hover {
	background: #C1CFD9;
  background: linear-gradient(to right, #C1CFD9, #C1CFD9);
}
.center_vertically {
	display: flex;
	align-items: center;
	justify-content: center;
}
.center_vertically_left {
  display: flex;
  align-items: center;
}
.center_vertically.tokubetsu_end {
  align-items: end;
}
.about_average {
  display: initial;
}
.card-body .styl_1 {
  flex-direction: initial;
}
.card-body .styl_1 .sel_text {
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-body .styl_2 {
  display: flex;
  align-items: end;
}
.card-body .styl_2 .sel.form-control2 {
  width: 30%;
}
@media (max-width: 575px) {
  .card-but .card-body button {
    width: 100%;
  }
  .sp-seat1 {
    order: -1;
  }
  .sp-seat2 {
    order: 1;
  }
  .sp-seat1 .mb-5 {
    margin-bottom: 1rem!important;
  }
}
.volume-button-box {
  text-align: right;
}
.volume-button-box .invisible {
  display: none;
}
.volume-button-box .btn {
  border: 0px solid transparent;
}


/* ===== banner-firm ===== */
.banner-firm.card-header {
  border: 0px solid transparent;
  padding: .5rem 1rem;
}
ul.nav-fill {
  height:  35px;
  height:  50px;/*企業專屬入口Banner*/
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.nav-pills>li {
  border: 0px solid transparent;
}
.nav-fill .nav-item, .nav-fill>.nav-link {
  flex: initial;
  width: 20%;
}
.nav-pills .nav-link {
  border-radius: 0;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
  color: #03241f;
  background-color: inherit;
  border-bottom: 3px solid #F01F4B;
}

.view-float-box ul.nav-fill {
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 0px solid rgba(0, 0, 0, 0.1);
}
.view-float-box .nav-fill .nav-item .nav-link {
  color: #757575;
}
.view-float-box .nav-pills .nav-link.active {
  color: #03241f;
}
.view-float-body {
  padding: 1rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}
.view-float-body .form-control:disabled,
.view-float-body .form-control[readonly] {
  background-color: #fff;
}
.view-float-body .custom-control-input:checked~.custom-control-indicator {
  background-color: #ff5722;
}
.view-float-body .table {
  margin-bottom: 0rem;
}
.view-float-body td.passed {
  color: #f01f4b;
}


.assign-management .bg-white {
  background-color: #f5f7fa!important;
}
.assign-management .banner-firm.card-header {
  padding: 0.5rem 1.5rem 0;
}
.assign-management ul.nav-fill {
  border-bottom: 0px solid rgba(0, 0, 0, 0.1);
}
.assign-management .nav-fill .nav-item,
.assign-management .nav-fill>.nav-link {
  width: 150px;
  background-color: #e2e2e2;
  margin: 0 4px;
}
.assign-management .nav-fill .nav-item .nav-link,
.assign-management .nav-justified .nav-item .nav-link {
  color: #9e9e9e;
}
.assign-management .nav-fill .nav-item .nav-link:hover,
.assign-management .nav-justified .nav-item .nav-link:hover {
  color: #424242;
}
.assign-management .nav-pills .nav-link.active,
.assign-management .nav-pills .show>.nav-link {
  color: #424242;
  background-color: #fff;
  box-shadow: 1px 0rem 0.5rem 0 rgb(140 152 164 / 23%);
}
.assign-management .card {
  z-index: 2;
}
.assign-management .nav-pills .nav-link.active,
.assign-management .nav-pills .show>.nav-link {
  border-bottom: 3px solid #00bcd4;
}
.assign-management .table th,
.assign-management .table td {
  padding: 1rem 0.75rem;
}
.assign-management .table thead th {
  border-bottom: 2px solid #f8f9fa;
}

@media (max-width: 1145px) {
  .assign-management .table .three-butbox {
    display: initial;
    margin-bottom: 0;
  }
}
@media (max-width: 520px) {
  .assign-management ul.nav-fill {
    height: 46px;
  }
}
@media (max-width: 414px) {
  .nav-fill .nav-item, .nav-fill>.nav-link {
    flex: 1 1 auto;
    width: auto;
  }
  .assign-management .nav-fill .nav-item,
  .assign-management .nav-fill>.nav-link {
    width: 100px;
  }
}
footer {
  text-align: center;
  padding: 30px 15px;
  bottom: 0;
  /*position: absolute;*/
  /*width: -webkit-fill-available;*/
}
footer p {
  font-size: 13px
}
.grid-demo {
  padding-top: 1rem;
  padding-bottom: 1rem;
  background-color: rgba(86, 61, 124, 0.15);
  border: 1px solid rgba(86, 61, 124, 0.2)
}
@media (max-width: 767px) {
  main {
    padding: 0 0 54px !important
  }
  .sidebar-open .sidebar {
    position: fixed;
    width: calc(100% - 30px);
    height: 94%;
    bottom: 0;
    top: auto;
    left: 15px;
    overflow-y: auto;
    -webkit-transition: 0.2s all ease;
    -moz-transition: 0.2s all ease;
    -ms-transition: 0.2s all ease;
    -o-transition: 0.2s all ease;
    transition: 0.2s all ease
  }
  .sidebar-closed .sidebar:not(:hover), .sidebar-closed .sidebar {
    height: 0;
    width: calc(100% - 30px);
    bottom: 0;
    top: auto;
    left: 15px;
    -webkit-transition: 0.2s all ease;
    -moz-transition: 0.2s all ease;
    -ms-transition: 0.2s all ease;
    -o-transition: 0.2s all ease;
    transition: 0.2s all ease
  }
  .hidden-xs {
    display: none !important
  }
}


main.read {
  padding: 0;
  margin-top: 4rem;
  margin-top: 2.5rem;
}
@media (max-width: 767px) {
  main.read h4.page-title{
    text-align: center;
  }
}

.card-icon {
  display: flex;
}

.card.app-detail .card-icon a{
  color: #607d8b;
  display: flex;
  margin-right: 14px;
}

.card.app-detail .card-icon a:hover {
  color: #37474f;
}

.card-icon .list-but-text {
  margin-left: 0px;
}

.card-list-box {
  background: rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  box-sizing: border-box;
  padding: 1px 20px;
  margin-top: 15px;
}

.card-list {
  display: flex;
  margin: 12px 0;
}

@media (max-width: 465px) {
  .card-list {
    display: block;
    margin: 25px 0;
  }
}

.preface-box {
  display: inline-grid;
}

.preface-box .page-title {
  /*width: 30%;
  float: left;
  display: flex;
  align-items: center;
  height: 100%;*/
}

.preface-box .preface {
  /*margin-top: 5px;
  margin-bottom: 15px;
  border-top: 1px solid #9e9e9e;
  padding-top: 15px;*/
  margin-bottom: 0.5rem;
  padding: 15px;
  background-color: #ffffffa8;
  border-radius: 0.3rem;
  /*width: 70%;
  float: right;*/
}

/*@media (max-width: 767px) {
  .preface-box .page-title {
    width: 100%;
    float: left;
    display: flex;
    align-items: center;
    height: auto;
  }
  .preface-box .preface {
    width: 100%;
  }
}*/
.radio-box {
  display:flex;
}
.radio-box .custom-control {
  width:33%;
}
.radio-box .custom-control-description {
  color: #6d767e;
}
.radio-box .fas {
  padding-right:7px;
  color: #6d767e;
}

.news .bg-light {
  color: #707070;
  background-color: #E9ECEF!important;
}
.btn.no-line {
  border: 0px solid transparent;
  padding:0;
}

.btn.no-line i {
  font-size: 1.3rem;
  color: #707070;
}
.table-responsive.news tbody,
.table-responsive.news tbody h4 {
  color: #707070;
}
button.btn:disabled {
  opacity: .15;
}








.file-uploader {
  background-color: #fff;
  border-radius: 3px;
  color: #242424;
}

.file-uploader__message-area {
  font-size: 18px;
  padding: .5rem 0 0 0;
  text-align: center;
  color: #377a65;
}

.file-list {
  background-color: white;
  font-size: 16px;
}

.file-list__name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-list li {
  height: 40px;
  line-height: 40px;
  margin-left: 0.5em;
  border: none;
  overflow: hidden;
}

.removal-button {
  width: 40px;
  border: none;
  background-color: #F01F4B;
  color: white;
}
.removal-button::before {
  content: "X";
}
.removal-button:focus {
  outline: 0;
}

.file-chooser {
  padding: 1em;
  padding: 0;
  transition: background-color 1s, height 1s;
}
.file-chooser p {
  font-size: 18px;
  padding-top: 1em;
}

/*.file-uploader {
  max-width: 400px;
  height: auto;
  margin: 2em auto;
}*/
.file-uploader * {
  display: block;
}
.file-uploader input[type=submit] {
  margin-top: 2em;
  float: right;
}

.file-list {
  margin: 0 auto;
  max-width: 100%;
}

.file-list__name {
  max-width: 70%;
  float: left;
  padding-left: 1rem;
}

.removal-button {
  display: inline-block;
  height: 100%;
  float: right;
}

.file-chooser {
  /*width: 90%;*/
  margin: 0.5em auto;
  margin: 0;
}

.file-chooser__input {
  margin: 0 auto;
}

.file-uploader__submit-button {
  width: 100%;
  border: none;
  font-size: 1.5em;
  padding: 1em;
  background-color: #72bfa7;
  color: white;
}
.file-uploader__submit-button:hover {
  background-color: #fff;
}

.file-list li:after, .file-uploader:after {
  content: "";
  display: table;
  clear: both;
}

.file-chooser .active {
  display: inline-block;
  padding: 0.7em 1em;
  color: #37474f;
  font-size: inherit;
  line-height: normal;
  vertical-align: middle;
  background-color: #e9ecef;
  cursor: pointer;
  border: 0px solid #ebebeb;
  border-bottom-color: #e2e2e2;
  border-radius: 0em;
  width: 130px;
  text-align: center;
}

.file-chooser input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

.hidden {
  display: none;
}
.hidden input {
  display: none;
}

.file-uploader .error {
  background-color: #d65d38;
  color: white;
}

.file-uploader ul {
  margin: 0;
  padding: 0;
}
.file-uploader li {
  margin: 5px 0;
  padding: 0;
  background-color: #E9ECEF;
}

.wrapper-box {
  display: inline-flex;
}
.button-wrapper {
  position: relative;
  width: 150px;
  width: fit-content;
  text-align: center;
  /*margin: 20% auto;*/
}
.button-wrapper span.label {
  position: relative;
  z-index: 0;
  display: inline-block;
  width: 100%;
  background: #F01F4B;
  cursor: pointer;
  color: #fff;
  padding: 10px 15px;
  text-transform:uppercase;
  font-size:15px;
  border-radius: 3px;
  letter-spacing: 2px;
  font-weight: 700;
  transition: all .8s ease-in-out;
}
.button-wrapper:hover span.label {
  background: #A20B2B;
}
#inputFile_new {
  display: inline-block;
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 50px;
  top: 0;
  left: 0;
  opacity: 0;
  cursor: pointer;
}









.sidebar>ul>li.nav-item ul.sub-menu li.hover a {
  background: #fcb40c;
  font-weight: bold;
}




.table thead th .mini {
  font-size: .5rem;
}
.table td.one-rows {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 70px;
}
.table td.two-rows {
  display: grid;
  font-size: .6rem;
}
.table .configuration .t-1 {
  width: 6%;
}
.table .configuration .t-2 {
  width: 26%;
}
.table .configuration .t-3 {
  width: 13%;
}
.table .configuration .t-4 {
  width: 13%;
}
.table .configuration .t-5 {
  width: 7%;
}
.table .configuration .t-6 {
  width: 8%;
}
.table .configuration .t-6 {
  width: 8%;
}
.table .configuration .t-8 {
  width: 19%
}


.button.red a {
  color: #F44336;
}
.button.green a {
  color: #009688;
}


.button.red:hover a,
.button.green:hover a {
  color:#fff;
}



.card-body .file-list button {
  border-radius: 0px;
}

.cancel-box {
  display: inline;
}
.cancel-box .custom-control {
  margin-right: 0;
  margin-left: 0.5rem;
  min-height: 25px;
  padding-left: 1rem;
}
.cancel-box .custom-control-indicator {
  top: 0.7rem;
}
    .cancel-box span {
        display: inline-flex;
        display: inline-block;
        font-size: 13px;
        color: #F01F4B;
    }
    .cancel-box i {
        float: left;
        border: 0px solid #9e9e9e;
        font-size: 13px;
        width: auto;
        height: auto;
        line-height: 25px;
        margin: 11px 7px 0 0;
        line-height: inherit;
        margin: 0 0.3rem;
    }

/* 美化input file樣式 */
.monkeyb-cust-file{
  overflow: hidden;
  position: relative;
  display: inline-block;
  background-color:#9cf;
  color:#fff;
  text-align:center; 
  -web-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
  padding:10px 30px;
  font-size:26px;
  font-family:Arial,Microsoft JhengHei;
}
.monkeyb-cust-file input{
  position: absolute;
  opacity: 0;
  filter: alpha(opacity=0);
  top: 0;
  right: 0;
  width:100%;
  height:100%;
}







.setting a[data-action].disabled_new {
  opacity: 0.35;
  cursor: default;
}
.setting a[data-action].disabled_new:hover {
  color: #555;
}
.image_picker_new .settings_wrap {
  overflow: hidden;
  position: relative;
}
.image_picker_new .settings_wrap .drop_target_new,
.image_picker_new .settings_wrap .settings_actions {
  float: left;
}
.image_picker_new .settings_wrap .drop_target_new {
  margin-right: 18px;
  margin-bottom: 1rem;
}
.image_picker_new .settings_wrap .settings_actions {
  /*margin-top: 12px;*/
}

.drop_target_new {
  position: relative;
  cursor: pointer;
  background: hsl(0, 0%, 90%);
  border-top: 1px solid hsl(0, 0%, 80%);
  border-radius: 4px;
  width: 72px;
  height: 72px;
  padding: 4px 6px 6px;
  transition: all 0.2s;
}
.drop_target_new input[type="file"] {
  visibility: hidden;
}
.drop_target_new:before {
  content: '\f0ee';
  font-family: FontAwesome;
  position: absolute;
  display: block;
  width: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 32px;
  color: rgba(0, 0, 0, 0.3);
  transition: color 0.2s;
}
.drop_target_new:hover,
.drop_target_new.dropping {
  /*background: #f80;*/
  /*border-top-color: #cc6d00;*/
}
.drop_target_new:hover:before,
.drop_target_new.dropping:before {
  color: rgba(0, 0, 0, 0.6);
}
.disabled_new:before {
  content: '建議尺寸：490px X 550px';
  width: 100%;
  display: block;
  color: #9E9E9E;
}
.pa-to .disabled_new:before {
  content: '建議尺寸：1355px X 530px';
  width: 100%;
  display: block;
  color: #9E9E9E;
}
.drop_target_new .image_preview_new {
  width: 100%;
  height: 100%;
  background: no-repeat center;
  background-size: contain;
  position: relative;
  z-index: 2;
}



.justify-content {
  display: flex;
  justify-content: center;
}

.fs-s5 {
  font-size: .5rem;
}
.text-red {
  color: #F01F4B;
}
.text-orngi {
  color: #EB7100;
}
.text-basic {
  color: #363636;
}
.text-gray {
  color: #A8A8A8;
}
.text-sora {
  color: #2CAEFF;
}
.text-green {
  color: #62C89B;
}
.bd-red {
  background: #F01F4B!important;
}
.bd-red:hover {
  background: linear-gradient(to right, #C1CFD9, #C1CFD9)!important;
}
.bd-grey {
  color: #454545!important;
  background: #CECECE!important;
}
.bd-grey:hover {
  color: #fff!important;
  background: linear-gradient(to right, #C1CFD9, #C1CFD9)!important;
}


/****===========
 *
 * =============***/
.lecturer-nwebox.bk-benner .drop_target_new {
  height:410px;
}
.lecturer-nwebox.bk-benner .drop_target_new:before {
  line-height: 400px;
}
.bk-benner .file-upload label {
  width: auto;
  margin-left: 0rem;
  margin-bottom: .5rem;
  padding: .5rem 1.5rem;
}
.lecturer-nwebox.bk-benner .drop_target_new .image_preview_new {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.lecturer-nwebox .dropzone-but {
  width:100%;
}
.lecturer-nwebox.bk-benner .pa-to .drop_target_new {
  height:290px;
}
.lecturer-nwebox.bk-benner .pa-to .drop_target_new:before {
  line-height: 290px;
}
.lecturer-nwebox .accordion-button {
  color: #6c757d;
  font-weight: 500;
}
.lecturer-nwebox .accordion-button:not(.collapsed) {
  background-color: #ffffff;
}
.lecturer-nwebox .accordion-button:focus {
  border-color: #6c757d;
  box-shadow: 0 0 0 0.05rem #eeeeee;
}
.lecturer-nwebox .accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  transform: rotate(-180deg);
}
.lecturer-nwebox .accordion-item {
  border: 1px solid rgba(238 238 238);
  margin-bottom: 0.5rem;
}


/****===========
 *
 * =============***/
.course-selection .table .but-array .bast {
  display: flex!important;
  align-items: center;
  justify-content: center;
}
.form-check-input {
  --bs-form-check-bg: #f0f1f3;
  width: 1.2em;
  height: 1.2em;
  margin-top: 0.08em;
  vertical-align: top;
  background-color: var(--bs-form-check-bg);
  background-image: var(--bs-form-check-bg-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: 0px solid rgba(0, 0, 0, 0.25);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
}
.form-check-input[type=checkbox] {
  border-radius: 0.25em;
}
.form-check-input:checked {
  background-color: #F01F4B;
  border-color: #F01F4B;
}
.form-check-input:checked[type=checkbox] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.form-check-input.tgl-0 + .tgl-btn {
 outline: 0;
 display: inline-block;
 width: 4em;
 height: 2em;
 position: relative;
 cursor: pointer;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
 display: flex;
 align-items: center;
 justify-content: center;
 margin-left: 7px;
}

.tgl-vary + .tgl-btn {
  overflow: hidden;
  /*transform: skew(-10deg);*/
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  transition: all 0.2s ease;
  font-family: sans-serif;
  /*background: #888;*/
}
.tgl-vary + .tgl-btn:after, .tgl-vary + .tgl-btn:before {
  /*transform: skew(10deg);*/
  display: inline-block;
  transition: all 0.2s ease;
  width: 100%;
  text-align: center;
  text-align: left;
  position: absolute;
  /*line-height: 2em;*/
  line-height: 1.2em;
  /*font-weight: bold;*/
  color: #000;
  /*text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);*/
}
.tgl-vary + .tgl-btn:after {
  left: 100%;
  content: attr(data-tg-on);
}
.tgl-vary + .tgl-btn:before {
  left: 0;
  content: attr(data-tg-off);
}
.tgl-vary + .tgl-btn:active {
  background: #fff;
}
.tgl-vary + .tgl-btn:active:before {
  left: -10%;
}
.tgl-vary:checked + .tgl-btn {
  background: #fff;
}
.tgl-vary:checked + .tgl-btn:before {
  left: -100%;
}
.tgl-vary:checked + .tgl-btn:after {
  left: 0;
}
.tgl-vary:checked + .tgl-btn:active:after {
  left: 10%;
}

/****===========
 *
 * =============***/
.display-naka {
  display: flex;
  align-items: center;
  justify-content: center;
}
.display-end {
  display: flex;
  align-items: center;
  justify-content: end;
}
.display-endend {
    display: flex;
    align-items: flex-end;
    justify-content: end;
}
.control-toku {
  display: block;
  position: relative;
  padding-left: 30px;
  margin-bottom: 15px;
  cursor: pointer;
  font-size: 18px;
}
.control-toku input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}
.control-toku .control__indicator {
  position: absolute;
  top: 10px;
  left: 0;
  height: 20px;
  width: 20px;
  background: #ffffff;
  border: 1px solid rgb(0 0 0 / 12%);
}
.control--radio .control__indicator {
  border-radius: 50%;
}
.control-toku:hover input ~ .control__indicator,
.control-toku input:focus ~ .control__indicator {
  background: #ccc;
}
.control-toku input:checked ~ .control__indicator {
  background: #E9ECEF;
  border: 0px solid rgb(0 0 0 / 12%);
}
.control-toku:hover input:not([disabled]):checked ~ .control__indicator,
.control-toku input:checked:focus ~ .control__indicator {
  background: #E9ECEF;
}
.control-toku input:disabled ~ .control__indicator {
  background: #e6e6e6;
  opacity: 0.6;
  pointer-events: none;
}
.control__indicator:after {
  content: '';
  position: absolute;
  display: none;
}
.control-toku input:checked ~ .control__indicator:after {
  display: block;
}
.control--checkbox .control__indicator:after {
  left: 8px;
  top: -4px;
  width: 11px;
  height: 19px;
  border: solid #F01F4B;
  border-width: 0 4px 4px 0;
  transform: rotate(45deg);
}
.control--checkbox input:disabled ~ .control__indicator:after {
  border-color: #7b7b7b;
}







/****===========
 *
 * =============***/
.log-box header {
  position: absolute;
  z-index: -1;
}
.log-box .login-button .custom-control {
  display: flex;
  align-items: center;
}
.bd-footer {
  /*bottom: 0;*/
  /*position: absolute;*/
  /*width: 100%;*/
  /*width: -webkit-fill-available;*/
}
footer img,
.bd-footer img {
  width: 75px;
  margin-right: 7px;
  margin-bottom: -7px;
}
.bk-sign footer.bd-footer {
  position: absolute;
  width: 100%;
}


/****===========
 *
 * =============***/
.table .pipo img {
  width: 40px;
  height: 40px;
}
.icon-text i {
  padding-right: 7px;
  font-size: 1.1rem;
}


/****===========
 *
 * =============***/
.lecturer-nwebox .drop_target_new {
  width: 100%;
  height: 260px;
}
.lecturer-nwebox .drop_target_new:before {
  width: 100%;
  line-height: 260px;
  font-size: 7rem;
}
.lecturer-nwebox .drop_target_new {
  padding: 0;
}
.lecturer-nwebox .drop_target_new .image_preview_new {
  background: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.lecturer-nwebox .file-chooser .active {
  font-weight: bold;
  width: 100%;
  height:45px;
  /*margin-top:1rem;*/
  color: #fff;
  background-color: #F01F4B;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lecturer-nwebox .file-chooser .active:hover {
  background: linear-gradient(to right, #C1CFD9, #C1CFD9);
}
.container-fluid.lecturer-nwebox .newPost .editor {
  min-height: 100px;
}
.add-urlbox {
  width:90%;
}
.add-urlbut {
  width:10%;
}
.add-url {
  display: inline-block;
  padding: 0.7em 1em;
  color: #37474f;
  font-size: inherit;
  line-height: normal;
  vertical-align: middle;
  background-color: #e9ecef;
  cursor: pointer;
  border: 0px solid #ebebeb;
  border-bottom-color: #e2e2e2;
  border-radius: 0em;
  text-align: center;
  font-weight: 500;
}
.remark {
  display: flex;
  align-items: center;
  height: 100%;
  color: #9E9E9E;
}

.lecturer-nwebox .drop_target_new.v2 {
  width: 70px;
  height: 70px;
  width: 50px;
  height: 43px;
}
.lecturer-nwebox .drop_target_new.v2:before {
  line-height: 70px;
  line-height: 43px;
  font-size:2rem;
}


/****===========
 *
 * =============***/
.toku .form-control {
  width: 92%;
  float: left;
}
.toku span {
  float: right;
  display: flow-root;
}

.table .icon i {
  font-size:1.5rem;
  line-height: 40px;
}

.agaze {
    color: #F01F4B;
    font-size: 13px;
}
.agaze i {
  margin: 0 7px;
}



/****===========
 *
 * =============***/
.card .form-control:focus {
  background-color: #eaecef;
  box-shadow: 0 0 0rem 0 rgb(140 152 164 / 0%);
}
.reply-box .col {
  display:flex;
}
.reply-box .title {
  width: 105px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 105px
}
.reply-box .title2 {
  width:120px;
  display: flex;
  justify-content: center;
}
.reply-box .dividing-line {
  height: 4px;
  border: 4px solid #9E9E9E;
  width: 100%;
}

/****===========
 *
 * =============***/
.upload_warp_img {
  padding: 1rem;
}
.upload_warp_img .img img {
  height: 100px;
  width: 100%;
  object-fit: scale-down;
}
.upload_warp_img_div_top span {
  font-size: .5rem;
  padding: 0.5rem 0.5rem;
  background-color: white;
  margin-left: 9px;
  margin-top: -1rem;
  position: absolute;
  color: #CECECE;
}
.upload_warp_img_div_text {
  height: 20px;
  line-height: 15px;
  word-break: break-word;
  word-break: break-all;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 82%;
  border-width: 0px;
  resize: none;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 1rem;
  padding: 2rem 1rem;
}
.upload_warp_img_div_text.address {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  height: 23px;
  width: 100%;
}
.upload_warp_img video {
  width:100%;
  width: -webkit-fill-available;
}

.photo-box .upload_warp_img {
  padding: 0rem;
}
.photo-box .upload_warp_img .img img {
  object-fit: cover;
  height: 150px;
}
.photo-box .upload_warp_img_div_top {
  padding: .5rem;
}
.photo-box .upload_warp_img_div_text {
  margin-bottom: 0.5rem;
}

#appTwo .form-check-input {
  display: none;
}
#appTwo .container-fluid h6 {
  color: #00221c;
}
#appTwo .display-endend {
  align-items: initial;
}
#appTwo .form-check {
  padding-left: 0;
}
.todolist {
  padding-left: 0;
}
.todolist .todoitem {
  position: relative;
  margin-bottom: 0.25rem;
  padding: 0.5rem 0rem 0.5rem 0.5rem;
  /*border-top: 1px solid #ccc;*/
}
.todolist .todoitem.done .form-check-label {
  color: #999;
  text-decoration: line-through;
}
.todolist .todoitem.highlight {
  border-color: #ff2968;
  background-color: #ff8fb0;
  background-color: #fafafa;
}
.todolist .todoitem.highlight:last-child {
  border-color: #ff2968;
}
.todolist .todoitem:last-child {
  /*border-bottom: 1px solid #ccc;*/
}
.todolist .todoitem .btn-danger {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}
.todolist .todoitem .form-check-label .form-check-input {
  margin-right: 1rem;
}


/****===========
 *
 * =============***/
ul.line-data {
  background-color: #fff;
}
.line-data li {
  background-color: #E9ECEF;
  height: 40px;
  line-height: 40px;
  padding-left: 10px;
  border: none;
  overflow: hidden;
}
.download-button {
  display: inline-block;
  height: 100%;
  float: right;
  width: 80px;
  border: none;
  background-color: #FBB40D;
  color: #672F0C;
}



.card-body .file-uploader button, .file-uploader .btn-success {
  background: #F01F4B;
}

.checkth {
    background-color: white;
    margin-right: 7px;
    margin-top: 3px;
}