@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;600;700&display=swap");
.bg-theme-primary-dark {
  background-color: #0378a7;
}

.text-theme-primary-dark {
  background-color: #0378a7;
}

/* $theme-accent:#005E80;
$theme-accent-light:#a8e6fd;
$theme-accent-verylight:#ecf9ff;  */
/* 
old three color ideas as double diamond icon
$theme-accent:#FCBC3C;
$theme-accent-light:#ffd88b;
$theme-accent-verylight:#ffecc7; 

$theme-com1:#683e9e;
$theme-com1-light:#8D6BB9;
$theme-com1-verylight:#c5b4db;

 */
.bg-theme-primary {
  background-color: #88bfff;
}

.text-theme-primary {
  color: #88bfff;
}

.hover-text-theme-primary:hover {
  color: #88bfff !important;
}

.hover-bg-theme-primary:hover, .theme-button-primary:hover {
  background-color: #88bfff;
}

.border-theme-primary, .task-form input, .task-form textarea, .task-form select {
  border-color: #88bfff !important;
}

.bg-theme-primary-light {
  background-color: #b7d8fe;
}

.text-theme-primary-light {
  color: #b7d8fe;
}

.hover-text-theme-primary-light:hover {
  color: #b7d8fe !important;
}

.hover-bg-theme-primary-light:hover {
  background-color: #b7d8fe;
}

.border-theme-primary-light {
  border-color: #b7d8fe !important;
}

.bg-theme-primary-verylight {
  background-color: #dcebfd;
}

.text-theme-primary-verylight {
  color: #dcebfd;
}

.hover-text-theme-primary-verylight:hover {
  color: #dcebfd !important;
}

.hover-bg-theme-primary-verylight:hover {
  background-color: #dcebfd;
}

.border-theme-primary-verylight {
  border-color: #dcebfd !important;
}

.bg-theme-secondary {
  background-color: #001a24;
}

.text-theme-secondary {
  color: #001a24;
}

.hover-text-theme-secondary:hover {
  color: #001a24 !important;
}

.hover-bg-theme-secondary:hover {
  background-color: #001a24;
}

.border-theme-secondary {
  border-color: #001a24 !important;
}

.bg-theme-secondary-light {
  background-color: #616d72;
}

.text-theme-secondary-light {
  color: #616d72;
}

.hover-text-theme-secondary-light:hover {
  color: #616d72 !important;
}

.hover-bg-theme-secondary-light:hover {
  background-color: #616d72;
}

.border-theme-secondary-light {
  border-color: #616d72 !important;
}

.bg-theme-secondary-verylight {
  background-color: #90989b;
}

.text-theme-secondary-verylight {
  color: #90989b;
}

.hover-text-theme-secondary-verylight:hover {
  color: #90989b !important;
}

.hover-bg-theme-secondary-verylight:hover {
  background-color: #90989b;
}

.border-theme-secondary-verylight {
  border-color: #90989b !important;
}

.bg-theme-accent, #login-form button:hover {
  background-color: #096BDE;
}

.text-theme-accent {
  color: #096BDE;
}

.hover-text-theme-accent:hover {
  color: #096BDE !important;
}

.hover-bg-theme-accent:hover {
  background-color: #096BDE;
}

.border-theme-accent {
  border-color: #096BDE !important;
}

.bg-theme-accent-light {
  background-color: #4199ff;
}

.text-theme-accent-light {
  color: #4199ff;
}

.hover-text-theme-accent-light:hover {
  color: #4199ff !important;
}

.hover-bg-theme-accent-light:hover {
  background-color: #4199ff;
}

.border-theme-accent-light {
  border-color: #4199ff !important;
}

.bg-theme-accent-verylight {
  background-color: #71b4ff;
}

.text-theme-accent-verylight {
  color: #71b4ff;
}

.hover-text-theme-accent-verylight:hover {
  color: #71b4ff !important;
}

.hover-bg-theme-accent-verylight:hover {
  background-color: #71b4ff;
}

.border-theme-accent-verylight {
  border-color: #71b4ff !important;
}

.bg-theme-pink {
  background-color: #EC5F98;
}

.text-theme-pink {
  color: #EC5F98;
}

.hover-text-theme-pink:hover {
  color: #EC5F98 !important;
}

.hover-bg-theme-pink:hover {
  background-color: #EC5F98;
}

.border-theme-pink {
  border-color: #EC5F98 !important;
}

.bg-theme-pink-light {
  background-color: #f1a2c2;
}

.text-theme-pink-light {
  color: #f1a2c2;
}

.hover-text-theme-pink-light:hover {
  color: #f1a2c2 !important;
}

.hover-bg-theme-pink-light:hover {
  background-color: #f1a2c2;
}

.border-theme-pink-light {
  border-color: #f1a2c2 !important;
}

.bg-theme-pink-verylight {
  background-color: #ffeff5;
}

.text-theme-pink-verylight {
  color: #ffeff5;
}

.hover-text-theme-pink-verylight:hover {
  color: #ffeff5 !important;
}

.hover-bg-theme-pink-verylight:hover {
  background-color: #ffeff5;
}

.border-theme-pink-verylight {
  border-color: #ffeff5 !important;
}

.bg-theme-yellow {
  background-color: #FCBC3C;
}

.text-theme-yellow {
  color: #FCBC3C;
}

