@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

html {
    width: 100%;
    height:auto;
}
body {
    width: 100%;
    margin: 0;
        padding: 0;
        height: 100%;
        display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body p
{
     
}

header
{
    width:100%;
}

.headerContainer
{
    
    width:100%;
    height:110px;
}

.logo
{
    float:left;
    height: auto;
}

.logo img{
    height:60px;
}


.mainContent
{
    width:100%;

    height:600px;
}

.rowContainer
{
    width: 100%;
    height: 80%;
   
   
    margin-bottom:50px;
}

#floatingtext
{
     position: absolute; /* Allows the element to be positioned relative to the container */
    top: 0; /* Position at the top of the container */
    left: 0; /* Start at the left edge */
    margin-left: 50px; /* Adds margin to the left */
    margin-top: 10px; /* Adds margin to the top */
    background-color: rgba(0, 0, 0, 0.5); /* Optional: semi-transparent background for readability */
    color: white; /* Text color */
    padding: 5px; /* Optional: padding around the text */
    z-index: 10; /* Ensure it stays on top of other content */
    font-size: 25px;
}


.row
{

height: 100%;
}

.streamingCodeText
{
}

.streamingCodeText p{
    font-size: 20px;
}

.statsViewContainer
{
    box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.3);
    height:500px;
    margin-top: 10%;
}

.statsViewContainerHeader
{
    text-align: center;
        font-family: 'Roboto', sans-serif;
        width: 100%;
        height: auto;
}

#statsViewContainerHeaderText
{
    font-size: 15px;
    padding-top: 30px;
}


.statsViewContainerLeft
{
    width:100%;
    height:100%;
    float:left;

}


.statsViewContainerRight{
    width: 30%;
    height: 100%;
    float: right;
    

}




.appscroll
{
   
    height:50%;
   
}

.imagesslider
{
    
    height:auto;
    width:100%;
    text-align: center;
    position:absolute;
    text-align: center;
    z-index: 10;
}

.imagesslider img
{
    margin: auto;
    display: inline-block; 
    height:300px;
}

.flatphonecontainer
{
    width:100%;
     position:absolute;
    margin-top:200px;
}

.flatphonecontainer img
{
    margin: auto;
    display: inline-block; 
    width:60%;
}

.featurescontainer
{
    
    height:auto;
    background-color: #f0f0f0;
     padding-bottom:100px;
}

#featurestextheader
{
    font-family: 'Arial', sans-serif; /* Clean and modern font */
    font-size: 24px; /* Adjust size for header */
    font-weight: bold; /* Make it bold for emphasis */
    margin: 20px 0; /* Space above and below the header */
    text-align: center; /* Center align the text */
    text-transform: uppercase; /* Uppercase letters for a header feel */
    letter-spacing: 1.5px; /* Spacing between letters */
    padding-bottom: 10px; /* Optional: Padding for spacing */
    color:#696969;
   
}

.featuredetailcontainer
{
   
}

.sorter
{
  background-color: #C8C8C8; /* Grey background color */
            color: #ffffff; /* White text color for contrast */
            padding: 20px; /* Space inside the div */
            border-radius: 8px; /* Rounded corners */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow */
            max-width: 600px; /* Maximum width for the div */
            margin: 20px auto; /* Center the div horizontally */
            text-align: center; /* Center text inside the div */
            margin-left:20px;
            margin-right:20px;
}

.plancontainer
{

            height:auto;

            
}

.freeplancontainer h4
{
  color:#696969;           
}


.freeplancontainer
{   margin-left:20px;
    margin-right:20px;
    padding:20px;
    height:auto;
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow */

}


.premiumplancontainer h4
{
  color:#ffffff;           
}

.premiumplancontainer
{   margin-left:20px;
    margin-right:20px;
    background: linear-gradient(45deg, #e78444, #efbb99); 
    height:auto;
    padding:20px;
    color: #ffffff; /* White text color for contrast */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow */
}


.featuredetailcontainer p
{
color:#000000;
}

.featuredetailcontainer h4
{
color:#000000;
}



.featuredetailcontainer img
{
    width:100%;
    height:auto;
}

#featuredetailtext
{
    width:100%;
    height:auto;
    padding-left:30px;
    padding-right:30px;
}


.planfragmentdetailscontainer
{
    margin-top:20px;
    height:100%;
    padding-bottom:20px;
}
.planfragmentdetailscontainer h4
{
 margin-top:5px;
 margin-bottom:20px;
}

.planfragmentdetailscontainer h5
{
 margin-top:5px;
 margin-bottom:20px;
}

.planfragmentdetailscontainer img
{
 height:20px;
 margin-right:5px;
}

.pricingdiv
{
    height:100px;
    text-align: center;
    padding:20px;
}


.pricingtext
{
    font-size: 1.5em; /* Adjust the size of the text */
            font-weight: bold; /* Make the text bold */
            color: #808080; /* Grey color */
            background-color: #f5f5f5; /* Light grey background for contrast */
            padding: 10px 20px; /* Padding around the text */
            border: 2px solid #cccccc; /* Light grey border */
            text-align: center; /* Center text inside the element */
            display: inline-block; /* Make the tag fit around its content */
            margin: 10px 0; /* Space above and below the tag */
}




.discoverimage img
{
    height:400px;
}

.interesteddiv
{
    padding:30px;
    background: linear-gradient(to bottom, #d3d3d3, #f5f5f5); /
}

.interesteddiv
{
  font-size: 18px;
}


.firstimage
{
    height:auto;
    width:40%;
}






.statsbapscrollcontainer
{
    margin-left: 10px;
    margin-right: 10px;
    height: 60%;
        overflow-x: hidden;
        overflow-y: auto;
        text-align: justify;
        border-left: 3px solid #007bff;

}
.statsbapscrollcontainer::-webkit-scrollbar {
    width: 8px;
    /* Adjust the width as needed */
}

.statsbapscrollcontainer::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3);
    /* Customize thumb color */
}

