/* 

  Example Styles
  --------------

  This example demonstrates further styling opportunities when using the "Metadata" property in DriveWorks.
  These styles can be combined, tweaked and removed - this aims only to provide inspiration.

  IMPORTANT NOTE: CSS styles should be seen as a 'progressive enhancement'.
  Your Forms should function fully without these additional styles, as they may not be loaded in all environments the Integration is accessed.

  For more detailed information on these selectors, see: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

  ## Note: the use of !important allows the default inline styles to be overwritten (style="...") - and should be used carefully.
  For more information, see: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#The_!important_exception

*/

/* Set re-usable colours - update in one central location, apply to many rules */
:root {
  --color-brand-primary: #4299e1;
  --color-brand-secondary: #48bb78;
}

/* Global button default style */
[data-metadata*="button"] button {
    background: none !important; /* ## See note above when using !important */
    border: none !important;
    cursor: pointer !important;
}

/* Background color */
[data-metadata*="button"] {
  background-color: var(--color-brand-primary);
}

[data-metadata*="Sback"] {
  border-radius: 4px;
background: var(--dark-mode-gradient, linear-gradient(139deg, #11344C -0.41%, #04010A 111.11%));
}


[data-metadata*="MBackground"] {
    background: var(--dark-mode-gradient, linear-gradient(139deg, #11344C 0%, #04010A 100%)) !important;
    border-radius: 0px 15px 15px 0px !important;
}


[data-metadata*="MBackground_D"] {
	
/* Drop shadow 3 */
		box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.10)!important;
		background: linear-gradient(168deg, #F8F8F8 51.01%, #DBDEE1 122.49%)!important;
	
}




/* Text color */
[data-metadata*="button"] [data-id*="CaptionElement"] {
  color: #fff !important;
}

/* Rounded Button */
[data-metadata*="rounded"] {
    border-radius: 6px !important;
    border: .5px solid !important;
    border-color: #A7A7A7 !important;
}
[data-metadata*="rounded"]:focus-within{
	 border-radius: 6px !important;
    border: .5px solid !important;
    border-color: #4299e1 !important
}

[data-metadata*="rounded_D"] {
    border-radius: 6px !important;
    border: .5px solid !important;
    border-color: #747474 !important;
}

[data-metadata*="rounded_D"]:focus-within{
	 border-radius: 6px !important;
    border: .5px solid !important;
    border-color: #4299e1 !important
}



[data-metadata*="roundedBack"] {
    border-radius: 8px;
	border-color: transparent !important;
    border: 1px solid var(--Dark-mode-Dark-Blue, #253F56)!important;
    background: var(--Dark-mode-Dark-Blue, #253F56)!important;
    box-shadow: 0px 1px 25px 0px rgba(0, 0, 0, 0.10)!important;
	
}


[data-metadata*="roundedBack_D"] {
    border-radius: 8px !important;
	border-color: transparent !important;
    background: var(--White, #FFF)!important;
	filter: drop-shadow(0px 0px 7px rgba(6, 10, 15, 0.28));
   
}


[data-metadata*="DrawBack"] {
	background: var(--BG-Gradient, linear-gradient(0deg, #F3F6FF -3.83%, rgba(243, 246, 255, 0.00) 114.75%))!important;

}


[data-metadata*="qty"] {
    border-radius: 5px 0px 5px 0px !important;
    border-color: transparent !important;
}

    [data-metadata*="qty"] div {

        line-height: 18px !important;
        letter-spacing: -0.055em !important;
        padding: 1px !important;
    }


[data-metadata*="roundedBackE"] {
    border-radius: 6px !important;
    border: 1px solid !important;
    border-color: #DBC745 !important;
}


[data-metadata*="roundedBackE_D"] {
    border-radius: 6px !important;
    border: 1px solid !important;
    border-color: #DBC745 !important;
background: var(--White, #FFF)!important;

/* Drop Shadow */
box-shadow: 0px 1px 25px 0px rgba(0, 0, 0, 0.10)!important;
}

/* 'Pill' Button */
[data-metadata*="pill"] {
    border-radius: 100em;

}

    /* 'Pill' Button with border*/
[data-metadata*="pillb"] {
    border-radius: 100em;
    border: .5px solid !important;
    border-color: #45CBFC !important;
}

/* 'Pill' Button with border*/
[data-metadata*="pillbd"] {
    border-radius: 100em;
    border: .5px solid !important;
    border-color: #007CC2 !important;
}


/* 'Pill' Button with border */
[data-metadata*="pilld"] {
    border-radius: 100em;
    border: .5px solid !important;
    border-color: #A7A7A7 !important;
}

/* 'Pill' Button with border */
[data-metadata*="pilldd"] {
    border-radius: 100em;
}


[data-metadata*="ImageRound"] {
    border-radius: 100em;
	border-color: transparent !important;
}

[data-metadata*="BoxShadow"] {
	
    box-shadow: 0px 1px 25px 0px rgba(0, 0, 0, 0.10)!important;
	
}


[data-metadata*="number16"] input.dw-borderBox {
    line-height: 18px !important;
    padding: 5px !important;
}



[data-metadata*="group"] {
    border-radius: 6px !important;
    border: 1px solid !important;
    border-color: #FFFFFF !important;
}

[data-metadata*="group_D"] {
    border-radius: 6px !important;
    border: 1px solid !important;
    border-color: #A7A7A7 !important;
}

[data-metadata*="SquareW"] {
   
    border: 0.5px solid !important;
    border-color: #FFFFFF !important;
}

[data-metadata*="SquareB"] {
   
    border: 0.5px solid !important;
    border-color: #45CBFC !important;
}


[data-metadata*="FontMedium"] div {
    font-weight: 500 !important;
    font-family: "Fb Coherenti Sans Medium","Rubik",serif !important;
}

[data-metadata*="FontRegular"] div {
    font-weight: 400 !important;
    font-family: "fb coherenti sans","Rubik",serif !important;
}

[data-metadata*="lineheight20"] div {
    line-height: 20px;
}



[data-metadata*="direction"] div {
    direction: rtl  !important;
    unicode-bidi: bidi-override !important;

}


[data-metadata*="infoE"] div {
    direction: ltr !important;

}


[data-metadata*="infoH"] div {
    direction: rtl !important;

}


[data-metadata*="18font"] div:nth-child(2) {
    
    line-height: 20px !important;
    letter-spacing: -0.015em !important;
}

[data-metadata*="16font"] div:nth-child(2) {


}


[data-metadata*="14font"] div:nth-child(2) {
   
    line-height: 18px !important;
}

[data-metadata*="groupselect"] {
    border-radius: 6px !important;
    border: 1px solid !important;
    border-color: #45CBFC !important;
}

[data-metadata*="groupselect_D"] {
    border-radius: 6px !important;
    border: 1px solid !important;
    border-color: #007CC2 !important;
	background: rgba(0, 124, 194, 0.1)!important;

}

[data-metadata*="PtBack"] {
	
	background: rgba(0, 124, 194, 0.1)!important;

}

[data-metadata*="warning"] {
    border-radius: 6px !important;
    border: 1px solid !important;
    border-color: #E47879 !important;
}

[data-metadata*="edge"] select {
    border-radius: 6px !important;
    border: .5px solid !important;
    border-color: #A7A7A7 !important;
    background-color: transparent !important;
    text-align: right !important;
    padding: 4px !important;
    font-weight: 500 !important;
    font-family: "Fb Coherenti Sans Medium","Rubik",serif !important;
}

[data-metadata*="edgeL"] select {
    border-radius: 6px !important;
    border: .5px solid !important;
    border-color: #A7A7A7 !important;
    background-color: transparent !important;
    text-align: left !important;
    padding: 4px !important;
    font-weight: 500 !important;
    font-family: "Fb Coherenti Sans Medium","Rubik",serif !important;
}

[data-metadata*="edgeoff"] select {
    border: 0px solid !important;
    border-color: transparent !important;
    background-color: transparent !important;
    text-align: right !important;
    padding: 5px !important;
   
}

[data-metadata*="edge1"] select option {
    background: #F3F8FD !important;
    border-radius: 2px !important;
    right: 0 !important;
    color: #424449 !important;
   
}

[data-metadata*="edge1L"] select option {
    background: #F3F8FD !important;
    border-radius: 2px !important;
    left: 0 !important;
  
    color: #424449 !important;
    
}


[data-metadata*="Box"] {
border: 1px solid var(--White, #FFF)!important;
}

[data-metadata*="SBox"] {
border: 2px solid var(--Light-Blue, #45CBFC)!important;
    
}

[data-metadata*="Box_D"] {
border: 1px solid var(--White, #253F56 )!important;
}

[data-metadata*="SBox_D"] {
border: 2px solid var(--Light-Blue, #007CC2)!important;
    
}


[data-metadata*="slider"] div:nth-child(2) table tbody tr:nth-child(2) td div > div {
    height: 2px !important;
}

[data-metadata*="num18"] input.dw-borderBox {

    line-height: 20px !important;
    letter-spacing: -0.015em !important;
    padding: 5px !important;
    font-weight: 500 !important;
    font-family: "Fb Coherenti Sans Medium","Rubik",serif !important;
}

[data-metadata*="bf16"] div.dw-borderBox {
   
    line-height: 18px !important;
}


  


/* Inactive Button */
[data-metadata*="inactive"] {
  opacity: 50% !important;
}
[data-metadata*="inactive"] button {
  cursor: not-allowed !important;
}

/* Change color on hover, with ease */
[data-metadata*="hover-green"]:hover {
  background-color: var(--color-brand-secondary);
}

[data-metadata*="slider1"]::-webkit-slider-runnable-track {
    background-color: green !important;
    height: .5px !important;
}





/* Lighten on hover */
[data-metadata*="hover-light"]:hover {
    filter: brightness(120%) !important;
}

/* Darken on hover */
[data-metadata*="hover-dark"]:hover {
  filter: brightness(85%);
}

/* Circle */
[data-metadata*="circle"] {
  border-radius: 50%;
}

/* Border Styles */
[data-metadata*="border-dashed"] {
  border: 1px dashed #aaa !important;
}

/* Drop Shadow */
[data-metadata*="shadow"] {
    box-shadow: 2px 2px 20px rgba(0,0,0,0.5) !important;
}

/* Background Gradient */
[data-metadata*="gradient"] {
  background: linear-gradient(45deg, #833ab4 0%, #4299e1 100%);
}

/* Custom Shape (clip-path) */
[data-metadata*="shaped"] {
  clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);
}

/* Blur */
[data-metadata*="blur"] {
  filter: blur(3px);
}

/* Rotate */
[data-metadata*="rotate"] {
  transform: rotate(45deg);
}

[data-metadata*="rotate1"] {
    transform: rotate(135deg);
} 
/* Scale */
[data-metadata~="scale"] {
  transform: scale(0.5);
}

/* Skew */
[data-metadata*="skew"] {
  transform: skewX(-15deg);
}

/* Grayscale */
[data-metadata*="grayscale"] {
  filter: grayscale(1);
}

/* Animate background color */
[data-metadata*="animate-background"] {
  transition: background-color .5s ease;
}


/* Animate: width */
div [data-metadata*="animateheight"] {
    transition: height 0s ease;
}

/* Animate: top position */
div [data-metadata*="animate"] {
    transition: top 0s ease;
}

/* Animate:bounce  */
div [data-metadata*="bounce"] {
    animation: bounce 60s infinite alternate;
}

@keyframes bounce {

    0%, 0.5% {
        transform: scale(1);
    }

    0.5%, 1% {
        transform: scale(1.2);
    }

    1%, 1.5% {
        transform: scale(1);
    }


    89.5%, 99% {
        transform: scale(1);
    }

    99%, 99.5% {
        transform: scale(1.2);
    }

    99.5%, 100% {
        transform: scale(1);
    }
}


[data-metadata="scrollbar"] div::-webkit-scrollbar-track
{
	background-color: transparent !important;
	border-radius: 5px !important;
}

[data-metadata="scrollbar"] div::-webkit-scrollbar
{
	width: 5px !important;
	background-color: transparent !important;
}

[data-metadata="scrollbar"] div::-webkit-scrollbar-thumb
{
	border-radius: 5px !important;
	background-color: transparent !important;
	background-image: -webkit-gradient(linear,
									   40% 0%,
									   75% 84%,
									   from(#45CBFc),
									   to(#45CBFc),
									   color-stop(.6,#45CBFc))
}