.hover-text-theme-yellow:hover {
  color: #FCBC3C !important;
}

.hover-bg-theme-yellow:hover {
  background-color: #FCBC3C;
}

.border-theme-yellow {
  border-color: #FCBC3C !important;
}

.bg-theme-yellow-light {
  background-color: #ffd88b;
}

.text-theme-yellow-light {
  color: #ffd88b;
}

.hover-text-theme-yellow-light:hover {
  color: #ffd88b !important;
}

.hover-bg-theme-yellow-light:hover {
  background-color: #ffd88b;
}

.border-theme-yellow-light {
  border-color: #ffd88b !important;
}

.bg-theme-yellow-verylight {
  background-color: #ffecc7;
}

.text-theme-yellow-verylight {
  color: #ffecc7;
}

.hover-text-theme-yellow-verylight:hover {
  color: #ffecc7 !important;
}

.hover-bg-theme-yellow-verylight:hover {
  background-color: #ffecc7;
}

.border-theme-yellow-verylight {
  border-color: #ffecc7 !important;
}

.bg-theme-orange {
  background-color: #fe631b;
}

.text-theme-orange {
  color: #fe631b;
}

.hover-text-theme-orange:hover {
  color: #fe631b !important;
}

.hover-bg-theme-orange:hover {
  background-color: #fe631b;
}

.border-theme-orange {
  border-color: #fe631b !important;
}

.bg-theme-orange-light {
  background-color: #ff7f43;
}

.text-theme-orange-light {
  color: #ff7f43;
}

.hover-text-theme-orange-light:hover {
  color: #ff7f43 !important;
}

.hover-bg-theme-orange-light:hover {
  background-color: #ff7f43;
}

.border-theme-orange-light {
  border-color: #ff7f43 !important;
}

.bg-theme-orange-verylight {
  background-color: #fe8d59;
}

.text-theme-orange-verylight {
  color: #fe8d59;
}

.hover-text-theme-orange-verylight:hover {
  color: #fe8d59 !important;
}

.hover-bg-theme-orange-verylight:hover {
  background-color: #fe8d59;
}

.border-theme-orange-verylight {
  border-color: #fe8d59 !important;
}

/* 
.bg-theme-primary{background-color:$theme-primary;}
.bg-theme-primary-light{background-color:$theme-primary-light;}
.bg-theme-primary-verylight{background-color:$theme-primary-verylight;}
.bg-theme-secondary{background-color:$theme-secondary;}

.bg-theme-accent{background-color:$theme-accent;}
.bg-theme-accent-light{background-color:$theme-accent-light;}
.bg-theme-accent-verylight{background-color:$theme-accent-verylight;}

.text-theme-primary{color:$theme-primary;}
.text-theme-primary-light{color:$theme-primary-light;} 
.text-theme-secondary{color:$theme-secondary;}
.text-theme-secondary-light{color:$theme-secondary-light;}
.text-theme-secondary-verylight{color:$theme-secondary-verylight;}
.text-theme-med{font-size: 14px;}

.anchor-dark{color: $theme-primary-light; &:hover{color: white;}}

.hover-bg-primary:hover{ background-color: $theme-primary;}
.hover-bg-primary-light:hover{ background-color: $theme-primary-light;}
.hover-bg-primary-verylight:hover{ background-color: $theme-primary-verylight;}
.hover-bg-accent:hover{ background-color: $theme-accent;}
.hover-bg-accent-light:hover{ background-color: $theme-accent-light;}
.hover-bg-accent-verylight:hover{ background-color: $theme-accent-verylight;}
.hover-bg-secondary:hover{ background-color: $theme-secondary;} 

.border-theme-primary{border-color:$theme-primary!important;}
.border-theme-accent{border-color:$theme-accent!important;} */
.hover-underline:hover {
  text-decoration: underline;
  color: black;
}

.hover:hover .img-hover-zoom {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  -webkit-transition: 1.5s;
  transition: 1.5s;
}

.hover .img-hover-zoom {
  transform: scale(1);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  -webkit-transition: 1.5s;
  transition: 1.5s;
}

.border-red {
  border-color: #001a24 !important;
  border-width: 2px !important;
}

/* -----------color-shades-start--------------*/
/* bg-black-100, bg-white-100, text-black-100, text-white-100 */
/* -------- */
.bg-black-1 {
  background-color: #e6e6e6;
}

.text-black-1, .text-black-1 * {
  color: #e6e6e6;
}

.border-black-1 {
  border-color: #e6e6e6 !important;
}

.bg-black-2 {
  background-color: #cccccc;
}

.text-black-2, .text-black-2 * {
  color: #cccccc;
}

.border-black-2 {
  border-color: #cccccc !important;
}

.bg-black-3 {
  background-color: #b3b3b3;
}

.text-black-3, .text-black-3 * {
  color: #b3b3b3;
}

.border-black-3 {
  border-color: #b3b3b3 !important;
}

.bg-black-4 {
  background-color: #999999;
}

.text-black-4, .text-black-4 * {
  color: #999999;
}

.border-black-4 {
  border-color: #999999 !important;
}

.bg-black-5 {
  background-color: gray;
}

.text-black-5, .text-black-5 * {
  color: gray;
}

.border-black-5 {
  border-color: gray !important;
}

.bg-black-6 {
  background-color: #666666;
}

.text-black-6, .text-black-6 * {
  color: #666666;
}