.statsbapscrollcontainer::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0.1);
    /* Customize track color */
}

/* For Firefox */
.statsbapscrollcontainer {
    scrollbar-width: thin;
    /* Thin scrollbar */
    scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.1);
    /* Thumb and track color */
}

.statusContainer
{
    width:100%;
    height:auto;
}

.statusBarscontainer
{
    width:100%;
    height:auto;
    padding-left: 10px;
    float:left;
}

.statusBarAdsNumbercontainer
{
    width:50%;
    float:left;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.statusBarDeviceNumerscontainer {
    width: 50%;
    float:right;
justify-content: center;
    align-items: center;
    text-align: center;
}


.adsnumberloading-bar {
    width: 100px;
    height: 10px;
    background-color: #ddd;
    border-radius: 10px;
    overflow: hidden;
    margin:auto;
}

.adsnumberbar {
    width: 0;
    height: 100%;
    background-color: #6f6bf3;
    transition: width 0.5s ease;
}


.devicenumberloading-bar {
    width: 100px;
    height: 10px;
    background-color: #ddd;
    border-radius: 10px;
    overflow: hidden;
    margin: auto;
}

.devicenumberbar {
    width: 0;
    height: 100%;
    background-color: #6f6bf3;
    transition: width 0.5s ease;
}

.statusBarText
{
    font-size: 12px;
    margin-bottom: 6px;
}


.numbersstatics
{
    width:100%;
    height:100px;
    float:right;
    margin-top:30px;
}

.TotalAdsPlayedContainer
{
        width: 50%;
        height: 100px;
        float: left;
        text-align: center;
}

.TotalAdsPlayedContainer p
{
    font-size: 12px;
}

.ActiveAdsPlayedContainer {
    width: 50%;
    height: 100px;
    float: right;
    text-align: center;
}

.ActiveAdsPlayedContainer p{
font-size: 12px;
}


.centeredNumber
{
    display: flex;
    justify-content: center;
    align-items: center;
    width:100%;
    
}


#TotalAdsPlayednumber
{
font-size: 20px;
}

#ActiveAdsPlayedNumber
{
font-size: 20px;
}

.devicesViewContainer
{
    height:auto;
    width:100%;
    margin-top:10%;
    box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.3);
}

.mediaScrollContainer
{
    height:900px;
    width:80%;
    
    float:right;
    margin-top: 10%;
    box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.3);
}

.devicesViewContainerHeader
{
    text-align: center;
    font-family: 'Roboto', sans-serif;
    width:100%;
    height:auto;
}

#devicesViewContainerHeaderText{
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    float:left;
    margin-left:30px;
    
}



.devicesViewAllDevicesContainer
{
    height:40%;
    margin-top:5%;
    padding:20px;
}

.devicesViewAllDevicesContainerrow
{
    height:120px;
}

.deviceLeft
{
    width:50%;
    float:left;
    padding:10px;
    height:auto;
    
}

.deviceLeftcontainer
{
    height:100%;
    width:100%;
    box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.3);
}

.deviceRight {
    width: 50%;
        float: right;
        padding: 10px;
        height: 100%;
}

.deviceRightcontainer {
    height: auto;
    width: 100%;
    box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.3);
}


.scrollMediaScrollcontainer
{
    height:80%;
    width:100%;
    padding-left: 15%;
    padding-right: 15%;
}


.scrollMedia
{
    height: 100%;
    width: 100%;
    margin: 4px, 4px;
        padding: 4px;
        overflow-x: hidden;
        overflow-y: auto;
        text-align: justify;
}

/* For WebKit-based browsers like Chrome and Safari */
.scrollMedia::-webkit-scrollbar {
    width: 8px;
    /* Adjust the width as needed */
}

.scrollMedia::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3);
    /* Customize thumb color */
}

.scrollMedia::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0.1);
    /* Customize track color */
}

