import { StyleSheet } from "react-native";

const Styles = StyleSheet.create({
   wrapLogin: {
      flex: 1,
      justifyContent: "flex-start",
      alignItems: "stretch",
      padding: 20,
   },
   textHeaderHome: {
      fontSize: 18,
      fontWeight: 'bold',
      flex: 1,
      color: 'white'
   },
   textDefault: {
      fontSize: 15,
      lineHeight: 24,
   },
   textDefaultSemiBold: {
      fontSize: 15,
      lineHeight: 24,
      fontWeight: '600',
   },
   textMediumNormal: {
      fontSize: 13,
      lineHeight: 24,
   },
   textMediumSemiBold: {
      fontSize: 13,
      lineHeight: 24,
      fontWeight: '600',
   },
   textSmallSemiBold: {
      fontSize: 10,
      fontWeight: '600',
   },
   textTitle: {
      fontSize: 32,
      fontWeight: 'bold',
      lineHeight: 32,
   },
   textSubtitle: {
      fontSize: 20,
      fontWeight: 'bold',
   },
   textSubtitle2: {
      fontSize: 20,
   },
   textLink: {
      fontSize: 14,
      color: '#0a7ea4',
   },
   textInformation: {
      fontSize: 12,
      fontWeight: 'light',
   },
   cError: {
      color: '#DB1514'
   },
   cGray: {
      color: 'gray'
   },
   cWhite: {
      color: 'white'
   },
   cBlack: {
      color: 'black'
   },
   cDefault: {
      color: '#19345E'
   },
   cFolder: {
      color: '#f9cc40'
   },
   mb05: {
      marginBottom: 5
   },
   mb10: {
      marginBottom: 10
   },
   mb12: {
      marginBottom: 12
   },
   mb13: {
      marginBottom: 13
   },
   mb15: {
      marginBottom: 15
   },
   mb20: {
      marginBottom: 20
   },
   mb30: {
      marginBottom: 30
   },
   mb50: {
      marginBottom: 50
   },
   mb100: {
      marginBottom: 100
   },
   mv05: {
      marginVertical: 5
   },
   mv15: {
      marginVertical: 15
   },
   mh03: {
      marginHorizontal: 3
   },
   mh05: {
      marginHorizontal: 5
   },
   mh10: {
      marginHorizontal: 10
   },
   mh15: {
      marginHorizontal: 15
   },
   mv50: {
      marginVertical: 50
   },
   mv10: {
      marginVertical: 10
   },
   mt02: {
      marginTop: 2
   },
   mt05: {
      marginTop: 5
   },
   mt10: {
      marginTop: 10
   },
   mt15: {
      marginTop: 15
   },
   mt30: {
      marginTop: 30
   },
   mr05: {
      marginRight: 5
   },
   mr10: {
      marginRight: 10
   },
   ml05: {
      marginLeft: 5
   },
   ml10: {
      marginLeft: 10
   },
   ml15: {
      marginLeft: 15
   },
   ml20: {
      marginLeft: 20
   },
   ml25: {
      marginLeft: 25
   },
   p0: {
      padding: 0
   },
   pb05: {
      paddingBottom: 5
   },
   pb07: {
      paddingBottom: 7
   },
   pb10: {
      paddingBottom: 10
   },
   pb50: {
      paddingBottom: 50
   },
   pb100: {
      paddingBottom: 100
   },
   pb13: {
      paddingBottom: 13
   },
   pb15: {
      paddingBottom: 15
   },
   pb20: {
      paddingBottom: 20
   },
   ph05: {
      paddingHorizontal: 5,
   },
   ph10: {
      paddingHorizontal: 10,
   },
   ph15: {
      paddingHorizontal: 15,
   },
   ph20: {
      paddingHorizontal: 20,
   },
   pv03: {
      paddingVertical: 3
   },
   pv05: {
      paddingVertical: 5
   },
   pv10: {
      paddingVertical: 10
   },
   pv15: {
      paddingVertical: 15
   },
   pv20: {
      paddingVertical: 20
   },
   p05: {
      padding: 5
   },
   p15: {
      padding: 15
   },
   p10: {
      padding: 10
   },
   p20: {
      padding: 20
   },
   round05: {
      borderRadius: 5
   },
   round08: {
      borderRadius: 8
   },
   round10: {
      borderRadius: 10
   },
   round15: {
      borderRadius: 15
   },
   round20: {
      borderRadius: 20
   },
   h100: {
      height: '100%'
   },
   w100: {
      width: '100%'
   },
   w48: {
      width: '48%'
   },
   w95: {
      width: '95%'
   },
   w90: {
      width: '90%'
   },
   w80: {
      width: '80%'
   },
   w70: {
      width: '70%'
   },
   w60: {
      width: '60%'
   },
   w50: {
      width: '50%'
   },
   w45: {
      width: '45%'
   },
   w40: {
      width: '40%'
   },
   w30: {
      width: '30%'
   },
   round30: {
      borderRadius: 30
   },
   labelStatus: {
      paddingHorizontal: 15,
      borderRadius: 10
   },
   labelStatusSmall: {
      paddingHorizontal: 10,
      borderRadius: 10
   },
   rowSpaceBetween: {
      justifyContent: 'space-between',
      flexDirection: 'row'
   },
   justifySpaceBetween: {
      justifyContent: 'space-between'
   },
   rowSpaceBetweenReverse: {
      justifyContent: 'space-between',
      flexDirection: 'row-reverse'
   },
   rowItemsCenter: {
      flexDirection: 'row',
      alignItems: 'center'
   },
   rowOnly: {
      flexDirection: 'row'
   },
   btnIconHeader: {
      padding: 3,
   },
   btnFiturMenu: {
      padding: 13,
      borderRadius: 15,
      borderWidth: 1,
   },
   btnRound: {
      backgroundColor: '#1F3C88',
      borderWidth: 0,
      borderColor: '#1F3C88',
      alignItems: 'center',
      borderRadius: 30,
      marginTop: 15,
      paddingVertical: 10
   },
   btnTab: {
      alignItems: 'center',
      paddingVertical: 5,
      paddingHorizontal: 15,
      borderRadius: 20,
      flexDirection: 'row',
      justifyContent: 'center'
   },
   btnLainnya: {
      alignSelf: 'flex-start',
      backgroundColor: '#1F3C88',
      paddingVertical: 5,
      marginVertical: 5
   },
   btnDisabled: {
      backgroundColor: '#d6d8f6',
   },
   btnMenuRow: {
      width: '33%',
      alignItems: 'center'
   },
   btnMenuRowMany: {
      alignItems: 'center',
      marginHorizontal: 10
   },
   inputRoundForm: {
      borderRadius: 5,
      borderColor: '#d6d8f6',
      borderWidth: 1,
      paddingVertical: 10,
      paddingHorizontal: 15,
   },
   inputRoundFormLeft: {
      flexDirection: 'row',
      alignItems: 'center',
      paddingVertical: 0,
   },
   inputRoundFormRight: {
      flexDirection: 'row-reverse',
      alignItems: 'center',
      paddingVertical: 0,
      justifyContent: 'space-between'
   },
   verificationCell: {
      width: 50,
      height: 50,
      lineHeight: 45,
      fontSize: 24,
      borderWidth: 1,
      borderRadius: 15,
      borderColor: 'gray',
      textAlign: 'center',
   },
   verificationFocusCell: {
      borderColor: '#19345E',
   },
   caraoselContent: {
      flex: 1,
      justifyContent: "center",
      marginHorizontal: 15,
      borderRadius: 15,
      backgroundColor: '#19345E',
      display: 'flex',
      width: '92%',
      resizeMode: 'stretch',
      overflow: 'hidden',
   },
   wrapGridContent: {
      shadowColor: '#171717',
      shadowOffset: { width: 0, height: 0 },
      shadowOpacity: 0.1,
      shadowRadius: 5,
      elevation: 2,
      borderRadius: 5,
      marginBottom: 15
   },
   wrapGridCaraousel: {
      width: '95%',
      height: 200,
      shadowColor: '#171717',
      shadowOffset: { width: 0, height: 0 },
      shadowOpacity: 0.1,
      shadowRadius: 5,
      elevation: 2,
      borderRadius: 5,
      marginLeft: 5,
      display: 'flex',
   },
   headerPaperGrid: {
      paddingVertical: 25,
      paddingHorizontal: 20,
      alignItems: 'center',
      borderTopStartRadius: 5,
      borderTopEndRadius: 5
   },
   contentPaperGrid: {
      height: 125,
      borderBottomEndRadius: 5,
      borderBottomStartRadius: 5,
      paddingHorizontal: 20,
      justifyContent: 'space-evenly'
   },
   contentPaperGrid2: {
      height: 100,
      borderBottomEndRadius: 5,
      borderBottomStartRadius: 5,
      paddingHorizontal: 20,
      paddingVertical: 15,
      justifyContent: 'flex-start'
   },
   wrapBar: {
      height: 20,
      backgroundColor: '#ccc',
      borderRadius: 10,
      margin: 0,
      width: '100%'
   },
   contentBar: {
      height: 20,
      backgroundColor: '#3B82F6',
      borderRadius: 10,
   },
   wrapPaper: {
      padding: 10,
      backgroundColor: 'white',
      borderRadius: 5,
      // borderWidth: 1,
      // borderColor: '#d6d8f6',
      shadowColor: '#171717',
      shadowOffset: { width: 0, height: 0 },
      shadowOpacity: 0.1,
      shadowRadius: 5,
      elevation: 2,
   },
   noShadow: {
      shadowColor: 'transparent',
      shadowOffset: { width: 0, height: 0 },
      shadowOpacity: 0,
      shadowRadius: 0,
      elevation: 0,
   },
   shadowBox: {
      shadowColor: '#171717',
      shadowOffset: { width: 0, height: 0 },
      shadowOpacity: 0.1,
      shadowRadius: 5,
      elevation: 2,
   },
   contentItemCenter: {
      justifyContent: 'center',
      alignItems: 'center'
   },
   itemEvent: {
      padding: 10,
      borderRadius: 10,
      flexDirection: 'row',
      alignContent: 'stretch',
      marginBottom: 10
   },
   dividerEvent: {
      width: 7,
      borderRadius: 5,
      marginRight: 10
   },
   wrapItemDiscussion: {
      padding: 15,
      borderRadius: 5,
      borderColor: '#d6d8f6',
      borderBottomWidth: 1,
   },
   wrapItemBorderBottom: {
      padding: 10,
      borderColor: '#d6d8f6',
      borderBottomWidth: 1,
   },
   wrapItemBorderAll: {
      padding: 10,
      borderColor: '#d6d8f6',
      borderWidth: 1,
      borderRadius: 5,
      marginBottom: 5
   },
   wrapItemBorderNone: {
      padding: 10,
      marginBottom: 5
   },
   userProfileExtraSmall: {
      width: 35,
      height: 35,
      borderRadius: 100
   },
   userProfileSmall: {
      width: 48,
      height: 48,
      borderRadius: 100
   },
   userProfileBig: {
      width: 100,
      height: 100,
      borderRadius: 100
   },
   imgListBanner: {
      width: 100,
      height: 50,
      borderRadius: 5
   },
   iconContent: {
      padding: 10,
      borderRadius: 100,
      backgroundColor: '#E5E7EB'
   },
   wrapHeadViewMember: {
      backgroundColor: '#19345E',
      paddingVertical: 30,
      paddingHorizontal: 15,
      alignItems: 'center',
      borderBottomLeftRadius: 25,
      borderBottomRightRadius: 25
   },
   modalBgTransparant: {
      backgroundColor: 'rgba(0, 0, 0, 0.3)',
      flex: 1
   },
   modalContent: {
      width: '100%',
      paddingBottom: 20,
      backgroundColor: 'white',
      borderTopRightRadius: 18,
      borderTopLeftRadius: 18,
      position: 'absolute',
      bottom: 0,
   },
   titleContainer: {
      backgroundColor: 'white',
      borderTopRightRadius: 10,
      borderTopLeftRadius: 10,
      paddingHorizontal: 20,
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
      paddingVertical: 10
   },
   contentContainer: {
      height: '90%'
   },
   modalContentNew: {
      width: '100%',
      backgroundColor: 'white',
      borderTopRightRadius: 18,
      borderTopLeftRadius: 18,
      paddingTop: 5,
      paddingBottom: 5,
      paddingHorizontal: 20
   },
   titleContainerNew: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
      paddingVertical: 10,
   },
   modalFloatContent: {
      backgroundColor: 'white',
      borderRadius: 18,
      paddingTop: 5,
      paddingBottom: 10,
      paddingHorizontal: 20
   },
   titleContainerModalFloat: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'center',
      paddingVertical: 10,
   },
   wrapBtnTab: {
      justifyContent: 'space-between',
      flexDirection: 'row',
      marginBottom: 10,
      borderRadius: 20,
      padding: 5,
      borderWidth: 1,
   },
   itemSelectModal: {
      padding: 10,
      flexDirection: 'row',
      justifyContent: 'space-between',
      borderBottomWidth: 1,
      alignItems: 'center'
   },
   signDate: {
      width: 20,
      height: 2,
      borderRadius: 3,
      marginTop: 3
   },
   selectedDate: {
      backgroundColor: '#238be6',
      borderRadius: 5
   },
   selectRangeDate: {
      backgroundColor: '#228be61f',
   },
   bottomMenuSelectDocument: {
      paddingVertical: 10,
      position: 'absolute',
      width: '100%',
      bottom: 0,
   },
   animatedView: {
      width: '100%',
      overflow: 'hidden',
   },
   wrapperAccordion: {
      width: '100%',
      position: 'absolute',
      display: 'flex',
      alignItems: 'center',
   },
   borderRight: {
      borderRightWidth: 1,
      borderRightColor: '#d6d8f6'
   },
   borderLeft: {
      borderLeftWidth: 1,
      borderLeftColor: '#d6d8f6'
   },
   borderBottom: {
      borderBottomWidth: 1,
      borderBottomColor: '#d6d8f6'
   },
   borderTop: {
      borderTopWidth: 1,
      borderTopColor: '#d6d8f6'
   },
   borderAll: {
      borderWidth: 1,
      borderColor: '#d6d8f6'
   },
   absolute0: {
      position: 'absolute',
      bottom: 0
   },
   absoluteIcon: {
      top: 18,
      left: 20,
      position: 'absolute'
   },
   toastContainer: {
      backgroundColor: 'white',
      borderRadius: 10,
      padding: 10,
      width: '90%',
      borderWidth: 1,
      borderColor: '#d6d8f6',
   },
   absoluteIconPicker: {
      backgroundColor: '#384288',
      padding: 5,
      borderRadius: 100,
      bottom: 5,
      right: 5,
      position: 'absolute'
   },
   hidden: {
      position: 'absolute',
      opacity: 0,
      zIndex: -1,
   },
   headerContainer: {
      backgroundColor: '#19345E',
   },
   headerApp: {
      // height: 40,
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
      paddingHorizontal: 16,
   },
   headerTitle: {
      color: '#fff',
      fontSize: 18,
      fontWeight: '600',
   },
   headerSide: {
      width: 40,
      alignItems: 'center',
   },
   chip: {
      paddingVertical: 5,
      paddingHorizontal: 15,
      borderRadius: 5,
      // backgroundColor: "#F3F4F6",
      borderWidth: 1,
      borderColor: "transparent",
      marginRight: 10,
      marginBottom: 10,
   },
   chipSelected: {
      backgroundColor: "#f2f6ffff",
      borderColor: "#384288",
      borderWidth: 1,
   },
   chipText: {
      fontSize: 16,
      color: "#222",
   },
   chipTextSelected: {
      color: "white",
   },
   checkIcon: {
      position: "absolute",
      top: -6,
      left: -6,
      backgroundColor: "#384288",
      borderRadius: 10,
      padding: 2,
   },
   headerModalViewImg: {
      paddingTop: 50,
      paddingHorizontal: 16,
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
   },
   wrapHomeCarousel: {
      shadowColor: '#171717',
      shadowOffset: { width: 0, height: 4 },
      shadowOpacity: 0.15,
      shadowRadius: 8,
      elevation: 5,
   },
   modalOverlay: {
      flex: 1,
      backgroundColor: 'rgba(0, 0, 0, 0.6)',
      justifyContent: 'center',
      alignItems: 'center',
   },
   modalConfirmContainer: {
      width: '80%',
      borderRadius: 14,
      overflow: 'hidden',
      elevation: 2,
      shadowColor: '#000',
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: 0.25,
      shadowRadius: 3.84,
   },
   modalConfirmContent: {
      padding: 20,
      alignItems: 'center',
   },
   modalConfirmTitle: {
      fontSize: 18,
      fontWeight: 'bold',
      marginBottom: 8,
      textAlign: 'center',
   },
   modalConfirmMessage: {
      fontSize: 14,
      textAlign: 'center',
      lineHeight: 20,
   },
   modalConfirmDivider: {
      height: 1,
      width: '100%',
   },
   modalConfirmFooter: {
      flexDirection: 'row',
      height: 50,
   },
   modalConfirmButton: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
   },
   modalConfirmButtonText: {
      fontSize: 16,
   },
   modalConfirmVerticalDivider: {
      width: 1,
      height: '100%',
   },
   wrapGridItem: {
      borderWidth: 1,
      borderRadius: 5,
      padding: 10,
      flexDirection: 'row',
      alignItems: 'center',
      width: '48.5%',
      marginBottom: 10,
   },
   flex1: {
      flex: 1
   },
   flex2: {
      flex: 2
   },
   flexColumn: {
      flexDirection: 'column'
   },
   textCenter: {
      textAlign: 'center'
   },
   posAbsolute: {
      position: 'absolute'
   },
   zIndex1: {
      zIndex: 1
   },
   zIndexMinus1: {
      zIndex: -1
   },
   alignCenter: {
      alignItems: 'center'
   },
   itemsCenter: {
      alignItems: 'center'
   },
   justifyCenter: {
      justifyContent: 'center'
   },
   resizeContain: {
      resizeMode: 'contain'
   },
   resizeCover: {
      resizeMode: 'cover'
   },
   resizeStretch: {
      resizeMode: 'stretch'
   },
   textWhite: {
      color: 'white'
   },
   font16: {
      fontSize: 16
   },
   font26: {
      fontSize: 26
   },
   ph16: {
      paddingHorizontal: 16
   },
   alignStart: {
      alignItems: 'flex-start'
   },
   loadingCenter: {
      position: 'absolute',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      justifyContent: 'center',
      alignItems: 'center',
      zIndex: 999,
      backgroundColor: 'rgba(0,0,0,0.3)',
   },
   loadingBox: {
      paddingVertical: 15,
      paddingHorizontal: 40,
      borderRadius: 5,
      alignItems: 'center',
      gap: 10,
   },
   modalUpdateContainer: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      paddingHorizontal: 30,
      overflow: 'hidden',
   },
   modalUpdateDecorativeCircle1: {
      position: 'absolute',
      width: 300,
      height: 300,
      borderRadius: 150,
      backgroundColor: 'rgba(255, 255, 255, 0.05)',
      top: -50,
      right: -50,
   },
   modalUpdateDecorativeCircle2: {
      position: 'absolute',
      width: 200,
      height: 200,
      borderRadius: 100,
      backgroundColor: 'rgba(255, 255, 255, 0.03)',
      bottom: -30,
      left: -30,
   },
   modalUpdateContent: {
      width: '100%',
      alignItems: 'flex-start',
      zIndex: 1,
   },
   modalUpdateLogo: {
      width: 200,
      height: 100,
      marginBottom: 40,
      alignSelf: 'center',
   },
   modalUpdateTextContainer: {
      marginBottom: 40,
   },
   modalUpdateTitle: {
      fontSize: 32,
      fontWeight: 'bold',
      color: 'white',
      marginBottom: 20,
      lineHeight: 38,
   },
   modalUpdateDescription: {
      fontSize: 16,
      color: 'white',
      lineHeight: 24,
   },
   modalUpdateButtonContainer: {
      width: '100%',
      alignItems: 'center',
   },
   modalUpdatePrimaryButton: {
      width: '100%',
      paddingVertical: 15,
      borderRadius: 12,
      alignItems: 'center',
      justifyContent: 'center',
      marginBottom: 15,
      shadowColor: '#000',
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: 0.2,
      shadowRadius: 4,
      elevation: 3,
   },
   modalUpdatePrimaryButtonText: {
      fontSize: 16,
      fontWeight: 'bold',
   },
   modalUpdateSecondaryButton: {
      paddingVertical: 10,
   },
   modalUpdateSecondaryButtonText: {
      fontSize: 16,
      color: 'white',
      fontWeight: '500',
   },
})

export default Styles;