.border-black-6 {
  border-color: #666666 !important;
}

.bg-black-7 {
  background-color: #4d4d4d;
}

.text-black-7, .text-black-7 * {
  color: #4d4d4d;
}

.border-black-7 {
  border-color: #4d4d4d !important;
}

.bg-black-8 {
  background-color: #333333;
}

.text-black-8, .text-black-8 * {
  color: #333333;
}

.border-black-8 {
  border-color: #333333 !important;
}

.bg-black-9 {
  background-color: #1a1a1a;
}

.text-black-9, .text-black-9 * {
  color: #1a1a1a;
}

.border-black-9 {
  border-color: #1a1a1a !important;
}

.bg-white-1 {
  background-color: white;
}

.text-white-1, .text-white-1 * {
  color: white;
}

.border-white-1 {
  border-color: white !important;
}

.bg-white-2 {
  background-color: white;
}

.text-white-2, .text-white-2 * {
  color: white;
}

.border-white-2 {
  border-color: white !important;
}

.bg-white-3 {
  background-color: white;
}

.text-white-3, .text-white-3 * {
  color: white;
}

.border-white-3 {
  border-color: white !important;
}

.bg-white-4 {
  background-color: white;
}

.text-white-4, .text-white-4 * {
  color: white;
}

.border-white-4 {
  border-color: white !important;
}

.bg-white-5 {
  background-color: white;
}

.text-white-5, .text-white-5 * {
  color: white;
}

.border-white-5 {
  border-color: white !important;
}

.bg-white-6 {
  background-color: white;
}

.text-white-6, .text-white-6 * {
  color: white;
}

.border-white-6 {
  border-color: white !important;
}

.bg-white-7 {
  background-color: white;
}

.text-white-7, .text-white-7 * {
  color: white;
}

.border-white-7 {
  border-color: white !important;
}

.bg-white-8 {
  background-color: white;
}

.text-white-8, .text-white-8 * {
  color: white;
}

.border-white-8 {
  border-color: white !important;
}

.bg-white-9 {
  background-color: white;
}

.text-white-9, .text-white-9 * {
  color: white;
}

.border-white-9 {
  border-color: white !important;
}

/* ---------- */
.bg-theme-primary-1 {
  background-color: #f3f9ff;
}

.text-theme-primary-1, .text-theme-primary-1 * {
  color: #f3f9ff;
}

.border-theme-primary-1 {
  border-color: #f3f9ff !important;
}

.bg-theme-primary-2, .task-form {
  background-color: #e7f2ff;
}

.text-theme-primary-2, .text-theme-primary-2 * {
  color: #e7f2ff;
}

.border-theme-primary-2 {
  border-color: #e7f2ff !important;
}

.bg-theme-primary-3 {
  background-color: #dbecff;
}

.text-theme-primary-3, .text-theme-primary-3 * {
  color: #dbecff;
}

.border-theme-primary-3 {
  border-color: #dbecff !important;
}

.bg-theme-primary-4 {
  background-color: #cfe5ff;
}

.text-theme-primary-4, .text-theme-primary-4 * {
  color: #cfe5ff;
}

.border-theme-primary-4 {
  border-color: #cfe5ff !important;
}

.bg-theme-primary-5 {
  background-color: #c4dfff;
}

.text-theme-primary-5, .text-theme-primary-5 * {
  color: #c4dfff;
}

.border-theme-primary-5 {
  border-color: #c4dfff !important;
}

.bg-theme-primary-6 {
  background-color: #b8d9ff;
}

.text-theme-primary-6, .text-theme-primary-6 * {
  color: #b8d9ff;
}

.border-theme-primary-6 {
  border-color: #b8d9ff !important;
}

.bg-theme-primary-7 {
  background-color: #acd2ff;
}

.text-theme-primary-7, .text-theme-primary-7 * {
  color: #acd2ff;
}

.border-theme-primary-7 {
  border-color: #acd2ff !important;
}

.bg-theme-primary-8 {
  background-color: #a0ccff;
}

.text-theme-primary-8, .text-theme-primary-8 * {
  color: #a0ccff;
}

.border-theme-primary-8, #login-form input {
  border-color: #a0ccff !important;
}

.bg-theme-primary-9 {
  background-color: #94c5ff;
}

.text-theme-primary-9, .text-theme-primary-9 * {
  color: #94c5ff;
}

.border-theme-primary-9 {
  border-color: #94c5ff !important;
}

.bg-theme-primary-11 {
  background-color: #7aace6;
}

.text-theme-primary-11, .text-theme-primary-11 * {
  color: #7aace6;
}

.border-theme-primary-11 {
  border-color: #7aace6 !important;
}

.bg-theme-primary-12 {
  background-color: #6d99cc;
}

.text-theme-primary-12, .text-theme-primary-12 * {
  color: #6d99cc;
}

.border-theme-primary-12 {
  border-color: #6d99cc !important;
}

.bg-theme-primary-13, #login-form button {
  background-color: #5f86b3;
}

.text-theme-primary-13, .text-theme-primary-13 * {
  color: #5f86b3;
}

.border-theme-primary-13 {
  border-color: #5f86b3 !important;
}

.bg-theme-primary-14 {
  background-color: #527399;
}

.text-theme-primary-14, .text-theme-primary-14 * {
  color: #527399;
}