/* For Firefox */
.scrollMedia {
    scrollbar-width: thin;
    /* Thin scrollbar */
    scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.1);
    /* Thumb and track color */
}


.streamingdeviceimagecontainer
{
float: left;
width: 40%;
height:100%;
display: flex;
    justify-content: center;
    align-items: center;

}
.streamingdeviceimage
{
    height: 50px;
    margin-top: 10px;
    margin-left: 10px;
}

.streamingdevicedetails
{
    height:100%;
    overflow: hidden;
}

.detailsContainer
{
    width:100%;
    margin-bottom: 3px;
    height:100%;
    
}

.detailsContainer p
{
    margin-top: 5px;
    font-size: 12px;
    margin-left: 5px;
    margin-bottom: 5px;
    font-family: 'Roboto', sans-serif;
    color: #989898;
    
}

.mediaContainer
{
    height:150px;
    width:100%;
   margin:10px;
    text-align: center;
    cursor: pointer;
    margin-right: 10px;
}

.mediaContainer img{
height: 80px;
}

.mediaContainer video{
height: 80px;
}

.col-md-6
{
    height:600px;
}

.mediaContainerImageandTextcontainer {
    margin: 10px;
    box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.3);
    height: 100%;
}

.mediaContainerImageandTextcontainer:hover {
    opacity: 0.5;

}

#allMediaHtmlString {
    opacity: 0;
    transition: opacity 1s ease; /* Transition effect for opacity */
}

/* CSS for the div when it's faded in */
#allMediaHtmlString.fade-in {
    opacity: 1;
}


.mediaContainerImagecontainer
{
    float:left;
    width:40%;
    height:auto;
    height: 100%;
    display: grid;
    place-items: center;

}


.mediaContainerTextcontainer
{
width: 60%;
height:100%;
display: grid;
place-items: center;
padding:2px;
overflow: hidden;

}

.mediaContainerTextcontainer p{
    word-wrap: break-word;
    font-size: 12px;
}

.mediaaddbuttoncontainer {
    margin: 10px;
    box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.3);
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

}

.mediaaddbuttoncontainer:hover {
   opacity: 0.5;

}

.col-md-6
{
height:auto;
}
.row
{
    height:auto;
}






 .bapcontainer
 {
    width:100%;
    height:auto;
    margin-top:20px;
    box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.3);
 }

 .bapcontainerrow
 {
    height:auto;
    
 }
 .enddivider
 {
    background-color: black;
    width:100%;
    height:20px;
 }


 .sharingbapcontainer
 {
    width:100%;
    padding:5px;
 }

 .sharingbapdetailcontainer
 {
    width:100%;
 }

 .sharingbap
 {
    width:250px;
    height:100%;
 }

 .sharingbap:hover
 {
    background-color: grey;
    cursor: pointer;
    color:white;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
 }



 .sharingbapImagecontainer
 {
    width:60px;
    height:60px;
    float:left;
   
    
 }

 .sharingbapImagecontainer img{
     width: 100%;
     height:100%;
     float:left;
      border-radius: 60px;
 }

 .sharingbapname
 {
    font-size: 12px;
    padding-left:10px;
    margin-bottom: 0;
        font-family: 'Roboto', sans-serif;
 }

 .sharingmediacontainer
 {
    width:100%;
    height:auto;
 }


  .sharingmediacontainer img
 {
    height:100px;
 }

   .sharingmediacontainer video
 {
    height:100px;
 }


 .streamingdevicedetails #detailtextViewMore
 {
    color:#6f6bf3;
 }


  .UserInteraction
  {
    float:right;
    width:25%;
    height:100%;
  }

  .userinteractionbuttonscontainer
  {
    width:auto;
    height:auto;
    float: left;
    margin-top: 10px;
    margin-right: 10px;
  }

  .userinteractionbutton
  {
    margin-top: 10px;
    height:100%;
    width:auto;
    float:left;
    margin-left: 10px;
    margin-right: 10px;
    cursor: pointer;
  }



  #tagimage
  {
    height:20px;
  }


 
  .suggestedfriendsheader
  {
    width:100%;
    text-align: center;
  }
   .suggestedfriendsheader p{
   }

   .suggestedbapcontainer
   {
    height:60px;
    margin-bottom: 20px;
    display: flex;
        justify-content: center;
        align-items: center;
   }

   .suggestedbap
   {
    height:100%;
   }

   .suggestedbapImage
   {
    float: left;
    height: 100%;
    width: auto;
   }
   .suggestedbapImage img{
     height: 100%;
     cursor: pointer;
    }
    .suggestedbapImage img:hover{
     height: 110%;
    }

    .suggestedbapdetails
    {
        width:auto;
        height:100%;
        float:right;
    }
    .suggestedbapdetailsdetails
    {
        width:100%;
        height:50%;
    }

        .suggestedbapdetailsdetails p{
            margin-left:10px;
            cursor: pointer;
        }

        .suggestedbapdetailsdetails p:hover{
            margin-left:10px;
            color:black;
        }


        .bapbutton {
            display: inline-block;
            padding: 2px 4px;
            font-size: 12px;
            text-align: center;
            text-decoration: none;
            cursor: pointer;
            border: 2px solid #7420ff;
            color: #7420ff;
            background-color: #fff;
            border-radius: 4px;
            width: 100px;
            transition: background-color 0.3s, color 0.3s;
            margin-left:10px;
            height:25px;
        }
        
        .bapbutton:hover 
        {
            color: white;
            background-color: #7420ff;
        }


 #viewmoresuggestedbap
 {
    color:blue;
    font-size: 12px;
 }

 #messagebutton
 {
    height:35px;
 }

