@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');


:root                                  {

                                          --unit: 5px;

                                          --arrowPosition:      50%;

                                          --primary:        #0F1131;
                                          --primary1300:    #1D215F;
                                          --secondary:      #06B4EF;
                                          --secondary1300:  #009ACE;
                                          --secondary200:   #478395;
                                          --secondary150:   #EFFBFF;
                                          --gray550:        #E7EDF4;
                                          --gray200:        #F0F2F5;
                                          --gray150:        #F2F2F2;
                                          --gray100:        #F8F8F8;

                                          --green:          #21AD00;
                                          --green150:       #E8F7E4;
                                          --orange:         #E35B09;
                                          --orange150:      #FFEEE5;
                                          --red:            #BA3212;
                                          --red150:         #F9E9E6;

                                          --white:          #FFFFFF;

                                          --padding:        var(--unit);
                                          --margin:         var(--unit);

                                          --font:           normal 14px 'Manrope', sans-serif;

                                          --elementHeight:  50px;
                                          --elementHeightMedium: 45px;

                                          --border:        var(--gray550);
                                          --borderActive:  var(--primary);

                                          --radius:         15px;

                                          --shadow:         0px 3px 6px #0000000D



                                       }


/* Global Style Elemenets */
*                                     {

                                        outline:                none;
                                        box-sizing:             border-box;
                                        margin:                 var(--margin);
                                        padding:                var(--padding);
                                        /* border-radius:          var(--radius);   */
                                        font:                   var(--font);

                                      }

html, body                            {
                                        height:                 100%;
                                        width:                  100%;
                                        background:            #fff ;
                                        box-sizing:             border-box !important;
                                        padding:                0px !important;
                                        margin:                 0px !important;
                                      }

div                                   {
                                         border-radius:         var(--radius);
                                         /* box-shadow:            var(--shadow);  */

                                      }

a, a:active, a:visited                { text-decoration: none; font-weight: 500; color: var(--secondary);  }
a:hover                               { text-decoration: none; font-weight: 500; color: var(--secondary); text-decoration: underline; cursor: pointer;}



input                                 {

                                       border:        1px solid var(--border);
                                       height:        var(--elementHeight);
                                       border-radius: 100px;
                                       padding:       0px 20px 0px 20px;
                                       width:         calc(100% - var(--unit) * 2);
                                       margin:        var(--margin);


                                      }
input:hover           {
                                        border:        1px solid var(--borderActive);
                                       }

input:active,   input:focus           {
                                       border:        1px solid var(--borderActive);
                                      }

textarea                              {

                                      }

.invalid                              {}

select                                {
                                       border:        1px solid var(--border);
                                       height:        var(--elementHeight);
                                       border-radius: 100px;
                                       padding:       0px 20px 0px 20px;
                                       width:         calc(100% - var(--unit) * 2);
                                       margin:        var(--margin);
                                       appearance:    none;
                                       background: url('assets/custom/arrow-down-circle.svg')  no-repeat  calc(100% - var(--unit)*4);
                                       background-size: 16px 16px;
                                      }

input[type=time]                      {


                                      }

input[type=checkbox]                  {
                                          cursor: pointer;
                                          height:          calc(var(--unit)*4);
                                          width:           calc(var(--unit)*4);
                                          margin:          calc(var(--unit)*2)  ;
                                          border:          2px solid #000;


                                      }

input[type=checkbox]::after           {

                                          margin-left: 24px;
                                          content: attr(label);
                                          white-space: nowrap;

                                      }

button              {
                                         border:        none;
                                         height:        var(--elementHeight);
                                         border-radius: 100px;
                                         padding:       0px 50px 0px 50px;
                                         /* width:         calc(100% - var(--unit) * 2);  */
                                         margin:        var(--margin);
                                         background:    var(--primary);
                                         color:         var(--white);
                                         font-size:     16px;
                                         display:       flex;
                                         align-items: center;
                                         justify-content: center;
                                         flex-direction: row-reverse;
                                         min-width: 50px; min-height:50px;
                                         cursor: pointer;

}

button:not(:disabled):hover    {
                                            background:    var(--primary1300);
                                            transition: 0.4s;
                                            cursor:        pointer;
}

button:disabled                          { opacity: 0.5;  cursor: default; }



button img     {  filter: invert(1) saturate(0%);}




.outline                                 {
                                         border:        1px solid var(--border);
                                         background:    var(--white);
                                         color:         var(--secondary200)
}

.outline   img                           {
                                         filter: none
}

.outline:not(:disabled):hover                          {

                                          /* border:        none;   */
                                          background:    var(--primary);
                                          color:         var(--white);

}