.border-theme-primary-14 {
  border-color: #527399 !important;
}

.bg-theme-primary-15 {
  background-color: #446080;
}

.text-theme-primary-15, .text-theme-primary-15 * {
  color: #446080;
}

.border-theme-primary-15 {
  border-color: #446080 !important;
}

.bg-theme-primary-16 {
  background-color: #364c66;
}

.text-theme-primary-16, .text-theme-primary-16 * {
  color: #364c66;
}

.border-theme-primary-16 {
  border-color: #364c66 !important;
}

.bg-theme-primary-17, .theme-button-primary {
  background-color: #29394d;
}

.text-theme-primary-17, .task-form label, .text-theme-primary-17 *, .task-form label * {
  color: #29394d;
}

.border-theme-primary-17 {
  border-color: #29394d !important;
}

.bg-theme-primary-18 {
  background-color: #1b2633;
}

.text-theme-primary-18, .text-theme-primary-18 * {
  color: #1b2633;
}

.border-theme-primary-18 {
  border-color: #1b2633 !important;
}

.bg-theme-primary-19 {
  background-color: #0e131a;
}

.text-theme-primary-19, .text-theme-primary-19 * {
  color: #0e131a;
}

.border-theme-primary-19 {
  border-color: #0e131a !important;
}

/* ---------- */
.bg-theme-secondary-1 {
  background-color: #e6e8e9;
}

.text-theme-secondary-1, .text-theme-secondary-1 * {
  color: #e6e8e9;
}

.border-theme-secondary-1 {
  border-color: #e6e8e9 !important;
}

.bg-theme-secondary-2 {
  background-color: #ccd1d3;
}

.text-theme-secondary-2, .text-theme-secondary-2 * {
  color: #ccd1d3;
}

.border-theme-secondary-2 {
  border-color: #ccd1d3 !important;
}

.bg-theme-secondary-3 {
  background-color: #b3babd;
}

.text-theme-secondary-3, .text-theme-secondary-3 * {
  color: #b3babd;
}

.border-theme-secondary-3 {
  border-color: #b3babd !important;
}

.bg-theme-secondary-4 {
  background-color: #99a3a7;
}

.text-theme-secondary-4, .text-theme-secondary-4 * {
  color: #99a3a7;
}

.border-theme-secondary-4 {
  border-color: #99a3a7 !important;
}

.bg-theme-secondary-5 {
  background-color: #808d92;
}

.text-theme-secondary-5, .text-theme-secondary-5 * {
  color: #808d92;
}

.border-theme-secondary-5 {
  border-color: #808d92 !important;
}

.bg-theme-secondary-6 {
  background-color: #66767c;
}

.text-theme-secondary-6, .text-theme-secondary-6 * {
  color: #66767c;
}

.border-theme-secondary-6 {
  border-color: #66767c !important;
}

.bg-theme-secondary-7 {
  background-color: #4d5f66;
}

.text-theme-secondary-7, .text-theme-secondary-7 * {
  color: #4d5f66;
}

.border-theme-secondary-7 {
  border-color: #4d5f66 !important;
}

.bg-theme-secondary-8 {
  background-color: #334850;
}

.text-theme-secondary-8, .text-theme-secondary-8 * {
  color: #334850;
}

.border-theme-secondary-8 {
  border-color: #334850 !important;
}

.bg-theme-secondary-9 {
  background-color: #1a313a;
}

.text-theme-secondary-9, .text-theme-secondary-9 * {
  color: #1a313a;
}

.border-theme-secondary-9 {
  border-color: #1a313a !important;
}

.bg-theme-secondary-11 {
  background-color: #001720;
}

.text-theme-secondary-11, .text-theme-secondary-11 * {
  color: #001720;
}

.border-theme-secondary-11 {
  border-color: #001720 !important;
}

.bg-theme-secondary-12 {
  background-color: #00151d;
}

.text-theme-secondary-12, .text-theme-secondary-12 * {
  color: #00151d;
}

.border-theme-secondary-12 {
  border-color: #00151d !important;
}

.bg-theme-secondary-13 {
  background-color: #001219;
}

.text-theme-secondary-13, .text-theme-secondary-13 * {
  color: #001219;
}

.border-theme-secondary-13 {
  border-color: #001219 !important;
}

.bg-theme-secondary-14 {
  background-color: #001016;
}

.text-theme-secondary-14, .text-theme-secondary-14 * {
  color: #001016;
}

.border-theme-secondary-14 {
  border-color: #001016 !important;
}

.bg-theme-secondary-15 {
  background-color: #000d12;
}

.text-theme-secondary-15, .text-theme-secondary-15 * {
  color: #000d12;
}

.border-theme-secondary-15 {
  border-color: #000d12 !important;
}

.bg-theme-secondary-16 {
  background-color: #000a0e;
}

.text-theme-secondary-16, .text-theme-secondary-16 * {
  color: #000a0e;
}

.border-theme-secondary-16 {
  border-color: #000a0e !important;
}

.bg-theme-secondary-17 {
  background-color: #00080b;
}

.text-theme-secondary-17, .text-theme-secondary-17 * {
  color: #00080b;
}

.border-theme-secondary-17 {
  border-color: #00080b !important;
}

.bg-theme-secondary-18 {
  background-color: #000507;
}

.text-theme-secondary-18, .text-theme-secondary-18 * {
  color: #000507;
}