#messagebutton:hover {
  cursor: pointer;
}

 #streamrequestbutton
 {
    height:35px;
 }
#streamrequestbutton:hover {
  cursor: pointer;
  height:40px;
}

 #notificationbutton
  {
    height:35px;
  }

   #notificationbutton:hover
  {
    cursor: pointer;
  }




.UploadFloatingDiv {
    width: 50%; /* Adjust as needed */
    height: auto; /* Adjust as needed */
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 1); /* Reduced opacity */
    padding: 20px;
    text-align: center;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 200;
    overflow: hidden;
    display:none;
}

.overlayContainer
{
    width: 400px; /* Adjust as needed */
    height: 150px; /* Adjust as needed */
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 1); /* Reduced opacity */
    text-align: center;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 200;
    overflow: hidden;
    display:none;
}

.overlayMessageContainer
{
height:60%;
width: 100%;
padding:10px;
}

.overlayMessageContainer p
{
margin-top:10px;
}

.overlaybuttonsContainer
{
    width: 100%;
}

.overlaybuttons
{
margin:10px;
width:100px;
}

.uploadFormContainer
{
    width:100%;
    height:auto;
    overflow: hidden;
}

.uploadFormContainerLeft
{
    float:left;
    width:40%;
    padding:20px;
    height:300px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
    border: 1px solid #ccc;
    border-radius: 5px;

      display: flex;
    justify-content: center;
    align-items: center;
    
}

#addplaceholderimage
{
    display: inline;
    cursor: pointer;
}

#addplaceholderimage:hover
{
    opacity: 0.4;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
}


.uploadFormContainerLeft img
{
    max-width: 100%;
            max-height: 100%;
            display: none;
}

.uploadFormContainerLeft video
{
    max-width: 100%;
            max-height: 100%;
            display: none;
}

.uploadFormContainerRight
{
    float:right;
    width:60%;
    text-align: left;
    
}


.uploadFormContainerRightbuttonContainer
{
width:100%;
margin:10px;
text-align: center;


}


.uploadFormContainerRight p
{
margin-left:10px;
margin-top:0px;
margin-bottom:5px;
}

.uploadFormContainerRightbuttonContainer button
{
display: inline-block;
            padding: 2px 4px;
            font-size: 18px;
            text-align: center;
            text-decoration: none;
            cursor: pointer;
            border: 2px solid #7420ff;
            color: #7420ff;
            background-color: #fff;
            border-radius: 4px;
            width: 100px;
            transition: background-color 0.3s, color 0.3s;
            margin-left:10px;
            height:40px;
}




#uploadButton.disabled {
    opacity: 0.5; /* Reduce opacity for disabled appearance */
    pointer-events: none; /* Disable pointer events to prevent clicks */
    cursor: not-allowed; /* Change cursor to indicate button is disabled */
}


.uploadFormContainerRightbuttonContainer button:hover 
        {
            color: white;
            background-color: #7420ff;
        }


#uploadFormcloseButton {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
     border: none; /* Remove border */
    background-color: transparent; /* Remove background color */
    
}


.uploadloadercontainer
{
    position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: inline;
        z-index: 1200;
}

.uploadloader {

    border: 6px solid #f3f3f3;
    border-top: 6px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin: 20px auto;
    z-index: 1100;
}

.deviceviewcontainertextandrefresh
{
    width:100%;
    height:auto;
    padding:20px;
}

.refreshOnlineDevicesImage
{
    height:30px;
    float:right;
    display:none;
}

.refreshOnlineDevicesImage:hover
 {
            cursor: pointer;
            opacity: 0.5;
}

.devicesViewAllDevicesContainerLoading
 {
width:100%;
height:auto;
display: grid;
place-items: center; 
 }

 .spinningLoadinImage {
    height:30px;
    animation: spin 2s linear infinite; /* Adjust the duration and timing function as needed */
}

.devicesViewAllDevicesContainerNoDevice
{
width:100%;
height:150px;
display: grid;
place-items: center; 
display:none;
}



@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes fadeInAnimationforDevices {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


#uploadloadertext{
font-size: 16px;
}



.generalloadercontainer
{
    position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: none;
        z-index: 1200;
}

