*{
	padding: 0;
	margin: 0;
}

.dialingFrame{
    margin: 0;
    width: 100vw;
    height: 100vh;
    background-color: #fff;

    display: grid;
}

.dialingPart{
    width: 100vw;
    height:  85vh;
    margin-top: 4vh;
    background-color: #f1efef;

    display: grid;
    grid-template-columns: 45vw 10vw 45vw; /* 3 columns adding to 100vw but just use center bar the cancel icon */
    grid-template-rows: 85vh; /* stick to one now but split into multiple rows later */
}

#exitCall{
    grid-column: 1;
    margin: 2.5vh;

    height: 5vh;
    width: 5vh;
    background-image: url(../assets/crossIcon.png);
    background-repeat: no-repeat;
    background-size: 100%;

    transition: all 0.3s ease-in-out 0s;
}

#exitCall:hover {
    cursor: pointer;
    transform: rotate(360deg);
}

.dialingContent{
    grid-column: 2;

    display: grid;
    grid-template-columns: 10vw; /* using the middle section */
    grid-template-rows: 30vh 27vh 28vh; /* 3 rows adding to 85vh */
}

.personDialingPart{
    grid-row: 1;

    display: flex;
    justify-content: center;
}

#personDialingImage{
    margin-top: auto;
    margin-bottom: 0;
    width: 20vh;
    height: 20vh;
    background-image: url("../assets/match1.png");
    background-size: 100%;
}

.callDialing{
    grid-row: 2;
    margin-top: 5vh;
    display: grid;
    grid-template-columns: 8vw 2vw; /* adds to 10vw */
}

#callDialingText{
    grid-column: 1;

    text-align: center;
    font-family: Inter;
    font-size: 1.15rem;
}

#callDialingIcon{
    grid-column: 2;

    margin-top: 0.4vh;
    margin-left: 1vw;
    width: 2vh;
    height: 2vh;
    background-image: url("../assets/callIcon.png");
    background-size: 100%;
}

.endCallPart{
    grid-row: 3;
    display: flex;
    justify-content: center;
}

#endCallImage{
    margin-top: 0;
    width: 10vh;
    height: 10vh;
    background-image: url("../assets/endCall.png");
    background-size: 100%;
}

#endCallImage:hover{
    cursor: pointer;
    width: 10vh;
    height: 10vh;
    background-image: url("../assets/endCall2.png");
    background-size: 100%;
}