.border-theme-secondary-18 {
  border-color: #000507 !important;
}

.bg-theme-secondary-19 {
  background-color: #000304;
}

.text-theme-secondary-19, .text-theme-secondary-19 * {
  color: #000304;
}

.border-theme-secondary-19 {
  border-color: #000304 !important;
}

/* ---------- */
.bg-theme-accent-1 {
  background-color: #e6f0fc;
}

.text-theme-accent-1, .text-theme-accent-1 * {
  color: #e6f0fc;
}

.border-theme-accent-1 {
  border-color: #e6f0fc !important;
}

.bg-theme-accent-2 {
  background-color: #cee1f8;
}

.text-theme-accent-2, .text-theme-accent-2 * {
  color: #cee1f8;
}

.border-theme-accent-2 {
  border-color: #cee1f8 !important;
}

.bg-theme-accent-3 {
  background-color: #b5d3f5;
}

.text-theme-accent-3, .text-theme-accent-3 * {
  color: #b5d3f5;
}

.border-theme-accent-3 {
  border-color: #b5d3f5 !important;
}

.bg-theme-accent-4 {
  background-color: #9dc4f2;
}

.text-theme-accent-4, .text-theme-accent-4 * {
  color: #9dc4f2;
}

.border-theme-accent-4 {
  border-color: #9dc4f2 !important;
}

.bg-theme-accent-5 {
  background-color: #84b5ef;
}

.text-theme-accent-5, .text-theme-accent-5 * {
  color: #84b5ef;
}

.border-theme-accent-5 {
  border-color: #84b5ef !important;
}

.bg-theme-accent-6 {
  background-color: #6ba6eb;
}

.text-theme-accent-6, .text-theme-accent-6 * {
  color: #6ba6eb;
}

.border-theme-accent-6 {
  border-color: #6ba6eb !important;
}

.bg-theme-accent-7 {
  background-color: #5397e8;
}

.text-theme-accent-7, .text-theme-accent-7 * {
  color: #5397e8;
}

.border-theme-accent-7 {
  border-color: #5397e8 !important;
}

.bg-theme-accent-8 {
  background-color: #3a89e5;
}

.text-theme-accent-8, .text-theme-accent-8 * {
  color: #3a89e5;
}

.border-theme-accent-8 {
  border-color: #3a89e5 !important;
}

.bg-theme-accent-9 {
  background-color: #227ae1;
}

.text-theme-accent-9, .text-theme-accent-9 * {
  color: #227ae1;
}

.border-theme-accent-9 {
  border-color: #227ae1 !important;
}

.bg-theme-accent-11 {
  background-color: #0860c8;
}

.text-theme-accent-11, .text-theme-accent-11 * {
  color: #0860c8;
}

.border-theme-accent-11 {
  border-color: #0860c8 !important;
}

.bg-theme-accent-12 {
  background-color: #0756b2;
}

.text-theme-accent-12, .text-theme-accent-12 * {
  color: #0756b2;
}

.border-theme-accent-12 {
  border-color: #0756b2 !important;
}

.bg-theme-accent-13 {
  background-color: #064b9b;
}

.text-theme-accent-13, .text-theme-accent-13 * {
  color: #064b9b;
}

.border-theme-accent-13 {
  border-color: #064b9b !important;
}

.bg-theme-accent-14 {
  background-color: #054085;
}

.text-theme-accent-14, .text-theme-accent-14 * {
  color: #054085;
}

.border-theme-accent-14 {
  border-color: #054085 !important;
}

.bg-theme-accent-15 {
  background-color: #05366f;
}

.text-theme-accent-15, .text-theme-accent-15 * {
  color: #05366f;
}

.border-theme-accent-15 {
  border-color: #05366f !important;
}

.bg-theme-accent-16 {
  background-color: #042b59;
}

.text-theme-accent-16, .text-theme-accent-16 * {
  color: #042b59;
}

.border-theme-accent-16 {
  border-color: #042b59 !important;
}

.bg-theme-accent-17 {
  background-color: #032043;
}

.text-theme-accent-17, .text-theme-accent-17 * {
  color: #032043;
}

.border-theme-accent-17 {
  border-color: #032043 !important;
}

.bg-theme-accent-18 {
  background-color: #02152c;
}

.text-theme-accent-18, .text-theme-accent-18 * {
  color: #02152c;
}

.border-theme-accent-18 {
  border-color: #02152c !important;
}

.bg-theme-accent-19 {
  background-color: #010b16;
}

.text-theme-accent-19, .text-theme-accent-19 * {
  color: #010b16;
}

.border-theme-accent-19 {
  border-color: #010b16 !important;
}

/* ---------- */
.bg-theme-pink-1 {
  background-color: #fdeff5;
}

.text-theme-pink-1, .text-theme-pink-1 * {
  color: #fdeff5;
}

.border-theme-pink-1 {
  border-color: #fdeff5 !important;
}

.bg-theme-pink-2 {
  background-color: #fbdfea;
}

.text-theme-pink-2, .text-theme-pink-2 * {
  color: #fbdfea;
}

.border-theme-pink-2 {
  border-color: #fbdfea !important;
}

.bg-theme-pink-3 {
  background-color: #f9cfe0;
}

.text-theme-pink-3, .text-theme-pink-3 * {
  color: #f9cfe0;
}