.generalloader {

    border: 6px solid #f3f3f3;
    border-top: 6px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin: 20px auto;
    z-index: 1100;
}



#generalloadertext{
font-size: 16px;
}


#updateButton
{
display: none;
}
#deleteButton
{
  display: none;  
}

.NoMediaContainer {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 150px; /* Adjust the height as needed */
        color:#989898;
    }

        /* Basic styles for the dropdown */
    .transitiondropdown {
        width: 200px; /* Adjust width as needed */
        color:#989898;
    }

    /* Styles for the dropdown options */
    .transitiondropdown option {
        padding: 10px;
    }

    #uploadFileSizeLengthInput
    {
        width:40px;
    }

    .headerContainercolored
    {
        width:100%;
        height:80px;
        position: fixed;
        z-index: 10;

    }

    .logoText
    {
color: black;
font-size: 45px;
font-weight: bold;
    }

    .headerContainerfixed
    {
       width:100%;
        height:80px;
        position: fixed;
        background-color: none;

  
    }


.suggestedFriendslider-container
{
    width:100%;
    height:250px;
     display: flex;
    justify-content: center; /* Horizontally center */
    align-items: center; /* Vertically center */
}


.suggestedFriendcontainer
{
    width:40%;
    height:100%;
    border-radius: 10px;
    justify-content: center; /* Horizontally center */
    align-items: center; /* Vertically center */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
    overflow: hidden;
    color: #989898;
}

.suggestedFriendcontainer p
{
   color: #989898;
}


.suggestedFriendcontainer2
{
    height:100%;
    border-radius: 10px;
    justify-content: center; /* Horizontally center */
    align-items: center; /* Vertically center */
    overflow: hidden;
    color: #989898;
}

.suggestedFriendcontainer2p
{
   color: #989898;
}


.suggestedbapimagecontainer
{
    width:100%;
    cursor: pointer;
}

.suggestedbapimagecontainer img
{
width:100px;
border-radius: 20px;
}

.suggestedbapnamecontainer
{
    width:100%;
    font-size: 15px;
    font-weight: bold;
    font-family: 'Roboto', sans-serif;
    cursor: pointer;
}

.suggestedbapnamecontainer :hover
{
    color:black;
}

.suggestedbaptypecontainer
{
    width:100%;
    font-size:12px;
}

.suggestedbaplocationcontainer
{
   width:100%;
    font-size:12px; 
    margin-bottom:5px;
}

.suggestedFriendcontainerLeftbutton
{
    display: flex;
    justify-content: center; /* Horizontally center */
    align-items: center; /* Vertically center */
    width:10%;
    height:100%;
    float:left;
    left:0px;
}
.suggestedFriendcontainerLeftbutton img
{
    height:30px;
}


.suggestedFriendcontainerRightbutton
{
    display: flex;
    justify-content: center; /* Horizontally center */
    align-items: center; /* Vertically center */
    width:10%;
    height:100%;
    float:right;
    right:0px;
}

.suggestedFriendcontainerRightbutton img
{
    height:30px;
}

.circle {
  position: absolute;
  border-radius: 50%;
  background-color: grey;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
}

.circlecontainer {
  position: relative;
  width: 450px;
  height: 250px;
 

}


.bapcirclescontainer
{
    width:100%;
    height:auto;
      display: flex;
  justify-content: center;
  align-items: center;
}


.nofriendscontainer
{

    height:100%;
    width:100%;
   display: flex;
  justify-content: center;
  align-items: center;

}


.nofriendscontainer p
{
    color:#989898;
}


.viewmoresuggestioncontainer
{
    width:100%;
    padding:10px;
}

.viewmoresuggestioncontainer p
{
    color:#007bff;
    cursor: pointer;
}

.viewmoresuggestioncontainer p:hover
{
    color:grey;
}  

.viewAllfriendscontainer p
{
    color:#007bff;
    cursor: pointer;
}

.viewAllfriendscontainer p:hover
{
    color:grey;
}


.noSuggestions-container
{
    width:100%;
    height:200px;
    display: flex;
  justify-content: center;
  align-items: center;
  color:#989898;
}


.indexpage
{
    display:inline;
}
.notificationpage
{
    display:none;
}
.messagepage
{
    display:none;
}


.messagepage
{
    height:900px;
}

.menuuserimage
{
    height:50px;
    border-radius: 100px;
}

.accountoptionscontainer
{
    width:100%;
    display:none;
    height:auto;
    margin-top:60px;
    background-color: grey;
    box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.3);
}

.accountoptionoption
{
    width:100%;
    color:white;
    height:auto;
    padding-top:10px;
    padding-bottom:10px;
    padding-left:10px;
    cursor: pointer;
}

.accountoptionoptionheader
{
    width:100%;
    height:auto;
    padding-top:10px;
    padding-left:10px;
    cursor: pointer;
    background-color: white;
}

#accountoption
{
margin:0px;
}

#accountoption:hover
{
    background-color: white;
    color:black;
}


