/**********************/
/*Window Sizes - Start*/
/**********************/
/*
* {
  justify-content: center;
}*/

.largeWindow,
.mediumWindow,
.smallWindow {
    margin: 1.5rem;
    filter: drop-shadow(#b8b8b9 0.4rem 0.4rem 2px);
    background-color: #D9D9D9;
    border-radius: 10px;
  
     margin: 1.5rem auto;
    
}

.largeWindow {
    width: calc(100vw - 3rem);
}

.mediumWindow {
    width: 60vw;

}

.smallWindow .windowTitle .titleP {

    font-size: medium;
    font-weight: 600;
    text-align: center;

}

.smallWindow {
    width: 30vw;
}



/********************/
/*Window Sizes - End*/
/********************/

/*Resize the window title*/

@media (max-width: 970px) {
    .mediumWindow .windowTitle .titleP {
        font-size: medium;
        font-weight: 600;
        text-align: center;
    }

    .smallWindow {
        width: 40vw !important;
    }
}

@media (max-width: 870px) {
    .smallWindow {
        width: 50vw !important;
    }
}

@media (max-width: 630px) {
    .windowTitle .titleP {
        font-size: large;
        font-weight: 600;
        text-align: center;
    }

    .smallWindow {
        width: 60vw !important;
    }
}

@media (max-width: 450px) {
    .smallWindow {
        width: 70vw !important;
    }
}



/***********************/
/*Window Header - Start*/
/***********************/

.windowTitle {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.windowHeader {
    display: flex;
    width: 100%;
    height: 40px;
    background-color: #D3CBCB;
    border-radius: 10px 10px 0px 0px;
    align-items: center;
}

.titleP {
    margin: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #3C3C43CC;
}

.squareBtnReduce,
.squareBtnClose .btnSearch {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border: 2px solid #3C3C43CC;
    height: 18px;
    width: 18px;
    border-radius: 3px;
    align-self: center;

}

.squareBtnReduce {
    margin-left: 10px;
}

.squareBtnClose,
.btnSearch {
    margin-right: 10px;
    cursor: pointer;
}

.btnSearch {
    margin-top: 5px;
}


.minusBtn,
.plusBtn,
.closeBtn {
    text-align: center;
    font-size: 1.5rem;
    line-height: 1rem;
    pointer-events: none;
}

.roundBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #3C3C43CC;
    height: 18px;
    width: 18px;
    border-radius: 50px;
    align-self: center;
    margin-left: 10px;
    margin-right: 10px;
    cursor: pointer;
}


.leftLines,
.rightLines {
    display: flex;
    flex-direction: column;

    gap: 3px;
    width: 25%;
    padding: 0 5px;
    justify-content: center;
}

.hl {
    display: block;

    height: 1px;
    background: #3C3C43CC;
    ;
    margin: 1px 0;
}

.hideClose .squareBtnClose {
    display: none;
}

dialog .squareBtnClose,
dialog[open] .squareBtnClose {
    display: flex !important;
    /* Make it visible inside dialogs */
}

/*********************/
/*Window Header - End*/
/*********************/

/************************/
/*Window Content - Start*/
/***********************/
.content {
    background-color: #D9D9D9;
    height: 65vh;
    border-radius: 0px 0px 10px 10px;
    padding: 2%;

}

/************************/
/*Window Content - Start*/
/***********************/



/*.carouselDiv .content{

    height:450px;
}*/

#addUserRole {
    background-color: transparent;
    border: 0;
    overflow: hidden;
}

#addUserRole .content {

    height: 20vh;
}

#addComputerManufacturer {
    background-color: transparent;
    border: 0;
    overflow: hidden;
}

#addManufacturer {
    background-color: transparent;
    border: 0;
    overflow: hidden;
}

#updatePasswordDialog {
    background-color: transparent;
    border: 0;
    overflow: hidden;
}

#registration .content {
    position: relative;
    overflow-y: auto;
    height: auto;
}

#addComputerManufacturer .content {
    display: flex;
    justify-content: center;
    height: 30vh;

}

#addManufacturer .content {
    display: flex;
    justify-content: center;
    height: 30vh;

}

#addSoftware .content,
#addEmulator .content{
    height: 70vh;
    overflow: hidden; 
}

#readMessage .content {
    height: 68vh;
    overflow-y: auto; 
}


#connect .titleP {
    font-size: 1.5rem;
    color: #3C3C43CC;
    font-weight: normal;
}


#forgottenPassword .content {
    height: auto;
    width: auto;
}

#about .titleP {
    font-size: 1.5rem;
    color: #3C3C43CC;
    font-weight: normal;
}

#connect .content {
    height: auto;

}

#computerList .content {
    height: 66vh;
    overflow: hidden;
}

#softwareList .content,
#softwareList .content {
    height: 66vh;
    overflow: hidden;
}

#about .content {
    height: auto;

}

#roleList .content {
    height: auto;
    overflow-y: auto;
}

#computerManufacturerList .content {
    height: auto;
    overflow-y: auto;
}

#manufacturerList .content {
    height: auto;
    overflow-y: auto;
}

#writeMessage .content {
    
    overflow-y: auto;
    height: 67vh;
}


#writeMessage .largeWindow{
    height:76vh;
}


#writeComment .largeWindow{
    width: 70vw;
    height:63vh;
}

#writeComment .content {
    overflow-y: auto;
    height: 51vh;
}

#gdpr .content{
     overflow-y: auto;
}

dialog[open] {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    max-width: 100vw;
    max-height: 45vh;
}

#about {
    justify-self: center;
    background-color: transparent;
    border: 0;
    overflow: hidden;
}

#aboutDialog .content {
    height: 50vh;
}

@media (max-width: 1000px) {
    #addSoftware .content,
    #addEmulator .content  {
        height: 72vh;
    }
}
@media (max-width: 800px) {
#writeComment .largeWindow{
    width: 90vw;
    height: 80vh;
    
}
#writeComment .content {
    height: 70vh;
}
}

@media (max-width: 700px) {
    .mediumWindow  {
       width: 90vw;
    }
}