.border-theme-pink-3 {
  border-color: #f9cfe0 !important;
}

.bg-theme-pink-4 {
  background-color: #f7bfd6;
}

.text-theme-pink-4, .text-theme-pink-4 * {
  color: #f7bfd6;
}

.border-theme-pink-4 {
  border-color: #f7bfd6 !important;
}

.bg-theme-pink-5 {
  background-color: #f6afcc;
}

.text-theme-pink-5, .text-theme-pink-5 * {
  color: #f6afcc;
}

.border-theme-pink-5 {
  border-color: #f6afcc !important;
}

.bg-theme-pink-6 {
  background-color: #f49fc1;
}

.text-theme-pink-6, .text-theme-pink-6 * {
  color: #f49fc1;
}

.border-theme-pink-6 {
  border-color: #f49fc1 !important;
}

.bg-theme-pink-7 {
  background-color: #f28fb7;
}

.text-theme-pink-7, .text-theme-pink-7 * {
  color: #f28fb7;
}

.border-theme-pink-7 {
  border-color: #f28fb7 !important;
}

.bg-theme-pink-8 {
  background-color: #f07fad;
}

.text-theme-pink-8, .text-theme-pink-8 * {
  color: #f07fad;
}

.border-theme-pink-8 {
  border-color: #f07fad !important;
}

.bg-theme-pink-9 {
  background-color: #ee6fa2;
}

.text-theme-pink-9, .text-theme-pink-9 * {
  color: #ee6fa2;
}

.border-theme-pink-9 {
  border-color: #ee6fa2 !important;
}

.bg-theme-pink-11 {
  background-color: #d45689;
}

.text-theme-pink-11, .text-theme-pink-11 * {
  color: #d45689;
}

.border-theme-pink-11 {
  border-color: #d45689 !important;
}

.bg-theme-pink-12 {
  background-color: #bd4c7a;
}

.text-theme-pink-12, .text-theme-pink-12 * {
  color: #bd4c7a;
}

.border-theme-pink-12 {
  border-color: #bd4c7a !important;
}

.bg-theme-pink-13 {
  background-color: #a5436a;
}

.text-theme-pink-13, .text-theme-pink-13 * {
  color: #a5436a;
}

.border-theme-pink-13 {
  border-color: #a5436a !important;
}

.bg-theme-pink-14 {
  background-color: #8e395b;
}

.text-theme-pink-14, .text-theme-pink-14 * {
  color: #8e395b;
}

.border-theme-pink-14 {
  border-color: #8e395b !important;
}

.bg-theme-pink-15 {
  background-color: #76304c;
}

.text-theme-pink-15, .text-theme-pink-15 * {
  color: #76304c;
}

.border-theme-pink-15 {
  border-color: #76304c !important;
}

.bg-theme-pink-16 {
  background-color: #5e263d;
}

.text-theme-pink-16, .text-theme-pink-16 * {
  color: #5e263d;
}

.border-theme-pink-16 {
  border-color: #5e263d !important;
}

.bg-theme-pink-17 {
  background-color: #471d2e;
}

.text-theme-pink-17, .text-theme-pink-17 * {
  color: #471d2e;
}

.border-theme-pink-17 {
  border-color: #471d2e !important;
}

.bg-theme-pink-18 {
  background-color: #2f131e;
}

.text-theme-pink-18, .text-theme-pink-18 * {
  color: #2f131e;
}

.border-theme-pink-18 {
  border-color: #2f131e !important;
}

.bg-theme-pink-19 {
  background-color: #180a0f;
}

.text-theme-pink-19, .text-theme-pink-19 * {
  color: #180a0f;
}

.border-theme-pink-19 {
  border-color: #180a0f !important;
}

/* ---------- */
.bg-theme-yellow-1 {
  background-color: #fff8ec;
}

.text-theme-yellow-1, .text-theme-yellow-1 * {
  color: #fff8ec;
}

.border-theme-yellow-1 {
  border-color: #fff8ec !important;
}

.bg-theme-yellow-2 {
  background-color: #fef2d8;
}

.text-theme-yellow-2, .text-theme-yellow-2 * {
  color: #fef2d8;
}

.border-theme-yellow-2 {
  border-color: #fef2d8 !important;
}

.bg-theme-yellow-3 {
  background-color: #feebc5;
}

.text-theme-yellow-3, .text-theme-yellow-3 * {
  color: #feebc5;
}

.border-theme-yellow-3 {
  border-color: #feebc5 !important;
}

.bg-theme-yellow-4 {
  background-color: #fee4b1;
}

.text-theme-yellow-4, .text-theme-yellow-4 * {
  color: #fee4b1;
}

.border-theme-yellow-4 {
  border-color: #fee4b1 !important;
}

.bg-theme-yellow-5 {
  background-color: #fede9e;
}

.text-theme-yellow-5, .text-theme-yellow-5 * {
  color: #fede9e;
}

.border-theme-yellow-5 {
  border-color: #fede9e !important;
}

.bg-theme-yellow-6 {
  background-color: #fdd78a;
}

.text-theme-yellow-6, .text-theme-yellow-6 * {
  color: #fdd78a;
}

.border-theme-yellow-6 {
  border-color: #fdd78a !important;
}

.bg-theme-yellow-7 {
  background-color: #fdd077;
}

.text-theme-yellow-7, .text-theme-yellow-7 * {
  color: #fdd077;
}