#accountoptionusername
{
   margin:0px; 
}

#accountoptionusertype
{
    font-size: 12px;
}

.viewimage
{
    height:20px;
    margin-left:10px;
}


.dashboardvideo video
{
    width:100%;
    height:auto;
}

.videoheader
{
    margin:10px;
}
.statsViewContaineractive
{
width:100%;
height:200px;
    display: flex;
    overflow: auto;
}


.backbuttontopcontainer
{
    height:80px;
    width:60px;
    z-index: 20;
    float:left;
    cursor: pointer;
}

.backbuttontopcontainer img
{
    margin-top:20px;
    margin-left:10px;
    width:40px;
    height:auto;
    display:none;
}

.uploadshareddetailsdiv
{
    width:100%;
    height:auto;
    float:right;
    padding-left:10px;
    border-top: 1px solid #989898; 
    padding: 20px; 
    display:none;
}


#uploadActiveStreamingStatus
{
    height:25px;
}

#olduploadActiveStreamingStatus
{
    height:25px;
}


#streamingchangebtn
{
  display: inline-block;
            padding: 2px 4px;
            font-size: 12px;
            text-align: center;
            text-decoration: none;
            cursor: pointer;
            border: 2px solid #7420ff;
            color: #7420ff;
            background-color: #fff;
            border-radius: 4px;
            width: 60px;
            transition: background-color 0.3s, color 0.3s;
            margin-left:10px;
            height:auto;  
}

 #streamingchangebtn:hover 
        {
            color: white;
            background-color: #7420ff;
        }

#oldstreamingchangebtn
{
  display: inline-block;
            padding: 2px 4px;
            font-size: 12px;
            text-align: center;
            text-decoration: none;
            cursor: pointer;
            border: 2px solid #7420ff;
            color: #7420ff;
            background-color: #fff;
            border-radius: 4px;
            width: 60px;
            transition: background-color 0.3s, color 0.3s;
            margin-left:10px;
            height:auto;  
}

 #oldstreamingchangebtn:hover 
        {
            color: white;
            background-color: #7420ff;
        }



.streamsetupFloatingDiv
{
    width: 20%; 
    height: 600px; 
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
    padding: 20px;
    text-align: center;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 201;
    overflow: hidden;
    color:#989898;  
    display:none;
}

.streamsetupFloatingDivclosebtncontainer
{
    width:100%;
    padding:10px;
    text-align: right;
}

.floatingdivclosebtn
{
height:30px;
cursor: pointer;
}

.newstreambapsetup
{
    width:100%;
    height:80%;
    overflow-y: auto;
    margin-top:20px;
    
}

.newstreambapselectable
{
    margin-bottom:10px;
    width:100%;
    height:60px;
    text-align: left;
}

.newstreambapselectable p
{
    margin-left:60px;
}

.newstreambapselectable img
{
    height:50px; 
    float:left; 
    border-radius: 100px;
}



.streamsetupFloatingDivBAPselectokbtn
{
 display: inline-block;
            padding: 2px 4px;
            font-size: 12px;
            text-align: center;
            text-decoration: none;
            cursor: pointer;
            border: 2px solid #7420ff;
            color: #7420ff;
            background-color: #fff;
            border-radius: 4px;
            width: 60px;
            transition: background-color 0.3s, color 0.3s;
            margin-left:10px;
            height:auto;  
}

 .streamsetupFloatingDivBAPselectokbtn:hover 
        {
            color: white;
            background-color: #7420ff;
        }


.updatestreampageselectbtn
{
   display: inline-block;
            padding: 2px 4px;
            font-size: 12px;
            text-align: center;
            text-decoration: none;
            cursor: pointer;
            border: 2px solid #7420ff;
            color: #7420ff;
            background-color: #fff;
            border-radius: 4px;
            width: auto;
            transition: background-color 0.3s, color 0.3s;
            margin-left:10px;
            height:auto;  
} 



.streamshareswitch {
  position: relative;
  width: 60px;
  height: auto;
  margin-left:10px;
  display:none;
  
}


.streamshareslider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}