.outline:hover    img                      {
                                          filter: invert(1) saturate(0%);

}

.critical                                {background-color: var(--secondary150); border:1px solid var(--secondary150)}
.critical:hover                          {background-color: var(--secondary150); border:1px solid var(--secondary200)}


input[type=button]:hover  .invertToWhite {
                                        filter: invert(1) saturate(0%);
                                         }


input[type=color]                    {
                                        padding:4px
                                      }

input[type=file]                    {
                                        border:none;
                                        display: none;
                                      }

iframe {
  width:100%;
  height: 100%;
  border: 1px dashed var(--gray30)
}





/* Arrow Box*/
.topArrowBox                        {
  position:         relative;
  background:       var(--white);
  border:           1px solid var(--border);
  box-shadow: var(--shadow);
  z-index: 100;
  }

.topArrowBox:after, .topArrowBox:before {

  bottom: 100%;
  left:var(--arrowPosition);
  border: solid transparent;
  content: "";
  position: absolute;


}

.topArrowBox:after {
  border-bottom-color: #fff; /*fix here*/
  border-width: calc( 2 * var(--unit));
  margin-left:  calc( 2 * var(--unit) * -1);

}

.topArrowBox:before {

  border-bottom: 1px solid var(--border);
  border-width:  12px;
  margin-left:   -12px;

}






.bottomArrowBox {
  position:   relative;
  background: var(--white);
  border:     1px solid var(--border);
  box-shadow: var(--shadow);
}


.bottomArrowBox:after, .bottomArrowBox:before {
  top:      100%;
  left:     calc( var(--arrowPosition) - 24px) ;
  border:   solid transparent;
  content:  "";
  position: absolute;
}

.bottomArrowBox:after {
  border-top-color: var(--white);
  border-width: 12px;
  margin-left:  12px;
}


.bottomArrowBox:before {

  border-top-color: 1px solid var(--border);
  border-width: 12px;
  margin-left:  12px;
}



.leftArrowBox {
  position:   relative;
  background: var(--white);
  border:     1px solid var(--border);
  box-shadow: var(--shadow);
}


.leftArrowBox:after, .leftArrowBox:before {
  right: 100%;
  top: calc(var(--arrowPosition) - (var(--unit) * 2));
  border: solid transparent;
  content: "";
  position: absolute;
}

.leftArrowBox:after {

  border-right-color: #fff;
  border-width: 12px;
  margin-left:  calc( 2 * var(--unit) * -1);
}
.leftArrowBox:before {

  border-right-color: 1px solid var(--border);
  border-width: 12px;
  margin-left:  -12px

}


.rightArrowBox {
  position:   relative;
  background: var(--white);
  border:     1px solid var(--border);
  box-shadow: var(--shadow);
}
.rightArrowBox:after, .rightArrowBox:before {
  left: 100%;
  top: var(--arrowPosition)  ;
  border: solid transparent;
  content: "";
  position: absolute;
}

.rightArrowBox:after {

  border-left-color: #fff;
  border-width: 10px;
  margin-top:   -10px;
}
.rightArrowBox:before {

  border-left:  1px solid var(--border);
  border-width: 12px;
  margin-top:   -12px;
}

.no-select {  user-select: none;  -webkit-user-select: none;   -moz-user-select: none;      -ms-user-select: none;    }

.loadingButton {    img {        animation: spinner 2s linear infinite;        margin-inline-end: 10px;    }}
@keyframes spinner {    0% {        transform: rotate(0deg);    }    100% {        transform: rotate(360deg);    }}


.primaryFilter img {

  filter: brightness(0) saturate(100%) invert(44%) sepia(64%) saturate(961%) hue-rotate(156deg) brightness(110%) contrast(96%);

}

.ofh {
    overflow: hidden;
}

.ofs {
  overflow: scroll;
}

.pf {
    position: fixed;
}
.t20 {
    top: 20px !important;
}

.br50 {
    border-radius: 50px !important;
}

.secondaryFilter {
    filter: brightness(0) saturate(100%) invert(48%) sepia(75%) saturate(582%) hue-rotate(150deg) brightness(102%) contrast(103%)
}

.secondary200Filter {
  filter: brightness(0) saturate(100%) invert(41%) sepia(57%) saturate(323%) hue-rotate(147deg) brightness(101%) contrast(94%);
}

.iconSecondary200Filter img {    filter: brightness(0) saturate(100%) invert(41%) sepia(57%) saturate(323%) hue-rotate(147deg) brightness(101%) contrast(94%);}

.whiteFilter {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(1%) hue-rotate(48deg) brightness(103%) contrast(102%);
}