.border-theme-yellow-7 {
  border-color: #fdd077 !important;
}

.bg-theme-yellow-8 {
  background-color: #fdc963;
}

.text-theme-yellow-8, .text-theme-yellow-8 * {
  color: #fdc963;
}

.border-theme-yellow-8 {
  border-color: #fdc963 !important;
}

.bg-theme-yellow-9 {
  background-color: #fcc350;
}

.text-theme-yellow-9, .text-theme-yellow-9 * {
  color: #fcc350;
}

.border-theme-yellow-9 {
  border-color: #fcc350 !important;
}

.bg-theme-yellow-11 {
  background-color: #e3a936;
}

.text-theme-yellow-11, .text-theme-yellow-11 * {
  color: #e3a936;
}

.border-theme-yellow-11 {
  border-color: #e3a936 !important;
}

.bg-theme-yellow-12 {
  background-color: #ca9630;
}

.text-theme-yellow-12, .text-theme-yellow-12 * {
  color: #ca9630;
}

.border-theme-yellow-12 {
  border-color: #ca9630 !important;
}

.bg-theme-yellow-13 {
  background-color: #b0842a;
}

.text-theme-yellow-13, .text-theme-yellow-13 * {
  color: #b0842a;
}

.border-theme-yellow-13 {
  border-color: #b0842a !important;
}

.bg-theme-yellow-14 {
  background-color: #977124;
}

.text-theme-yellow-14, .text-theme-yellow-14 * {
  color: #977124;
}

.border-theme-yellow-14 {
  border-color: #977124 !important;
}

.bg-theme-yellow-15 {
  background-color: #7e5e1e;
}

.text-theme-yellow-15, .text-theme-yellow-15 * {
  color: #7e5e1e;
}

.border-theme-yellow-15 {
  border-color: #7e5e1e !important;
}

.bg-theme-yellow-16 {
  background-color: #654b18;
}

.text-theme-yellow-16, .text-theme-yellow-16 * {
  color: #654b18;
}

.border-theme-yellow-16 {
  border-color: #654b18 !important;
}

.bg-theme-yellow-17 {
  background-color: #4c3812;
}

.text-theme-yellow-17, .text-theme-yellow-17 * {
  color: #4c3812;
}

.border-theme-yellow-17 {
  border-color: #4c3812 !important;
}

.bg-theme-yellow-18 {
  background-color: #32260c;
}

.text-theme-yellow-18, .text-theme-yellow-18 * {
  color: #32260c;
}

.border-theme-yellow-18 {
  border-color: #32260c !important;
}

.bg-theme-yellow-19 {
  background-color: #191306;
}

.text-theme-yellow-19, .text-theme-yellow-19 * {
  color: #191306;
}

.border-theme-yellow-19 {
  border-color: #191306 !important;
}

html, body, p, ul {
  margin: 0;
  padding: 0;
}

body {
  line-height: 1;
}

section {
  padding: 2rem 0;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after {
  content: "";
  content: none;
}

q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

a {
  text-decoration: none;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  color: #001a24;
}
a:hover {
  color: black;
}

.container-xl {
  padding: 0;
}
@media screen and (max-width: 1200) {
  .container-xl {
    padding: 1em;
  }
}

/* @font-face { font-family: 'Chanel-regular'; src: url('assets/fonts/ABChanel_Corpo-Regular_web.ttf'); } 
@font-face { font-family: 'Chanel-light'; src: url('assets/fonts/ABChanel_Corpo-Light_web.ttf'); } 
@font-face { font-family: 'Chanel-extralight'; src: url('assets/ABChanel_Corpo-Extra_Light_web.ttf'); } 
@font-face { font-family: 'Chanel-bold'; src: url('assets/ABChanel_Corpo-Semi_Bold_web.ttf'); } 
@font-face { font-family: 'Helvetica'; src: url('assets/fonts/Helvetica-Light.ttf'); } 
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@600&display=swap'); */
body {
  font-family: "Roboto Condensed", sans-serif;
  font-size: 1rem !important;
  color: #001a24 !important;
}
@media screen and (min-width: 992px) {
  body {
    font-size: 0.85rem !important;
  }
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: "Roboto Condensed", sans-serif;
  margin: 0;
  font-weight: bold;
}

.h1, h1 {
  font-size: 3.625rem;
  line-height: 4.5rem;
  margin-bottom: 0.2em;
}

.h2, h2 {
  font-size: 2.375rem;
  line-height: 2.75rem;
}

.h3, h3 {
  font-size: 2rem;
  line-height: 1.8rem;
}

.h4 {
  font-size: 1.75rem;
  line-height: 1.6rem;
}

.h5, h5 {
  font-size: 1.5rem;
}

.h6, h6 {
  font-size: 1.25rem;
}

.para, p {
  font-size: 1rem;
  line-height: 1.25rem;
  color: #001a24;
}

.font-primary {
  font-family: "Roboto Condensed", sans-serif;
}

.font-secondary {
  font-family: "Roboto Condensed", sans-serif;
}

.size-sm {
  font-size: 1rem;
}

.size-md {
  font-size: 1.25rem;
}

.size-lg {
  font-size: 1.5rem;
}

#login-form label {
  display: block;
}
#login-form input {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 3px;
  -webkit-transition: border-color 0.3s;
  transition: border-color 0.3s;
}
#login-form input:hover {
  border-color: #666;
}
#login-form input.invalid {
  border-color: red !important;
}
#login-form button {
  color: #fff;
  padding: 10px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;
}
#login-form .error-message {
  color: red;
}