.streamshareslider:before {
  position: absolute;
  content: "";
  height: 25px;
  width: 25px;
  left: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .streamshareslider {
  background-color: #7420ff;;
}

input:focus + .streamshareslider {
  box-shadow: 0 0 1px #7420ff;;
}

input:checked + .streamshareslider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.streamshareslider.round {
  border-radius: 34px;
}

.streamshareslider.round:before {
  border-radius: 50%;
}


.noindexstreammedia
{
    height:100%;
    width:100%;
    display: flex;
  justify-content: center;
  align-items: center;
}


.mediaContainer .mediasidebarsharginstatusimage
{
    height:25px;
}

#updatestreamingtbpspage img
{
    height:30px;
    cursor: pointer;
}

#updaterequestsbpspage img
{
    height:30px;
    cursor: pointer; 
}

.indexstreammediaviewallcontainer
{
    width:100%;
    height:auto;
    display: flex;
    justify-content: center;
    align-items: center;
}


indexstreamviewall
{
    cursor: pointer;
}


 .bapsuggestioncontainer
  {
    height:100%;
    text-align: center;
   

  }

.firstimagecontainer
{
}


.firstimagecontainer img
{
width:100%;
height:auto;
}

.newclient
{
  
    height:300px;
    width:100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top:20px;
    margin-bottom: 20px;
    background: linear-gradient(to left, #fff, #5C4033);
}


.newclient:hover
{
    cursor: pointer;
  background:  #5C4033;
}


.newclientaddtext
{
    font-size: 25px;
    font-weight: bold;
    color: white;
   text-shadow: 
                -1px -1px 0 #000,  
                1px -1px 0 #000,  
                -1px 1px 0 #000,  
                1px 1px 0 #000;
}




.mobileappimagecontainer
{
    height:300px;
    width:100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top:20px;
    margin-bottom: 20px;
}



.mobileappimagecontainer img
{
    height:100%;
}

.flatphone
{
    height:300px;
    width:100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top:20px;
    margin-bottom: 20px;
}

.flatphone img
{
    height:140px;
}


.searchclienttext
{
    font-size: 25px;
     font-weight: bold;
         color: white;
     text-shadow: 
                -1px -1px 0 #000,  
                1px -1px 0 #000,  
                -1px 1px 0 #000,  
                1px 1px 0 #000;

}



.userprofile
{
    height:100px;
    text-align: center;
    width:100%;
     display: flex;
    justify-content: center;
    align-items: center;
   
}

.promotioncontainer
{
 width:100%;
 height:auto;
}

.promotioncontainer li
{
font-size: 12px;
}

.userprofile p
{
    float:right;
    margin-right:20px;
    font-size: 30px;
}


.userprofile img
{
    height:100px;
   width:100px;
   float:left;
}


.bapcontainerwithoutshadow
{
    box-shadow: none;
}


.footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    position: relative;
    bottom: 0;
    width: 100%;
    height:auto;
}

.footer input{
    width:300px;
}


.footer button{
    width:300px;
}



.allContainer
{
    flex: 1;
    width:100%;
}


.promotiontext
{
    width:100%;
    height:auto;
     display: flex;
    justify-content: center;
    align-items: center;
}


.promotion-rounded-button {
    background-color: #5C4033; /* Green background */
    border: none; /* Remove borders */
    color: white; /* White text */
    padding: 15px 32px; /* Some padding */
    text-align: center; /* Centered text */
    text-decoration: none; /* Remove underline */
    display: inline-block; /* Make the button inline-block */
    font-size: 16px; /* Increase font size */
    margin: 4px 2px; /* Some margin */
    cursor: pointer; /* Pointer/hand icon */
    border-radius: 50px; /* Rounded corners */
    transition: background-color 0.3s; /* Smooth transition for hover effect */
}

.promotion-rounded-button:hover {
    background-color: black; /* Darker green on hover */
    color: white; /* White text */
}

.mobileappimagecontainer img
{
    height:200px;
    bottom-margin:0px;
}





.social-buttons {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 20px;
        }

        .social-buttons a {
            text-decoration: none;
            color: white;
            padding: 10px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
        }

        .facebook {
            background-color: #3b5998;
        }

        .instagram {
            background-color: #e4405f;
        }

        .twitter {
            background-color: #1da1f2;
        }



        .newslettersignup
        {   padding-top:10px;
            padding-bottom:10px;
            width:100%;
        }





.addnewclient
{
    height:100px;
    text-align: center;
    width:100%;
    justify-content: center;
    align-items: center;
   
}





/*camera works
.camera-container {
    text-align: center;
}

video {
    border: 1px solid #ccc;
    border-radius: 8px;
    margin-bottom: 10px;
    width: 100%;
    max-width: 400px;
}

button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 10px;
}

button:hover {
    background-color: #45a049;
}

img {
    border: 1px solid #ccc;
    border-radius: 8px;
    margin-top: 10px;
    width: 100%;
    max-width: 400px;
}

*/

.customerProfileImageContainer
{
    background-color: red;
    display:flex;
    height:auto;
    overflow-x: auto;
}

.customerProfileImageContainer img
{
    height:200px;
}



.newclientformcontainer
{
   
}


form {
    display: flex;
    flex-direction: column;
    margin-left:50px;
     margin-right:50px;
      text-align: left;
}

.form-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    display: flex;
    flex-direction: column;

    
}


.extendedrowcontainer
{
    height:auto;   /*  need to change after images gets */
    margin-top:60px;
}


input {
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    width:100%;
}





.slideshow-container {
    position: relative;
    max-width: 800px;
    overflow: hidden;
    margin: auto;
    height:250px;
    background: linear-gradient(to right, #000000, #5C4033);
    border-radius: 300px;
    display:none;
}

.mySlides {
    display: inline;
    position: absolute;
    width: 100%;
}

.mySlides img {
    width: auto;
    height:250px;
    vertical-align: middle;
}

.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    user-select: none;
}