.white-filter img {
  filter: brightness(0) saturate(100%) invert(100%) sepia(12%) saturate(7500%) hue-rotate(254deg) brightness(119%) contrast(110%);
}

.button-img {    img {        margin-right: 10px !important;    }}


.menuArrowAr {

  right: 235px!important;
}
.menuArrowEn  {

  left: 235px!important;
}
.arrowCollapsedAr  {
  rotate: 180deg!important;
  right: 65px!important;
}
.arrowCollapsedEn  {

  left: 65px!important;
  rotate: 180deg!important;
}


.selected {
    background-color: #f5f5f5;
}

.selected img {
    filter: brightness(0) saturate(100%) invert(48%) sepia(75%) saturate(582%) hue-rotate(150deg) brightness(102%) contrast(103%)
}

.selected #menuText {
    color: var(--secondary);
}

.selected .selectedDiv {
    background-color: var(--secondary);
    border-radius: 0 30px 28px 0;
    height: 45px;
    width: 4px;
}
.notSelected {
    cursor: pointer;
}

.transition {
    transition: all 0.2s;
}
.ofs {
  overflow-y: scroll;
}
::-webkit-scrollbar {
  display: none;
}
.bgSecondary {
  background: var(--secondary);
}
.bgSecondary150 {
  background-color: var(--secondary150);
}
.loader {
  position: relative;
  left: -9999px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #ffffff;
  color: #ffffff;
  box-shadow: 9999px 0 0 -5px;
  animation: dot-pulse 1.0s infinite linear;
  animation-delay: 0.25s;
}


.loader::before,
.loader::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #ffffff;
    color: #ffffff;
}

.loader::before {
    box-shadow: 9984px 0 0 -5px;
    animation: dot-pulse-before 1.0s infinite linear;
    animation-delay: 0s;
}

.loader::after {
    box-shadow: 10014px 0 0 -5px;
    animation: dot-pulse-after 1.0s infinite linear;
    animation-delay: 0.5s;
}


.loaderButton {
  height: var(--elementHeight);
  cursor: pointer;
  transition: all .25s ease;
  border-radius: 28px;
  padding-left: 32px;
  padding-right: 32px;
  min-width: 190px;
  color: #fff;
  overflow: hidden;
}

.loaderButton:active {
  transform: scale(.95);
}

.loaderButton.activeLoading .btnLoading {
  visibility: visible;
  opacity: 1;
}

.loaderButton .btnLoading {
  opacity: 0;
  visibility: hidden;
}

.loaderButton:hover {
  background-color: var(--primary);
}
.menuArrowAr {    right: 235px!important;    rotate: 180deg !important;}.arrowCollapsedAr  {     rotate: 360deg!important;}

.toolbar_show_bottom {
  max-width: 300px;
  width: auto;

  position: fixed;
  background: #0F1131;
  color: #FFFFFF;
  text-align: center;
  border-radius: 10px;
  padding: 10px;
  z-index: 9999999999999999999999999999;
  transition: opacity 0.3s;
visibility: hidden;
}

.toolbar_show_bottom::before {
  content: "";
  position: absolute;
  bottom: 39px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 8px;
  border-style: solid;
  border-color: transparent transparent #0F1131 transparent;
}

.sub-menu {
  display: none;
  flex-direction: row;
}

.toolbar_show_ar{
  width: auto;
  position: fixed;
  background: #0F1131;
  color: #FFFFFF;
  text-align: center;
  border-radius: 10px;
  padding: 10px;
  z-index: 9999999999999999999999999999;
  transition: opacity 0.3s;

  &::before {
      content: "";
      position: absolute;
      top: 50%;
      left: -14px;
      transform: translateY(-50%);
      border-width: 8px;
      border-style: solid;
      border-color: transparent  #0F1131 transparent transparent ;
  }
}
.toolbar_show_en{
  width: auto;
  position: fixed;
  background: #0F1131;
  color: #FFFFFF;
  text-align: center;
  border-radius: 10px;
  padding: 10px;
  z-index: 9999999999999999999999999999;
  transition: opacity 0.3s;

  &::before {
      content: "";
      position: absolute;
      top: 50%;
      right: -14px;
      transform: translateY(-50%);
      border-width: 8px;
      border-style: solid;
      border-color: transparent  transparent transparent #0F1131  ;
  }
}

.visible {
  visibility: visible;
  opacity: 1;
}
.floatingActions{    position: absolute;    bottom: 70px;}

.loadingIcon {
    img {
        animation: spinner 2s linear infinite;
        margin-inline-end: 10px;
    }