#left-bar {
  width: 400px;
  -webkit-transition: -webkit-transform 0.5s ease;
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
  background-color: #f9fdff;
  height: 100vh;
  overflow-y: scroll;
  position: fixed;
  z-index: 500;
  scrollbar-width: thin;
}
#left-bar::-webkit-scrollbar {
  width: 5px;
}
#left-bar::-webkit-scrollbar-thumb {
  background-color: #88bfff;
  border-radius: 6px;
}
#left-bar::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.0941176471);
}
#left-bar .logo {
  margin-bottom: 5px;
}
#left-bar ul {
  list-style: none;
  padding: 0;
}
#left-bar ul li {
  border-bottom: 1px solid white;
}
#left-bar ul li a {
  text-decoration: none;
  color: #000000;
  display: block;
  padding: 8px;
  -webkit-transition: 0s;
  transition: 0s;
  font-size: 1.3em;
  font-weight: bold;
  font-family: "Roboto Condensed", sans-serif;
  border-bottom: 1px solid white;
  padding-left: 1em;
  border-width: 0;
  background-color: #88bfff;
}
#left-bar ul li a.active {
  background-color: #001a24;
  color: white;
}
#left-bar ul li a.active:hover {
  background-color: #001a24;
}
#left-bar ul li ul li a {
  font-weight: normal;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 1.1em;
  padding-left: 2.25em;
  background-color: #dcebfd;
}
#left-bar ul li ul li a:hover {
  background-color: #88bfff;
}
#left-bar ul li ul li a.active {
  background-color: #d54502;
  color: #fff;
}
#left-bar ul li ul li a.active:hover {
  background-color: #d54502;
}
#left-bar ul li ul li ul li a {
  font-size: 1em;
  background-color: #f1f9fc;
}
#left-bar ul li ul li ul li a.active, #left-bar ul li ul li ul li:hover {
  background-color: #fe631b;
  color: #fff;
}
#left-bar ul li ul li ul li a.active:hover, #left-bar ul li ul li ul li:hover:hover {
  background-color: #fe631b;
}
#left-bar ul .li-parent .anchor-parent:hover {
  background-color: #bb3b00;
  color: white;
}
#left-bar ul .li-parent .anchor-parent.active {
  background-color: #bb3b00;
  color: white;
}
#left-bar .anchor-parent {
  border-bottom: 1px solid white;
}

.leftbar-hidden {
  -webkit-transform: translateX(-400px);
          transform: translateX(-400px);
}

.opacity-75 {
  opacity: 0.75;
  filter: alpha(opacity=75);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=75);
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
}

.opacity-50 {
  opacity: 0.5;
  filter: alpha(opacity=50);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
}

.opacity-25 {
  opacity: 0.25;
  filter: alpha(opacity=25);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=25);
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
}

.opacity-hover-100:hover {
  filter: alpha(opacity=100);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
  opacity: 1 !important;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
}

.opacity-hover-75:hover {
  filter: alpha(opacity=75);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=75);
  opacity: 0.75 !important;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
}

.opacity-hover-50:hover {
  filter: alpha(opacity=50);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
  opacity: 0.5 !important;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
}

.opacity-hover-25:hover {
  filter: alpha(opacity=25);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=25);
  opacity: 0.25 !important;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
}

.flex-center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

body {
  background-color: transparent !important;
  background-color: #faf9f8 !important;
  line-height: 125%;
}

.shadow {
  box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.08) !important;
  -webkit-box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.08) !important;
  -moz-box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.08) !important;
}

body {
  margin: 0;
  padding: 0;
}

.contet-without-leftbar {
  -webkit-transform: translateX(0) !important;
          transform: translateX(0) !important;
  width: 100vw !important;
}

.hamburger svg {
  width: 30px;
  height: 30px;
}

.app-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.app-container .content {
  height: 100vh;
  -webkit-transform: translateX(400px);
          transform: translateX(400px);
  -webkit-transition: -webkit-transform 0.5s ease;
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
  z-index: 499;
  width: calc(100vw - 417px);
}
.app-container .bottom-bar {
  padding: 10px;
  position: fixed;
  bottom: 0;
  width: calc(100% - 400px);
}
.app-container .bottom-bar a {
  display: block;
  padding: 0.5em 1em;
  margin: 0 4px;
  background-color: #88bfff;
  color: white;
  font-weight: bold;
  cursor: pointer;
}
.app-container .bottom-bar a:hover {
  background-color: #096BDE;
  -webkit-transition: 0s;
  transition: 0s;
}
.app-container .bottom-bar a.disabled {
  opacity: 0.2;
  cursor: not-allowed;
}
.app-container .bottom-bar a.disabled:hover {
  background-color: #096BDE;
}

.task-form {
  border: 1px solid #88bfff;
  padding: 1em;
}
.task-form label {
  font-weight: bold;
  font-size: 1.2em;
}
.theme-button {
  display: inline-block;
  padding: 0.75em 1.5em;
  font-size: 1.1em;
}

.theme-button-primary {
  color: white;
}
.theme-button-primary:hover {
  color: white;
}/*# sourceMappingURL=style.css.map */