.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.prev {
    left: 0;
    border-radius: 0 3px 3px 0;
}

.prev:hover, .next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.slide {
    animation-duration: 1s;
    animation-name: slide;
}

@keyframes slide {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0%);
    }
}

.slide-reverse {
    animation-duration: 1s;
    animation-name: slide-reverse;
}

@keyframes slide-reverse {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0%);
    }
}




.cameracontainer
{
    position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height:auto;
        width:40%;
        z-index: 1200;
        background-color: grey;
        display:none;
}


video {
    border: 1px solid #ccc;
    border-radius: 8px;
    margin-bottom: 10px;
    width: 100%;
    height:50%;


}

.canvascontainer
{
    width:100%;
    display:flex;
    overflow-x: auto;
    margin-bottom:20px;
}

.captured-image
{
    height:100px;
    width:auto;
    margin-left:10px;
    margin-right: 10px;
}


.camerabuttonscontainer
{
    text-align: center;
}


#clickpicture
{
    background-color: #5C4033;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 50px;
  transition: background-color 0.3s;
}

#switchcameraimagebtn
{
    height:50px;
    width:auto;
    margin-left:20px;
    cursor: pointer;
}



.canceldonebtncontainer
{
    background-color: red;
    width:100%;
    padding-left: 10px;
    padding-right:10px;
}


#cameracancelbtn
{
    float:Left;
    height:40px;
    margin:10px;
    cursor: pointer;
}


#cameradonebtn
{
    float:right;
     background-color: #4CAF50; /* Green background */
    border: none; /* Remove borders */
    color: white; /* White text */
    padding: 15px 32px; /* Some padding */
    text-align: center; /* Center the text */
    text-decoration: none; /* Remove underline */
    display: inline-block; /* Make the button inline-block */
    font-size: 16px; /* Increase font size */
    margin: 4px 2px; /* Add some margin */
    cursor: pointer; /* Add a pointer cursor on hover */
    border-radius: 12px; /* Rounded corners */
    transition-duration: 0.4s; /* Transition effect */
}

#opencamerabtnimage
{
    cursor: pointer;
}


.searchresultcontainers
{
    height:600px;
    overflow-y: auto;
    
}


.searchresultclient
{
    background-color: #5C4033;
    padding-top: 4px;
    padding-bottom: 4px;
   margin-bottom:10px;
   cursor: pointer;
   transition-duration: 0.4s; /* Transition effect */
}


.searchresultclient:hover
{
    background-color: #000000;
}


.searchresultclient p
{
    margin:20px;
    color:white;
}


#searchresultclientfullname
{
    font-size: 35px;
}

#searchresultclientfullname
{
    font-size: 25px;
}

.cleitnsearchbuttoncontainer
{
    height:auto;
    width:100%;
    text-align: center;
}

#searchclientbutton
{
     background-color: #5C4033; /* Green background */
    border: none; /* Remove borders */
    color: white; /* White text */
    padding: 15px 32px; /* Some padding */
    text-align: center; /* Center the text */
    text-decoration: none; /* Remove underline */
    display: inline-block; /* Make the button inline-block */
    font-size: 16px; /* Increase font size */
    margin: 4px 2px; /* Add some margin */
    cursor: pointer; /* Add a pointer cursor on hover */
    border-radius: 12px; /* Rounded corners */
    transition-duration: 0.4s; /* Transition effect */
}

#searchclientbutton:hover
{
    background-color: #000000;
}


.footer button{
     background-color: #5C4033; /* Green background */
    border: none; /* Remove borders */
    color: white; /* White text */
    padding: 15px 32px; /* Some padding */
    text-align: center; /* Center the text */
    text-decoration: none; /* Remove underline */
    display: inline-block; /* Make the button inline-block */
    font-size: 16px; /* Increase font size */
    margin: 4px 2px; /* Add some margin */
    cursor: pointer; /* Add a pointer cursor on hover */
    border-radius: 12px; /* Rounded corners */
    transition-duration: 0.4s; /* Transition effect */
}

.footer button:hover
{
    background-color: #000000;
}

.form-container button{
       background-color: #5C4033; /* Green background */
    border: none; /* Remove borders */
    color: white; /* White text */
    padding: 15px 32px; /* Some padding */
    text-align: center; /* Center the text */
    text-decoration: none; /* Remove underline */
    display: inline-block; /* Make the button inline-block */
    font-size: 16px; /* Increase font size */
    margin: 4px 2px; /* Add some margin */
    cursor: pointer; /* Add a pointer cursor on hover */
    border-radius: 12px; /* Rounded corners */
    transition-duration: 0.4s; /* Transition effect */ 
}


.form-container button:hover
{
    background-color: #000000;
}


.attribute
{
    font-size: 8px;
    color:#000;
}